404/index.html at main · InledGroup/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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Página no encontrada | Inled</title>
    <style>
        :root {
            --white: #ffffff;
            --glass-bg: rgba(255, 255, 255, 0.15);
            --glass-border: rgba(255, 255, 255, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url('https://hosted.inled.es/better.inled.png') no-repeat center center;
            background-size: cover;
            overflow: hidden;
        }

        .container {
            width: 90%;
            max-width: 600px;
            padding: 3.5rem 2rem;
            background: var(--glass-bg);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid var(--glass-border);
            border-radius: 28px;
            text-align: center;
            color: var(--white);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
        }

        .logo {
            width: 140px;
            height: auto;
            margin-bottom: 2.5rem;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }

        h1 {
            font-size: 2.4rem;
            font-weight: 700;
            margin-bottom: 1.2rem;
            line-height: 1.1;
            letter-spacing: -0.5px;
        }

        p {
            font-size: 1.15rem;
            opacity: 0.9;
            margin-bottom: 3rem;
            line-height: 1.5;
            font-weight: 400;
        }

        .progress-wrapper {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .progress-bar {
            height: 100%;
            width: 100%;
            background: var(--white);
            border-radius: 10px;
            transition: width 2s linear;
        }

        .redirect-text {
            margin-top: 1.2rem;
            font-size: 0.8rem;
            opacity: 0.6;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
        }

        @keyframes fadeInScale {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .container {
            animation: fadeInScale 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
    </style>
</head>
<body>

    <div class="container">
        <img src="https://hosted.inled.es/INLED_simple-removebg-preview.png" alt="Inled Logo" class="logo">

        <h1>Hemos buscado pero no aparece</h1>
        <p>La página que buscas ya no existe o se ha movido.</p>

        <div class="progress-wrapper">
            <div id="progressBar" class="progress-bar"></div>
        </div>
        <div class="redirect-text">Redirigiendo a inled.es...</div>
    </div>

    <script>
        window.onload = () => {
            const bar = document.getElementById('progressBar');

            // Forzar reflow para asegurar que la transición ocurra
            void bar.offsetWidth;

            // Iniciar vaciado de barra (2 segundos)
            bar.style.width = '0%';

            // Redirección exacta
            setTimeout(() => {
                window.location.href = 'https://inled.es';
            }, 2000);
        };
    </script>
</body>
</html>