timinside.github.io/404.html at main · timinside/timinside.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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Страница не найдена | bbweb</title>
    <link rel="icon" href="icon.png" type="image/png">
    <meta name="description" content="Страница не найдена.">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        :root { --bg: #ffffff; --bg-secondary: #f9fafb; --text-main: #111827; --text-muted: #6b7280; --border: #e5e7eb; --accent: #2563eb; }
        html[data-theme="dark"] { --bg: #111827; --bg-secondary: #1f2937; --text-main: #f9fafb; --text-muted: #9ca3af; --border: #374151; --accent: #3b82f6; }
        body { font-family: 'Manrope', sans-serif; background-color: var(--bg); color: var(--text-main); transition: background-color 0.3s, color 0.3s; }
        .theme-btn:hover { background-color: var(--bg-secondary); }
        .btn-primary { display: inline-block; background-color: var(--accent); color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; transition: background-color 0.2s; }
        .btn-primary:hover { background-color: #1d4ed8; }
        html[data-theme="dark"] .btn-primary:hover { background-color: #60a5fa; }
    </style>
</head>
<body class="antialiased flex flex-col min-h-screen">

    <header class="py-5 border-b" style="border-color: var(--border);">
        <div class="max-w-5xl mx-auto px-4 flex justify-between items-center">
            <a href="/index.html" class="text-2xl font-extrabold tracking-tight">bbweb</a>
            <button id="theme-toggle" class="theme-btn p-2 rounded-lg border" style="border-color: var(--border);">
                <svg id="sun-icon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
                <svg id="moon-icon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
            </button>
        </div>
    </header>

    <main class="flex-grow flex items-center justify-center">
        <div class="max-w-md mx-auto px-4 py-16 sm:py-24 text-center">
            <h1 class="text-8xl md:text-9xl font-extrabold tracking-tighter" style="color: var(--accent);">404</h1>
            <h2 class="mt-4 text-3xl md:text-4xl font-bold tracking-tight">Страница не найдена</h2>
            <p class="mt-4 text-lg" style="color: var(--text-muted);">
                К сожалению, страница, которую вы ищете, не существует или была перемещена.
            </p>
            <a href="/index.html" class="btn-primary mt-8">Вернуться на главную</a>
        </div>
    </main>

    <footer class="py-6 border-t" style="border-color: var(--border);">
        <div class="max-w-5xl mx-auto px-4 text-center">
            <p style="color: var(--text-muted);">Сайт находится в стадии разработки</p>
        </div>
    </footer>

    <script>
        const themeToggle = document.getElementById('theme-toggle');
        const sunIcon = document.getElementById('sun-icon');
        const moonIcon = document.getElementById('moon-icon');

        const applyTheme = (theme) => {
            document.documentElement.setAttribute('data-theme', theme);
            localStorage.setItem('bbweb_theme', theme);
            sunIcon.style.display = theme === 'dark' ? 'none' : 'block';
            moonIcon.style.display = theme === 'dark' ? 'block' : 'none';
        };

        themeToggle.addEventListener('click', () => {
            const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            applyTheme(newTheme);
        });

        const savedTheme = localStorage.getItem('bbweb_theme') || 'dark'; // Default to dark
        applyTheme(savedTheme);
    </script>
</body>
</html>