Created
June 19, 2025 12:09
-
-
Save aldoyh/b9f717103f7da8ff8b78f5ea40c146cd to your computer and use it in GitHub Desktop.
# My Personal Dashboard
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Personal Dashboard</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script src="script.js" defer></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Personal Dashboard</h1> | |
| <button id="theme-toggle">Toggle Dark Mode</button> | |
| </header> | |
| <main> | |
| <!-- All cards go here (as described in the previous message) --> | |
| </main> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.getElementById('theme-toggle').addEventListener('click', () => { | |
| document.body.classList.toggle('dark-mode'); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f0f0f0; | |
| color: #333; | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| } | |
| h1 { | |
| margin: 0; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| border: none; | |
| background-color: #007bff; | |
| color: #fff; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #0056b3; | |
| } | |
| main { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| } | |
| .card { | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .status { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| margin-right: 10px; | |
| } | |
| .status-indicator.green { | |
| background-color: #28a745; | |
| } | |
| .status-indicator.yellow { | |
| background-color: #ffc107; | |
| } | |
| .status-indicator.red { | |
| background-color: #dc3545; | |
| } | |
| .toolbar button { | |
| margin-right: 10px; | |
| } | |
| .toolbar button:last-child { | |
| margin-right: 0; | |
| } | |
| .dark-mode { | |
| background-color: #333; | |
| color: #f0f0f0; | |
| } | |
| .dark-mode .card { | |
| background-color: #444; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .dark-mode button { | |
| background-color: #0056b3; | |
| } | |
| .dark-mode button:hover { | |
| background-color: #003f7f; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment