Hugging Face's logo

Spaces:
hry3094
/
papire
Running

App Files Community
papire
File size: 22,136 Bytes 
5513aad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7a4463b
5513aad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7a4463b
5513aad
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Peri贸dicos en Tr谩fico | Conexi贸n Vendedor-Conductor</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
        
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f8f8f8;
        }
        
        .title-font {
            font-family: 'Playfair Display', serif;
        }
        
        .newspaper-texture {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNjAwIj48ZmlsdGVyIGlkPSJwYXBlciIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDEiIG51bU9jdGF2ZXM9IjUiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjcGFwZXIpIiBvcGFjaXR5PSIwLjAzIi8+PC9zdmc+');
        }
        
        .road-lines {
            position: relative;
            overflow: hidden;
        }
        
        .road-lines::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            background: repeating-linear-gradient(
                to bottom,
                transparent,
                transparent 20px,
                #f97316 20px,
                #f97316 22px
            );
            opacity: 0.2;
            pointer-events: none;
        }
        
        .map-container {
            height: 400px;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .newspaper-icon {
            transform: rotate(-5deg);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .traffic-light {
            width: 30px;
            height: 60px;
            background-color: #333;
            border-radius: 5px;
            position: relative;
        }
        
        .traffic-light::after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ef4444;
            top: 10px;
            left: 10px;
            box-shadow: 0 0 10px #ef4444;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="bg-orange-600 text-white p-2 rounded-full">
                    <i class="fas fa-newspaper"></i>
                </div>
                <h1 class="title-font text-xl font-bold text-orange-800">Peri贸dicos en Tr谩fico</h1>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="#como-funciona" class="text-orange-700 hover:text-orange-900">C贸mo funciona</a>
                <a href="#mapa" class="text-orange-700 hover:text-orange-900">Mapa en vivo</a>
                <a href="#contacto" class="text-orange-700 hover:text-orange-900">Contacto</a>
            </div>
            <button class="md:hidden text-orange-700">
                <i class="fas fa-bars text-2xl"></i>
            </button>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="relative road-lines bg-gradient-to-r from-orange-50 to-amber-50 overflow-hidden">
        <div class="newspaper-texture absolute inset-0"></div>
        <div class="container mx-auto px-4 py-16 md:py-24 relative z-10">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <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>
                    <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>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <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">
                            <i class="fas fa-map-marker-alt mr-2"></i> Activar mi ubicaci贸n
                        </button>
                        <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">
                            <i class="fas fa-info-circle mr-2"></i> C贸mo funciona
                        </button>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative">
                        <div class="bg-white p-6 rounded-lg shadow-xl newspaper-icon">
                            <div class="text-center mb-4">
                                <h3 class="title-font text-xl font-bold text-orange-800">Peri贸dico del d铆a</h3>
                                <p class="text-gray-600">Escanea este c贸digo</p>
                            </div>
                            <div class="bg-white p-4 rounded border border-gray-200 flex justify-center">
                                <div class="w-48 h-48 bg-gray-200 flex items-center justify-center text-gray-500">
                                    <a href="https://ibb.co/yzYmDsd"><img src="https://i.ibb.co/yzYmDsd/qrchimp-X1024.png" alt="qrchimp-X1024" border="0"></a>
                                </div>
                            </div>
                            <div class="mt-4 text-center text-sm text-gray-600">
                                <p>El vendedor ver谩 tu ubicaci贸n en tiempo real</p>
                            </div>
                        </div>
                        <div class="absolute -bottom-6 -right-6">
                            <div class="traffic-light"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="como-funciona" class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">C贸mo funciona nuestro servicio</h2>
                <div class="w-24 h-1 bg-orange-600 mx-auto"></div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-10">
                <div class="text-center px-6">
                    <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-qrcode text-orange-600 text-2xl"></i>
                    </div>
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-3">1. Escanea el c贸digo QR</h3>
                    <p class="text-gray-600">El vendedor ambulante te mostrar谩 un c贸digo QR 煤nico que debes escanear con tu tel茅fono.</p>
                </div>
                
                <div class="text-center px-6">
                    <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-map-marked-alt text-orange-600 text-2xl"></i>
                    </div>
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-3">2. Comparte tu ubicaci贸n</h3>
                    <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>
                </div>
                
                <div class="text-center px-6">
                    <div class="bg-orange-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-newspaper text-orange-600 text-2xl"></i>
                    </div>
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-3">3. Recibe tu peri贸dico</h3>
                    <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>
                </div>
            </div>
        </div>
    </section>

    <!-- Live Map Section -->
    <section id="mapa" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Mapa en vivo</h2>
                <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>
            </div>
            
            <div class="map-container bg-gray-200 relative">
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="text-center p-6 bg-white bg-opacity-90 rounded-lg shadow-lg max-w-md mx-4">
                        <i class="fas fa-map-marked-alt text-orange-600 text-4xl mb-4"></i>
                        <h3 class="title-font text-xl font-bold text-orange-800 mb-2">Mapa en tiempo real</h3>
                        <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>
                        <button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-lg shadow-md transition duration-300">
                            Permitir acceso a ubicaci贸n
                        </button>
                    </div>
                </div>
                <!-- <a href="https://ibb.co/yzYmDsd"><img src="https://i.ibb.co/yzYmDsd/qrchimp-X1024.png" alt="qrchimp-X1024" border="0"></a>
            </div>
            
            <div class="mt-8 grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-sm">
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-3 flex items-center">
                        <i class="fas fa-shield-alt text-orange-600 mr-3"></i> Seguridad y privacidad
                    </h3>
                    <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>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-sm">
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-3 flex items-center">
                        <i class="fas fa-clock text-orange-600 mr-3"></i> Tiempo real
                    </h3>
                    <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>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Preguntas frecuentes</h2>
                <div class="w-24 h-1 bg-orange-600 mx-auto"></div>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <div class="mb-6">
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center">
                        <i class="fas fa-question-circle text-orange-600 mr-3"></i> 驴Necesito instalar una aplicaci贸n?
                    </h3>
                    <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>
                </div>
                
                <div class="mb-6">
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center">
                        <i class="fas fa-battery-three-quarters text-orange-600 mr-3"></i> 驴Consume mucha bater铆a?
                    </h3>
                    <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>
                </div>
                
                <div class="mb-6">
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center">
                        <i class="fas fa-lock text-orange-600 mr-3"></i> 驴C贸mo protegen mi privacidad?
                    </h3>
                    <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>
                </div>
                
                <div class="mb-6">
                    <h3 class="title-font text-xl font-bold text-orange-800 mb-2 flex items-center">
                        <i class="fas fa-money-bill-wave text-orange-600 mr-3"></i> 驴Hay alg煤n costo por usar el servicio?
                    </h3>
                    <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>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contacto" class="py-16 bg-orange-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="title-font text-3xl md:text-4xl font-bold text-orange-900 mb-4">Contacta al vendedor</h2>
                <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>
            </div>
            
            <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 bg-orange-600 text-white p-8 flex flex-col justify-center">
                        <h3 class="title-font text-xl font-bold mb-4">Informaci贸n de contacto</h3>
                        <div class="mb-6">
                            <div class="flex items-center mb-3">
                                <i class="fas fa-user mr-3"></i>
                                <p>Vendedor de Peri贸dicos</p>
                            </div>
                            <div class="flex items-center mb-3">
                                <i class="fas fa-map-marker-alt mr-3"></i>
                                <p>Zona de tr谩fico ma帽anero, Gral. Escobedo</p>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-clock mr-3"></i>
                                <p>Lunes a Viernes: 6:00 AM - 10:00 AM</p>
                            </div>
                        </div>
                        <div class="flex space-x-4">
                            <a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition">
                                <i class="fab fa-whatsapp"></i>
                            </a>
                            <a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition">
                                <i class="fas fa-phone-alt"></i>
                            </a>
                            <a href="#" class="bg-white text-orange-600 w-10 h-10 rounded-full flex items-center justify-center hover:bg-orange-100 transition">
                                <i class="fas fa-envelope"></i>
                            </a>
                        </div>
                    </div>
                    <div class="md:w-1/2 p-8">
                        <form>
                            <div class="mb-4">
                                <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Nombre</label>
                                <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">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 text-sm font-bold mb-2" for="phone">Tel茅fono</label>
                                <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">
                            </div>
                            <div class="mb-4">
                                <label class="block text-gray-700 text-sm font-bold mb-2" for="message">Mensaje</label>
                                <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>
                            </div>
                            <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">
                                Enviar mensaje
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-orange-900 text-orange-100 py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0 flex items-center">
                    <div class="bg-white text-orange-600 p-2 rounded-full mr-3">
                        <i class="fas fa-newspaper"></i>
                    </div>
                    <h2 class="title-font text-xl font-bold">Peri贸dicos en Tr谩fico</h2>
                </div>
                <div class="flex space-x-6 mb-6 md:mb-0">
                    <a href="#" class="hover:text-white transition">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="hover:text-white transition">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="hover:text-white transition">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
                <div class="text-sm">
                    <p>&copy; 2025 Peri贸dicos en Tr谩fico. Todos los derechos reservados.</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Floating Action Button -->
    <div class="fixed bottom-6 right-6">
        <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">
            <i class="fas fa-qrcode text-2xl"></i>
        </button>
    </div>

    <script>
        // Simulaci贸n de solicitud de geolocalizaci贸n
        document.querySelectorAll('[onclick*="ubicacion"], [onclick*="Ubicacion"]').forEach(button => {
            button.addEventListener('click', function() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        function(position) {
                            alert('Ubicaci贸n compartida correctamente. El vendedor podr谩 ver tu posici贸n en el mapa.');
                            // Aqu铆 ir铆a el c贸digo para enviar la ubicaci贸n al servidor
                        },
                        function(error) {
                            alert('Para usar este servicio, necesitas permitir el acceso a tu ubicaci贸n. Por favor actualiza los permisos.');
                        }
                    );
                } else {
                    alert('Tu navegador no soporta geolocalizaci贸n. Actualiza a una versi贸n m谩s reciente.');
                }
            });
        });

        // Simulaci贸n de env铆o de formulario
        document.querySelector('form button').addEventListener('click', function() {
            const name = document.getElementById('name').value;
            if (name) {
                alert(`Gracias ${name}, tu mensaje ha sido enviado al vendedor. Te contactar谩 pronto.`);
                document.querySelector('form').reset();
            } else {
                alert('Por favor ingresa tu nombre para enviar el mensaje.');
            }
        });
    </script>
<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>
</html>