515 lines
15 KiB
PHP
515 lines
15 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
|
||
<!--
|
||
We have the technology to put you on a board which is a wireless electric
|
||
video game controller. Do you have the moves to skate through a gauntlet
|
||
of goons all the way to Tony Hawk?
|
||
-->
|
||
|
||
<head>
|
||
|
||
<script>
|
||
/* For the scroll button video overlay */
|
||
window.addEventListener(
|
||
"scroll", function() {
|
||
document.getElementById("scroll").style.visibility = "hidden";
|
||
});
|
||
</script>
|
||
|
||
<meta charset="utf-8">
|
||
<meta content="True" name="HandheldFriendly">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||
<meta name="viewport" content="width=device-width">
|
||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||
<meta name="description" content="Scrapeboard is a new kind of arcade game played on a skateboard deck and four pads that combines elements of rhythm, racing, and fighting games to create a unique, challenging, and physically demanding boss rush experience." />
|
||
<meta name="keywords" content="arcade, arcade games, diy arcade cabinets, alt ctrl, alternative controllers, video games, indie game, indie games, indie dev, gamedev, game dev, game programming">
|
||
<meta property="og:url" content="http://scrape.nugget.fun">
|
||
<meta property="og:title" content="Scrapeboard">
|
||
<meta property="og:description" content="Scrapeboard is a new kind of arcade game played on a skateboard deck and four pads that combines elements of rhythm, racing, and fighting games to create a unique, challenging, and physically demanding boss rush experience.">
|
||
<meta property="og:image" content="http://scrape.nugget.fun/www/open_graph_card.jpg">
|
||
<meta property="og:type" content="website">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="@diskmem">
|
||
<meta name="twitter:creator" content="@diskmem">
|
||
<title>Scrapeboard</title>
|
||
<link rel="stylesheet" href="www/style.css" type="text/css" />
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- AUTOPLAY HEADER VIDEO -->
|
||
|
||
<style>
|
||
|
||
/* landscape */
|
||
@media (min-width: 800px)
|
||
{
|
||
div#scroll
|
||
{
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
/* portrait */
|
||
@media (max-width: 800px)
|
||
{
|
||
div#scroll
|
||
{
|
||
visibility: collapse;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="scroll">🡃</div>
|
||
<script>
|
||
document.getElementById("scroll").addEventListener(
|
||
"click", function() {
|
||
window.scrollBy(0, window.innerHeight);
|
||
});
|
||
</script>
|
||
|
||
<video id="landing_video" autoplay muted disablepictureinpicture disableremoteplayback loop="true">
|
||
<source src="www/scrapeboard_new.webm">
|
||
</video>
|
||
|
||
<!-- ONE LINE DESCRIPTION -->
|
||
|
||
<style>
|
||
|
||
@media (min-width: 800px)
|
||
{
|
||
div#hero
|
||
{
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
width: 75%;
|
||
}
|
||
|
||
div#hero img#head_0
|
||
{
|
||
grid-area: 1 / 1 / 2 / 3;
|
||
}
|
||
|
||
div#hero img#head_1
|
||
{
|
||
grid-area: 2 / 1 / 3 / 2;
|
||
}
|
||
|
||
div#hero img#head_2
|
||
{
|
||
grid-area: 2 / 2 / 3 / 3;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 800px)
|
||
{
|
||
div#hero
|
||
{
|
||
grid-template-columns: repeat(1, 1fr);
|
||
grid-template-rows: repeat(3, 1fr);
|
||
width: 99%;
|
||
}
|
||
|
||
div#hero img#head_0
|
||
{
|
||
grid-area: 1 / 1 / 2 / 2;
|
||
}
|
||
|
||
div#hero img#head_1
|
||
{
|
||
grid-area: 2 / 1 / 3 / 2;
|
||
}
|
||
|
||
div#hero img#head_2
|
||
{
|
||
grid-area: 3 / 1 / 4 / 2;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="hero">
|
||
<img id="head_0" src="www/ad_head_transparent_0.png" />
|
||
<img id="head_1" src="www/ad_head_transparent_1.png" />
|
||
<img id="head_2" src="www/ad_head_transparent_2.png" />
|
||
</div>
|
||
|
||
<!-- GIFS -->
|
||
|
||
<style>
|
||
|
||
@media (min-width: 800px)
|
||
{
|
||
div#boarding
|
||
{
|
||
grid-template-columns: repeat(5, 1fr);
|
||
grid-template-rows: repeat(1, 1fr);
|
||
grid-gap: 3%;
|
||
width: 91%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 800px)
|
||
{
|
||
div#boarding
|
||
{
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-template-rows: repeat(3, 1fr);
|
||
width: 99%;
|
||
text-align: center;
|
||
}
|
||
|
||
div#boarding a
|
||
{
|
||
padding: 10px 10px;
|
||
}
|
||
|
||
div#boarding a#boarding_4
|
||
{
|
||
grid-area: auto / 1 / auto / 3;
|
||
width: 50%;
|
||
margin: auto;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="boarding">
|
||
<a href="www/Boarding_1.gif"><img src="www/Boarding_1_thumb.gif" /></a>
|
||
<a href="www/Boarding_0.gif"><img src="www/Boarding_0_thumb.gif" /></a>
|
||
<a href="www/Multiplay_Closing-Flan.gif"><img src="www/Multiplay_Closing-Flan_thumb.gif" /></a>
|
||
<a href="www/Boarding_2.gif"><img src="www/Boarding_2_thumb.gif" /></a>
|
||
<a href="www/Boarding_3.gif" id="boarding_4"><img src="www/Boarding_3_thumb.gif" /></a>
|
||
</div>
|
||
|
||
<!-- HOW TO PLAY -->
|
||
|
||
<style>
|
||
|
||
/* landscape */
|
||
@media (min-width: 800px)
|
||
{
|
||
div#instructions
|
||
{
|
||
grid-template-columns: 46% 54%;
|
||
grid-template-rows: repeat(1, 1fr);
|
||
width: 75%;
|
||
}
|
||
|
||
img#safety
|
||
{
|
||
width: 50%;
|
||
}
|
||
|
||
img#pip
|
||
{
|
||
width: 40%;
|
||
}
|
||
|
||
div#demo
|
||
{
|
||
width: 40%;
|
||
}
|
||
}
|
||
|
||
/* portrait */
|
||
@media (max-width: 800px)
|
||
{
|
||
div#instructions
|
||
{
|
||
grid-template-columns: repeat(1, 1fr);
|
||
grid-template-rows: repeat(2, 1fr);
|
||
width: 90%;
|
||
}
|
||
|
||
div#instructions img
|
||
{
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
img#safety
|
||
{
|
||
width: 95%;
|
||
}
|
||
|
||
img#pip
|
||
{
|
||
width: 90%;
|
||
}
|
||
|
||
div#demo
|
||
{
|
||
width: 90%;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="instructions">
|
||
<img src="www/ad_instructions_transparent_0.png" />
|
||
<img src="www/ad_instructions_transparent_1.png" />
|
||
</div>
|
||
|
||
<img id="safety" src="www/instructions.png" />
|
||
|
||
<a href="https://youtu.be/spzM9XGLwWk">
|
||
<img id="pip" src="www/Scrapeboard_Gameplay_Demo_picture_in_picture.webp" />
|
||
</a>
|
||
|
||
<div id="demo">
|
||
<div id="demo_title">
|
||
DEMO
|
||
</div>
|
||
<div id="demo_link">
|
||
watch on <a href="https://youtu.be/spzM9XGLwWk">YouTube</a>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
|
||
/* landscape */
|
||
@media (min-width: 800px)
|
||
{
|
||
div#description
|
||
{
|
||
grid-template-columns: 49% 51%;
|
||
grid-template-rows: repeat(2, 1fr);
|
||
width: 75%;
|
||
}
|
||
}
|
||
|
||
/* portrait */
|
||
@media (max-width: 800px)
|
||
{
|
||
div#description
|
||
{
|
||
grid-template-columns: repeat(1, 1fr);
|
||
grid-template-rows: repeat(4, 1fr);
|
||
width: 90%;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<div id="description">
|
||
<img src="www/ad_description_transparent_0.png" />
|
||
<img src="www/ad_description_transparent_1.png" />
|
||
<img src="www/ad_description_transparent_2.png" />
|
||
<img src="www/ad_description_transparent_3.png" />
|
||
</div>
|
||
|
||
<style>
|
||
/* landscape */
|
||
@media (min-width: 800px)
|
||
{
|
||
p.emotes
|
||
{
|
||
font-size: 34px;
|
||
}
|
||
form#mailing-list input
|
||
{
|
||
font-size: 34px;
|
||
}
|
||
div#calendar
|
||
{
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(1, 1fr);
|
||
}
|
||
div#calendar p
|
||
{
|
||
grid-area: auto / 1 / auto / 4;
|
||
font-size: 26px;
|
||
}
|
||
div#calendar div.date
|
||
{
|
||
width: 70%;
|
||
margin: auto;
|
||
}
|
||
}
|
||
|
||
/* portrait */
|
||
@media (max-width: 800px)
|
||
{
|
||
p.emotes
|
||
{
|
||
font-size: 24px;
|
||
}
|
||
form#mailing-list input
|
||
{
|
||
font-size: 26px;
|
||
}
|
||
div#calendar
|
||
{
|
||
grid-template-columns: repeat(1, 1fr);
|
||
grid-gap: 10px;
|
||
}
|
||
div#calendar p
|
||
{
|
||
width: 95%;
|
||
font-size: 22px;
|
||
}
|
||
div#calendar div.date
|
||
{
|
||
width: 75%;
|
||
margin: auto;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<p class="emotes">
|
||
（*＾ワ＾*） o(〃＾▽＾〃)o ヾ(＠⌒ー⌒＠)ノ ヽ(*⌒∇⌒*)ﾉ (≧∇≦)/ (ﾉ´ヮ´)ﾉ*: ･ﾟ ≧﹏≦ ( ´ ▽ ` )b
|
||
</p>
|
||
|
||
<div id="calendar">
|
||
<p>
|
||
Come play Scrapeboard at one of these events!
|
||
</p>
|
||
<div class="date upcoming current">
|
||
<div class="day-of-week">
|
||
Wed - Fri
|
||
</div>
|
||
<div class="day">
|
||
Mar. 23 - 25
|
||
</div>
|
||
<div class="year">
|
||
2022
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://gdconf.com">GDC, San Francisco</a>
|
||
</div>
|
||
</div>
|
||
<div class="date past">
|
||
<div class="day-of-week">
|
||
Thu - Sun
|
||
</div>
|
||
<div class="day">
|
||
Jan. 6 - 9
|
||
</div>
|
||
<div class="year">
|
||
2022
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://super.magfest.org">MAGFest, Maryland</a>
|
||
</div>
|
||
</div>
|
||
<div class="date past">
|
||
<div class="day-of-week">
|
||
Sunday
|
||
</div>
|
||
<div class="day">
|
||
Oct. 31
|
||
</div>
|
||
<div class="year">
|
||
2021
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://wonderville.nyc">Wonderville, NYC</a>
|
||
</div>
|
||
</div>
|
||
<p>
|
||
<i>If you are interested in having Scrapeboard at your event, bar, arcade, office, school, or home,
|
||
contact <a href="mailto:scrape@nugget.fun">scrape@nugget.fun</a></i>
|
||
</p>
|
||
</div>
|
||
|
||
<div id="mailing-list-join">
|
||
<span style="background: #ffa; border-radius: 5px; padding-left: 10px; padding-right: 10px;">
|
||
Join the Scrapeboard events and news mailing list!
|
||
</div>
|
||
</div>
|
||
|
||
<form id="mailing-list" method="post" action="https://nugget.fun/mailman/subscribe/scrapeboard">
|
||
<input style="width: 50%" name="email" value="Your e-mail"
|
||
onfocus="if(this.value=='Your e-mail') this.value='';"
|
||
onfocusout="if(this.value=='') this.value='Your e-mail';">
|
||
|
||
<input style="cursor: pointer; background: #4f8; font-weight: bold" type="submit" name="email-button" value="Join">
|
||
</form>
|
||
|
||
<p class="emotes">
|
||
d(⌒ー⌒) (❁´◡`❁) ヽ(＾Д＾)ﾉ （｡>‿‿<｡ ）(*´∇｀)ﾉ (●⌒ｖ⌒●) ´･ᴗ･` （✿＾－＾) ヾ（＾ヮ＾)ﾉ
|
||
</p>
|
||
|
||
<div id="comedy">
|
||
<iframe src="https://www.youtube.com/embed/ai9WlJdfbvI" frameborder="0"
|
||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
|
||
<div id="comedy_credits">
|
||
video by <a href="http://twitter.com/beachethan">@beachethan</a>
|
||
</div>
|
||
|
||
<style>
|
||
|
||
/* landscape */
|
||
@media (min-width: 800px)
|
||
{
|
||
div#credits
|
||
{
|
||
width: 80%;
|
||
}
|
||
|
||
div#credits p#links
|
||
{
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-template-rows: repeat(1, 1fr);
|
||
}
|
||
}
|
||
|
||
/* portrait */
|
||
@media (max-width: 800px)
|
||
{
|
||
div#credits
|
||
{
|
||
width: 50%;
|
||
}
|
||
|
||
div#credits p#links
|
||
{
|
||
grid-template-columns: repeat(1, 1fr);
|
||
grid-template-rows: repeat(3, 1fr);
|
||
}
|
||
|
||
div#credits p#links iframe
|
||
{
|
||
margin-top: 10px;
|
||
}
|
||
|
||
}
|
||
|
||
</style>
|
||
|
||
<p id="credits-heading">
|
||
Follow the developers!
|
||
</p>
|
||
|
||
<div id="credits">
|
||
<p id="links">
|
||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||
<a href="https://twitter.com/diskmem?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-dnt="true"
|
||
data-show-count="true">
|
||
Follow @diskmem
|
||
</a>
|
||
<a href="https://twitter.com/snakesandrews?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-dnt="true"
|
||
data-show-count="true">
|
||
Follow @snakesandrews
|
||
</a>
|
||
<a href="https://twitter.com/ClementShimizu?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-dnt="true"
|
||
data-show-count="true">
|
||
Follow @ClementShimizu
|
||
</a>
|
||
</p>
|
||
</div>
|
||
|
||
<div id="ink">
|
||
<img src="www/Ink.png">
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|