frontend: add hosting tablr scroll indicator

backend/src/server.py

@@ -18,7 +18,7 @@ app.config['JSON_AS_ASCII'] = False  # Ensures non-ASCII characters are preserve
 logging.basicConfig(level=logging.INFO)
 allowed_origins = [
     "https://nyipyatki.davydovcloud.com",
-    "https://nyipyatki-dev.davydovcloud.com",
+    "http://192.168.100.*",
 ]
 CORS(app, resources={r"*": {"origins": allowed_origins}})  # Only allow example.com
 database = DBClient(app)

backend/src/user.py

@@ -78,10 +78,10 @@ def registerUserEndpoints(app, database):
         data = request.json
         token = data.get('token')
         user_name = data.get('userName')
-        query = "SELECT * FROM sessions WHERE Token=%s AND Name=%s"
+        query = "SELECT * FROM sessions WHERE Token=%s"
         try:
-            result = database.query(query, params=(token, user_name))
+            result = database.query(query, params=(token,))
             app.logger.info(f'Got result: {result}')
-            return jsonify(tokenValid=bool(result)), 200
+            return jsonify(userName=result[0][1], tokenValid=True), 200
         except Exception as e:
             return jsonify(success=False, message=str(e)), 500

frontend/fonts.css

@@ -0,0 +1,2 @@
+
+

frontend/src/App.css

@@ -1,19 +1,65 @@
+/* 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-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-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 */
+}
+
 #root {
     width: 100%;
