-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (192 loc) · 8.5 KB
/
index.html
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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Uma abstração de um formulário comumente usado em sites ecommerce, envolvendo os passos de dados pessoais, endereço e método de
pagamento (envolvendo apenas pagamentos com cartão).">
<meta name="theme-color" content="#fafafa">
<link rel="shortcut icon" href="./assets/icons/docs.svg" type="image/svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>Step Form</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/root.css">
<link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./css/components/stepper.css">
<link rel="stylesheet" href="./css/form.css">
<link rel="stylesheet" href="./css/components/input.css">
<link rel="stylesheet" href="./css/components/label.css">
<link rel="stylesheet" href="./css/components/button.css">
<link rel="stylesheet" href="./css/components/calendar.css">
</head>
<body>
<div class="content-container">
<div class="stepper-container">
<div class="stepper__line"></div>
<div class="stepper__step">
<div class="step__circle">
<svg class="step__icon" aria-labelledby="personal-data" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20 21C20 18.2386 16.4183 16 12 16C7.58172 16 4 18.2386 4 21M12 13C9.23858 13 7 10.7614 7 8C7 5.23858 9.23858 3 12 3C14.7614 3 17 5.23858 17 8C17 10.7614 14.7614 13 12 13Z"
stroke-linecap="round" stroke-linejoin="round"
/>
</svg>
</div>
<span id="personal-data" class="step__title">Dados pessoais</span>
</div>
<div class="stepper__step">
<div class="step__circle">
<svg class="step__icon" aria-labelledby="address" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20 11C20 13.2685 18.8565 15.3225 17.4341 17C15.9045 18.8039 14.0525 20.1724 12.9533 20.9039C12.3717 21.2908 11.6283 21.2908 11.0467 20.9039C9.94752 20.1724 8.09548 18.8039 6.56591 17C5.14353 15.3225 4 13.2685 4 11C4 6.58172 7.58172 3 12 3C16.4183 3 20 6.58172 20 11Z"
/>
<path
d="M15 11C15 12.6569 13.6569 14 12 14C10.3431 14 9 12.6569 9 11C9 9.34315 10.3431 8 12 8C13.6569 8 15 9.34315 15 11Z"
/>
</svg>
</div>
<span id="address" class="step__title">Endereço</span>
</div>
<div class="stepper__step">
<div class="step__circle">
<svg class="step__icon" aria-labelledby="payment-method" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 11V15.8002C3 16.9203 3 17.4801 3.21799 17.9079C3.40973 18.2842 3.71547 18.5905 4.0918 18.7822C4.5192 19 5.07899 19 6.19691 19H17.8031C18.921 19 19.48 19 19.9074 18.7822C20.2837 18.5905 20.5905 18.2842 20.7822 17.9079C21 17.4805 21 16.9215 21 15.8036V11M3 11V9M3 11H21M3 9V8.2002C3 7.08009 3 6.51962 3.21799 6.0918C3.40973 5.71547 3.71547 5.40973 4.0918 5.21799C4.51962 5 5.08009 5 6.2002 5H17.8002C18.9203 5 19.4796 5 19.9074 5.21799C20.2837 5.40973 20.5905 5.71547 20.7822 6.0918C21 6.5192 21 7.07899 21 8.19691V9M3 9H21M7 15H11M21 11V9"
stroke-linecap="round" stroke-linejoin="round"
/>
</svg>
</div>
<span id="payment-method" class="step__title">Forma de pagamento</span>
</div>
</div>
<form class="form personal-data" novalidate>
<!-- 1 - nome (max 100), email, telefone (max 15),
data de nascimento e cpf (max 14)
-->
<div class="input-container">
<input
name="name"
id="name"
class="input"
type="text"
placeholder="Nome"
aria-labelledby="name-label"
aria-describedby="name-error"
autocomplete="off"
maxlength="100"
required
>
<label id="name-label" class="input__label" for="name">
Nome
</label>
<span id="name-error" class="input__error-message"></span>
</div>
<div class="input-container">
<input
name="email"
id="email"
class="input"
type="email"
placeholder="E-mail"
aria-labelledby="email-label"
aria-describedby="email-error"
autocomplete="off"
required
>
<label id="email-label" class="input__label" for="email">
E-mail
</label>
<span id="email-error" class="input__error-message"></span>
</div>
<div class="input-container">
<input
name="phone"
id="phone"
class="input"
type="tel"
placeholder="Número de celular"
aria-labelledby="phone-label"
aria-describedby="phone-error"
autocomplete="off"
maxlength="15"
required
>
<!-- maxLength de 15, pois: (99) 99999-9999 -->
<label id="phone-label" class="input__label" for="phone">
Número de celular
</label>
<span id="phone-error" class="input__error-message"></span>
</div>
<div class="input-container">
<input
name="birthDate"
id="birth-date"
class="input"
type="text"
placeholder="Data de Nascimento"
aria-labelledby="birth-label"
aria-describedby="birth-error"
autocomplete="off"
required
>
<label id="birth-label" class="input__label" for="birth-date">
Data de Nascimento
</label>
<img src="./assets/icons/calendar.svg" alt="ícone de calendário" class="calendar-icon">
<div class="calendar__wrapper inactive" aria-label="calendário">
<header class="header">
<p class="current-date" aria-label="mês atual"></p>
<div class="header__icons">
<img id="prev" class="arrow-icon" src="./assets/icons/chevron-left.svg" alt="voltar">
<img id="next" class="arrow-icon" src="./assets/icons/chevron-right.svg" alt="avançar">
</div>
</header>
<div class="calendar">
<ul class="weeks" aria-label="semanas">
<li aria-label="domingo">Dom</li>
<li aria-label="segunda">Seg</li>
<li aria-label="terça">Ter</li>
<li aria-label="quarta">Qua</li>
<li aria-label="quinta">Qui</li>
<li aria-label="sexta">Sex</li>
<li aria-label="sábado">Sab</li>
</ul>
<ul class="days"></ul>
</div>
</div>
<span id="birth-error" class="input__error-message"></span>
</div>
<div class="input-container">
<input
name="cpf"
id="cpf"
class="input"
type="text"
placeholder="CPF"
aria-labelledby="cpf-label"
aria-describedby="cpf-error"
autocomplete="off"
maxlength="14"
required
>
<label id="cpf-label" class="input__label" for="cpf">
CPF
</label>
<span id="cpf-error" class="input__error-message"></span>
</div>
<div class="btn-container">
<button class="form__btn personal-data__btn">
Avançar
</button>
</div>
</form>
</div>
<!-- <img src="./assets/images/self-care.svg" alt="desenho de uma mulher se cuidando" class="self-care-img">
<img src="./assets/images/happy-woman.svg" alt="desenho de uma mulher feliz" class="woman-img"> -->
<script type="module" src="./js/components/stepper.js"></script>
<script type="module" src="./js/components/calendar.js"></script>
<script type="module" src="./js/pages/personal-data.js"></script>
</body>
</html>