Hugging Face's logo

Spaces:
hellodigitalAI
/
hrscp-gen
Running

App Files Community
hellodigitalAI commited on
Commit
0ca2d8e
·
verified ·
1 Parent(s): 1f11993

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +551 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hrscp Gen
3
- emoji: 🐨
4
- colorFrom: red
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: hrscp-gen
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
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,551 @@
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>Horóscopo Generativo - Predicciones Mensuales</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #0f0e17;
15
+ color: #fffffe;
16
+ }
17
+
18
+ .title-font {
19
+ font-family: 'Playfair Display', serif;
20
+ }
21
+
22
+ .gradient-bg {
23
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
24
+ }
25
+
26
+ .star {
27
+ position: absolute;
28
+ background-color: #fff;
29
+ border-radius: 50%;
30
+ animation: twinkle var(--duration) ease-in-out infinite;
31
+ }
32
+
33
+ @keyframes twinkle {
34
+ 0%, 100% { opacity: 0.2; }
35
+ 50% { opacity: 1; }
36
+ }
37
+
38
+ .horoscope-card {
39
+ background: rgba(255, 255, 255, 0.03);
40
+ border: 1px solid rgba(255, 215, 0, 0.1);
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .horoscope-card:hover {
45
+ background: rgba(255, 255, 255, 0.07);
46
+ border-color: rgba(255, 215, 0, 0.3);
47
+ transform: translateY(-5px);
48
+ }
49
+
50
+ .zodiac-sign {
51
+ position: relative;
52
+ }
53
+
54
+ .zodiac-sign::after {
55
+ content: '';
56
+ position: absolute;
57
+ bottom: -8px;
58
+ left: 0;
59
+ width: 100%;
60
+ height: 2px;
61
+ background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.7), transparent);
62
+ }
63
+
64
+ .last-updated {
65
+ font-size: 0.8rem;
66
+ color: rgba(255, 255, 255, 0.5);
67
+ text-align: center;
68
+ margin-top: 1rem;
69
+ }
70
+
71
+ .loading {
72
+ display: inline-block;
73
+ width: 20px;
74
+ height: 20px;
75
+ border: 3px solid rgba(255,255,255,.3);
76
+ border-radius: 50%;
77
+ border-top-color: #fff;
78
+ animation: spin 1s ease-in-out infinite;
79
+ }
80
+
81
+ @keyframes spin {
82
+ to { transform: rotate(360deg); }
83
+ }
84
+
85
+ .copy-btn {
86
+ transition: all 0.3s ease;
87
+ }
88
+
89
+ .copy-btn:hover {
90
+ transform: scale(1.05);
91
+ }
92
+
93
+ .copy-btn.copied {
94
+ background-color: #10b981 !important;
95
+ }
96
+
97
+ .date-selector {
98
+ background: rgba(255, 255, 255, 0.1);
99
+ border: 1px solid rgba(255, 255, 255, 0.2);
100
+ color: white;
101
+ padding: 0.5rem 1rem;
102
+ border-radius: 0.5rem;
103
+ outline: none;
104
+ transition: all 0.3s ease;
105
+ }
106
+
107
+ .date-selector:hover {
108
+ background: rgba(255, 255, 255, 0.15);
109
+ border-color: rgba(255, 215, 0, 0.5);
110
+ }
111
+
112
+ .date-selector:focus {
113
+ border-color: rgba(255, 215, 0, 0.8);
114
+ box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
115
+ }
116
+
117
+ .generate-btn {
118
+ background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
119
+ transition: all 0.3s ease;
120
+ }
121
+
122
+ .generate-btn:hover {
123
+ transform: translateY(-2px);
124
+ box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
125
+ }
126
+
127
+ .prediction-text {
128
+ min-height: 120px;
129
+ }
130
+ </style>
131
+ </head>
132
+ <body class="min-h-screen">
133
+ <!-- Floating Stars Background -->
134
+ <div id="stars-container" class="fixed inset-0 overflow-hidden z-0"></div>
135
+
136
+ <!-- Header -->
137
+ <header class="relative z-10 gradient-bg border-b border-purple-900/30">
138
+ <div class="container mx-auto px-6 py-8">
139
+ <div class="flex justify-between items-center">
140
+ <div class="flex items-center">
141
+ <i class="fas fa-moon text-yellow-400 text-3xl mr-3"></i>
142
+ <h1 class="title-font text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-pink-500">
143
+ Horóscopo Generativo
144
+ </h1>
145
+ </div>
146
+ <div id="current-date" class="text-sm font-medium bg-black/20 px-3 py-1 rounded-full"></div>
147
+ </div>
148
+ </div>
149
+ </header>
150
+
151
+ <!-- Daily Horoscope Section -->
152
+ <section class="relative z-10 py-16 px-6 bg-black/20 backdrop-blur-sm">
153
+ <div class="container mx-auto">
154
+ <div class="text-center mb-12">
155
+ <div class="inline-block bg-gradient-to-r from-yellow-500 to-pink-500 text-gray-900 px-4 py-1 rounded-full text-sm font-bold mb-4">
156
+ PREDICCIONES MENSUALES GENERATIVAS
157
+ </div>
158
+ <h2 class="title-font text-3xl font-bold mb-2">
159
+ Predicciones únicas generadas por IA
160
+ </h2>
161
+ <p class="text-gray-400 max-w-2xl mx-auto">
162
+ Descubre mensajes astrológicos completamente originales generados al instante para cada signo.
163
+ </p>
164
+ </div>
165
+
166
+ <!-- Date Selector -->
167
+ <div class="flex justify-center items-center gap-4 mb-8 flex-wrap">
168
+ <div class="flex items-center gap-2">
169
+ <label for="month-select" class="text-gray-300">Mes:</label>
170
+ <select id="month-select" class="date-selector">
171
+ <option value="1">Enero</option>
172
+ <option value="2">Febrero</option>
173
+ <option value="3">Marzo</option>
174
+ <option value="4">Abril</option>
175
+ <option value="5">Mayo</option>
176
+ <option value="6">Junio</option>
177
+ <option value="7">Julio</option>
178
+ <option value="8">Agosto</option>
179
+ <option value="9">Septiembre</option>
180
+ <option value="10">Octubre</option>
181
+ <option value="11">Noviembre</option>
182
+ <option value="12">Diciembre</option>
183
+ </select>
184
+ </div>
185
+
186
+ <div class="flex items-center gap-2">
187
+ <label for="year-select" class="text-gray-300">Año:</label>
188
+ <select id="year-select" class="date-selector">
189
+ <option value="2023">2023</option>
190
+ <option value="2024">2024</option>
191
+ <option value="2025">2025</option>
192
+ <option value="2026">2026</option>
193
+ <option value="2027">2027</option>
194
+ <option value="2028">2028</option>
195
+ <option value="2029">2029</option>
196
+ <option value="2030">2030</option>
197
+ </select>
198
+ </div>
199
+
200
+ <button id="generate-btn" class="generate-btn text-white px-6 py-2 rounded-full font-medium flex items-center gap-2">
201
+ <i class="fas fa-star"></i> Generar Horóscopo
202
+ </button>
203
+ </div>
204
+
205
+ <div id="loading" class="text-center py-12">
206
+ <div class="loading mx-auto"></div>
207
+ <p class="mt-4 text-gray-400">Generando predicciones únicas...</p>
208
+ </div>
209
+
210
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 hidden" id="horoscope-container">
211
+ <!-- Horoscope cards will be generated by JavaScript -->
212
+ </div>
213
+
214
+ <div id="last-updated" class="last-updated"></div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- Zodiac Showcase -->
219
+ <section class="relative z-10 py-12 bg-black/20 backdrop-blur-sm">
220
+ <div class="container mx-auto px-6">
221
+ <h2 class="title-font text-3xl text-center font-bold mb-12">
222
+ Los 12 <span class="text-yellow-400">Signos</span> del Zodíaco
223
+ </h2>
224
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6">
225
+ <!-- Aries -->
226
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-purple-900/30 cursor-pointer">
227
+ <i class="fas fa-fire text-red-500 text-4xl mb-2"></i>
228
+ <span class="font-medium">Aries</span>
229
+ <span class="text-xs text-gray-400">21/03 - 19/04</span>
230
+ </div>
231
+ <!-- Taurus -->
232
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-green-900/30 cursor-pointer">
233
+ <i class="fas fa-paw text-green-500 text-4xl mb-2"></i>
234
+ <span class="font-medium">Tauro</span>
235
+ <span class="text-xs text-gray-400">20/04 - 20/05</span>
236
+ </div>
237
+ <!-- Gemini -->
238
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-yellow-900/30 cursor-pointer">
239
+ <i class="fas fa-comments text-yellow-500 text-4xl mb-2"></i>
240
+ <span class="font-medium">Géminis</span>
241
+ <span class="text-xs text-gray-400">21/05 - 20/06</span>
242
+ </div>
243
+ <!-- Cancer -->
244
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-blue-900/30 cursor-pointer">
245
+ <i class="fas fa-moon text-blue-400 text-4xl mb-2"></i>
246
+ <span class="font-medium">Cáncer</span>
247
+ <span class="text-xs text-gray-400">21/06 - 22/07</span>
248
+ </div>
249
+ <!-- Leo -->
250
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-orange-900/30 cursor-pointer">
251
+ <i class="fas fa-sun text-orange-400 text-4xl mb-2"></i>
252
+ <span class="font-medium">Leo</span>
253
+ <span class="text-xs text-gray-400">23/07 - 22/08</span>
254
+ </div>
255
+ <!-- Virgo -->
256
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-green-900/30 cursor-pointer">
257
+ <i class="fas fa-leaf text-green-300 text-4xl mb-2"></i>
258
+ <span class="font-medium">Virgo</span>
259
+ <span class="text-xs text-gray-400">23/08 - 22/09</span>
260
+ </div>
261
+ <!-- Libra -->
262
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-pink-900/30 cursor-pointer">
263
+ <i class="fas fa-balance-scale text-pink-400 text-4xl mb-2"></i>
264
+ <span class="font-medium">Libra</span>
265
+ <span class="text-xs text-gray-400">23/09 - 22/10</span>
266
+ </div>
267
+ <!-- Scorpio -->
268
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-red-900/30 cursor-pointer">
269
+ <i class="fas fa-scroll text-red-400 text-4xl mb-2"></i>
270
+ <span class="font-medium">Escorpio</span>
271
+ <span class="text-xs text-gray-400">23/10 - 21/11</span>
272
+ </div>
273
+ <!-- Sagittarius -->
274
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-purple-900/30 cursor-pointer">
275
+ <i class="fas fa-arrow-up text-purple-400 text-4xl mb-2"></i>
276
+ <span class="font-medium">Sagitario</span>
277
+ <span class="text-xs text-gray-400">22/11 - 21/12</span>
278
+ </div>
279
+ <!-- Capricorn -->
280
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-gray-900/30 cursor-pointer">
281
+ <i class="fas fa-mountain text-gray-400 text-4xl mb-2"></i>
282
+ <span class="font-medium">Capricornio</span>
283
+ <span class="text-xs text-gray-400">22/12 - 19/01</span>
284
+ </div>
285
+ <!-- Aquarius -->
286
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-blue-900/30 cursor-pointer">
287
+ <i class="fas fa-water text-blue-300 text-4xl mb-2"></i>
288
+ <span class="font-medium">Acuario</span>
289
+ <span class="text-xs text-gray-400">20/01 - 18/02</span>
290
+ </div>
291
+ <!-- Pisces -->
292
+ <div class="zodiac-icon flex flex-col items-center p-4 rounded-xl hover:bg-indigo-900/30 cursor-pointer">
293
+ <i class="fas fa-fish text-indigo-300 text-4xl mb-2"></i>
294
+ <span class="font-medium">Piscis</span>
295
+ <span class="text-xs text-gray-400">19/02 - 20/03</span>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <script>
302
+ // Create floating stars
303
+ function createStars() {
304
+ const container = document.getElementById('stars-container');
305
+ const starCount = 100;
306
+
307
+ for (let i = 0; i < starCount; i++) {
308
+ const star = document.createElement('div');
309
+ star.classList.add('star');
310
+
311
+ // Random size between 1 and 3 pixels
312
+ const size = Math.random() * 2 + 1;
313
+ star.style.width = `${size}px`;
314
+ star.style.height = `${size}px`;
315
+
316
+ // Random position
317
+ star.style.left = `${Math.random() * 100}%`;
318
+ star.style.top = `${Math.random() * 100}%`;
319
+
320
+ // Random animation duration between 2 and 5 seconds
321
+ const duration = Math.random() * 3 + 2;
322
+ star.style.setProperty('--duration', `${duration}s`);
323
+
324
+ container.appendChild(star);
325
+ }
326
+ }
327
+
328
+ // Daily Horoscope Functionality
329
+ function setupHoroscope() {
330
+ const zodiacSigns = [
331
+ { name: "Aries", icon: "fa-fire", color: "text-red-500", dates: "21/03 - 19/04" },
332
+ { name: "Tauro", icon: "fa-paw", color: "text-green-500", dates: "20/04 - 20/05" },
333
+ { name: "Géminis", icon: "fa-comments", color: "text-yellow-500", dates: "21/05 - 20/06" },
334
+ { name: "Cáncer", icon: "fa-moon", color: "text-blue-400", dates: "21/06 - 22/07" },
335
+ { name: "Leo", icon: "fa-sun", color: "text-orange-400", dates: "23/07 - 22/08" },
336
+ { name: "Virgo", icon: "fa-leaf", color: "text-green-300", dates: "23/08 - 22/09" },
337
+ { name: "Libra", icon: "fa-balance-scale", color: "text-pink-400", dates: "23/09 - 22/10" },
338
+ { name: "Escorpio", icon: "fa-scroll", color: "text-red-400", dates: "23/10 - 21/11" },
339
+ { name: "Sagitario", icon: "fa-arrow-up", color: "text-purple-400", dates: "22/11 - 21/12" },
340
+ { name: "Capricornio", icon: "fa-mountain", color: "text-gray-400", dates: "22/12 - 19/01" },
341
+ { name: "Acuario", icon: "fa-water", color: "text-blue-300", dates: "20/01 - 18/02" },
342
+ { name: "Piscis", icon: "fa-fish", color: "text-indigo-300", dates: "19/02 - 20/03" }
343
+ ];
344
+
345
+ // Function to generate completely random love compatibility
346
+ function generateLoveCompatibility() {
347
+ const compatibilities = [
348
+ { text: "Alta compatibilidad amorosa", color: "text-green-400",
349
+ desc: "Las estrellas favorecen encuentros significativos y conexiones profundas" },
350
+ { text: "Compatibilidad media", color: "text-yellow-400",
351
+ desc: "Momento para trabajar en la comunicación y comprensión mutua" },
352
+ { text: "Baja compatibilidad", color: "text-red-400",
353
+ desc: "Enfócate en tu crecimiento personal antes que en relaciones nuevas" },
354
+ { text: "Compatibilidad variable", color: "text-purple-400",
355
+ desc: "Los planetas indican altibajos emocionales que requieren paciencia" },
356
+ { text: "Compatibilidad sorprendente", color: "text-pink-400",
357
+ desc: "Encuentros inesperados podrían cambiar tu perspectiva amorosa" },
358
+ { text: "Compatibilidad kármica", color: "text-indigo-400",
359
+ desc: "Relaciones que llegan para enseñarte lecciones importantes" }
360
+ ];
361
+
362
+ return compatibilities[Math.floor(Math.random() * compatibilities.length)];
363
+ }
364
+
365
+ // Function to generate random lucky numbers
366
+ function generateLuckyNumbers() {
367
+ const count = 3 + Math.floor(Math.random() * 3); // 3-5 numbers
368
+ const numbers = [];
369
+
370
+ for (let i = 0; i < count; i++) {
371
+ numbers.push(Math.floor(Math.random() * 50) + 1); // 1-50
372
+ }
373
+
374
+ return numbers.join(", ");
375
+ }
376
+
377
+ // Function to generate AI-like predictions (completely random each time)
378
+ function generateRandomPrediction(sign, month, year) {
379
+ // Planetary influences
380
+ const planets = ["Mercurio", "Venus", "Marte", "Júpiter", "Saturno", "Urano", "Neptuno", "Plutón"];
381
+ const influences = ["armonía", "transformación", "crecimiento", "pasión", "sabiduría", "intuición", "suerte", "claridad"];
382
+
383
+ // Life aspects
384
+ const aspects = ["amor", "trabajo", "salud", "finanzas", "crecimiento personal", "familia", "amistades", "carrera"];
385
+
386
+ // Prediction structures
387
+ const structures = [
388
+ `La alineación de ${planets[Math.floor(Math.random() * planets.length)]} con ${planets[Math.floor(Math.random() * planets.length)]} ` +
389
+ `trae ${influences[Math.floor(Math.random() * influences.length)]} al área de ${aspects[Math.floor(Math.random() * aspects.length)]}. ` +
390
+ `Es momento propicio para ${["explorar nuevas oportunidades", "profundizar en relaciones", "invertir en ti mismo", "tomar riesgos calculados"][Math.floor(Math.random() * 4)]}. ` +
391
+ `La energía de ${sign} se verá especialmente ${["favorecida", "desafiada", "transformada", "iluminada"][Math.floor(Math.random() * 4)]} durante este período.`,
392
+
393
+ `Los tránsitos planetarios indican que ${["tu intuición será clave", "deberás ser paciente", "la comunicación fluirá", "las oportunidades llegarán"][Math.floor(Math.random() * 4)]} ` +
394
+ `en el ámbito ${aspects[Math.floor(Math.random() * aspects.length)]}. ${planets[Math.floor(Math.random() * planets.length)]} ` +
395
+ `en ${["conjunción", "oposición", "cuadratura", "trígono"][Math.floor(Math.random() * 4)]} con ${planets[Math.floor(Math.random() * planets.length)]} ` +
396
+ `sugiere ${["un giro inesperado", "una revelación importante", "un encuentro significativo", "una decisión crucial"][Math.floor(Math.random() * 4)]}.`,
397
+
398
+ `Como ${sign}, este mes el universo te invita a ${["reflexionar profundamente", "expresar tu creatividad", "abrir tu corazón", "tomar el control"][Math.floor(Math.random() * 4)]}. ` +
399
+ `La presencia de ${planets[Math.floor(Math.random() * planets.length)]} en ${["tu casa astral", "tu signo solar", "tu ascendente"][Math.floor(Math.random() * 3)]} ` +
400
+ `indica ${["un período de crecimiento", "momentos de claridad", "desafíos superables", "bendiciones inesperadas"][Math.floor(Math.random() * 4)]} ` +
401
+ `especialmente en ${aspects[Math.floor(Math.random() * aspects.length)]}.`,
402
+
403
+ `La energía cósmica de este mes favorece a ${sign} en ${aspects[Math.floor(Math.random() * aspects.length)]}. ` +
404
+ `${planets[Math.floor(Math.random() * planets.length)]} ${["ilumina", "desafía", "transforma", "fortalece"][Math.floor(Math.random() * 4)]} ` +
405
+ `tu ${["camino espiritual", "vida amorosa", "carrera profesional", "salud emocional"][Math.floor(Math.random() * 4)]} ` +
406
+ `de maneras ${["inesperadas", "profundas", "reveladoras", "milagrosas"][Math.floor(Math.random() * 4)]}.`,
407
+
408
+ `Este período astrológico marca un momento ${["crucial", "transformador", "mágico", "desafiante"][Math.floor(Math.random() * 4)]} ` +
409
+ `para ${sign}. La influencia combinada de ${planets[Math.floor(Math.random() * planets.length)]} ` +
410
+ `y ${planets[Math.floor(Math.random() * planets.length)]} sugiere que ${["debes confiar en tu intuición", "es hora de tomar acción", "la paciencia será recompensada", "los cambios son inevitables"][Math.floor(Math.random() * 4)]} ` +
411
+ `en relación con ${aspects[Math.floor(Math.random() * aspects.length)]}.`
412
+ ];
413
+
414
+ // Combine multiple structures for richer prediction
415
+ let prediction = structures[Math.floor(Math.random() * structures.length)] + " ";
416
+ prediction += structures[Math.floor(Math.random() * structures.length)];
417
+
418
+ // Add final advice
419
+ const advice = [
420
+ "Confía en el proceso y mantén una actitud abierta.",
421
+ "Este es un momento para escuchar tu voz interior más que nunca.",
422
+ "Las respuestas que buscas llegarán cuando menos las esperes.",
423
+ "No temas pedir ayuda cuando lo necesites.",
424
+ "Recuerda que cada desafío es una oportunidad disfrazada.",
425
+ "La alquimia de tus experiencias pasadas te preparó para este momento.",
426
+ "Mantén el equilibrio entre dar y recibir.",
427
+ "Tu intuición será tu mejor guía durante este ciclo."
428
+ ];
429
+
430
+ prediction += " " + advice[Math.floor(Math.random() * advice.length)];
431
+
432
+ return prediction;
433
+ }
434
+
435
+ // Function to display horoscope
436
+ function displayHoroscope(month, year) {
437
+ const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
438
+ "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
439
+
440
+ document.getElementById('current-date').textContent = `${monthNames[month-1]} ${year}`;
441
+
442
+ // Generate horoscope cards
443
+ const container = document.getElementById('horoscope-container');
444
+ container.innerHTML = '';
445
+
446
+ zodiacSigns.forEach((sign) => {
447
+ const prediction = generateRandomPrediction(sign.name, month, year);
448
+ const loveCompatibility = generateLoveCompatibility();
449
+ const luckyNumbers = generateLuckyNumbers();
450
+
451
+ const card = document.createElement('div');
452
+ card.className = 'horoscope-card rounded-xl p-6';
453
+ card.innerHTML = `
454
+ <div class="flex items-center mb-4">
455
+ <i class="fas ${sign.icon} ${sign.color} text-3xl mr-3"></i>
456
+ <div>
457
+ <h3 class="zodiac-sign title-font text-xl font-bold">${sign.name}</h3>
458
+ <span class="text-xs text-gray-400">${sign.dates}</span>
459
+ </div>
460
+ </div>
461
+ <div class="prediction-text text-gray-300 text-sm mb-4">${prediction}</div>
462
+ <div class="mb-3">
463
+ <div class="text-gray-400 text-xs">Amor</div>
464
+ <div class="${loveCompatibility.color} font-medium text-sm">${loveCompatibility.text}</div>
465
+ <div class="text-gray-500 text-xs">${loveCompatibility.desc}</div>
466
+ </div>
467
+ <div class="flex justify-between items-center mt-4">
468
+ <div class="text-xs">
469
+ <div class="text-gray-400">Números de suerte</div>
470
+ <div class="text-purple-300 font-medium">${luckyNumbers}</div>
471
+ </div>
472
+ <button
473
+ class="copy-btn bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1 rounded-full flex items-center"
474
+ data-sign="${sign.name}"
475
+ onclick="copyHoroscopeText('${sign.name}', '${prediction.replace(/'/g, "\\'")}')"
476
+ >
477
+ <i class="fas fa-copy mr-1"></i> Copiar
478
+ </button>
479
+ </div>
480
+ `;
481
+ container.appendChild(card);
482
+ });
483
+
484
+ // Update last updated time
485
+ const now = new Date();
486
+ const lastUpdated = document.getElementById('last-updated');
487
+ lastUpdated.textContent = `Generado el ${now.toLocaleDateString('es-ES')} a las ${now.toLocaleTimeString('es-ES', {hour: '2-digit', minute:'2-digit'})}`;
488
+
489
+ // Hide loading and show content
490
+ document.getElementById('loading').classList.add('hidden');
491
+ container.classList.remove('hidden');
492
+ }
493
+
494
+ // Function to copy horoscope text
495
+ function copyHoroscopeText(sign, prediction) {
496
+ const textToCopy = `${sign}\n\n${prediction}`;
497
+ navigator.clipboard.writeText(textToCopy).then(() => {
498
+ // Show feedback
499
+ const buttons = document.querySelectorAll('.copy-btn');
500
+ buttons.forEach(btn => {
501
+ if (btn.dataset.sign === sign) {
502
+ btn.innerHTML = '<i class="fas fa-check mr-1"></i> Copiado';
503
+ btn.classList.add('copied');
504
+
505
+ // Reset after 2 seconds
506
+ setTimeout(() => {
507
+ btn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copiar';
508
+ btn.classList.remove('copied');
509
+ }, 2000);
510
+ }
511
+ });
512
+ });
513
+ }
514
+
515
+ // Initialize everything when DOM is loaded
516
+ document.addEventListener('DOMContentLoaded', () => {
517
+ createStars();
518
+
519
+ // Set current month and year as default
520
+ const now = new Date();
521
+ document.getElementById('month-select').value = now.getMonth() + 1;
522
+ document.getElementById('year-select').value = now.getFullYear();
523
+
524
+ // Initial display with current month
525
+ displayHoroscope(now.getMonth() + 1, now.getFullYear());
526
+
527
+ // Generate button event
528
+ document.getElementById('generate-btn').addEventListener('click', () => {
529
+ const month = parseInt(document.getElementById('month-select').value);
530
+ const year = parseInt(document.getElementById('year-select').value);
531
+
532
+ // Show loading
533
+ document.getElementById('loading').classList.remove('hidden');
534
+ document.getElementById('horoscope-container').classList.add('hidden');
535
+
536
+ // Small delay for better UX
537
+ setTimeout(() => {
538
+ displayHoroscope(month, year);
539
+ }, 300);
540
+ });
541
+ });
542
+
543
+ // Make copyHoroscopeText available globally
544
+ window.copyHoroscopeText = copyHoroscopeText;
545
+ }
546
+
547
+ // Start the horoscope functionality
548
+ setupHoroscope();
549
+ </script>
550
+ <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=hellodigitalAI/hrscp-gen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
551
+ </html>