Add 1 files

index.html

@@ -5,37 +5,63 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>الميتافيزيقا الرقمية: كينونات من العدم</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        olive: {
+                            50: '#f8f5e8',
+                            100: '#eeead5',
+                            200: '#d8d1a8',
+                            300: '#c0b67d',
+                            400: '#a89e5a',
+                            500: '#8a8240',
+                            600: '#6b6533',
+                            700: '#504b28',
+                            800: '#3a3620',
+                            900: '#2a2719',
+                        },
+                        primary: '#a89e5a',
+                        secondary: '#8a8240',
+                        accent: '#6b6533',
+                    }
+                }
+            }
+        }
+    </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
         
         :root {
-            --primary: #ff8906;
-            --secondary: #e53170;
-            --dark: #0f0e17;
-            --light: #fffffe;
-            --accent: #b8c1ec;
+            --primary: #a89e5a;
+            --secondary: #8a8240;
+            --dark: #2a2719;
+            --light: #f8f5e8;
+            --accent: #6b6533;
         }
         
         body {
             font-family: 'Tajawal', sans-serif;
             background-color: var(--dark);
-            color: var(--accent);
+            color: var(--light);
             line-height: 2;
             overflow-x: hidden;
             scroll-behavior: smooth;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%232a2719"/><path d="M0 0 L100 100 M100 0 L0 100" stroke="%236b6533" stroke-width="0.5" opacity="0.1"/></svg>');
         }
         
         .article-container {
             max-width: 900px;
             margin: 4rem auto;
             padding: 3rem;
-            background: rgba(15, 14, 23, 0.85);
+            background: rgba(42, 39, 25, 0.92);
             backdrop-filter: blur(12px);
             border-radius: 24px;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
-            border: 1px solid rgba(255, 137, 6, 0.1);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+            border: 1px solid rgba(168, 158, 90, 0.2);
             position: relative;
             overflow: hidden;
             z-index: 10;
@@ -48,7 +74,7 @@
             right: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at 70% 30%, rgba(229, 49, 112, 0.1) 0%, transparent 50%);
+            background: radial-gradient(circle at 70% 30%, rgba(168, 158, 90, 0.1) 0%, transparent 50%);
             pointer-events: none;
             z-index: -1;
         }
@@ -59,7 +85,7 @@
             border-bottom: 2px solid var(--primary);
             padding-bottom: 1.5rem;
             color: var(--light);
-            text-shadow: 0 0 15px rgba(255, 137, 6, 0.4);
+            text-shadow: 0 0 15px rgba(168, 158, 90, 0.4);
             margin-bottom: 2rem;
             position: relative;
             line-height: 1.3;
@@ -99,10 +125,11 @@
             margin-bottom: 1.8rem;
             text-align: justify;
             hyphens: auto;
