{"id":23586767,"url":"https://github.com/arkaniightt/rottenblood-totemtimerhtml","last_synced_at":"2025-11-03T11:30:27.252Z","repository":{"id":263512695,"uuid":"890643545","full_name":"ArkaNiightt/RottenBlood-TotemTimerHTML","owner":"ArkaNiightt","description":"Cronômetro visual que destaca direções (Norte, Sul, Leste e Oeste) em contagem regressiva de 5 segundos, desenvolvido com HTML, CSS e JavaScript.","archived":false,"fork":false,"pushed_at":"2024-11-19T12:30:14.000Z","size":35,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-27T04:13:58.668Z","etag":null,"topics":["css","html","javascript","tibia"],"latest_commit_sha":null,"homepage":"https://arkaniightt.github.io/RottenBlood-TotemTimerHTML/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArkaNiightt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-18T23:39:42.000Z","updated_at":"2024-11-19T12:30:17.000Z","dependencies_parsed_at":"2024-11-19T00:35:31.841Z","dependency_job_id":"9f1b7abe-d63d-4f76-8d3a-fbe8fe779782","html_url":"https://github.com/ArkaNiightt/RottenBlood-TotemTimerHTML","commit_stats":null,"previous_names":["arkaniightt/rottenblood-totemtimerhtml"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArkaNiightt%2FRottenBlood-TotemTimerHTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArkaNiightt%2FRottenBlood-TotemTimerHTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArkaNiightt%2FRottenBlood-TotemTimerHTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArkaNiightt%2FRottenBlood-TotemTimerHTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArkaNiightt","download_url":"https://codeload.github.com/ArkaNiightt/RottenBlood-TotemTimerHTML/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239412445,"owners_count":19634016,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","tibia"],"created_at":"2024-12-27T04:14:00.711Z","updated_at":"2025-11-03T11:30:27.209Z","avatar_url":"https://github.com/ArkaNiightt.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cronômetro de Direções\n\nEste projeto é um cronômetro visual que destaca direções (Norte, Sul, Leste e Oeste) enquanto realiza uma contagem regressiva. Ele foi desenvolvido utilizando HTML, CSS e JavaScript, proporcionando uma experiência interativa e atraente para o usuário.\n\n## Funcionalidades\n\n- **Cronômetro de 5 segundos**: Um cronômetro que inicia uma contagem regressiva de 5 segundos para cada direção.\n- **Destaque de direções**: As direções são destacadas visualmente enquanto a contagem é realizada, criando um efeito dinâmico e fácil de acompanhar.\n- **Transições suaves**: Animações de transição para melhorar a experiência visual ao iniciar, parar e mudar de direção.\n\n## Estrutura do Projeto\n\n- **index.html**: Contém a estrutura HTML da página, incluindo os elementos do cronômetro e botões de controle.\n- **styles.css**: Arquivo de estilos que define a aparência dos elementos, como cores, posicionamento e animações.\n- **script.js**: Lógica do cronômetro implementada em JavaScript, controlando a contagem regressiva, mudanças de direção e interações do usuário.\n\n## Como Utilizar\n\n1. **Clone o Repositório**\n   ```\n   git clone https://github.com/ArkaNiightt/RottenBlood-TotemTimerHTML.git\n   ```\n2. **Abra o arquivo ****`index.html`**\n   - Navegue até o diretório do projeto e abra o arquivo `index.html` em seu navegador.\n3. **Interaja com o Cronômetro**\n   - Clique no botão `Iniciar` para começar a contagem regressiva.\n   - Clique no botão `Parar` para interromper o cronômetro e redefinir as direções.\n\n## Estrutura HTML\n\nO arquivo `index.html` contém:\n\n- Um título (`\u003ch1\u003e`) indicando que se trata de um cronômetro.\n- Uma estrutura de 4 caixas representando as direções (`N`, `D`, `S`, `E`).\n- Um cronômetro central que mostra a contagem regressiva.\n- Botões para iniciar e parar o cronômetro.\n\n## Estilo CSS\n\n- As direções e o cronômetro são estilizados com transições suaves de cores e transformações para melhorar a experiência do usuário.\n- O layout é responsivo e se adapta bem a diferentes tamanhos de tela, mantendo os elementos centralizados.\n\n## Lógica JavaScript\n\n- A lógica do cronômetro é implementada no `script.js`, controlando a contagem regressiva e a mudança de destaques nas direções.\n- A cada 5 segundos, o cronômetro redefine e muda para a próxima direção, criando um loop contínuo.\n- Ao pressionar `Parar`, o cronômetro é interrompido e as cores são redefinidas.\n\n## Tecnologias Utilizadas\n\n- **HTML5**: Estrutura da página.\n- **CSS3**: Estilização dos elementos e animações.\n- **JavaScript**: Lógica de funcionamento do cronômetro e interações do usuário.\n\n## Melhorias Futuras\n\n- Adicionar um som para indicar a mudança de direção.\n- Permitir ao usuário ajustar o tempo de contagem regressiva.\n- Adicionar uma interface para selecionar diferentes temas de cores.\n\n## Autor\n\nDesenvolvido por Joao Augusto.\n\n## Licença\n\nEste projeto é open-source e está licenciado sob a licença MIT.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkaniightt%2Frottenblood-totemtimerhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farkaniightt%2Frottenblood-totemtimerhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkaniightt%2Frottenblood-totemtimerhtml/lists"}