-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (93 loc) · 5.42 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
<!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">
<title>Alura dev - Mostre ao mundo seu código</title>
<link rel="shortcut icon" href="./img/iconesite.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/base16/dracula.min.css"
integrity="sha512-oDvVpANXrKQ6R5B25VO6DooEQWA7jUXleyD6oUWHChC0fjv8wAANSX7lKXtp5D6HbZ7EUxd0wjMibtpCQ+aCDw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<main class="main-alura">
<header class="cabecalho-alura">
<div class="logo-alura">
<img src="./img/logo-plataforma.png" alt="logo alura dev">
</div>
<input type="search" name="pesquisar-code" id="pesquisar-code" placeholder="Busque por algo">
<span class="pesquisar-mobile"><i class="fas fa-search"></i></span>
<section class="avatar-alura">
<div id="logo-user">
<img src="./img/header/photo.png" alt="avatar do usuário">
</div>
<span id="name-user">Harry</span>
</section>
<div class="menu-mobile">
<i class="fas fa-bars menu-bars" onclick="menuMobile()"></i>
</div>
</header>
<article class="editor-alura">
<section class="editor-menu">
<nav class="menu-alura">
<h2>MENU</h2>
<ul>
<li><i class="fas fa-code"></i> <a href="./index.html">Editor de código</a></li>
<li><i class="fas fa-users"></i> <a href="./comunidade.html">Comunidade</a></li>
</ul>
</nav>
</section>
<section class="export">
<button onclick="modalExport()"> Exportar <i class="fas fa-chevron-down"></i> </button>
<section class="editor-editor">
<div class="editor-borda">
<div class="back-bolinhas">
<span class="bolinha bolinha-red"></span>
<span class="bolinha bolinha-yellow"></span>
<span class="bolinha bolinha-green"></span>
</div>
<pre><code id="editor-code" class="language-plaintext hljs" contenteditable="true" aria-label="Editor de código"></code></pre>
</div>
<input onclick="sintaxeLang()" type="button" value="Visualizar com o highlight" />
</section>
<section class="modal-export">
<span onclick="savePng()">PNG <i class="fas fa-file-image"></i></span>
<span onclick="saveJpg()">JPG <i class="fas fa-file-image"></i></span>
<span onclick="saveSvg()">SVG <i class="fas fa-file-image"></i></span>
<span onclick="saveHtml()">HTML <i class="fab fa-html5"></i></span>
<span onclick="saveCss()">CSS <i class="fab fa-css3-alt"></i></span>
<span onclick="saveJs()">JS <i class="fab fa-js-square"></i></span>
</section>
</section>
<section class="editor-sidebar">
<aside class="sidebar-alura">
<h2>Seu projeto</h2>
<input type="text" name="name-project" id="name-project" placeholder="Nome do seu projeto">
<input type="text" name="descri-project" id="descri-project" placeholder="Descrição do seu projeto">
<h2>Personalização</h2>
<select name="lang" id="lang">
<option value="javascript">JavaScript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
<input type="color" name="cor-project" id="cor-project">
<input onclick="salvarProjeto()" type="button" value="Salvar projeto">
</aside>
</section>
</article>
</main>
<div class="modal-mensagem">
<div class="mensagem">
<p>Projeto Salvo Com Sucesso!</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.js" integrity="sha512-UNbeFrHORGTzMn3HTt00fvdojBYHLPxJbLChmtoyDwB6P9hX5mah3kMKm0HHNx/EvSPJt14b+SlD8xhuZ4w9Lg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js" integrity="sha512-wUa0ktp10dgVVhWdRVfcUO4vHS0ryT42WOEcXjVVF2+2rcYBKTY7Yx7JCEzjWgPV+rj2EDUr8TwsoWF6IoIOPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./js/script.js"></script>
</body>
</html>