+            color: rgba(248, 245, 232, 0.9);
         }
         
         .meta {
-            color: var(--secondary);
+            color: var(--primary);
             font-style: italic;
             margin-bottom: 3rem;
             display: flex;
@@ -125,6 +152,7 @@
             transform: translateY(20px);
             opacity: 0;
             isolation: isolate;
+            border: 1px solid rgba(168, 158, 90, 0.2);
         }
         
         figure.visible {
@@ -151,11 +179,11 @@
         
         figcaption {
             font-size: 0.95rem;
-            color: var(--accent);
+            color: var(--light);
             padding: 1rem;
-            background: rgba(15, 14, 23, 0.7);
+            background: rgba(42, 39, 25, 0.7);
             text-align: right;
-            border-top: 1px solid rgba(255, 137, 6, 0.2);
+            border-top: 1px solid rgba(168, 158, 90, 0.3);
         }
         
         .digital-entity {
@@ -164,23 +192,12 @@
             color: var(--primary);
             font-weight: 500;
             cursor: default;
+            transition: all 0.3s ease;
         }
         
-        .digital-entity::after {
-            content: "";
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 100%;
-            height: 2px;
-            background: var(--secondary);
-            transform: scaleX(0);
-            transform-origin: right;
-            transition: transform 0.3s ease;
-        }
-        
-        .digital-entity:hover::after {
-            transform: scaleX(1);
+        .digital-entity:hover {
+            color: var(--light);
+            text-shadow: 0 0 8px rgba(168, 158, 90, 0.6);
         }
         
         .glow {
@@ -202,7 +219,7 @@
             opacity: 0;
             animation: float 15s linear infinite;
             z-index: 5;
-            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+            text-shadow: 0 0 10px rgba(168, 158, 90, 0.5);
             cursor: default;
             user-select: none;
             pointer-events: none;
@@ -235,7 +252,7 @@
             animation: bounce 2s infinite;
             cursor: pointer;
             z-index: 100;
-            background: rgba(15, 14, 23, 0.7);
+            background: rgba(42, 39, 25, 0.7);
             width: 60px;
             height: 60px;
             display: flex;
@@ -271,8 +288,8 @@
             width: 100%;
             height: 100%;
             background: 
-                linear-gradient(rgba(15, 14, 23, 0.95), rgba(15, 14, 23, 0.95)),
-                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="1" height="1" x="0" y="0" fill="%23ff8906" opacity="0.05"/></svg>');
+                linear-gradient(rgba(42, 39, 25, 0.95), rgba(42, 39, 25, 0.95)),
+                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><rect width="1" height="1" x="0" y="0" fill="%23a89e5a" opacity="0.05"/></svg>');
             pointer-events: none;
             z-index: 1;
         }
@@ -314,7 +331,7 @@
             padding: 2rem;
             margin: 3rem 0;
             border-right: 4px solid var(--secondary);
-            background: rgba(255, 137, 6, 0.05);
+            background: rgba(168, 158, 90, 0.05);
             position: relative;
             border-radius: 8px;
             transform: translateX(20px);
@@ -333,14 +350,14 @@
             top: 10px;
             right: 20px;
             font-size: 4rem;
-            color: rgba(255, 137, 6, 0.1);
+            color: rgba(168, 158, 90, 0.1);
             font-family: serif;
             line-height: 1;
         }
         
         .section-divider {
             height: 1px;
-            background: linear-gradient(90deg, transparent, rgba(255, 137, 6, 0.3), transparent);
+            background: linear-gradient(90deg, transparent, rgba(168, 158, 90, 0.3), transparent);
             margin: 4rem 0;
             position: relative;
         }
@@ -360,7 +377,7 @@
         
         .footnote {
             font-size: 0.9rem;
-            color: var(--accent);
+            color: var(--light);
             opacity: 0.7;
             margin-top: -1rem;
             margin-bottom: 2rem;
@@ -383,20 +400,22 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background: rgba(255, 137, 6, 0.1);
+            background: rgba(168, 158, 90, 0.1);
             border-radius: 12px;
-            border: 1px solid rgba(255, 137, 6, 0.3);
+            border: 1px solid rgba(168, 158, 90, 0.3);
             transition: all 0.3s ease;
             transform-style: preserve-3d;
             cursor: pointer;
             position: relative;
             overflow: hidden;
+            color: var(--light);
         }
         
         .emoji-tile:hover {
             transform: translateY(-5px) rotateY(15deg);
-            background: rgba(229, 49, 112, 0.2);
+            background: rgba(138, 130, 64, 0.2);
             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+            color: var(--primary);
         }
         
         .emoji-tile::before {
@@ -406,7 +425,7 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
+            background: linear-gradient(135deg, rgba(168,158,90,0.1), transparent);
             z-index: -1;
         }
         
@@ -430,9 +449,9 @@
         .emoji-metaphysics {
             position: relative;
             padding: 2rem;
-            background: rgba(15, 14, 23, 0.7);
+            background: rgba(42, 39, 25, 0.7);
             border-radius: 16px;
-            border: 1px solid rgba(255, 137, 6, 0.2);
+            border: 1px solid rgba(168, 158, 90, 0.2);
             margin: 3rem 0;
             overflow: hidden;
         }
@@ -444,7 +463,7 @@
             right: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at 80% 20%, rgba(229, 49, 112, 0.1) 0%, transparent 70%);
+            background: radial-gradient(circle at 80% 20%, rgba(138, 130, 64, 0.1) 0%, transparent 70%);
             pointer-events: none;
             z-index: -1;
         }
@@ -475,8 +494,8 @@
             margin: 3rem 0;
             overflow: hidden;
             border-radius: 16px;
-            background: rgba(15, 14, 23, 0.5);
-            border: 1px solid rgba(255, 137, 6, 0.2);
+            background: rgba(42, 39, 25, 0.5);
+            border: 1px solid rgba(168, 158, 90, 0.2);
         }
         
         .constellation-line {
@@ -493,11 +512,13 @@
             cursor: pointer;
             transition: all 0.3s ease;
             z-index: 2;
+            color: var(--light);
         }
         
         .constellation-emoji:hover {
             transform: scale(1.5);
             filter: drop-shadow(0 0 10px var(--secondary));
+            color: var(--primary);
         }
         
         /* Emoji Portal Effect */
@@ -510,7 +531,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background: radial-gradient(circle, rgba(255,137,6,0.1) 0%, rgba(15,14,23,0.1) 70%);
+            background: radial-gradient(circle, rgba(168,158,90,0.1) 0%, rgba(42,39,25,0.1) 70%);
             border: 2px dashed var(--primary);
             animation: portal-pulse 4s ease-in-out infinite;
             overflow: hidden;
@@ -542,16 +563,17 @@
         .emoji-portal-inner {
             font-size: 4rem;
             animation: portal-emoji 8s ease-in-out infinite;
+            color: var(--light);
         }
         
         @keyframes portal-pulse {
             0%, 100% {
                 transform: scale(1);
-                box-shadow: 0 0 20px rgba(255, 137, 6, 0.1);
+                box-shadow: 0 0 20px rgba(168, 158, 90, 0.1);
             }
             50% {
                 transform: scale(1.05);
-                box-shadow: 0 0 40px rgba(255, 137, 6, 0.2);
+                box-shadow: 0 0 40px rgba(168, 158, 90, 0.2);
             }
         }
         
