Hugging Face's logo

Spaces:
hry3094
/
papire
Running

App Files Community
hry3094 commited on
Commit
5513aad
路
verified 路
1 Parent(s): 2c41c30

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +388 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Papire
3
- emoji: 馃弮
4
- colorFrom: pink
5
  colorTo: pink
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: papire
3
+ emoji: 馃惓
4
+ colorFrom: red
5
  colorTo: pink
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,388 @@
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>Peri贸dicos en Tr谩fico | Conexi贸n Vendedor-Conductor</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=Roboto:wght@300;400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Roboto', sans-serif;
14
+ background-color: #f8f8f8;
15
+ }
16
+
17
+ .title-font {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .newspaper-texture {
22
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48ZmlsdGVyIGlkPSJwYXBlciIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDEiIG51bU9jdGF2ZXM9IjUiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjcGFwZXIpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');
23
+ }
24
+
25
+ .road-lines {
26
+ position: relative;
27
+ overflow: hidden;
28
+ }
29
+
30
+ .road-lines::after {
31
+ content: "";
32
+ position: absolute;
33
+ top: 0;
34
+ left: 0;
35
+ right: 0;
36
+ height: 100%;
37
+ background: repeating-linear-gradient(
38
+ to bottom,
39
+ transparent,
40
+ transparent 20px,
41
+ #f97316 20px,
42
+ #f97316 22px
43
+ );
44
+ opacity: 0.2;
45
+ pointer-events: none;
46
+ }
47
+
48
+ .map-container {
49
+ height: 400px;
50
+ border-radius: 0.5rem;
51
+ overflow: hidden;
52
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
53
+ }
54
+
55
+ .newspaper-icon {
56
+ transform: rotate(-5deg);
57
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
58
+ }
59
+
60
+ .traffic-light {
61
+ width: 30px;
62
+ height: 60px;
63
+ background-color: #333;
64
+ border-radius: 5px;
65
+ position: relative;
66
+ }
67
+
68
+ .traffic-light::after {
69
+ content: "";
70
+ position: absolute;
71
+ width: 10px;
72
+ height: 10px;
73
+ border-radius: 50%;
74
+ background-color: #ef4444;
75
+ top: 10px;
76
+ left: 10px;
77
+ box-shadow: 0 0 10px #ef4444;
78
+ }
79
+ </style>
80
+ </head>
81
+ <body class="bg-gray-50">
82
+ <!-- Header -->
83
+ <header class="bg-white shadow-sm">
84
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
85
+ <div class="flex items-center space-x-2">
86
+ <div class="bg-orange-600 text-white p-2 rounded-full">
87
+ <i class="fas fa-newspaper"></i>
88
+ </div>
89
+ <h1 class="title-font text-xl font-bold text-orange-800">Peri贸dicos en Tr谩fico</h1>
90
+ </div>
91
+ <div class="hidden md:flex space-x-6">
92
+ <a href="#como-funciona" class="text-orange-700 hover:text-orange-900">C贸mo funciona</a>
93
+ <a href="#mapa" class="text-orange-700 hover:text-orange-900">Mapa en vivo</a>
94
+ <a href="#contacto" class="text-orange-700 hover:text-orange-900">Contacto</a>
95
+ </div>
96
+ <button class="md:hidden text-orange-700">
97
+ <i class="fas fa-bars text-2xl"></i>
98
+ </button>
99
+ </div>
100
+ </header>
101
+
102
+ <!-- Hero Section -->
103
+ <section class="relative road-lines bg-gradient-to-r from-orange-50 to-amber-50 overflow-hidden">
104
+ <div class="newspaper-texture absolute inset-0"></div>
105
+ <div class="container mx-auto px-4 py-16 md:py-24 relative z-10">
106
+ <div class="flex flex-col md:flex-row items-center">
107
+ <div class="md:w-1/2 mb-10 md:mb-0">
108
+ <h2 class="title-font text-4xl md:text-5xl font-bold text-orange-900 mb-6">Conectando vendedores y conductores en el tr谩fico</h2>
109
+ <p class="text-lg text-gray-700 mb-8">Escanea el c贸digo QR para que el vendedor de peri贸dicos pueda ubicarte y acercarse a ofrecerte el peri贸dico del d铆a.</p>
110
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
111
+ <button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 flex items-center justify-center">
112
+ <i class="fas fa-map-marker-alt mr-2"></i> Activar mi ubicaci贸n
113
+ </button>
114
+ <button class="border-2 border-orange-600 text-orange-600 hover:bg-orange-50 font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
115
+ <i class="fas fa-info-circle mr-2"></i> C贸mo funciona
116
+ </button>
117
+ </div>
118
+ </div>
119
+ <div class="md:w-1/2 flex justify-center">
120
+ <div class="relative">
121
+ <div class="bg-white p-6 rounded-lg shadow-xl newspaper-icon">
122
+ <div class="text-center mb-4">
123
+ <h3 class="title-font text-xl font-bold text-orange-800">Peri贸dico del d铆a</h3>
124
+ <p class="text-gray-600">Escanea este c贸digo</p>
125
+ </div>
126
+ <div class="bg-white p-4 rounded border border-gray-200 flex justify-center">
127
+ <div class="w-48 h-48 bg-gray-200 flex items-center justify-center text-gray-500">
128
+ [C脫DIGO QR AQU脥]
129
+ </div>
130
+ </div>
131
+ <div class="mt-4 text-center text-sm text-gray-600">
132
+ <p>El vendedor ver谩 tu ubicaci贸n en tiempo real</p>
133
+ </div>
134
+ </div>
135
+ <div class="absolute -bottom-6 -right-6">
136
+ <div class="traffic-light"></div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- Features Section -->
145
+ <section id="como-funciona" class="py-16 bg-white">
146
+ <div class="container mx-auto px-4">
147
+ <div class="text-center mb-16">
148
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">C贸mo funciona nuestro servicio</h2>
149
+ <div class="w-24 h-1 bg-orange-600 mx-auto"></div>
150
+ </div>
151
+
152
+ <div class="grid md:grid-cols-3 gap-10">
153
+ <div class="text-center px-6">
154
+ <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
155
+ <i class="fas fa-qrcode text-orange-600 text-2xl"></i>
156
+ </div>
157
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-3">1. Escanea el c贸digo QR</h3>
158
+ <p class="text-gray-600">El vendedor ambulante te mostrar谩 un c贸digo QR 煤nico que debes escanear con tu tel茅fono.</p>
159
+ </div>
160
+
161
+ <div class="text-center px-6">
162
+ <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
163
+ <i class="fas fa-map-marked-alt text-orange-600 text-2xl"></i>
164
+ </div>
165
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-3">2. Comparte tu ubicaci贸n</h3>
166
+ <p class="text-gray-600">Permite que el navegador acceda a tu GPS para mostrar tu posici贸n exacta en el mapa del vendedor.</p>
167
+ </div>
168
+
169
+ <div class="text-center px-6">
170
+ <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
171
+ <i class="fas fa-newspaper text-orange-600 text-2xl"></i>
172
+ </div>
173
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-3">3. Recibe tu peri贸dico</h3>
174
+ <p class="text-gray-600">El vendedor se acercar谩 a tu ubicaci贸n en el tr谩fico para entregarte el peri贸dico que deseas.</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </section>
179
+
180
+ <!-- Live Map Section -->
181
+ <section id="mapa" class="py-16 bg-gray-50">
182
+ <div class="container mx-auto px-4">
183
+ <div class="text-center mb-12">
184
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Mapa en vivo</h2>
185
+ <p class="text-gray-600 max-w-2xl mx-auto">Tu ubicaci贸n aparecer谩 aqu铆 en tiempo real para que el vendedor pueda encontrarte f谩cilmente en el tr谩fico.</p>
186
+ </div>
187
+
188
+ <div class="map-container bg-gray-200 relative">
189
+ <div class="absolute inset-0 flex items-center justify-center">
190
+ <div class="text-center p-6 bg-white bg-opacity-90 rounded-lg shadow-lg max-w-md mx-4">
191
+ <i class="fas fa-map-marked-alt text-orange-600 text-4xl mb-4"></i>
192
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-2">Mapa en tiempo real</h3>
193
+ <p class="text-gray-600 mb-4">Al escanear el c贸digo QR y permitir el acceso a tu ubicaci贸n, aparecer谩s en este mapa.</p>
194
+ <button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-lg shadow-md transition duration-300">
195
+ Permitir acceso a ubicaci贸n
196
+ </button>
197
+ </div>
198
+ </div>
199
+ <!-- Aqu铆 ir铆a la integraci贸n con Google Maps -->
200
+ </div>
201
+
202
+ <div class="mt-8 grid md:grid-cols-2 gap-8">
203
+ <div class="bg-white p-6 rounded-lg shadow-sm">
204
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-3 flex items-center">
205
+ <i class="fas fa-shield-alt text-orange-600 mr-3"></i> Seguridad y privacidad
206
+ </h3>
207
+ <p class="text-gray-600">Tu ubicaci贸n solo es visible para el vendedor de peri贸dicos y solo mientras tengas esta p谩gina abierta. No almacenamos tus datos de ubicaci贸n.</p>
208
+ </div>
209
+ <div class="bg-white p-6 rounded-lg shadow-sm">
210
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-3 flex items-center">
211
+ <i class="fas fa-clock text-orange-600 mr-3"></i> Tiempo real
212
+ </h3>
213
+ <p class="text-gray-600">El vendedor ver谩 tu ubicaci贸n actualizada cada 10 segundos, permiti茅ndole planear su ruta a trav茅s del tr谩fico para llegar a ti.</p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- FAQ Section -->
220
+ <section class="py-16 bg-white">
221
+ <div class="container mx-auto px-4">
222
+ <div class="text-center mb-16">
223
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Preguntas frecuentes</h2>
224
+ <div class="w-24 h-1 bg-orange-600 mx-auto"></div>
225
+ </div>
226
+
227
+ <div class="max-w-3xl mx-auto">
228
+ <div class="mb-6">
229
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center">
230
+ <i class="fas fa-question-circle text-orange-600 mr-3"></i> 驴Necesito instalar una aplicaci贸n?
231
+ </h3>
232
+ <p class="text-gray-600 pl-10">No, nuestro servicio funciona directamente en tu navegador web. Solo necesitas escanear el c贸digo QR con la c谩mara de tu tel茅fono.</p>
233
+ </div>
234
+
235
+ <div class="mb-6">
236
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center">
237
+ <i class="fas fa-battery-three-quarters text-orange-600 mr-3"></i> 驴Consume mucha bater铆a?
238
+ </h3>
239
+ <p class="text-gray-600 pl-10">El consumo de bater铆a es m铆nimo, similar a usar Google Maps para navegaci贸n. Recomendamos tener suficiente carga si planeas usar el servicio por mucho tiempo.</p>
240
+ </div>
241
+
242
+ <div class="mb-6">
243
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center">
244
+ <i class="fas fa-lock text-orange-600 mr-3"></i> 驴C贸mo protegen mi privacidad?
245
+ </h3>
246
+ <p class="text-gray-600 pl-10">Tu ubicaci贸n solo es visible para el vendedor con quien interact煤as y solo mientras tengas la p谩gina abierta. No almacenamos ni compartimos tus datos de ubicaci贸n.</p>
247
+ </div>
248
+
249
+ <div class="mb-6">
250
+ <h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center">
251
+ <i class="fas fa-money-bill-wave text-orange-600 mr-3"></i> 驴Hay alg煤n costo por usar el servicio?
252
+ </h3>
253
+ <p class="text-gray-600 pl-10">No, el servicio es completamente gratuito para los conductores. Solo pagas por el peri贸dico que compres al vendedor.</p>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </section>
258
+
259
+ <!-- Contact Section -->
260
+ <section id="contacto" class="py-16 bg-orange-50">
261
+ <div class="container mx-auto px-4">
262
+ <div class="text-center mb-12">
263
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Contacta al vendedor</h2>
264
+ <p class="text-gray-700 max-w-2xl mx-auto">Env铆a un mensaje directo al vendedor de peri贸dicos para coordinar tu compra.</p>
265
+ </div>
266
+
267
+ <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
268
+ <div class="md:flex">
269
+ <div class="md:w-1/2 bg-orange-600 text-white p-8 flex flex-col justify-center">
270
+ <h3 class="title-font text-xl font-bold mb-4">Informaci贸n de contacto</h3>
271
+ <div class="mb-6">
272
+ <div class="flex items-center mb-3">
273
+ <i class="fas fa-user mr-3"></i>
274
+ <p>Vendedor de Peri贸dicos</p>
275
+ </div>
276
+ <div class="flex items-center mb-3">
277
+ <i class="fas fa-map-marker-alt mr-3"></i>
278
+ <p>Zona de tr谩fico ma帽anero, Gral. Escobedo</p>
279
+ </div>
280
+ <div class="flex items-center">
281
+ <i class="fas fa-clock mr-3"></i>
282
+ <p>Lunes a Viernes: 6:00 AM - 10:00 AM</p>
283
+ </div>
284
+ </div>
285
+ <div class="flex space-x-4">
286
+ <a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition">
287
+ <i class="fab fa-whatsapp"></i>
288
+ </a>
289
+ <a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition">
290
+ <i class="fas fa-phone-alt"></i>
291
+ </a>
292
+ <a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition">
293
+ <i class="fas fa-envelope"></i>
294
+ </a>
295
+ </div>
296
+ </div>
297
+ <div class="md:w-1/2 p-8">
298
+ <form>
299
+ <div class="mb-4">
300
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Nombre</label>
301
+ <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-600" id="name" type="text" placeholder="Tu nombre">
302
+ </div>
303
+ <div class="mb-4">
304
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">Tel茅fono</label>
305
+ <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-600" id="phone" type="tel" placeholder="N煤mero de contacto">
306
+ </div>
307
+ <div class="mb-4">
308
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="message">Mensaje</label>
309
+ <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-600" id="message" rows="3" placeholder="驴Qu茅 peri贸dico necesitas?"></textarea>
310
+ </div>
311
+ <button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-md transition duration-300" type="button">
312
+ Enviar mensaje
313
+ </button>
314
+ </form>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </section>
320
+
321
+ <!-- Footer -->
322
+ <footer class="bg-orange-900 text-orange-100 py-8">
323
+ <div class="container mx-auto px-4">
324
+ <div class="flex flex-col md:flex-row justify-between items-center">
325
+ <div class="mb-6 md:mb-0 flex items-center">
326
+ <div class="bg-white text-orange-600 p-2 rounded-full mr-3">
327
+ <i class="fas fa-newspaper"></i>
328
+ </div>
329
+ <h2 class="title-font text-xl font-bold">Peri贸dicos en Tr谩fico</h2>
330
+ </div>
331
+ <div class="flex space-x-6 mb-6 md:mb-0">
332
+ <a href="#" class="hover:text-white transition">
333
+ <i class="fab fa-facebook-f"></i>
334
+ </a>
335
+ <a href="#" class="hover:text-white transition">
336
+ <i class="fab fa-twitter"></i>
337
+ </a>
338
+ <a href="#" class="hover:text-white transition">
339
+ <i class="fab fa-instagram"></i>
340
+ </a>
341
+ </div>
342
+ <div class="text-sm">
343
+ <p>&copy; 2025 Peri贸dicos en Tr谩fico. Todos los derechos reservados.</p>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </footer>
348
+
349
+ <!-- Floating Action Button -->
350
+ <div class="fixed bottom-6 right-6">
351
+ <button class="bg-orange-600 hover:bg-orange-700 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition transform hover:scale-110">
352
+ <i class="fas fa-qrcode text-2xl"></i>
353
+ </button>
354
+ </div>
355
+
356
+ <script>
357
+ // Simulaci贸n de solicitud de geolocalizaci贸n
358
+ document.querySelectorAll('[onclick*="ubicacion"], [onclick*="Ubicacion"]').forEach(button => {
359
+ button.addEventListener('click', function() {
360
+ if (navigator.geolocation) {
361
+ navigator.geolocation.getCurrentPosition(
362
+ function(position) {
363
+ alert('Ubicaci贸n compartida correctamente. El vendedor podr谩 ver tu posici贸n en el mapa.');
364
+ // Aqu铆 ir铆a el c贸digo para enviar la ubicaci贸n al servidor
365
+ },
366
+ function(error) {
367
+ alert('Para usar este servicio, necesitas permitir el acceso a tu ubicaci贸n. Por favor actualiza los permisos.');
368
+ }
369
+ );
370
+ } else {
371
+ alert('Tu navegador no soporta geolocalizaci贸n. Actualiza a una versi贸n m谩s reciente.');
372
+ }
373
+ });
374
+ });
375
+
376
+ // Simulaci贸n de env铆o de formulario
377
+ document.querySelector('form button').addEventListener('click', function() {
378
+ const name = document.getElementById('name').value;
379
+ if (name) {
380
+ alert(`Gracias ${name}, tu mensaje ha sido enviado al vendedor. Te contactar谩 pronto.`);
381
+ document.querySelector('form').reset();
382
+ } else {
383
+ alert('Por favor ingresa tu nombre para enviar el mensaje.');
384
+ }
385
+ });
386
+ </script>
387
+ <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=hry3094/papire" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
388
+ </html>
prompts.txt ADDED
File without changes