Spaces:

Alsmwal
/

UniversityAI

Runtime error

App Files Files

Alsmwal commited on Jan 17

Commit

60ac85c

verified ·

1 Parent(s): 65e3c0d

Update forgot-password.html

Browse files

Files changed (1) hide show

forgot-password.html +116 -13

forgot-password.html CHANGED Viewed

@@ -16,6 +16,10 @@
             --olive-light: #3A662A;
             --bg-light: #FFFFFF;
             --text-light: #2C2C2C;
         }
         body {
@@ -24,10 +28,19 @@
             display: flex;
             align-items: center;
             justify-content: center;
             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
             color: var(--text-light);
         }
         .container {
             width: 100%;
             max-width: 450px;
@@ -35,10 +48,18 @@
         }
         .card {
-            background: white;
             padding: 40px;
             border-radius: 15px;
             box-shadow: 0 10px 40px rgba(0,0,0,0.1);
         }
         .header {
@@ -82,6 +103,17 @@
             transition: all 0.3s ease;
         }
         input:focus {
             outline: none;
             border-color: var(--olive-light);
@@ -166,10 +198,59 @@
             display: block;
         }
-        .back-home {
             position: absolute;
-            top: 20px;
-            right: 20px;
             padding: 10px 20px;
             background: var(--olive-light);
             color: white;
@@ -185,19 +266,20 @@
         }
         @media (max-width: 768px) {
-            .back-home {
-                position: relative;
-                top: 0;
-                right: 0;
-                margin: 10px auto;
-                display: block;
-                text-align: center;
             }
         }
     </style>
 </head>
-<body>
-    <a href="index.html" class="back-home">Home 🏠 </a>
     <div class="container">
         <div class="card">
@@ -247,6 +329,27 @@
     <script>
         const API_URL = '';
         // عرض رسالة
         function showAlert(message, type = 'success') {
             const alert = document.getElementById('alert');

             --olive-light: #3A662A;
             --bg-light: #FFFFFF;
             --text-light: #2C2C2C;
+            --bg-dark: #1A1A1A;
+            --text-dark: #F5F5F5;
+            --card-light: #F8F9FA;
+            --card-dark: #2D2D2D;
         }
         body {
             display: flex;
             align-items: center;
             justify-content: center;
+            transition: all 0.3s ease;
+        }
+        body.light-mode {
             background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
             color: var(--text-light);
         }
+        body.dark-mode {
+            background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
+            color: var(--text-dark);
+        }
         .container {
             width: 100%;
             max-width: 450px;
         }
         .card {
             padding: 40px;
             border-radius: 15px;
             box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+        }
+        .light-mode .card {
+            background: white;
+        }
+        .dark-mode .card {
+            background: var(--card-dark);
         }
         .header {
             transition: all 0.3s ease;
         }
+        .light-mode input {
+            background: white;
+            color: var(--text-light);
+        }
+        .dark-mode input {
+            background: var(--bg-dark);
+            color: var(--text-dark);
+            border-color: #444;
+        }
         input:focus {
             outline: none;
             border-color: var(--olive-light);
             display: block;
         }
+        /* Top Bar with Theme Toggle */
+        .top-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 15px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 1000;
+        }
+        .light-mode .top-bar {
+            background: rgba(255,255,255,0.9);
+        }
+        .dark-mode .top-bar {
+            background: rgba(45,45,45,0.9);
+        }
+        .theme-toggle {
+            width: 50px;
+            height: 26px;
+            background: var(--olive-light);
+            border-radius: 13px;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .theme-toggle::after {
+            content: '☀️';
             position: absolute;
+            top: 3px;
+            left: 3px;
+            width: 20px;
+            height: 20px;
+            background: white;
+            border-radius: 50%;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+        }
+        .dark-mode .theme-toggle::after {
+            content: '🌙';
+            left: 27px;
+        }
+        .back-home {
             padding: 10px 20px;
             background: var(--olive-light);
             color: white;
         }
         @media (max-width: 768px) {
+            body {
+                padding-top: 60px;
+            }
+            .top-bar {
+                padding: 10px 15px;
             }
         }
     </style>
 </head>
+<body class="light-mode">
+    <div class="top-bar">
+        <a href="index.html" class="back-home">🏠 Home</a>
+        <div class="theme-toggle" onclick="toggleTheme()"></div>
+    </div>
     <div class="container">
         <div class="card">
     <script>
         const API_URL = '';
+        // Theme Toggle
+        function toggleTheme() {
+            const body = document.body;
+            if (body.classList.contains('light-mode')) {
+                body.classList.remove('light-mode');
+                body.classList.add('dark-mode');
+                localStorage.setItem('theme', 'dark');
+            } else {
+                body.classList.remove('dark-mode');
+                body.classList.add('light-mode');
+                localStorage.setItem('theme', 'light');
+            }
+        }
+        // Load saved theme
+        document.addEventListener("DOMContentLoaded", () => {
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            document.body.classList.remove("light-mode", "dark-mode");
+            document.body.classList.add(savedTheme + "-mode");
+        });
         // عرض رسالة
         function showAlert(message, type = 'success') {
             const alert = document.getElementById('alert');