diff --git a/public/audio/launch.mp3 b/public/audio/launch.mp3 new file mode 100644 index 00000000..5be3d4ab Binary files /dev/null and b/public/audio/launch.mp3 differ diff --git a/src/App.tsx b/src/App.tsx index 2a8d515f..bc03f42b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -171,14 +171,14 @@ function App() { - - + // + + // } > }> diff --git a/src/components/counter/Counter.tsx b/src/components/counter/Counter.tsx index fdf1c858..79b72ef8 100644 --- a/src/components/counter/Counter.tsx +++ b/src/components/counter/Counter.tsx @@ -3,6 +3,7 @@ import style from "./Counter.module.css"; interface CounterProps { date: Date; + className?: string; } function calculateTimeDifference( date1: Date, @@ -23,7 +24,7 @@ function calculateTimeDifference( function addLeadingZero(number: number): string { return number < 10 ? `0${number}` : `${number}`; } -const Counter: React.FC = ({ date }) => { +const Counter: React.FC = ({ date, className }) => { // console.log(date); const [diff, setDiff] = useState({ d: 0, @@ -55,7 +56,7 @@ const Counter: React.FC = ({ date }) => { // console.log(diff); }, 1000); return ( -
+
{addLeadingZero(diff.d)} : {addLeadingZero(diff.h)} :{" "} {addLeadingZero(diff.m)} : {addLeadingZero(diff.s)}
diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx index 418f08e7..e2bf28ca 100644 --- a/src/components/topbar/topbar.tsx +++ b/src/components/topbar/topbar.tsx @@ -8,6 +8,7 @@ interface TopBarProps { setTheme: (theme: string) => void; setSidebarState: (state: boolean) => void; sidebarState: boolean; + className?: string; } const TopBar: React.FC = ({ @@ -15,6 +16,7 @@ const TopBar: React.FC = ({ theme, setSidebarState, sidebarState, + className, }) => { const [text, setText] = React.useState("Register"); const [link, setLink] = React.useState(""); @@ -44,7 +46,7 @@ const TopBar: React.FC = ({ }); return ( <> -
+
{ setSidebarState(!sidebarState); @@ -75,7 +77,7 @@ const TopBar: React.FC = ({
-
+
diff --git a/src/pages/launch/Home.tsx b/src/pages/launch/Home.tsx index dfc7f14e..169e483f 100644 --- a/src/pages/launch/Home.tsx +++ b/src/pages/launch/Home.tsx @@ -4,12 +4,20 @@ import alien from "../../assets/dehill-spacelove-1-dribble.gif"; import Counter from "../../components/counter/Counter"; import EventList from "../../components/eventlist/EventList"; import Footer from "../../components/footer/Footer"; +import TopBar from "../../components/topbar/topbar"; // for build commit interface LaunchHomeProps {} const LaunchHome: React.FC = ({}) => { return (
+ {}} + setTheme={() => {}} + sidebarState={false} + className={style.topbar} + />
= ({}) => { The countdown to awesomeness begins... - +
diff --git a/src/pages/launch/LaunchHome.module.css b/src/pages/launch/LaunchHome.module.css index c076de9a..fa6ecd5e 100644 --- a/src/pages/launch/LaunchHome.module.css +++ b/src/pages/launch/LaunchHome.module.css @@ -14,18 +14,32 @@ /* background: green; */ } } + @keyframes show { 0% { opacity: 0; } - 50% { - opacity: 0; - } 100% { opacity: 1; } } + +@keyframes alien-anim { + from { + transform: translateX(-5%); + width: 41vw; + } + to { + transform: translateX(5%); + width: 42vw; + } +} .home { + .topbar { + animation: show 2s ease-in-out forwards; + animation-delay: 3s; + opacity: 0; + } .background { position: absolute; width: 100vw; @@ -37,9 +51,10 @@ rgba(47, 104, 56, 0) 23.61%, rgba(37, 105, 48, 0.46) 83.24% ); + animation: sparkblink 0.5s ease 5 alternate; + animation-delay: 1s; .topGradient { - animation: sparkblink 0.5s ease 8 alternate; background: radial-gradient( 50% 50% at 50% 50%, var(--color-dark-green) 0%, @@ -62,7 +77,8 @@ width: 90%; height: auto; z-index: 0; - animation: show 4s ease-in-out; + /* animation: show 4s ease-in-out; */ + /* opacity: 0; */ } .alien { @@ -70,17 +86,21 @@ bottom: 8%; left: -5%; width: 100vw; - animation: show 4s ease-in-out; + animation: alien-anim 2s ease-in-out infinite alternate; + /* opacity: 0; */ } } .header { - animation: show 4s ease-in-out; + animation: show 2s ease-in-out; position: relative; width: 100vw; height: calc(100vh - var(--topbar-total-height) - var(--bottom-spacing)); .content { + animation: show 2s ease-in-out forwards; + animation-delay: 2s; + opacity: 0; position: absolute; width: 100vw; display: flex; @@ -90,6 +110,7 @@ right: 0%; top: -5%; transform: translate(0%, -0%); + & h1 { color: var(--color-black); font-family: Wallpoet; @@ -98,18 +119,21 @@ font-weight: 400; line-height: normal; margin-top: 80px; - + /* animation: show 2s ease-in-out; */ + /* opacity: 0; */ & span { display: inline-block; font-family: Wallpoet; color: var(--color-green); - animation: sparkblink 0.5s ease infinite alternate; + /* animation: sparkblink 0.5s ease infinite alternate; */ + /* opacity: 0; */ } .topLineA { + /* opacity: 0; */ position: relative; font-family: Wallpoet; display: inline-block; - + /* animation: show 2s ease-in-out; */ &::after { content: ""; position: absolute; @@ -126,6 +150,7 @@ } .mottoText { + /* opacity: 0; */ color: var(--color-text-secondary); font-family: Wallpoet; font-size: 20px; @@ -135,13 +160,16 @@ margin-top: 20px; } .daysLeft { + /* opacity: 0; */ color: var(--color-orange); font-size: 15px; margin-top: 50px; text-align: center; + font-family: Silkscreen; } } .headerButtons { + /* opacity: 0; */ position: absolute; display: flex; align-items: end; @@ -209,7 +237,6 @@ .daysLeft { font-size: 20px; - font-family: Silkscreen; } } } diff --git a/src/pages/launch/launch.module.css b/src/pages/launch/launch.module.css index 49663a9f..50dd3cee 100644 --- a/src/pages/launch/launch.module.css +++ b/src/pages/launch/launch.module.css @@ -6,7 +6,14 @@ opacity: 1; } } - +@keyframes rotate-anim { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} .launch { width: 100vw; height: 100vh; @@ -18,6 +25,46 @@ .countDown { font-size: 80px; font-family: "Black Ops One", sans-serif; - animation: anim 1s linear infinite; + animation: anim 1.1s linear infinite; + } + + .button { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 26px; + z-index: 1; + &::before { + content: "Launch"; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background: rebeccapurple; + z-index: 0; + } + &::after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + padding: 3px; + background: linear-gradient(230deg, red, green, blue); + z-index: -1; + animation: rotate-anim 2s linear infinite; + filter: blur(10px); + } } } diff --git a/src/pages/launch/launch.tsx b/src/pages/launch/launch.tsx index 272e56fd..0fcd74ad 100644 --- a/src/pages/launch/launch.tsx +++ b/src/pages/launch/launch.tsx @@ -5,18 +5,36 @@ import { useState } from "react"; interface EventsProps {} const Launch: React.FC = ({}) => { - const [count, setCount] = useState(3); + var [count, setCount] = useState(4); const redirect = useNavigate(); - setInterval(async () => { - if (count >= 1) await setCount(count - 1); - else redirect("/home"); - }, 1000); + const onPress = () => { + count--; + setCount(count); + setInterval(async () => { + count--; + if (count == 1) { + if (!(window as any).audio) { + (window as any).audio = new Audio("/audio/launch.mp3"); + (window as any).audio.play(); + } + } + if (count >= 0) await setCount(count); + else { + redirect("/home"); + } + }, 1000); + }; return (
- {count} + {count != 4 && count}
+ {count == 4 && ( +
+ Launch +
+ )}
); };