Spaces:

gladiopeace
/

kharia1

Running

App Files Files Community

gladiopeace commited on Apr 4

Commit

ab04c50

verified ·

1 Parent(s): 16d6ccb

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +596 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Kharia1
-emoji: 🏆
-colorFrom: indigo
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: kharia1
+emoji: 🐳
+colorFrom: pink
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,596 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>الميتافيزيقا الرقمية: كينونات من العدم</title>
+    <script src="https://cdn.tailwindcss.com"></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;
+        }
+        body {
+            font-family: 'Tajawal', sans-serif;
+            background-color: var(--dark);
+            color: var(--accent);
+            line-height: 2;
+            overflow-x: hidden;
+            scroll-behavior: smooth;
+        }
+        .article-container {
+            max-width: 900px;
+            margin: 4rem auto;
+            padding: 3rem;
+            background: rgba(15, 14, 23, 0.85);
+            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);
+            position: relative;
+            overflow: hidden;
+        }
+        .article-container::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at 70% 30%, rgba(229, 49, 112, 0.1) 0%, transparent 50%);
+            pointer-events: none;
+            z-index: -1;
+        }
+        h1 {
+            font-size: 3rem;
+            font-weight: 900;
+            border-bottom: 2px solid var(--primary);
+            padding-bottom: 1.5rem;
+            color: var(--light);
+            text-shadow: 0 0 15px rgba(255, 137, 6, 0.4);
+            margin-bottom: 2rem;
+            position: relative;
+            line-height: 1.3;
+        }
+        h1::after {
+            content: "";
+            position: absolute;
+            bottom: -2px;
+            right: 0;
+            width: 200px;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary), transparent);
+        }
+        h2 {
+            color: var(--primary);
+            font-size: 1.8rem;
+            font-weight: 700;
+            margin: 3rem 0 1.5rem;
+            position: relative;
+            padding-right: 20px;
+        }
+        h2::before {
+            content: "//";
+            position: absolute;
+            right: 0;
+            top: 0;
+            color: var(--secondary);
+            font-family: monospace;
+            font-weight: 400;
+        }
+        p {
+            font-size: 1.1rem;
+            margin-bottom: 1.8rem;
+            text-align: justify;
+            hyphens: auto;
+        }
+        .meta {
+            color: var(--secondary);
+            font-style: italic;
+            margin-bottom: 3rem;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            font-size: 1.1rem;
+        }
+        .meta i {
+            font-size: 1.2rem;
+        }
+        figure {
+            margin: 3rem 0;
+            position: relative;
+            overflow: hidden;
+            border-radius: 16px;
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
+            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transform: translateY(20px);
+            opacity: 0;
+        }
+        figure.visible {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        figure:hover {
+            transform: scale(1.02) translateY(0);
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+        }
+        figure img {
+            width: 100%;
+            height: auto;
+            display: block;
+            transition: transform 0.5s ease;
+        }
+        figure:hover img {
+            transform: scale(1.05);
+        }
+        figcaption {
+            font-size: 0.95rem;
+            color: var(--accent);
+            padding: 1rem;
+            background: rgba(15, 14, 23, 0.7);
+            text-align: right;
+            border-top: 1px solid rgba(255, 137, 6, 0.2);
+        }
+        .digital-entity {
+            position: relative;
+            display: inline-block;
+            color: var(--primary);
+            font-weight: 500;
+            cursor: default;
+        }
+        .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);
+        }
+        .glow {
+            animation: glow 3s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from {
+                text-shadow: 0 0 5px var(--light), 0 0 10px var(--light);
+            }
+            to {
+                text-shadow: 0 0 10px var(--light), 0 0 20px var(--primary), 0 0 30px var(--secondary);
+            }
+        }
+        .emoji-float {
+            position: fixed;
+            font-size: 2.5rem;
+            opacity: 0;
+            animation: float 15s linear infinite;
+            z-index: -1;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+            cursor: default;
+            user-select: none;
+        }
+        @keyframes float {
+            0% {
+                transform: translateY(0) rotate(0deg) scale(0.8);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100vh) rotate(360deg) scale(1.2);
+                opacity: 0;
+            }
+        }
+        .scroll-indicator {
+            position: fixed;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: var(--primary);
+            font-size: 2.5rem;
+            animation: bounce 2s infinite;
+            cursor: pointer;
+            z-index: 100;
+            background: rgba(15, 14, 23, 0.7);
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            border: 2px solid var(--primary);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .scroll-indicator.visible {
+            opacity: 1;
+        }
+        @keyframes bounce {
+            0%, 20%, 50%, 80%, 100% {
+                transform: translateY(0) translateX(-50%);
+            }
+            40% {
+                transform: translateY(-20px) translateX(-50%);
+            }
+            60% {
+                transform: translateY(-10px) translateX(-50%);
+            }
+        }
+        .pixel-grid {
+            position: fixed;
+            top: 0;
+            left: 0;
+            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>');
+            pointer-events: none;
+            z-index: -2;
+        }
+        .digital-rain {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: -1;
+            opacity: 0.05;
+        }
+        .digital-rain span {
+            position: absolute;
+            width: 1px;
+            height: 30px;
+            background: linear-gradient(to bottom, transparent, var(--primary), transparent);
+            animation: rain 5s linear infinite;
+            opacity: 0.6;
+        }
+        @keyframes rain {
+            0% {
+                transform: translateY(-100vh);
+            }
+            100% {
+                transform: translateY(100vh);
+            }
+        }
+        .quote {
+            font-style: italic;
+            font-size: 1.2rem;
+            color: var(--light);
+            padding: 2rem;
+            margin: 3rem 0;
+            border-right: 4px solid var(--secondary);
+            background: rgba(255, 137, 6, 0.05);
+            position: relative;
+            border-radius: 8px;
+        }
+        .quote::before {
+            content: """;
+            position: absolute;
+            top: 10px;
+            right: 20px;
+            font-size: 4rem;
+            color: rgba(255, 137, 6, 0.1);
+            font-family: serif;
+            line-height: 1;
+        }
+        .section-divider {
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255, 137, 6, 0.3), transparent);
+            margin: 4rem 0;
+            position: relative;
+        }
+        .section-divider::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 10px;
+            height: 10px;
+            background: var(--primary);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--primary);
+        }
+        .footnote {
+            font-size: 0.9rem;
+            color: var(--accent);
+            opacity: 0.7;
+            margin-top: -1rem;
+            margin-bottom: 2rem;
+        }
+        @media (max-width: 768px) {
+            .article-container {
+                margin: 1rem auto;
+                padding: 1.5rem;
+                border-radius: 0;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+            h2 {
+                font-size: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="pixel-grid"></div>
+    <div class="digital-rain" id="digitalRain"></div>
+    <div class="article-container animate__animated animate__fadeIn">
+        <article>
+            <header>
+                <h1 class="glow">الميتافيزيقا الرقمية: كينونات من العدم</h1>
+                <div class="meta">
+                    <i class="fas fa-calendar-alt"></i>
+                    <span>4 أبريل 2025</span>
+                    <i class="fas fa-user-astronaut"></i>
+                    <span>الوجود الرقمي</span>
+                </div>
+            </header>
+            <section class="content">
+                <p>إن التقنيةَ <span class="digital-entity">"آلةٌ ميتافيزيقيةٌ"</span> تخرج كينوناتٍ من العدم إلى الوجود. بدوري، أتعامل مع الإيموجيز والميمات التي تظهر على شاشة هاتفي على أنها <span class="digital-entity">كائناتٌ رقميةٌ حيةٌ</span>. لأنها كذلك.</p>
+                <figure>
+                    <img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop"
+                         alt="الكائنات الرقمية تخرج من العدم إلى الوجود"
+                         class="w-full h-auto">
+                    <figcaption>الكائنات الرقمية تخرج من العدم إلى الوجود (تصوير: رقمنة الوجود)</figcaption>
+                </figure>
+                <p>وفي الأصل، أنت أيضاً تتعامل مع هاتفك الذكيّ ككائنٍ حيٍّ، لأنه لم يعد شيئًا. نحن نخلق التقنيات؛ لا نبتكرها. ولديَّ إصرارٌ شرِهٌ في الإمساك بهذه الفكرة التي سأشرحها بالتفصيل. لذلك، قد تبدو المقالةُ طويلةً وبليدةً، لكنها تحتوي على كمٍّ هائلٍ من المعلومات المفيدة.</p>
+                <div class="section-divider"></div>
+                <h2>الحكمة السنسكريتية والخلق التقني</h2>
+                <div class="quote">
+                    "إن ما ينطوي عليه الأمر هو خلقُ العالم الذي اختار الإنسانُ أن يسكنه. لذا فمن الضروري تقليدُ عمل الآلهة"
+                </div>
+                <p>خلال دراستي الجامعية، قرأت عبارةً سنسكريتيةً استوقفتني بشدة. تقول العبارة: <span class="digital-entity">"إن ما ينطوي عليه الأمر هو خلقُ العالم الذي اختار الإنسانُ أن يسكنه. لذا فمن الضروري تقليدُ عمل الآلهة"</span>. هذه المقولةُ السنسكريتيةُ تحاكي خلقَ الإنسانِ للعالم بتماهٍ كاملٍ مع فعل الله في خلق الوجود.</p>
+                <figure>
+                    <img src="https://images.unsplash.com/photo-1544551763-46a013bb2dcc?q=80&w=2070&auto=format&fit=crop"
+                         alt="العلاقة بين الخلق الإلهي والخلق التقني"
+                         class="w-full h-auto">
+                    <figcaption>العلاقة بين الخلق الإلهي والخلق التقني (تصوير: جسر الميتافيزيقا)</figcaption>
+                </figure>
+                <p>لم أصدق ما كنت أقرؤه في مجموعة الكتب السنسكريتية، لأنها م��هرةٌ. وأظن أن من الممكن التأسيس عليها لبناء منظومةٍ فكريةٍ خصبةٍ حول عصرنا التقني والرقمي.</p>
+                <p>لقد سعيتُ قدر المستطاع إلى فهم ما كان يقصده السنسكريتيون عن خلق الإنسان للعالم، حتى صرت أنظر إلى عالم التقنيات من منظور الخلق.</p>
+                <div class="section-divider"></div>
+                <h2>الكائنات الرقمية ككينونات مستقلة</h2>
+                <p>اليوم، نشاهد كيف تحولت الأشياء والتقنيات إلى <span class="digital-entity">"كائناتٍ مستفزّةٍ"</span>. الإيموجي الظاهر فوق شاشة هاتفك هو كائنٌ رقميٌّ. هاتفك الذكيّ هو كائنٌ تقنيٌّ. إنها ليست كائناتٍ عَرَضيةً، بل كائناتٌ ذات كينونةٍ في ذاتها، وتجسيدٌ حمام صابونٍ تقنيٍّ رقميٍّ وجوديٍّ يغمرنا.</p>
+                <figure>
+                    <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?q=80&w=2165&auto=format&fit=crop"
+                         alt="الكائنات الرقمية ككينونات مستقلة"
+                         class="w-full h-auto">
+                    <figcaption>الكائنات الرقمية ككينونات مستقلة (تصوير: عوالم متداخلة)</figcaption>
+                </figure>
+                <p>تمتلك الكائنات الرقمية بيئةً ميتافيزيقيةً حيةً وهي إلى يومنا هذا ما زالت تشبه الجزرَ الوجوديةَ المهجورةَ والمجهولةَ. فخلف الشاشة، حياةٌ كاملةٌ يمكن الوصول إليها رقميًا. يتم إنشاءُ الرسوم والنماذج، دون أن تكون لثانية واحدة جسديةً أو مادية. لقد وُلدت رقميًا. لن يُلمسها أحدٌ أبدًا.</p>
+                <p>كيف تؤثر هذه الكائنات الرقميّة في الطريقة التي نشعر بها؟ يتكوّن الكائنُ الرقميُّ ضمن بنيةٍ معماريةٍ معقدةٍ ومركبةٍ بين الأبعاد الميكانيكية والفيزيائية للحوسبة. تسمح الشاشة بأن يتكون كل ما نراه عليها وأن نشعر من خلاله. إن التقنياتُ الذكيةُ هي وسطٌ تقنيٌّ قادرٌ على توليد الكينونة الرقمية للذات حتى تصير مهيأة على تسويغ ذاتها كظاهرةٍ رقميةٍ ممكنةٍ، وقادرةٍ على أن تخلق فينا المشاعرَ ونتلقاها بحميميةٍ كبرى.</p>
+                <div class="section-divider"></div>
+                <h2>المعابد الرقمية</h2>
+                <p>تشبه ظروف خلق الكائنات الرقميّة تلك الظروف التي كان يخلقها الرومانُ والإغريقُ عندما ينشئون الـ"تيمبلوم" (Templum) (τέμενος).</p>
+                <figure>
+                    <img src="https://images.unsplash.com/photo-1527004013197-933c91776e3e?q=80&w=2072&auto=format&fit=crop"
+                         alt="التشابه بين المعابد القديمة والفضاءات الرقمية"
+                         class="w-full h-auto">
+                    <figcaption>التشابه بين المعابد القديمة والفضاءات الرقمية (تصوير: عمارة المقدس)</figcaption>
+                </figure>
+                <p>لطالما رمزت كلمة "تمبلوم" الرومانية/الإغريقية إلى "المعبد"، ففي هذا الحيز المكاني "التمبلوم"، ثمة أمورٌ مميزةٌ جدًا تخبرنا أن هذا الحيزَ يتجاوز كونه معبدًا فقط <span class="footnote">(موقع "https://friesian.com/vocab.htm"، الخانة 60)</span>.</p>
+                <p>لقد امتلك لفظُ "تمبلوم" مرادفاتٍ كثيرةً. فهو يعني في السياقات الرومانية والإغريقية الدينية "المعبد"، لكنه عبر التاريخ تعرّض للتشويش نتيجة وروده في القصائد والأساطير القديمة. لذلك إن المعنى الجذري للفظ هو "فضاءٌ ماديٌّ منفصلٌ ومنقطعٌ". لقد قسّم الإغريقُ التمبلوم إلى أربعة أقسام. فهو بالشكل الكلي عبارة عن مساحةٍ أرضيةٍ وسماويةٍ في الوقت عينه، ترصدها الآلهةُ وتحددها، ثم تتنازل عنها للناس لاحقًا <span class="footnote">(مقالة، www.perseus.tufts.edu، Templum، فقرة 4)</span>.</p>
+                <p>ولكن لم يبنِ الإغريقُ المعابدَ بشكلٍ عشوائيٍ، بل بنوها بأسلوبٍ دقيقٍ يراعي أشدَّ مراعاةٍ أحاسيسَ الداخلين إليها. كانت الأقسامُ توزَّع بين القاعة الرئيسية، والبهو، والردهة الخلفية، والخلوة المعزولة، والسيلا (Cella) - أي قاعةٍ مخفيةٍ وخاصةٍ جدًا - والإيبينوس (Epinaos) - وهو حجرةٌ صغيرةٌ في السيلا - بالإضافة إلى البروناوس (pronaos) - وهي مساحةٌ خارجيةٌ محاذيةٌ للسيلا يحدها عددٌ محددٌ من الأعمدة، إما أربعةٌ أو ستةٌ أو عشرةٌ.</p>
+                <figure>
+                    <img src="https://images.unsplash.com/photo-1600481176431-47ad2ab2745d?q=80&w=2070&auto=format&fit=crop"
+                         alt="هندسة المعابد القديمة"
+                         class="w-full h-auto">
+                    <figcaption>هندسة المعابد القديمة (تصوير: عمارة الروح)</figcaption>
+                </figure>
+                <p>اختلفت المساحاتُ الهندسيةُ على مستوى مواد البناء. فبعضها يُبنى بالخشب ومنفصلٌ كليًا عن الأماكن التي تُبنى بالحجر والرخام والبرونز والذهب والفضة. كما كانت المساحاتُ تضيقُ وتتسعُ بشكلٍ فريدٍ جدًا. وأيضاً، لم يكن بناءُ التمبلوم عند الإغريق مسألةً عاديةً، بل كان بناءً معمارياً صارمًا <span class="footnote">(مقالة، www.perseus.tufts.edu، "Templum"، فقرة 6)</span>.</p>
+                <p>ولم يكن بناءُ الفضاء المادي المنفصل والمنعزل مرتبطًا فقط بالهندسة، بل كان شكلاً من أشكال الفضاءات المادية التي تخزن فيما بينها عالمَ الروح ونبضَ القلب والعين، والمسؤولة عن افتعال التجارب الحسية المنعزلة. كانت بعضُ مساحات التمبلوم تفتعل سكينةً داخليةً وانقباضَ الذات إلى جوانية الصدر، وبعضها الآخر يعمل على انكشاف الذات نحو السماء.</p>
+                <div class="section-divider"></div>
+                <h2>النيومين الرقمي</h2>
+                <p>ينشأ التمبلوم من خطوطٍ متخيلةٍ وخطوطٍ واقعيةٍ. إنه وسطٌ واقعيٌّ ينشأ عبر الهندسة المادية الواقعية، ويُفرز بين ثنايا الأعمدة والمساحات شروطَ إمكان الإحساس بوجود أشياءَ ليست إلا متخيلةً. إنه فضاءٌ ماديٌّ ينطوي على إمكانات الهندسة المتخيلة التي توحي بتغيراتٍ في البناء في حالةٍ إيهاميةٍ واستلابيةٍ، "تشير إلى تغييرٍ حتى في حالة عدم وجوده" <span class="footnote">(مقالة، www.perseus.tufts.edu، Templum، فقرة 11)</span>.</p>
+                <p>لقد نظروا إلى معمارية التمبلوم كهندسةٍ ذاتيةٍ وبصريةٍ. لذلك يُشرعُ عالمُ الخطوط المرئية وغير المرئية رحلةَ المخيلة والروح نحو مستوياتَ حسيةٍ لا تتحقق إلا في حالاتٍ نادرةٍ، إذ إن المعماريةَ الساحرةَ جدًا عليها أن تتجاوز السطحيةَ وتتوجه بجوهرها كي تحقق الـ"نيومين" (Numen).</p>
+                <figure>
+                    <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop"
+                         alt="النيومين الرقمي"
+                         class="w-full h-auto">
+                    <figcaption>تجسيد النيومين الرقمي في العصر الحديث (تصوير: روح الآلة)</figcaption>
+                </figure>
+                <p>والنيومين تعني <span class="digital-entity">"الروحَ التي تترأس شيئًا"</span> <span class="footnote">(Google Translator، كلمة NUMEN)</span>. تمثل النيومين "رهبةَ المكان" أو رهبة الروح" التي تستمر في إلقاء ظلالها على الذات، وفيضَ الأثر الذي يدمغه الفضاءُ في العقل والروح. هذه "الروح التي تترأس الشيء" أو رهبة الروح هي ما تمتاز به الميميز والإيموجيز والكائنات ال��قميّة. تحضر إلينا وهي ممتلئة بالروح التي تترأس نفسها. تظهر علينا برهبة ذاتها.</p>
+                <div class="quote">
+                    "ما كانت لتتكون رهبة التمبلوم، لو لم يهتم الإغريقُ ببعد 'فضاء المادة المنفصل' البصري، والذي وضعوا فيه ثقلَ أفكارهم وأحاسيسهم"
+                </div>
+                <p>لذلك، ما كانت لتتكون رهبة التمبلوم، لو لم يهتم الإغريقُ ببعد "فضاء المادة المنفصل" البصري، والذي وضعوا فيه ثقلَ أفكارهم وأحاسيسهم". إن النظامَ دقيقٌ للغاية من الخطوط المنحنية والمحاور المائلة... العينُ اليونانيةُ شديدةُ الحساسية... توضح، بشكلٍ أكثر وضوحًا من أي شيءٍ آخر، إلى أي مدى كانت التصوراتُ الجماليةُ والبصرُ المدروسُ بدقةٍ لليونانيين القدماء أعلى بكثيرٍ من تصوراتنا" <span class="footnote">(موقع، "https://www.perseus.tufts.edu/"، Templum، فقرة 27)</span>.</p>
+                <p>وما كانت لتتكون رهبة الكائنات الرقمية لو لم يكن هذا العالم الحالي؛ خُلقَ لكي يكون مرئياً. فعبر "الروح التي تترأس الشيء"، وعبر البعد البصري والخطوط المائلة المرئية والخيوط الوهمية ولعبة الأضواء التي توحي بكثافةٍ وهميةٍ في المادة، تنشأ "أنطوفانيا" فضاء المادة المنفصل والمنعزل. نحن هنا أمام مثالٍ حيٍّ عن آلية نشوء كينونة المكان ورهبته التي تجعله يأتي إلى الناظرين ككيانٍ في ذاته.</p>
+                <figure>
+                    <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1974&auto=format&fit=crop"
+                         alt="الأنطوفانيا الرقمية"
+                         class="w-full h-auto">
+                    <figcaption>الأنطوفانيا الرقمية: كينونة المكان الرقمي (تصوير: عوالم الظل)</figcaption>
+                </figure>
+            </section>
+        </article>
+    </div>
+    <div class="scroll-indicator" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
+        <i class="fas fa-arrow-up"></i>
+    </div>
+    <script>
+        // Create floating emojis
+        const emojis = ['👁️', '💾', '🖥️', '📱', '👾', '🤖', '🧿', '🔮', '🕹️', '🌐', '💻', '🔢', '🔣', '🎮', '🖱️', '⌨️', '📲', '🖨️', '🖲️', '💽'];
+        for (let i = 0; i < 25; i++) {
+            const emoji = document.createElement('div');
+            emoji.className = 'emoji-float';
+            emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+            emoji.style.left = Math.random() * 100 + 'vw';
+            emoji.style.animationDuration = (5 + Math.random() * 15) + 's';
+            emoji.style.animationDelay = Math.random() * 5 + 's';
+            emoji.style.fontSize = (1 + Math.random() * 3) + 'rem';
+            document.body.appendChild(emoji);
+        }
+        // Create digital rain effect
+        const digitalRain = document.getElementById('digitalRain');
+        for (let i = 0; i < 150; i++) {
+            const drop = document.createElement('span');
+            drop.style.left = Math.random() * 100 + 'vw';
+            drop.style.animationDuration = (1 + Math.random() * 4) + 's';
+            drop.style.animationDelay = Math.random() * 3 + 's';
+            drop.style.opacity = Math.random() * 0.5;
+            drop.style.height = (10 + Math.random() * 40) + 'px';
+            digitalRain.appendChild(drop);
+        }
+        // Scroll reveal animations
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('visible');
+                    // For figures, add a slight delay between each one
+                    if (entry.target.tagName === 'FIGURE') {
+                        entry.target.style.transitionDelay = `${Math.random() * 0.3}s`;
+                    }
+                }
+            });
+        }, {threshold: 0.1});
+        document.querySelectorAll('figure, .quote').forEach(el => {
+            observer.observe(el);
+        });
+        // Show/hide scroll indicator based on scroll position
+        const scrollIndicator = document.querySelector('.scroll-indicator');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollIndicator.classList.add('visible');
+            } else {
+                scrollIndicator.classList.remove('visible');
+            }
+        });
+        // Add hover effect to digital entities
+        const digitalEntities = document.querySelectorAll('.digital-entity');
+        digitalEntities.forEach(entity => {
+            entity.addEventListener('mouseenter', () => {
+                entity.style.color = 'var(--secondary)';
+            });
+            entity.addEventListener('mouseleave', () => {
+                entity.style.color = 'var(--primary)';
+            });
+        });
+        // Add parallax effect to figures on scroll
+        window.addEventListener('scroll', () => {
+            const figures = document.querySelectorAll('figure');
+            figures.forEach(figure => {
+                const rect = figure.getBoundingClientRect();
+                const scrollPercent = (rect.top / window.innerHeight) * 100;
+                figure.style.transform = `translateY(${scrollPercent * 0.2}px)`;
+            });
+        });
+        // Add glow effect to headings when they come into view
+        const headingObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('animate__animated', 'animate__fadeInRight');
+                }
+            });
+        }, {threshold: 0.5});
+        document.querySelectorAll('h2').forEach(el => {
+            headingObserver.observe(el);
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=gladiopeace/kharia1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>