Skip to content

Commit

Permalink
Use yellow gradient, add WIP qr code
Browse files Browse the repository at this point in the history
  • Loading branch information
@WhiteHoodHacker
WhiteHoodHacker committed Sep 2, 2023
1 parent a2c2e28 commit c8e2fe7
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 17 deletions.
22 changes: 15 additions & 7 deletions src/app/(signage)/signage/cif/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import { motion, useAnimate } from "framer-motion";
import Countdown from "@/components/Countdown";
import LogoReveal from "@/components/LogoReveal";
import QRCode from "@/components/QRCode";

async function seqFromRight(scope: any, animate: any, delay: number = 0) {
await animate(scope.current, {
Expand Down Expand Up @@ -46,16 +47,20 @@ export default function SignagePage() {
setLoaded(true);
seqFromRight(scopeHeader, animateScopeHeader, 300);
seqFadeIn(scopeHeader, animateScopeHeader, 300);
seqFadeIn(scopeTimer, animateScopeTimer, 500);
seqFadeIn(scopeBody, animateScopeBody, 750);
seqFadeIn(scopeDetails, animateScopeDetails, 1200);
seqFadeIn(scopeBody, animateScopeBody, 500);
seqFadeIn(scopeTimer, animateScopeTimer, 1000);
seqFadeIn(scopeDetails, animateScopeDetails, 1000);
}, 4000);
// Automatically refresh the page
setTimeout(() => {
location.reload();
}, 1000 * 60);
}, []);

