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)
|
||||
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)
|
||||
|
||||
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 {
|
||||
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 */
|
||||
|
||||
@ -7,13 +7,11 @@ import Program from './components/Program'
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<div className='snowflakes'>
|
||||
<InitialSetup/>
|
||||
<Greeting/>
|
||||
<br/>
|
||||
<Hosting/>
|
||||
<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 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -72,6 +74,7 @@ function Hosting() {
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</CenteredContainer>
|
||||
<br />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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