-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (119 loc) · 8.6 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AluraDEV</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Inter:wght@400;700&family=Roboto+Mono&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/mobile.css">
<link rel="stylesheet" href="assets/css/tablet.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/cabecalho.css">
<link rel="stylesheet" href="assets/css/menu.css">
<link rel="stylesheet" href="assets/css/menu-item.css">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/input.css">
<link rel="stylesheet" href="assets/css/select.css">
<link rel="stylesheet" href="assets/css/buttons.css">
<link rel="stylesheet" href="assets/css/code-editor.css">
<link rel="stylesheet" href="assets/css/mac-buttons.css">
</head>
<body>
<header class="cabecalho" id="header-mobile">
<div class="logo-page" id="logo-page">
<img src="assets/images/logo-page.png" alt="AluraDEV" width="145px" height="34px">
</div>
<input type="search" name="pesquisa" id="pesquisa" class="input-search" placeholder="Busque por algo">
<figure class="user-button" id="user-button">
<img src="assets/images/userphoto.png" alt="photo" class="user-photo">
<figcaption class="user-name">
Harry
</figcaption>
</figure>
<div class="invisible-bigscreen" id="mobile-component">
<div class="invisible-bigscreen" id="search-mobile">
<svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.7263 17.2913L15.8322 13.3971C15.6564 13.2214 15.4182 13.1237 15.1682 13.1237H14.5315C15.6096 11.7449 16.2501 10.0107 16.2501 8.12421C16.2501 3.63636 12.6138 0 8.12592 0C3.63807 0 0.00170898 3.63636 0.00170898 8.12421C0.00170898 12.612 3.63807 16.2484 8.12592 16.2484C10.0125 16.2484 11.7467 15.6079 13.1254 14.5298V15.1665C13.1254 15.4165 13.2231 15.6547 13.3988 15.8305L17.293 19.7246C17.6601 20.0918 18.2538 20.0918 18.6171 19.7246L19.7224 18.6193C20.0896 18.2521 20.0896 17.6584 19.7263 17.2913ZM8.12592 13.1237C5.36447 13.1237 3.1264 10.8896 3.1264 8.12421C3.1264 5.36276 5.36056 3.12469 8.12592 3.12469C10.8874 3.12469 13.1254 5.35885 13.1254 8.12421C13.1254 10.8857 10.8913 13.1237 8.12592 13.1237Z"
fill="white" />
</svg>
</div>
<div class="invisible-bigscreen" id="menu-mobile">
<svg width="24" height="24" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.714286 3.46429H19.2857C19.6802 3.46429 20 3.14451 20 2.75V0.964286C20 0.569777 19.6802 0.25 19.2857 0.25H0.714286C0.319777 0.25 0 0.569777 0 0.964286V2.75C0 3.14451 0.319777 3.46429 0.714286 3.46429ZM0.714286 10.6071H19.2857C19.6802 10.6071 20 10.2874 20 9.89286V8.10714C20 7.71263 19.6802 7.39286 19.2857 7.39286H0.714286C0.319777 7.39286 0 7.71263 0 8.10714V9.89286C0 10.2874 0.319777 10.6071 0.714286 10.6071ZM0.714286 17.75H19.2857C19.6802 17.75 20 17.4302 20 17.0357V15.25C20 14.8555 19.6802 14.5357 19.2857 14.5357H0.714286C0.319777 14.5357 0 14.8555 0 15.25V17.0357C0 17.4302 0.319777 17.75 0.714286 17.75Z"
fill="white" />
</svg>
</div>
</div>
</header>
<main class="panel" id="panel-mobile">
<nav class="sidebar" id="sidebar">
<h2 class="title-01">Menu</h2>
<ul class="menu-list">
<li id="editor" class="pressed-item">
<div class="menu-item">
<svg width="24" height="24" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.71572 15.9832L6.80962 15.4301C6.60964 15.3739 6.49715 15.1645 6.55339 14.9645L10.8187 0.271913C10.8749 0.0719285 11.0843 -0.0405627 11.2843 0.0156829L13.1904 0.568765C13.3904 0.62501 13.5029 0.834369 13.4466 1.03435L9.18131 15.727C9.12194 15.9269 8.91571 16.0426 8.71572 15.9832ZM5.1535 12.4772L6.51277 11.0273C6.65651 10.8742 6.64714 10.6305 6.48777 10.4899L3.65675 7.99943L6.48777 5.509C6.64714 5.36839 6.65964 5.12466 6.51277 4.97155L5.1535 3.52166C5.01289 3.37167 4.77541 3.3623 4.62229 3.50604L0.119522 7.72446C-0.0398406 7.87132 -0.0398406 8.12442 0.119522 8.27129L4.62229 12.4928C4.77541 12.6366 5.01289 12.6303 5.1535 12.4772ZM15.3777 12.496L19.8805 8.27441C20.0398 8.12755 20.0398 7.87444 19.8805 7.72758L15.3777 3.50291C15.2277 3.3623 14.9902 3.36855 14.8465 3.51853L13.4872 4.96842C13.3435 5.12153 13.3529 5.36527 13.5122 5.50588L16.3433 7.99943L13.5122 10.4899C13.3529 10.6305 13.3404 10.8742 13.4872 11.0273L14.8465 12.4772C14.9871 12.6303 15.2246 12.6366 15.3777 12.496Z"
fill="white" />
</svg>
</div> Editor de código
</li>
<li id="community" class="normal-item">
<div class="menu-item">
<svg width="24" height="24" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 6C4.10313 6 5 5.10313 5 4C5 2.89687 4.10313 2 3 2C1.89688 2 1 2.89687 1 4C1 5.10313 1.89688 6 3 6ZM17 6C18.1031 6 19 5.10313 19 4C19 2.89687 18.1031 2 17 2C15.8969 2 15 2.89687 15 4C15 5.10313 15.8969 6 17 6ZM18 7H16C15.45 7 14.9531 7.22188 14.5906 7.58125C15.85 8.27188 16.7437 9.51875 16.9375 11H19C19.5531 11 20 10.5531 20 10V9C20 7.89687 19.1031 7 18 7ZM10 7C11.9344 7 13.5 5.43437 13.5 3.5C13.5 1.56562 11.9344 0 10 0C8.06563 0 6.5 1.56562 6.5 3.5C6.5 5.43437 8.06563 7 10 7ZM12.4 8H12.1406C11.4906 8.3125 10.7688 8.5 10 8.5C9.23125 8.5 8.5125 8.3125 7.85938 8H7.6C5.6125 8 4 9.6125 4 11.6V12.5C4 13.3281 4.67188 14 5.5 14H14.5C15.3281 14 16 13.3281 16 12.5V11.6C16 9.6125 14.3875 8 12.4 8ZM5.40938 7.58125C5.04688 7.22188 4.55 7 4 7H2C0.896875 7 0 7.89687 0 9V10C0 10.5531 0.446875 11 1 11H3.05938C3.25625 9.51875 4.15 8.27188 5.40938 7.58125Z"
fill="white" />
</svg>
</div> Comunidade
</li>
</ul>
</nav>
<div class="central-panel">
<div class="color-bg" id="color-bg">
<div class="editor-wrapper" id="editor-wrapper">
<div class="buttons-wrapper">
<div class="color-01"></div>
<div class="color-02"></div>
<div class="color-03"></div>
</div>
<textarea class="editor-text" name="editor-text" id="editor-text" spellcheck="false">
const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
const unfold = (f, seed) => {
const go = (f, seed, acc) => {
const res = f(seed)
return res ? go(f, res[1], acc.concat([res[0]])) : acc
}
return go(f, seed, [])
}
</textarea>
</div>
</div>
<button class="show-highlight" type="submit" id="show-highlight">Visualizar com highlight</button>
</div>
<div class="project-bar" id="project-bar">
<label for="project-title" class="title-01">Seu projeto</label>
<input class="input-text" type="text" name="project-title" id="project-title"
placeholder="Nome do seu projeto">
<textarea class="input-text" name="description-project" id="description-project" cols="30" rows="4"
placeholder="Descrição do seu projeto"></textarea>
<label class="title-01" for="select-language">Personalização</label>
<div class="personalizacao" id="personalizacao" >
<select class="select-01 input-text" name="select-language" id="select-language">
<option value="js">JavaScript</option>
</select>
<input class="input-color" type="color" name="" id="input-color" value="#6BD1FF">
</div>
<button class="save-project" type="submit">Salvar projeto</button>
</div>
</main>
</body>
</html>