650 lines
19 KiB
PHP
650 lines
19 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="https://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="https://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>
|
||
|
||
<!-- CALENDAR -->
|
||
|
||
<style>
|
||
/* landscape */
|
||
@media (min-width: 800px)
|
||
{
|
||
p.emotes
|
||
{
|
||
font-size: 34px;
|
||
}
|
||
div#mailing-list-form .input
|
||
{
|
||
font-size: 34px;
|
||
height: 100px;
|
||
}
|
||
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;
|
||
}
|
||
div#mailing-list-form .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>
|
||
Play Scrapeboard at an upcoming event!
|
||
<!-- Check back soon for upcoming events! -->
|
||
</p>
|
||
<div class="date upcoming">
|
||
<div class="day-of-week">
|
||
Thu - Sun
|
||
</div>
|
||
<div class="day">
|
||
Jan. 5 - 8
|
||
</div>
|
||
<div class="year">
|
||
2023
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://super.magfest.org">MAGFest, Maryland</a>
|
||
</div>
|
||
</div>
|
||
<div class="date current">
|
||
<div class="day-of-week">
|
||
Mon
|
||
</div>
|
||
<div class="day">
|
||
Dec. 5
|
||
</div>
|
||
<div class="year">
|
||
2022
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://wonderville.nyc">Wonderville, NYC</a>
|
||
</div>
|
||
</div>
|
||
<div class="date past">
|
||
<div class="day-of-week">
|
||
Sat
|
||
</div>
|
||
<div class="day">
|
||
Nov. 5
|
||
</div>
|
||
<div class="year">
|
||
2022
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://www.play-nyc.com/">Play NYC</a>
|
||
</div>
|
||
</div>
|
||
<div class="date past">
|
||
<div class="day-of-week">
|
||
Sun
|
||
</div>
|
||
<div class="day">
|
||
Jul. 10
|
||
</div>
|
||
<div class="year">
|
||
2022
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://wonderville.nyc">Wonderville, NYC</a>
|
||
</div>
|
||
</div>
|
||
<div class="date past">
|
||
<div class="day-of-week">
|
||
Fri
|
||
</div>
|
||
<div class="day">
|
||
Jun. 10
|
||
</div>
|
||
<div class="year">
|
||
2022
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://www.eventbrite.com/e/the-12th-annual-interactive-show-cursed-technology-shop-masksvax-req-tickets-331933611367">NYC Resistor</a>
|
||
</div>
|
||
</div>
|
||
<div class="date past">
|
||
<div class="day-of-week">
|
||
Sat
|
||
</div>
|
||
<div class="day">
|
||
May 28
|
||
</div>
|
||
<div class="year">
|
||
2022
|
||
</div>
|
||
<div class="location">
|
||
<a href="https://ra.co/events/1534719">Wonderville, NYC</a>
|
||
</div>
|
||
</div>
|
||
<div class="date past">
|
||
<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">
|
||
2020
|
||
</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>
|
||
|
||
<script>
|
||
function subscribe(email_address)
|
||
{
|
||
var request = new Request("https://scrape.nugget.fun/www/subscribe.php", {
|
||
method: "POST",
|
||
mode: "cors",
|
||
body: new URLSearchParams({"email": email_address}),
|
||
headers: {
|
||
"Content-Type": "application/x-www-form-urlencoded"
|
||
}});
|
||
fetch(request)
|
||
.then(response => response.json())
|
||
.then(result => {
|
||
console.log(result);
|
||
if (result.success)
|
||
{
|
||
var color = "green";
|
||
}
|
||
else
|
||
{
|
||
var color = "red";
|
||
}
|
||
document.querySelector("#mailing-list-join").innerHTML = "<span style='color: " + color + "'>" + result.message + "</span>";
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<div id="mailing-list-join">
|
||
<span style="background: #ffa; border-radius: 5px; padding-left: 10px; padding-right: 10px;">
|
||
Join the announcements list
|
||
</span>
|
||
</div>
|
||
|
||
<div id="mailing-list-form">
|
||
<input class="input" id="email-box" 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';">
|
||
|
||
<button class="input" style="cursor: pointer; background: #4f8; font-weight: bold" value="Join"
|
||
onclick="subscribe(document.querySelector('#mailing-list-form #email-box').value);">Join</button>
|
||
</div>
|
||
|
||
<div id="mailing-list-archives">
|
||
[<a href="https://nugget.fun/mailman3/hyperkitty/list/scrapeboard-list@nugget.fun/">check past announcements</a>]
|
||
</div>
|
||
|
||
<p class="emotes">
|
||
d(⌒ー⌒) (❁´◡`❁) ヽ(^Д^)ノ (。>‿‿<。 )(*´∇`)ノ (●⌒v⌒●) ´・ᴗ・` (✿^-^) ヾ(^ヮ^)ノ
|
||
</p>
|
||
|
||
<!-- PROMO VIDEO -->
|
||
|
||
<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="https://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>
|
||
|
||
<!-- DONATION WIDGET -->
|
||
|
||
<iframe id='kofiframe' src='https://ko-fi.com/scrapeboard/?hidefeed=true&widget=true&embed=true&preview=true' scrolling="no"
|
||
style='border:none;padding:0px;margin:auto;margin-top:50px;height:600px;background:rgba(0, 0, 0, 0);overflow:hidden;display:block'
|
||
title='scrapeboard'>
|
||
</iframe>
|
||
|
||
<!-- FOLLOW BUTTONS -->
|
||
|
||
<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>
|