https://quomoshop.es/login

1<!DOCTYPE html>
2<html lang="es">
3  <head>
4    <title>Quomo</title>
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <meta name="csrf-param" content="authenticity_token" />
7<meta name="csrf-token" content="O2ICqeZbAavp1LQxIl7ei0gWgDy6k8-YpxDxQvOiDXfZSF_SSZj28lc3VXZQJnXUdSV6gcSq7mgO0mDVKKXtdA" />
8    
9    <link rel="icon" type="image/x-icon" href="/assets/store/favicon-7a88cd9c1f0185df08632f792b9d1f65dc45d0a5e04848b476831102f6d713e0.png" />
10
11    

11<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" data-turbo-track="reload"></script>

11
12
13    <link rel="stylesheet" href="/assets/store/main-0211b753b861b43c79f05a9688b718b28e1974737dd12842f094db310d0e5b07.css" data-turbo-track="reload" />
14
15    

15<script src="/assets/popper-003a40d80fd205e1fa00da117d5bdc19720ba330706eaa17f9ba9513fa502304.js"></script>

15
16    

16<script src="/assets/bootstrap-2a080a893c8b97da883b10bd120e834c37db9d792863a3ca50b7bbcb17fe1e7d.js"></script>

16
17    

17<script type="importmap" data-turbo-track="reload">{
18  "imports": {
19    "application": "/assets/store/application-d95f3f275d25303e86b86a632eb22f8f85c64a9f9626ebec4f487d1f200ff1f7.js",
20    "@hotwired/turbo-rails": "/assets/turbo.min-4cfe7c6aaeb9120821760aa53763dff54fbc561e500da6482fc43c54c7384929.js",
21    "@hotwired/stimulus": "/assets/stimulus.min-d03cf1dff41d6c5698ec2c5d6a501615a7a33754dbeef8d1edd31c928d17c652.js",
22    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
23    "swiper": "https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.mjs",
24    "aos": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
25    "choices": "https://cdn.jsdelivr.net/npm/[email protected]/+esm",
26    "@stimulus-components/dialog": "https://cdn.jsdelivr.net/npm/@stimulus-components/[email protected]/dist/stimulus-dialog.mjs",
27    "@stimulus-components/password-visibility": "https://cdn.jsdelivr.net/npm/@stimulus-components/[email protected]/dist/stimulus-password-visibility.mjs",
28    "@stimulus-components/scroll-reveal": "https://cdn.jsdelivr.net/npm/[email protected]/dist/stimulus-scroll-reveal.mjs"
29  }
30}</script>

30
31<link rel="modulepreload" href="/assets/store/application-d95f3f275d25303e86b86a632eb22f8f85c64a9f9626ebec4f487d1f200ff1f7.js">
32<link rel="modulepreload" href="/assets/turbo.min-4cfe7c6aaeb9120821760aa53763dff54fbc561e500da6482fc43c54c7384929.js">
33<link rel="modulepreload" href="/assets/stimulus.min-d03cf1dff41d6c5698ec2c5d6a501615a7a33754dbeef8d1edd31c928d17c652.js">
34<link rel="modulepreload" href="/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js">
35<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.mjs">
36<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
37<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/+esm">
38<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@stimulus-components/[email protected]/dist/stimulus-dialog.mjs">
39<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@stimulus-components/[email protected]/dist/stimulus-password-visibility.mjs">
40<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/stimulus-scroll-reveal.mjs">

41<script type="module">import "application"</script>

