diff --git a/css/style.css b/css/style.css index 35ccf03..03c1bf1 100644 --- a/css/style.css +++ b/css/style.css @@ -312,10 +312,105 @@ body { background: rgba(255, 255, 255, 0.1); } +.start-button.active { + background: rgba(255, 255, 255, 0.15); +} + .start-button i { color: var(--accent); } +/* Start Menu */ +.start-menu { + position: absolute; + bottom: 55px; + left: 10px; + width: 280px; + background: rgba(15, 15, 35, 0.98); + backdrop-filter: blur(20px); + border-radius: 12px; + border: 1px solid var(--border); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); + display: none; + overflow: hidden; +} + +.start-menu.open { + display: block; + animation: slideUp 0.2s ease; +} + +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.start-menu-header { + padding: 20px; + background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%); + display: flex; + align-items: center; + gap: 12px; +} + +.start-menu-header i { + font-size: 32px; +} + +.start-menu-header span { + font-weight: 600; + font-size: 16px; +} + +.start-menu-items { + padding: 10px 0; +} + +.start-menu-item { + padding: 12px 20px; + cursor: pointer; + display: flex; + align-items: center; + gap: 12px; + transition: background 0.2s; +} + +.start-menu-item:hover { + background: rgba(255, 255, 255, 0.1); +} + +.start-menu-item i { + width: 20px; + color: var(--accent); +} + +.start-menu-footer { + padding: 15px 20px; + border-top: 1px solid var(--border); + display: flex; + gap: 20px; +} + +.start-menu-footer a { + color: var(--text-secondary); + text-decoration: none; + font-size: 13px; + display: flex; + align-items: center; + gap: 6px; + transition: color 0.2s; +} + +.start-menu-footer a:hover { + color: var(--accent); +} + .taskbar-items { flex: 1; display: flex; diff --git a/index.html b/index.html index 99cea2f..617da90 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,23 @@ Start +
+
+ + Greg Hendrickson +
+
+
About Me
+
Projects
+
Resume
+
Contact
+
Terminal
+
+ +
diff --git a/js/app.js b/js/app.js index 01d9d5c..668dbcd 100644 --- a/js/app.js +++ b/js/app.js @@ -12,6 +12,7 @@ class GregOS { this.bindIconClicks(); this.startClock(); this.setupTerminal(); + this.setupStartMenu(); } bindIconClicks() { @@ -211,6 +212,35 @@ class GregOS { setInterval(updateClock, 1000); } + setupStartMenu() { + const startButton = document.querySelector('.start-button'); + const startMenu = document.getElementById('start-menu'); + + startButton.addEventListener('click', (e) => { + e.stopPropagation(); + startMenu.classList.toggle('open'); + startButton.classList.toggle('active'); + }); + + // Close menu when clicking elsewhere + document.addEventListener('click', (e) => { + if (!startMenu.contains(e.target) && !startButton.contains(e.target)) { + startMenu.classList.remove('open'); + startButton.classList.remove('active'); + } + }); + + // Start menu item clicks + document.querySelectorAll('.start-menu-item').forEach(item => { + item.addEventListener('click', () => { + const windowId = item.dataset.window; + this.openWindow(windowId); + startMenu.classList.remove('open'); + startButton.classList.remove('active'); + }); + }); + } + setupTerminal() { document.addEventListener('keydown', (e) => { const input = document.getElementById('terminal-input');