├── .gitignore ├── README.md ├── comunidade.html ├── assets ├── js │ ├── comunidade.js │ └── index.js └── css │ ├── comunidade.css │ ├── index.css │ └── darcula.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # projeto-dive-code 2 | -------------------------------------------------------------------------------- /comunidade.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Todos os projetos

16 | 18 |
19 | 20 | 21 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /assets/js/comunidade.js: -------------------------------------------------------------------------------- 1 | const listaProjetos = document.querySelector('.js-todos-projetos') 2 | 3 | new function () { 4 | mostraProjetos() 5 | } 6 | 7 | function mostraProjetos() { 8 | if(localStorage.length <= 0) { 9 | return 10 | } 11 | let projetos = [] 12 | for(let i = 0; i < localStorage.length; i++) { 13 | projetos.push(JSON.parse(localStorage.getItem(i))) 14 | } 15 | projetos.forEach(projeto => { 16 | const cartao = criaCartao(projeto) 17 | listaProjetos.innerHTML += cartao 18 | const codigoHtml = listaProjetos.querySelector(`[data-id="${projeto.id}"]`) 19 | codigoHtml.querySelector('code').innerText = projeto.detalhesDoProjeto.codigo 20 | }) 21 | } 22 | 23 | function criaCartao(projeto) { 24 | const cartao = ` 25 | 26 |
27 | 28 |

${projeto.detalhesDoProjeto.nomeDoProjeto}

29 |

${projeto.detalhesDoProjeto.descricaoDoProjeto}

30 | ${projeto.detalhesDoProjeto.linguagem} 31 |
32 | 33 | ` 34 | return cartao 35 | } -------------------------------------------------------------------------------- /assets/css/comunidade.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | a { 7 | text-decoration: none; 8 | color: inherit; 9 | } 10 | 11 | .main { 12 | font-family: 'Space Mono', monospace; 13 | 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | 19 | width: 100vw; 20 | min-height: 100vh; 21 | 22 | padding: 26px; 23 | box-sizing: border-box; 24 | 25 | background-color: #56cfff; 26 | } 27 | 28 | .titulo { 29 | width: 100%; 30 | max-width: 600px; 31 | margin-bottom: 32px; 32 | } 33 | 34 | .todos-projetos { 35 | width: 100%; 36 | max-width: 600px; 37 | } 38 | 39 | .projeto-wrapper { 40 | display: block; 41 | width: 100%; 42 | margin-bottom: 32px; 43 | } 44 | 45 | .projeto { 46 | background-color: #FFFFFF; 47 | border-radius: 10px; 48 | padding-bottom: 10px; 49 | box-sizing: border-box; 50 | overflow: hidden; 51 | } 52 | 53 | code.projeto__codigo { 54 | display: block; 55 | padding: 16px 10px; 56 | margin-bottom: 16px; 57 | white-space: pre-wrap; 58 | } 59 | 60 | .projeto__titulo, .projeto__descricao, .projeto__linguagem { 61 | margin-right: 10px; 62 | margin-left: 10px; 63 | } 64 | 65 | .projeto__titulo { 66 | margin-bottom: 16px; 67 | } 68 | 69 | .projeto__descricao { 70 | margin-bottom: 10px; 71 | } 72 | 73 | .projeto__linguagem { 74 | color: #FFFFFF; 75 | font-size: 12px; 76 | border-radius: 8px; 77 | padding: 6px; 78 | background-color: #1f1f1f; 79 | } 80 | 81 | .linguagem--javascript { 82 | background-color: #f06d6d; 83 | } 84 | 85 | .linguagem--html { 86 | background-color: #4e3aff; 87 | } 88 | 89 | .linguagem--css { 90 | background-color: #bb6118; 91 | } 92 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | Ver todos os projetos 16 |
17 | 18 | 19 | 20 | 21 | 22 | 27 |
28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /assets/js/index.js: -------------------------------------------------------------------------------- 1 | const linguagem = document.querySelector('.js-linguagem') 2 | const areaDoCodigo = document.querySelector('.js-codigo-wrapper') 3 | const tituloProjeto = document.querySelector('.js-titulo-projeto') 4 | const descricaoProjeto = document.querySelector('.js-descricao-projeto') 5 | const botaoPreview = document.querySelector('.js-botao-preview') 6 | const botaoSalvar = document.querySelector('.js-botao-salvar') 7 | 8 | botaoPreview.addEventListener('click', () => { 9 | let codigo = areaDoCodigo.querySelector('code') 10 | hljs.highlightBlock(codigo) 11 | }) 12 | 13 | linguagem.addEventListener('change', () => { 14 | mudaLinguagem() 15 | }) 16 | 17 | function mudaLinguagem() { 18 | let codigo = {'texto': areaDoCodigo.querySelector('code').innerText} 19 | areaDoCodigo.innerHTML = `` 20 | areaDoCodigo.firstChild.innerText = codigo.texto 21 | } 22 | 23 | botaoSalvar.addEventListener('click', () => { 24 | if (typeof(Storage) !== "undefined") { 25 | console.log('Yay, support!') 26 | const projeto = montaProjeto() 27 | salvaLocalStorage(projeto) 28 | } else { 29 | console.log('Nay, no support!') 30 | } 31 | }) 32 | 33 | function montaProjeto() { 34 | let projeto = { 35 | 'id': atribuiId(), 36 | 'detalhesDoProjeto': { 37 | 'nomeDoProjeto': tituloProjeto.value, 38 | 'descricaoDoProjeto': descricaoProjeto.value, 39 | 'linguagem': linguagem.value, 40 | 'codigo': areaDoCodigo.querySelector('code').innerText 41 | } 42 | } 43 | return projeto 44 | } 45 | 46 | let numeroId = 1 47 | 48 | if(localStorage.length > 0) { 49 | numeroId = localStorage.length 50 | } 51 | 52 | function atribuiId() { 53 | if(localStorage.length == 0) { 54 | return 0 55 | } else { 56 | if(localStorage.length == numeroId) { 57 | let novoId = numeroId 58 | numeroId++ 59 | return novoId 60 | } 61 | } 62 | } 63 | 64 | function salvaLocalStorage(objetoJson) { 65 | localStorage.setItem(objetoJson.id, JSON.stringify(objetoJson)) 66 | } 67 | -------------------------------------------------------------------------------- /assets/css/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | a { 6 | text-decoration: none; 7 | color: inherit; 8 | } 9 | 10 | .main { 11 | font-family: 'Space Mono', monospace; 12 | 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | 18 | width: 100vw; 19 | min-height: 100vh; 20 | 21 | padding: 26px; 22 | box-sizing: border-box; 23 | 24 | background-color: #56cfff; 25 | } 26 | 27 | .link-projetos { 28 | width: 100%; 29 | max-width: 600px; 30 | font-size: 2rem; 31 | margin-bottom: 16px; 32 | background-color: #ffffff; 33 | padding: 10px; 34 | border-radius: 10px; 35 | box-sizing: border-box; 36 | } 37 | 38 | .link-projetos:hover { 39 | background-color: #b0e9ff; 40 | } 41 | 42 | .link-projetos::after { 43 | content: " 33 | */ 34 | 35 | pre code.hljs { 36 | display: block; 37 | overflow-x: auto; 38 | padding: 1em; 39 | } 40 | 41 | code.hljs { 42 | padding: 3px 5px; 43 | } 44 | 45 | .hljs { 46 | color: #e9e9f4; 47 | background: #282936; 48 | } 49 | 50 | .hljs ::selection { 51 | color: #4d4f68; 52 | } 53 | 54 | 55 | /* purposely do not highlight these things */ 56 | .hljs-formula, 57 | .hljs-params, 58 | .hljs-property 59 | {} 60 | 61 | /* base03 - #626483 - Comments, Invisibles, Line Highlighting */ 62 | .hljs-comment { 63 | color: #626483; 64 | } 65 | 66 | /* base04 - #62d6e8 - Dark Foreground (Used for status bars) */ 67 | .hljs-tag { 68 | color: #62d6e8; 69 | } 70 | 71 | /* base05 - #e9e9f4 - Default Foreground, Caret, Delimiters, Operators */ 72 | .hljs-subst, 73 | .hljs-punctuation, 74 | .hljs-operator { 75 | color: #e9e9f4; 76 | } 77 | 78 | .hljs-operator { 79 | opacity: 0.7; 80 | } 81 | 82 | /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */ 83 | .hljs-bullet, 84 | .hljs-variable, 85 | .hljs-template-variable, 86 | .hljs-selector-tag, 87 | .hljs-name, 88 | .hljs-deletion { 89 | color: #ea51b2; 90 | } 91 | 92 | /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */ 93 | .hljs-symbol, 94 | .hljs-number, 95 | .hljs-link, 96 | .hljs-attr, 97 | .hljs-variable.constant_, 98 | .hljs-literal { 99 | color: #b45bcf; 100 | } 101 | 102 | /* base0A - Classes, Markup Bold, Search Text Background */ 103 | .hljs-title, 104 | .hljs-class .hljs-title, 105 | .hljs-title.class_ 106 | { 107 | color: #00f769; 108 | } 109 | 110 | .hljs-strong { 111 | font-weight:bold; 112 | color: #00f769; 113 | } 114 | 115 | /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */ 116 | .hljs-code, 117 | .hljs-addition, 118 | .hljs-title.class_.inherited__, 119 | .hljs-string { 120 | color: #ebff87; 121 | } 122 | 123 | /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */ 124 | .hljs-built_in, 125 | .hljs-doctag, /* guessing */ 126 | .hljs-quote, 127 | .hljs-keyword.hljs-atrule, 128 | .hljs-regexp { 129 | color: #a1efe4; 130 | } 131 | 132 | /* base0D - Functions, Methods, Attribute IDs, Headings */ 133 | .hljs-function .hljs-title, 134 | .hljs-attribute, 135 | .ruby .hljs-property, 136 | .hljs-title.function_, 137 | .hljs-section { 138 | color: #62d6e8; 139 | } 140 | 141 | /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */ 142 | .hljs-type, 143 | /* .hljs-selector-id, */ 144 | /* .hljs-selector-class, */ 145 | /* .hljs-selector-attr, */ 146 | /* .hljs-selector-pseudo, */ 147 | .hljs-template-tag, 148 | .diff .hljs-meta, 149 | .hljs-keyword { 150 | color: #b45bcf; 151 | } 152 | .hljs-emphasis { 153 | color: #b45bcf; 154 | font-style: italic; 155 | } 156 | 157 | /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. */ 158 | .hljs-meta, 159 | /* 160 | prevent top level .keyword and .string scopes 161 | from leaking into meta by accident 162 | */ 163 | .hljs-meta .hljs-keyword, 164 | .hljs-meta .hljs-string 165 | { 166 | color: #00f769; 167 | } 168 | 169 | .hljs-meta .hljs-keyword, 170 | /* for v10 compatible themes */ 171 | .hljs-meta-keyword { 172 | font-weight: bold; 173 | } --------------------------------------------------------------------------------