frontend: add Loading

frontend: create ayedance in greeting
frontend: add navbar
2025-11-02 13:50:44 +02:00 · 2025-11-02 13:34:03 +02:00 · 2025-11-02 13:02:45 +02:00
9 changed files with 338 additions and 81 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,54 @@
-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';
+import { FullScreenLoading } from './components/Loading';

 function App() {
+  const [isNavOpen, setIsNavOpen] = useState(false);
+
+  const toggleNav = () => {
+    setIsNavOpen(!isNavOpen);
+  };
+
  return (
    <>
+      <FullScreenLoading/>
      <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;
--- a/frontend/src/components/Greeting.tsx
+++ b/frontend/src/components/Greeting.tsx
@ -1,9 +1,16 @@
 import { useCookies } from "react-cookie";
 import CenteredContainer from "./ChildrenContainer";
+import useFetchUser from "../utils/fetchUser";

 function Greeting() {
    const [cookie] = useCookies<string>(['userName'])
    const userName = cookie.userName;
+    const { updateAttendance } = useFetchUser()
+
+    const handleUpdate = async (status: boolean) => {
+        await updateAttendance(status)
+        window.location.reload();
+    }

    return (
        <>
@ -17,10 +24,27 @@ function Greeting() {
                    Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!

                    Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
+                <h3>Присоеденишься?</h3>
+                <p>(Можно и потом ответить)</p>
+                <button style={localStyles.buttonOk} onClick={() => handleUpdate(true)}>Да!</button>
+                <button style={localStyles.buttonNok}onClick={() => handleUpdate(false)}>Не смогу в этот раз</button>
                </p>
            </CenteredContainer>
        </>
    )
 }

+const localStyles = {
+    buttonOk: {
+        margin: '0.5em',
+        padding: '0.3em',
+        backgroundColor: 'green'
+    },
+    buttonNok: {
+        margin: '0.5em',
+        padding: '0.3em',
+        backgroundColor: 'red'
+    }
+}
+
 export default Greeting;
--- a/frontend/src/components/InitialSetup.tsx
+++ b/frontend/src/components/InitialSetup.tsx
@ -4,6 +4,7 @@ import { GUESTS } from '../constants/constants';
 import useFetchUser from '../utils/fetchUser'; // Import your custom hook
 import { useNotification } from '../NotificationContext';
 import ApologyMessage from './Attendance';
+import {Loading} from './Loading';

 const InitialSetup = () => {
    const [cookie, setCookie] = useCookies();
@ -14,7 +15,7 @@ const InitialSetup = () => {
    const [isPasswordSet, setIsPasswordSet] = useState(false); // To track if password is set
    const [userAttendance, setUserAttendance] = useState<boolean | null>(null);

-    const { userSet, passwordCreate, signUser, validToken, getAttendance } = useFetchUser(); // Destructure functions from the hook
+    const { userSet, passwordCreate, signUser, validToken, getAttendance, isLoading } = useFetchUser(); // Destructure functions from the hook
    const notify = useNotification();

    const checkUserPassword = async (name: string) => {
@ -76,6 +77,14 @@ const InitialSetup = () => {
        )
    }

+    if (isLoading) {
+        return (
+            <div style={styles.container}>
+                <Loading/>
+            </div>
+        )
+    }
+
    return (
        <div style={styles.container}>
            <h2 style={styles.title}>Выбери себя</h2>
--- a/frontend/src/components/Loading.css
+++ b/frontend/src/components/Loading.css
@ -0,0 +1,29 @@
+.spinner {
+    font-size: 100px; /* Adjust size as needed */
+    animation: spin 2s linear infinite; /* Spin animation */
+    position: fixed; /* Keep the snowflake in a fixed position */
+    top: 50%; /* Adjust vertical position */
+    left: 50%; /* Center horizontally */
+    transform: translateX(-50%); /* Center the snowflake */
+    z-index: 10000; /* Ensure it's above the full-screen loading */
+}
+
+/* Keyframes for spinning */
+@keyframes spin {
+    0% { transform: translateX(-50%) rotate(0deg); }
+    100% { transform: translateX(-50%) rotate(360deg); }
+}
+
+
+.full-screen {
+    display: flex; /* Use flexbox for centering */
+    align-items: center; /* Center vertically */
+    justify-content: center; /* Center horizontally */
+    height: 100vh; /* Full viewport height */
+    width: 100vw; /* Full viewport width */
+    background-color: rgba(4, 0, 0); /* Semi-transparent background */
+    position: fixed; /* Fix it in the viewport */
+    top: 0; 
+    left: 0; 
+    z-index: 9999; /* Ensure it's above other content */
+}
--- a/frontend/src/components/Loading.tsx
+++ b/frontend/src/components/Loading.tsx
@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import './Loading.css'; // Import CSS for styling
+
+export const Loading: React.FC = () => {
+    return (
+        <div className="spinner">
+            🎅🏻
+        </div>
+    );
+};
+
+export const FullScreenLoading: React.FC = () => {
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        // Set a timeout to change the loading state
+        const timer = setTimeout(() => {
+            setIsLoading(false);
+        }, 1000); // 1000 ms = 1 second
+
+        // Cleanup function to clear the timeout if the component unmounts
+        return () => clearTimeout(timer);
+    }, []); // Empty dependency array means it runs once on mount
+
+    if (!isLoading) {
+        return null;
+    }
+
+    return (
+        <div className="full-screen">
+            <Loading />
+        </div>
+    )
+}
--- a/frontend/src/components/Snowflakes.css
+++ b/frontend/src/components/Snowflakes.css
@ -6,7 +6,7 @@
    height: 100%;
    pointer-events: none; /* Make snowflakes non-interactive */
    overflow: hidden; /* Hide overflow */
-    z-index: 1000; /* Ensure snowflakes are above other content */
+    z-index: 998; /* Ensure snowflakes are above other content */
 }

 .snowflake {
--- a/frontend/src/utils/fetchUser.tsx
+++ b/frontend/src/utils/fetchUser.tsx
@ -1,14 +1,18 @@
 import { useCookies } from 'react-cookie';
 import { API_URL } from '../constants/constants';
 import { hashPassword } from './hashPassword';
+import { useState } from 'react';

 const useFetchUser = () => {
+    const [isLoading, setIsLoading] = useState(false)
    const [apiCookie, setApiCookie] = useCookies(['apiToken']);
    const [, setUserNameCookie] = useCookies(['userName'])

    const userSet = async (userName: string): Promise<boolean> => {
        try {
+            setIsLoading(true)
            const response = await fetch(`${API_URL}/users/isSet?userName=${encodeURIComponent(userName)}`);
+            setIsLoading(false)
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            const data = await response.json();
            return data; // Assuming the server returns true/false
@ -84,6 +88,7 @@ const useFetchUser = () => {

    const validToken = async (token: string | undefined): Promise<boolean> => {
        try {
+            setIsLoading(true)
            const response = await fetch(`${API_URL}/login/validateToken`, {
                method: 'POST',
                headers: {
@ -93,6 +98,7 @@ const useFetchUser = () => {
                    token
                }),
            });
+            setIsLoading(false)

            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            const data = await response.json();
@ -156,7 +162,7 @@ const useFetchUser = () => {
        }
    }

-    return { userSet, passwordCreate, signUser, validToken, updateAttendance, getAttendance };
+    return { userSet, passwordCreate, signUser, validToken, updateAttendance, getAttendance, isLoading };
 };

 export default useFetchUser;
Author	SHA1	Message	Date
tylen	cf9b0d53c1	frontend: add Loading	2025-11-02 13:50:44 +02:00
tylen	98e5ef06c0	frontend: create ayedance in greeting	2025-11-02 13:34:03 +02:00
tylen	0edcae1a24	frontend: add navbar	2025-11-02 13:02:45 +02:00