return (
<motion.div
layout="position"
className="m-auto w-[94vw] h-[90vh] flex flex-col grow-1 shrink-0 relative"
className="m-auto w-[92vw] h-[88vh] flex flex-col grow-1 shrink-0 relative"
>
<div className="flex flex-row justify-between">
<div className="flex flex-col">
Expand Down Expand Up @@ -99,17 +104,20 @@ export default function SignagePage() {
</div>
<motion.div
layout="position"
className="opacity-0 flex flex-col flex-grow-1 flex-shrink-0 mt-[6rem]"
className="opacity-0 flex flex-row flex-grow-1 flex-shrink-0 mt-[6rem]"
ref={scopeBody}
>
<div>
<div className="flex flex-col">
<p className="text-[8rem] mb-4 leading-none font-medium">
A beginner-friendly<br /> hacking competition.
A beginner-friendly<br /> <span className="text-yellow-dark">hacking</span> competition.
</p>
<p className="text-[4rem] leading-none">
Capture the flags. Teams of two.
</p>
</div>
<div className="flex flex-col ml-auto">
<QRCode />
</div>
</motion.div>
<motion.div
layout="position"
Expand Down
28 changes: 28 additions & 0 deletions src/app/(site)/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import "@/styles/globals.css";
import "@/styles/fonts.css";
import "@/styles/signage.css";

export const metadata = {
title: "Fall CTF 2023",
description: "A CTF by SIGPwny",
};

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
{/* <PreloadResources /> */}
{/* <Seo /> */}
<body className="font-sans">
<div className="container min-h-screen">
{/* Navbar */}
{children}
</div>
{/* Footer */}
</body>
</html>
);
};
14 changes: 7 additions & 7 deletions src/components/Countdown/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,46 +82,46 @@ export default function Countdown({ time_start, time_close }: Props) {
{timer.days > 0 ? (
<>
<div className="flex flex-col">
<div className="text-[8rem] font-bold">
<div className="text-[7rem] font-bold">
{formatNumber(timer.days)}
</div>
<p>
{timer.days === 1 ? "Day" : "Days"}
</p>
</div>
<span className="text-[8rem] font-bold">
<span className="text-[7rem] font-bold">
:
</span>
</>
) : null}
{timer.days > 0 || timer.hours > 0 ? (
<>
<div className="flex flex-col">
<div className="text-[8rem] font-bold">
<div className="text-[7rem] font-bold">
{formatNumber(timer.hours)}
</div>
<p>
{timer.hours === 1 ? "Hour" : "Hours"}
</p>
</div>
<span className="text-[8rem] font-bold">
<span className="text-[7rem] font-bold">
:
</span>
</>
) : null}
<div className="flex flex-col">
<div className="text-[8rem] font-bold">
<div className="text-[7rem] font-bold">
{formatNumber(timer.minutes)}
</div>
<p>
{timer.minutes === 1 ? "Min" : "Mins"}
</p>
</div>
<span className="text-[8rem] font-bold">
<span className="text-[7rem] font-bold">
:
</span>
<div className="flex flex-col">
<div className="text-[8rem] font-bold">
<div className="text-[7rem] font-bold">
{formatNumber(timer.seconds)}
</div>
<p>
Expand Down
73 changes: 70 additions & 3 deletions src/components/LogoReveal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,88 @@ export default function LogoReveal() {
};
const char_variant = {
hidden: {
fill: "rgb(0, 0, 0)"
fill: "rgba(0, 0, 0, 0.0)"
},
visible: {
fill: "rgb(255, 255, 255)",
fill: "url(#YellowGradient)",
transition: {
duration: 0.2
}
}
};
const transition = {
duration: 5,
repeat: Infinity,
repeatType: "loop"
};
const dark_yellow = "rgba(255, 178, 0, 1.0)";
const light_yellow = "rgba(255, 255, 0, 1.0)";
return (
<motion.svg
viewBox="0 0 1024 150"
display="block"
fontSize="10rem"
fontWeight="bold"
>
<linearGradient
id="YellowGradient"
>
<motion.stop
offset="0%"
animate={{
stopColor: [dark_yellow, light_yellow, dark_yellow, dark_yellow, dark_yellow, dark_yellow, dark_yellow],
transition: {
duration: 3,
repeat: Infinity,
repeatType: "loop"
}
}}
/>
<motion.stop
offset="25%"
animate={{
stopColor: [dark_yellow, dark_yellow, light_yellow, dark_yellow, dark_yellow, dark_yellow, dark_yellow],
transition: {
duration: 3,
repeat: Infinity,
repeatType: "loop"
}
}}
/>
<motion.stop
offset="50%"
animate={{
stopColor: [dark_yellow, dark_yellow, dark_yellow, light_yellow, dark_yellow, dark_yellow, dark_yellow],
transition: {
duration: 3,
repeat: Infinity,
repeatType: "loop"
}
}}
/>
<motion.stop
offset="75%"
animate={{
stopColor: [dark_yellow, dark_yellow, dark_yellow, dark_yellow, light_yellow, dark_yellow, dark_yellow],
transition: {
duration: 3,
repeat: Infinity,
repeatType: "loop"
}
}}
/>
<motion.stop
offset="100%"
animate={{
stopColor: [dark_yellow, dark_yellow, dark_yellow, dark_yellow, dark_yellow, light_yellow, dark_yellow],
transition: {
duration: 3,
repeat: Infinity,
repeatType: "loop"
}
}}
/>
</linearGradient>
<symbol id="s-text">
<text
textAnchor="start"
Expand All @@ -40,6 +106,7 @@ export default function LogoReveal() {
variants={text_variant}
initial="hidden"
animate="visible"
// fill="url(#YellowGradient)"
>
{string.split("").map((char, i) => (
<motion.tspan
Expand All @@ -66,7 +133,7 @@ export default function LogoReveal() {
ease: cubicBezier(0.995, 0.200, 0.435, 0.960),
}}
strokeWidth={2}
stroke="rgb(255, 255, 255)"
stroke="url(#YellowGradient)"
>
</motion.use>
</g>
Expand Down
131 changes: 131 additions & 0 deletions src/components/QRCode.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
export default function QRCode() {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1155 1155" xmlSpace="preserve">
<style type="text/css" dangerouslySetInnerHTML={{__html: "\n\t.st0{fill:#FFB200;}\n\t.st1{fill:none;}\n" }} />
<g transform="translate(70,70)">
<g>
<rect x={280} className="st0" width={35} height={35} />
<polygon className="st0" points="630,35 665,35 665,0 630,0 595,0 560,0 560,35 595,35 " />
<polygon className="st0" points="420,70 420,35 455,35 455,70 490,70 490,105 525,105 525,70 560,70 560,35 525,35 525,0 490,0 455,0
420,0 385,0 385,35 350,35 350,70 385,70 " />
<rect x={665} y={35} className="st0" width={35} height={35} />
<rect x={595} y={70} className="st0" width={35} height={35} />
<polygon className="st0" points="665,175 665,140 665,105 630,105 630,140 595,140 595,175 630,175 " />
<rect x={490} y={210} className="st0" width={35} height={35} />
<rect x={630} y={210} className="st0" width={35} height={35} />
<polygon className="st0" points="350,280 350,315 385,315 385,280 385,245 385,210 350,210 350,245 " />
<polygon className="st0" points="560,280 595,280 595,315 630,315 630,280 630,245 595,245 595,210 595,175 560,175 560,210 560,245
525,245 525,280 " />
<rect x={140} y={280} className="st0" width={35} height={35} />
<path className="st0" d="M980,280v35h-35h-35v-35h-35h-35h-35h-35h-35v-35v-35v-35h-35h-35v35h35v35h-35v35v35h35h35v35h35v35h35v35
v35h-35v35h35h35v35h35h35h35v-35h35v35h-35v35v35v35h35v35h-35v35h35v35v35v35h35v-35v-35v-35v-35v-35v-35h-35v-35h35v-35v-35
v-35h-35v-35h35v-35v-35v-35v-35H980z M980,385h-35v35v35h-35h-35h-35v-35v-35v-35h35h35h35h35V385z" />
<polygon className="st0" points="245,350 280,350 280,315 315,315 315,280 315,245 315,210 350,210 350,175 350,140 350,105 315,105
280,105 280,140 280,175 280,210 280,245 280,280 245,280 210,280 210,315 245,315 " />
<polygon className="st0" points="595,315 560,315 560,350 560,385 595,385 595,350 " />
<rect x={630} y={315} className="st0" width={35} height={35} />
<rect x={105} y={350} className="st0" width={35} height={35} />
<polygon className="st0" points="245,385 245,350 210,350 210,315 175,315 175,350 175,385 210,385 " />
<polygon className="st0" points="70,420 70,385 35,385 35,350 70,350 70,315 35,315 35,280 0,280 0,315 0,350 0,385 0,420 0,455
35,455 35,420 " />
<rect x={245} y={385} className="st0" width={35} height={35} />
<rect x={875} y={385} className="st0" width={35} height={35} />
<polygon className="st0" points="175,455 175,420 175,385 140,385 140,420 105,420 105,455 140,455 " />
<rect x={210} y={420} className="st0" width={35} height={35} />
<polygon className="st0" points="105,525 105,560 140,560 140,525 175,525 175,560 210,560 210,525 245,525 245,490 210,490 175,490
140,490 105,490 105,455 70,455 35,455 35,490 35,525 0,525 0,560 35,560 70,560 70,525 " />
<rect x={280} y={490} className="st0" width={35} height={35} />
<polygon className="st0" points="420,490 455,490 455,455 420,455 420,420 385,420 385,455 350,455 350,420 350,385 385,385 420,385
455,385 455,350 490,350 525,350 525,315 490,315 490,280 490,245 455,245 455,210 455,175 455,140 455,105 420,105 420,140
420,175 385,175 385,210 420,210 420,245 420,280 455,280 455,315 420,315 420,350 385,350 350,350 315,350 280,350 280,385
315,385 315,420 280,420 280,455 315,455 315,490 350,490 350,525 315,525 315,560 350,560 350,595 385,595 385,560 420,560
420,525 " />
<rect x={70} y={560} className="st0" width={35} height={35} />
<rect y={595} className="st0" width={35} height={35} />
<polygon className="st0" points="175,595 175,560 140,560 140,595 105,595 105,630 140,630 175,630 210,630 210,595 " />
<polygon className="st0" points="280,595 280,560 280,525 245,525 245,560 210,560 210,595 245,595 245,630 210,630 210,665 245,665
280,665 280,630 315,630 350,630 350,595 315,595 " />
<polygon className="st0" points="560,630 560,665 595,665 595,630 595,595 560,595 " />
<polygon className="st0" points="665,595 630,595 630,630 630,665 665,665 665,630 " />
<path className="st0" d="M875,595h-35h-35h-35v-35v-35h-35v-35v-35h35v-35h-35v-35v-35h-35v35h-35h-35h-35v35h-35h-35v-35h-35v35h-35
v35h35h35h35h35h35v-35h35h35v35v35v35v35v35h35v35h-35v35h-35v35h35v35h-35v-35h-35v35h-35v35h35v35h35v35v35h35h35h35h35h35h35
h35v-35h-35v-35h35h35v-35h-35h-35v-35h35v-35h-35v-35h-35h-35h-35v35h-35v-35h35v-35h35h35h35h35v-35H875z M770,735h35h35v35v35
v35h-35h-35h-35v-35v-35v-35H770z" />
<rect x={910} y={630} className="st0" width={35} height={35} />
<rect x={140} y={665} className="st0" width={35} height={35} />
<rect x={595} y={665} className="st0" width={35} height={35} />
<polygon className="st0" points="70,700 35,700 0,700 0,735 35,735 70,735 105,735 140,735 140,700 105,700 " />
<polygon className="st0" points="245,700 210,700 210,735 245,735 280,735 280,700 " />
<polygon className="st0" points="560,700 525,700 525,665 490,665 490,700 455,700 455,735 490,735 525,735 560,735 595,735 595,700
" />
<polygon className="st0" points="350,770 350,735 385,735 385,770 350,770 350,805 385,805 420,805 420,840 455,840 455,875 455,910
455,945 490,945 490,910 525,910 525,875 490,875 490,840 490,805 525,805 525,840 560,840 595,840 595,805 560,805 560,770
525,770 490,770 455,770 420,770 420,735 420,700 455,700 455,665 455,630 490,630 525,630 525,595 490,595 490,560 490,525
525,525 525,560 560,560 595,560 595,595 630,595 630,560 630,525 665,525 665,490 630,490 595,490 595,525 560,525 560,490
525,490 490,490 455,490 455,525 455,560 420,560 420,595 420,630 420,665 385,665 350,665 350,700 315,700 315,735 280,735
280,770 280,805 315,805 315,770 " />
<rect x={770} y={770} className="st0" width={35} height={35} />
<rect x={315} y={805} className="st0" width={35} height={35} />
<rect x={280} y={840} className="st0" width={35} height={35} />
<rect x={385} y={840} className="st0" width={35} height={35} />
<rect x={980} y={840} className="st0" width={35} height={35} />
<polygon className="st0" points="350,875 315,875 315,910 350,910 385,910 385,875 " />
<polygon className="st0" points="595,875 560,875 560,910 560,945 595,945 595,980 630,980 630,1015 665,1015 665,980 665,945
630,945 630,910 595,910 " />
<rect x={630} y={875} className="st0" width={35} height={35} />
<polygon className="st0" points="945,910 910,910 875,910 875,945 840,945 840,980 840,1015 875,1015 875,980 910,980 910,945
945,945 945,980 945,1015 980,1015 980,980 1015,980 1015,945 1015,910 980,910 980,875 945,875 " />
<rect x={385} y={910} className="st0" width={35} height={35} />
<rect x={735} y={910} className="st0" width={35} height={35} />
<polygon className="st0" points="700,980 700,1015 735,1015 735,980 735,945 700,945 " />
<rect x={280} y={980} className="st0" width={35} height={35} />
<polygon className="st0" points="525,980 525,945 490,945 490,980 455,980 455,945 420,945 420,980 385,980 350,980 350,1015
385,1015 420,1015 455,1015 490,1015 525,1015 560,1015 595,1015 595,980 560,980 " />
<rect x={770} y={980} className="st0" width={35} height={35} />
</g>
<g transform="translate(0,0) scale(2.45, 2.45)">
<g>
<g>
<rect x={15} y={15} className="st1" width={70} height={70} />
<path className="st0" d="M85,0C73.9,0,9.4,0,0,0c0,20.6,0,79.4,0,100c20.6,0,79.4,0,100,0c0-20.6,0-79.4,0-100H85z M85,85H15V15h70
V85z" />
</g>
</g>
</g>
<g transform="translate(770,0) scale(2.45, 2.45)">
<g>
<g>
<rect x={15} y={15} className="st1" width={70} height={70} />
<path className="st0" d="M85,0C73.9,0,9.4,0,0,0c0,20.6,0,79.4,0,100c20.6,0,79.4,0,100,0c0-20.6,0-79.4,0-100H85z M85,85H15V15h70
V85z" />
</g>
</g>
</g>
<g transform="translate(0,770) scale(2.45, 2.45)">
<g>
<g>
<rect x={15} y={15} className="st1" width={70} height={70} />
<path className="st0" d="M85,0C73.9,0,9.4,0,0,0c0,20.6,0,79.4,0,100c20.6,0,79.4,0,100,0c0-20.6,0-79.4,0-100H85z M85,85H15V15h70
V85z" />
</g>
</g>
</g>
<g transform="translate(70,70) scale(1.05, 1.05)">
<g>
<rect x={0} y={0} className="st0" width={100} height={100} />
</g>
</g>
<g transform="translate(840,70) scale(1.05, 1.05)">
<g>
<rect x={0} y={0} className="st0" width={100} height={100} />
</g>
</g>
<g transform="translate(70,840) scale(1.05, 1.05)">
<g>
<rect x={0} y={0} className="st0" width={100} height={100} />
</g>
</g>
</g>
</svg>
);
};
4 changes: 4 additions & 0 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ const config: Config = {
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
colors: {
"yellow-dark": "rgba(255, 178, 0, 1.0)",
"yellow-light": "rgba(255, 255, 0, 1.0)",
},
container: {
center: true,
},
Expand Down

0 comments on commit c8e2fe7

Please sign in to comment.