-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (226 loc) · 10.3 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
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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<!-- Google Fonts -->
<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=Space+Grotesk:wght@500&display=swap" rel="stylesheet">
<!-- end -->
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />
<!-- end -->
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<link rel="mask-icon" href="images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Cartão interativo">
<meta name="application-name" content="Cartão interativo">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-config" content="images/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- end -->
<!-- metadata -->
<link rel="canonical" href="https://leo-henrique.github.io/cartao-interativo/" />
<meta name="author" content="Leonardo Henrique" />
<meta name="description" content="Desafio do Frontend Mentor onde consiste em simular a criação de um cartão virtual. Validações do formulário rigorosas com expressões regulares em JavaScript." />
<meta name="generator" content="Visual Studio Code" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- Open Graph protocol -->
<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Cartão interativo" />
<meta property="og:title" content="Cartão interativo | Leonardo Henrique" />
<meta property="og:description" content="Desafio do Frontend Mentor onde consiste em simular a criação de um cartão virtual. Validações do formulário rigorosas com expressões regulares em JavaScript." />
<meta property="og:url" content="https://leo-henrique.github.io/cartao-interativo/" />
<meta property="og:image" content="https://leo-henrique.github.io/cartao-interativo/images/favicon/og-image.svg" />
<meta property="og:image:alt" content="Favicon do site" />
<!-- end -->
<!-- end -->
<title>Cartão interativo | Leonardo Henrique</title>
</head>
<body >
<div class="loader-bg">
<div class="loader"></div>
</div>
<div class="modal">
<div class="modal-dialog">
<div class="modal-header">
<h2 class="title">
Houve uma incompatibilidade!
</h2>
</div>
<div class="modal-body">
<p>
Sinto muito que você esteja vendo essa mensagem! Infelizmente ocorreu uma incompatibilidade dos recursos utilizados neste projeto com o seu navegador.
</p>
<p>
<strong>
A incompatibilidade impede que as funcionalidades do site funcionem por completo
</strong>. Se desejar, você pode tentar acessar o site através de outro navegador.
</p>
</div>
<div class="modal-footer">
<p>
Texto criado em
<time datetime="2022-12-17">
17 de dezembro de 2022
</time>
</p>
</div>
</div>
</div>
<script src="js/modules/loading.js"
type="module"
defer></script>
<main class="main">
<div class="main-bg"></div>
<h1 class="main-h1 hidden">
Cartão interativo
</h1>
<div class="main-container">
<div class="card">
<div class="card-front">
<div class="card-front-icon">
<svg xmlns="http://www.w3.org/2000/svg"
width="84"
height="47"
viewBox="0 0 84 47"
fill="none">
<ellipse cx="23.478" cy="23.5" fill="#fff" rx="23.478" ry="23.5"/>
<path stroke="#fff" d="M83.5 23.5c0 5.565-4.507 10.075-10.065 10.075-5.559 0-10.065-4.51-10.065-10.075 0-5.565 4.506-10.075 10.065-10.075 5.558 0 10.065 4.51 10.065 10.075Z"/>
</svg>
</div>
<div class="card-front-numbers"
data-card="cardNumber">
0000 0000 0000 0000
</div>
<div class="card-front-footer">
<span class="name"
data-card="cardholder">
Leonardo Henrique
</span>
<span>
<span data-card="expirationMonth">00</span>/<span data-card="expirationYear">00</span>
</span>
</div>
</div>
<div class="card-back">
<span class="security-code"
data-card="securityCode">
000
</span>
</div>
</div>
<form class="form"
autocomplete="off">
<div class="form-fields display show">
<label for="cardholder">
Nome do titular
</label>
<input type="text"
id="cardholder"
name="cardholder"
placeholder="p. ex. Leonardo Henrique"
title="O nome completo do titular que será impresso no cartão" />
<label for="cardNumber">
Número do cartão
</label>
<input type="text"
id="cardNumber"
name="cardNumber"
placeholder="p. ex. 1234 5678 9123 4567"
title="O número do cartão, contendo 16 dígitos" />
<div class="small-fields">
<fieldset class="expiration-container">
<legend>
Data de validade
</legend>
<label class="hidden"
for="expirationMonth">
Mês
</label>
<input type="text"
id="expirationMonth"
name="expirationMonth"
placeholder="Mês"
title="Mês da data de validade do cartão" />
<label class="hidden"
for="expirationYear">
Ano
</label>
<input type="text"
id="expirationYear"
name="expirationYear"
placeholder="Ano"
title="Ano da data de validade do cartão" />
</fieldset>
<div class="cvv-container">
<label for="securityCode">
<abbr title="Código de segurança do cartão">
CVV
</abbr>
</label>
<input type="text"
id="securityCode"
name="securityCode"
placeholder="p. ex. 123"
title="O código de segurança impresso no verso do cartão, contendo 3 dígitos" />
</div>
</div>
</div>
<div class="form-result">
<div class="form-result-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="none">
<circle cx="40" cy="40" r="40" fill="url(#a)"/>
<path stroke="#fff" stroke-width="3" d="M28 39.92 36.08 48l16-16"/>
<defs>
<linearGradient id="a" x1="-23.014" x2="0" y1="11.507" y2="91.507" gradientUnits="userSpaceOnUse">
<stop stop-color="#6348FE"/>
<stop offset="1" stop-color="#610595"/>
</linearGradient>
</defs>
</svg>
</div>
<p class="form-result-title">
Obrigado!
</p>
<p class="form-result-description">
Adicionamos os dados do seu cartão.
</p>
</div>
<button id="btnConfirm"
type="button">
Confirmar
</button>
</form>
</div>
</main>
<footer class="footer">
<div class="footer-container">
<p>
<span>Desafio do </span>
<a href="https://www.frontendmentor.io/home"
target="_blank"
rel="external noopener noreferrer">
Frontend Mentor.
</a>
</p>
<p>
<span>Desenvolvido por</span>
<a href="https://www.linkedin.com/in/leonardo-henrique-/"
target="_blank"
rel="external noopener noreferrer">
Leonardo Henrique.
</a>
</p>
</div>
</footer>
<script type="module"
src="js/script.js"></script>
</body>
</html>