add styling
This commit is contained in:
tylen
parent
cef340a679
commit
1dfaa261e1
@ -18,7 +18,7 @@ app.config['JSON_AS_ASCII'] = False # Ensures non-ASCII characters are preserve
|
|||||||
logging.basicConfig(level=logging.INFO)
|
logging.basicConfig(level=logging.INFO)
|
||||||
allowed_origins = [
|
allowed_origins = [
|
||||||
"https://nyipyatki.davydovcloud.com",
|
"https://nyipyatki.davydovcloud.com",
|
||||||
"https://nyipyatki-dev.davydovcloud.com",
|
"http://192.168.100.*",
|
||||||
]
|
]
|
||||||
CORS(app, resources={r"*": {"origins": allowed_origins}}) # Only allow example.com
|
CORS(app, resources={r"*": {"origins": allowed_origins}}) # Only allow example.com
|
||||||
database = DBClient(app)
|
database = DBClient(app)
|
||||||
|
|||||||
2
frontend/fonts.css
Normal file
2
frontend/fonts.css
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
|
||||||
@ -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 {
|
#root {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1280px;
|
|
||||||
text-align: center; /* Centered text alignment */
|
text-align: center; /* Centered text alignment */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Overall Body Style */
|
/* Overall Body Style */
|
||||||
body {
|
body {
|
||||||
background-color: #ffffff; /* Light background for contrast */
|
background-color: #ffffff; /* Light background for contrast */
|
||||||
color: #4b2e2e; /* Darker red brown for readability */
|
background-image: url('./assets/snowflakes.png'); /* Background image */
|
||||||
font-family: 'Arial', sans-serif;
|
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;
|
margin: 0;
|
||||||
text-align: center; /* Centered text alignment */
|
text-align: center; /* Centered text alignment */
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header Style */
|
/* Header Style */
|
||||||
@ -26,6 +61,10 @@ header h1 {
|
|||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Pomelo', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
/* Section Style */
|
/* Section Style */
|
||||||
section {
|
section {
|
||||||
background-color: #e4f7e0; /* Light green background */
|
background-color: #e4f7e0; /* Light green background */
|
||||||
@ -39,7 +78,6 @@ button {
|
|||||||
background-color: #b77de5; /* Purple with a slight festive flair */
|
background-color: #b77de5; /* Purple with a slight festive flair */
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
@ -65,39 +103,37 @@ footer {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Snowflakes Background */
|
.table-wrapper {
|
||||||
.snowflakes {
|
width: 100%; /* Full width of the viewport */
|
||||||
position: absolute;
|
text-align: center; /* Center the text (optional for non-text elements) */
|
||||||
top: 0;
|
overflow-x: auto; /* Enables horizontal scrolling if necessary */
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url('./assets/snowflakes.png'); /* Snowflakes pattern */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* General table styles */
|
/* General table styles */
|
||||||
table {
|
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;
|
border-collapse: collapse;
|
||||||
margin: 20px 0;
|
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
font-family: 'Arial', sans-serif;
|
text-align: center; /* Centered text in table */
|
||||||
text-align: center; /* Centered table text */
|
margin: 0 auto; /* Center the table within the wrapper */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Table header styles */
|
/* Table header styles */
|
||||||
th {
|
th {
|
||||||
background-color: #060698; /* Christmas red */
|
background-color: #060698; /* Christmas red */
|
||||||
color: white;
|
color: white;
|
||||||
padding: 10px 15px;
|
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 */
|
/* Table cell styles */
|
||||||
td {
|
td {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
padding: 10px 15px; /* Added padding for better spacing */
|
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 */
|
/* Zebra striping for table rows */
|
||||||
|
|||||||
@ -7,13 +7,11 @@ import Program from './components/Program'
|
|||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className='snowflakes'>
|
|
||||||
<InitialSetup/>
|
<InitialSetup/>
|
||||||
<Greeting/>
|
<Greeting/>
|
||||||
<br/>
|
<br/>
|
||||||
<Hosting/>
|
<Hosting/>
|
||||||
<Program/>
|
<Program/>
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
26
frontend/src/components/CenteredConatiner.css
Normal file
26
frontend/src/components/CenteredConatiner.css
Normal file
@ -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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
18
frontend/src/components/ChildrenContainer.tsx
Normal file
18
frontend/src/components/ChildrenContainer.tsx
Normal file
@ -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;
|
||||||
@ -1,4 +1,5 @@
|
|||||||
import { useCookies } from "react-cookie";
|
import { useCookies } from "react-cookie";
|
||||||
|
import CenteredContainer from "./ChildrenContainer";
|
||||||
|
|
||||||
function Greeting() {
|
function Greeting() {
|
||||||
const [cookie] = useCookies<string>(['userName'])
|
const [cookie] = useCookies<string>(['userName'])
|
||||||
@ -6,16 +7,18 @@ function Greeting() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>Приглашение на Новый год 2025-2026 🎄</h1>
|
<CenteredContainer>
|
||||||
<p className="mainText">
|
<h1>Приглашение на Новый год 2025-2026 🎄</h1>
|
||||||
<h3>
|
<p className="mainText">
|
||||||
{userName ? <>{userName}</> : <>Дорогая пятка!</>}
|
<h3>
|
||||||
! 🦶
|
{userName ? <>{userName}</> : <>Дорогая пятка!</>}
|
||||||
</h3>
|
! 🦶
|
||||||
Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
|
</h3>
|
||||||
|
Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
|
||||||
|
|
||||||
Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
|
Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
|
||||||
</p>
|
</p>
|
||||||
|
</CenteredContainer>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import useFetchHosting from "../utils/fetchHosting";
|
import useFetchHosting from "../utils/fetchHosting";
|
||||||
import { useNotification } from "../NotificationContext";
|
import { useNotification } from "../NotificationContext";
|
||||||
import { useCookies } from "react-cookie";
|
import { useCookies } from "react-cookie";
|
||||||
|
import CenteredContainer from "./ChildrenContainer";
|
||||||
|
|
||||||
|
|
||||||
interface ReserveButtonProps {
|
interface ReserveButtonProps {
|
||||||
@ -28,7 +29,7 @@ const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<button onClick={handleReserve} disabled={isReserved}>
|
<button onClick={handleReserve} disabled={isReserved}>
|
||||||
{isReserved ? `Занято гостем ${reservedBy}` : 'Занять'}
|
{isReserved ? `${reservedBy}` : 'Занять'}
|
||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@ -39,19 +40,20 @@ function Hosting() {
|
|||||||
const { data, error, loading, update } = useFetchHosting();
|
const { data, error, loading, update } = useFetchHosting();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h2>Поселение</h2>
|
<CenteredContainer>
|
||||||
<p>
|
<h2>Поселение</h2>
|
||||||
Мы готовы приютить в наших 150 квадратах всех. У нас есть 6 спальных мест. При этом, если
|
<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>
|
<a href="https://www.uoti.net/" target="_blank" rel="noopener noreferrer"> отель</a>, а так же
|
||||||
(Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
|
<a href="https://campingsysma.fi/" target="_blank" rel="noopener noreferrer"> кэмпинг-виллы </a>
|
||||||
Спальные места:
|
(Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
|
||||||
</p>
|
Спальные места:
|
||||||
|
</p>
|
||||||
{loading && <div>Loading...</div>}
|
{loading && <div>Loading...</div>}
|
||||||
{error && <div>Error</div>}
|
{error && <div>Error</div>}
|
||||||
{data && (
|
{data && (
|
||||||
<div>
|
<div className="table-wrapper">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -72,6 +74,7 @@ function Hosting() {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
</CenteredContainer>
|
||||||
<br />
|
<br />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,88 +1,100 @@
|
|||||||
|
import CenteredContainer from "./ChildrenContainer";
|
||||||
|
|
||||||
const Program = () => {
|
const Program = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<CenteredContainer>
|
||||||
<h2>Программа</h2>
|
<h2>Программа</h2>
|
||||||
|
|
||||||
<h3>30 декабря</h3>
|
<h3>30 декабря</h3>
|
||||||
<table>
|
<div className="table-wrapper">
|
||||||
<thead>
|
<table>
|
||||||
<tr>
|
<thead>
|
||||||
<th>Время</th>
|
<tr>
|
||||||
<th>Действие</th>
|
<th>Время</th>
|
||||||
</tr>
|
<th>Действие</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<td>15-18</td>
|
<tr>
|
||||||
<td>Гости приезжают и селятся</td>
|
<td>15-18</td>
|
||||||
</tr>
|
<td>Гости приезжают и селятся</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>18-19</td>
|
<tr>
|
||||||
<td>Ужин</td>
|
<td>18-19</td>
|
||||||
</tr>
|
<td>Ужин</td>
|
||||||
<tr>
|
</tr>
|
||||||
<td>19-N/A</td>
|
<tr>
|
||||||
<td>Отдых и заготовки к кануну Нового Года</td>
|
<td>19-N/A</td>
|
||||||
</tr>
|
<td>Отдых и заготовки к кануну Нового Года</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>31 декабря</h3>
|
<h3>31 декабря</h3>
|
||||||
<table>
|
<div className="table-wrapper">
|
||||||
<thead>
|
|
||||||
<tr>
|
<table>
|
||||||
<th>Время</th>
|
<thead>
|
||||||
<th>Действие</th>
|
<tr>
|
||||||
</tr>
|
<th>Время</th>
|
||||||
</thead>
|
<th>Действие</th>
|
||||||
<tbody>
|
</tr>
|
||||||
<tr>
|
</thead>
|
||||||
<td>07-10</td>
|
<tbody>
|
||||||
<td>Утро, завтрак</td>
|
<tr>
|
||||||
</tr>
|
<td>07-10</td>
|
||||||
<tr>
|
<td>Утро, завтрак</td>
|
||||||
<td>11-14</td>
|
</tr>
|
||||||
<td>Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед</td>
|
<tr>
|
||||||
</tr>
|
<td>11-14</td>
|
||||||
<tr>
|
<td>Сюсьма, прогулки, дополнительные закупки, подготовка к вечеру, обед</td>
|
||||||
<td>14-19</td>
|
</tr>
|
||||||
<td>Готовим ужин, чиллим</td>
|
<tr>
|
||||||
</tr>
|
<td>14-19</td>
|
||||||
<tr>
|
<td>Готовим ужин, чиллим</td>
|
||||||
<td>19-23:59</td>
|
</tr>
|
||||||
<td>Ужин, отдых, разговоры, игры</td>
|
<tr>
|
||||||
</tr>
|
<td>19-23:59</td>
|
||||||
</tbody>
|
<td>Ужин, отдых, разговоры, игры</td>
|
||||||
</table>
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>1 января</h3>
|
<h3>1 января</h3>
|
||||||
<table>
|
<div className="table-wrapper">
|
||||||
<thead>
|
|
||||||
<tr>
|
<table>
|
||||||
<th>Время</th>
|
<thead>
|
||||||
<th>Действие</th>
|
<tr>
|
||||||
</tr>
|
<th>Время</th>
|
||||||
</thead>
|
<th>Действие</th>
|
||||||
<tbody>
|
</tr>
|
||||||
<tr>
|
</thead>
|
||||||
<td>00-N/A</td>
|
<tbody>
|
||||||
<td>🎄 ☃️ 🍾 🥂 🎇 🎆</td>
|
<tr>
|
||||||
</tr>
|
<td>00-N/A</td>
|
||||||
<tr>
|
<td>🎄 ☃️ 🍾 🥂 🎇 🎆</td>
|
||||||
<td>07-12</td>
|
</tr>
|
||||||
<td>Утро, завтрак</td>
|
<tr>
|
||||||
</tr>
|
<td>07-12</td>
|
||||||
<tr>
|
<td>Утро, завтрак</td>
|
||||||
<td>12-15</td>
|
</tr>
|
||||||
<td>Сауна/Отдых</td>
|
<tr>
|
||||||
</tr>
|
<td>12-15</td>
|
||||||
<tr>
|
<td>Сауна/Отдых</td>
|
||||||
<td>15-N/A</td>
|
</tr>
|
||||||
<td>Кто-то остается, кто-то собирается домой</td>
|
<tr>
|
||||||
</tr>
|
<td>15-N/A</td>
|
||||||
</tbody>
|
<td>Кто-то остается, кто-то собирается домой</td>
|
||||||
</table>
|
</tr>
|
||||||
</div>
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</CenteredContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user