Reich-shadow/archive.html at main · KEJJ0/Reich-shadow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470

<!DOCTYPE html>

<html lang="ar">
<head>
<meta charset="utf-8"/>
<title>أرشيف الظل</title>
<style>
    * { box-sizing: border-box; direction: rtl; }
    body {
      margin: 0;
      font-family: 'Courier New', monospace;
      background: url('bg.jpg') center center fixed;
      background-size: cover;
      background-blend-mode: multiply;
      color: #d0d0d0;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.88);
      backdrop-filter: blur(3px);
      z-index: 1;
    }
    header {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 40px;
    }
    .nav-title {
      font-size: 25px;
      color: #ff5555;
      text-shadow: 0 0 6px #000;
    }
    nav {
      display: flex;
      gap: 20px;
    }
    nav a {
      position: relative;
      text-decoration: none;
      color: #e5e5e5;
      font-size: 16px;
      padding: 6px 10px;
      transition: color 0.3s ease;
      cursor: pointer;
    }
    nav a::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(to right, transparent 0%, #8b0000 10%, #5a0000 50%, #8b0000 90%, transparent 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
      opacity: 0.9;
    }
    nav a:hover::before {
      transform: scaleX(1);
    }
    nav a:hover {
      color: #ffffff;
    }
    .section {
      display: none;
      position: relative;
      z-index: 2;
      padding: 60px 40px;
      max-width: 1100px;
      margin: auto;
    }
    .active {
      display: block;
    }

    .card-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 25px;
      justify-content: center;
      align-items: start;
    }
    .card {
      background: linear-gradient(145deg, #1b0000 0%, #100000 100%);
      border: 1px solid #5a0000;
      border-radius: 12px;
      padding: 20px;
      color: #ddd;
      box-shadow: 0 0 10px #000, 0 0 20px rgba(255,0,0,0.1) inset;
      cursor: pointer;
      position: relative;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      overflow: hidden;
    }
    .card:hover {
      transform: scale(1.03);
      box-shadow: 0 0 25px rgba(255, 0, 0, 0.3);
    }
    .card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('scratches.png');
      background-size: cover;
      opacity: 0.05;
      pointer-events: none;
    }
    .card h3 {
      margin: 0 0 10px;
      font-size: 18px;
      color: #ff5555;
    }
    .card p {
      font-size: 14px;
      line-height: 1.6;
    }

    .popup {
      position: fixed;
      inset: 0;
      background-color: rgba(0,0,0,0.95);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 99;
    }
    .popup.active {
      display: flex;
    }
    .popup-content {
      background-color: #111;
      padding: 30px;
      border: 2px solid #882d1b;
      max-width: 80%;
      color: #eee;
      text-align: center;
      line-height: 1.7;
      font-size: 16px;
      box-shadow: 0 0 40px #ff000033;
      animation: microfade 1s ease-in-out;
      border-radius: 14px;
    }
    @keyframes microfade {
      from {
        transform: scale(1.3) rotate(1deg);
        opacity: 0;
        filter: brightness(0.3) blur(4px);
      }
      to {
        transform: scale(1) rotate(0);
        opacity: 1;
        filter: brightness(1) blur(0);
      }
    }


.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-top: 20px;
}


.card {
  width: 85%;
  max-width: 900px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #1b0000 0%, #100000 100%);
  border: 2px solid #882d1b;
  border-radius: 14px;
  padding: 25px 30px;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.2), 0 0 15px #000 inset;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 35px rgba(255, 0, 0, 0.4);
}
.card h3 {
  color: #ff4444;
  font-size: 20px;
  margin-bottom: 15px;
}
.card p {
  font-size: 15px;
  line-height: 1.8;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('scratches.png');
  background-size: cover;
  opacity: 0.04;
  pointer-events: none;
}


@keyframes sectionReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.section.active {
  animation: sectionReveal 0.8s ease-in-out;
}


.card ul {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}
.card ul li {
  padding: 5px 0;
  border-bottom: 1px dashed #772222;
  color: #ccc;
}

</style>
</head>
<body>

<div class="overlay"></div>
<header>
<div class="nav-title">أرشيف الظل</div>
<nav>
<a onclick="showSection('about')">حول الأرشيف</a>
<a onclick="showSection('encrypted')">ملفات مشفّرة</a>
<a onclick="showSection('photos')">أرشيف الصور</a>
<a onclick="showSection('forgotten')">تقارير منسية</a>
<a href="main.html">العودة</a>
</nav>
</header>

