diff --git a/imagens/.DS_Store b/imagens/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/imagens/.DS_Store differ diff --git a/imagens/descanso-curto.png b/imagens/descanso-curto.png new file mode 100644 index 0000000..3358cfd Binary files /dev/null and b/imagens/descanso-curto.png differ diff --git a/imagens/descanso-longo.png b/imagens/descanso-longo.png new file mode 100644 index 0000000..24e6550 Binary files /dev/null and b/imagens/descanso-longo.png differ diff --git a/imagens/favicon.ico b/imagens/favicon.ico new file mode 100644 index 0000000..29e244c Binary files /dev/null and b/imagens/favicon.ico differ diff --git a/imagens/foco.png b/imagens/foco.png new file mode 100644 index 0000000..39b0be5 Binary files /dev/null and b/imagens/foco.png differ diff --git a/imagens/logo.png b/imagens/logo.png new file mode 100644 index 0000000..84ba263 Binary files /dev/null and b/imagens/logo.png differ diff --git a/imagens/music_note.png b/imagens/music_note.png new file mode 100644 index 0000000..2edc874 Binary files /dev/null and b/imagens/music_note.png differ diff --git a/imagens/pattern.png b/imagens/pattern.png new file mode 100644 index 0000000..12e6722 Binary files /dev/null and b/imagens/pattern.png differ diff --git a/imagens/pause.png b/imagens/pause.png new file mode 100644 index 0000000..4a49a26 Binary files /dev/null and b/imagens/pause.png differ diff --git a/imagens/play_arrow.png b/imagens/play_arrow.png new file mode 100644 index 0000000..8c0421e Binary files /dev/null and b/imagens/play_arrow.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..73de919 --- /dev/null +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + + Fokus + + + + + + + + + +
+
+
+ +
+
+
+

+ Otimize sua produtividade,
+ mergulhe no que importa. +

