diff --git a/robotron-2000-projeto-final/README.md b/robotron-2000-projeto-final/README.md new file mode 100644 index 00000000..d43759a5 --- /dev/null +++ b/robotron-2000-projeto-final/README.md @@ -0,0 +1 @@ +# robotron-2000 \ No newline at end of file diff --git a/robotron-2000-projeto-final/css/style.css b/robotron-2000-projeto-final/css/style.css new file mode 100644 index 00000000..8880583c --- /dev/null +++ b/robotron-2000-projeto-final/css/style.css @@ -0,0 +1,233 @@ +:root { + --main-cinza: #CCCCCC; + --main-branco: #FFFFFF; + --main-preto: #000000; +} + +* { + box-sizing: border-box; +} + +body { + background: url(../img/fundo.jpg); + background-position: center center; + background-size: cover cover; + padding: 0; + margin: 0; + font-weight: 300; +} + +body, input { + font-family: 'Teko', sans-serif; +} + +main { + width: 80vw; + height: 80vh; + margin: 10vh 8vw 10vh 12vw; + display: flex; + gap: 1vw; +} + +.robotron { + background: url(../img/estrutura.png) no-repeat; + background-position: center center; + margin: 0; + flex-basis: 40%; + position: relative; +} + +.robo { + height: 110%; + z-index: 1; + position: absolute; + left: -20%; + top: -5%; +} + +.titulo { + transform: rotate(180deg); + font-weight: 500; + font-size: 130px; + position: absolute; + bottom: 7rem; + left: -3rem; + line-height: 0.8; + writing-mode: vertical-rl; + text-orientation: mixed; + color: rgba(255,255,255,0.8) +} + +.box { + background: rgba(0,0,0,0.6); + clip-path: polygon(calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px, 30px 0); + border-left: 5px solid var(--main-cinza); + height: 80%; +} + +/****************************** Equipamentos *****/ + +.equipamentos { + flex-basis: 32%; +} + +.montador { + height: 100%;; +} + +.montador-conteudo { + padding: 2em 10%; +} + +.peca { + padding: 1em 0; +} + +.peca-titulo { + color: var(--main-branco); + text-transform: uppercase; + font-size: 2.5em; +} + +.controle { + background: var(--main-preto); + border-radius: 25px; + float: right; + display: inline-flex; + padding: 5px; + align-items: center; + align-self: flex-end; +} + +.controle-contador { + width: 40px; + height: 35px; + background: none; + border: 0; + margin: 0 1rem; + color: var(--main-branco); + text-align: center; + font-size: 2.5em; + display: inline-flex; + align-items: center; + padding-top: 8px; +} + +.controle-ajuste { + display: inline-block; + width: 40px; + height: 40px; + line-height: 44px; + border-radius: 50%; + color: var(--main-cinza); + font-size: 4em; + background: var(--main-preto); + text-align: center; + border: 3px solid var(--main-cinza); + cursor: pointer; +} + +.linha { + border-color: var(--main-cinza); +} + +.producao { + margin-top: 1em; + font-size: 2em; + text-transform: uppercase; + padding: 0.2em 1em; + float: right; + border: 3px solid var(--main-branco); + background: var(--main-branco); + clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0); + cursor: pointer; +} + +.producao:hover { + background: var(--main-preto); + color: var(--main-branco) +} + + + +/****************************** Estatísticas *****/ +.estatisticas { + flex-basis: 23%; + padding: 2em 2em 0; +} + +.estatistica { + color: var(--main-branco); + display: flex; + align-items: flex-start; + height: 25%; +} + +.estatistica-titulo { + font-size: 1.5em; + border-bottom: 1px solid var(--main-cinza); + flex-basis: 40%; + text-transform: uppercase; + order: 1 +} + +.estatistica-valor { + flex-basis: 60%; + position: relative; + margin: 10px 0 0; + order: 2; + margin: -10px 0 0; +} + +.estatistica-valor::after { + content: ""; + display: block; + padding-bottom: 100%; + border: 1px solid var(--main-cinza); + border-radius: 50%; +} + +.estatistica-numero { + position: absolute; + top: 50%; + transform: translateY(-46%); + width: 100%; + line-height: 100%; + text-align: center; + font-size: 3em; + margin: 0; +} + +.estatistica:nth-child(2n) .estatistica-titulo { + order: 2; + text-align: right; +} + +.estatistica:nth-child(2n) .estatistica-valor { + order: 1; + flex-basis: 35%; + margin: 10px 0 0; +} + +@media screen and (max-width: 1600px) { + body { + font-size: 14px; + } + main { + width: 90vw; + height: 80vh; + margin: 5vh auto; + } +} + +@media screen and (max-width: 1200px) { + body { + font-size: 13px; + } + + main { + width: 96vw; + height: 80vh; + margin: 10vh auto; + } +} \ No newline at end of file diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/asas.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/asas.png new file mode 100644 index 00000000..16b8349b Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/asas.png differ diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/blindagem.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/blindagem.png new file mode 100644 index 00000000..ae976c22 Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/blindagem.png differ diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/braco.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/braco.png new file mode 100644 index 00000000..d67852ae Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/braco.png differ diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/foguete-cotovelo.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/foguete-cotovelo.png new file mode 100644 index 00000000..895d393d Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/foguete-cotovelo.png differ diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/foguete.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/foguete.png new file mode 100644 index 00000000..69d37e57 Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/foguete.png differ diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/nucleo.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/nucleo.png new file mode 100644 index 00000000..16fedd35 Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/nucleo.png differ diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/perna.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/perna.png new file mode 100644 index 00000000..73caf6bf Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/perna.png differ diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/raio.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/raio.png new file mode 100644 index 00000000..510b20ef Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/raio.png differ diff --git a/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/robotron.png b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/robotron.png new file mode 100644 index 00000000..b8925c5f Binary files /dev/null and b/robotron-2000-projeto-final/drive-download-20230411T183915Z-001/robotron.png differ diff --git a/robotron-2000-projeto-final/img/estrutura.png b/robotron-2000-projeto-final/img/estrutura.png new file mode 100644 index 00000000..54cec1c4 Binary files /dev/null and b/robotron-2000-projeto-final/img/estrutura.png differ diff --git a/robotron-2000-projeto-final/img/favicon.ico b/robotron-2000-projeto-final/img/favicon.ico new file mode 100644 index 00000000..d057ff9d Binary files /dev/null and b/robotron-2000-projeto-final/img/favicon.ico differ diff --git a/robotron-2000-projeto-final/img/fundo.jpg b/robotron-2000-projeto-final/img/fundo.jpg new file mode 100644 index 00000000..d286c56e Binary files /dev/null and b/robotron-2000-projeto-final/img/fundo.jpg differ diff --git a/robotron-2000-projeto-final/img/robotron.png b/robotron-2000-projeto-final/img/robotron.png new file mode 100644 index 00000000..852f0ebf Binary files /dev/null and b/robotron-2000-projeto-final/img/robotron.png differ diff --git a/robotron-2000-projeto-final/index.html b/robotron-2000-projeto-final/index.html new file mode 100644 index 00000000..fdbeeea1 --- /dev/null +++ b/robotron-2000-projeto-final/index.html @@ -0,0 +1,105 @@ + + + + + + + + Robotron 2000 + + + + + + + +
+
+ Robotron +
ROBOTRON
2000
+
+ +
+ +
+