<section class="section active" id="about">
  <div class="card-container">
    <div class="card" style="margin-top: 40px;">
      <h3>حول أرشيف الظل</h3>
      <p>
        مرحبًا بك في <strong>أرشيف الظل</strong>... تجربة تفاعلية تستعرض ملفات وتقارير وصور تعود إلى وقائع غير موثقة رسميًا.
        يجمع هذا الأرشيف بين الحقيقة والتشويش، ويقدّم لك نظرة مقلقة على أحداث طُمست عمدًا أو نُسيت بمرور الزمن.<br/><br/>
        يحتوي الأرشيف على:
        <ul style="padding-right:20px; line-height:1.8;">
          <li>🔐 ملفات مشفّرة تكشف عن تجارب سرية ومشاريع مخفية.</li>
          <li>🖼️ أرشيف صور يوثّق لحظات مرعبة وغامضة من التاريخ.</li>
          <li>📑 تقارير منسية تسجّل أحداثًا لم يتم الاعتراف بها.</li>
        </ul>
        هذا العمل ليس مجرّد موقع... بل بوابة لفتح عينيك على ما لا يُقال.<br/>
        <em>اقرأ بحذر، وقرّر بنفسك الحقيقة من الوهم.</em>
      </p>
    </div>
  </div>
</section>

<section class="section" id="encrypted">
<div class="card-container">
<div class="card" onclick="openPopup('وثيقة سُرّبت من منشأة مهجورة تشير إلى مشروع استحضار الذاكرة الجماعية .')">
<h3>📄 ملف الشبح الأحمر </h3>
<p>تم العثور على الملف داخل صندوق معدني مغلق بثلاث شفرات.
المحتوى يتحدث عن تجربة عقلية تربط بين الجنود والذكريات الصناعية.
يُعتقد أن المشروع انتهى بعد فشل أحد الجنود في العودة إلى وعيه .</p>
</div>
<div class="card" onclick="openPopup('تقارير عن زرع شرائح تحكم عصبي داخل عقول المجندين .')">
<h3>📄 ملف النبض الصناعي</h3>
<p>تم اعتراض هذه الوثائق من مخزن في مختبر تحت الأرض.
التجارب تشير إلى تحكم كامل في قرارات الجندي عن طريق موجات نبضية مصنّعة.
أحد التقارير يظهر توقف قلب الجندي بمجرد تعطيل الشريحة .</p>
</div>
</div>
<div class="card-container">
<div class="card" onclick="openPopup('بيانات سرّية عن وحدة تنفذ مهام تصفية دون أوامر رسمية .')">
<h3>📄 ملف الظلال السبعة </h3>
<p>الوثيقة مشوشة جزئيًا، لكنها تكشف رموز سبعة عناصر يُطلق عليهم “الظل”.
مهماتهم تتم بدون توقيع، ووجودهم ينفى دائمًا من السجلات الرسمية.
آخر مهمة أُبلغت تشير إلى تصفية عالم فيزيائي كان يقترب من كشف المشروع .</p>
</div>
<div class="card" onclick="openPopup('مذكرات مشفّرة لعسكري عاد من مهمة لم يُرسل إليها .')">
<h3>📄 ملف العودة الصامتة</h3>
<p>الملف يحتوي على تسجيلات هلوسة لجندي يزعم أنه تم نقله عبر منشأة “غير مرئية”.
لم يكن الجندي مسجلاً في أي بعثة رسمية، ومع ذلك عاد بزيّ ملوّث بمواد إشعاعية.
الملف أُغلق فجأة، ومحتواه يُستخدم الآن كمرجع نفسي في وحدة الطوارئ .</p>
</div>
</div>
<div class="card-container">
<div class="card" onclick="openPopup('وثيقة أخيرة تشير إلى وحدة مراقبة اختفت فجأة بعد بثها الأخير .')">
<h3>📄 ملف 173</h3>
<p>تم استخراج هذا الملف من جهاز مراقبة محترق.
يشير إلى اختفاء جماعي لوحدة استخباراتية دون أي أثر.
آخر تسجيل يظهر عيون أفراد الفريق تومض ثم تنطفئ في آنٍ واحد، ثم صمت تام .</p>
</div>
<div class="card" onclick="openPopup('نتائج تجربة عقار مجهول على وحدات خاصة .')">
<h3>📄 ملف X-12</h3>
<p>العقار X-12 طُوّر لتعزيز التركيز الميداني… لكنه تسبب بخلل إدراكي.
أحد الجنود رأى “أوامر” مكتوبة في الهواء، وآخر بدأ يتكلم بلغات غير معروفة.
تم حظر العقار، ولكن تشير التسريبات إلى تطوير نسخة أقوى منه باسم X-13 .</p>
</div>
</div>
</section>


