404/index.html at main · niusounds/404 · 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
---
layout: default
---

<section class="hero">
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <h2 class="hero-subtitle">閲覧注意</h2>
    <h1 class="hero-title" data-text="忌まわしき記憶の集積所">忌まわしき記憶の集積所</h1>
    <p class="hero-description">
      ここには、誰にも語られることのなかった「本物の」怪異だけがアーカイブされています。<br>
      一度足を踏み入れたら、もう戻ることはできません。
    </p>
  </div>
</section>

<div class="content-wrapper">
  <h3 class="section-title">最近の報告</h3>
  <div class="post-list-container">
    <ul class="post-list">
      {% for post in site.posts limit:5 %}
      <li class="post-item">
        <div class="post-card">
          <div class="post-header-mini">
            <span class="post-date-tag">{{ post.date | date: "%Y.%m.%d" }}</span>
            {% if post.category %}
            <span class="post-category-tag" style="background: #400; color: #fff; padding: 2px 8px; font-size: 0.8rem; margin-left: 10px; border-radius: 4px;">{{ post.category }}</span>
            {% endif %}
            <h2><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h2>
            {% if post.horror_scores %}
            <div class="post-horror-score" style="margin-top: 5px; font-family: 'Yuji Syuku', serif; color: #900; font-size: 0.9rem;">
              👻 恐怖指数: {{ post.horror_scores.average }}
            </div>
            {% endif %}
          </div>
          <div class="post-body">
            <div class="post-excerpt">
              {{ post.excerpt }}
            </div>
            <a href="{{ post.url | relative_url }}" class="read-more">詳細を確認する</a>
          </div>
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>

  <div style="margin-top: 20px; text-align: center;">
    <p style="color: #666; font-size: 0.9rem;">これ以前の報告はアーカイブに保管されています</p>
    <a href="{{ '/archive.html' | relative_url }}" class="read-more" style="display: inline-block; padding: 10px 30px; border: 1px solid #400;">全ての報告を表示する</a>
  </div>

  <div style="margin-top: 60px; text-align: center;">
    <h3 class="section-title">禁忌の領域</h3>
    <div class="post-card" style="max-width: 500px; margin: 0 auto; border: 1px dashed #600;">
      <p style="font-size: 0.9rem; color: #666; margin-bottom: 20px;">
        ※古い端末のメモリから復元されたアーカイブです。閲覧にはブラウザ推奨環境が必要です。
      </p>
      <a href="{{ '/desktop.html' | relative_url }}" class="read-more"
        style="font-size: 1.2rem; display: block; padding: 20px; border: 1px solid #600; background: rgba(136, 0, 0, 0.1);">
        「呪われたデスクトップ」を起動する
      </a>
    </div>

    <div class="post-card" style="max-width: 500px; margin: 20px auto; border: 1px dashed #600;">
      <p style="font-size: 0.9rem; color: #666; margin-bottom: 20px;">
        ※3D立体音響（ASMR）ホラーアーカイブ。ヘッドホンを装着し、目を閉じてください。
      </p>
      <a href="{{ '/audio-horror.html' | relative_url }}" class="read-more"
        style="font-size: 1.2rem; display: block; padding: 20px; border: 1px solid #600; background: rgba(0, 0, 0, 0.4); color: #800;">
        「闇の聴覚」を体験する
      </a>
    </div>

    <div class="post-card" style="max-width: 500px; margin: 20px auto; border: 1px dashed #600;">
      <p style="font-size: 0.9rem; color: #666; margin-bottom: 20px;">
        ※施設地下に設置された定点カメラの記録。異常を検知した場合はすぐに閉じてください。
      </p>
      <a href="{{ '/surveillance.html' | relative_url }}" class="read-more"
        style="font-size: 1.2rem; display: block; padding: 20px; border: 1px solid #600; background: rgba(0, 20, 0, 0.2); color: #0a0;">
        「監視カメラ・アーカイブ」を覗く
      </a>
    </div>

    <div class="post-card" style="max-width: 500px; margin: 20px auto; border: 1px dashed #600;">
      <p style="font-size: 0.9rem; color: #666; margin-bottom: 20px;">
        ※ある人物の遺した日記。このページを開いたまま、他のタブへ移動してみてください。
      </p>
      <a href="{{ '/tab-horror.html' | relative_url }}" class="read-more"
        style="font-size: 1.2rem; display: block; padding: 20px; border: 1px solid #600; background: rgba(40, 0, 40, 0.2); color: #808;">
        「タブの呪い」を読む
      </a>
    </div>

    <div class="post-card" style="max-width: 500px; margin: 20px auto; border: 1px dashed #600;">
      <p style="font-size: 0.9rem; color: #666; margin-bottom: 20px;">
        ※暗い迷宮に閉じ込められたホラーゲーム。鏡があなたの正気を奪い、何かがあなたを追いかけてくる。キーボード操作必須。音声推奨。
      </p>
      <a href="{{ '/mirror-maze.html' | relative_url }}" class="read-more"
        style="font-size: 1.2rem; display: block; padding: 20px; border: 1px solid #600; background: rgba(70, 70, 106, 0.2); color: #aaf;">
        「鏡の間」に迷い込む
      </a>
    </div>

    <div class="post-card" style="max-width: 500px; margin: 20px auto; border: 1px dashed #600;">
      <p style="font-size: 0.9rem; color: #666; margin-bottom: 20px;">
        ※あなたのデータが記録されています。削除プロトコルが起動されました。
      </p>
      <a href="{{ '/deletion.html' | relative_url }}" class="read-more"
        style="font-size: 1.2rem; display: block; padding: 20px; border: 1px solid #600; background: rgba(80, 0, 0, 0.15); color: #f44;">
        「削除」を実行する
      </a>
    </div>
  </div>
</div>