From 0edcae1a24860c91fa7f3af6c78641b402035fd0 Mon Sep 17 00:00:00 2001 From: tylen Date: Sun, 2 Nov 2025 13:02:45 +0200 Subject: [PATCH] frontend: add navbar --- frontend/package-lock.json | 18 +-- frontend/src/App.css | 234 ++++++++++++++++++++++++++++--------- frontend/src/App.tsx | 57 ++++++--- 3 files changed, 231 insertions(+), 78 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 16d5099..223e3a4 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3149,14 +3149,14 @@ } }, "node_modules/tinyglobby": { - "version": "0.2.14", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", - "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==", + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", "dev": true, "license": "MIT", "dependencies": { - "fdir": "^6.4.4", - "picomatch": "^4.0.2" + "fdir": "^6.5.0", + "picomatch": "^4.0.3" }, "engines": { "node": ">=12.0.0" @@ -3324,9 +3324,9 @@ } }, "node_modules/vite": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz", - "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==", + "version": "7.1.12", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz", + "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==", "dev": true, "license": "MIT", "dependencies": { @@ -3335,7 +3335,7 @@ "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", - "tinyglobby": "^0.2.14" + "tinyglobby": "^0.2.15" }, "bin": { "vite": "bin/vite.js" diff --git a/frontend/src/App.css b/frontend/src/App.css index 7197dbf..d7a866a 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,42 +1,62 @@ /* fonts.css */ @font-face { - font-family: 'Plovdiv'; /* Font family name */ - src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Bold.otf') format('opentype'); /* Regular style */ - font-weight: bold; /* Standard weight */ - font-style: normal; /* Standard style */ + font-family: 'Plovdiv'; + /* Font family name */ + src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Bold.otf') format('opentype'); + /* Regular style */ + font-weight: bold; + /* Standard weight */ + font-style: normal; + /* Standard style */ } @font-face { - font-family: 'Plovdiv'; /* Same font family name */ - src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Regular.otf') format('opentype'); /* Bold style */ - font-weight: normal; /* Bold weight */ - font-style: normal; /* Standard style */ + font-family: 'Plovdiv'; + /* Same font family name */ + src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Regular.otf') format('opentype'); + /* Bold style */ + font-weight: normal; + /* Bold weight */ + font-style: normal; + /* Standard style */ } @font-face { - font-family: 'Pomelo'; /* Name of the font */ - src: url('./assets/fonts/Pomelo/PomeloRegular.ttf') format('truetype'); /* Path to the TTF file */ - font-weight: normal; /* Standard weight */ - font-style: normal; /* Standard style */ + font-family: 'Pomelo'; + /* Name of the font */ + src: url('./assets/fonts/Pomelo/PomeloRegular.ttf') format('truetype'); + /* Path to the TTF file */ + font-weight: normal; + /* Standard weight */ + font-style: normal; + /* Standard style */ } #root { width: 100%; - text-align: center; /* Centered text alignment */ + text-align: center; + /* Centered text alignment */ } /* Overall Body Style */ body { - background-color: #ffffff; /* Light background for contrast */ - background-image: url('./assets/snowflakes.png'); /* Background image */ - background-size: cover; /* Cover the entire screen */ - background-position: center; /* Center the image */ - background-repeat: no-repeat; /* Prevent repeating */ - color: #ffffff; /* Darker red brown for readability */ + background-color: #ffffff; + /* Light background for contrast */ + background-image: url('./assets/snowflakes.png'); + /* Background image */ + background-size: cover; + /* Cover the entire screen */ + background-position: center; + /* Center the image */ + background-repeat: no-repeat; + /* Prevent repeating */ + color: #ffffff; + /* Darker red brown for readability */ font-family: 'Plovdiv', sans-serif; font-size: 1.5em; margin: 0; - text-align: center; /* Centered text alignment */ + text-align: center; + /* Centered text alignment */ padding: 20px; display: flex; justify-content: center; @@ -62,10 +82,12 @@ body { /* Header Style */ header { - background-color: #a41e34; /* Christmas red */ + background-color: #a41e34; + /* Christmas red */ color: white; padding: 20px 0; - border-bottom: 5px solid #b7c9b5; /* Light green border */ + border-bottom: 5px solid #b7c9b5; + /* Light green border */ } header h1 { @@ -76,9 +98,15 @@ h1 { font-family: 'Pomelo', sans-serif; } +a { + color: #ffffff; +} + + /* Section Style */ section { - background-color: #e4f7e0; /* Light green background */ + background-color: #e4f7e0; + /* Light green background */ padding: 20px; border-radius: 10px; margin: 15px 0; @@ -86,103 +114,197 @@ section { /* Festive Buttons */ button { - background-color: #b77de5; /* Purple with a slight festive flair */ + background-color: #b77de5; + /* Purple with a slight festive flair */ color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1em; - display: inline-block; /* Centers button in the container */ + display: inline-block; + /* Centers button in the container */ } button:hover { - background-color: #9b6bb5; /* Darker purple on hover */ + background-color: #9b6bb5; + /* Darker purple on hover */ } button:disabled { - background-color: #d3d3d3; /* Light gray for disabled button */ - color: #a9a9a9; /* Darker gray for text */ - cursor: not-allowed; /* Show not-allowed cursor */ + background-color: #d3d3d3; + /* Light gray for disabled button */ + color: #a9a9a9; + /* Darker gray for text */ + cursor: not-allowed; + /* Show not-allowed cursor */ } /* Footer Style */ footer { - text-align: center; /* Centered */ + text-align: center; + /* Centered */ padding: 20px; - background-color: #a41e34; /* Same red as header */ + background-color: #a41e34; + /* Same red as header */ color: white; position: relative; } .table-wrapper { - width: 100%; /* Full width of the viewport */ - text-align: center; /* Center the text (optional for non-text elements) */ - overflow-x: auto; /* Enables horizontal scrolling if necessary */ + width: 100%; + /* Full width of the viewport */ + text-align: center; + /* Center the text (optional for non-text elements) */ + overflow-x: auto; + /* Enables horizontal scrolling if necessary */ } /* General table styles */ table { - width: 100%; /* Set table width to 80% to create space on sides */ - max-width: 100%; /* Prevents exceeding the parent's width */ + width: 100%; + /* Set table width to 80% to create space on sides */ + max-width: 100%; + /* Prevents exceeding the parent's width */ color: black; border-collapse: collapse; - text-align: center; /* Centered text in table */ - margin: 0 auto; /* Center the table within the wrapper */ + text-align: center; + /* Centered text in table */ + margin: 0 auto; + /* Center the table within the wrapper */ } /* Table header styles */ th { - background-color: #060698; /* Christmas red */ + background-color: #060698; + /* Christmas red */ color: white; padding: 10px 15px; - border-bottom: 3px solid #e0e9f7; /* Light green border for header */ + border-bottom: 3px solid #e0e9f7; + /* Light green border for header */ } /* Table cell styles */ td { border: 1px solid #ddd; - padding: 10px 15px; /* Added padding for better spacing */ - background-color: #e0e9f7; /* Light green background for cells */ + padding: 10px 15px; + /* Added padding for better spacing */ + background-color: #e0e9f7; + /* Light green background for cells */ } /* Zebra striping for table rows */ tr:nth-child(even) { - background-color: #f9f9f9; /* Light gray for even rows */ + background-color: #f9f9f9; + /* Light gray for even rows */ } /* Hover effect for rows */ tr:hover { - background-color: #c28f8f; /* Softer red when hovering */ + background-color: #c28f8f; + /* Softer red when hovering */ } /* Additional table styling for Christmas theme */ table { - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */ - border-radius: 8px; /* Rounded corners */ - overflow: hidden; /* Ensures border radius works */ + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + /* Shadow for depth */ + border-radius: 8px; + /* Rounded corners */ + overflow: hidden; + /* Ensures border radius works */ } /* Add some festive decorations */ th::after { - content: '🎄'; /* Small Christmas tree icon in the header */ + content: '🎄'; + /* Small Christmas tree icon in the header */ margin-left: 10px; - font-size: 1.2em; /* Slightly larger */ + font-size: 1.2em; + /* Slightly larger */ } td { - position: relative; /* For potential decorations */ + position: relative; + /* For potential decorations */ } td::before { - content: ''; /* Placeholder for decoration */ + content: ''; + /* Placeholder for decoration */ position: absolute; - background-image: url('path/to/snowflake-icon.png'); /* Snowflake icon */ - width: 16px; /* Adjust as necessary */ + background-image: url('path/to/snowflake-icon.png'); + /* Snowflake icon */ + width: 16px; + /* Adjust as necessary */ height: 16px; - opacity: 0.1; /* Very subtle */ - top: 5px; /* Position it nicely */ + opacity: 0.1; + /* Very subtle */ + top: 5px; + /* Position it nicely */ left: 5px; - pointer-events: none; /* Ignore mouse events */ + pointer-events: none; + /* Ignore mouse events */ +} + +nav { + top: 0; /* Align it to the top */ + background-color: rgba(0, 42, 255, 0.6);; /* Background color */ + border-radius: 20px; + z-index: 1000; /* Make sure it stays above other content */ + padding: 1rem; +} + +nav ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; /* Use flex to align items */ + justify-content: space-around; /* Space the items evenly */ +} + +nav li { + display: inline; +} + +nav a { + color: white; + text-decoration: none; +} + +nav a:hover { + text-decoration: underline; +} + +.nav-toggle { + display: none; +} + +@media (max-width: 768px) { +.nav-toggle { + display: block; + background-color: rgba(0, 42, 255, 0.6); /* Button color */ + border: none; + padding: 10px 20px; + cursor: pointer; + margin-bottom: 20px; +} + nav { + display: none; /* Hide by default for mobile */ + flex-direction: column; /* Stack vertically */ + } + + nav.open { + display: flex; /* Show when open */ + } + + nav ul { + flex-direction: column; /* Stack menu items */ + align-items: center; + } + + nav li { + margin: 10px 0; /* Space between items */ + } } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6c755e1..349f8c4 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,21 +1,52 @@ -import './App.css' -import Greeting from './components/Greeting' -import Hosting from './components/Hosting' -import InitialSetup from './components/InitialSetup' -import Program from './components/Program' -import Snowflakes from './components/Snowflakes' +import React, { useState } from 'react'; +import './App.css'; +import Greeting from './components/Greeting'; +import Hosting from './components/Hosting'; +import InitialSetup from './components/InitialSetup'; +import Program from './components/Program'; +import Snowflakes from './components/Snowflakes'; function App() { + const [isNavOpen, setIsNavOpen] = useState(false); + + const toggleNav = () => { + setIsNavOpen(!isNavOpen); + }; + return ( <> - - -
- - + + + + + + +
+ +
+
+ +
+
+ +
- ) + ); } -export default App +export default App;