From 9c868f9582319b87bfd3946d4ea3123944340aa6 Mon Sep 17 00:00:00 2001
From: Renan <rocha.renan06@gmail.com>
Date: Fri, 30 Aug 2024 20:12:30 -0300
Subject: [PATCH] =?UTF-8?q?coment=C3=A1rios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  4 +---
 script.js  | 11 +----------
 styles.css | 18 +++++++++---------
 3 files changed, 11 insertions(+), 22 deletions(-)
diff --git a/index.html b/index.html
index c62766e..1b38852 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-3">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Projeto Curso - Princípios Cibersegurança</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <div class="container">
-        <!-- Botão principal -->
         <button id="mainButton" class="creative-button" onclick="showButtons()">Clique aqui para o Download do Arquivo</button>
 
-        <!-- Container com os botões de URL -->
         <div id="buttonContainer" class="hidden">
             <a href="Apresentasao-Ciber.pptm" download="Apresentasao-Ciber.pptm">
                 <button class="creative-button download-button">Download Aqui</button>
diff --git a/script.js b/script.js
index 8f66b4d..205af01 100644
--- a/script.js
+++ b/script.js
@@ -1,19 +1,15 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Posiciona o botão principal em uma posição aleatória ao carregar a página
     positionButtonRandomly(document.getElementById('mainButton'));
 });
 
 document.getElementById('mainButton').addEventListener('click', function() {
-    // Esconde o botão principal com efeito de fumaça
     this.classList.add('smoke-effect');
     setTimeout(() => {
         this.classList.add('hidden');
-    }, 2000); // Tempo da animação (2 segundos)
+    }, 2000);
 
-    // Exibe os outros botões
     setTimeout(() => {
         document.getElementById('buttonContainer').classList.remove('hidden');
-        // Posiciona o botão real de download aleatoriamente
         positionButtonRandomly(document.querySelector('.download-button'));
     }, 2000);
 });
@@ -25,13 +21,11 @@ function openUrl(buttonNumber) {
     }
 }
 
-// Função para mover o botão aleatoriamente dentro do container
 function moveButton(button) {
     const container = document.querySelector('.container');
     const containerRect = container.getBoundingClientRect();
     const buttonRect = button.getBoundingClientRect();
 
-    // Calcula novas posições aleatórias dentro do container
     const maxLeft = containerRect.width - buttonRect.width;
     const maxTop = containerRect.height - buttonRect.height;
     const randomLeft = Math.random() * maxLeft;
@@ -41,13 +35,11 @@ function moveButton(button) {
     button.style.top = `${randomTop}px`;
 }
 
-// Função para posicionar o botão de download aleatoriamente ao abrir
 function positionButtonRandomly(button) {
     const container = document.querySelector('.container');
     const containerRect = container.getBoundingClientRect();
     const buttonRect = button.getBoundingClientRect();
 
-    // Calcula novas posições aleatórias dentro do container
     const maxLeft = containerRect.width - buttonRect.width;
     const maxTop = containerRect.height - buttonRect.height;
     const randomLeft = Math.random() * maxLeft;
@@ -57,7 +49,6 @@ function positionButtonRandomly(button) {
     button.style.top = `${randomTop}px`;
 }
 
-// Mostrar a URL ao passar o mouse sobre os botões
 document.querySelectorAll('.fake-button').forEach((button) => {
     button.addEventListener('mouseover', function() {
         moveButton(button);
diff --git a/styles.css b/styles.css
index af824d1..7cc94a3 100644
--- a/styles.css
+++ b/styles.css
@@ -7,13 +7,13 @@ body {
     align-items: center;
     height: 100vh;
     background: radial-gradient(circle, #2c3e50, #000000);
-    overflow: hidden; /* Evita que os botões saiam da tela */
+    overflow: hidden;
 }
 
 .container {
-    position: relative; /* Permite o posicionamento absoluto dos botões */
+    position: relative;
     text-align: center;
-    width: 80%; /* Ajusta o tamanho do container para limitar o movimento */
+    width: 80%;
     height: 80vh;
 }
 
@@ -26,8 +26,8 @@ body {
     background: linear-gradient(135deg, #f39c12, #e74c3c);
     cursor: pointer;
     border-radius: 50px;
-    position: absolute; /* Permite o movimento e posicionamento aleatório */
-    transition: transform 0.1s, background 0.3s, left 0.3s, top 0.3s; /* Suaviza o movimento */
+    position: absolute;
+    transition: transform 0.1s, background 0.3s, left 0.3s, top 0.3s;
 }
 
 .creative-button:hover {
@@ -56,11 +56,11 @@ body {
 }
 
 .download-button {
-    font-size: 1px; /* Diminui ainda mais o tamanho do texto */
-    padding: 1px 1px; /* Reduz o padding para diminuir a altura */
+    font-size: 1px;
+    padding: 1px 1px;
     width: 1px;
     height: 1px;
-    bottom: 1px; /* Ajusta para mais próximo do canto inferior */
-    left: 1px; /* Ajusta para mais próximo do canto esquerdo */
+    bottom: 1px;
+    left: 1px;
     position: absolute;
 }
\ No newline at end of file