41
42
43    
44<style>
45  /* ── Minimalista Login Template ── */
46
47  @keyframes ml-fade-up {
48    from { opacity: 0; transform: translateY(18px); }
49    to   { opacity: 1; transform: translateY(0); }
50  }
51
52  .ml-card {
53    background: #fff;
54    border-radius: 20px;
55    box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
56    padding: 2.75rem 3.25rem 2.25rem;
57    max-width: 680px;
58    margin: 0 auto;
59    animation: ml-fade-up 0.5s cubic-bezier(0.22,1,0.36,1) both;
60  }
61
62  /* ── Tabs ── */
63  .ml-tabs {
64    display: flex;
65    gap: 0.5rem;
66    background: #f5f5f7;
67    border-radius: 12px;
68    padding: 5px;
69    margin-bottom: 2rem;
70  }
71
72  .ml-tab {
73    flex: 1;
74    text-align: center;
75    padding: 0.65rem 1rem;
76    text-decoration: none;
77    font-size: 0.82rem;
78    font-weight: 600;
79    letter-spacing: 0.04em;
80    text-transform: uppercase;
81    color: #888;
82    border-radius: 9px;
83    transition: all 0.25s ease;
84  }
85
86  .ml-tab:hover {
87    color: #555;
88    text-decoration: none;
89  }
90
91  .ml-tab--active {
92    background: #fff;
93    color: var(--primary-color, #111);
94    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
95  }
96
97  /* ── Stagger children ── */
98  .ml-stagger { animation: ml-fade-up 0.45s cubic-bezier(0.22,1,0.36,1) both; }
99  .ml-stagger:nth-child(1) { animation-delay: 0.06s; }
100  .ml-stagger:nth-child(2) { animation-delay: 0.12s; }
101  .ml-stagger:nth-child(3) { animation-delay: 0.18s; }
102  .ml-stagger:nth-child(4) { animation-delay: 0.24s; }
103  .ml-stagger:nth-child(5) { animation-delay: 0.30s; }
104
105  /* ── Flash messages ── */
106  .ml-flash { margin-bottom: 1.25rem; border-radius: 10px; }
107
108  /* ── Form fields ── */
109  .ml-field { margin-bottom: 1.35rem; }
110
111  .ml-label {
112    display: block;
113    font-size: 0.78rem;
114    font-weight: 600;
115    color: #555;
116    margin-bottom: 0.45rem;
117    letter-spacing: 0.03em;
118    text-transform: uppercase;
119  }
120
121  .ml-input {
122    display: block;
123    width: 100%;
124    height: 52px;
125    padding: 0 1rem;
126    font-size: 0.92rem;
127    color: #1a1a1a;
128    background-color: #f8f9fa;
129    border: 1.5px solid #e4e7eb;
130    border-radius: 12px;
131    outline: none;
132    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
133    -webkit-appearance: none;
134  }
135
136  .ml-input:hover {
137    border-color: #ccc;
138  }
139
140  .ml-input:focus {
141    border-color: var(--primary-color, #333);
142    box-shadow: 0 0 0 3.5px var(--primary-color-25, rgba(0,0,0,0.06));
143    background-color: #fff;
144  }
145
146  .ml-input::placeholder { color: #b0b0b0; }
147
148  /* ── Password wrapper ── */
149  .ml-password-wrap { position: relative; }
150  .ml-password-wrap .ml-input { padding-right: 3rem; }
151
152  .ml-eye-btn {
153    position: absolute;
154    right: 12px;
155    top: 50%;
156    transform: translateY(-50%);
157    background: none;
158    border: none;
159    padding: 4px;
160    cursor: pointer;
161    opacity: 0.4;
162    transition: opacity 0.2s;
163    line-height: 1;
164  }
165  .ml-eye-btn:hover { opacity: 0.75; }
166
167  /* ── Forgot password ── */
168  .ml-forgot {
169    text-align: right;
170    margin-top: -0.5rem;
171    margin-bottom: 1.5rem;
172  }
173
174  .ml-forgot a {
175    font-size: 0.78rem;
176    color: #999;
177    text-decoration: none;
178    transition: color 0.25s;
179  }
180  .ml-forgot a:hover { color: var(--primary-color, #333); }
181
182  /* ── Submit button ── */
183  .ml-submit {
184    display: block;
185    width: 100%;
186    height: 52px;
187    padding: 0 1.5rem;
188    font-size: 0.85rem;
189    font-weight: 700;
190    letter-spacing: 0.07em;
191    text-transform: uppercase;
192    color: #fff;
193    background-color: var(--primary-color, #111);
194    border: none;
195    border-radius: 12px;
196    cursor: pointer;
197    transition: all 0.25s ease;
198    box-shadow: 0 2px 8px var(--primary-color-25, rgba(0,0,0,0.1));
199  }
200
201  .ml-submit:hover {
202    transform: translateY(-2px);
203    box-shadow: 0 6px 20px var(--primary-color-50, rgba(0,0,0,0.15));
204  }
205
206  .ml-submit:active {
207    transform: translateY(0);
208    box-shadow: 0 2px 8px var(--primary-color-25, rgba(0,0,0,0.1));
209  }
210
211  .ml-submit:disabled {
212    opacity: 0.45;
213    cursor: not-allowed;
214    transform: none;
215    box-shadow: none;
216  }
217
218  /* ── Checkbox styling ── */
219  .ml-check {
220    display: flex;
221    align-items: flex-start;
222    gap: 0.6rem;
223    margin-bottom: 0.75rem;
224    font-size: 0.82rem;
225    color: #555;
226    line-height: 1.45;
227  }
228
229  .ml-check input[type="checkbox"] {
230    flex-shrink: 0;
231    width: 1.2rem;
232    height: 1.2rem;
233    margin-top: 0.1rem;
234    accent-color: var(--primary-color, #111);
235    cursor: pointer;
236  }
237
238  .ml-check label { cursor: pointer; }
239
240  /* ── Warning box ── */
241  .ml-warning {
242    background-color: #fef2f2;
243    border: 1px solid #fecaca;
244    border-radius: 10px;
245    padding: 0.7rem 1rem;
246    font-size: 0.8rem;
247    color: #991b1b;
248    margin-bottom: 1.25rem;
249  }
250
251  /* ── Helper text ── */
252  .ml-helper {
253    font-size: 0.76rem;
254    color: #999;
255    margin-top: 0.3rem;
256  }
257
258  /* ── Policy text ── */
259  .ml-policy-text {
260    font-size: 0.8rem;
261    color: #666;
262    line-height: 1.55;
263    margin-bottom: 1.25rem;
264  }
265  .ml-policy-text a { color: var(--primary-color, #333); text-decoration: underline; }
266
267  /* ── Responsive ── */
268  @media (max-width: 576px) {
269    .ml-card {
270      padding: 2rem 1.35rem 1.5rem;
271      border-radius: 16px;
272      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
273    }
274    .ml-input, .ml-submit { height: 48px; }
275  }
276
277  .hidden { display: none; }
278</style>
279
280
281

282    <link rel="preconnect" href="https://fonts.googleapis.com">
283    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
284    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
285
286    <style>
287      :root {
288        --primary-color: #e31e24;
289        --primary-color-50: #e31e2450;
290        --primary-color-25: #e31e2425;
291        --secondary-color: #333333;
292        --primary-hover-color: #ec5f00;
293      }
294
295      body {
296        font-family: "Raleway", sans-serif;
297      }
298
299      a {
300        color: #e31e24;
301      }
302
303      a:hover {
304        color: #e31e24;
305      }
306
307      h1, h2, h3, h4, h5, h6 {
308        color: #333333;
309      }
310
311      p {
312        color: #333333
313      }
314
315      .has-text-danger{
316        color: #d63624 !important
317      }
318    </style>
319  </head>
320  <body class="background-devise" data-controller="devise-layout">
321    <div id="notifications" class="notifications"></div>
322    <main class="container-fluid">
323      <div class="row">
324        <div class="col-12 col-lg-6 mx-auto">
325          <div class="my-5">
326            <div class="text-center mb-4">
327                <a href="/"><img width="200" src="/assets/store/logotipo-d3f5e6865df3fec6584beba3bb71b2ed9597dc1a13a6c4d61d19d061c40410ae.png" /></a>
328            </div>
329            <div>          
330              
331  
332<div class="ml-card">
333  <div class="ml-tabs">
334    <a class="ml-tab" href="/register">CREAR CUENTA</a>
335    <a class="ml-tab ml-tab--active" href="/login">ACCEDER</a>
336  </div>
337
338
339  <form data-turbo="false" class="new_vweb_user" id="new_vweb_user" action="/login" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="yNNU3-Kc6YktRBth4SmiwrtNW-QOi6fu3LqYH5r2UZOSHjrqzDwdeYriUSQAE7XT_yylf47X3q-IvQuXpegR3g" autocomplete="off" />
340    <div class="ml-field ml-stagger">
341      <label class="ml-label" for="vweb_user_email">Dirección de email:</label>
342      <input autofocus="autofocus" autocomplete="email" class="ml-input" type="email" value="" name="vweb_user[email]" id="vweb_user_email" />
343    </div>
344
345    <div class="ml-field ml-stagger" data-controller="password-visibility">
346      <label class="ml-label" for="vweb_user_password">Contraseña:</label>
347      <div class="ml-password-wrap">
348        <input autocomplete="current-password" class="ml-input" data-password-visibility-target="input" type="password" name="vweb_user[password]" id="vweb_user_password" />
349        <button type="button" data-action="password-visibility#toggle" class="ml-eye-btn">
350          <span data-password-visibility-target="icon"><img src="/assets/store/icon-show-password-87c2ed47555a70b5067b1e9a74ceb34865e2c45c29b27a6535d1aa65fbe8046f.svg" width="22" height="22" /></span>
351          <span data-password-visibility-target="icon" class="hidden"><img src="/assets/store/icon-hide-password-b389856a6ad247a79f6c7984c78be7c790e4fa6bf3a4bf082063d75a7cb8c205.svg" width="22" height="22" /></span>
352        </button>
353      </div>
354    </div>
355
356      <div class="ml-forgot ml-stagger">
357        <a href="/password/recover">¿Has olvidado tu contaseña?</a>
358      </div>
359
360    <div class="ml-field ml-stagger">
361      <input type="submit" name="commit" value="ACCEDER" class="ml-submit" data-disable-with="ACCEDER" />
362    </div>
363</form>
364  
365
366</div>
367
368
369
370            </div>
371          </div>
372        </div>
373      </div>
374    </main>
375  </body>
376</html>