frontend: add navbar

2025-11-02 13:02:45 +02:00 · 2025-11-02 13:02:45 +02:00 · 0edcae1a24
commit 0edcae1a24
parent 327ab8592a
3 changed files with 231 additions and 78 deletions
--- 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"
--- 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 */
+  }
 }
--- 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 (
    <>
      <Snowflakes />
      <InitialSetup />
+
+      <button onClick={toggleNav} className="nav-toggle">
+        {isNavOpen ? '❌' : 'Меню 📂'}
+      </button>
+
+      <nav className={isNavOpen ? 'open' : ''}>
+        <ul>
+          <li>
+            <a href="#greeting">Приглашение</a>
+          </li>
+          <li>
+            <a href="#hosting">Поселение</a>
+          </li>
+          <li>
+            <a href="#program">Программа</a>
+          </li>
+        </ul>
+      </nav>
+
+      <div id="greeting">
        <Greeting />
-      <br/>
+      </div>
+      <div id="hosting">
        <Hosting />
+      </div>
+      <div id="program">
        <Program />
+      </div>
    </>
-  )
+  );
 }

-export default App
+export default App;