File size: 6,349 Bytes
8f95b98
 
 
9fac15a
 
 
8f95b98
 
9fac15a
8f95b98
 
9fac15a
8f95b98
9fac15a
 
 
 
 
8f95b98
9fac15a
 
 
8f95b98
 
 
 
 
 
9fac15a
 
 
8f95b98
 
9fac15a
8f95b98
 
 
 
 
9fac15a
 
 
 
 
8f95b98
 
 
 
 
 
 
 
 
9fac15a
8f95b98
9fac15a
 
8f95b98
9fac15a
8f95b98
 
 
 
 
 
9fac15a
 
8f95b98
9fac15a
8f95b98
9fac15a
 
8f95b98
 
 
 
 
9fac15a
8f95b98
9fac15a
8f95b98
 
9fac15a
8f95b98
 
 
 
 
 
 
9fac15a
8f95b98
 
 
 
 
9fac15a
8f95b98
 
 
 
 
 
9fac15a
 
8f95b98
9fac15a
8f95b98
 
 
 
 
 
 
 
 
 
 
 
9fac15a
8f95b98
 
9fac15a
8f95b98
 
 
 
 
 
 
 
9fac15a
 
8f95b98
 
 
 
9fac15a
 
8f95b98
9fac15a
8f95b98
9fac15a
8f95b98
 
9fac15a
8f95b98
9fac15a
 
8f95b98
 
9fac15a
8f95b98
 
9fac15a
8f95b98
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9fac15a
8f95b98
9fac15a
8f95b98
 
 
 
 
 
9fac15a
8f95b98
 
 
9fac15a
8f95b98
 
 
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="es">
  <head>
    <!-- ════════════════════════════════════════════════ -->
    <!-- META PRINCIPALES -->
    <!-- ════════════════════════════════════════════════ -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lythron AI — Inteligencia Evolutiva y Accesible</title>
    <meta

      name="description"

      content="Lythron AI

    />

    <meta name="keywords" content="Lythron AI, asistente inteligente, IA creativa, chat futurista, inteligencia artificial" />
    <meta name="theme-color" content="#00C2FF" />
    <meta name="application-name" content="Lythron AI" />
    <meta name="author" content="Lythron AI" />
    <meta name="robots" content="index, follow" />

    <!-- ════════════════════════════════════════════════ -->
    <!-- FUENTES Y ESTILO -->
    <!-- ════════════════════════════════════════════════ -->
    <link

      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500;600&display=swap"

      rel="stylesheet"

    />
    <link rel="icon" type="image/png" href="/favicon.png" />

    <!-- ════════════════════════════════════════════════ -->
    <!-- ESTILOS INICIALES -->
    <!-- ════════════════════════════════════════════════ -->
    <style>

      :root {

        --neon-cyan: #00c2ff;

        --neon-pink: #ff66cc;

        --neon-purple: #b266ff;

        --bg-dark: #0a0a0f;

        --bg-panel: rgba(20, 20, 30, 0.6);

      }



      * {

        box-sizing: border-box;

      }



      body {

        margin: 0;

        font-family: 'Inter', sans-serif;

        background: radial-gradient(circle at top, #0f172a, #000);

        color: white;

        height: 100vh;

        display: flex;

        align-items: center;

        justify-content: center;

        overflow: hidden;

      }



      /* ═════════ SPLASH DE CARGA ═════════ */

      #splash {

        position: fixed;

        inset: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        background: var(--bg-dark);

        z-index: 100;

        animation: fadeOut 1.4s ease-in-out 2.8s forwards;

      }



      .loader {

        width: 85px;

        height: 85px;

        border: 4px solid transparent;

        border-top: 4px solid var(--neon-cyan);

        border-right: 4px solid var(--neon-pink);

        border-radius: 50%;

        animation: spin 1s linear infinite;

        box-shadow: 0 0 30px var(--neon-pink);

      }



      .logo-text {

        font-family: 'Poppins', sans-serif;

        font-size: 1.8rem;

        font-weight: 700;

        margin-top: 1.2rem;

        background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        letter-spacing: 2px;

      }



      @keyframes spin {

        to {

          transform: rotate(360deg);

        }

      }



      @keyframes fadeOut {

        to {

          opacity: 0;

          visibility: hidden;

        }

      }



      /* ═════════ FONDO ANIMADO ═════════ */

      .background-grid {

        position: fixed;

        inset: 0;

        background: repeating-linear-gradient(

            90deg,

            rgba(255, 255, 255, 0.03) 0 1px,

            transparent 1px 100%

          ),

          repeating-linear-gradient(

            0deg,

            rgba(255, 255, 255, 0.03) 0 1px,

            transparent 1px 100%

          );

        background-size: 40px 40px;

        animation: moveGrid 14s linear infinite;

        z-index: 0;

      }



      @keyframes moveGrid {

        from {

          background-position: 0 0;

        }

        to {

          background-position: 40px 40px;

        }

      }



      /* ═════════ CONTENEDOR PRINCIPAL ═════════ */

      #root {

        position: relative;

        z-index: 10;

        width: 100%;

        max-width: 920px;

        height: 88vh;

        background: var(--bg-panel);

        backdrop-filter: blur(12px);

        border: 1px solid rgba(255, 255, 255, 0.1);

        border-radius: 22px;

        display: flex;

        flex-direction: column;

        box-shadow: 0 0 25px rgba(0, 194, 255, 0.3);

      }



      /* ═════════ HEADER ═════════ */

      .chat-header {

        text-align: center;

        padding: 1.4rem;

        font-family: 'Poppins', sans-serif;

        font-weight: 600;

        font-size: 1.2rem;

        letter-spacing: 1px;

        background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

      }

    </style>
  </head>

  <body>
    <!-- Fondo dinámico -->
    <div class="background-grid"></div>

    <!-- Pantalla de carga -->
    <div id="splash">
      <div class="loader"></div>
      <div class="logo-text">LYTHRON AI</div>
    </div>

    <!-- Contenedor principal (React) -->
    <div id="root">
      <div class="chat-header">Lythron AI — Inteligencia que evoluciona contigo</div>
    </div>

    <noscript>
      <div

        style="color:white;text-align:center;padding:2rem;background:#0a0a0f;font-family:'Inter',sans-serif;"

      >
         Lythron AI requiere JavaScript para funcionar. Activa JavaScript e intenta nuevamente.
      </div>
    </noscript>

    <!-- Script principal React -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>