<section class="section" id="photos">
<div class="card-container">
<div class="card" onclick="openPopup('images/bet.jpg','مبنى مركزي مظلم في عمق الغابة,تظهر  عليه آثار التخلّي والنسيان .')">
<h3> مقر العمليات المهجور  </h3>
<p> مبنى مكوّن من طابقين وواجهة أمامية متآكلة النوافذ محطمّة,والسقف مثقوب , والممر المؤدي إليه غارق في الأعشاب البريّة . <br/>الغيوم الرمادية تحيط به وكأنها تحجبه عن الزمن... <br/>يُعتقد أنه كان مركز اتصالات عسكري أُغلق فجأة . </p>
</div>
<div class="card" onclick="openPopup('images/plane.jpg' , 'لقطة جوية تم تظليل أجزاء منها...')">
<h3> لقطة جوية </h3>
<p>خريطة ممسوحة حراريًا تظهر نشاطًا غير طبيعي تحت الأرض</p>
</div>
</div>
<div class="card-container">
<div class="card" onclick="openPopup('images/recon2.jpg','لقطة جوية غير واضحة لمنطقة محظورة التُقطت عبر زجاج الطائرة أثناء العاصفة .')">
<h3> لقطة استطلاع غائمة - 1944 </h3>
<p>صورة جوية التُقطت من خلال زجاج معتم لطائرة استطلاع فوق منطقة مجهولة خلال عام 1944.
تتميّز بنغمة صفراء باهتة (سيبيا)، وتُظهر ملامح غير واضحة لمباني أو منشأة مموهة داخل أرض قاحلة.
الإضاءة الخافتة والغشاوة تشير إلى ظروف طقس سيئة أو تشويش بصري متعمّد .</p>
</div>
<div class="card" onclick="openPopup('images/sold.jpg','صورة لجندي يقف ساكنًا بين الأدغال، عيناه متجمدتان بلا تعبير .')">
<h3> الجندي الغائب </h3>
<p>الصورة التُقطت بعد تلقي بلاغات عن جندي مفقود في مهمة استطلاع. يظهر في الصورة واقفًا وسط الأدغال الكثيفة دون أي حركة أو استجابة.
ملامحه باهتة، وعيناه مفتوحتان على اتساعهما، كأنّه يشاهد شيئًا لا تراه الكاميرا.
لا يحمل سلاحًا، وزيّه مغطى بأوراق الأشجار والطين، كأنه جزء من المكان… أو ضحية له .</p>
</div>
</div>
<div class="card-container">
<div class="card" onclick="openPopup('images/train.jpg',' قاطرة صدئة متروكة وسط الغابة,يقال أنها لم تصل وجهتها قط .')">
<h3> القطار الأسود </h3>
<p> قاطرة بخاريّة مغطاة بطبقة كثيفة من الصدأ والطين,تقف صامتة في قلب الغابة . <br/> الأشجار تطوّقها من كل اتجاه,وكأن الزمن دفنها هنا عن قصد . <br/> لايوجد مسار,ولا عربات... مجرد آلة صمّاء تحمل أسرار رحلتها الأخيرة . </p>
</div>
<div class="card" onclick="openPopup('images/camp.jpg','منشأة مدمّرة,تضيء زجاجها المهشّم ومضات من ماضي مظلم . ')">
<h3> المنطقة الصناعية المهجورة </h3>
<p> صورة لداخل منشئة مهجورة تحيط بها أبراج معدنيّة صدئة. <br/> كشّاف وحيد يظهر رطوبة الأرضيّة والزجاج المتشقق, مايدل على حدوث إنفجار أو إنهيار سابق . <br/> الغرفة فارغة...لكن الشعور بأن أحدهم لايزال بداخلها لايفارق الصورة . </p>
</div>
</div>
</section>


<section class="section" id="forgotten">
<div class="card-container">
<div class="card" onclick="openPopup('تسجيلات حرارية تُظهر أجسامًا تتحرك في منطقة مهجورة دون أي كائنات مرئية.')">
<h3> الظلال المتحركة </h3>
<p> يحتوي التقرير على لقطات التُقطت بكاميرات حرارية عام 1952 في أحد المعسكرات الغربية،
تُظهر تحرّكات منتظمة لجسم يشبه الإنسان، لكن دون وجود أي ملامح فيزيائية عند المعاينة.
أُغلقت المنطقة بعد الحادثة، وتم تصنيف التقرير كـ”غير قابل للنشر”
 . </p>