-    max-width: 1280px;
     text-align: center; /* Centered text alignment */
 }
 
 /* Overall Body Style */
 body {
     background-color: #ffffff; /* Light background for contrast */
-    color: #4b2e2e; /* Darker red brown for readability */
-    font-family: 'Arial', sans-serif;
+    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 */
     padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
+.scroll-instruction {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    body {
+        font-size: 1em;
+    }
+}
+
+@media (max-width: 375px) {
+    .scroll-instruction {
+        display: block;
+    }
+}
+
+
 /* Header Style */
 header {
     background-color: #a41e34; /* Christmas red */
@@ -26,6 +72,10 @@ header h1 {
     font-size: 2.5em;
 }
 
+h1 {
+    font-family: 'Pomelo', sans-serif;
+}
+
 /* Section Style */
 section {
     background-color: #e4f7e0; /* Light green background */
@@ -39,7 +89,6 @@ button {
     background-color: #b77de5; /* Purple with a slight festive flair */
     color: white;
     border: none;
-    padding: 10px 20px;
     border-radius: 5px;
     cursor: pointer;
     font-size: 1.1em;
@@ -65,39 +114,37 @@ footer {
     position: relative;
 }
 
-/* Snowflakes Background */
-.snowflakes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url('./assets/snowflakes.png'); /* Snowflakes pattern */
+
+.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 */
 }
 
 /* General table styles */
 table {
-    width: 100%;
+    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;
-    margin: 20px 0;
-    font-size: 1em;
-    font-family: 'Arial', sans-serif;
-    text-align: center; /* Centered table text */
+    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 */
     color: white;
     padding: 10px 15px;
-    border-bottom: 3px solid #b7c9b5; /* 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: #e4f7e0; /* Light green background for cells */
+    background-color: #e0e9f7; /* Light green background for cells */
 }
 
 /* Zebra striping for table rows */

frontend/src/App.tsx

@@ -3,17 +3,17 @@ 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() {
   return (
     <>
-    <div className='snowflakes'>
+      <Snowflakes />
       <InitialSetup/>
       <Greeting/>
       <br/>
       <Hosting/>
       <Program/>
-      </div>
     </>
   )
 }

frontend/src/components/CenteredConatiner.css

@@ -0,0 +1,26 @@
+.centered-container {
+    display: flex;               /* Use Flexbox for centering */
+    justify-content: center;     /* Center horizontally */
+    align-items: center;         /* Center vertically */
+    /* height: 100vh;              Full height of the viewport */
+    width: 100%;                 /* Full width of the viewport */
+    overflow-x: auto;            /* Enables horizontal scrolling if necessary */
+    margin: 20px 0;             /* Spacing above and below the container */
+    background-color: rgba(0, 42, 255, 0.6);
+    border-radius: 20px;
+}
+
+.inner-container {
+    width: 80%;                  /* Set inner container width to 80% */
+    max-width: 1000px;          /* Optional: limit maximum width */
+    box-sizing: border-box;      /* Include padding/borders in width calculation */
+    padding: 20px;               /* Padding for inner content */
+    text-align: center;          /* Center text inside the inner container */
+}
+
+/* Media query for responsive design */
+@media (max-width: 768px) {
+    .inner-container {
+        width: 100%;             /* Set inner container width to 100% on mobile */
+    }
+}

frontend/src/components/ChildrenContainer.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import './CenteredConatiner.css'
+
+interface CenteredContainerProps {
+    children: React.ReactNode; // Define children prop type
+}
+
+const CenteredContainer: React.FC<CenteredContainerProps> = ({ children }) => {
+    return (
+        <div className="centered-container">
+            <div className="inner-container">
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default CenteredContainer;

frontend/src/components/Greeting.tsx

@@ -1,4 +1,5 @@
 import { useCookies } from "react-cookie";
+import CenteredContainer from "./ChildrenContainer";
 
 function Greeting() {
     const [cookie] = useCookies<string>(['userName'])
@@ -6,16 +7,18 @@ function Greeting() {
 
     return (
         <>
-            <h1>Приглашение на Новый год 2025-2026 🎄</h1>
-            <p className="mainText">
-                <h3>
-                {userName ? <>{userName}</> : <>Дорогая пятка!</>}
-                ! 🦶
-                </h3>
-                Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
+            <CenteredContainer>
+                <h1>Приглашение на Новый год 2025-2026 🎄</h1>
+                <p className="mainText">
+                    <h3>
+                        {userName ? <>{userName}</> : <>Дорогая пятка!</>}
+                        ! 🦶
+                    </h3>
+                    Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
 
-                Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
-            </p>
+                    Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
+                </p>
+            </CenteredContainer>
         </>
     )
 }

frontend/src/components/Hosting.tsx

@@ -1,6 +1,7 @@
 import useFetchHosting from "../utils/fetchHosting";
 import { useNotification } from "../NotificationContext";
 import { useCookies } from "react-cookie";
+import CenteredContainer from "./ChildrenContainer";
 
 
 interface ReserveButtonProps {
@@ -28,7 +29,7 @@ const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
     return (
         <>
             <button onClick={handleReserve} disabled={isReserved}>
-                {isReserved ? `Занято гостем ${reservedBy}` : 'Занять'}
+                {isReserved ? `${reservedBy}` : 'Занять'}
             </button>
         </>
     );
@@ -39,19 +40,20 @@ function Hosting() {
     const { data, error, loading, update } = useFetchHosting();
     return (
         <>
-            <h2>Поселение</h2>
-            <p>
-                Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
-                вы не хотите тесниться, то рядом с нами есть
-                <a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
-                <a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
-                (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
-                Спальные места:
-            </p>
+            <CenteredContainer>
+                <h2>Поселение</h2>
+                <p>
+                    Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
+                    вы не хотите тесниться, то рядом с нами есть
+                    <a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
+                    <a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
+                    (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
+                    Спальные места:
+                </p>
             {loading && <div>Loading...</div>}
             {error && <div>Error</div>}
             {data && (
-                <div>
+                <div className="table-wrapper scroll-indicator">
                     <table>
                         <thead>
                             <tr>
@@ -70,8 +72,10 @@ function Hosting() {
                             ))}
                         </tbody>
                     </table>
+                    <p className="scroll-instruction">Таблицу можно скроллить</p>
                 </div>
             )}
+            </CenteredContainer>
             <br />
         </>
     );

frontend/src/components/InitialSetup.tsx

@@ -6,8 +6,8 @@ import { useNotification } from '../NotificationContext';
 
 const InitialSetup = () => {
     const [cookie, setCookie] = useCookies();
-    const [selectedName, setSelectedName] = useState<string | undefined>(cookie.userName);
-    const [token] = useState<string | undefined>(cookie.apiToken)
+    const [selectedName, setSelectedName] = useState<string | undefined>(undefined);
+    //const [token] = useState<string | undefined>(cookie.apiToken)
     const [isSubmitted, setIsSubmitted] = useState(false);
     const [password, setPassword] = useState('');
     const [isPasswordSet, setIsPasswordSet] = useState(false); // To track if password is set
@@ -27,13 +27,14 @@ const InitialSetup = () => {
         checkUserPassword(name);
     };
 
+    const validateToken = async () => {
+        const isTokenValid = await validToken(cookie.apiToken);
+        setIsSubmitted(isTokenValid);
+    };
+
     useEffect(() => {
-        const validateToken = async () => {
-            const isTokenValid = await validToken(token, selectedName);
-            setIsSubmitted(isTokenValid);
-        };
-        if (token !== undefined && selectedName !== undefined) validateToken();
-    }, []); 
+        if (cookie.apiToken !== undefined) validateToken();
+    }, [cookie.apiToken]); 
 
 
     const handlePasswordCreate = async () => {
@@ -42,7 +43,7 @@ const InitialSetup = () => {
             notify(message, 'error')
             return
         }
-        setIsSubmitted(true);
+        
     };
 
     const handleSignIn = async () => {
@@ -51,7 +52,7 @@ const InitialSetup = () => {
             notify('Не удалось войти. Может пароль не тот?', 'error')
             return
         }
-        setIsSubmitted(true);
+        validateToken()
     };
 
     

frontend/src/components/Program.tsx

@@ -1,88 +1,100 @@
+import CenteredContainer from "./ChildrenContainer";
+
 const Program = () => {
   return (
-    <div>
+    <CenteredContainer>
       <h2>Программа</h2>
 
       <h3>30 декабря</h3>
-      <table>
-        <thead>
-          <tr>
-            <th>Время</th>
-            <th>Действие</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>15-18</td>
-            <td>Гости приезжают и селятся</td>
-          </tr>
-          <tr>
-            <td>18-19</td>
-            <td>Ужин</td>
-          </tr>
-          <tr>
-            <td>19-N/A</td>
-            <td>Отдых и заготовки к кануну Нового Года</td>
-          </tr>
-        </tbody>
-      </table>
+      <div className="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th>Время</th>
+              <th>Действие</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>15-18</td>
+              <td>Гости приезжают и селятся</td>
+            </tr>
+            <tr>
+              <td>18-19</td>
+              <td>Ужин</td>
+            </tr>
+            <tr>
+              <td>19-N/A</td>
+              <td>Отдых и заготовки к кануну Нового Года</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
 
       <h3>31 декабря</h3>
-      <table>
-        <thead>
-          <tr>
-            <th>Время</th>
-            <th>Действие</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>07-10</td>
-            <td>Утро, завтрак</td>
-          </tr>
-          <tr>
-            <td>11-14</td>
-            <td>Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед</td>
-          </tr>
-          <tr>
-            <td>14-19</td>
-            <td>Готовим ужин, чиллим</td>
-          </tr>
-          <tr>
-            <td>19-23:59</td>
-            <td>Ужин, отдых, разговоры, игры</td>
-          </tr>
-        </tbody>
-      </table>
+      <div className="table-wrapper">
+
+        <table>
+          <thead>
+            <tr>
+              <th>Время</th>
+              <th>Действие</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>07-10</td>
+              <td>Утро, завтрак</td>
+            </tr>
+            <tr>
+              <td>11-14</td>
+              <td>Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед</td>
+            </tr>
+            <tr>
+              <td>14-19</td>
+              <td>Готовим ужин, чиллим</td>
+            </tr>
+            <tr>
+              <td>19-23:59</td>
+              <td>Ужин, отдых, разговоры, игры</td>
+            </tr>
+          </tbody>
+        </table>
+
+      </div>
 
       <h3>1 января</h3>
-      <table>
-        <thead>
-          <tr>
-            <th>Время</th>
-            <th>Действие</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>00-N/A</td>
-            <td>🎄 ☃️ 🍾 🥂 🎇 🎆</td>
-          </tr>
-          <tr>
-            <td>07-12</td>
-            <td>Утро, завтрак</td>
-          </tr>
-          <tr>
-            <td>12-15</td>
-            <td>Сауна/Отдых</td>
-          </tr>
-          <tr>
-            <td>15-N/A</td>
-            <td>Кто-то остается, кто-то собирается домой</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+      <div className="table-wrapper">
+
+        <table>
+          <thead>
+            <tr>
+              <th>Время</th>
+              <th>Действие</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>00-N/A</td>
+              <td>🎄 ☃️ 🍾 🥂 🎇 🎆</td>
+            </tr>
+            <tr>
+              <td>07-12</td>
+              <td>Утро, завтрак</td>
+            </tr>
+            <tr>
+              <td>12-15</td>
+              <td>Сауна/Отдых</td>
+            </tr>
+            <tr>
+              <td>15-N/A</td>
+              <td>Кто-то остается, кто-то собирается домой</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </CenteredContainer>
   );
 };
 

frontend/src/components/Snowflakes.css

@@ -0,0 +1,39 @@
+.snowflakes {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Make snowflakes non-interactive */
+    overflow: hidden; /* Hide overflow */
+    z-index: 1000; /* Ensure snowflakes are above other content */
+}
+
+.snowflake {
+    position: absolute;
+    top: -10%; /* Start above the top of the screen */
+    color: white; /* Snowflake color */
+    font-size: 1em; /* Size of the snowflake; adjust as needed */
+    opacity: 0.8; /* Transparency */
+    animation: fall linear infinite; /* Apply the fall animation */
+}
+
+/* Falling animation */
+@keyframes fall {
+    0% {
+        transform: translateX(0) translateY(0); /* Start position */
+    }
+    100% {
+        transform: translateX(-5vw) translateY(120vh); /* End position */
+        opacity: 0.1; /* Optional: fade out */
+    }
+}
+
+/* Randomize snowflake size and animation */
+.snowflake:nth-child(1) { animation-duration: 6s; left: 10%; font-size: 0.8em;}
+.snowflake:nth-child(2) { animation-duration: 8s; left: 20%; font-size: 3em;}
+.snowflake:nth-child(3) { animation-duration: 5s; left: 30%; font-size: 4em;}
+.snowflake:nth-child(4) { animation-duration: 7s; left: 40%; font-size: 0.9em;}
+.snowflake:nth-child(5) { animation-duration: 10s; left: 50%; font-size: 2em;}
+
+/* Add more child selectors for additional snowflakes */

frontend/src/components/Snowflakes.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Snowflakes.css';
+
+const Snowflakes: React.FC = () => {
+    // Adjust the number of snowflakes as needed
+    const snowflakeCount = Array.from({ length: 50 });
+
+    return (
+        <div className="snowflakes">
+            {snowflakeCount.map((_, index) => (
+                <div 
+                    key={index} 
+                    className="snowflake"
+                    style={{
+                        left: `${Math.random() * 100}vw`, // Random position across the full width
+                        animationDuration: `${Math.random() * 3 + 2}s`, // Random fall duration between 2s and 5s
+                    }}
+                >
+                    ❄️
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default Snowflakes;

frontend/src/index.css

@@ -1,17 +0,0 @@
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-  overflow-x: hidden;
-}

frontend/src/utils/fetchUser.tsx

@@ -3,7 +3,8 @@ import { API_URL } from '../constants/constants';
 import { hashPassword } from './hashPassword';
 
 const useFetchUser = () => {
-    const [, setCookie] = useCookies(['apiToken']);
+    const [, setApiCookie] = useCookies(['apiToken']);
+    const [, setUserNameCookie] = useCookies(['userName'])
 
     const userSet = async (userName: string): Promise<boolean> => {
         try {
@@ -41,7 +42,7 @@ const useFetchUser = () => {
             const data = await response.json();
 
             if (data.success) {
-                setCookie('apiToken', data.token, { path: '/' });
+                setApiCookie('apiToken', data.token, { path: '/' });
                 console.log(`Password created for ${userName}`);
                 return ''; // Password creation success
             }
@@ -70,7 +71,7 @@ const useFetchUser = () => {
             const data = await response.json();
 
             if (data.token) {
-                setCookie('apiToken', data.token, { path: '/' });
+                setApiCookie('apiToken', data.token, { path: '/' });
                 console.log(`User ${userName} signed in.`);
                 return true; // Sign-in success
             }
@@ -81,7 +82,7 @@ const useFetchUser = () => {
         }
     };
 
-    const validToken = async (token: string | undefined, userName: string | undefined): Promise<boolean> => {
+    const validToken = async (token: string | undefined): Promise<boolean> => {
         try {
             const response = await fetch(`${API_URL}/login/validateToken`, {
                 method: 'POST',
@@ -89,14 +90,17 @@ const useFetchUser = () => {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    token,
-                    userName
+                    token
                 }),
             });
 
             if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
             const data = await response.json();
 
+            if (!data.userName) throw new Error(`Could not retrieve userName from token`);
+
+            setUserNameCookie('userName', data.userName, { path: '/' });
+
             return data.tokenValid
         } catch (error) {
             console.error('Error validating token:', error);