├── img ├── logo alura.png └── logo gemini.png ├── index.html ├── css └── style.css ├── README.md └── js └── script.js /img/logo alura.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flaveti/Projeto-Tedio/HEAD/img/logo alura.png -------------------------------------------------------------------------------- /img/logo gemini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/flaveti/Projeto-Tedio/HEAD/img/logo gemini.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tédio - Encontre o que Fazer 10 | 11 | 12 | 13 | 14 |

15 | 16 | 17 |

18 | 19 | 20 |

21 |

TÉDIO

22 |

23 | 24 | 25 |

26 | 27 | 28 |

29 |

30 | 36 | 37 | 42 | 43 | 51 |

52 | 53 | 54 | 55 | 56 | 57 |

58 |

59 |

60 |

Este projeto foi criado para participar do concurso de desenvolvimento realizado pela Alura em parceria com o Google. O concurso incentiva a criatividade e inovação, permitindo aos participantes explorar o aprendizado prático em um ambiente desafiador.

61 |

62 |

63 | 64 | 65 |

66 |

67 |

Encontre algo para fazer

68 |

Aqui você pode encontrar atividades para passar o tempo de acordo com suas preferências e grau de esforço.

69 |

70 |

71 |

72 |

73 | 74 | 75 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* Configurações gerais de espaçamento e box-sizing */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Estilos gerais do corpo da página */ 9 | body { 10 | font-family: Arial, sans-serif; 11 | background-color: #121212; 12 | color: #fff; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | min-height: 100vh; 17 | padding: 40px; 18 | 19 | } 20 | 21 | /* Gradiente dinâmico no fundo, que segue o movimento do mouse */ 22 | .background-gradient { 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | width: 100vw; 27 | height: 100vh; 28 | pointer-events: none; 29 | z-index: -1; 30 | background-color: #1a1a1a; 31 | } 32 | 33 | /* Container principal que organiza o conteúdo */ 34 | .main-container { 35 | width: 100%; 36 | max-width: 1200px; 37 | display: flex; 38 | flex-direction: column; 39 | justify-content: center; 40 | align-items: left; 41 | } 42 | 43 | .title-container { 44 | text-align: left; 45 | margin-bottom: -50px; 46 | } 47 | 48 | /* Estilo do título principal da página */ 49 | h1 { 50 | font-family: 'Arial Black', helvetica, sans-serif; 51 | font-size: 8rem; 52 | color: #fff; 53 | text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); 54 | width: 100%; 55 | } 56 | 57 | /* Estilo geral do container dos filtros e resultados */ 58 | .container { 59 | display: grid; 60 | grid-template-columns: 1fr 1fr; 61 | gap: 20px; 62 | width: 100%; 63 | border-radius: 12px; 64 | } 65 | 66 | /* Estilos para o container dos filtros */ 67 | .filters-container { 68 | background-color: #1f1f1f; 69 | padding: 30px; 70 | border: none; 71 | box-shadow: 0px -4px 17px rgba(0, 0, 0, 1.08); 72 | display: flex; 73 | flex-direction: column; 74 | gap: 20px; 75 | width: 100%; 76 | outline: none; 77 | border-radius: 12px; 78 | } 79 | 80 | /* Estilos para as linhas dos filtros */ 81 | .filter-row { 82 | display: flex; 83 | gap: 10px; 84 | } 85 | 86 | /* Estilos dos campos de seleção */ 87 | select { 88 | width: 100%; 89 | padding: 10px; 90 | border-radius: 6px; 91 | border: 1px solid #444; 92 | background-color: #1f1f1f; 93 | color: #ffffffa7; 94 | font-family: Arial, Helvetica, sans-serif; 95 | } 96 | 97 | /* Estilos do botão */ 98 | button { 99 | background-color: #e5012b; 100 | color: white; 101 | border: none; 102 | padding: 12px 20px; 103 | border-radius: 8px; 104 | font-family: Arial, Helvetica, sans-serif; 105 | font-size: 1rem; 106 | cursor: pointer; 107 | transition: background-color 0.3s; 108 | width: 100%; 109 | } 110 | 111 | /* Efeito hover no botão */ 112 | button:hover { 113 | background-color: hsl(349, 100%, 50%); 114 | } 115 | 116 | /* Container dos resultados */ 117 | .results-container { 118 | background-color: #333; 119 | padding: 20px; 120 | border-radius: 12px; 121 | width: 100%; 122 | } 123 | 124 | /* Efeito hover na caixa de resultados */ 125 | .results-container:hover { 126 | transform: scale(1.02); /* Leve aumento ao passar o mouse */ 127 | } 128 | 129 | /* Estilo dos cards de atividades */ 130 | .card { 131 | background-color: #333; 132 | padding: 20px; 133 | border-radius: 12px; 134 | transition: transform 0.2s ease; 135 | } 136 | 137 | .card:hover { 138 | transform: scale(1.02); 139 | } 140 | 141 | .card h3 { 142 | font-size: 3rem; 143 | margin-bottom: 10px; 144 | font-family: Arial, Helvetica, sans-serif; 145 | } 146 | 147 | .card p { 148 | color: #aaa; 149 | font-size: 1rem; 150 | margin-bottom: 10px; 151 | } 152 | 153 | .card .details { 154 | font-size: 0.9rem; 155 | margin-top: 40px; 156 | color: #ddd; 157 | } 158 | 159 | .info-paragraph { 160 | color: #bbb; 161 | font-size: 0.6rem; 162 | margin-top: 10px; 163 | } 164 | 165 | /* Estilos para dispositivos móveis (telas menores) */ 166 | @media (max-width: 768px) { 167 | .container { 168 | grid-template-columns: 1fr; 169 | margin-bottom: 40px; 170 | } 171 | 172 | .filter-row { 173 | flex-direction: column; 174 | } 175 | 176 | h1 { 177 | font-size: 5rem; 178 | margin-bottom: 30px; 179 | font-family: -apple-system, BlinkMacSystemFont,"San Francisco", "Roboto", Arial, sans-serif; 180 | font-weight: 900; /* Para garantir que Black seja usado */ 181 | 182 | } 183 | 184 | /* Ajustar os campos de pesquisa no mobile */ 185 | select { 186 | font-size: 1rem; 187 | padding: 12px; 188 | } 189 | 190 | /* Ajustar os botões no mobile */ 191 | button { 192 | font-size: 1rem; 193 | padding: 13px; 194 | } 195 | 196 | /* Ajustar o título dos cards no mobile */ 197 | .card h3 { 198 | font-size: 2rem; 199 | } 200 | 201 | 202 | } 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | If you prefer to read this text in **English**, scroll down. 2 | 3 | 4 | # Tédio - Encontre o que Fazer 5 | 6 | 7 | Oi, tá com tédio? 8 | 9 | Ou pior: está em casa com a namorada e não sabem mais o que fazer, além de comer e ver séries? Pior ainda, está com os amigos e o assunto morreu? E que tal quebrar o gelo naquele seu date? O Tédio pode ajudar nessas e em outras situações. 10 | 11 | Todos nós já passamos por aquele momento em que o único plano parece ser rolar a tela do celular até o sono chegar. Mas sabemos que isso não cria memórias, não gera experiências. Muitas vezes, o tempo gasto em redes sociais é apenas isso: tempo perdido. E foi pensando nesses momentos que criei o Tédio. 12 | 13 | A ideia aqui não é te forçar a ser produtivo o tempo todo. Na verdade, a proposta é justamente aproveitar melhor o seu tempo, seja sozinho ou acompanhado. Não importa se a ideia é se divertir, ser criativo, ou simplesmente curtir a própria companhia. O Tédio te ajuda a encontrar uma atividade para preencher esse espaço de forma diferente. 14 | 15 | **Tédio** é uma plataforma interativa criada para oferecer sugestões personalizadas de atividades, ajudando as pessoas a utilizarem melhor seu tempo quando o tédio aparece. O projeto visa ser uma alternativa ao uso excessivo de redes sociais, sugerindo atividades que possam criar memórias e experiências significativas, seja sozinho ou acompanhado. 16 | 17 | Desenvolvido durante a **Imersão Dev da Alura em parceria com o Google Gemini 2024**, este projeto utiliza recursos ensinados durante o curso, bem como pesquisas filtradas e personalizadas. Além disso, para facilitar o desenvolvimento, utilizei a **IA do Google Gemini** e outras ferramentas de IA como suporte na construção e planejamento da plataforma. 18 | 19 | 20 | --- 21 | 22 | ## Como Usar 23 | 24 | 1. Acesse o projeto diretamente pelo link: 25 | [Visualizar Projeto - Tédio](https://flaveti.github.io/Projeto-Tedio/) 26 | 27 | 2. Selecione os filtros de atividade: 28 | - Categoria: criativa, relaxante, divertida, educacional, produtiva. 29 | - Companhia: sozinho ou em grupo. 30 | - Grau de esforço: baixo, médio, alto. 31 | 32 | 3. Clique em **Acabe com o meu tédio!** e uma sugestão de atividade será exibida. 33 | 34 | 4. Caso a atividade não seja do seu interesse, clique novamente para gerar outra sugestão. 35 | 36 | --- 37 | 38 | ## Deploy 39 | 40 | Acesse o projeto diretamente neste link: 41 | [https://flaveti.github.io/Projeto-Tedio/](https://flaveti.github.io/Projeto-Tedio/) 42 | 43 | --- 44 | 45 | ## Tecnologias Utilizadas 46 | 47 | - **HTML5** 48 | - **CSS3** 49 | - **JavaScript** 50 | 51 | 52 | --- 53 | 54 | ## Funcionalidades 55 | 56 | - **Filtros Personalizados**: Escolha atividades com base em categoria, companhia e grau de esforço. 57 | - **Sugestões Aleatórias**: Cada clique gera uma nova atividade aleatória. 58 | - **Background Dinâmico**: O fundo do site segue o movimento do mouse, proporcionando uma experiência visual envolvente. 59 | - **Design Responsivo**: Adaptado para funcionar em dispositivos móveis e desktops. 60 | - **Tipografia Consistente**: Uso de **San Francisco Black** para iOS e **Roboto Black** para Android e outras plataformas, garantindo legibilidade e consistência em diferentes dispositivos. 61 | 62 | --- 63 | 64 | ## Instalação Local 65 | 66 | Para clonar e rodar o projeto localmente: 67 | 68 | 1. Clone o repositório: 69 | git clone https://github.com/flaveti/Projeto-Tedio.git 70 | 71 | 2. Navegue até o diretório do projeto: 72 | cd Projeto-Tedio 73 | 74 | 3. Abra o arquivo index.html no seu navegador. 75 | 76 | ## Design e Experiência do Usuário 77 | 78 | - **Design Clean e Moderno:** Interface sem poluição visual, ideal para uma navegação fácil e rápida. 79 | - **Modo Escuro:** Fundo escuro pensado para não cansar os olhos. 80 | - **Background Dinâmico:** Segue o movimento do mouse, criando um efeito visual envolvente e divertido. 81 | - **Sugestões Diretas:** Apenas uma atividade aparece por vez, evitando indecisão. 82 | - **Responsivo e Acessível:** Funciona perfeitamente tanto em dispositivos móveis quanto em desktop. 83 | 84 | 85 | 86 | --- 87 | 88 | 89 | # ENGLISH VERSION 90 | 91 | Bored? We’ve all been there. 92 | 93 | Or even worse: you're at home with your girlfriend and there’s nothing left to do besides eating and watching series. Worse still, you’re with your friends, and the conversation has died. How about breaking the ice on that awkward date? Tédio is here to help in these situations and more. 94 | 95 | We’ve all experienced those moments when the only option seems to be scrolling endlessly on our phones until we fall asleep. But we know that doesn’t create memories or meaningful experiences. Oftentimes, it’s just wasted time. That’s when I thought of creating Tédio. 96 | 97 | The idea isn’t to force you to be productive all the time. In fact, it’s the opposite: it’s about making better use of your time, whether you’re alone or with someone. It doesn’t matter if the goal is to have fun, be creative, or simply enjoy your own company. Tédio helps you find an activity to fill that time differently. 98 | 99 | **Tédio** is an interactive platform created to offer personalized suggestions for activities, helping people make better use of their time when boredom strikes. The project aims to be an alternative to excessive screen time, offering activities that can create meaningful memories and experiences, whether alone or with company. 100 | 101 | Developed during the Alura Dev Immersion in partnership with Google Gemini 2024, this project uses the resources taught during the course, along with research that has been filtered and personalized. To ensure the best experience, Google Gemini AI and other AI tools were utilized to optimize the activity suggestions. -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | // Array de atividades com diferentes categorias, companhias e graus de esforço 2 | 3 | const activities = [ 4 | // Criativa 5 | { title: "Autorretrato com estilo", description: "Desenhe um autorretrato trazendo sua identidade única", category: "criativa", effort: "baixo", company: "sozinho" }, 6 | { title: "Poema do dia", description: "Escreva um poema baseado nas pequenas coisas que marcaram seu dia", category: "criativa", effort: "baixo", company: "sozinho" }, 7 | { title: "Explosão de ideias", description: "Faça um brainstorm com ideias ousadas para novos projetos", category: "criativa", effort: "médio", company: "sozinho ou em grupo" }, 8 | { title: "Colagem criativa", description: "Use revistas e materiais para criar uma colagem com significados", category: "criativa", effort: "baixo", company: "sozinho" }, 9 | { title: "Pintura conceitual", description: "Crie uma paisagem com elementos conceituais e abstratos", category: "criativa", effort: "médio", company: "sozinho" }, 10 | { title: "Playlist de impacto", description: "Monte uma playlist com músicas que inspiram diferentes moods", category: "criativa", effort: "baixo", company: "sozinho ou em grupo" }, 11 | { title: "Super-pet ilustrado", description: "Desenhe seu pet como um personagem heroico ou caricato", category: "criativa", effort: "baixo", company: "sozinho" }, 12 | { title: "Escultura fora do comum", description: "Modele algo único com barro ou argila, sem seguir regras", category: "criativa", effort: "alto", company: "sozinho ou em grupo" }, 13 | { title: "Mini-série de 5 cenas", description: "Escreva uma mini-série de cinco cenas com diálogos envolventes", category: "criativa", effort: "alto", company: "sozinho" }, 14 | { title: "Curta experimental", description: "Grave um curta com uma estética experimental e poucos cortes", category: "criativa", effort: "alto", company: "em grupo" }, 15 | { title: "Arte colaborativa", description: "Junte amigos para pintar uma tela com técnicas variadas", category: "criativa", effort: "médio", company: "em grupo" }, 16 | { title: "Painel de ideias", description: "Crie um painel de ideias visuais e inovadoras com seus amigos", category: "criativa", effort: "alto", company: "em grupo" }, 17 | { title: "Escreva uma carta para o futuro", description: "Escreva uma mensagem para você mesmo ler no futuro", category: "criativa", effort: "médio", company: "sozinho" }, 18 | { title: "Desenhe seu ambiente favorito", description: "Ilustre o local onde você mais se sente em paz", category: "criativa", effort: "médio", company: "sozinho" }, 19 | { title: "Redesenhe uma capa de álbum", description: "Escolha um álbum que você gosta e redesenhe a capa com seu estilo", category: "criativa", effort: "médio", company: "sozinho" }, 20 | 21 | // Relaxante 22 | { title: "Meditação guiada", description: "Medite com guias sonoros e relaxe profundamente", category: "relaxante", effort: "baixo", company: "sozinho" }, 23 | { title: "Som ambiente", description: "Ouça sons de natureza enquanto relaxa ou faz atividades leves", category: "relaxante", effort: "baixo", company: "sozinho" }, 24 | { title: "Caminhada no parque", description: "Faça uma caminhada leve e aprecie os detalhes da natureza ao redor", category: "relaxante", effort: "médio", company: "sozinho ou em grupo" }, 25 | { title: "Sessão de filmes tranquilos", description: "Escolha um ou dois filmes calmos e tenha uma sessão relaxante", category: "relaxante", effort: "baixo", company: "sozinho ou em grupo" }, 26 | { title: "Banho relaxante", description: "Tome um banho quente e relaxe com aromas e sons suaves", category: "relaxante", effort: "baixo", company: "sozinho" }, 27 | { title: "Leitura leve", description: "Leia um livro que traz tranquilidade, seja ficção ou algo reflexivo", category: "relaxante", effort: "médio", company: "sozinho" }, 28 | { title: "Ouça um podcast calmo", description: "Escolha um podcast relaxante para ouvir durante uma atividade simples", category: "relaxante", effort: "baixo", company: "sozinho" }, 29 | { title: "Caminhada descalço", description: "Caminhe descalço em algum local seguro, sentindo a terra ou grama", category: "relaxante", effort: "baixo", company: "sozinho" }, 30 | { title: "Desenho com mandalas", description: "Desenhe mandalas detalhadas e coloridas para aliviar o estresse", category: "relaxante", effort: "baixo", company: "sozinho" }, 31 | { title: "Alongamento para relaxar", description: "Faça uma sessão de alongamento simples para descontrair o corpo", category: "relaxante", effort: "baixo", company: "sozinho" }, 32 | 33 | // Divertido 34 | { title: "Jogue um clássico", description: "Revisite aquele jogo retrô que traz nostalgia e diversão garantida", category: "divertido", effort: "médio", company: "sozinho ou em grupo" }, 35 | { title: "Solte a voz no chuveiro", description: "Cante sua música favorita no chuveiro, sem medo de errar", category: "divertido", effort: "baixo", company: "sozinho" }, 36 | { title: "Noite de karaokê", description: "Organize uma noite de karaokê e divirta-se cantando com os amigos", category: "divertido", effort: "alto", company: "em grupo" }, 37 | { title: "Desafio multiplayer", description: "Escolha um jogo multiplayer e desafie um amigo para competir", category: "divertido", effort: "médio", company: "sozinho ou em grupo" }, 38 | { title: "Sessão de dança livre", description: "Dance sem regras, seja na sala de casa ou em uma festa", category: "divertido", effort: "alto", company: "sozinho ou em grupo" }, 39 | { title: "Sessão de improviso", description: "Improvise uma atuação ou uma história sem roteiro, sozinho ou com amigos", category: "divertido", effort: "médio", company: "sozinho ou em grupo" }, 40 | { title: "Gincana de desafios", description: "Crie uma gincana de desafios simples e divirta-se com amigos", category: "divertido", effort: "alto", company: "em grupo" }, 41 | { title: "Jogo de perguntas", description: "Organize um jogo de perguntas rápidas e divertidas", category: "divertido", effort: "médio", company: "em grupo" }, 42 | { title: "Noite de board games", description: "Jogue algum jogo de tabuleiro com os amigos", category: "divertido", effort: "médio", company: "em grupo" }, 43 | { title: "Sessão de memes", description: "Compartilhe e crie memes engraçados com os amigos", category: "divertido", effort: "baixo", company: "sozinho ou em grupo" }, 44 | { title: "Maratona de memes", description: "Passe um tempo navegando em memes e compartilhando os melhores", category: "divertido", effort: "baixo", company: "sozinho" }, 45 | { title: "Assista vídeos de pegadinhas", description: "Relaxe assistindo pegadinhas e vídeos engraçados", category: "divertido", effort: "baixo", company: "sozinho" }, 46 | { title: "Jogue um game casual no celular", description: "Escolha um jogo casual no celular e divirta-se por alguns minutos", category: "divertido", effort: "baixo", company: "sozinho" }, 47 | { title: "Assista a uma série leve", description: "Escolha uma série divertida e descontraída para maratonar", category: "divertido", effort: "baixo", company: "sozinho" }, 48 | { title: "Desenho livre", description: "Pegue um caderno e desenhe o que vier à mente, sem compromisso", category: "divertido", effort: "baixo", company: "sozinho" }, 49 | { title: "Ouça um podcast engraçado", description: "Escolha um podcast leve e engraçado para relaxar enquanto escuta", category: "divertido", effort: "baixo", company: "sozinho" }, 50 | { title: "Faça uma playlist de nostalgia", description: "Crie uma playlist com músicas que te fazem relembrar bons momentos", category: "divertido", effort: "baixo", company: "sozinho" }, 51 | { title: "Explore receitas fáceis", description: "Procure receitas rápidas e simples para experimentar sozinho", category: "divertido", effort: "baixo", company: "sozinho" }, 52 | { title: "Customize seu celular", description: "Mude o wallpaper, ícones e personalize seu celular de maneira divertida", category: "divertido", effort: "baixo", company: "sozinho" }, 53 | { title: "Assista a um stand-up", description: "Relaxe assistindo a um show de stand-up e dê boas risadas", category: "divertido", effort: "baixo", company: "sozinho" }, 54 | 55 | // Educacional 56 | { title: "TED inspirador", description: "Assista a uma palestra TED sobre um tema que você quer explorar", category: "educacional", effort: "baixo", company: "sozinho" }, 57 | { title: "Artigo técnico", description: "Leia um artigo interessante de uma área técnica que você gosta", category: "educacional", effort: "médio", company: "sozinho" }, 58 | { title: "Curso online intensivo", description: "Participe de um curso online intensivo e aprenda algo novo", category: "educacional", effort: "alto", company: "sozinho" }, 59 | { title: "Discussão filosófica", description: "Converse sobre temas filosóficos profundos com os amigos", category: "educacional", effort: "médio", company: "em grupo" }, 60 | { title: "Desafios de lógica", description: "Resolva exercícios de lógica para estimular seu raciocínio", category: "educacional", effort: "alto", company: "sozinho" }, 61 | { title: "Faça um curso rápido", description: "Escolha um curso breve sobre um tema novo e interessante", category: "educacional", effort: "médio", company: "sozinho" }, 62 | { title: "Sessão de documentários", description: "Maratone documentários sobre temas diversos e fascinantes", category: "educacional", effort: "baixo", company: "sozinho ou em grupo" }, 63 | 64 | // Educacional (continuação) 65 | { title: "Workshop online", description: "Participe de um workshop online e aprenda algo prático", category: "educacional", effort: "médio", company: "sozinho ou em grupo" }, 66 | { title: "Debate temático", description: "Organize um debate com amigos sobre um tema relevante e atual", category: "educacional", effort: "alto", company: "em grupo" }, 67 | { title: "Leitura acadêmica", description: "Escolha um livro técnico ou acadêmico para ler e aprender", category: "educacional", effort: "médio", company: "sozinho" }, 68 | { title: "Resenha crítica", description: "Escreva uma resenha crítica de um livro ou artigo que você leu recentemente", category: "educacional", effort: "médio", company: "sozinho" }, 69 | { title: "Estudo de caso", description: "Analise um estudo de caso interessante de sua área de interesse", category: "educacional", effort: "alto", company: "sozinho" }, 70 | { title: "Hackathon caseiro", description: "Junte-se com amigos para criar soluções em um hackathon improvisado", category: "educacional", effort: "alto", company: "em grupo" }, 71 | 72 | // Produtiva 73 | { title: "Organização digital", description: "Organize suas pastas e arquivos digitais para deixar tudo em ordem", category: "produtiva", effort: "baixo", company: "sozinho" }, 74 | { title: "Planejamento semanal", description: "Defina suas metas e tarefas para a semana e organize seu tempo", category: "produtiva", effort: "médio", company: "sozinho" }, 75 | { title: "Revise seu orçamento", description: "Revise seu orçamento mensal e ajuste suas finanças", category: "produtiva", effort: "alto", company: "sozinho" }, 76 | { title: "Tarefa de 15 minutos", description: "Escolha uma tarefa simples e rápida e resolva em 15 minutos", category: "produtiva", effort: "baixo", company: "sozinho" }, 77 | { title: "Organização minimalista", description: "Revise seus itens e adote um estilo de organização mais minimalista", category: "produtiva", effort: "médio", company: "sozinho" }, 78 | { title: "Revisão de metas", description: "Revise suas metas de curto e longo prazo e veja o progresso", category: "produtiva", effort: "alto", company: "sozinho" }, 79 | { title: "Organize seu espaço criativo", description: "Dê uma organizada no seu espaço criativo, deixando tudo acessível", category: "produtiva", effort: "baixo", company: "sozinho" }, 80 | { title: "Backup de dados", description: "Faça o backup de todos os seus arquivos importantes", category: "produtiva", effort: "baixo", company: "sozinho" }, 81 | { title: "Sessão de planejamento", description: "Planeje seus próximos passos em projetos pessoais ou profissionais", category: "produtiva", effort: "médio", company: "sozinho" }, 82 | { title: "Organize suas finanças", description: "Crie ou atualize seu plano financeiro para os próximos meses", category: "produtiva", effort: "alto", company: "sozinho" } 83 | ]; 84 | // Variável para armazenar os filtros anteriores 85 | let lastFilters = { effort: null, company: null, category: null }; 86 | 87 | // Função executada ao clicar no botão "Acabe com o meu tédio!" 88 | document.getElementById("new-activity-btn").addEventListener("click", function() { 89 | const effort = document.getElementById("effort").value; 90 | const company = document.getElementById("company").value; 91 | const category = document.getElementById("category").value; 92 | 93 | // Filtrar as atividades com base nos filtros selecionados 94 | const filteredActivities = activities.filter(activity => 95 | activity.effort === effort && activity.company.includes(company) && activity.category === category 96 | ); 97 | 98 | const resultsContainer = document.getElementById("results-container"); 99 | resultsContainer.innerHTML = ""; // Limpar resultados anteriores 100 | 101 | // Verificar se há atividades filtradas 102 | if (filteredActivities.length === 0) { 103 | const card = document.createElement("div"); 104 | card.classList.add("card"); 105 | card.innerHTML = "

Encontre o que fazer!

Não encontramos atividades com esses filtros.

"; 106 | resultsContainer.appendChild(card); 107 | } else { 108 | // Selecionar uma atividade aleatória dos resultados filtrados 109 | const randomActivity = filteredActivities[Math.floor(Math.random() * filteredActivities.length)]; 110 | 111 | const card = document.createElement("div"); 112 | card.classList.add("card"); 113 | 114 | const title = document.createElement("h3"); 115 | title.textContent = randomActivity.title; 116 | 117 | const description = document.createElement("p"); 118 | description.textContent = randomActivity.description; 119 | 120 | const details = document.createElement("div"); 121 | details.classList.add("details"); 122 | details.innerHTML = `Grau de esforço: ${randomActivity.effort}
Companhia: ${randomActivity.company}`; 123 | 124 | card.appendChild(title); 125 | card.appendChild(description); 126 | card.appendChild(details); 127 | resultsContainer.appendChild(card); 128 | } 129 | 130 | // Esconder a descrição inicial 131 | const descriptionCard = document.getElementById("description-card"); 132 | if (descriptionCard) { 133 | descriptionCard.style.display = "none"; 134 | } 135 | 136 | // Alterar o texto do botão com base nos filtros anteriores 137 | const button = document.getElementById("new-activity-btn"); 138 | 139 | if (lastFilters.effort === effort && lastFilters.company === company && lastFilters.category === category) { 140 | button.textContent = "Não gostei. De novo!"; 141 | } else { 142 | button.textContent = "Acabe com o meu tédio!"; 143 | lastFilters = { effort, company, category }; 144 | } 145 | }); 146 | 147 | // Função para mudar o gradiente com base no movimento do mouse 148 | const gradient = document.getElementById('gradient'); 149 | document.addEventListener('mousemove', function(e) { 150 | const x = e.clientX / window.innerWidth; 151 | const y = e.clientY / window.innerHeight; 152 | 153 | gradient.style.background = `radial-gradient(circle at ${e.clientX}px ${e.clientY}px, 154 | rgba(255, 255, 255, 0.1), #121212 50%)`; 155 | }); --------------------------------------------------------------------------------