Hugging Face's logo

LythronAI
/
lythron-ai

Spanish
English
assistant
ai
lythron
creative
analytical
futuristic
fastapi
Model card Files
xet
Community
1
LythronAI commited on
Commit
d84949d
·
verified ·
1 Parent(s): 7a168c7

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +180 -0
index.html ADDED
@@ -0,0 +1,180 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <!-- ========= META PRINCIPALES ========= -->
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Lythron AI — Conversación Inteligente Futurista</title>
8
+ <meta
9
+ name="description"
10
+ content="Lythron AI: el asistente de conversación avanzada que une precisión técnica y creatividad. Interfaz inmersiva, estilo neón futurista y tecnología de vanguardia."
11
+ />
12
+ <meta name="theme-color" content="#66CCFF" />
13
+
14
+ <!-- ========= FUENTES ========= -->
15
+ <link
16
+ href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@400;500;600&display=swap"
17
+ rel="stylesheet"
18
+ />
19
+
20
+ <!-- ========= ICONOS / FAVICON ========= -->
21
+ <link rel="icon" type="image/png" href="/favicon.png" />
22
+
23
+ <!-- ========= ESTILO INICIAL ========= -->
24
+ <style>
25
+ :root {
26
+ --neon-cyan: #66ccff;
27
+ --neon-pink: #ff66cc;
28
+ --neon-purple: #b266ff;
29
+ --bg-dark: #0a0a0f;
30
+ --bg-panel: rgba(20, 20, 30, 0.6);
31
+ }
32
+
33
+ body {
34
+ margin: 0;
35
+ font-family: 'Inter', sans-serif;
36
+ background: radial-gradient(circle at top, #0f172a, #000);
37
+ color: white;
38
+ overflow: hidden;
39
+ height: 100vh;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ }
44
+
45
+ /* ========== SPLASH DE CARGA ========== */
46
+ #splash {
47
+ position: absolute;
48
+ inset: 0;
49
+ display: flex;
50
+ flex-direction: column;
51
+ align-items: center;
52
+ justify-content: center;
53
+ background: var(--bg-dark);
54
+ z-index: 50;
55
+ animation: fadeOut 1.2s ease-in-out 2.5s forwards;
56
+ }
57
+
58
+ .loader {
59
+ width: 80px;
60
+ height: 80px;
61
+ border: 4px solid transparent;
62
+ border-top: 4px solid var(--neon-cyan);
63
+ border-right: 4px solid var(--neon-pink);
64
+ border-radius: 50%;
65
+ animation: spin 1s linear infinite;
66
+ box-shadow: 0 0 25px var(--neon-pink);
67
+ }
68
+
69
+ .logo-text {
70
+ font-family: 'Poppins', sans-serif;
71
+ font-size: 1.6rem;
72
+ font-weight: 700;
73
+ margin-top: 1.2rem;
74
+ background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
75
+ -webkit-background-clip: text;
76
+ -webkit-text-fill-color: transparent;
77
+ letter-spacing: 2px;
78
+ }
79
+
80
+ @keyframes spin {
81
+ to {
82
+ transform: rotate(360deg);
83
+ }
84
+ }
85
+
86
+ @keyframes fadeOut {
87
+ to {
88
+ opacity: 0;
89
+ visibility: hidden;
90
+ }
91
+ }
92
+
93
+ /* ========== FONDO ANIMADO FUTURISTA ========== */
94
+ .background-grid {
95
+ position: absolute;
96
+ inset: 0;
97
+ background: repeating-linear-gradient(
98
+ 90deg,
99
+ rgba(255, 255, 255, 0.03) 0 1px,
100
+ transparent 1px 100%
101
+ ),
102
+ repeating-linear-gradient(
103
+ 0deg,
104
+ rgba(255, 255, 255, 0.03) 0 1px,
105
+ transparent 1px 100%
106
+ );
107
+ background-size: 40px 40px;
108
+ animation: moveGrid 12s linear infinite;
109
+ z-index: 0;
110
+ }
111
+
112
+ @keyframes moveGrid {
113
+ from {
114
+ background-position: 0 0;
115
+ }
116
+ to {
117
+ background-position: 40px 40px;
118
+ }
119
+ }
120
+
121
+ /* ========== CHAT CONTAINER ========== */
122
+ #root {
123
+ position: relative;
124
+ z-index: 10;
125
+ width: 100%;
126
+ max-width: 900px;
127
+ height: 90vh;
128
+ background: var(--bg-panel);
129
+ backdrop-filter: blur(10px);
130
+ border: 1px solid rgba(255, 255, 255, 0.1);
131
+ border-radius: 20px;
132
+ overflow: hidden;
133
+ display: flex;
134
+ flex-direction: column;
135
+ box-shadow: 0 0 25px rgba(102, 204, 255, 0.3);
136
+ }
137
+
138
+ /* ========== TITULO SUPERIOR ========== */
139
+ .chat-header {
140
+ text-align: center;
141
+ padding: 1.2rem;
142
+ font-family: 'Poppins', sans-serif;
143
+ font-weight: 600;
144
+ letter-spacing: 1px;
145
+ background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
146
+ -webkit-background-clip: text;
147
+ -webkit-text-fill-color: transparent;
148
+ }
149
+ </style>
150
+ </head>
151
+
152
+ <body>
153
+ <!-- Fondo dinámico -->
154
+ <div class="background-grid"></div>
155
+
156
+ <!-- Pantalla de carga -->
157
+ <div id="splash">
158
+ <div class="loader"></div>
159
+ <div class="logo-text">LYTHRON AI</div>
160
+ </div>
161
+
162
+ <!-- Contenedor de React -->
163
+ <div id="root">
164
+ <div class="chat-header">Lythron AI — Conversación Inteligente</div>
165
+ <!-- React reemplazará el contenido dentro del root -->
166
+ </div>
167
+
168
+ <!-- Si JS está deshabilitado -->
169
+ <noscript>
170
+ <div
171
+ style="color:white;text-align:center;padding:2rem;background:#0a0a0f;font-family:'Inter',sans-serif;"
172
+ >
173
+ Lythron AI requiere JavaScript para funcionar. Activa JavaScript e intenta nuevamente.
174
+ </div>
175
+ </noscript>
176
+
177
+ <!-- Archivo principal React -->
178
+ <script type="module" src="/src/main.jsx"></script>
179
+ </body>
180
+ </html>