cypherpunks-core.github.io/404.html at master · cypherpunks-core/cypherpunks-core.github.io · 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
---
layout: default
title: "404 - 頁面不存在"
permalink: /404.html
hide_hero: true
---

<main id="main-content" class="flex-1">
  <div class="container mx-auto px-4 py-20">
    <div class="max-w-2xl mx-auto text-center">
      <!-- Glitch Effect 404 -->
      <div class="relative mb-8">
        <h1 class="text-9xl font-bold text-cp-green-500 font-mono glitch" data-text="404">404</h1>
      </div>

      <!-- Error Message -->
      <h2 class="text-2xl md:text-3xl font-bold text-cp-dark-800 mb-4">
        頁面不存在
      </h2>
      <p class="text-cp-dark-600 mb-8 font-mono">
        <span class="text-cp-green-500">$</span> ERROR: The requested page could not be found.
      </p>

      <!-- Terminal Style Box -->
      <div class="bg-cp-dark-100 border border-cp-dark-300 rounded-lg p-6 mb-8 text-left font-mono">
        <div class="flex items-center gap-2 mb-4 pb-3 border-b border-cp-dark-300">
          <span class="w-3 h-3 rounded-full bg-red-500"></span>
          <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
          <span class="w-3 h-3 rounded-full bg-green-500"></span>
          <span class="ml-2 text-cp-dark-500 text-sm">terminal</span>
        </div>
        <div class="text-sm text-cp-dark-600">
          <p><span class="text-cp-green-500">cypherpunk@taiwan</span>:<span class="text-blue-400">~</span>$ find /page</p>
          <p class="text-red-400 mt-1">find: '/page': No such file or directory</p>
          <p class="mt-2"><span class="text-cp-green-500">cypherpunk@taiwan</span>:<span class="text-blue-400">~</span>$ <span class="animate-pulse">_</span></p>
        </div>
      </div>

      <!-- Suggestions -->
      <div class="text-cp-dark-600 mb-8">
        <p class="mb-4">你可以嘗試：</p>
        <ul class="space-y-2">
          <li>
            <a href="/" class="text-cp-green-500 hover:text-cp-green-400 transition-colors">
              → 返回首頁
            </a>
          </li>
          <li>
            <a href="/blog/" class="text-cp-green-500 hover:text-cp-green-400 transition-colors">
              → 瀏覽文章
            </a>
          </li>
          <li>
            <a href="/markdown/resources/bitcoin-resources/" class="text-cp-green-500 hover:text-cp-green-400 transition-colors">
              → 查看資源
            </a>
          </li>
        </ul>
      </div>

      <!-- Back Button -->
      <a href="/" class="inline-flex items-center gap-2 px-6 py-3 bg-cp-green-600 hover:bg-cp-green-500 text-cp-dark font-bold rounded-lg transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        返回首頁
      </a>
    </div>
  </div>
</main>

<style>
  .glitch {
    position: relative;
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .glitch::before {
    animation: glitch-1 2s infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    color: #ff0000;
    opacity: 0.8;
  }

  .glitch::after {
    animation: glitch-2 3s infinite linear alternate-reverse;
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    color: #00ffff;
    opacity: 0.8;
  }

  @keyframes glitch-1 {
    0% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    100% { transform: translateX(0); }
  }

  @keyframes glitch-2 {
    0% { transform: translateX(0); }
    20% { transform: translateX(3px); }
    40% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    80% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
  }
</style>