-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
104 lines (89 loc) · 4.75 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
<!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">
<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/header.css">
<link rel="stylesheet" href="/assets/styles/menu.css">
<link rel="stylesheet" href="/assets/styles/campoCodigo.css">
<link rel="stylesheet" href="/assets/styles/style.css">
<link rel="stylesheet" href="/assets/highlights/draculaAlterado.css">
<title>AluraDev- Editor de Código</title>
</head>
<body spellcheck="false">
<header>
<div class="logo"><h1><img src="/assets/Images/Logo.svg" alt="Logo do site"></h1></div>
<div class="text-field"><input type="text" placeholder="Busque por algo" class="barra-pesquisa" data-input-efeito></div>
<div class="author">
<div class="author-background">
<label><img src="/assets/Images/author.svg" alt="Foto do Usuário">Harry</label>
</div>
</div>
</header>
<main>
<div class="secao-main">
<section class="menu" data-section-menu>
<h2>Menu</h2>
<label class="label-editor-codigo" data-label-menu>
<a class="menu-link" href="/index.html">
<div class="img-menu">
<img src="/assets/Images/IconCodePressionado.svg" alt="Ícone code" class="img-code-menu" data-img-menu>
</div>
</a>
<p class="button-text">Editor de código</p>
</label>
<label class="label-comunidade" data-label-menu>
<a class="menu-link" href="/comunidade.html">
<div class="img-menu">
<img src="/assets/Images/IconComunidadeCongelado.svg" alt="Ícone de comunidade" class="img-comunidade-menu" data-img-menu>
</div>
</a>
<p class="button-text">Comunidade</p>
</label>
</section>
<section class="campo-codigo">
<div class="background-campo-codigo" data-color-background>
<div class="terminal" data-code-area>
<div><img src="/assets/Images/mac_buttons.svg" alt="Representação dos Botões de um terminal Mac"></div>
<pre class="code-content">
<code class="code-campo-codigo" contenteditable="true" aria-label="editor"></code>
</pre>
</div>
</div>
<input type="button" class="button-highlight" value="Visualizar com o highlight" data-highlight-button></input>
</section>
<div class="div-editor-codigo">
<section class="editor-codigo">
<h2>Seu Projeto</h2>
<input type="text" placeholder="Nome do seu projeto" class="barra-nome-projeto" data-input-efeito>
<textarea class="descricao-projeto" id="descricao" cols="20" rows="10" placeholder="Descrição do seu projeto" data-input-efeito></textarea>
</section>
<section class="personalizar">
<h2>Personalização</h2>
<div class="div-personalizar">
<select name="linguagem" class="personalizar-linguagem" data-language-selection>
<option value="javaScript">javaScript</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="python">Python</option>
<option value="java">Java</option>
<option value="c">C</option>
</select>
<div class="div-personalizar-cor"><input type="color" class="input-personalizar-cor" value="#6BD1FF" data-personalizar-cor></div>
<input type="button" class="salvar-projeto" value="Salvar Projeto" data-salvar-button></input>
</div>
</section>
</div>
</div>
</main>
</body>
<script src="scripts/botaoFuncional.js"></script>
<script src="/scripts/editorCodigo.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script src="/scripts/highlight.js"></script>
<script src="/scripts/inputFuncional.js"></script>
<script src="/scripts/highlightFuncional.js"></script>
<script src="/scripts/salvarFuncional.js"></script>
</html>