The code for the zedshaw.games demo site for learnjsthehardway.com.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

460 lines
13 KiB

<script>
import Layout from "$/rendered/Layout.svelte";
import Icon from "$/client/components/Icon.svelte";
import Video from "$/client/components/Video.svelte";
import { Hydrate } from '@jamcart/7ty/components';
</script>
<svelte:head>
<link rel="stylesheet" href="/blockstart.css" />
</svelte:head>
<style>
:root {
--color-hero: hsl(242, 80%, 12%);
--color-tickets: hsl(353, 95%, 60%);
--color-tickets-hover: hsl(339, 100%, 60%);
--color-blue-title: hsl(217, 90%, 51%);
}
action-header {
display: flex;
justify-content: space-evenly;
background-color: var(--color-hero);
color: var(--value9);
}
main-hero {
display: flex;
padding: 1rem;
background-color: var(--color-hero);
flex-direction: column;
color: var(--value9);
width: 100vw;
}
hero-content {
display: flex;
flex-direction: column;
max-width: min(var(--width-content), 80vw);
text-align: center;
}
get-tickets {
display: flex;
flex-direction: column;
padding-left: 1rem;
padding-right: 1rem;
background-color: var(--value3);
width: min(var(--width-content) - 10vw, 70vw);
max-width: min(var(--width-content) - 10vw, 70vw);
border-radius: var(--border-radius);
background-color: var(--color-tickets);
color: var(--value9);
text-align: center;
}
get-tickets:hover {
background-color: var(--color-tickets-hover);
transform: translate3d(0px, -10px, 0px);
transition: 0.5s;
box-shadow: var(--box-shadow) var(--value3);
}
get-tickets > h2,
get-tickets > h6 {
margin-top: 0px;
margin-bottom: 0px;
}
get-tickets > h6 {
text-shadow: 1px 1px 1px var(--value3);
}
get-tickets.small {
width: 100%;
font-size: 0.8em;
justify-content: space-between;
}
testimonial {
display: flex;
border: 1px solid var(--value5);
border-radius: var(--border-radius);
max-width: 90vw;
}
testimonial > photo {
display: flex;
width: 100%;
flex: 0 0 50%;
}
testimonial > statement {
padding-right: 1rem;
}
testimonial.large {
align-items: unset;
border: unset;
}
testimonial.large > photo {
width: 100%;
position: unset;
justify-content: center;
}
testimonial > statement h6 {
color: var(--color-blue-title);
margin-top: 0px;
margin-bottom: 0.5rem;
}
testimonial.dark {
background-color: var(--color-hero);
}
testimonial.dark {
color: var(--value9);
}
testimonial.dark h6 {
color: var(--value9);
}
question-grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
max-width: min(80vw, var(--width-content));
align-self: center;
}
ticket-sell {
display: flex;
background-color: var(--color-hero);
padding: 1rem;
max-width: min(80vw, var(--width-content));
color: var(--value9);
border-radius: var(--border-radius);
}
ticket-sell > photo {
display: flex;
min-width: 50%;
padding: 1rem;
align-self: start;
}
ticket-sell > statement {
display: block;
padding-left: 0.5rem;
}
pitch {
display: flex;
flex-direction: column;
padding: 1rem;
max-width: min(80vw, var(--width-content));
align-self: center;
}
pitch > h2,
pitch > h6,
pitch > h4 {
text-align: center;
}
pitch.dark {
background-color: var(--color-hero);
color: var(--value9);
border-radius: var(--border-radius);
}
pitch.dark a {
color: var(--value8);
}
what-you-get {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.5rem;
max-width: min(80vw, var(--width-content));
align-self: center;
}
video-display {
display: flex;
width: 80%;
max-width: 80%;
}
em {
color: var(--color-tickets);
font-style: normal;
}
a#reg {
text-decoration: none;
filter: unset;
}
h1.giant {
font-size: 3.5em;
}
</style>
<Layout fixed={ true } fullwidth={ true } centered={ true } testid="home-page">
<main-hero>
<hero-content class="center">
<h2>Zed Shaw Games</h2>
<h1 class="giant">UNLEASH YOUR <em>OVER POWERED</em> GAMING</h1>
<video-display>
<Hydrate component={ Video } props={ {
source: "/media/videos/Replay_2022-06-09_17-47-57.720.webm",
autoplay: true,
controls: false,
muted: true,
loop: true }
}/>
</video-display>
<p>There has never been so many games where you need OVER POWERED gaming skills to <b>unleash</b> your full potential. Register today for ZSG and <b>git gud</b>.</p>
<a id="reg" href="/client/#/register/">
<get-tickets class="center">
<h2>REGISTER FOR FREE</h2>
<h6>Join Zed Virtually, At Random Times.</h6>
</get-tickets>
</a>
<h6>Prefer to speak to someone about ZSG? Tough. It's 2022. You can't talk to anyone.</h6>
</hero-content>
</main-hero>
<spacer style="--height: 4rem;" />
<testimonial class="center">
<photo class="center">
<img style="width: 240px; max-width: 240px;" src="/media/images/elden_ring_radahn_armor.png">
</photo>
<statement>
<h6>Nada, Future Elden Lord</h6>
<p><i>"Zed take me as wretch. He give me Brick Hammer. Nada like brick hammer. Brick hammer smash Troll. Brick hammer smash Rune Bear. Nada be Elden Lord because Zed? You watch Zed or Nada bonk you."</i></p>
</statement>
</testimonial>
<spacer />
<pitch>
<h6 style="color: var(--color-tickets);">FEEL LIKE THE WORLD IS GOING CRAZY? YOU'RE NOT ALONE...</h6>
<h1 style="text-align: center;">Zed plays only games where everyone is crazy. You'll feel right at home.</h1>
</pitch>
<spacer/>
<question-grid>
<tile>
<left><Icon name="check-circle" /></left>
<middle>The question is...how are you going to glitch jump that exploit?</middle>
</tile>
<tile>
<left><Icon name="check-circle" /></left>
<middle>Are you going to just sit there missing every shot?</middle>
</tile>
<tile>
<left><Icon name="check-circle" /></left>
<middle>Are you going to step up and learn to use exploits?</middle>
</tile>
<tile>
<left><Icon name="check-circle" /></left>
<middle>Are you going to create the BUILD you want to play?</middle>
</tile>
</question-grid>
<spacer/>
<pitch>
<h4 style="text-align: center">If you're ready to learn from the greatest gamer in gaming history, then register for someone else's gaming site. Join ZSG if you want to have <em>fun</em>.</h4>
</pitch>
<spacer />
<testimonial class="center dark">
<photo class="center">
<img style="width: 240px; max-width: 240px;" src="/media/images/windbound_kara.png">
</photo>
<statement>
<h6>REGISTRATION IS SO <em>OP</em></h6>
<a id="reg" href="/client/#/register/">
<get-tickets class="center small">
<h2>REGISTER FOR FREE</h2>
<h6>Join Zed Virtually. He Dies A Lot.</h6>
</get-tickets>
</a>
<p><i>"Zed has been a capable guide on my adventures."</i> -- <b>Kara</b></p>
</statement>
</testimonial>
<spacer />
<testimonial class="center large">
<statement>
<h6><em>IS THIS FOR REAL?</em></h6>
<h4>
Just like gaming, it's as real as you want it to be.
</h4>
<p>
This page is a work of parody of <a href="https://www.upwvirtual.com/buy-upw">Tony Robbin's Unleash the Power Within</a> and done as a demonstration for the <a href="https://learnjsthehardway.com/">Learn JavaScript the Hard Way</a> course. I am not a supporter of Tony's conference or affiliated with it, but it's only fair I link to it since I'm poking fun at it.
</p>
<p>
The gaming on the site is for real, and I periodically announce live sessions on my Twitter at <a href="https://twitter.com/lzsthw">@lzsthw</a>. If you register then eventually I'll get an email notification system working that will notify you via email if you want. Things to know about the code for the site:
</p>
<ul class="no-flex">
<li>The site is written by me and you can see it at <a href="https://git.learnjsthehardway.com/learn-javascript-the-hard-way/zedshaw.games">my git repository</a>.</li>
<li>This project is not open source, but you can view it and learn from it.</li>
<li>It's written in JavaScript, and I wrote the code for the entire stack.</li>
<li>If you want to use the code for this site, then <a href="https://learnjsthehardway.com/client/#/register/">register for the course</a>.</li>
</ul>
</statement>
<photo>
<img src="/media/images/icarus_scene_1.jpg">
</photo>
</testimonial>
<spacer />
<ticket-sell class="center">
<photo>
<a id="reg" href="/client/#/register/">
<get-tickets class="small">
<h2>REGISTER FOR FREE</h2>
<h6>Join Zed Virtually. It's Fun!</h6>
</get-tickets>
</a>
</photo>
<statement>
<h1>GET YOUR OP SUB NOW!</h1>
<p>What does a ZSG subscription get you?</p>
<ul>
<li>It's FREE baby!</li>
<li>You don't need to leave your home!</li>
<li>Watch <em>expert</em> OP gaming!</li>
<li>Hide from your terrible family and pets!</li>
</ul>
</statement>
</ticket-sell>
<pitch>
<p>Is this ridiculous? You bet. Zed isn't a professional gamer, so why bother registering for his site?</p>
<p>Because it's different. It's a personal website created by one person that actually hosts and streams video. It's not beholden to any corporation.</p>
<p>That means Zed can do what he wants. Swear. Be uncool. Be controversial. Whatever is most entertaining. That independence is the real <em>OP</em> move.</p>
</pitch>
<pitch>
<h2>This is Zed's <em>FIRST</em> gaming website, so <a href="/client/#/register/">register now</a> to see how it develops.</h2>
</pitch>
<spacer />
<video-display class="center">
<Hydrate component={ Video } props={ {
source: "/media/videos/Replay_2022-06-09_20-34-05.720.webm",
controls: false,
autoplay: true,
muted: true,
loop: true }
}/>
</video-display>
<spacer />
<a class="center" id="reg" href="/client/#/register/">
<get-tickets>
<h2>REGISTER FOR FREE</h2>
<h6>Join Zed Virtually. He'll Serve Punch.</h6>
</get-tickets>
</a>
<spacer />
<testimonial class="center">
<photo class="center">
<img style="width: 240px; max-width: 240px;" src="/media/images/7days_arleene.png">
</photo>
<statement>
<h6>Arlene, Consumer of Human Flesh</h6>
<p><i>"Aragghh rorarrrra ugggh. Rraaaarr! Maoaa raarakkkkaghg. NNNnaghgggggg. AAARRRH Zed."</i></p>
</statement>
</testimonial>
<pitch>
<h6>NOT SURE WHAT YOU'LL GET? IT'S FREE. WHO CARES?</h6>
<h2>What You'll Get With a <em>FREE</em> Subscription</h2>
</pitch>
<what-you-get>
<card>
<top>
<img src="/media/images/icarus_thumb.png" />
</top>
<middle>
<h6><em>PROFESSIONAL</em></h6>
<p>Professionally crafted videos of amateurish quality gaming. If <a href="https://en.wikipedia.org/wiki/The_Room">Tommy Wiseau</a> directed gaming videos they'd be just like this.</p>
</middle>
</card>
<card>
<top>
<img src="/media/images/elden_ring_thumb.png" />
</top>
<middle>
<h6><em>HILARIOUS</em></h6>
<p>A fabulous compendium of ridiculously over engineered software just to host some random videos of an old guy showing off his (lack of) gaming prowess. What's more hilarious than that?</p>
</middle>
</card>
<card>
<top>
<img src="/media/images/kenshi_thumb.png" />
</top>
<middle>
<h6><em>SOFTWARE</em></h6>
<p>Early access to new features and eventually an ability to get this software for your own personal gaming vlog. That's right, everyone who registers will be allowed to potentially buy this.</p>
</middle>
</card>
</what-you-get>
<spacer />
<a class="center" id="reg" href="/client/#/register/">
<get-tickets>
<h2>REGISTER FOR FREE</h2>
<h6>Join Zed Virtually. Laugh at His Pain.</h6>
</get-tickets>
</a>
<spacer />
<pitch class="dark">
<h1 class="center">WHAT <em>IS</em> THIS?</h1>
<p>This is a parody landing page that I created for my course <a href="https://learnjsthehardway.com">Learn JavaScript the Hard Way</a>. I teach full stack JavaScript development and use parody and copying existing websites to teach CSS, HTML, and basic design in addition to the rest of the stack. If you enjoyed this joke, you'll love the course.
</p>
</pitch>
<spacer />
</Layout>