-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
358 lines (325 loc) · 12.9 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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="stylesheet" href="static/main.css">
<link rel="stylesheet" href="static/css/idea.css">
<script src="static/jquery.js"></script>
<script src="static/markdown/showdown.min.js"></script>
<script src="static/chroma.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<title>Web1 - Exemplos</title>
</head>
<body>
<main class="app"> <!-- grid 2x1 -->
<nav class="navbar">
<ul class="menu">
<li><a href="#index" class="active"><i class="fas fa-home"></i></a></li>
<li>
<a href="#html" class="remote">
<i class="fas fa-code res"></i>
<span class="res">HTML</span>
</a>
</li>
<li><a href="#css" class="remote">CSS</a></li>
<li><a href="#js" class="remote">JS</a></li>
<li>
<a href="#slides" title="pdf slides">
<i class="fas fa-chalkboard res"></i>
<span class="res">slides</span>
</a>
</li>
<li>
<a href="#cores" title="css colors generator">
<i class="fas fa-fill-drip res"></i>
<span class="res">cores</span>
</a>
</li>
<li>
<a href="#text" title="text and paragraphs">
<i class="fas fa-paragraph res"></i>
<span class="res">text</span>
</a>
<li>
<a href="#images" title="images">
<i class="fas fa-images res"></i>
<span class="res">images</span>
</a>
</li>
<li>
<a href="#forms" title="formularios">
<i class="fas fa-id-card res"></i>
<span class="res">forms</span>
</a>
</li>
<li>
<a href="#tools" title="material extra" class="remote">
<i class="fas fa-book res"></i>
<span class="res">tools</span>
</a>
</li>
<li>
<a href="#info">
<i class="fas fa-info-circle"></i>
</a>
</li>
</ul>
</nav>
<div class="conteudo">
<div id="remotePage"></div>
<div class="content info">
<header>
<span class="logo">
<i class="fas fa-info-circle"></i>
</span>
<h1>about</h1>
</header>
<table class="brief">
<tr>
<td>Site
<a id="clear-cache" onclick="app.restore();">
<i id="clear-fa" class="fas fa-undo-alt"></i>
</a>
</td>
<td><a id="app-site" target="_blank" href="#"></a></td>
</tr>
<tr>
<td>version</td>
<td><span id="app-version"></span></td>
</tr>
<tr>
<td>isLocal</td>
<td><span id="app-local"></span></td>
</tr>
<tr>
<td>Client</td>
<td><span id="app-client"></span></td>
</tr>
<tr>
<td>Código</td>
<td><a id="app-repo" target="_blank" href="#"></a></td>
</tr>
<tr>
<td>Last commit</td>
<td><span id="app-last-commit">???</span></td>
</tr>
<tr>
<td>status</td>
<td>
<svg class="svgicon octicon success" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.78-9.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path></svg>
<svg class="svgicon octicon fail" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.78-9.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path></svg>
<svg class="svgicon octicon pending" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.78-9.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path></svg>
<svg class="svgicon svgspin anim-rotate" height="92%" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path opacity=".5" d="M8 15A7 7 0 108 1a7 7 0 000 14v0z" stroke="#dbab0a" stroke-width="2"></path>
<path d="M15 8a7 7 0 01-7 7" stroke="#dbab0a" stroke-width="2"></path>
<path d="M8 12a4 4 0 100-8 4 4 0 000 8z" fill="#dbab0a"></path>
</svg>
</td>
</tr>
</table>
</div>
<div class="content index active">
<header>
<span class="logo">
<i class="fas fa-home"></i>
</span>
<h1>Index</h1>
</header>
<p>Exemplos de códigos de <a href="https://github.com/fscheidt/web1-22" target="_blank">Desenvolvimento Web I</a>
</p>
</div>
<div class="content slides">
<header>
<span class="logo">
<i class="fas fa-chalkboard"></i>
</span>
<h1>Slides</h1>
</header>
<div id="slide-set" class="slides-group"></div>
</div>
<div class="content cores">
<header>
<span class="logo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.3847 2.87868C19.2132 1.70711 17.3137 1.70711 16.1421 2.87868L14.0202 5.00052L13.313 4.29332C12.9225 3.9028 12.2894 3.9028 11.8988 4.29332C11.5083 4.68385 11.5083 5.31701 11.8988 5.70754L17.5557 11.3644C17.9462 11.7549 18.5794 11.7549 18.9699 11.3644C19.3604 10.9739 19.3604 10.3407 18.9699 9.95018L18.2629 9.24316L20.3847 7.12132C21.5563 5.94975 21.5563 4.05025 20.3847 2.87868Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9297 7.09116L4.1515 14.8693C3.22786 15.793 3.03239 17.169 3.5651 18.2842L1.99994 19.8493L3.41415 21.2635L4.97931 19.6984C6.09444 20.2311 7.4705 20.0356 8.39414 19.112L16.1723 11.3338L11.9297 7.09116ZM13.3439 11.3338L11.9297 9.91959L5.56571 16.2835C5.17518 16.6741 5.17518 17.3072 5.56571 17.6978C5.95623 18.0883 6.5894 18.0883 6.97992 17.6978L13.3439 11.3338Z" fill="currentColor" /></svg>
</span>
<h1>Cores</h1>
</header>
<div class="color-table" style="padding: 10px 20px">
<button id="generate" style="display:table-cell;vertical-align:middle;">
<svg class="svgicon" style="width: 90px;" viewBox="28 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<text style="font-size:20px;" x="26" y="18" fill="darkred">Gerar</text>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3ZM5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5Z"
fill="currentColor"/>
<path d="M16 12L10 16.3301V7.66987L16 12Z" fill="currentColor" />
</svg>
</button>
<div id="rndColor"></div>
<div class="palette"></div>
</div>
</div>
<div class="content images">
<header>
<span class="logo">
<i class="fas fa-camera"></i>
</span>
<h1>Images</h1>
</header>
<div class="wrapper-cards">
<figure>
<img src="assets/imgs/jungle1.jpg">
<figcaption>Jungle 1</figcaption>
</figure>
<figure>
<img src="assets/imgs/jungle2.jpg">
<figcaption>Jungle 2</figcaption>
</figure>
<figure>
<img src="assets/imgs/jungle3.jpg">
<figcaption>Jungle 3</figcaption>
</figure>
<figure>
<img src="assets/imgs/building1.jpg">
<figcaption>build 1</figcaption>
</figure>
<figure>
<img src="assets/imgs/building2.jpg">
<figcaption>build 11</figcaption>
</figure>
<figure>
<img src="assets/imgs/building3.jpg">
<figcaption>build 111</figcaption>
</figure>
</div>
</div>
<div class="content forms">
<header>
<span class="logo">
<i class="fas fa-id-card"></i>
</span>
<h1>Forms</h1>
</header>
<style>
.form-wrapper{ width: fit-content; }
.formulario{
border: 1px solid black;
display: grid;
grid-template-columns: 150px 400px;
gap: 10px;
padding: 20px;
background: #cffbcf;
}
.formulario button{ grid-column: 1/2; }
label{ justify-self: right; }
</style>
<div class="form-wrapper">
<form class="formulario">
<label>Nome</label>
<input name="nome" type="text" required autocomplete="off">
<label>Sobrenome</label>
<input name="sobrenome" type="text" required maxlength="5">
<label>Senha</label>
<input name="senha" type="password">
<label>Data Nasc</label>
<input type="date">
<label>Idade</label>
<input type="number" min="5" max="50">
<label>Email</label>
<input type="email" placeholder="somente email pessoal">
<label>Estado</label>
<select>
<option>--Selecione o estado--</option>
<option>PR</option>
<option>RS</option>
<option>SC</option>
</select>
<label>sua opinião</label>
<div>
<label>
<input name="nota" type="radio">Bom
</label>
<label>
<input name="nota" type="radio">Medio
</label>
<label>
<input name="nota" type="radio">Ruim
</label>
</div>
<label>Generos</label>
<div>
<label>
<input name="nota" type="checkbox">Drama
</label>
<label>
<input name="nota" type="checkbox">Comedia
</label>
<label>
<input name="nota" type="checkbox">Suspense
</label>
</div>
<label>Comentários</label>
<textarea cols="60" rows="10"></textarea>
<button>Enviar</button>
</form>
</div>
</div>
</div>
<div class="content text">
<header>
<span class="logo">
<i class="fas fa-sticky-note"></i>
</span>
<h1>data</h1>
</header>
<div id="wrapper"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, praesentium soluta quo modi cumque dolor at animi laborum alias perferendis delectus. Delectus ex doloribus unde officia aliquid eius voluptatum quos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, praesentium soluta quo modi cumque dolor at animi laborum alias perferendis delectus. Delectus ex doloribus unde officia aliquid eius voluptatum quos?</p>
<p class="sonnet">
From fairest creatures we desire increase,
That thereby beauty's rose might never die,
But as the riper should by time decrease,
His tender heir mught bear his memeory:
But thou, contracted to thine own bright eyes,
Feed'st thy light'st flame with self-substantial fuel,
Making a famine where abundance lies,
Thyself thy foe, to thy sweet self too cruel.
Thou that art now the world's fresh ornament
And only herald to the gaudy spring,
Within thine own bud buriest thy content
And, tender churl, makest waste in niggarding.
Pity the world, or else this glutton be,
To eat the world's due, by the grave and thee.
</p>
</div>
</div>
</main>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script>
new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],
data: [
["John", "john@example.com", "(353) 01 222 3333"],
["Mark", "mark@gmail.com", "(01) 22 888 4444"],
["Eoin", "eoin@gmail.com", "0097 22 654 00033"]
],
style: {
table: {
border: '3px solid #ccc'
},
th: {
'background-color': 'rgba(0, 0, 0, 0.1)',
color: '#000',
'border-bottom': '3px solid #ccc',
'text-align': 'center'
},
td: {
'text-align': 'center'
}
}
}).render(document.getElementById("wrapper"));
</script>
<script src="static/main.js"></script>
<script>hljs.highlightAll();</script>
</body>
</html>