add styling

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)

frontend/fonts.css

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

frontend/src/App.css

@@ -1,17 +1,52 @@
+/* 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;
+}
+
+@media (max-width: 768px) {
+    body {
+        font-size: 1em;
+    }
 }
 
 /* Header Style */
@@ -26,6 +61,10 @@ header h1 {
     font-size: 2.5em;
 }
 
+h1 {
+    font-family: 'Pomelo', sans-serif;
+}
+
 /* Section Style */
 section {
     background-color: #e4f7e0; /* Light green background */
@@ -39,7 +78,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 +103,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

@@ -7,13 +7,11 @@ import Program from './components/Program'
 function App() {
   return (
     <>
-    <div className='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,6 +7,7 @@ function Greeting() {
 
     return (
         <>
+            <CenteredContainer>
                 <h1>Приглашение на Новый год 2025-2026 🎄</h1>
                 <p className="mainText">
                     <h3>
@@ -16,6 +18,7 @@ function Greeting() {
 
                     Наши двери открыты с <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,6 +40,7 @@ function Hosting() {
     const { data, error, loading, update } = useFetchHosting();
     return (
         <>
+            <CenteredContainer>
                 <h2>Поселение</h2>
                 <p>
                     Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
@@ -51,7 +53,7 @@ function Hosting() {
             {loading && <div>Loading...</div>}
             {error && <div>Error</div>}
             {data && (
-                <div>
+                <div className="table-wrapper">
                     <table>
                         <thead>
                             <tr>
@@ -72,6 +74,7 @@ function Hosting() {
                     </table>
                 </div>
             )}
+            </CenteredContainer>
             <br />
         </>
     );

frontend/src/components/Program.tsx

@@ -1,9 +1,12 @@
+import CenteredContainer from "./ChildrenContainer";
+
 const Program = () => {
   return (
-    <div>
+    <CenteredContainer>
       <h2>Программа</h2>
 
       <h3>30 декабря</h3>
+      <div className="table-wrapper">
         <table>
           <thead>
             <tr>
@@ -26,8 +29,11 @@ const Program = () => {
             </tr>
           </tbody>
         </table>
+      </div>
 
       <h3>31 декабря</h3>
+      <div className="table-wrapper">
+
         <table>
           <thead>
             <tr>
@@ -55,7 +61,11 @@ const Program = () => {
           </tbody>
         </table>
 
+      </div>
+
       <h3>1 января</h3>
+      <div className="table-wrapper">
+
         <table>
           <thead>
             <tr>
@@ -83,6 +93,8 @@ const Program = () => {
           </tbody>
         </table>
       </div>
+
+    </CenteredContainer>
   );
 };
 

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;
-}