blob: 1a8fbbe3bb54c1f457551ce63e363cb3c1e70237 (
plain)
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
|
{{ define "main" }}
<main class="min-h-screen px-4 py-12">
<div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()">
<div class="text-center">
<!-- 404 Heading -->
<h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
404
</h1>
<!-- Error Message -->
<h2 class="text-3xl md:text-4xl font-bold mb-6">
{{ i18n "notFound" }}
</h2>
<p class="text-lg text-text-dim mb-8">
{{ i18n "notFoundMessage" }}
</p>
<!-- Search Box -->
<div class="mb-12">
<form id="search-form" class="flex flex-col gap-4">
<label for="search-input" class="sr-only">{{ i18n "searchPlaceholder" }}</label>
<input
id="search-input"
type="text"
placeholder="{{ (i18n "searchPlaceholder") }}"
class="px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text"
@input="filterArticles($el.value)"
/>
</form>
<div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0">
<template x-for="article in filteredArticles" :key="article.title">
<div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
<a :href="article.url" class="block text-left">
<h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4>
<p class="text-sm text-text-dim mt-1" x-text="article.date"></p>
</a>
</div>
</template>
</div>
<div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim">
{{ i18n "noSearchResults" }}
</div>
</div>
<!-- Recent Articles Section -->
<div class="mb-12">
<h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3>
<div class="space-y-4">
{{ range first 5 (where .Site.RegularPages "Section" "articles") }}
<div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors">
<a href="{{ .Permalink }}" class="block text-left">
<h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
<p class="text-sm text-text-dim mt-1">
{{ .Date.Format "Jan 02, 2006" }}
</p>
</a>
</div>
{{ end }}
</div>
</div>
<!-- Navigation Links -->
<div class="space-y-4 flex flex-col items-center mb-12">
<a href="/it/" class="btn btn-primary">
{{ i18n "goHome" }}
</a>
<a href="/it/articles/" class="btn btn-secondary">
{{ i18n "browseArticles" }}
</a>
<a href="/it/is/here/" class="btn btn-outline">
{{ i18n "contactSupport" }}
</a>
</div>
<!-- Easter Egg Trigger -->
<div class="mt-12 pt-8 border-t border-border">
<button
type="button"
@click="toggleEasterEgg()"
class="text-sm text-text-dim hover:text-accent transition-colors underline"
>
{{ i18n "followWhiteRabbit" }}
</button>
</div>
<!-- Easter Egg Modal (Hidden by default) -->
<div
class="fixed inset-0 z-50"
:class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }"
x-show="showEasterEgg"
x-cloak
>
<!-- Overlay -->
<div
class="absolute inset-0 bg-black/50"
@click="showEasterEgg = false"
></div>
<!-- Modal Content -->
<div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4">
<h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2>
<div class="space-y-4">
<button
type="button"
@click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}it/'"
class="w-full btn btn-primary"
>
💊 {{ i18n "bluePill" }}
</button>
<button
type="button"
@click="goToRandomArticle()"
class="w-full btn btn-secondary"
>
🐰 {{ i18n "redPill" }}
</button>
</div>
<button
type="button"
@click="showEasterEgg = false"
class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors"
aria-label="Close modal"
>
✕
</button>
</div>
</div>
</div>
</div>
</main>
{{ end }}
|