+
+ +
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+ +
+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..967ee9c --- /dev/null +++ b/script.js @@ -0,0 +1,115 @@ +const html = document.querySelector('html') +const focoBtn = document.querySelector('.app__card-button--foco') +const curtBtn = document.querySelector('.app__card-button--curto') +const longoBtn = document.querySelector('.app__card-button--longo') +const banner = document.querySelector('.app__image') +const titulo = document.querySelector('.app__title') +const botoes = document.querySelectorAll('.app__card-button') +const startPausedBt = document.querySelector('#start-pause') +const musicaFocoInput = document.querySelector('#alternar-musica') +const iniciarOuPausarBt = document.querySelector('#start-pause span') +const iniciarOuPausarBtIcone = document.querySelector(".app__card-primary-butto-icon") +const tempoNaTela = document.querySelector('#timer') + +const musica = new Audio('/sons/luna-rise-part-one.mp3') +const audioPlay = new Audio('/sons/play.wav'); +const audioPausa = new Audio('/sons/pause.mp3'); +const audioTempoFinalizado = new Audio('./sons/beep.mp3') + +let tempoDecorridoEmSegundos = 1500 +let intervaloId = null + +musica.loop = true + +musicaFocoInput.addEventListener('change', () => { + if(musica.paused) { + musica.play() + } else { + musica.pause() + } +}) + +focoBtn.addEventListener('click', () => { + tempoDecorridoEmSegundos = 1500 + alterarContexto('foco') + focoBtn.classList.add('active') +}) + +curtBtn.addEventListener('click', () => { + tempoDecorridoEmSegundos = 300 + alterarContexto('descanso-curto') + curtBtn.classList.add('active') +}) + +longoBtn.addEventListener('click', () => { + tempoDecorridoEmSegundos = 900 + alterarContexto('descanso-longo') + longoBtn.classList.add('active') +}) + +function alterarContexto(contexto) { + mostrarTempo() + botoes.forEach(function(contexto) { + contexto.classList.remove('active') + }) + html.setAttribute('data-contexto', contexto) + banner.setAttribute('src', `/imagens/${contexto}.png`) + switch (contexto) { + case "foco": + titulo.innerHTML = `Otimize sua produtividade,
+ mergulhe no que importa.` + break; + case "descanso-curto": + titulo.innerHTML = `Que tal dar uma respirada?
+ Faça uma pausa curta!` + break; + + case "descanso-longo": + titulo.innerHTML = `Hora de voltar à superfície.
+ Faça uma pausa longa.` + break; + + default: + break; + } +} + +const contagemRegrssiva = () =>{ + if(tempoDecorridoEmSegundos <= 0) { + audioTempoFinalizado.play() + alert('Tempo finalizado!') + zerar() + return + } + tempoDecorridoEmSegundos -= 1 + mostrarTempo() +} + +startPausedBt.addEventListener('click', iniciarOuPausar) + +function iniciarOuPausar() { + if(intervaloId) { + audioPausa.play() + zerar() + return + } + audioPlay.play() + intervaloId = setInterval(contagemRegrssiva, 1000) + iniciarOuPausarBt.textContent = "Pausar" + iniciarOuPausarBtIcone.setAttribute('src', `/imagens/pause.png`) +} + +function zerar() { + clearInterval(intervaloId) + iniciarOuPausarBt.textContent = "Começar" + iniciarOuPausarBtIcone.setAttribute('src', `/imagens/play_arrow.png`) + intervaloId = null +} + +function mostrarTempo() { + const tempo = new Date(tempoDecorridoEmSegundos * 1000) + const tempoFormatado = tempo.toLocaleTimeString('pt-br', {minute: '2-digit', second: '2-digit'}) + tempoNaTela.innerHTML = `${tempoFormatado}` +} + +mostrarTempo() \ No newline at end of file diff --git a/sons/beep.mp3 b/sons/beep.mp3 new file mode 100644 index 0000000..4dd3b00 Binary files /dev/null and b/sons/beep.mp3 differ diff --git a/sons/luna-rise-part-one.mp3 b/sons/luna-rise-part-one.mp3 new file mode 100644 index 0000000..f14b8b7 Binary files /dev/null and b/sons/luna-rise-part-one.mp3 differ diff --git a/sons/pause.mp3 b/sons/pause.mp3 new file mode 100644 index 0000000..ce2018a Binary files /dev/null and b/sons/pause.mp3 differ diff --git a/sons/play.wav b/sons/play.wav new file mode 100644 index 0000000..22a0d2d Binary files /dev/null and b/sons/play.wav differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..75764f9 --- /dev/null +++ b/styles.css @@ -0,0 +1,252 @@ +:root { + --color-primary: #123456; + --color-secondary: #FFF; + --azul-royal: #144480; + --fundo-card-timer: rgba(20, 68, 128, 0.30); + --lils: #B872FF; + --linear-botes: linear-gradient(180deg, #B872FF 0%, #144480 100%); +} + +[data-contexto="foco"] { + --main-bg-color: linear-gradient(180deg, #8B1FF8 0%, #041832 48.44%, #01080E 100%); +} + +[data-contexto="descanso-curto"] { + --main-bg-color: linear-gradient(180deg, #0F725C 0%, #041832 48.44%, #01080E 100%); +} + +[data-contexto="descanso-longo"] { + --main-bg-color: linear-gradient(180deg, #1875E9 0%, #041832 48.44%, #01080E 100%); +} + +* { + box-sizing: border-box; + max-width: 100%; +} + +html { + background: var(--main-bg-color); + min-height: 100vh; + font-size: 10px; +} + +body { + min-height: 100vh; + background: url("/imagens/pattern.png"); + background-size: cover; + background-repeat: no-repeat; +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Unbounded', cursive; +} + +.app__logo-figure { + display: flex; + justify-content: center; + padding: 4rem 0; +} + +.app__section-banner-container { + width: 99rem; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + gap: 4rem; + flex-wrap: wrap; +} + +.app__title { + line-height: 150%; + font-size: 5.2rem; + font-style: normal; + color: var(--color-secondary); + font-weight: 200; + max-width: 46rem; +} + +.app__title-strong { + font-weight: 600; +} + +.app__section-card-container { + display: flex; + justify-content: center; +} + +.app__card { + border-radius: 3.2rem; + border: 0.2rem solid var(--azul-royal); + background: var(--fundo-card-timer); + padding: 2.4rem; + margin: 8rem 0; + width: 59rem; + max-width: 90%; +} + +.app__card-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + gap: 1.6rem; +} + +.app__card-button { + font-family: Montserrat; + font-size: 1.8rem; + font-style: normal; + font-weight: 400; + line-height: 150%; + background: none; + padding: 0.8rem; + color: var(--color-secondary); + border: none; + cursor: pointer; + outline: inherit; +} + +.app__card-button.active { + border-radius: 0.8rem; + background: var(--azul-royal); + font-weight: 600; +} + +.app__card-timer { + color: var(--color-secondary); + text-align: center; + font-family: Unbounded; + font-size: 12rem; + font-style: normal; + font-weight: 700; + line-height: normal; + margin: 3.2rem; + text-align: center; +} + +.app__card-list-label { + color: var(--color-secondary); + font-family: Montserrat; + font-size: 1.8rem; + font-style: normal; + font-weight: 400; +} + +.app__card-primary-button-wrapper { + display: flex; + align-items: center; + justify-content: center; +} + +.app__card-primary-button { + padding: 0.8rem; + width: 12rem; + color: var(--color-secondary); + border: none; + cursor: pointer; + outline: inherit; + border-radius: 3.2rem; + background: var(--linear-botes); + margin-top: 3.2rem; + font-size: 1.8rem; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.app__footer { + display: flex; + width: 100%; + padding: 2.8rem 6rem; + justify-content: center; + align-items: center; + background: #010B15; +} + +.app__footer-text { + color: rgba(182, 182, 182, 0.8); + text-align: center; + font-family: Montserrat; + font-size: 1.5rem; + font-style: normal; + font-weight: 400; + line-height: 150%; +} + +/* toggle */ +.toggle { + cursor: pointer; + display: inline-block; +} + +.toggle-switch { + display: inline-block; + background: #ccc; + border-radius: 1.6rem; + width: 5.8rem; + height: 3.2rem; + position: relative; + vertical-align: middle; + transition: background 0.25s; +} + +.toggle-switch:before, .toggle-switch:after { + content: ""; +} + +.toggle-switch:before { + display: block; + background: linear-gradient(to bottom, #fff 0%, #eee 100%); + border-radius: 50%; + width: 2.4rem; + height: 2.4rem; + position: absolute; + top: 0.4rem; + left: 0.4rem; + transition: left 0.25s; +} + +.toggle:hover .toggle-switch:before { + background: linear-gradient(to bottom, #fff 0%, #fff 100%); +} + +.toggle-checkbox:checked + .toggle-switch { + background: var(--lils); +} + +.toggle-checkbox:checked + .toggle-switch:before { + left: 3rem; +} + +.toggle-checkbox { + position: absolute; + visibility: hidden; +} + +/* fim - toggle */ + +/* Para Tablets */ +@media (max-width: 1024px) and (min-width: 768px) { + .app__section-banner-container { + width: 48rem; + } +} + +/* Para Celulares */ +@media (max-width: 767px) { + .app__section-banner-container { + width: 32rem; + } + + .app__title { + font-size: 2.6rem; + } + + .app__card-timer { + font-size: 6rem; + } +}