From 1dfaa261e15653446dc348b357aa0aba523744a5 Mon Sep 17 00:00:00 2001 From: tylen Date: Sun, 2 Nov 2025 00:05:03 +0200 Subject: [PATCH] add styling --- backend/src/server.py | 2 +- frontend/fonts.css | 2 + frontend/src/App.css | 72 ++++++-- frontend/src/App.tsx | 2 - frontend/src/components/CenteredConatiner.css | 26 +++ frontend/src/components/ChildrenContainer.tsx | 18 ++ frontend/src/components/Greeting.tsx | 21 ++- frontend/src/components/Hosting.tsx | 25 +-- frontend/src/components/Program.tsx | 164 ++++++++++-------- frontend/src/index.css | 17 -- 10 files changed, 215 insertions(+), 134 deletions(-) create mode 100644 frontend/fonts.css create mode 100644 frontend/src/components/CenteredConatiner.css create mode 100644 frontend/src/components/ChildrenContainer.tsx diff --git a/backend/src/server.py b/backend/src/server.py index 0b57729..01dd619 100644 --- a/backend/src/server.py +++ b/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) diff --git a/frontend/fonts.css b/frontend/fonts.css new file mode 100644 index 0000000..139597f --- /dev/null +++ b/frontend/fonts.css @@ -0,0 +1,2 @@ + + diff --git a/frontend/src/App.css b/frontend/src/App.css index 326ab95..aa23a47 100644 --- a/frontend/src/App.css +++ b/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 */ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8d5488a..fee3b1d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -7,13 +7,11 @@ import Program from './components/Program' function App() { return ( <> -

-
) } diff --git a/frontend/src/components/CenteredConatiner.css b/frontend/src/components/CenteredConatiner.css new file mode 100644 index 0000000..b4f87fb --- /dev/null +++ b/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 */ + } +} diff --git a/frontend/src/components/ChildrenContainer.tsx b/frontend/src/components/ChildrenContainer.tsx new file mode 100644 index 0000000..d8976b6 --- /dev/null +++ b/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 = ({ children }) => { + return ( +
+
+ {children} +
+
+ ); +}; + +export default CenteredContainer; diff --git a/frontend/src/components/Greeting.tsx b/frontend/src/components/Greeting.tsx index 14a3c54..b2abcbb 100644 --- a/frontend/src/components/Greeting.tsx +++ b/frontend/src/components/Greeting.tsx @@ -1,4 +1,5 @@ import { useCookies } from "react-cookie"; +import CenteredContainer from "./ChildrenContainer"; function Greeting() { const [cookie] = useCookies(['userName']) @@ -6,16 +7,18 @@ function Greeting() { return ( <> -

Приглашение на Новый год 2025-2026 🎄

-

-

- {userName ? <>{userName} : <>Дорогая пятка!} - ! 🦶 -

- Приглашаем тебя отпраздновать предстоящий Новый Год 2025-2026 с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней! + +

Приглашение на Новый год 2025-2026 🎄

+

+

+ {userName ? <>{userName} : <>Дорогая пятка!} + ! 🦶 +

+ Приглашаем тебя отпраздновать предстоящий Новый Год 2025-2026 с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней! - Наши двери открыты с 30.12.2025. Праздник обычно длится до 01.01.2025, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа. -

+ Наши двери открыты с 30.12.2025. Праздник обычно длится до 01.01.2025, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа. +

+ ) } diff --git a/frontend/src/components/Hosting.tsx b/frontend/src/components/Hosting.tsx index a255700..22bdcbf 100644 --- a/frontend/src/components/Hosting.tsx +++ b/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 = (props) => { return ( <> ); @@ -39,19 +40,20 @@ function Hosting() { const { data, error, loading, update } = useFetchHosting(); return ( <> -

Поселение

-

- Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если - вы не хотите тесниться, то рядом с нами есть - отель, а так же - кэмпинг-виллы - (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома). - Спальные места: -

+ +

Поселение

+

+ Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если + вы не хотите тесниться, то рядом с нами есть + отель, а так же + кэмпинг-виллы + (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома). + Спальные места: +

{loading &&
Loading...
} {error &&
Error
} {data && ( -
+
@@ -72,6 +74,7 @@ function Hosting() {
)} +
); diff --git a/frontend/src/components/Program.tsx b/frontend/src/components/Program.tsx index c17656a..5d27d04 100644 --- a/frontend/src/components/Program.tsx +++ b/frontend/src/components/Program.tsx @@ -1,88 +1,100 @@ +import CenteredContainer from "./ChildrenContainer"; + const Program = () => { return ( -
+

Программа

30 декабря

- - - - - - - - - - - - - - - - - - - - - -
ВремяДействие
15-18Гости приезжают и селятся
18-19Ужин
19-N/AОтдых и заготовки к кануну Нового Года
+
+ + + + + + + + + + + + + + + + + + + + + +
ВремяДействие
15-18Гости приезжают и селятся
18-19Ужин
19-N/AОтдых и заготовки к кануну Нового Года
+

31 декабря

- - - - - - - - - - - - - - - - - - - - - - - - - -
ВремяДействие
07-10Утро, завтрак
11-14Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед
14-19Готовим ужин, чиллим
19-23:59Ужин, отдых, разговоры, игры
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ВремяДействие
07-10Утро, завтрак
11-14Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед
14-19Готовим ужин, чиллим
19-23:59Ужин, отдых, разговоры, игры
+ +

1 января

- - - - - - - - - - - - - - - - - - - - - - - - - -
ВремяДействие
00-N/A🎄 ☃️ 🍾 🥂 🎇 🎆
07-12Утро, завтрак
12-15Сауна/Отдых
15-N/AКто-то остается, кто-то собирается домой
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ВремяДействие
00-N/A🎄 ☃️ 🍾 🥂 🎇 🎆
07-12Утро, завтрак
12-15Сауна/Отдых
15-N/AКто-то остается, кто-то собирается домой
+
+ + ); }; diff --git a/frontend/src/index.css b/frontend/src/index.css index 3cf31c9..e69de29 100644 --- a/frontend/src/index.css +++ b/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; -}