tylen/nyipyatki
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: tylen:cf9b0d53c15396c76e3dff1e4cd692e6a6bd5427
Branches Tags
tylen:main
..
compare: tylen:327ab8592a08489d9b2978ce28a652e25263858d
Branches Tags
tylen:main

No commits in common. "cf9b0d53c15396c76e3dff1e4cd692e6a6bd5427" and "327ab8592a08489d9b2978ce28a652e25263858d" have entirely different histories.
cf9b0d53c1 ... 327ab8592a

9 changed files with 81 additions and 338 deletions
Show Stats Expand all files Collapse all files

18
frontend/package-lock.json generated
View File

@ -3149,14 +3149,14 @@
} }
}, },
"node_modules/tinyglobby": { "node_modules/tinyglobby": {
"version": "0.2.15", "version": "0.2.14",
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"fdir": "^6.5.0", "fdir": "^6.4.4",
"picomatch": "^4.0.3" "picomatch": "^4.0.2"
}, },
"engines": { "engines": {
"node": ">=12.0.0" "node": ">=12.0.0"
@ -3324,9 +3324,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "7.1.12", "version": "7.1.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
"integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==", "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -3335,7 +3335,7 @@
"picomatch": "^4.0.3", "picomatch": "^4.0.3",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"rollup": "^4.43.0", "rollup": "^4.43.0",
"tinyglobby": "^0.2.15" "tinyglobby": "^0.2.14"
}, },
"bin": { "bin": {
"vite": "bin/vite.js" "vite": "bin/vite.js"

234
frontend/src/App.css
View File

@ -1,62 +1,42 @@
/* fonts.css */ /* fonts.css */
@font-face { @font-face {
font-family: 'Plovdiv'; font-family: 'Plovdiv'; /* Font family name */
/* Font family name */ src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Bold.otf') format('opentype'); /* Regular style */
src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Bold.otf') format('opentype'); font-weight: bold; /* Standard weight */
/* Regular style */ font-style: normal; /* Standard style */
font-weight: bold;
/* Standard weight */
font-style: normal;
/* Standard style */
} }
@font-face { @font-face {
font-family: 'Plovdiv'; font-family: 'Plovdiv'; /* Same font family name */
/* Same font family name */ src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Regular.otf') format('opentype'); /* Bold style */
src: url('./assets/fonts/Plovdiv/PlovdivDisplay-Regular.otf') format('opentype'); font-weight: normal; /* Bold weight */
/* Bold style */ font-style: normal; /* Standard style */
font-weight: normal;
/* Bold weight */
font-style: normal;
/* Standard style */
} }
@font-face { @font-face {
font-family: 'Pomelo'; font-family: 'Pomelo'; /* Name of the font */
/* Name of the font */ src: url('./assets/fonts/Pomelo/PomeloRegular.ttf') format('truetype'); /* Path to the TTF file */
src: url('./assets/fonts/Pomelo/PomeloRegular.ttf') format('truetype'); font-weight: normal; /* Standard weight */
/* Path to the TTF file */ font-style: normal; /* Standard style */
font-weight: normal;
/* Standard weight */
font-style: normal;
/* Standard style */
} }
#root { #root {
width: 100%; width: 100%;
text-align: center; text-align: center; /* Centered text alignment */
/* Centered text alignment */
} }
/* Overall Body Style */ /* Overall Body Style */
body { body {
background-color: #ffffff; background-color: #ffffff; /* Light background for contrast */
/* Light background for contrast */ background-image: url('./assets/snowflakes.png'); /* Background image */
background-image: url('./assets/snowflakes.png'); background-size: cover; /* Cover the entire screen */
/* Background image */ background-position: center; /* Center the image */
background-size: cover; background-repeat: no-repeat; /* Prevent repeating */
/* Cover the entire screen */ color: #ffffff; /* Darker red brown for readability */
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-family: 'Plovdiv', sans-serif;
font-size: 1.5em; font-size: 1.5em;
margin: 0; margin: 0;
text-align: center; text-align: center; /* Centered text alignment */
/* Centered text alignment */
padding: 20px; padding: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -82,12 +62,10 @@ body {
/* Header Style */ /* Header Style */
header { header {
background-color: #a41e34; background-color: #a41e34; /* Christmas red */
/* Christmas red */
color: white; color: white;
padding: 20px 0; padding: 20px 0;
border-bottom: 5px solid #b7c9b5; border-bottom: 5px solid #b7c9b5; /* Light green border */
/* Light green border */
} }
header h1 { header h1 {
@ -98,15 +76,9 @@ h1 {
font-family: 'Pomelo', sans-serif; font-family: 'Pomelo', sans-serif;
} }
a {
color: #ffffff;
}
/* Section Style */ /* Section Style */
section { section {
background-color: #e4f7e0; background-color: #e4f7e0; /* Light green background */
/* Light green background */
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
margin: 15px 0; margin: 15px 0;
@ -114,197 +86,103 @@ section {
/* Festive Buttons */ /* Festive Buttons */
button { button {
background-color: #b77de5; background-color: #b77de5; /* Purple with a slight festive flair */
/* Purple with a slight festive flair */
color: white; color: white;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
font-size: 1.1em; font-size: 1.1em;
display: inline-block; display: inline-block; /* Centers button in the container */
/* Centers button in the container */
} }
button:hover { button:hover {
background-color: #9b6bb5; background-color: #9b6bb5; /* Darker purple on hover */
/* Darker purple on hover */
} }
button:disabled { button:disabled {
background-color: #d3d3d3; background-color: #d3d3d3; /* Light gray for disabled button */
/* Light gray for disabled button */ color: #a9a9a9; /* Darker gray for text */
color: #a9a9a9; cursor: not-allowed; /* Show not-allowed cursor */
/* Darker gray for text */
cursor: not-allowed;
/* Show not-allowed cursor */
} }
/* Footer Style */ /* Footer Style */
footer { footer {
text-align: center; text-align: center; /* Centered */
/* Centered */
padding: 20px; padding: 20px;
background-color: #a41e34; background-color: #a41e34; /* Same red as header */
/* Same red as header */
color: white; color: white;
position: relative; position: relative;
} }
.table-wrapper { .table-wrapper {
width: 100%; width: 100%; /* Full width of the viewport */
/* Full width of the viewport */ text-align: center; /* Center the text (optional for non-text elements) */
text-align: center; overflow-x: auto; /* Enables horizontal scrolling if necessary */
/* Center the text (optional for non-text elements) */
overflow-x: auto;
/* Enables horizontal scrolling if necessary */
} }
/* General table styles */ /* General table styles */
table { table {
width: 100%; width: 100%; /* Set table width to 80% to create space on sides */
/* Set table width to 80% to create space on sides */ max-width: 100%; /* Prevents exceeding the parent's width */
max-width: 100%;
/* Prevents exceeding the parent's width */
color: black; color: black;
border-collapse: collapse; border-collapse: collapse;
text-align: center; text-align: center; /* Centered text in table */
/* Centered text in table */ margin: 0 auto; /* Center the table within the wrapper */
margin: 0 auto;
/* Center the table within the wrapper */
} }
/* Table header styles */ /* Table header styles */
th { th {
background-color: #060698; background-color: #060698; /* Christmas red */
/* Christmas red */
color: white; color: white;
padding: 10px 15px; padding: 10px 15px;
border-bottom: 3px solid #e0e9f7; border-bottom: 3px solid #e0e9f7; /* Light green border for header */
/* Light green border for header */
} }
/* Table cell styles */ /* Table cell styles */
td { td {
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 10px 15px; padding: 10px 15px; /* Added padding for better spacing */
/* Added padding for better spacing */ background-color: #e0e9f7; /* Light green background for cells */
background-color: #e0e9f7;
/* Light green background for cells */
} }
/* Zebra striping for table rows */ /* Zebra striping for table rows */
tr:nth-child(even) { tr:nth-child(even) {
background-color: #f9f9f9; background-color: #f9f9f9; /* Light gray for even rows */
/* Light gray for even rows */
} }
/* Hover effect for rows */ /* Hover effect for rows */
tr:hover { tr:hover {
background-color: #c28f8f; background-color: #c28f8f; /* Softer red when hovering */
/* Softer red when hovering */
} }
/* Additional table styling for Christmas theme */ /* Additional table styling for Christmas theme */
table { table {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
/* Shadow for depth */ border-radius: 8px; /* Rounded corners */
border-radius: 8px; overflow: hidden; /* Ensures border radius works */
/* Rounded corners */
overflow: hidden;
/* Ensures border radius works */
} }
/* Add some festive decorations */ /* Add some festive decorations */
th::after { th::after {
content: '🎄'; content: '🎄'; /* Small Christmas tree icon in the header */
/* Small Christmas tree icon in the header */
margin-left: 10px; margin-left: 10px;
font-size: 1.2em; font-size: 1.2em; /* Slightly larger */
/* Slightly larger */
} }
td { td {
position: relative; position: relative; /* For potential decorations */
/* For potential decorations */
} }
td::before { td::before {
content: ''; content: ''; /* Placeholder for decoration */
/* Placeholder for decoration */
position: absolute; position: absolute;
background-image: url('path/to/snowflake-icon.png'); background-image: url('path/to/snowflake-icon.png'); /* Snowflake icon */
/* Snowflake icon */ width: 16px; /* Adjust as necessary */
width: 16px;
/* Adjust as necessary */
height: 16px; height: 16px;
opacity: 0.1; opacity: 0.1; /* Very subtle */
/* Very subtle */ top: 5px; /* Position it nicely */
top: 5px;
/* Position it nicely */
left: 5px; left: 5px;
pointer-events: none; pointer-events: none; /* Ignore mouse events */
/* Ignore mouse events */
}
nav {
top: 0; /* Align it to the top */
background-color: rgba(0, 42, 255, 0.6);; /* Background color */
border-radius: 20px;
z-index: 1000; /* Make sure it stays above other content */
padding: 1rem;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex; /* Use flex to align items */
justify-content: space-around; /* Space the items evenly */
}
nav li {
display: inline;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.nav-toggle {
display: none;
}
@media (max-width: 768px) {
.nav-toggle {
display: block;
background-color: rgba(0, 42, 255, 0.6); /* Button color */
border: none;
padding: 10px 20px;
cursor: pointer;
margin-bottom: 20px;
}
nav {
display: none; /* Hide by default for mobile */
flex-direction: column; /* Stack vertically */
}
nav.open {
display: flex; /* Show when open */
}
nav ul {
flex-direction: column; /* Stack menu items */
align-items: center;
}
nav li {
margin: 10px 0; /* Space between items */
}
} }

51
frontend/src/App.tsx
View File

@ -1,54 +1,21 @@
import React, { useState } from 'react'; import './App.css'
import './App.css'; import Greeting from './components/Greeting'
import Greeting from './components/Greeting'; import Hosting from './components/Hosting'
import Hosting from './components/Hosting'; import InitialSetup from './components/InitialSetup'
import InitialSetup from './components/InitialSetup'; import Program from './components/Program'
import Program from './components/Program'; import Snowflakes from './components/Snowflakes'
import Snowflakes from './components/Snowflakes';
import { FullScreenLoading } from './components/Loading';
function App() { function App() {
const [isNavOpen, setIsNavOpen] = useState(false);
const toggleNav = () => {
setIsNavOpen(!isNavOpen);
};
return ( return (
<> <>
<FullScreenLoading/>
<Snowflakes /> <Snowflakes />
<InitialSetup/> <InitialSetup/>
<button onClick={toggleNav} className="nav-toggle">
{isNavOpen ? '❌' : 'Меню 📂'}
</button>
<nav className={isNavOpen ? 'open' : ''}>
<ul>
<li>
<a href="#greeting">Приглашение</a>
</li>
<li>
<a href="#hosting">Поселение</a>
</li>
<li>
<a href="#program">Программа</a>
</li>
</ul>
</nav>
<div id="greeting">
<Greeting/> <Greeting/>
</div> <br/>
<div id="hosting">
<Hosting/> <Hosting/>
</div>
<div id="program">
<Program/> <Program/>
</div>
</> </>
); )
} }
export default App; export default App

24
frontend/src/components/Greeting.tsx
View File

@ -1,16 +1,9 @@
import { useCookies } from "react-cookie"; import { useCookies } from "react-cookie";
import CenteredContainer from "./ChildrenContainer"; import CenteredContainer from "./ChildrenContainer";
import useFetchUser from "../utils/fetchUser";
function Greeting() { function Greeting() {
const [cookie] = useCookies<string>(['userName']) const [cookie] = useCookies<string>(['userName'])
const userName = cookie.userName; const userName = cookie.userName;
const { updateAttendance } = useFetchUser()
const handleUpdate = async (status: boolean) => {
await updateAttendance(status)
window.location.reload();
}
return ( return (
<> <>
@ -24,27 +17,10 @@ function Greeting() {
Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней! Приглашаем тебя отпраздновать предстоящий Новый Год <b>2025-2026</b> с нами в сосновой избе, в которой, ко всему прочему, будет праздноваться годовщина нашей жизни в ней!
Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа. Наши двери открыты с <b>30.12.2025</b>. Праздник обычно длится до <b>01.01.2025</b>, но если тебе или твоим спутникам будет безумно плохо, то можно остаться и до второго числа.
<h3>Присоеденишься?</h3>
<p>(Можно и потом ответить)</p>
<button style={localStyles.buttonOk} onClick={() => handleUpdate(true)}>Да!</button>
<button style={localStyles.buttonNok}onClick={() => handleUpdate(false)}>Не смогу в этот раз</button>
</p> </p>
</CenteredContainer> </CenteredContainer>
</> </>
) )
} }
const localStyles = {
buttonOk: {
margin: '0.5em',
padding: '0.3em',
backgroundColor: 'green'
},
buttonNok: {
margin: '0.5em',
padding: '0.3em',
backgroundColor: 'red'
}
}
export default Greeting; export default Greeting;

11
frontend/src/components/InitialSetup.tsx
View File

@ -4,7 +4,6 @@ import { GUESTS } from '../constants/constants';
import useFetchUser from '../utils/fetchUser'; // Import your custom hook import useFetchUser from '../utils/fetchUser'; // Import your custom hook
import { useNotification } from '../NotificationContext'; import { useNotification } from '../NotificationContext';
import ApologyMessage from './Attendance'; import ApologyMessage from './Attendance';
import {Loading} from './Loading';
const InitialSetup = () => { const InitialSetup = () => {
const [cookie, setCookie] = useCookies(); const [cookie, setCookie] = useCookies();
@ -15,7 +14,7 @@ const InitialSetup = () => {
const [isPasswordSet, setIsPasswordSet] = useState(false); // To track if password is set const [isPasswordSet, setIsPasswordSet] = useState(false); // To track if password is set
const [userAttendance, setUserAttendance] = useState<boolean | null>(null); const [userAttendance, setUserAttendance] = useState<boolean | null>(null);
const { userSet, passwordCreate, signUser, validToken, getAttendance, isLoading } = useFetchUser(); // Destructure functions from the hook const { userSet, passwordCreate, signUser, validToken, getAttendance } = useFetchUser(); // Destructure functions from the hook
const notify = useNotification(); const notify = useNotification();
const checkUserPassword = async (name: string) => { const checkUserPassword = async (name: string) => {
@ -77,14 +76,6 @@ const InitialSetup = () => {
) )
} }
if (isLoading) {
return (
<div style={styles.container}>
<Loading/>
</div>
)
}
return ( return (
<div style={styles.container}> <div style={styles.container}>
<h2 style={styles.title}>Выбери себя</h2> <h2 style={styles.title}>Выбери себя</h2>

29
frontend/src/components/Loading.css
View File

@ -1,29 +0,0 @@
.spinner {
font-size: 100px; /* Adjust size as needed */
animation: spin 2s linear infinite; /* Spin animation */
position: fixed; /* Keep the snowflake in a fixed position */
top: 50%; /* Adjust vertical position */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Center the snowflake */
z-index: 10000; /* Ensure it's above the full-screen loading */
}
/* Keyframes for spinning */
@keyframes spin {
0% { transform: translateX(-50%) rotate(0deg); }
100% { transform: translateX(-50%) rotate(360deg); }
}
.full-screen {
display: flex; /* Use flexbox for centering */
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
height: 100vh; /* Full viewport height */
width: 100vw; /* Full viewport width */
background-color: rgba(4, 0, 0); /* Semi-transparent background */
position: fixed; /* Fix it in the viewport */
top: 0;
left: 0;
z-index: 9999; /* Ensure it's above other content */
}

34
frontend/src/components/Loading.tsx
View File

@ -1,34 +0,0 @@
import React, { useEffect, useState } from 'react';
import './Loading.css'; // Import CSS for styling
export const Loading: React.FC = () => {
return (
<div className="spinner">
🎅🏻
</div>
);
};
export const FullScreenLoading: React.FC = () => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// Set a timeout to change the loading state
const timer = setTimeout(() => {
setIsLoading(false);
}, 1000); // 1000 ms = 1 second
// Cleanup function to clear the timeout if the component unmounts
return () => clearTimeout(timer);
}, []); // Empty dependency array means it runs once on mount
if (!isLoading) {
return null;
}
return (
<div className="full-screen">
<Loading />
</div>
)
}

2
frontend/src/components/Snowflakes.css
View File

@ -6,7 +6,7 @@
height: 100%; height: 100%;
pointer-events: none; /* Make snowflakes non-interactive */ pointer-events: none; /* Make snowflakes non-interactive */
overflow: hidden; /* Hide overflow */ overflow: hidden; /* Hide overflow */
z-index: 998; /* Ensure snowflakes are above other content */ z-index: 1000; /* Ensure snowflakes are above other content */
} }
.snowflake { .snowflake {

8
frontend/src/utils/fetchUser.tsx
View File

@ -1,18 +1,14 @@
import { useCookies } from 'react-cookie'; import { useCookies } from 'react-cookie';
import { API_URL } from '../constants/constants'; import { API_URL } from '../constants/constants';
import { hashPassword } from './hashPassword'; import { hashPassword } from './hashPassword';
import { useState } from 'react';
const useFetchUser = () => { const useFetchUser = () => {
const [isLoading, setIsLoading] = useState(false)
const [apiCookie, setApiCookie] = useCookies(['apiToken']); const [apiCookie, setApiCookie] = useCookies(['apiToken']);
const [, setUserNameCookie] = useCookies(['userName']) const [, setUserNameCookie] = useCookies(['userName'])
const userSet = async (userName: string): Promise<boolean> => { const userSet = async (userName: string): Promise<boolean> => {
try { try {
setIsLoading(true)
const response = await fetch(`${API_URL}/users/isSet?userName=${encodeURIComponent(userName)}`); const response = await fetch(`${API_URL}/users/isSet?userName=${encodeURIComponent(userName)}`);
setIsLoading(false)
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json(); const data = await response.json();
return data; // Assuming the server returns true/false return data; // Assuming the server returns true/false
@ -88,7 +84,6 @@ const useFetchUser = () => {
const validToken = async (token: string | undefined): Promise<boolean> => { const validToken = async (token: string | undefined): Promise<boolean> => {
try { try {
setIsLoading(true)
const response = await fetch(`${API_URL}/login/validateToken`, { const response = await fetch(`${API_URL}/login/validateToken`, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -98,7 +93,6 @@ const useFetchUser = () => {
token token
}), }),
}); });
setIsLoading(false)
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json(); const data = await response.json();
@ -162,7 +156,7 @@ const useFetchUser = () => {
} }
} }
return { userSet, passwordCreate, signUser, validToken, updateAttendance, getAttendance, isLoading }; return { userSet, passwordCreate, signUser, validToken, updateAttendance, getAttendance };
}; };
export default useFetchUser; export default useFetchUser;