blob: 3b4ea2ec771d46205f50638539e707bb0d2d9e11 (
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
{{ define "main" }}
<!-- Pass articles data to JavaScript for Alpine.js -->
<script>
window.articlesData = [
{{ range (where .Site.RegularPages "Section" "articles") }}
{
title: '{{ .Title | safeJS }}',
url: '{{ .Permalink }}',
date: '{{ .Date.Format "Jan 02, 2006" }}',
content: '{{ (.Summary | plainify | safeJS) }}'
},
{{ end }}
];
</script>
<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">
Pagina Non Trovata
</h2>
<p class="text-lg text-text-dim mb-8">
Mi dispiace, la pagina che stai cercando non esiste. Prova a cercare o sfoglia gli articoli qui sotto.
</p>
<!-- Search Box -->
<div class="mb-12">
<form id="search-form" class="flex flex-col gap-4">
<label for="search-input" class="sr-only">Cerca articoli...</label>
<input
id="search-input"
type="text"
placeholder="Cerca articoli..."
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">
Nessun articolo trovato che corrisponda alla tua ricerca.
</div>
</div>
<!-- Recent Articles Section -->
<div class="mb-12">
<h3 class="text-2xl font-bold mb-6">Articoli Recenti</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">
Torna a Casa
</a>
<a href="/it/articles/" class="btn btn-secondary">
Sfoglia Articoli
</a>
<a href="/it/is/here/" class="btn btn-outline">
Contattami
</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"
>
Segui il coniglio bianco...
</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">Scegli il Tuo Percorso</h2>
<div class="space-y-4">
<button
type="button"
@click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}it/'"
class="w-full btn btn-primary"
>
💊 Rimani Qui
</button>
<button
type="button"
@click="goToRandomArticle()"
class="w-full btn btn-secondary"
>
🐰 Mostrami di Più
</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 }}
|
