update for summer theme

frontend/src/App.css

@@ -42,7 +42,7 @@
 body {
     background-color: #ffffff;
     /* Light background for contrast */
-    background-image: url('./assets/snowflakes.png');
+    background-image: url('./assets/leafs.png');
     /* Background image */
     background-size: cover;
     /* Cover the entire screen */
@@ -114,7 +114,7 @@ section {
 
 /* Festive Buttons */
 button {
-    background-color: #b77de5;
+    background-color: #b5bb08;
     /* Purple with a slight festive flair */
     color: white;
     border: none;
@@ -126,7 +126,7 @@ button {
 }
 
 button:hover {
-    background-color: #9b6bb5;
+    background-color: #48844e;
     /* Darker purple on hover */
 }
 
@@ -177,7 +177,7 @@ table {
 
 /* Table header styles */
 th {
-    background-color: #060698;
+    background-color: #06984a;
     /* Christmas red */
     color: white;
     padding: 10px 15px;
@@ -218,7 +218,7 @@ table {
 
 /* Add some festive decorations */
 th::after {
-    content: '🎄';
+    content: '🌳';
     /* Small Christmas tree icon in the header */
     margin-left: 10px;
     font-size: 1.2em;
@@ -234,8 +234,8 @@ td::before {
     content: '';
     /* Placeholder for decoration */
     position: absolute;
-    background-image: url('path/to/snowflake-icon.png');
-    /* Snowflake icon */
+    background-image: url('path/to/leaf-icon.png');
+    /* leaf icon */
     width: 16px;
     /* Adjust as necessary */
     height: 16px;
@@ -250,7 +250,7 @@ td::before {
 
 nav {
   top: 0; /* Align it to the top */
-  background-color: rgba(0, 42, 255, 0.6);; /* Background color */
+  background-color: #06984aef; /* Background color */
   border-radius: 20px;
   z-index: 1000; /* Make sure it stays above other content */
   padding: 1rem;
@@ -293,7 +293,7 @@ nav a:hover {
 @media (max-width: 768px) {
 .nav-toggle {
   display: block;
-  background-color: rgba(0, 42, 255, 0.6); /* Button color */
+  background-color: rgba(255, 255, 0, 0.6); /* Button color */
   border: none;
   padding: 10px 20px; 
   cursor: pointer; 

frontend/src/App.tsx

@@ -4,7 +4,7 @@ import Greeting from './components/Greeting';
 import Hosting from './components/Hosting';
 import InitialSetup from './components/InitialSetup';
 import Program from './components/Program';
-import Snowflakes from './components/Snowflakes';
+import Leafs from './components/Leafs';
 import { FullScreenLoading } from './components/Loading';
 import SecretSanta from './components/SecretSanta';
 import Suggestions from './components/Suggestions';
@@ -31,7 +31,7 @@ function App() {
   return (
     <>
       <FullScreenLoading />
-      <Snowflakes />
+      <Leafs />
       <InitialSetup />
 
       <button onClick={toggleNav} className="nav-toggle">
@@ -52,9 +52,6 @@ function App() {
           <li>
             <a href="#suggestions">Пожелания</a>
           </li>
-          <li>
-            <a href="#santa">Secret Santa</a>
-          </li>
           <li>
             <a href="#attendance-table">Кто празднует?</a>
           </li>
@@ -76,9 +73,6 @@ function App() {
       <div id="suggestions">
         <Suggestions />
       </div>
-      <div id="santa">
-        <SecretSanta />
-      </div>
       <div id="attendance-table">
         <AttendanceTable />
       </div>

frontend/src/components/CenteredConatiner.css

@@ -6,7 +6,7 @@
     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);
+    background-color: #06984aef;
     border-radius: 20px;
 }
 

frontend/src/components/Leafs.css

@@ -0,0 +1,38 @@
+.leafs {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Make leafs non-interactive */
+    overflow: hidden; /* Hide overflow */
+    z-index: 998; /* Ensure leafs are above other content */
+}
+
+.leaf {
+    position: absolute;
+    top: -10%; /* Start above the top of the screen */
+    color: white; /* leaf color */
+    font-size: 1em; /* Size of the leaf; adjust as needed */
+    opacity: 0.6; /* Transparency */
+    animation: fall linear infinite; /* Apply the fall animation */
+}
+
+/* Falling animation */
+@keyframes fall {
+    0% {
+        transform: translateX(0) translateY(0) rotate(0deg);/* Start position */
+    }
+    100% {
+        transform: translateX(-5vw) translateY(120vh) rotate(360deg); /* End position */
+        opacity: 0.1; /* Optional: fade out */
+    }
+}
+/* Randomize leaf size and animation */
+.leaf:nth-child(1) { animation-duration: 6s; left: 10%; font-size: 0.8em;}
+.leaf:nth-child(2) { animation-duration: 8s; left: 20%; font-size: 3em;}
+.leaf:nth-child(3) { animation-duration: 5s; left: 30%; font-size: 4em;}
+.leaf:nth-child(4) { animation-duration: 7s; left: 40%; font-size: 0.9em;}
+.leaf:nth-child(5) { animation-duration: 10s; left: 50%; font-size: 2em;}
+
+/* Add more child selectors for additional leafs */

frontend/src/components/Leafs.tsx

@@ -1,26 +1,26 @@
 import React from 'react';
-import './Snowflakes.css';
+import './Leafs.css';
 
-const Snowflakes: React.FC = () => {
-    // Adjust the number of snowflakes as needed
-    const snowflakeCount = Array.from({ length: 50 });
+const Leafs: React.FC = () => {
+    // Adjust the number of leafs as needed
+    const leafCount = Array.from({ length: 50 });
 
     return (
-        <div className="snowflakes">
-            {snowflakeCount.map((_, index) => (
+        <div className="leafs">
+            {leafCount.map((_, index) => (
                 <div 
                     key={index} 
-                    className="snowflake"
+                    className="leaf"
                     style={{
                         left: `${Math.random() * 100}vw`, // Random position across the full width
                         animationDuration: `${Math.random() * 20 + 10}s`, // Random fall duration between 2s and 5s
                     }}
                 >
-                    ❄️
+                    🍃
                 </div>
             ))}
         </div>
     );
 };
 
-export default Snowflakes;
+export default Leafs;

frontend/src/components/Loading.css

@@ -1,10 +1,10 @@
 .spinner {
     font-size: 100px; /* Adjust size as needed */
     animation: spin 2s linear infinite; /* Spin animation */
-    position: fixed; /* Keep the snowflake in a fixed position */
+    position: fixed; /* Keep the leaf in a fixed position */
     top: 50%; /* Adjust vertical position */
     left: 50%; /* Center horizontally */
-    transform: translateX(-50%); /* Center the snowflake */
+    transform: translateX(-50%); /* Center the leaf */
     z-index: 10000; /* Ensure it's above the full-screen loading */
 }
 

frontend/src/components/Loading.tsx

@@ -4,7 +4,7 @@ import './Loading.css'; // Import CSS for styling
 export const Loading: React.FC = () => {
     return (
         <div className="spinner">
-            🎅🏻
+            🍺
         </div>
     );
 };

frontend/src/components/Snowflakes.css

@@ -1,39 +0,0 @@
-.snowflakes {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none; /* Make snowflakes non-interactive */
-    overflow: hidden; /* Hide overflow */
-    z-index: 998; /* Ensure snowflakes are above other content */
-}
-
-.snowflake {
-    position: absolute;
-    top: -10%; /* Start above the top of the screen */
-    color: white; /* Snowflake color */
-    font-size: 1em; /* Size of the snowflake; adjust as needed */
-    opacity: 0.5; /* Transparency */
-    animation: fall linear infinite; /* Apply the fall animation */
-}
-
-/* Falling animation */
-@keyframes fall {
-    0% {
-        transform: translateX(0) translateY(0); /* Start position */
-    }
-    100% {
-        transform: translateX(-5vw) translateY(120vh); /* End position */
-        opacity: 0.1; /* Optional: fade out */
-    }
-}
-
-/* Randomize snowflake size and animation */
-.snowflake:nth-child(1) { animation-duration: 6s; left: 10%; font-size: 0.8em;}
-.snowflake:nth-child(2) { animation-duration: 8s; left: 20%; font-size: 3em;}
-.snowflake:nth-child(3) { animation-duration: 5s; left: 30%; font-size: 4em;}
-.snowflake:nth-child(4) { animation-duration: 7s; left: 40%; font-size: 0.9em;}
-.snowflake:nth-child(5) { animation-duration: 10s; left: 50%; font-size: 2em;}
-
-/* Add more child selectors for additional snowflakes */