</div>
<div class="card" onclick="openPopup('إشارات راديوية تكرّرت كل 17 دقيقة تحمل رموزًا غامضة.')">
<h3> الرقم 17</h3>
<p> استقبلت محطات الإنذار المبكر موجات راديوية مشفّرة قادمة من جهة غير معلومة عام 1949.
كل 17 دقيقة تمامًا، تُبث إشارات تحتوي على رموز رقمية ومقاطع صوتية همسية غير مفهومة.
لم يُحدد مصدر الإشارات، لكن كل من استمع لها أفاد بأعراض دوخة وهلوسة
 . </p>
</div>
</div>
<div class="card-container">
<div class="card" onclick="openPopup('توقّف شامل للاتصالات في منطقة حيوية دون أي سبب تقني معروف.')">
<h3> الانقطاع العظيم  </h3>
<p> في عام 1957، فُقد الاتصال لمدة 6 ساعات مع منشأة حيوية على الحدود الشمالية.
لا عطل كهربائي، لا أعطال ميكانيكية، لا أي اختراق معروف… فقط انقطاع تام.
عند استعادة الاتصال، لم يكن أي موظف يتذكر ما حدث خلال فترة الانقطاع . </p>
</div>
<div class="card" onclick="openPopup('ملف يوثّق وجود غرفة داخل منشأة لم تكن على أي مخطط معماري.')">
<h3> الغرفة المغلقة </h3>
<p> أثناء أعمال الصيانة في عام 1961، تم العثور على غرفة بدون باب، خلف جدار خرساني مغلق.
بمجرد فتح الجدار، عُثر على أثاث قديم مغطى بالدماء وجهاز تسجيل يعمل ويعيد تكرار عبارة واحدة:
“استيقظ… الوقت لم ينتهِ.”
التقرير أغلق فوريًا وصنّف بأنه “أمني - أعلى من السري”
 . </p>
</div>
</div>
<div class="card-container">
<div class="card" onclick="openPopup('صور جوية تُظهر أنماطًا غريبة محفورة في الأرض لم تُفسَّر حتى اليوم.')">
<h3> عين الصقر </h3>
<p> التُقطت من طائرة استطلاع في عام 1948، وتُظهر عشرات الأشكال الهندسية المنتظمة في صحراء مهجورة.
تم إرسال فريق لفحص الموقع، لكنهم أبلغوا بتغيّر شكل الأرض بعد كل زيارة.
لم يتمكّن أحد من البقاء هناك أكثر من ساعتين
 . </p>
</div>
<div class="card" onclick="openPopup('كاميرات المراقبة رصدت دخول أفراد إلى ممر لم يكن موجودًا في البناء الأصلي.')">
<h3> الممر 6</h3>
<p> أثناء مراجعة تسجيلات أمنية في منشأة أبحاث، شوهد دخول ثلاثة باحثين إلى ممر فرعي لم يكن موجودًا في أي مخطط.
لم يخرج أي منهم، ولم يُعثر لهم على أثر.
الأدهى… هو أن الممر اختفى من التسجيلات بعد 48 ساعة وكأنه لم يوجد أصلًا
 . </p>
</div>
</div>
</section>
<div class="popup" id="popup" onclick="closePopup()">
<div class="popup-content" id="popupContent"></div>
</div>
<div class="bottom-text">المعلومات تحت المراقبة. الوصول الكامل يتطلب ترخيصًا من القادة.</div>

<script>
    function showSection(id) {
      document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
      document.getElementById(id).classList.add('active');
    }


  function openPopup(arg1, arg2) {
    const popup = document.getElementById("popup");
    const popupContent = document.getElementById("popupContent");
    const currentSection = document.querySelector('.section.active').id;

    let imageSrc = null;
    let description = null;

    // Detect if only one argument is passed (description only)
    if (typeof arg2 === "undefined") {
      description = arg1;
    } else {
      imageSrc = arg1;
      description = arg2;
    }

    if (currentSection === "photos" && imageSrc) {
      popupContent.innerHTML = `
        <img src="${imageSrc}" alt="popup image" style="max-width:90%; border: 2px solid #882d1b; margin-bottom: 20px; box-shadow: 0 0 20px #000;">
        <p style="line-height:1.8;">${description}</p>
      `;
    } else {
      popupContent.innerHTML = `
        <p style="line-height:1.8;">${description}</p>
      `;
    }

    popup.classList.add("active");
  }


  function closePopup() {
    document.getElementById("popup").classList.remove("active");
  }
  </script>

<iframe src="player.html" style="display: none;" id="soundframe"></iframe>

<script>
  window.addEventListener('click', () => {
    const frame = document.getElementById('soundframe');
    frame.contentWindow.postMessage('startAudio', '*');
  }, { once: true });
</script>

</body>
</html>