diff --git a/Assets/smily.png b/Assets/smily.png new file mode 100644 index 0000000..15367f5 Binary files /dev/null and b/Assets/smily.png differ diff --git a/index.html b/index.html index d50e5bb..3bb460b 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,44 @@ - FumbleUpon + FumbleAround +
- +
- - + +
+
+ +
+ +
+ + +
@@ -41,6 +68,36 @@ darkModeToggle.textContent = isDark ? '☀️' : '🌙'; localStorage.setItem('darkMode', isDark); }); + + // Add GitHub button click handler + document.getElementById('githubButton').addEventListener('click', () => { + window.open('https://git.mauix.bio/michael/FumbleAround', '_blank'); + }); + + // Add donate button click handler + document.getElementById('donateButton').addEventListener('click', () => { + window.open('https://wiby.me/donate/', '_blank'); + }); + + // Add help button click handler + const modal = document.getElementById('helpModal'); + const helpButton = document.getElementById('helpButton'); + const closeButton = document.querySelector('.close-button'); + + helpButton.addEventListener('click', () => { + modal.classList.add('show'); + }); + + closeButton.addEventListener('click', () => { + modal.classList.remove('show'); + }); + + // Close modal when clicking outside + window.addEventListener('click', (event) => { + if (event.target === modal) { + modal.classList.remove('show'); + } + }); \ No newline at end of file diff --git a/styles.css b/styles.css index b95a728..21c716a 100644 --- a/styles.css +++ b/styles.css @@ -27,6 +27,53 @@ header { font-weight: bold; color: #ff4500; transition: color 0.3s ease; + display: flex; + align-items: center; + gap: 8px; +} + +.logo-icon { + width: 48px; + height: 48px; + object-fit: contain; +} + +.header-buttons { + display: flex; + gap: 2rem; + align-items: center; +} + +.social-buttons { + display: flex; + gap: 1rem; + align-items: center; +} + +.app-controls { + display: flex; + align-items: center; + background: #f0f0f0; + padding: 4px; + border-radius: 25px; + gap: 8px; +} + +.dark-mode .app-controls { + background: #2a2a2a; +} + +#darkModeToggle { + padding: 8px; + background-color: transparent; + border: none; + font-size: 20px; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.2s; } #fumbleButton { @@ -34,7 +81,7 @@ header { background-color: #ff4500; color: white; border: none; - border-radius: 25px; + border-radius: 20px; font-size: 16px; font-weight: bold; cursor: pointer; @@ -64,17 +111,10 @@ main { border: none; } -.header-buttons { - display: flex; - gap: 1rem; - align-items: center; -} - -#darkModeToggle { +#githubButton { padding: 8px; background-color: transparent; border: none; - font-size: 20px; cursor: pointer; border-radius: 50%; display: flex; @@ -83,10 +123,67 @@ main { transition: transform 0.2s; } -#darkModeToggle:hover { +#githubButton svg { + width: 24px; + height: 24px; + color: #333; + transition: color 0.3s ease; +} + +.dark-mode #githubButton svg { + color: #fff; +} + +#githubButton:hover { transform: scale(1.1); } +#githubButton:active { + transform: scale(0.95); +} + +#donateButton { + padding: 8px; + background-color: transparent; + border: none; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.2s; + font-size: 20px; +} + +#donateButton:hover { + transform: scale(1.1); +} + +#donateButton:active { + transform: scale(0.95); +} + +#helpButton { + padding: 8px; + background-color: transparent; + border: none; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: transform 0.2s; + font-size: 20px; +} + +#helpButton:hover { + transform: scale(1.1); +} + +#helpButton:active { + transform: scale(0.95); +} + /* Dark mode styles - simplified to only affect header */ .dark-mode header { background-color: #1a1a1a; @@ -119,4 +216,71 @@ body { /* Remove these styles */ /* background-color: #1a1a1a; */ /* color: #ffffff; */ +} + +.modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); + z-index: 2000; + transition: background-color 0.3s ease; +} + +.modal-content { + background-color: #fff; + margin: -500px auto 0; + padding: 20px; + width: 80%; + max-width: 500px; + border-radius: 8px; + position: relative; + transition: margin 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); + transform: perspective(1000px) rotateX(5deg); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); +} + +.dark-mode .modal-content { + background-color: #1a1a1a; + color: #fff; +} + +.modal.show { + display: block; + background-color: rgba(0, 0, 0, 0.5); +} + +.modal.show .modal-content { + margin-top: 100px; + transform: perspective(1000px) rotateX(0); +} + +.close-button { + position: absolute; + right: 20px; + top: 10px; + font-size: 24px; + cursor: pointer; + color: #666; +} + +.dark-mode .close-button { + color: #999; +} + +.modal-content h2 { + margin-bottom: 15px; + color: #ff4500; +} + +.dark-mode .modal-content h2 { + color: #ff6b4a; +} + +.modal-content p { + margin-bottom: 15px; + line-height: 1.5; } \ No newline at end of file