web: GOOD ENOUGH LANDING!
i will now EAT FOOD may god save us all deo gratias
This commit is contained in:
parent
64984d0d1c
commit
7a012d55a4
4 changed files with 195 additions and 151 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,5 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap");
|
||||||
@theme {
|
@theme {
|
||||||
--font-sans: "Geist", sans-serif;
|
--font-sans: "Geist", sans-serif;
|
||||||
|
|
@ -8,3 +9,10 @@
|
||||||
font-family: Geist, sans-serif;
|
font-family: Geist, sans-serif;
|
||||||
font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
|
font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.uk-subnav > * > :first-child {
|
||||||
|
padding-left: 0.5rem !important;
|
||||||
|
padding-right: 0.5rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
<!-- https://unpkg.com/franken-ui@internal/dist/css/utilities.min.css -->
|
<!-- https://unpkg.com/franken-ui@internal/dist/css/utilities.min.css -->
|
||||||
<link rel="stylesheet" href="/css/franken-core.css" />
|
<link rel="stylesheet" href="/css/franken-core.css" />
|
||||||
<link rel="stylesheet" href="/css/franken-utilities.css" />
|
<link rel="stylesheet" href="/css/franken-utilities.css" />
|
||||||
<link rel="stylesheet" href="/css/styles.css"/>
|
<link rel="stylesheet" href="/css/styles.css" />
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const htmlElement = document.documentElement;
|
const htmlElement = document.documentElement;
|
||||||
|
|
@ -72,10 +72,29 @@
|
||||||
></script>
|
></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-background text-foreground">
|
<body class="bg-background text-foreground">
|
||||||
|
<main>
|
||||||
|
<section
|
||||||
|
id="landing-hero"
|
||||||
|
class="uk-inline h-[90vh] h-[90svh] overflow-hidden"
|
||||||
|
>
|
||||||
|
<!-- hero image -->
|
||||||
|
<img
|
||||||
|
class="!h-[90vh] !h-[90svh] w-screen object-cover"
|
||||||
|
src="https://files.catbox.moe/o25s1k.JPG"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<!-- <video
|
||||||
|
class="!h-[90vh] !h-[90svh] w-screen object-cover"
|
||||||
|
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
playsinline
|
||||||
|
></video> -->
|
||||||
|
|
||||||
<!-- navbar -->
|
<!-- navbar -->
|
||||||
<header
|
<header
|
||||||
class="uk-position-z-index p-4 flex justify-between !bg-[hsl(var(--muted))]/75 !backdrop-blur-md text-muted-foreground"
|
class="uk-position-top !uk-position-z-index p-4 flex justify-between !bg-[hsl(var(--muted))]/75 !backdrop-blur-md text-muted-foreground"
|
||||||
data-uk-sticky
|
data-uk-sticky="position:top"
|
||||||
>
|
>
|
||||||
<div class="flex flex-row gap-2">
|
<div class="flex flex-row gap-2">
|
||||||
<img src="/png/logo-icon.png" alt="wirm logo" class="!h-[2.5rem]" />
|
<img src="/png/logo-icon.png" alt="wirm logo" class="!h-[2.5rem]" />
|
||||||
|
|
@ -96,143 +115,156 @@
|
||||||
</a>
|
</a>
|
||||||
<div data-uk-dropdown="mode: click">
|
<div data-uk-dropdown="mode: click">
|
||||||
<ul class="uk-dropdown-nav uk-nav">
|
<ul class="uk-dropdown-nav uk-nav">
|
||||||
<li id="button-auth-logIn"><a href="/login">Log In</a></li>
|
<li id="nav-auth-logIn">
|
||||||
<li id="button-auth-signUp"><a href="/signup">Sign Up</a></li>
|
<a href="/login">Log In</a>
|
||||||
<li id="button-auth-logOut">
|
</li>
|
||||||
|
<li id="nav-auth-signUp">
|
||||||
|
<a href="/signup">Sign Up</a>
|
||||||
|
</li>
|
||||||
|
<li id="nav-auth-logOut">
|
||||||
<a href="/profile?logOut=true">Log Out</a>
|
<a href="/profile?logOut=true">Log Out</a>
|
||||||
</li>
|
</li>
|
||||||
<li id="button-auth-profile">
|
<li id="nav-auth-profile">
|
||||||
<a href="/profile">Profile</a>
|
<a href="/profile">Profile</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="/booth">Booth Management</a></li>
|
<li><a href="/booth">Manage Booth</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- content -->
|
<!-- hero left text: game name -->
|
||||||
<main>
|
<div
|
||||||
<section id="landing-hero">
|
class="uk-position-bottom-left uk-position-md md:uk-position-lg md:w-[30vw] text-[hsl(var(--background))] dark:text-[hsl(var(--foreground))]"
|
||||||
<div class="uk-cover-container h-[80vh] h-[80svh]">
|
>
|
||||||
<img src="https://files.catbox.moe/o25s1k.JPG" alt="" data-uk-cover />
|
<h1 class="uk-h1 !text-6xl">Echoes Behind Closed Doors</h1>
|
||||||
<video
|
<p class="uk-text-lead mt-4">Potential Subtitle (TODO)</p>
|
||||||
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
playsinline
|
|
||||||
data-uk-cover
|
|
||||||
></video>
|
|
||||||
</div>
|
|
||||||
<div class="uk-inline">
|
|
||||||
<div class="uk-position-bottom-left uk-position-md">
|
|
||||||
<h1 class="uk-h1 !text-6xl text-background">Echoes Behind Closed Doors</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- hero right text: registration qr code -->
|
||||||
|
<figure
|
||||||
|
class="uk-position-bottom-right uk-position-md md:uk-position-lg max-md:hidden w-[25vw] w-[25svw] h-[31vw] h-[31svw] rounded-2xl bg-[hsl(var(--foreground))]/70 text-[hsl(var(--background))] dark:bg-[hsl(var(--background))]/60 dark:text-[hsl(var(--foreground))] !backdrop-blur-lg flex flex-col justify-center items-center text-center p-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="hero-svg"
|
||||||
|
class="uk-placeholder min-w-fit h-auto aspect-square !rounded-md overflow-hidden"
|
||||||
|
>
|
||||||
|
<div class="uk-position-center" data-uk-spinner></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<figcaption class="uk-paragraph fit-content">
|
||||||
|
<span class="font-bold text-xl">Scan to Register</span>
|
||||||
|
<br />
|
||||||
|
or, scroll down for more info
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="uk-container">
|
<section class="uk-container my-20">
|
||||||
<h1 class="uk-h1">The Joke Tax Chronicles</h1>
|
<h2 class="uk-h2">Title</h2>
|
||||||
|
|
||||||
<p class="uk-text-lead mt-4">
|
<p class="uk-text-lead mt-4">Subtitle</p>
|
||||||
Once upon a time, in a far-off land, there was a very lazy king who
|
|
||||||
spent all day lounging on his throne. One day, his advisors came to
|
|
||||||
him with a problem: the kingdom was running out of money.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h2 class="uk-h2 mt-4">The King's Plan</h2>
|
|
||||||
|
|
||||||
<p class="uk-paragraph">
|
<p class="uk-paragraph">
|
||||||
The king thought long and hard, and finally came up with a
|
Blowy red vixens fight for
|
||||||
<a class="uk-link" href="#">brilliant plan</a>: he would tax the jokes
|
<a class="uk-link" href="#">a quick jump.</a>
|
||||||
in the kingdom.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<blockquote class="uk-blockquote">
|
<blockquote class="uk-blockquote">
|
||||||
"After all," he said, "everyone enjoys a good joke, so it's only fair
|
"Sphinx of black quartz, judge my vow!"
|
||||||
that they should pay for the privilege."
|
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
<h3 class="uk-h3 mt-4">The Joke Tax</h3>
|
|
||||||
|
|
||||||
<p class="uk-paragraph">
|
<p class="uk-paragraph">
|
||||||
The king's subjects were not amused. They grumbled and complained, but
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
the king was firm:
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
</p>
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
<ul class="uk-list uk-list-disc mt-4">
|
|
||||||
<li>1st level of puns: 5 gold coins</li>
|
|
||||||
<li>2nd level of jokes: 10 gold coins</li>
|
|
||||||
<li>3rd level of one-liners : 20 gold coins</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p class="uk-paragraph">
|
|
||||||
As a result, people stopped telling jokes, and the kingdom fell into a
|
|
||||||
gloom. But there was one person who refused to let the king's
|
|
||||||
foolishness get him down: a court jester named Jokester.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3 class="uk-h3 mt-4">Jokester's Revolt</h3>
|
|
||||||
|
|
||||||
<p class="uk-paragraph">
|
|
||||||
Jokester began sneaking into the castle in the middle of the night and
|
|
||||||
leaving jokes all over the place: under the king's pillow, in his
|
|
||||||
soup, even in the royal toilet. The king was furious, but he couldn't
|
|
||||||
seem to stop Jokester.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="uk-paragraph">
|
<p class="uk-paragraph">
|
||||||
And then, one day, the people of the kingdom discovered that the jokes
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
left by Jokester were so funny that they couldn't help but laugh. And
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
once they started laughing, they couldn't stop.
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
</p>
|
inventore laborum voluptas fugit rem.
|
||||||
|
|
||||||
<h3 class="uk-h3 mt-4">The People's Rebellion</h3>
|
|
||||||
|
|
||||||
<p class="uk-paragraph">
|
|
||||||
The people of the kingdom, feeling uplifted by the laughter, started
|
|
||||||
to tell jokes and puns again, and soon the entire kingdom was in on
|
|
||||||
the joke.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<table class="uk-table uk-table-divider uk-table-striped mt-4">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>King's Treasury</th>
|
|
||||||
<th>People's happiness</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Empty</td>
|
|
||||||
<td>Overflowing</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Modest</td>
|
|
||||||
<td>Satisfied</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Full</td>
|
|
||||||
<td>Ecstatic</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<p class="uk-paragraph">
|
|
||||||
The king, seeing how much happier his subjects were, realized the
|
|
||||||
error of his ways and repealed the joke tax. Jokester was declared a
|
|
||||||
hero, and the kingdom lived happily ever after.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="uk-paragraph">
|
<p class="uk-paragraph">
|
||||||
The moral of the story is: never underestimate the power of a good
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
laugh and always be careful of bad ideas.
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="uk-paragraph">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="uk-paragraph">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="uk-paragraph">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="uk-paragraph">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="uk-paragraph">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="uk-paragraph">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="uk-paragraph">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="uk-paragraph">
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam qui,
|
||||||
|
eligendi similique aspernatur est reiciendis iusto sunt laudantium
|
||||||
|
repudiandae quos blanditiis. Asperiores aspernatur, minus quae
|
||||||
|
inventore laborum voluptas fugit rem.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- footer -->
|
<script
|
||||||
<footer></footer>
|
type="application/javascript"
|
||||||
|
src="/js/nayuki-qrcodegen-v1.8.0.js"
|
||||||
|
></script>
|
||||||
|
<script type="application/javascript" src="/js/qrcode.js"></script>
|
||||||
|
<script>
|
||||||
|
const style = window.getComputedStyle(document.body);
|
||||||
|
const svg = generateQrCode(window.location.origin + "/signup.html");
|
||||||
|
document.getElementById("hero-svg").innerHTML = svg;
|
||||||
|
document.getElementById("hero-svg").classList.remove("uk-placeholder");
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -30,17 +30,21 @@ function toSvgString(qr, border, lightColor, darkColor) {
|
||||||
parts.push(`M${x + border},${y + border}h1v1h-1z`);
|
parts.push(`M${x + border},${y + border}h1v1h-1z`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return `<?xml version="1.0" encoding="UTF-8"?>
|
return `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 ${
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 ${
|
|
||||||
qr.size + border * 2
|
qr.size + border * 2
|
||||||
} ${qr.size + border * 2}" stroke="none">
|
} ${
|
||||||
<rect width="100%" height="100%" fill="${lightColor}"/>
|
qr.size + border * 2
|
||||||
<path d="${parts.join(" ")}" fill="${darkColor}"/>
|
}" stroke="none" style="width: 100%;" class="object-fit"><rect width="100%" height="100%" fill="${lightColor}"/><path d="${parts.join(
|
||||||
</svg>
|
" "
|
||||||
|
)}" fill="${darkColor}"/></svg>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateQrCode(text) {
|
function generateQrCode(text) {
|
||||||
return toSvgString(qrcodegen.QrCode.encodeText(text, qrcodegen.QrCode.Ecc.MEDIUM), 4);
|
return toSvgString(
|
||||||
|
qrcodegen.QrCode.encodeText(text, qrcodegen.QrCode.Ecc.MEDIUM),
|
||||||
|
3,
|
||||||
|
"#ffffff", // light
|
||||||
|
"#000000" // dark
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue