Hugging Face's logo

Spaces:
ancerlop
/
to-do-real
Running

App Files Community
ancerlop commited on
Commit
d10ba2a
·
verified ·
1 Parent(s): eb12c5a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +390 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: To Do Real
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: purple
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: to-do-real
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,390 @@
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>WallList - Comparte tus aventuras</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=Poppins:wght@300;400;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f9fa;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+
21
+ .card-hover:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
24
+ }
25
+
26
+ .list-item-animate {
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .list-item-animate:hover {
31
+ background-color: #f1f5f9;
32
+ transform: scale(1.02);
33
+ }
34
+
35
+ .video-container {
36
+ position: relative;
37
+ padding-bottom: 56.25%;
38
+ height: 0;
39
+ overflow: hidden;
40
+ }
41
+
42
+ .video-container iframe {
43
+ position: absolute;
44
+ top: 0;
45
+ left: 0;
46
+ width: 100%;
47
+ height: 100%;
48
+ }
49
+
50
+ .map-container {
51
+ height: 300px;
52
+ width: 100%;
53
+ border-radius: 0.5rem;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body>
58
+ <!-- Navbar -->
59
+ <nav class="gradient-bg text-white shadow-lg">
60
+ <div class="container mx-auto px-4 py-3">
61
+ <div class="flex justify-between items-center">
62
+ <div class="flex items-center space-x-2">
63
+ <i class="fas fa-map-marked-alt text-2xl"></i>
64
+ <span class="text-xl font-bold">WallList</span>
65
+ </div>
66
+ <div class="hidden md:flex space-x-6">
67
+ <a href="#" class="hover:text-gray-200">Explorar</a>
68
+ <a href="#" class="hover:text-gray-200">Crear</a>
69
+ <a href="#" class="hover:text-gray-200">Itinerarios</a>
70
+ <a href="#" class="hover:text-gray-200">Perfil</a>
71
+ </div>
72
+ <div class="flex items-center space-x-4">
73
+ <button class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
74
+ Iniciar sesión
75
+ </button>
76
+ <button class="md:hidden">
77
+ <i class="fas fa-bars text-xl"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </nav>
83
+
84
+ <!-- Hero Section -->
85
+ <section class="gradient-bg text-white py-16">
86
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
87
+ <div class="md:w-1/2 mb-8 md:mb-0">
88
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Comparte tus aventuras</h1>
89
+ <p class="text-xl mb-6">Crea listas de lugares por visitar, compártelas como reels y genera itinerarios inteligentes con un solo clic.</p>
90
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
91
+ <button class="bg-white text-indigo-700 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition">
92
+ Empezar ahora
93
+ </button>
94
+ <button class="border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-indigo-700 transition">
95
+ Ver demo
96
+ </button>
97
+ </div>
98
+ </div>
99
+ <div class="md:w-1/2 relative">
100
+ <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
101
+ <div class="video-container">
102
+ <!-- Placeholder for video -->
103
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center">
104
+ <i class="fas fa-play-circle text-6xl text-indigo-500 opacity-70"></i>
105
+ </div>
106
+ </div>
107
+ <div class="p-4">
108
+ <div class="flex items-center mb-2">
109
+ <div class="w-8 h-8 rounded-full bg-indigo-200 mr-2"></div>
110
+ <span class="text-gray-800 font-medium">viajero_indie</span>
111
+ </div>
112
+ <p class="text-gray-700">Mi ruta por los cafés especiales de Barcelona ☕ #gastronomia #barcelona</p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <!-- How it Works -->
120
+ <section class="py-16 bg-white">
121
+ <div class="container mx-auto px-4">
122
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">¿Cómo funciona WallList?</h2>
123
+ <div class="grid md:grid-cols-3 gap-8">
124
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition">
125
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-4">
126
+ 1
127
+ </div>
128
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Crea tu lista</h3>
129
+ <p class="text-gray-600">Añade lugares que quieras visitar, desde restaurantes hasta monumentos históricos.</p>
130
+ </div>
131
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition">
132
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-4">
133
+ 2
134
+ </div>
135
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Comparte como reel</h3>
136
+ <p class="text-gray-600">Convierte tu lista en un video atractivo para compartir con la comunidad.</p>
137
+ </div>
138
+ <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition">
139
+ <div class="w-14 h-14 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-4">
140
+ 3
141
+ </div>
142
+ <h3 class="text-xl font-bold mb-3 text-gray-800">Genera itinerario</h3>
143
+ <p class="text-gray-600">Nuestro sistema crea la ruta óptima entre tus lugares seleccionados.</p>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </section>
148
+
149
+ <!-- Example List -->
150
+ <section class="py-16 bg-gray-50">
151
+ <div class="container mx-auto px-4">
152
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Explora listas populares</h2>
153
+ <div class="grid lg:grid-cols-2 gap-8 items-center">
154
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
155
+ <div class="p-6">
156
+ <div class="flex items-center mb-4">
157
+ <div class="w-10 h-10 rounded-full bg-yellow-200 mr-3"></div>
158
+ <div>
159
+ <h3 class="font-bold text-gray-800">foodie_explorer</h3>
160
+ <p class="text-sm text-gray-500">12 lugares · Barcelona</p>
161
+ </div>
162
+ </div>
163
+ <h4 class="text-xl font-bold mb-4 text-indigo-700">Mejores tapas de Barcelona 🍤</h4>
164
+
165
+ <div class="space-y-3 mb-6">
166
+ <div class="list-item-animate p-3 border border-gray-200 rounded-lg flex items-start">
167
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3 mt-1">
168
+ <i class="fas fa-utensils text-sm"></i>
169
+ </div>
170
+ <div>
171
+ <h5 class="font-medium text-gray-800">Quimet & Quimet</h5>
172
+ <p class="text-sm text-gray-600">Famoso por sus montaditos y conservas</p>
173
+ </div>
174
+ </div>
175
+ <div class="list-item-animate p-3 border border-gray-200 rounded-lg flex items-start">
176
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3 mt-1">
177
+ <i class="fas fa-wine-glass-alt text-sm"></i>
178
+ </div>
179
+ <div>
180
+ <h5 class="font-medium text-gray-800">El Xampanyet</h5>
181
+ <p class="text-sm text-gray-600">Ambiente auténtico y cava excelente</p>
182
+ </div>
183
+ </div>
184
+ <div class="list-item-animate p-3 border border-gray-200 rounded-lg flex items-start">
185
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3 mt-1">
186
+ <i class="fas fa-fish text-sm"></i>
187
+ </div>
188
+ <div>
189
+ <h5 class="font-medium text-gray-800">La Cova Fumada</h5>
190
+ <p class="text-sm text-gray-600">Donde se inventó la bomba barcelonesa</p>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-lg font-medium hover:bg-indigo-700 transition">
196
+ Ver lista completa
197
+ </button>
198
+ </div>
199
+ </div>
200
+
201
+ <div>
202
+ <div class="map-container bg-gray-200 mb-4 flex items-center justify-center">
203
+ <i class="fas fa-map-marked-alt text-4xl text-gray-400"></i>
204
+ </div>
205
+ <div class="flex justify-between items-center">
206
+ <div>
207
+ <h4 class="font-bold text-gray-800">Itinerario generado</h4>
208
+ <p class="text-gray-600">Ruta optimizada para 1 día</p>
209
+ </div>
210
+ <button class="flex items-center text-indigo-600 font-medium">
211
+ <i class="fas fa-directions mr-2"></i>
212
+ <span>Abrir en Maps</span>
213
+ </button>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </section>
219
+
220
+ <!-- Reels Section -->
221
+ <section class="py-16 bg-white">
222
+ <div class="container mx-auto px-4">
223
+ <div class="flex justify-between items-center mb-8">
224
+ <h2 class="text-3xl font-bold text-gray-800">Reels de la comunidad</h2>
225
+ <a href="#" class="text-indigo-600 font-medium hover:underline">Ver todos</a>
226
+ </div>
227
+
228
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
229
+ <!-- Reel 1 -->
230
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover transition">
231
+ <div class="relative pb-[125%] bg-gradient-to-br from-blue-100 to-purple-100">
232
+ <div class="absolute inset-0 flex items-center justify-center">
233
+ <i class="fas fa-play-circle text-5xl text-indigo-500 opacity-70"></i>
234
+ </div>
235
+ </div>
236
+ <div class="p-4">
237
+ <div class="flex items-center mb-2">
238
+ <div class="w-8 h-8 rounded-full bg-yellow-200 mr-2"></div>
239
+ <span class="font-medium text-gray-800">travel_addict</span>
240
+ </div>
241
+ <p class="text-gray-700 mb-3">Mi guía de librerías con encanto en Madrid 📚 #cultura #madrid</p>
242
+ <div class="flex justify-between text-sm text-gray-500">
243
+ <span><i class="fas fa-heart mr-1"></i> 124</span>
244
+ <span><i class="fas fa-comment mr-1"></i> 23</span>
245
+ <span><i class="fas fa-bookmark mr-1"></i> Guardar</span>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Reel 2 -->
251
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover transition">
252
+ <div class="relative pb-[125%] bg-gradient-to-br from-green-100 to-blue-100">
253
+ <div class="absolute inset-0 flex items-center justify-center">
254
+ <i class="fas fa-play-circle text-5xl text-indigo-500 opacity-70"></i>
255
+ </div>
256
+ </div>
257
+ <div class="p-4">
258
+ <div class="flex items-center mb-2">
259
+ <div class="w-8 h-8 rounded-full bg-pink-200 mr-2"></div>
260
+ <span class="font-medium text-gray-800">wanderlust_annie</span>
261
+ </div>
262
+ <p class="text-gray-700 mb-3">Ruta de arte urbano en Valencia 🎨 #streetart #valencia</p>
263
+ <div class="flex justify-between text-sm text-gray-500">
264
+ <span><i class="fas fa-heart mr-1"></i> 89</span>
265
+ <span><i class="fas fa-comment mr-1"></i> 15</span>
266
+ <span><i class="fas fa-bookmark mr-1"></i> Guardar</span>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Reel 3 -->
272
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover transition">
273
+ <div class="relative pb-[125%] bg-gradient-to-br from-yellow-100 to-orange-100">
274
+ <div class="absolute inset-0 flex items-center justify-center">
275
+ <i class="fas fa-play-circle text-5xl text-indigo-500 opacity-70"></i>
276
+ </div>
277
+ </div>
278
+ <div class="p-4">
279
+ <div class="flex items-center mb-2">
280
+ <div class="w-8 h-8 rounded-full bg-blue-200 mr-2"></div>
281
+ <span class="font-medium text-gray-800">gastro_nomad</span>
282
+ </div>
283
+ <p class="text-gray-700 mb-3">Los 10 imprescindibles de la gastronomía sevillana 🍊 #tapas #sevilla</p>
284
+ <div class="flex justify-between text-sm text-gray-500">
285
+ <span><i class="fas fa-heart mr-1"></i> 215</span>
286
+ <span><i class="fas fa-comment mr-1"></i> 42</span>
287
+ <span><i class="fas fa-bookmark mr-1"></i> Guardar</span>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </section>
294
+
295
+ <!-- CTA Section -->
296
+ <section class="gradient-bg text-white py-16">
297
+ <div class="container mx-auto px-4 text-center">
298
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">¿Listo para compartir tus aventuras?</h2>
299
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Únete a nuestra comunidad de viajeros y foodies que exploran el mundo con WallList.</p>
300
+ <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
301
+ <button class="bg-white text-indigo-700 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition">
302
+ Registrarse
303
+ </button>
304
+ <button class="border-2 border-white px-8 py-3 rounded-full font-bold hover:bg-white hover:text-indigo-700 transition">
305
+ Más información
306
+ </button>
307
+ </div>
308
+ </div>
309
+ </section>
310
+
311
+ <!-- Footer -->
312
+ <footer class="bg-gray-800 text-white py-12">
313
+ <div class="container mx-auto px-4">
314
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
315
+ <div>
316
+ <div class="flex items-center space-x-2 mb-4">
317
+ <i class="fas fa-map-marked-alt text-2xl"></i>
318
+ <span class="text-xl font-bold">WallList</span>
319
+ </div>
320
+ <p class="text-gray-400">Comparte tus listas de lugares favoritos y descubre nuevos rincones del mundo.</p>
321
+ </div>
322
+ <div>
323
+ <h4 class="font-bold text-lg mb-4">Explorar</h4>
324
+ <ul class="space-y-2 text-gray-400">
325
+ <li><a href="#" class="hover:text-white">Listas populares</a></li>
326
+ <li><a href="#" class="hover:text-white">Reels</a></li>
327
+ <li><a href="#" class="hover:text-white">Ciudades</a></li>
328
+ <li><a href="#" class="hover:text-white">Categorías</a></li>
329
+ </ul>
330
+ </div>
331
+ <div>
332
+ <h4 class="font-bold text-lg mb-4">Compañía</h4>
333
+ <ul class="space-y-2 text-gray-400">
334
+ <li><a href="#" class="hover:text-white">Sobre nosotros</a></li>
335
+ <li><a href="#" class="hover:text-white">Blog</a></li>
336
+ <li><a href="#" class="hover:text-white">Trabajos</a></li>
337
+ <li><a href="#" class="hover:text-white">Contacto</a></li>
338
+ </ul>
339
+ </div>
340
+ <div>
341
+ <h4 class="font-bold text-lg mb-4">Síguenos</h4>
342
+ <div class="flex space-x-4">
343
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-indigo-600 transition">
344
+ <i class="fab fa-instagram"></i>
345
+ </a>
346
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition">
347
+ <i class="fab fa-twitter"></i>
348
+ </a>
349
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition">
350
+ <i class="fab fa-youtube"></i>
351
+ </a>
352
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-800 transition">
353
+ <i class="fab fa-facebook-f"></i>
354
+ </a>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
359
+ <p>© 2023 WallList. Un proyecto de indie devs apasionados por los viajes.</p>
360
+ </div>
361
+ </div>
362
+ </footer>
363
+
364
+ <script>
365
+ // Simple animation for demo purposes
366
+ document.addEventListener('DOMContentLoaded', function() {
367
+ const items = document.querySelectorAll('.list-item-animate');
368
+
369
+ items.forEach((item, index) => {
370
+ // Add slight delay to each item
371
+ item.style.transitionDelay = `${index * 0.05}s`;
372
+ });
373
+
374
+ // Mock map functionality
375
+ const mapPlaceholder = document.querySelector('.map-container');
376
+ mapPlaceholder.addEventListener('click', function() {
377
+ alert('¡Aquí se integraría Google Maps con la ruta optimizada!');
378
+ });
379
+
380
+ // Mock video play functionality
381
+ const videoPlaceholders = document.querySelectorAll('.video-container, .relative.pb-\\[125\\%\\]');
382
+ videoPlaceholders.forEach(video => {
383
+ video.addEventListener('click', function() {
384
+ alert('¡Aquí se reproduciría el reel de la lista de lugares!');
385
+ });
386
+ });
387
+ });
388
+ </script>
389
+ <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=ancerlop/to-do-real" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
390
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ somos un de studio de videojuegos indie, estamos explorando nuevas alternativas, nos encanta viajar y visitar/conocer nuevos sitios probar nuevos sabores. habíamos pensando hacer una red social donde compartir listas de to-do, los lugares los veremos en Google Maps con sus indicaciones, hará itenerarios inteligentes, podria llamar WallList, que fuese un muro como el de Wallapop, o quizás se creen reels como en instagram o TikTok con la lista que hayas elegido