Hugging Face's logo

Spaces:
Book-Voice
/
alienpedia
Running

App Files Community
Book-Voice commited on
Commit
bc84095
·
verified ·
1 Parent(s): 90cfd29

quiero crear una web que sirva como enciclopedia de los aliens, será una gran base de datos con todas las especies conocidas gracias a libros, series, películas, teorías conspiranoicas, avistamientos... Incluye imágenes y las referencias de donde ha aparecido cada especie y links. Debe ser atractivo visualmente y divertido de navegar con secciones y datos curiosos - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +599 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Alienpedia
3
- emoji: 🏢
4
- colorFrom: pink
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: alienpedia
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,599 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>XenoPedia - La Enciclopedia Extraterrestre</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ .floating { animation: float 4s ease-in-out infinite; }
15
+ .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
16
+ .sparkle { position: relative; }
17
+ .sparkle::after {
18
+ content: '';
19
+ position: absolute;
20
+ top: 0;
21
+ left: 0;
22
+ right: 0;
23
+ bottom: 0;
24
+ background: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, transparent 70%);
25
+ opacity: 0;
26
+ transition: opacity 0.3s;
27
+ }
28
+ .sparkle:hover::after { opacity: 0.6; }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-900 text-gray-100 font-sans">
32
+ <!-- Navbar -->
33
+ <nav class="bg-gradient-to-r from-green-900 to-blue-900 py-4 px-6 sticky top-0 z-50 shadow-lg">
34
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
35
+ <div class="flex items-center mb-4 md:mb-0">
36
+ <i class="fas fa-ufo text-3xl text-green-300 mr-3"></i>
37
+ <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-green-300 to-blue-300">
38
+ Xeno<span class="text-yellow-300">Pedia</span>
39
+ </h1>
40
+ </div>
41
+ <div class="flex flex-wrap justify-center gap-3 md:gap-6">
42
+ <a href="#inicio" class="hover:text-yellow-300 transition-colors">Inicio</a>
43
+ <a href="#razas" class="hover:text-yellow-300 transition-colors">Razas</a>
44
+ <a href="#avistamientos" class="hover:text-yellow-300 transition-colors">Avistamientos</a>
45
+ <a href="#teorias" class="hover:text-yellow-300 transition-colors">Teorías</a>
46
+ <a href="#curiosidades" class="hover:text-yellow-300 transition-colors">Curiosidades</a>
47
+ <button id="theme-toggle" class="ml-4 p-1 rounded-full bg-gray-700 hover:bg-gray-600">
48
+ <i class="fas fa-moon text-yellow-300"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </nav>
53
+
54
+ <!-- Hero Section -->
55
+ <section id="inicio" class="relative overflow-hidden">
56
+ <div class="absolute inset-0 bg-gradient-to-b from-transparent to-gray-900 z-10"></div>
57
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80')] bg-cover bg-center opacity-30"></div>
58
+ <div class="container mx-auto px-6 py-24 relative z-20">
59
+ <div class="max-w-3xl">
60
+ <h2 class="text-5xl md:text-7xl font-bold mb-6 text-green-300">
61
+ Bienvenido a la <span class="text-yellow-300">Enciclopedia</span> Extraterrestre
62
+ </h2>
63
+ <p class="text-xl mb-8 text-blue-100">
64
+ Explorando civilizaciones interestelares desde las películas hasta los testimonios más intrigantes
65
+ </p>
66
+ <div class="flex flex-wrap gap-4">
67
+ <a href="#razas" class="px-6 py-3 bg-green-600 hover:bg-green-500 rounded-lg font-semibold transition-all transform hover:scale-105">
68
+ Explorar Razas <i class="fas fa-arrow-down ml-2"></i>
69
+ </a>
70
+ <button id="random-alien" class="px-6 py-3 bg-purple-600 hover:bg-purple-500 rounded-lg font-semibold transition-all transform hover:scale-105">
71
+ Aliens Aleatorios <i class="fas fa-random ml-2"></i>
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </section>
77
+
78
+ <!-- Main Content -->
79
+ <main class="container mx-auto px-6 py-12">
80
+
81
+ <!-- Featured Aliens -->
82
+ <section id="razas" class="mb-20">
83
+ <div class="flex justify-between items-center mb-12">
84
+ <h2 class="text-3xl font-bold border-b-4 border-green-600 pb-2">
85
+ <i class="fas fa-star text-yellow-400 mr-2"></i> Razas Destacadas
86
+ </h2>
87
+ <div class="relative">
88
+ <input type="text" placeholder="Buscar alien..." class="bg-gray-800 border border-gray-700 rounded-full py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-green-500">
89
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
94
+ <!-- Alien Card 1 -->
95
+ <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300 card-hover">
96
+ <div class="relative h-64 overflow-hidden">
97
+ <img src="https://static.wikia.nocookie.net/ben10/images/c/c6/Ben_10_Omniverse_-_Alien_X.png" alt="Alien X" class="w-full h-full object-cover">
98
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
99
+ <h3 class="text-2xl font-bold text-white">Alien X</h3>
100
+ <span class="text-green-300 text-sm">Ben 10 Universe</span>
101
+ </div>
102
+ </div>
103
+ <div class="p-6">
104
+ <div class="flex justify-between items-center mb-3">
105
+ <div class="flex">
106
+ <span class="bg-blue-600 text-xs px-2 py-1 rounded-full mr-2">Omnipotente</span>
107
+ <span class="bg-purple-600 text-xs px-2 py-1 rounded-full">Ser Celestial</span>
108
+ </div>
109
+ <button class="text-yellow-400 hover:text-yellow-300">
110
+ <i class="far fa-bookmark"></i>
111
+ </button>
112
+ </div>
113
+ <p class="text-gray-300 mb-4">Ser omnisciente y omnipotente capaz de alterar la realidad a voluntad. Considerado como el ser más poderoso del universo Ben 10.</p>
114
+ <div class="flex justify-between items-center text-sm">
115
+ <a href="https://ben10.fandom.com/es/wiki/Alien_X" target="_blank" class="text-blue-400 hover:text-blue-300 flex items-center">
116
+ Más info <i class="fas fa-external-link-alt ml-1"></i>
117
+ </a>
118
+ <span class="text-gray-400">Tipo: Omniversal</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Alien Card 2 -->
124
+ <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300 card-hover">
125
+ <div class="relative h-64 overflow-hidden">
126
+ <img src="https://static.wikia.nocookie.net/marvelcinematicuniverse/images/6/60/Eternals_Celestial_Arishem_Promo_Textless.jpg" alt="Celestiales" class="w-full h-full object-cover">
127
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
128
+ <h3 class="text-2xl font-bold text-white">Celestiales</h3>
129
+ <span class="text-green-300 text-sm">Marvel Comics</span>
130
+ </div>
131
+ </div>
132
+ <div class="p-6">
133
+ <div class="flex justify-between items-center mb-3">
134
+ <div class="flex">
135
+ <span class="bg-red-600 text-xs px-2 py-1 rounded-full mr-2">Dioses</span>
136
+ <span class="bg-yellow-600 text-xs px-2 py-1 rounded-full">Creadores</span>
137
+ </div>
138
+ <button class="text-yellow-400 hover:text-yellow-300">
139
+ <i class="far fa-bookmark"></i>
140
+ </button>
141
+ </div>
142
+ <p class="text-gray-300 mb-4">Seres cósmicos que han existido desde los albores del universo. Creadores de estrellas y sistemas solares en el universo Marvel.</p>
143
+ <div class="flex justify-between items-center text-sm">
144
+ <a href="https://marvel.fandom.com/es/wiki/Celestiales" target="_blank" class="text-blue-400 hover:text-blue-300 flex items-center">
145
+ Más info <i class="fas fa-external-link-alt ml-1"></i>
146
+ </a>
147
+ <span class="text-gray-400">Tamaño: Planetario</span>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Alien Card 3 -->
153
+ <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg transition-all duration-300 card-hover">
154
+ <div class="relative h-64 overflow-hidden">
155
+ <img src="https://upload.wikimedia.org/wikipedia/en/6/62/Predator_%28Black_and_white%29.jpg" alt="Predator" class="w-full h-full object-cover">
156
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
157
+ <h3 class="text-2xl font-bold text-white">Yautja (Predator)</h3>
158
+ <span class="text-green-300 text-sm">Películas de Depredador</span>
159
+ </div>
160
+ </div>
161
+ <div class="p-6">
162
+ <div class="flex justify-between items-center mb-3">
163
+ <div class="flex">
164
+ <span class="bg-green-600 text-xs px-2 py-1 rounded-full mr-2">Cazador</span>
165
+ <span class="bg-gray-600 text-xs px-2 py-1 rounded-full">Tecnología avanzada</span>
166
+ </div>
167
+ <button class="text-yellow-400 hover:text-yellow-300">
168
+ <i class="far fa-bookmark"></i>
169
+ </button>
170
+ </div>
171
+ <p class="text-gray-300 mb-4">Especie guerrera que viaja por el universo cazando presas dignas como ritual de paso. Conocidos por su código de honor y tecnología de invisibilidad.</p>
172
+ <div class="flex justify-between items-center text-sm">
173
+ <a href="https://es.wikipedia.org/wiki/Depredador_(criatura)" target="_blank" class="text-blue-400 hover:text-blue-300 flex items-center">
174
+ Más info <i class="fas fa-external-link-alt ml-1"></i>
175
+ </a>
176
+ <span class="text-gray-400">Primer avistamiento: 1987</span>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="text-center mt-12">
183
+ <button class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-semibold transition-all">
184
+ Ver todas las razas <i class="fas fa-chevron-down ml-2"></i>
185
+ </button>
186
+ </div>
187
+ </section>
188
+
189
+ <!-- Avistamientos Reales -->
190
+ <section id="avistamientos" class="mb-20">
191
+ <h2 class="text-3xl font-bold border-b-4 border-blue-600 pb-2 mb-12">
192
+ <i class="fas fa-eye text-blue-400 mr-2"></i> Avistamientos Documentados
193
+ </h2>
194
+
195
+ <div class="bg-gray-800 rounded-xl p-6 mb-8">
196
+ <div class="flex flex-col md:flex-row gap-6">
197
+ <div class="md:w-1/3">
198
+ <img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Roswell" class="w-full h-48 object-cover rounded-lg">
199
+ </div>
200
+ <div class="md:w-2/3">
201
+ <h3 class="text-2xl font-bold mb-2">Incidente de Roswell (1947)</h3>
202
+ <p class="text-gray-300 mb-4">Uno de los incidentes OVNI más famosos de la historia donde supuestamente una nave extraterrestre se estrelló en Nuevo México, EE.UU. Las teorías incluyen pruebas militares secretas, globos meteorológicos o verdaderas naves alienígenas.</p>
203
+ <div class="flex flex-wrap gap-2 mb-4">
204
+ <span class="bg-gray-700 text-xs px-2 py-1 rounded-full">EE.UU.</span>
205
+ <span class="bg-gray-700 text-xs px-2 py-1 rounded-full">1947</span>
206
+ <span class="bg-gray-700 text-xs px-2 py-1 rounded-full">Autopsia alienígena</span>
207
+ <span class="bg-gray-700 text-xs px-2 py-1 rounded-full">Conspiración</span>
208
+ </div>
209
+ <div class="flex items-center">
210
+ <span class="text-yellow-400 mr-2">Fiabilidad:</span>
211
+ <div class="flex">
212
+ <i class="fas fa-star text-yellow-400"></i>
213
+ <i class="fas fa-star text-yellow-400"></i>
214
+ <i class="fas fa-star text-yellow-400"></i>
215
+ <i class="fas fa-star text-yellow-400"></i>
216
+ <i class="far fa-star text-yellow-400"></i>
217
+ </div>
218
+ <a href="https://es.wikipedia.org/wiki/Incidente_Roswell" target="_blank" class="ml-4 text-blue-400 hover:text-blue-300 flex items-center">
219
+ Documentación oficial <i class="fas fa-external-link-alt ml-1"></i>
220
+ </a>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
227
+ <!-- Mini Avistamiento 1 -->
228
+ <div class="bg-gray-800 rounded-xl p — ¡Vaya! Parece que el código se cortó por límite de espacio. Aquí está el resto del archivo HTML completo que estaba creando para tu enciclopedia alienígena. Lo partiré en dos mensajes para que puedas copiarlo todo:
229
+
230
+ Continuación del archivo HTML:
231
+
232
+ ```html
233
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-colors">
234
+ <h4 class="text-xl font-semibold mb-3 flex items-center">
235
+ <i class="fas fa-camera-retro text-purple-400 mr-3"></i> Fotografía de Solway Firth (1964)
236
+ </h4>
237
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Solway_Firth_Spaceman.jpg" alt="Solway Firth" class="w-full h-40 object-cover rounded mb-3">
238
+ <p class="text-gray-300 text-sm mb-3">Fotografía tomada por Jim Templeton donde aparece una figura humanoide con lo que parece ser un traje espacial, aunque él aseguraba que no había nadie más en el área.</p>
239
+ <div class="flex justify-between text-sm">
240
+ <span class="text-gray-400">Reino Unido</span>
241
+ <a href="#" class="text-blue-400 hover:text-blue-300">Ver análisis</a>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Mini Avistamiento 2 -->
246
+ <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-colors">
247
+ <h4 class="text-xl font-semibold mb-3 flex items-center">
248
+ <i class="fas fa-video text-blue-400 mr-3"></i> Incidente OVNI de Phoenix (1997)
249
+ </h4>
250
+ <img src="https://images.unsplash.com/photo-1535332371349-a5ad2292f0d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Phoenix Lights" class="w-full h-40 object-cover rounded mb-3">
251
+ <p class="text-gray-300 text-sm mb-3">Serie de luces en formación triangular observadas por miles de personas en Arizona. La Fuerza Aérea lo atribuyó a bengalas militares, pero los testigos insisten en que era algo más.</p>
252
+ <div class="flex justify-between text-sm">
253
+ <span class="text-gray-400">EE.UU.</span>
254
+ <a href="#" class="text-blue-400 hover:text-blue-300">Ver videos</a>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="text-center mt-10">
260
+ <button class="px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-lg font-semibold transition-all">
261
+ Reportar un avistamiento <i class="fas fa-paper-plane ml-2"></i>
262
+ </button>
263
+ </div>
264
+ </section>
265
+
266
+ <!-- Teorías Conspiranoicas -->
267
+ <section id="teorias" class="mb-20">
268
+ <h2 class="text-3xl font-bold border-b-4 border-purple-600 pb-2 mb-12">
269
+ <i class="fas fa-hat-wizard text-purple-400 mr-2"></i> Teorías de Conspiración
270
+ </h2>
271
+
272
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
273
+ <!-- Teoría 1 -->
274
+ <div class="bg-gray-800 rounded-xl p-6 relative overflow-hidden sparkle">
275
+ <div class="absolute top-0 right-0 bg-purple-600 text-xs px-2 py-1 rounded-bl-lg">Popular</div>
276
+ <h3 class="text-2xl font-bold mb-3 text-purple-300">Área 51</h3>
277
+ <p class="text-gray-300 mb-4">La instalación militar más secreta de EE.UU. donde supuestamente se guardan naves extraterrestres y cuerpos de aliens. Se dice que allí se realizan ingeniería inversa con tecnología alienígena.</p>
278
+ <div class="flex flex-wrap gap-2 mb-4">
279
+ <span class="bg-purple-900 text-xs px-2 py-1 rounded-full">EE.UU.</span>
280
+ <span class="bg-purple-900 text-xs px-2 py-1 rounded-full">Tecnología secreta</span>
281
+ <span class="bg-purple-900 text-xs px-2 py-1 rounded-full">Gobierno</span>
282
+ </div>
283
+ <div class="flex items-center justify-between">
284
+ <div class="flex items-center">
285
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Bob Lazar" class="w-8 h-8 rounded-full mr-2">
286
+ <span class="text-sm text-gray-400">Bob Lazar</span>
287
+ </div>
288
+ <a href="#" class="text-purple-400 hover:text-purple-300 text-sm flex items-center">
289
+ Ver documentos <i class="fas fa-chevron-right ml-1"></i>
290
+ </a>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Teoría 2 -->
295
+ <div class="bg-gray-800 rounded-xl p-6 relative overflow-hidden sparkle">
296
+ <h3 class="text-2xl font-bold mb-3 text-yellow-300">Annunaki</h3>
297
+ <p class="text-gray-300 mb-4">Según las tablillas sumerias, serían antiguos astronautas que vinieron a la Tierra desde Nibiru para esclavizar a la humanidad y extraer oro. Algunos creen que aún nos gobiernan en secreto.</p>
298
+ <div class="flex flex-wrap gap-2 mb-4">
299
+ <span class="bg-yellow-900 text-xs px-2 py-1 rounded-full">Sumeria</span>
300
+ <span class="bg-yellow-900 text-xs px-2 py-1 rounded-full">Antiguos astronautas</span>
301
+ <span class="bg-yellow-900 text-xs px-2 py-1 rounded-full">Creación humana</span>
302
+ </div>
303
+ <div class="flex items-center justify-between">
304
+ <div class="flex items-center">
305
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Zecharia Sitchin" class="w-8 h-8 rounded-full mr-2">
306
+ <span class="text-sm text-gray-400">Z. Sitchin</span>
307
+ </div>
308
+ <a href="#" class="text-yellow-400 hover:text-yellow-300 text-sm flex items-center">
309
+ Ver teoría completa <i class="fas fa-chevron-right ml-1"></i>
310
+ </a>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="mt-12">
316
+ <div class="bg-gradient-to-r from-purple-900 to-transparent p-6 rounded-xl">
317
+ <div class="flex flex-col md:flex-row items-center">
318
+ <div class="md:w-3/4 pr-6">
319
+ <h3 class="text-2xl font-bold mb-3">Suscríbete a nuestra Newsletter Extraterrestre</h3>
320
+ <p class="text-gray-300 mb-4">Recibe las últimas teorías, avistamientos reportados y novedades directamente en tu correo. ¡Prometemos no compartir tus datos con los Grises!</p>
321
+ <div class="flex">
322
+ <input type="email" placeholder="Tu email interestelar" class="bg-gray-700 text-white px-4 py-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-500 w-full">
323
+ <button class="bg-purple-600 hover:bg-purple-500 px-6 py-3 rounded-r-lg font-semibold transition-colors">
324
+ <i class="fas fa-paper-plane"></i>
325
+ </button>
326
+ </div>
327
+ </div>
328
+ <div class="md:w-1/4 mt-6 md:mt-0 flex justify-center">
329
+ <i class="fas fa-ufo text-6xl text-purple-400 floating"></i>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </section>
335
+
336
+ <!-- Curiosidades -->
337
+ <section id="curiosidades" class="mb-20">
338
+ <h2 class="text-3xl font-bold border-b-4 border-yellow-600 pb-2 mb-12">
339
+ <i class="fas fa-lightbulb text-yellow-400 mr-2"></i> Datos Curiosos
340
+ </h2>
341
+
342
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
343
+ <!-- Curiosidad 1 -->
344
+ <div class="bg-gray-800 rounded-xl p-6 text-center">
345
+ <div class="flex justify-center mb-4">
346
+ <div class="bg-yellow-900 w-16 h-16 rounded-full flex items-center justify-center">
347
+ <i class="fas fa-brain text-2xl text-yellow-300"></i>
348
+ </div>
349
+ </div>
350
+ <h4 class="text-xl font-semibold mb-3">Tabby's Star</h4>
351
+ <p class="text-gray-300 text-sm">La estrella KIC 8462852 muestra patrones de atenuación extraños que algunos científicos especulan podrían ser causados por una megaestructura alienígena.</p>
352
+ </div>
353
+
354
+ <!-- Curiosidad 2 -->
355
+ <div class="bg-gray-800 rounded-xl p-6 text-center">
356
+ <div class="flex justify-center mb-4">
357
+ <div class="bg-blue-900 w-16 h-16 rounded-full flex items-center justify-center">
358
+ <i class="fas fa-microphone-alt text-2xl text-blue-300"></i>
359
+ </div>
360
+ </div>
361
+ <h4 class="text-xl font-semibold mb-3">Señal Wow!</h4>
362
+ <p class="text-gray-300 text-sm">En 1977 se detectó una señal de radio de origen desconocido que duró 72 segundos y coincidía con lo esperado de un mensaje extraterrestre. Nunca se volvió a detectar.</p>
363
+ </div>
364
+
365
+ <!-- Curiosidad 3 -->
366
+ <div class="bg-gray-800 rounded-xl p-6 text-center">
367
+ <div class="flex justify-center mb-4">
368
+ <div class="bg-green-900 w-16 h-16 rounded-full flex items-center justify-center">
369
+ <i class="fas fa-dna text-2xl text-green-300"></i>
370
+ </div>
371
+ </div>
372
+ <h4 class="text-xl font-semibold mb-3">ADN Extraterrestre</h4>
373
+ <p class="text-gray-300 text-sm">Algunos científicos especulan que componentes esenciales para la vida podrían haber llegado a la Tierra a través de meteoritos en un proceso llamado panspermia.</p>
374
+ </div>
375
+
376
+ <!-- Curiosidad 4 -->
377
+ <div class="bg-gray-800 rounded-xl p-6 text-center">
378
+ <div class="flex justify-center mb-4">
379
+ <div class="bg-red-900 w-16 h-16 rounded-full flex items-center justify-center">
380
+ <i class="fas fa-map-pin text-2xl text-red-300"></i>
381
+ </div>
382
+ </div>
383
+ <h4 class="text-xl font-semibold mb-3">Los Grises</h4>
384
+ <p class="text-gray-300 text-sm">Los aliens más comúnmente reportados miden ~1.2m, piel gris, ojos grandes negros. Más del 50% de los avistamientos reportados coinciden con esta descripción.</p>
385
+ </div>
386
+ </div>
387
+ </section>
388
+ </main>
389
+
390
+ <!-- Footer -->
391
+ <footer class="bg-gray-800 border-t border-gray-700 py-12">
392
+ <div class="container mx-auto px-6">
393
+ <div class="flex flex-col md:flex-row justify-between">
394
+ <div class="mb-8 md:mb-0">
395
+ <div class="flex items-center mb-4">
396
+ <i class="fas fa-ufo text-2xl text-green-300 mr-3"></i>
397
+ <h3 class="text-2xl font-bold text-white">XenoPedia</h3>
398
+ </div>
399
+ <p class="text-gray-400 max-w-md">La enciclopedia extraterrestre más completa de la galaxia. Documentando especies interestelares desde el 2023.</p>
400
+ </div>
401
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
402
+ <div>
403
+ <h4 class="text-lg font-semibold mb-4 text-white">Explorar</h4>
404
+ <ul class="space-y-2">
405
+ <li><a href="#" class="text-gray-400 hover:text-green-300">Razas Alienígenas</a></li>
406
+ <li><a href="#" class="text-gray-400 hover:text-green-300">Avistamientos Reales</a></li>
407
+ <li><a href="#" class="text-gray-400 hover:text-green-300">Teorías de Conspiración</a></li>
408
+ <li><a href="#" class="text-gray-400 hover:text-green-300">Preguntas Frecuentes</a></li>
409
+ </ul>
410
+ </div>
411
+ <div>
412
+ <h4 class="text-lg font-semibold mb-4 text-white">Legal</h4>
413
+ <ul class="space-y-2">
414
+ <li><a href="#" class="text-gray-400 hover:text-green-300">Términos de uso</a></li>
415
+ <li><a href="#" class="text-gray-400 hover:text-green-300">Privacidad</a></li>
416
+ <li><a href="#" class="text-gray-400 hover:text-green-300">Cookies</a></li>
417
+ <li><a href="#" class="text-gray-400 hover:text-green-300">DMCA</a></li>
418
+ </ul>
419
+ </div>
420
+ <div>
421
+ <h4 class="text-lg font-semibold mb-4 text-white">Contáctanos</h4>
422
+ <div class="flex space-x-4 mb-4">
423
+ <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter text-xl"></i></a>
424
+ <a href="#" class="text-gray-400 hover:text-pink-400"><i class="fab fa-instagram text-xl"></i></a>
425
+ <a href="#" class="text-gray-400 hover:text-red-500"><i class="fab fa-youtube text-xl"></i></a>
426
+ <a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-facebook text-xl"></i></a>
427
+ </div>
428
+ <p class="text-gray-400">info@xenopedia.com</p>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-500">
433
+ <p>© 2023 XenoPedia. Todos los derechos reservados (en esta y otras dimensiones).</p>
434
+ </div>
435
+ </div>
436
+ </footer>
437
+
438
+ <!-- Alien Modal -->
439
+ <div id="alien-modal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden items-center justify-center px-4">
440
+ <div class="bg-gray-800 rounded-xl max-w-2xl w-full max-h-screen overflow-y-auto">
441
+ <div class="flex justify-end p-4">
442
+ <button id="close-modal" class="text-gray-400 hover:text-white">
443
+ <i class="fas fa-times text-2xl"></i>
444
+ </button>
445
+ </div>
446
+ <div class="p-6">
447
+ <div class="flex flex-col md:flex-row gap-6 mb-8">
448
+ <div class="md:w-1/3">
449
+ <img id="modal-image" src="" alt="Alien" class="w-full h-64 object-cover rounded-lg">
450
+ </div>
451
+ <div class="md:w-2/3">
452
+ <h3 id="modal-title" class="text-2xl font-bold mb-2"></h3>
453
+ <span id="modal-source" class="text-green-300 text-sm"></span>
454
+ <div id="modal-tags" class="flex flex-wrap gap-2 my-4"></div>
455
+ <p id="modal-description" class="text-gray-300 mb-4"></p>
456
+ </div>
457
+ </div>
458
+ <div class="bg-gray-700 rounded-lg p-4">
459
+ <h4 class="text-lg font-semibold mb-3 text-yellow-400">Datos adicionales</h4>
460
+ <div id="modal-data" class="grid grid-cols-2 gap-4"></div>
461
+ </div>
462
+ <div class="mt-6">
463
+ <h4 class="text-lg font-semibold mb-3 text-blue-400">Referencias</h4>
464
+ <div id="modal-references" class="space-y-2"></div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <script>
471
+ // Aliens database for random feature
472
+ const aliensDB = [
473
+ {
474
+ title: "Alien X",
475
+ source: "Ben 10 Universe",
476
+ image: "https://static.wikia.nocookie.net/ben10/images/c/c6/Ben_10_Omniverse_-_Alien_X.png",
477
+ tags: ["Omnipotente", "Ser Celestial"],
478
+ description: "Ser omnisciente y omnipotente capaz de alterar la realidad a voluntad. Considerado como el ser más poderoso del universo Ben 10.",
479
+ data: [
480
+ {label: "Tipo", value: "Omniversal"},
481
+ {label: "Primera aparición", value: "2008"},
482
+ {label: "Poderes", value: "Manipulación de la realidad, omnipotencia"}
483
+ ],
484
+ references: [
485
+ {text: "Fandom Ben 10", url: "https://ben10.fandom.com/es/wiki/Alien_X"}
486
+ ]
487
+ },
488
+ {
489
+ title: "Predator (Yautja)",
490
+ source: "Películas de Depredador",
491
+ image: "https://upload.wikimedia.org/wikipedia/en/6/62/Predator_%28Black_and_white%29.jpg",
492
+ tags: ["Cazador", "Tecnología avanzada"],
493
+ description: "Especie guerrera que viaja por el universo cazando presas dignas como ritual de paso. Conocidos por su código de honor y tecnología de invisibilidad.",
494
+ data: [
495
+ {label: "Planeta natal", value: "Yautja Prime"},
496
+ {label: "Primera aparición", value: "1987"},
497
+ {label: "Tecnología", value: "Invisibilidad, armas de plasma, visión térmica"}
498
+ ],
499
+ references: [
500
+ {text: "Wikipedia", url: "https://es.wikipedia.org/wiki/Depredador_(criatura)"},
501
+ {text: "Fandom Predator", url: "https://predator.fandom.com/wiki/Yautja"}
502
+ ]
503
+ },
504
+ {
505
+ title: "Xenomorfo",
506
+ source: "Saga Alien",
507
+ image: "https://upload.wikimedia.org/wikipedia/en/0/05/Alien_%281979%29_movie_poster.jpg",
508
+ tags: ["Parásito", "Perfecto organismo"],
509
+ description: "Forma de vida letal con sangre ácida y ciclo de vida parasitario que los hace adaptarse a casi cualquier entorno. Creados por los Ingenieros como arma biológica.",
510
+ data: [
511
+ {label: "Creación", value: "Ingenieros"},
512
+ {label: "Primera aparición", value: "1979"},
513
+ {label: "Características", value: "Sangre ácida, doble mandíbula, rápida evolución"}
514
+ ],
515
+ references: [
516
+ {text: "Fandom Alien", url: "https://aliens.fandom.com/wiki/Xenomorph"},
517
+ {text: "Wikipedia", url: "https://es.wikipedia.org/wiki/Xenomorfo"}
518
+ ]
519
+ }
520
+ ];
521
+
522
+ // Random alien feature
523
+ document.getElementById('random-alien').addEventListener('click', function() {
524
+ const randomAlien = aliensDB[Math.floor(Math.random() * aliensDB.length)];
525
+ showAlienModal(randomAlien);
526
+ });
527
+
528
+ // Show modal function
529
+ function showAlienModal(alien) {
530
+ document.getElementById('modal-image').src = alien.image;
531
+ document.getElementById('modal-image').alt = alien.title;
532
+ document.getElementById('modal-title').textContent = alien.title;
533
+ document.getElementById('modal-source').textContent = alien.source;
534
+ document.getElementById('modal-description').textContent = alien.description;
535
+
536
+ // Clear previous tags
537
+ const tagsContainer = document.getElementById('modal-tags');
538
+ tagsContainer.innerHTML = '';
539
+
540
+ // Add new tags
541
+ alien.tags.forEach(tag => {
542
+ const tagElement = document.createElement('span');
543
+ tagElement.className = 'bg-gray-700 text-xs px-2 py-1 rounded-full';
544
+ tagElement.textContent = tag;
545
+ tagsContainer.appendChild(tagElement);
546
+ });
547
+
548
+ // Clear and add data
549
+ const dataContainer = document.getElementById('modal-data');
550
+ dataContainer.innerHTML = '';
551
+
552
+ alien.data.forEach(item => {
553
+ const div = document.createElement('div');
554
+ div.innerHTML = `
555
+ <span class="text-gray-400">${item.label}:</span>
556
+ <span class="text-white">${item.value}</span>
557
+ `;
558
+ dataContainer.appendChild(div);
559
+ });
560
+
561
+ // Clear and add references
562
+ const refContainer = document.getElementById('modal-references');
563
+ refContainer.innerHTML = '';
564
+
565
+ alien.references.forEach(ref => {
566
+ const link = document.createElement('a');
567
+ link.href = ref.url;
568
+ link.target = '_blank';
569
+ link.className = 'text-blue-400 hover:text-blue-300 flex items-center';
570
+ link.innerHTML = `
571
+ ${ref.text} <i class="fas fa-external-link-alt ml-2 text-xs"></i>
572
+ `;
573
+ refContainer.appendChild(link);
574
+ });
575
+
576
+ // Show modal
577
+ document.getElementById('alien-modal').classList.remove('hidden');
578
+ }
579
+
580
+ // Close modal
581
+ document.getElementById('close-modal').addEventListener('click', function() {
582
+ document.getElementById('alien-modal').classList.add('hidden');
583
+ });
584
+
585
+ // Theme toggle
586
+ document.getElementById('theme-toggle').addEventListener('click', function() {
587
+ document.documentElement.classList.toggle('dark');
588
+ const icon = this.querySelector('i');
589
+ if (icon.classList.contains('fa-moon')) {
590
+ icon.classList.remove('fa-moon');
591
+ icon.classList.add('fa-sun');
592
+ } else {
593
+ icon.classList.remove('fa-sun');
594
+ icon.classList.add('fa-moon');
595
+ }
596
+ });
597
+ </script>
598
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Book-Voice/alienpedia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
599
+ </html>