Força

+
+

0

+
+
+
+

Poder

+
+

0

+
+
+
+

Energia

+
+

0

+
+
+
+

Velocidade

+
+

0

+
+
+
+ +
+
+
+
+ +
+ - + + + +
+
+
+
+ +
+ - + + + +
+
+
+
+ +
+ - + + + +
+
+
+
+ +
+ - + + + +
+
+
+
+ +
+ - + + + +
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/robotron-2000-projeto-final/js/main.js b/robotron-2000-projeto-final/js/main.js new file mode 100644 index 00000000..a5cf8680 --- /dev/null +++ b/robotron-2000-projeto-final/js/main.js @@ -0,0 +1,59 @@ +const controle = document.querySelectorAll("[data-controle]") +const estatistica = document.querySelectorAll("[data-estatistica]") + +const pecas = { + "bracos": { + "forca": 29, + "poder": 35, + "energia": -21, + "velocidade": -5 + }, + + "blindagem": { + "forca": 41, + "poder": 20, + "energia": 0, + "velocidade": -20 + }, + "nucleos":{ + "forca": 0, + "poder": 7, + "energia": 48, + "velocidade": -24 + }, + "pernas":{ + "forca": 27, + "poder": 21, + "energia": -32, + "velocidade": 42 + }, + "foguetes":{ + "forca": 0, + "poder": 28, + "energia": 0, + "velocidade": -2 + } +} + +controle.forEach( (elemento) => { + elemento.addEventListener('click', (evento) => { + manipulaDados(evento.target.textContent, evento.target.parentNode) + atualizaEstatistica(evento.target.dataset.peca) + }) +}) + +function manipulaDados(operacao, controle) { + const peca = controle.querySelector("[data-contador]") + + if(operacao === "-") { + peca.value = parseInt(peca.value) - 1 + } else { + peca.value = parseInt(peca.value) + 1 + } +} + +function atualizaEstatistica(peca) { + estatistica.forEach( (elemento ) => { + elemento.textContent = parseInt(elemento.textContent) + pecas[peca][elemento.dataset.estatistica] + }) +} \ No newline at end of file