Update index.html

index.html

@@ -5,121 +5,206 @@
   <title>معهد مدينة العلوم العصرية</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- خط عربي جذاب -->
-  <link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Cairo:400,600,700&display=swap" rel="stylesheet">
   <!-- مكتبة التشفير SHA256 -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
   <style>
     * {
       box-sizing: border-box;
+      margin: 0;
+      padding: 0;
     }
+    
     body {
-      margin: 0;
       font-family: 'Cairo', sans-serif;
-      background: linear-gradient(135deg, #1d2671, #c33764);
-      color: #fff;
+      background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+      color: #334155;
       direction: rtl;
       text-align: center;
       overflow-x: hidden;
       line-height: 1.6;
     }
+    
     header {
-      background: rgba(255,255,255,0.15);
+      background: rgba(255,255,255,0.85);
       padding: 40px 20px;
-      margin-bottom: 30px;
-      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+      margin-bottom: 40px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
       animation: fadeInDown 1s ease-in-out;
+      border-bottom: 5px solid #3b82f6;
     }
+    
     header img {
-      max-width: 120px;
-      margin-bottom: 10px;
+      max-width: 150px;
+      margin-bottom: 15px;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      transition: transform 0.3s ease;
+    }
+    
+    header img:hover {
+      transform: scale(1.05);
     }
+    
     header h1 {
-      margin: 0;
+      margin: 10px 0;
       font-size: 2.8rem;
       font-weight: bold;
-      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+      background: linear-gradient(45deg, #3b82f6, #2563eb);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     }
+    
     .container {
-      max-width: 800px;
+      max-width: 900px;
       margin: auto;
       padding: 20px;
       animation: fadeIn 1.5s ease-in-out;
     }
+    
     .description {
-      margin-bottom: 30px;
-      font-size: 1.4rem;
+      margin-bottom: 40px;
+      font-size: 1.5rem;
       font-weight: 500;
-      padding: 10px;
-      border-bottom: 2px solid rgba(255,255,255,0.3);
+      padding: 15px;
+      color: #334155;
+      border-bottom: 3px solid rgba(59, 130, 246, 0.3);
+      border-radius: 5px;
+      background-color: rgba(255, 255, 255, 0.7);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     }
+    
     .link-button {
       display: block;
-      margin: 25px auto;
-      padding: 15px 25px;
-      width: 80%;
-      max-width: 350px;
-      font-size: 1.2rem;
+      margin: 30px auto;
+      padding: 18px 25px;
+      width: 85%;
+      max-width: 380px;
+      font-size: 1.3rem;
       font-weight: bold;
-      color: #1d2671;
-      background-color: #fff;
+      color: #fff;
+      background: linear-gradient(45deg, #3b82f6, #2563eb);
       border: none;
       border-radius: 50px;
       cursor: pointer;
       transition: all 0.3s ease;
       text-decoration: none;
+      box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
     }
+    
     .link-button:hover {
-      background-color: #f1f1f1;
-      transform: translateY(-3px);
-      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+      background: linear-gradient(45deg, #2563eb, #1d4ed8);
+      transform: translateY(-5px);
+      box-shadow: 0 8px 15px rgba(59, 130, 246, 0.5);
     }
+    
     .info-section {
-      margin: 40px auto;
-      padding: 20px;
+      margin: 50px auto;
+      padding: 25px;
       max-width: 800px;
-      background: rgba(255,255,255,0.1);
-      border-radius: 10px;
-      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+      background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(240, 249, 255, 0.9));
+      border-radius: 15px;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
       animation: fadeInUp 1.2s ease-in-out;
+      border-right: 5px solid #3b82f6;
     }
+    
     .info-section p {
-      margin: 10px 0;
-      font-size: 1.2rem;
+      margin: 15px 0;
+      font-size: 1.3rem;
+      color: #1e3a8a;
+    }
+    
+    .highlight {
+      display: inline-block;
+      background: rgba(59, 130, 246, 0.15);
+      padding: 3px 8px;
+      border-radius: 5px;
+      font-weight: 600;
     }
+    
     footer {
-      margin-top: 50px;
-      padding: 20px;
-      font-size: 0.9rem;
-      background: rgba(0,0,0,0.15);
+      margin-top: 60px;
+      padding: 30px;
+      font-size: 1rem;
+      background: rgba(59, 130, 246, 0.1);
       animation: fadeIn 1.5s ease-in-out;
+      color: #1e3a8a;
+      border-top: 1px solid rgba(59, 130, 246, 0.3);
     }
+    
     footer a {
-      color: #fff;
+      color: #2563eb;
+      text-decoration: none;
+      font-weight: 600;
+      transition: all 0.3s ease;
+    }
+    
+    footer a:hover {
+      color: #1d4ed8;
       text-decoration: underline;
     }
+    
     @keyframes fadeInDown {
-      from { opacity: 0; transform: translateY(-20px); }
+      from { opacity: 0; transform: translateY(-30px); }
       to { opacity: 1; transform: translateY(0); }
     }
+    
     @keyframes fadeInUp {
-      from { opacity: 0; transform: translateY(20px); }
+      from { opacity: 0; transform: translateY(30px); }
       to { opacity: 1; transform: translateY(0); }
     }
+    
     @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
     }
+    
     /* تفاعل حركة عند المرور بالماوس على الأقسام */
     .info-section:hover {
       transform: scale(1.02);
       transition: transform 0.3s ease;
+      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
+    }
+    
+    /* ايقونات تحسين المظهر */
+    .icon {
+      font-size: 1.8rem;
+      margin-left: 5px;
+      color: #3b82f6;
+    }
+    
+    /* تأثيرات الزر عند الضغط */
+    .link-button:active {
+      transform: scale(0.98);
+    }
+    
+    /* تحسينات للهواتف المحمولة */
+    @media (max-width: 768px) {
+      header h1 {
+        font-size: 2.2rem;
+      }
+      
+      .description {
+        font-size: 1.2rem;
+      }
+      
+      .link-button {
+        width: 92%;
+        font-size: 1.1rem;
+      }
+      
+      .info-section p {
+        font-size: 1.1rem;
+      }
     }
   </style>
 </head>
 <body>
   <header>
-    <!-- استبدل "logo.png" برابط الشعار الخاص بالمعهد -->
-    <img src="logo.png" alt="شعار المعهد">
+    <img src="https://ufastpro.com/wp-content/uploads/2025/04/476234917_1002033431973236_2935522081755714863_n.jpg" alt="شعار المعهد">
     <h1>معهد مدينة العلوم العصرية</h1>
   </header>
   
@@ -143,8 +228,9 @@
     
     <!-- قسم المعلومات الإضافية -->
     <div class="info-section">
-      <p>💥 ترخيص وزارة التربية والتعليم ووزارة الاتصالات 💥</p>
-      <p>💥 المعهد يؤجل التجنيد 💥</p>
+      <p><span class="icon">✅</span> <span class="highlight">ترخيص وزارة التربية والتعليم ووزارة الاتصالات</span></p>
+      <p><span class="icon">✅</span> <span class="highlight">المعهد يؤجل التجنيد</span></p>
+      <p><span class="icon">✅</span> <span class="highlight">خدمات تعليمية متميزة ومناهج متطورة</span></p>
     </div>
   </div>
   
@@ -160,26 +246,44 @@
       firstYear: "https://quintadb.com/apps/cgvmoeW55dI43dTNDJW7WH/portals/coWOO0W7vdPykeWQboW71s/widget",
       secondYear: "#" // الرابط غير متوفر حالياً
     };
-
+    
     // تشفير كلمة المرور باستخدام SHA256
     // كلمة المرور الأصلية: "112233445566"
     const hashedPassword = "ab9e7e43b882fa3d5b9b1e8d652fca38d1b90a3dc90a28bbdcf742728a5a1a7f";
-
+    
     function validateAndRedirect(system) {
       const userPass = prompt("أدخل كلمة المرور للدخول:");
       if (userPass === null) return; // إذا تم إلغاء الإدخال
+      
       const userHash = CryptoJS.SHA256(userPass).toString();
+      
       if (userHash === hashedPassword) {
         const url = links[system];
         if(url !== "#") {
           window.location.href = url;
         } else {
-          alert("الرابط غير متوفر حالياً.");
+          alert("الرابط غير متوفر حالياً، سيتم إضافته قريباً.");
         }
       } else {
-        alert("كلمة مرور غير صحيحة!");
+        alert("كلمة مرور غير صحيحة! الرجاء المحاولة مرة أخرى.");
       }
     }
+    
+    // إضافة تأثير ظهور تدريجي للعناصر عند التمرير
+    window.addEventListener('DOMContentLoaded', () => {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.style.opacity = 1;
+            entry.target.style.transform = 'translateY(0)';
+          }
+        });
+      });
+      
+      document.querySelectorAll('.link-button, .info-section').forEach(el => {
+        observer.observe(el);
+      });
+    });
   </script>
 </body>
-</html>
+</html>