@@ -688,19 +710,19 @@
                     <h3>مراحل تطور الكينونة الرقمية</h3>
                     
                     <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
-                        <div style="background: rgba(255,137,6,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255,137,6,0.3);">
+                        <div style="background: rgba(168,158,90,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(168,158,90,0.3);">
                             <div style="font-size: 2rem; margin-bottom: 1rem;">1️⃣</div>
                             <h4 style="color: var(--primary); margin-bottom: 0.5rem;">المرحلة الرمزية</h4>
                             <p style="font-size: 0.9rem;">الإيموجي كمجرد رمز تعبيري بدون بعد وجودي</p>
                         </div>
                         
-                        <div style="background: rgba(229,49,112,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(229,49,112,0.3);">
+                        <div style="background: rgba(138,130,64,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(138,130,64,0.3);">
                             <div style="font-size: 2rem; margin-bottom: 1rem;">2️⃣</div>
                             <h4 style="color: var(--secondary); margin-bottom: 0.5rem;">المرحلة النفعية</h4>
                             <p style="font-size: 0.9rem;">أداة اتصال فعالة مع بعد اجتماعي</p>
                         </div>
                         
-                        <div style="background: rgba(184,193,236,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(184,193,236,0.3);">
+                        <div style="background: rgba(107,101,51,0.1); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(107,101,51,0.3);">
                             <div style="font-size: 2rem; margin-bottom: 1rem;">3️⃣</div>
                             <h4 style="color: var(--accent); margin-bottom: 0.5rem;">المرحلة الوجودية</h4>
                             <p style="font-size: 0.9rem;">اكتساب بعد ميتافيزيقي وكينونة مستقلة</p>
@@ -723,24 +745,24 @@
                 
                 <p>تشبه منصات التواصل الاجتماعي الحديثة المعابد القديمة في عدة جوانب:</p>
                 
-                <div style="background: rgba(15,14,23,0.7); padding: 2rem; border-radius: 16px; margin: 2rem 0; border: 1px solid rgba(255,137,6,0.2);">
+                <div style="background: rgba(42,39,25,0.7); padding: 2rem; border-radius: 16px; margin: 2rem 0; border: 1px solid rgba(168,158,90,0.2);">
                     <table style="width: 100%; border-collapse: collapse;">
                         <thead>
-                            <tr style="border-bottom: 1px solid rgba(255,137,6,0.3);">
+                            <tr style="border-bottom: 1px solid rgba(168,158,90,0.3);">
                                 <th style="padding: 1rem; text-align: right; color: var(--primary);">المعابد القديمة</th>
                                 <th style="padding: 1rem; text-align: right; color: var(--primary);">المنصات الرقمية</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr style="border-bottom: 1px solid rgba(255,137,6,0.1);">
+                            <tr style="border-bottom: 1px solid rgba(168,158,90,0.1);">
                                 <td style="padding: 1rem;">المذابح</td>
                                 <td style="padding: 1rem;">صفحات الملفات الشخصية</td>
                             </tr>
-                            <tr style="border-bottom: 1px solid rgba(255,137,6,0.1);">
+                            <tr style="border-bottom: 1px solid rgba(168,158,90,0.1);">
                                 <td style="padding: 1rem;">التماثيل</td>
                                 <td style="padding: 1rem;">الصور الرمزية (Avatars)</td>
                             </tr>
-                            <tr style="border-bottom: 1px solid rgba(255,137,6,0.1);">
+                            <tr style="border-bottom: 1px solid rgba(168,158,90,0.1);">
                                 <td style="padding: 1rem;">الصلوات</td>
                                 <td style="padding: 1rem;">التغريدات والمنشورات</td>
                             </tr>
@@ -904,10 +926,12 @@
         const digitalEntities = document.querySelectorAll('.digital-entity');
         digitalEntities.forEach(entity => {
             entity.addEventListener('mouseenter', () => {
-                entity.style.color = 'var(--secondary)';
+                entity.style.color = 'var(--light)';
+                entity.style.textShadow = '0 0 8px rgba(168, 158, 90, 0.6)';
             });
             entity.addEventListener('mouseleave', () => {
                 entity.style.color = 'var(--primary)';
+                entity.style.textShadow = 'none';
             });
         });
         
@@ -916,10 +940,10 @@
         emojiTiles.forEach(tile => {
             tile.addEventListener('click', () => {
                 tile.style.transform = 'translateY(-5px) rotateY(180deg) scale(1.2)';
-                tile.style.background = 'rgba(229, 49, 112, 0.3)';
+                tile.style.background = 'rgba(138, 130, 64, 0.3)';
                 setTimeout(() => {
                     tile.style.transform = 'translateY(0) rotateY(0) scale(1)';
-                    tile.style.background = 'rgba(255, 137, 6, 0.1)';
+                    tile.style.background = 'rgba(168, 158, 90, 0.1)';
                 }, 1000);
             });
         });