forked from profSorbus/SimpleWebClient
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
151 lines (138 loc) · 13.9 KB
/
Copy pathindex.html
File metadata and controls
151 lines (138 loc) · 13.9 KB
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#f7f7f7" />
<title>skipit · Mis productos</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="app">
<!-- ============ SCREEN 1: PRODUCTS ============ -->
<section id="screen-products" class="screen screen--products is-active">
<header class="page-head">
<h1 class="page-title">Mis productos</h1>
</header>
<div class="content">
<div class="info-card">
<div class="info-card__text">
<p class="info-card__title">Seleccioná tus productos.</p>
<p class="info-card__sub">Retiralos por el mostrador.</p>
</div>
<button class="chip-btn">Todos</button>
</div>
<ul class="product-list" id="product-list"></ul>
</div>
<div class="action-bar">
<span class="action-bar__count" id="count-label">0 Productos</span>
<button class="confirm-btn" id="confirm-btn" disabled>Confirmar Retiro</button>
</div>
<nav class="bottom-nav">
<button class="nav-item" aria-label="Tienda">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M3 9l1.5-5h15L21 9M4 9h16v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M9 20v-5h6v5" fill="none" stroke="currentColor" stroke-width="1.7"/></svg>
</button>
<button class="nav-item" aria-label="Carrito">
<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="9" cy="20" r="1.4" fill="currentColor"/><circle cx="18" cy="20" r="1.4" fill="currentColor"/><path d="M2 3h2.2l2.3 12.2a1 1 0 0 0 1 .8h9.8a1 1 0 0 0 1-.8L20 7H6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="nav-item nav-item--active" aria-label="Retiros">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M5 8h14l-1 11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 8z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="currentColor" stroke-width="1.7"/></svg>
</button>
<button class="nav-item" aria-label="Perfil">
<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="8" r="3.4" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
</button>
</nav>
</section>
<!-- ============ SCREEN 2: RETIRO (swipe) ============ -->
<section id="screen-retiro" class="screen screen--retiro">
<header class="page-head">
<h1 class="page-title">Retiro</h1>
</header>
<div class="content">
<div class="alert-banner">¡NO hagas swipe antes de retirar!</div>
<div class="ticket-card">
<div class="ticket-card__head">
<span class="avatar">
<img class="avatar__img" src="https://assets.skipit.com.ar/60/logo_60_1742138900273" width="50" height="50" alt="" onerror="this.style.display='none';this.nextElementSibling.style.display='block';" />
<svg class="avatar__fallback" viewBox="0 0 100 100" width="100%" height="100%" style="display:none" aria-hidden="true">
<circle cx="50" cy="50" r="50" fill="#fdfdfa"/>
<defs>
<path id="arcTop" d="M14 50 a36 36 0 0 1 72 0"/>
<path id="arcBot" d="M19 50 a31 31 0 0 0 62 0"/>
</defs>
<g fill="#9c352b" font-family="Poppins, sans-serif" font-weight="700">
<text font-size="9.2" letter-spacing="1.1"><textPath href="#arcTop" startOffset="50%" text-anchor="middle">ARTESANAL · MALCRIADA</textPath></text>
<text font-size="9.2" letter-spacing="2"><textPath href="#arcBot" startOffset="50%" text-anchor="middle">CERVEZA</textPath></text>
</g>
<path d="M40 65 A17 17 0 1 0 60 65" fill="none" stroke="#a4392d" stroke-width="7.5" stroke-linecap="round"/>
<circle cx="50" cy="43" r="2" fill="#a4392d"/>
<circle cx="40" cy="66" r="2.3" fill="#a4392d"/>
<circle cx="60" cy="66" r="2.3" fill="#a4392d"/>
</svg>
</span>
<div class="ticket-card__who">
<p class="ticket-card__name">Rabieta Palermo</p>
<p class="ticket-card__meta">Ingreso - .</p>
</div>
<span class="ticket-card__hour" id="hora-time">Hora 00:00:00</span>
</div>
<hr class="ticket-card__rule" />
<div class="ticket-card__row">
<span class="ticket-card__label">Estas retirando</span>
<span class="ticket-card__total"><span class="t-label">Total:</span><span id="retiro-total">1</span></span>
</div>
<div class="ticket-card__items" id="retiro-items"></div>
</div>
</div>
<div class="swipe-wrap">
<div class="swipe" id="swipe">
<div class="swipe__fill" id="swipe-fill"></div>
<span class="swipe__label">Retirado</span>
<div class="swipe__knob" id="swipe-knob">
<svg width="32" height="32" viewBox="0 0 25 25" fill="#04252b" xmlns="http://www.w3.org/2000/svg"><path d="M7.83114 19.7627C8.25416 20.2524 8.9744 20.3332 9.49325 19.9697L9.59481 19.8916L17.0401 13.4609C17.3151 13.2235 17.4727 12.8779 17.4727 12.5146C17.4727 12.1515 17.3149 11.8067 17.0401 11.5693L9.59481 5.13867L9.49325 5.05957C8.97439 4.69625 8.25409 4.77784 7.83114 5.26758C7.38019 5.78995 7.43793 6.57906 7.96005 7.03027L14.3106 12.5156L7.96005 17.999L7.86825 18.0879C7.43298 18.5483 7.40809 19.2728 7.83114 19.7627Z" fill="#04252b"/></svg>
</div>
</div>
<p class="swipe__hint">Deslizá para confirmar que retiraste tus productos</p>
</div>
</section>
<!-- ============ SCREEN 3: LOADING ============ -->
<section id="screen-loading" class="screen screen--loading">
<div class="loader-card">
<div class="brand">
<svg class="brand__logo" width="158" height="42" viewBox="0 0 246 65" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="skipit">
<g clip-path="url(#skipitClip)">
<path d="M115.095 39.9574C115.095 47.2347 109.434 51.1586 101.467 51.1586C95.1527 51.1586 90.4069 48.2168 87.9069 46.2455C87.2507 45.7287 87.1167 44.7746 87.5834 44.0731L90.6264 40.5092C91.1439 39.7329 92.186 39.5926 92.9161 40.1631C95.6009 42.2608 98.7433 43.3084 101.678 43.3084C104.612 43.3084 106.71 42.3099 106.71 40.2403C106.71 34.1042 87.7012 37.8855 87.7012 24.8275C87.7012 18.2634 92.5233 14.4821 100.421 14.4821C106.493 14.4821 111.102 17.0755 114.127 19.3485C114.808 19.8606 114.956 20.8427 114.476 21.5536L111.426 25.1385C110.922 25.8892 109.917 26.0505 109.189 25.522C105.941 23.1625 102.81 22.3277 100.28 22.3277C97.5556 22.3277 96.0885 23.256 96.0885 24.6825C96.0885 29.8903 115.097 26.6094 115.097 39.9527L115.093 39.9574H115.095Z" fill="#0A1112"/>
<path d="M121.917 0.783722H127.137C128.012 0.783722 128.722 1.50631 128.722 2.40194V34.9931C128.722 35.6152 129.5 35.8771 129.863 35.3767L143.408 16.5894C144.103 15.6236 145.207 15.0554 146.381 15.0554H151.365C152.666 15.0554 153.412 16.5684 152.638 17.6324L141.963 32.3624C141.735 32.6781 141.732 33.1083 141.959 33.4264L152.409 48.1634C153.17 49.2321 152.421 50.7287 151.127 50.7287H145.633C144.801 50.7287 144.018 50.3195 143.532 49.6296L137.121 40.5236C136.873 40.1728 136.36 40.1682 136.109 40.5166L129.563 49.5665C129.034 50.2961 128.197 50.7287 127.308 50.7287H121.92C121.044 50.7287 120.337 50.0061 120.337 49.1128V2.40194C120.337 1.50865 121.046 0.783722 121.92 0.783722H121.922H121.917Z" fill="#0A1112"/>
<path d="M174.085 65C173.286 65 172.639 64.3382 172.639 63.5244V32.8204C172.639 21.3315 180.675 14.4821 190.878 14.4821C201.081 14.4821 208.768 21.8319 208.768 32.8204C208.768 43.8088 201.5 51.3013 191.296 51.3013C187.144 51.3013 183.99 50.0385 182.073 48.3525C181.657 47.99 181.021 48.2753 181.021 48.8318V63.5221C181.021 64.3382 180.374 64.9977 179.575 64.9977H174.08L174.085 65ZM190.668 22.3347C184.868 22.3347 181.024 26.2586 181.024 32.8952C181.024 39.5318 184.868 43.4557 190.668 43.4557C196.467 43.4557 200.381 39.5318 200.381 32.8952C200.381 26.2586 196.537 22.3347 190.668 22.3347Z" fill="#0A1112"/>
<path d="M246.001 49.5986C246.001 50.5059 245.252 51.2331 244.367 51.1864C233.96 50.6392 228.459 44.772 228.459 34.319V2.3709C228.459 1.49397 229.154 0.785416 230.012 0.785416H235.289C236.146 0.785416 236.842 1.49631 236.842 2.3709V14.4233C236.842 14.7694 237.117 15.0524 237.458 15.0524H244.547C245.349 15.0524 245.996 15.7165 245.996 16.5303V21.42C245.996 22.2385 245.347 22.8979 244.547 22.8979H237.458C237.117 22.8979 236.842 23.1809 236.842 23.527V34.2395C236.842 40.2236 239.037 42.9339 244.524 43.3221C245.347 43.3806 245.996 44.0611 245.996 44.9053V49.5962L246.001 49.5986Z" fill="#0A1112"/>
<path d="M218.611 0C221.197 0 223.226 2.14203 223.226 4.70733C223.226 7.41995 221.199 9.48716 218.614 9.48716C216.028 9.48716 214.002 7.41761 214.002 4.70733C214.002 2.1397 216.026 0 218.611 0ZM215.973 15.055H221.25C222.107 15.055 222.803 15.7659 222.803 16.6405V49.1429C222.803 50.0175 222.107 50.7283 221.25 50.7283H215.973C215.116 50.7283 214.42 50.0175 214.42 49.1429V16.6429C214.42 15.7659 215.116 15.0574 215.973 15.0574V15.055Z" fill="#0A1112"/>
<path d="M162.61 0C165.197 0 167.224 2.14203 167.224 4.70733C167.224 7.41995 165.197 9.48716 162.612 9.48716C160.026 9.48716 158 7.41761 158 4.70733C157.998 2.1397 160.024 0 162.61 0ZM159.971 15.055H165.25C166.108 15.055 166.803 15.7659 166.803 16.6405V49.1429C166.803 50.0175 166.108 50.7283 165.25 50.7283H159.971C159.114 50.7283 158.418 50.0175 158.418 49.1429V16.6429C158.418 15.7659 159.114 15.0574 159.971 15.0574V15.055Z" fill="#0A1112"/>
<path d="M77.3055 11.7157C77.0536 10.8481 76.4945 10.0998 75.7875 9.55497C74.0315 8.18697 71.7695 7.92506 69.6322 7.82451C68.8074 7.79177 67.9478 7.67017 67.2639 7.1978C66.4529 6.64592 66.0255 5.69651 65.2353 5.12358C64.3711 4.48986 63.2667 4.17416 62.2085 4.17416C60.5772 4.17416 59.0153 4.94118 57.9964 6.23435C56.8249 7.72863 56.141 8.92827 54.3504 9.83793C52.666 10.6938 50.8037 11.1311 48.9738 11.5286C39.385 13.6099 29.6092 15.6771 20.6998 20.0126C16.0833 22.2599 11.7141 25.0707 7.85553 28.4872C4.05933 31.8499 -0.0626615 35.9305 -0.000277122 41.4306C0.0343809 44.3794 1.87819 46.5495 4.47291 47.6977C5.30932 48.0672 6.32134 48.2098 7.22476 48.2145C8.21597 48.2192 9.20719 48.2239 10.1984 48.2262C11.0371 48.2309 11.9429 48.3034 12.7123 47.9011C13.2529 47.6182 13.6596 47.1318 14.0085 46.629C15.0736 45.0997 16.2867 43.7223 17.6152 42.4174C19.0477 41.0097 20.5819 39.7095 22.197 38.5216C24.2187 37.0343 26.3652 35.7271 28.6064 34.607C29.7109 34.0551 30.8384 33.55 31.9844 33.0893C36.6632 31.2162 39.9049 29.9558 44.8841 29.785C45.7552 29.7546 46.0902 30.7345 45.2607 30.987C36.3536 33.7043 28.0057 37.8528 21.2081 45.8667C21.1665 45.9134 20.7806 46.4723 20.3601 47.078C19.9258 47.7047 20.1891 48.2168 20.947 48.2168H49.958C50.8915 47.9362 50.3993 47.0102 49.8772 46.5472C46.044 43.1541 41.8411 42.822 36.9174 44.1339C36.3444 44.2882 35.6466 44.4309 35.1267 44.2485C34.7871 44.1409 34.7339 43.6755 35.0205 43.4604C37.4165 42.0293 39.6831 40.9138 42.391 39.7446C46.416 37.8481 50.5611 36.2556 52.867 32.3784C53.7381 30.8584 53.9483 28.8637 53.202 27.3764C52.4095 25.7278 50.5079 24.8462 48.7427 24.4183C37.8924 22.3324 26.0163 27.3484 17.673 32.9443C17.1785 33.3021 16.2844 32.9209 16.9405 31.8242C19.9003 27.7693 23.923 25.1221 28.6203 23.2981C35.1614 20.7492 42.6129 19.9354 49.5329 20.6861C51.4021 20.9223 53.2921 21.3993 54.8564 22.4633C56.4275 23.5203 57.6452 25.2367 57.763 27.1426C57.9294 29.7149 56.1734 31.9715 55.4548 34.4479C54.1632 38.8793 56.5061 43.1166 60.2861 45.717C64.0661 48.3151 68.9552 48.8155 73.4608 48.0461C73.7011 48.0064 73.9737 47.9386 74.08 47.7164C74.2787 47.3189 73.7611 46.9494 73.3406 46.795C70.9261 45.9251 68.5024 45.7147 66.4136 44.2134C64.3249 42.7121 62.5666 40.5841 61.9751 38.0585C61.2034 34.78 62.4811 31.3378 64.2579 28.4755C66.7602 24.4557 70.226 21.1491 73.8582 18.1442V18.1512C75.8337 16.5072 78.1096 14.4611 77.3055 11.7134V11.7157ZM62.2085 11.4351C60.9377 11.4351 59.9095 10.3921 59.9095 9.10833C59.9095 7.82451 60.94 6.78155 62.2085 6.78155C63.477 6.78155 64.5075 7.82451 64.5075 9.10833C64.5075 10.3921 63.477 11.4351 62.2085 11.4351Z" fill="#3BD58B"/>
</g>
<defs><clipPath id="skipitClip"><rect width="246" height="65" fill="white"/></clipPath></defs>
</svg>
</div>
<svg class="spinner" viewBox="0 0 50 50" width="56" height="56" aria-hidden="true">
<circle cx="25" cy="25" r="20" fill="none" stroke="#3BD58B" stroke-width="6" stroke-linecap="round" stroke-dasharray="100 26"/>
</svg>
</div>
</section>
<!-- ============ SCREEN 4: SUCCESS ============ -->
<section id="screen-success" class="screen screen--success">
<header class="page-head">
<h1 class="page-title">Retiro</h1>
</header>
<div class="success-body">
<div class="success-circle">
<svg class="success-tick" viewBox="0 0 64 64" width="46" height="46"><path d="M15 33l11 12 23-25" fill="none" stroke="#2ecf71" stroke-width="7.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<p class="success-text">¡Retiraste tus productos!</p>
</div>
</section>
</div>
<script src="js/app.js"></script>
</body>
</html>