Hugging Face's logo

Spaces:
Lukeetah
/
C0G0TUDA
Running

App Files Community
Lukeetah commited on
Commit
15c2468
·
verified ·
1 Parent(s): a59fcf1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +237 -19
index.html CHANGED
@@ -1,19 +1,237 @@
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>La Cogotuda - Arte para Armar</title>
7
+ <meta name="description" content="Bastidores modulares de calidad profesional, impresos en 3D. Olvidate de la engrapadora y los fletes. Recibilo en una caja, armalo en 5 minutos.">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
12
+ <style>
13
+ :root { --c-orange: #D95F43; --c-blue: #2C4A6E; }
14
+ html { scroll-behavior: smooth; }
15
+ body { font-family: 'Inter', sans-serif; background-color: #FDFBF8; color: #1a202c; }
16
+ .logo-font { font-weight: 900; letter-spacing: -0.05em; }
17
+ .hero-bg { background-color: #f0eada; }
18
+ .btn-primary { background-color: var(--c-orange); color: white; transition: background-color 0.3s ease; }
19
+ .btn-primary:hover { background-color: #b94e36; }
20
+ .btn-primary:disabled { background-color: #f3a996; cursor: not-allowed; }
21
+ .btn-secondary { background-color: var(--c-blue); color: white; transition: background-color 0.3s ease; }
22
+ .btn-secondary:hover { background-color: #1f3550; }
23
+ .section-title { font-weight: 900; font-size: 2.5rem; text-align: center; margin-bottom: 3rem; letter-spacing: -0.025em; }
24
+ #cart-modal { transition: opacity 0.3s ease-in-out; }
25
+ .config-btn { transition: all 0.2s ease-in-out; border: 2px solid #e2e8f0; }
26
+ .config-btn.selected { border-color: var(--c-blue); background-color: #eef2f9; box-shadow: 0 0 0 2px var(--c-blue); }
27
+ .feature-icon { background-color: #eef2f9; color: var(--c-blue); }
28
+ #canvas-preview-container { perspective: 1000px; }
29
+ #canvas-preview { box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1); transform: rotateX(10deg) rotateY(-15deg); border: 10px solid #fff; border-bottom-width: 20px; border-right-width: 20px; background-color: #f0eada; }
30
+ </style>
31
+ </head>
32
+ <body>
33
+
34
+ <!-- Header -->
35
+ <header class="bg-white/80 backdrop-blur-lg sticky top-0 z-40 border-b border-gray-200">
36
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
37
+ <a href="#" class="flex items-center space-x-3">
38
+ <img src="https://huggingface.co/spaces/Lukeetah/COGOTUDA/resolve/main/cogotuda.png" alt="Logo La Cogotuda" class="h-10 w-10">
39
+ <span class="text-2xl logo-font text-gray-800">LA COGOTUDA</span>
40
+ </a>
41
+ <nav class="hidden md:flex space-x-8">
42
+ <a href="#como-funciona" class="text-gray-600 hover:text-gray-900 font-semibold">El Sistema</a>
43
+ <a href="#configurador" class="text-gray-600 hover:text-gray-900 font-semibold">Crear Bastidor</a>
44
+ <a href="#manifiesto" class="text-gray-600 hover:text-gray-900 font-semibold">Manifiesto</a>
45
+ </nav>
46
+ <div class="flex items-center">
47
+ <button id="cart-button" class="relative">
48
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
49
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </header>
54
+
55
+ <main>
56
+ <!-- Hero Section -->
57
+ <section class="hero-bg py-20 md:py-32">
58
+ <div class="container mx-auto px-6 text-center">
59
+ <h1 class="text-4xl md:text-6xl font-black text-gray-800 mb-4 leading-tight">El Arte del Futuro, en Tus Manos.</h1>
60
+ <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8">Bastidores modulares de calidad profesional, impresos en 3D. Olvidate de la engrapadora y los fletes. Recibilo en una caja, armalo en 5 minutos.</p>
61
+ <a href="#configurador" class="btn-primary font-bold py-3 px-8 rounded-lg text-lg inline-block">Crear mi Bastidor ahora</a>
62
+ </div>
63
+ </section>
64
+
65
+ <!-- Cómo Funciona Section (Rediseñada) -->
66
+ <section id="como-funciona" class="py-20 bg-white">
67
+ <div class="container mx-auto px-6">
68
+ <h2 class="section-title text-gray-800">El Sistema Cogotuda</h2>
69
+ <p class="text-center text-lg text-gray-600 max-w-3xl mx-auto -mt-8 mb-16">Reinventamos el bastidor para que sea más fuerte, más fácil de usar y más inteligente. Así funciona:</p>
70
+ <div class="grid md:grid-cols-3 gap-12 text-center">
71
+ <div class="flex flex-col items-center">
72
+ <img src="https://placehold.co/600x400/f0eada/2C4A6E?text=1.+Ensamble" alt="Sistema Click-Lock" class="rounded-lg shadow-lg mb-6 w-full">
73
+ <div class="p-4 rounded-full feature-icon mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
74
+ <h3 class="text-xl font-bold mb-2">Ensamble "Click-Lock"</h3>
75
+ <p class="text-gray-600">Nuestros esquineros de alta precisión se unen con un "click" satisfactorio. Una traba de seguridad final garantiza una estructura sólida como una roca, sin tornillos ni pegamento.</p>
76
+ </div>
77
+ <div class="flex flex-col items-center">
78
+ <img src="https://placehold.co/600x400/dbeafe/2C4A6E?text=2.+Tensado" alt="Sistema de Tensado" class="rounded-lg shadow-lg mb-6 w-full">
79
+ <div class="p-4 rounded-full feature-icon mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 5-3 3-3-3"/><path d="m15 19-3-3-3 3"/><path d="m5 15 3-3-3-3"/><path d="m19 15-3-3 3-3"/></svg></div>
80
+ <h3 class="text-xl font-bold mb-2">Tensado "Ranura & Spline"</h3>
81
+ <p class="text-gray-600">La revolución del tensado. Olvidate de la grapadora. Simplemente insertá la tela en la ranura y asegurala con la tira flexible (spline). Un tensado perfecto y uniforme, siempre.</p>
82
+ </div>
83
+ <div class="flex flex-col items-center">
84
+ <img src="https://placehold.co/600x400/fee2e2/2C4A6E?text=3.+Diseño+Modular" alt="Diseño Modular" class="rounded-lg shadow-lg mb-6 w-full">
85
+ <div class="p-4 rounded-full feature-icon mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v2"/><path d="m7 19 5 3 5-3"/><path d="M7 12v5l5 3 5-3v-5"/></svg></div>
86
+ <h3 class="text-xl font-bold mb-2">Modularidad Inteligente</h3>
87
+ <p class="text-gray-600">Recibís todo en una caja compacta. El diseño con refuerzos internos usa menos plástico pero es más fuerte que la madera. Liviano para mover, robusto para crear.</p>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Configurador Section -->
94
+ <section id="configurador" class="py-20 bg-gray-50">
95
+ <div class="container mx-auto px-6">
96
+ <h2 class="section-title text-gray-800">Crea tu Bastidor Perfecto</h2>
97
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
98
+ <div class="relative min-h-[300px] md:min-h-[500px]">
99
+ <div id="canvas-preview-container" class="w-full h-full flex items-center justify-center transition-all duration-300 ease-in-out">
100
+ <div id="canvas-preview" class="bg-cover bg-center transition-all duration-300 ease-in-out rounded-sm" style="width: 80%; aspect-ratio: 4/3;"></div>
101
+ </div>
102
+ <label for="artwork-upload" class="absolute bottom-4 right-4 btn-secondary py-2 px-4 rounded-lg text-sm font-semibold cursor-pointer shadow-lg">Visualizar mi obra</label>
103
+ <input type="file" id="artwork-upload" class="hidden" accept="image/*">
104
+ </div>
105
+
106
+ <div class="bg-white p-8 rounded-lg shadow-md border border-gray-200">
107
+ <div class="mb-6">
108
+ <h3 class="text-xl font-bold mb-3">1. Elige el Tamaño</h3>
109
+ <div class="grid grid-cols-3 gap-3 mb-3">
110
+ <button class="size-btn config-btn p-3 rounded-lg font-semibold" data-w="30" data-h="40">30x40 cm</button>
111
+ <button class="size-btn config-btn p-3 rounded-lg font-semibold" data-w="50" data-h="70">50x70 cm</button>
112
+ <button class="size-btn config-btn p-3 rounded-lg font-semibold" data-w="80" data-h="100">80x100 cm</button>
113
+ </div>
114
+ <div class="flex items-center gap-3">
115
+ <input type="number" id="custom-width" placeholder="Ancho (cm)" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-400 focus:border-transparent">
116
+ <span class="text-gray-400">x</span>
117
+ <input type="number" id="custom-height" placeholder="Alto (cm)" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-400 focus:border-transparent">
118
+ </div>
119
+ <p id="custom-error" class="text-red-500 text-sm mt-2 hidden">Medidas entre 20 y 150 cm.</p>
120
+ </div>
121
+
122
+ <div class="mb-8">
123
+ <h3 class="text-xl font-bold mb-3">2. Elige el Tipo de Lienzo</h3>
124
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
125
+ <button class="canvas-type-btn config-btn p-4 rounded-lg text-left" data-type="Algodón" data-multiplier="1.0">
126
+ <h4 class="font-bold">Algodón Universal</h4>
127
+ <p class="text-sm text-gray-500">Ideal para acrílico y óleo.</p>
128
+ </button>
129
+ <button class="canvas-type-btn config-btn p-4 rounded-lg text-left" data-type="Lino Premium" data-multiplier="1.5">
130
+ <h4 class="font-bold">Lino Premium</h4>
131
+ <p class="text-sm text-gray-500">Calidad profesional (+50%)</p>
132
+ </button>
133
+ </div>
134
+ </div>
135
+
136
+ <div>
137
+ <div class="bg-gray-100 p-6 rounded-lg border border-gray-200">
138
+ <div class="flex justify-between items-center mb-4">
139
+ <div>
140
+ <span class="text-lg font-semibold text-gray-800">Tu Kit Personalizado</span>
141
+ <p id="final-details" class="text-sm text-gray-500">Selecciona tus opciones</p>
142
+ </div>
143
+ <div class="text-right">
144
+ <p class="text-4xl font-black text-gray-800" id="final-price">$0</p>
145
+ </div>
146
+ </div>
147
+ <button id="add-to-cart-btn" class="w-full btn-primary font-bold py-3 rounded-lg text-lg" disabled>Agregar al Carrito</button>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Manifiesto Section -->
156
+ <section id="manifiesto" class="py-20">
157
+ <div class="container mx-auto px-6 max-w-4xl text-center">
158
+ <img src="https://huggingface.co/spaces/Lukeetah/COGOTUDA/resolve/main/cogotuda.jpg" alt="Logo La Cogotuda" class="h-20 w-20 mx-auto mb-6 object-cover rounded-lg shadow-md">
159
+ <h2 class="text-3xl md:text-4xl font-black text-gray-800 mb-6">Somos La Cogotuda.</h2>
160
+ <p class="text-lg text-gray-600 mb-4">Creemos en un futuro donde la automatización nos regala tiempo. Tiempo para crear, para expresarnos, para ser más humanos. No vemos un futuro de trabajos perdidos, sino de pasiones encontradas.</p>
161
+ <p class="text-lg text-gray-600">Nuestra misión es derribar las barreras. Hacemos que el arte sea accesible, no barato. Inteligente, no complicado. Te damos las herramientas para que construyas tu visión, con la cabeza en alto. Con orgullo. Con tu arte.</p>
162
+ </div>
163
+ </section>
164
+ </main>
165
+
166
+ <!-- Footer -->
167
+ <footer class="bg-gray-800 text-white py-10">
168
+ <div class="container mx-auto px-6 text-center">
169
+ <p>© 2025 La Cogotuda. Todos los derechos reservados.</p>
170
+ <p class="text-gray-400 mt-2">Hecho con ❤️, filamento y código en Argentina.</p>
171
+ </div>
172
+ </footer>
173
+
174
+ <!-- Cart Modal -->
175
+ <div id="cart-modal" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50 p-4">
176
+ <div id="cart-container" class="w-full max-w-lg bg-white h-auto rounded-lg shadow-xl overflow-hidden transform scale-95 opacity-0 transition-transform transition-opacity duration-300">
177
+ <div id="cart-view">
178
+ <div class="flex justify-between items-center p-6 border-b">
179
+ <h2 class="text-2xl font-bold">Tu Carrito</h2>
180
+ <button id="close-cart-btn" class="text-gray-500 hover:text-gray-800">
181
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
182
+ </button>
183
+ </div>
184
+ <div id="cart-items" class="p-6 overflow-y-auto max-h-[50vh]">
185
+ <p class="text-gray-500 text-center">Tu carrito está vacío.</p>
186
+ </div>
187
+ <div class="p-6 border-t bg-gray-50">
188
+ <div class="flex justify-between items-center mb-4">
189
+ <span class="text-lg font-semibold">Subtotal</span>
190
+ <span id="cart-subtotal" class="text-xl font-bold">$0</span>
191
+ </div>
192
+ <form id="customer-form">
193
+ <div class="mb-3">
194
+ <label for="customer-name" class="block text-sm font-medium text-gray-700">Nombre y Apellido</label>
195
+ <input type="text" id="customer-name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
196
+ </div>
197
+ <div class="mb-4">
198
+ <label for="customer-email" class="block text-sm font-medium text-gray-700">Email de Contacto</label>
199
+ <input type="email" id="customer-email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
200
+ </div>
201
+ <button id="checkout-button" type="submit" class="w-full btn-primary font-bold py-3 rounded-lg text-lg disabled:opacity-50 disabled:cursor-not-allowed">Finalizar y Obtener Datos de Pago</button>
202
+ <p id="checkout-status" class="text-center text-sm mt-2 h-4"></p>
203
+ </form>
204
+ </div>
205
+ </div>
206
+
207
+ <div id="payment-view" class="hidden p-8 text-center">
208
+ <h2 class="text-2xl font-bold text-green-600">¡Último Paso!</h2>
209
+ <p class="mt-2 text-gray-600">Tu pedido <strong id="payment-order-id" class="text-gray-900"></strong> ha sido generado. Para confirmarlo, realizá la transferencia.</p>
210
+ <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
211
+ <p class="text-sm text-gray-500">Transferí el monto exacto de:</p>
212
+ <p class="text-4xl font-black text-blue-900 my-2" id="payment-amount">$0</p>
213
+ <p class="text-sm text-gray-500">a la siguiente cuenta:</p>
214
+ <p class="mt-2 font-semibold">Alias: <span id="payment-alias" class="font-mono bg-blue-100 p-1 rounded"></span></p>
215
+ <p class="mt-1 font-semibold">CBU: <span id="payment-cbu" class="font-mono bg-blue-100 p-1 rounded"></span></p>
216
+ </div>
217
+ <div class="mt-6 p-4 bg-orange-50 border border-orange-200 rounded-lg">
218
+ <p class="text-lg font-bold text-orange-700">¡MUY IMPORTANTE!</p>
219
+ <p class="mt-1 text-gray-600">En el <strong>concepto de la transferencia</strong>, poné únicamente este código:</p>
220
+ <p id="payment-concept" class="text-2xl font-black text-orange-800 font-mono mt-2 bg-orange-100 p-2 rounded"></p>
221
+ </div>
222
+ <p class="mt-6 text-sm text-gray-500">Una vez que recibamos el pago, te enviaremos un email de confirmación y pondremos tu pedido en producción. ¡Gracias!</p>
223
+ <button id="payment-done-btn" class="mt-6 w-full btn-secondary font-bold py-3 rounded-lg text-lg">Entendido, ¡listo!</button>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Firebase SDKs -->
229
+ <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js"></script>
230
+ <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore-compat.js"></script>
231
+ <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-functions-compat.js"></script>
232
+
233
+ <!-- App Logic -->
234
+ <script id="app-script"></script>
235
+
236
+ </body>
237
+ </html>