From 8ed2b7321dba11fe568b4edbbab491dbb894a1b1 Mon Sep 17 00:00:00 2001
From: Heros <139694811+m777m44@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:48:10 +0300
Subject: [PATCH] Update index.html

---
 index.html | 280 +++++++++++++++++++++++------------------------------
 1 file changed, 120 insertions(+), 160 deletions(-)
diff --git a/index.html b/index.html
index 23b1891..8f97672 100644
--- a/index.html
+++ b/index.html
@@ -3,28 +3,30 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>تطبيق التواصل الاجتماعي المطوّر</title>
+  <title>تطبيق التواصل الاجتماعي المتحرك</title>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
   <style>
+    /* إعدادات عامة */
     body {
       font-family: 'Cairo', sans-serif;
       margin: 0;
       padding: 0;
-      background: linear-gradient(135deg, #1f4037, #99f2c8);
+      background: linear-gradient(135deg, #1e3c72, #2a5298);
       color: #fff;
       text-align: center;
       overflow-x: hidden;
     }
 
     h1 {
-      font-size: 32px;
+      font-size: 36px;
       margin: 20px 0;
       color: #fdfdfd;
-      font-weight: bold;
+      text-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
     }
 
     .container {
-      padding: 30px;
-      max-width: 800px;
+      padding: 20px;
+      max-width: 900px;
       margin: auto;
     }
 
@@ -33,9 +35,16 @@
       padding: 25px;
       border-radius: 15px;
       background: rgba(255, 255, 255, 0.1);
-      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
       backdrop-filter: blur(15px);
-      transition: transform 0.3s, box-shadow 0.3s;
+      transition: transform 0.5s ease, box-shadow 0.5s ease;
+      opacity: 0;
+      transform: translateY(50px);
+    }
+
+    .section.show {
+      opacity: 1;
+      transform: translateY(0);
     }
 
     .section:hover {
@@ -44,33 +53,31 @@
     }
 
     .section h2 {
-      margin: 0 0 15px;
       font-size: 22px;
-      color: #fdfdfd;
+      color: #fff;
     }
 
     .section input {
-      width: 85%;
+      width: 80%;
       padding: 14px;
-      margin: 12px 0;
+      margin: 10px 0;
       border: none;
       border-radius: 25px;
-      outline: none;
-      font-size: 16px;
       background: #fff;
       color: #333;
+      font-size: 16px;
     }
 
     .section button {
-      padding: 14px 30px;
-      margin-top: 12px;
+      padding: 10px 25px;
       border: none;
       border-radius: 25px;
       background: linear-gradient(120deg, #ff7e5f, #feb47b);
       color: #fff;
-      cursor: pointer;
       font-size: 16px;
-      transition: background 0.3s, transform 0.2s;
+      font-weight: bold;
+      cursor: pointer;
+      transition: transform 0.3s ease, background 0.3s ease;
     }
 
     .section button:hover {
@@ -78,182 +85,135 @@
       transform: scale(1.1);
     }
 
-    .icon {
-      font-size: 28px;
-      margin-bottom: 12px;
-      display: inline-block;
+    /* الوضع الليلي */
+    .dark-mode {
+      background: linear-gradient(135deg, #141e30, #243b55);
+      color: #ddd;
     }
 
-    .dark-mode-toggle {
-      position: fixed;
-      top: 20px;
-      left: 20px;
-      padding: 12px 18px;
-      background: rgba(255, 255, 255, 0.2);
-      border: none;
-      border-radius: 50px;
+    .dark-mode .section {
+      background: rgba(0, 0, 0, 0.7);
+      color: #ddd;
+    }
+
+    .dark-mode input {
+      background: #333;
       color: #fff;
-      cursor: pointer;
-      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
-      transition: background 0.3s;
     }
 
-    .dark-mode-toggle:hover {
-      background: rgba(255, 255, 255, 0.4);
+    .controls {
+      margin-top: 20px;
     }
 
-    body.dark-mode {
-      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
-      color: #ddd;
+    .controls button {
+      padding: 10px 20px;
+      margin: 5px;
+      border: none;
+      border-radius: 25px;
+      font-size: 16px;
+      cursor: pointer;
+      color: #fff;
     }
 
-    body.dark-mode .section {
-      background: rgba(0, 0, 0, 0.6);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
+    .controls .dark-mode-toggle {
+      background: #2c5364;
     }
 
-    body.dark-mode input {
-      background: #2a2a3b;
-      color: #fff;
+    .controls .reset-btn {
+      background: #ff4e50;
     }
   </style>
 </head>
 <body>
-  <button class="dark-mode-toggle" onclick="toggleDarkMode()">الوضع الليلي</button>
+  <div class="controls">
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">الوضع الليلي</button>
+    <button class="reset-btn" onclick="resetInputs()">إعادة تعيين</button>
+  </div>
 
   <div class="container">
-    <h1>تطبيق التواصل الاجتماعي المطوّر</h1>
-
-    <!-- WhatsApp Section -->
-    <div class="section">
-      <div class="icon">📞</div>
-      <h2>WhatsApp</h2>
-      <input id="whatsappInput" type="text" placeholder="اكتب رقم الهاتف هنا">
-      <button onclick="openWhatsApp()">دخول</button>
-    </div>
-
-    <!-- Instagram Section -->
-    <div class="section">
-      <div class="icon">📸</div>
-      <h2>Instagram</h2>
-      <input id="instagramInput" type="text" placeholder="اكتب معرف الإنستا هنا">
-      <button onclick="openInstagram()">دخول</button>
-    </div>
-
-    <!-- Telegram Section -->
-    <div class="section">
-      <div class="icon">✈️</div>
-      <h2>Telegram</h2>
-      <input id="telegramInput" type="text" placeholder="اكتب معرف التلي هنا">
-      <button onclick="openTelegram()">دخول</button>
-    </div>
-
-    <!-- Twitter Section -->
-    <div class="section">
-      <div class="icon">🐦</div>
-      <h2>Twitter</h2>
-      <input id="twitterInput" type="text" placeholder="اكتب معرف تويتر هنا">
-      <button onclick="openTwitter()">دخول</button>
-    </div>
-
-    <!-- Facebook Section -->
-    <div class="section">
-      <div class="icon">📘</div>
-      <h2>Facebook</h2>
-      <input id="facebookInput" type="text" placeholder="اكتب معرف الفيسبوك هنا">
-      <button onclick="openFacebook()">دخول</button>
-    </div>
-
-    <!-- TikTok Section -->
-    <div class="section">
-      <div class="icon">🎶</div>
-      <h2>TikTok</h2>
-      <input id="tiktokInput" type="text" placeholder="اكتب معرف تيك توك هنا">
-      <button onclick="openTikTok()">دخول</button>
-    </div>
-
-    <!-- Viber Section -->
-    <div class="section">
-      <div class="icon">💜</div>
-      <h2>Viber</h2>
-      <input id="viberInput" type="text" placeholder="اكتب رقم الهاتف هنا">
-      <button onclick="openViber()">دخول</button>
-    </div>
+    <h1>تطبيق التواصل الاجتماعي المتحرك</h1>
+    <div id="sections"></div>
   </div>
 
   <script>
-    function formatPhoneNumber(phone) {
-      phone = phone.trim();
-      if (phone.startsWith("0")) {
-        return "+964" + phone.slice(1);
-      } else if (!phone.startsWith("+")) {
-        return "+964" + phone;
-      }
-      return phone;
-    }
-
-    function validateInput(input, type) {
+    // المنصات الاجتماعية
+    const platforms = [
+      { name: "WhatsApp", icon: "📞", placeholder: "رقم الهاتف", url: "https://wa.me/" },
+      { name: "Viber", icon: "💜", placeholder: "رقم فايبر", url: "viber://add?number=" },
+      { name: "Telegram", icon: "✈️", placeholder: "معرف تلغرام", url: "https://t.me/" },
+      { name: "Instagram", icon: "📸", placeholder: "معرف إنستغرام", url: "https://instagram.com/" },
+      { name: "TikTok", icon: "🎶", placeholder: "معرف تيك توك", url: "https://www.tiktok.com/@" },
+      { name: "Facebook", icon: "📘", placeholder: "معرف فيسبوك", url: "https://www.facebook.com/" },
+      { name: "twitter", icon: "🔞", placeholder: "تويتر", url: "https://twitter.com/" },
+      { name: "Discord", icon: "🎮", placeholder: "اسم المستخدم # الرقم", url: "https://discord.com/users/" },
+      { name: "Snapchat", icon: "👻", placeholder: "معرف سناب شات", url: "https://www.snapchat.com/add/" },
+    ];
+
+    // إنشاء الأقسام ديناميكيًا
+    function createSections() {
+      const container = document.getElementById("sections");
+      platforms.forEach(platform => {
+        const section = document.createElement("div");
+        section.className = "section";
+        section.innerHTML = `
+          <h2>${platform.icon} ${platform.name}</h2>
+          <input type="text" id="${platform.name}Input" placeholder="${platform.placeholder}" />
+          <button onclick="navigateTo('${platform.name}', '${platform.url}')">اذهب</button>
+        `;
+        container.appendChild(section);
+      });
+
+      // استدعاء الحركات
+      observeSections();
+    }
+
+    // التنقل إلى الرابط المناسب
+    function navigateTo(name, url) {
+      const input = document.getElementById(`${name}Input`).value.trim();
       if (!input) {
-        alert("يرجى إدخال البيانات!");
-        return false;
-      }
-      return true;
-    }
-
-    function openWhatsApp() {
-      let number = document.getElementById("whatsappInput").value;
-      number = formatPhoneNumber(number);
-      if (validateInput(number, "phone")) {
-        window.location.href = `https://wa.me/${number}`;
+        alert("يرجى إدخال المعلومات المطلوبة!");
+        return;
       }
+      window.location.href = `${url}${input}`;
     }
 
-    function openInstagram() {
-      const username = document.getElementById("instagramInput").value;
-      if (validateInput(username, "username")) {
-        window.location.href = `https://www.instagram.com/${username}`;
-      }
-    }
-
-    function openTelegram() {
-      const username = document.getElementById("telegramInput").value;
-      if (validateInput(username, "username")) {
-        window.location.href = `https://t.me/${username}`;
-      }
+    // الوضع الليلي
+    function toggleDarkMode() {
+      document.body.classList.toggle("dark-mode");
+      localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
     }
 
-    function openTwitter() {
-      const username = document.getElementById("twitterInput").value;
-      if (validateInput(username, "username")) {
-        window.location.href = `https://twitter.com/${username}`;
-      }
+    // إعادة تعيين الحقول
+    function resetInputs() {
+      platforms.forEach(platform => {
+        document.getElementById(`${platform.name}Input`).value = "";
+      });
     }
 
-    function openFacebook() {
-      const username = document.getElementById("facebookInput").value;
-      if (validateInput(username, "username")) {
-        window.location.href = `https://www.facebook.com/${username}`;
-      }
-    }
+    // مراقبة الأقسام وإضافة الحركات
+    function observeSections() {
+      const sections = document.querySelectorAll(".section");
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("show");
+          }
+        });
+      }, { threshold: 0.2 });
 
-    function openTikTok() {
-      const username = document.getElementById("tiktokInput").value;
-      if (validateInput(username, "username")) {
-        window.location.href = `https://www.tiktok.com/@${username}`;
-      }
+      sections.forEach(section => observer.observe(section));
     }
 
-    function openViber() {
-      let number = document.getElementById("viberInput").value;
-      number = formatPhoneNumber(number);
-      if (validateInput(number, "phone")) {
-        window.location.href = `viber://add?number=${number}`;
+    // التهيئة
+    function init() {
+      createSections();
+      if (localStorage.getItem("darkMode") === "true") {
+        document.body.classList.add("dark-mode");
       }
     }
 
-    function toggleDarkMode() {
-      document.body.classList.toggle("dark-mode");
-    }
+    // تنفيذ التهيئة عند التحميل
+    window.onload = init;
   </script>
 </body>
 </html>
