From aeb56f2eb40dba620a10a0accaaed5fec3be23d2 Mon Sep 17 00:00:00 2001
From: Kerem Semiz <kerox350@gmail.com>
Date: Wed, 5 Jun 2024 15:12:03 +0300
Subject: [PATCH] do stuff

---
 Frontend/src/Explain/explain.jsx       |   2 +-
 Frontend/src/createTrip/createTrip.jsx |  28 +-
 Frontend/src/createTrip/loader.css     | 496 +++++++++++++++++++++++++
 3 files changed, 523 insertions(+), 3 deletions(-)
 create mode 100644 Frontend/src/createTrip/loader.css

diff --git a/Frontend/src/Explain/explain.jsx b/Frontend/src/Explain/explain.jsx
index 2647ecf..36aabdd 100644
--- a/Frontend/src/Explain/explain.jsx
+++ b/Frontend/src/Explain/explain.jsx
@@ -9,7 +9,7 @@ import explainImg from '../assets/explain1.jpg'
 function Explain() {
     return (
         <div className='explainContainer'>
-            <h1 className='headertext archivo'>What's Deconnecting?</h1>
+            <h1 className='headertext archivo'>What is Deconnecting?</h1>
             <div className="explainMain">
                 <div className='explainLeft'>
                     <h2 className='bigHeader'>Deconnecting is...</h2>
diff --git a/Frontend/src/createTrip/createTrip.jsx b/Frontend/src/createTrip/createTrip.jsx
index 4fa7932..7581c5f 100644
--- a/Frontend/src/createTrip/createTrip.jsx
+++ b/Frontend/src/createTrip/createTrip.jsx
@@ -3,21 +3,45 @@ import '../Hero/hero.css';
 import './createTrip.css';
 import './gradients.css';
 import './button.css';
+import './loader.css'
 import './button.js';
 
 function CreateTrip() {
     // manage current state
     const [currentState, setCurrentState] = useState('click');
+    const [loading, setLoading] = useState(false);
     const [groupType, setGroupType] = useState('');
     const [budget, setBudget] = useState('');
 
     // MESSY SHIT!!!!!!!
     let content;
-    if (currentState === 'click') {
+    if (loading) {
+        content = (
+                <div className="banter-loader">
+                    <div className="banter-loader__box"></div>
+                    <div className="banter-loader__box"></div>
+                    <div className="banter-loader__box"></div>
+                    <div className="banter-loader__box"></div>
+                    <div className="banter-loader__box"></div>
+                    <div className="banter-loader__box"></div>
+                    <div className="banter-loader__box"></div>
+                    <div className="banter-loader__box"></div>
+                    <div className="banter-loader__box"></div>
+                </div>
+        );
+    }
+
+    else if (currentState === 'click') {
         content = (
         <div className="mainOutline">
             <div class="sparkle-button">
-                <button onClick={() => setCurrentState('start')}>
+            <button onClick={() => {
+                        setLoading(true);
+                        setTimeout(() => {
+                            setLoading(false);
+                            setCurrentState('start');
+                        }, 2000); // 4 sec delay
+                    }}>
                 <span class="spark"></span>
                 <span class="backdrop"></span>
                 <svg class="sparkle" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/Frontend/src/createTrip/loader.css b/Frontend/src/createTrip/loader.css
new file mode 100644
index 0000000..7fc548f
--- /dev/null
+++ b/Frontend/src/createTrip/loader.css
@@ -0,0 +1,496 @@
+.banter-loader {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 72px;
+    height: 72px;
+    margin-left: -36px;
+    margin-top: -36px;
+  }
+  
+  .banter-loader__box {
+    float: left;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+  }
+  
+  .banter-loader__box:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+  }
+  
+  .banter-loader__box:nth-child(3n) {
+    margin-right: 0;
+    margin-bottom: 6px;
+  }
+  
+  .banter-loader__box:nth-child(1):before, .banter-loader__box:nth-child(4):before {
+    margin-left: 26px;
+  }
+  
+  .banter-loader__box:nth-child(3):before {
+    margin-top: 52px;
+  }
+  
+  .banter-loader__box:last-child {
+    margin-bottom: 0;
+  }
+  
+  @keyframes moveBox-1 {
+    9.0909090909% {
+      transform: translate(-26px, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(0px, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(0px, 0);
+    }
+  
+    36.3636363636% {
+      transform: translate(26px, 0);
+    }
+  
+    45.4545454545% {
+      transform: translate(26px, 26px);
+    }
+  
+    54.5454545455% {
+      transform: translate(26px, 26px);
+    }
+  
+    63.6363636364% {
+      transform: translate(26px, 26px);
+    }
+  
+    72.7272727273% {
+      transform: translate(26px, 0px);
+    }
+  
+    81.8181818182% {
+      transform: translate(0px, 0px);
+    }
+  
+    90.9090909091% {
+      transform: translate(-26px, 0px);
+    }
+  
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  .banter-loader__box:nth-child(1) {
+    animation: moveBox-1 4s infinite;
+  }
+  
+  @keyframes moveBox-2 {
+    9.0909090909% {
+      transform: translate(0, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(26px, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(0px, 0);
+    }
+  
+    36.3636363636% {
+      transform: translate(26px, 0);
+    }
+  
+    45.4545454545% {
+      transform: translate(26px, 26px);
+    }
+  
+    54.5454545455% {
+      transform: translate(26px, 26px);
+    }
+  
+    63.6363636364% {
+      transform: translate(26px, 26px);
+    }
+  
+    72.7272727273% {
+      transform: translate(26px, 26px);
+    }
+  
+    81.8181818182% {
+      transform: translate(0px, 26px);
+    }
+  
+    90.9090909091% {
+      transform: translate(0px, 26px);
+    }
+  
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  .banter-loader__box:nth-child(2) {
+    animation: moveBox-2 4s infinite;
+  }
+  
+  @keyframes moveBox-3 {
+    9.0909090909% {
+      transform: translate(-26px, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(-26px, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(0px, 0);
+    }
+  
+    36.3636363636% {
+      transform: translate(-26px, 0);
+    }
+  
+    45.4545454545% {
+      transform: translate(-26px, 0);
+    }
+  
+    54.5454545455% {
+      transform: translate(-26px, 0);
+    }
+  
+    63.6363636364% {
+      transform: translate(-26px, 0);
+    }
+  
+    72.7272727273% {
+      transform: translate(-26px, 0);
+    }
+  
+    81.8181818182% {
+      transform: translate(-26px, -26px);
+    }
+  
+    90.9090909091% {
+      transform: translate(0px, -26px);
+    }
+  
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  .banter-loader__box:nth-child(3) {
+    animation: moveBox-3 4s infinite;
+  }
+  
+  @keyframes moveBox-4 {
+    9.0909090909% {
+      transform: translate(-26px, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(-26px, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(-26px, -26px);
+    }
+  
+    36.3636363636% {
+      transform: translate(0px, -26px);
+    }
+  
+    45.4545454545% {
+      transform: translate(0px, 0px);
+    }
+  
+    54.5454545455% {
+      transform: translate(0px, -26px);
+    }
+  
+    63.6363636364% {
+      transform: translate(0px, -26px);
+    }
+  
+    72.7272727273% {
+      transform: translate(0px, -26px);
+    }
+  
+    81.8181818182% {
+      transform: translate(-26px, -26px);
+    }
+  
+    90.9090909091% {
+      transform: translate(-26px, 0px);
+    }
+  
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  .banter-loader__box:nth-child(4) {
+    animation: moveBox-4 4s infinite;
+  }
+  
+  @keyframes moveBox-5 {
+    9.0909090909% {
+      transform: translate(0, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(0, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(0, 0);
+    }
+  
+    36.3636363636% {
+      transform: translate(26px, 0);
+    }
+  
+    45.4545454545% {
+      transform: translate(26px, 0);
+    }
+  
+    54.5454545455% {
+      transform: translate(26px, 0);
+    }
+  
+    63.6363636364% {
+      transform: translate(26px, 0);
+    }
+  
+    72.7272727273% {
+      transform: translate(26px, 0);
+    }
+  
+    81.8181818182% {
+      transform: translate(26px, -26px);
+    }
+  
+    90.9090909091% {
+      transform: translate(0px, -26px);
+    }
+  
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  .banter-loader__box:nth-child(5) {
+    animation: moveBox-5 4s infinite;
+  }
+  
+  @keyframes moveBox-6 {
+    9.0909090909% {
+      transform: translate(0, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(-26px, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(-26px, 0);
+    }
+  
+    36.3636363636% {
+      transform: translate(0px, 0);
+    }
+  
+    45.4545454545% {
+      transform: translate(0px, 0);
+    }
+  
+    54.5454545455% {
+      transform: translate(0px, 0);
+    }
+  
+    63.6363636364% {
+      transform: translate(0px, 0);
+    }
+  
+    72.7272727273% {
+      transform: translate(0px, 26px);
+    }
+  
+    81.8181818182% {
+      transform: translate(-26px, 26px);
+    }
+  
+    90.9090909091% {
+      transform: translate(-26px, 0px);
+    }
+  
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  .banter-loader__box:nth-child(6) {
+    animation: moveBox-6 4s infinite;
+  }
+  
+  @keyframes moveBox-7 {
+    9.0909090909% {
+      transform: translate(26px, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(26px, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(26px, 0);
+    }
+  
+    36.3636363636% {
+      transform: translate(0px, 0);
+    }
+  
+    45.4545454545% {
+      transform: translate(0px, -26px);
+    }
+  
+    54.5454545455% {
+      transform: translate(26px, -26px);
+    }
+  
+    63.6363636364% {
+      transform: translate(0px, -26px);
+    }
+  
+    72.7272727273% {
+      transform: translate(0px, -26px);
+    }
+  
+    81.8181818182% {
+      transform: translate(0px, 0px);
+    }
+  
+    90.9090909091% {
+      transform: translate(26px, 0px);
+    }
+  
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  .banter-loader__box:nth-child(7) {
+    animation: moveBox-7 4s infinite;
+  }
+  
+  @keyframes moveBox-8 {
+    9.0909090909% {
+      transform: translate(0, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(-26px, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(-26px, -26px);
+    }
+  
+    36.3636363636% {
+      transform: translate(0px, -26px);
+    }
+  
+    45.4545454545% {
+      transform: translate(0px, -26px);
+    }
+  
+    54.5454545455% {
+      transform: translate(0px, -26px);
+    }
+  
+    63.6363636364% {
+      transform: translate(0px, -26px);
+    }
+  
+    72.7272727273% {
+      transform: translate(0px, -26px);
+    }
+  
+    81.8181818182% {
+      transform: translate(26px, -26px);
+    }
+  
+    90.9090909091% {
+      transform: translate(26px, 0px);
+    }
+  
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  .banter-loader__box:nth-child(8) {
+    animation: moveBox-8 4s infinite;
+  }
+  
+  @keyframes moveBox-9 {
+    9.0909090909% {
+      transform: translate(-26px, 0);
+    }
+  
+    18.1818181818% {
+      transform: translate(-26px, 0);
+    }
+  
+    27.2727272727% {
+      transform: translate(0px, 0);
+    }
+  
+    36.3636363636% {
+      transform: translate(-26px, 0);
+    }
+  
+    45.4545454545% {
+      transform: translate(0px, 0);
+    }
+  
+    54.5454545455% {
+      transform: translate(0px, 0);
+    }
+  
+    63.6363636364% {
+      transform: translate(-26px, 0);
+    }
+  
+    72.7272727273% {
+      transform: translate(-26px, 0);
+    }
+  
+    81.8181818182% {
+      transform: translate(-52px, 0);
+    }
+  
+    90.9090909091% {
+      transform: translate(-26px, 0);
+    }
+  
+    100% {
+      transform: translate(0px, 0);
+    }
+  }
+  
+  .banter-loader__box:nth-child(9) {
+    animation: moveBox-9 4s infinite;
+  }
\ No newline at end of file