2022-01-27 15:10:02 -05:00
<! DOCTYPE html >
< html lang = " en-US " >
2022-02-22 22:34:00 -05:00
<!--
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 ?
-->
2022-01-27 15:10:02 -05:00
< head >
2022-02-22 22:34:00 -05:00
< script >
/* For the scroll button video overlay */
window . addEventListener (
" scroll " , function () {
document . getElementById ( " scroll " ) . style . visibility = " hidden " ;
});
</ script >
2022-01-27 15:10:02 -05:00
< 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 " />
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
</ head >
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
< body >
2022-02-22 22:34:00 -05:00
<!-- AUTOPLAY HEADER VIDEO -->
< style >
/* landscape */
@ media ( min - width : 800 px )
{
div #scroll
{
visibility : visible ;
}
}
/* portrait */
@ media ( max - width : 800 px )
{
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 " >
2022-01-27 15:10:02 -05:00
< source src = " www/scrapeboard_new.webm " >
</ video >
2022-02-22 22:34:00 -05:00
<!-- ONE LINE DESCRIPTION -->
2022-01-27 15:10:02 -05:00
< style >
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
@ media ( min - width : 800 px )
{
div #hero
{
grid - template - columns : repeat ( 2 , 1 fr );
grid - template - rows : repeat ( 2 , 1 fr );
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 ;
}
}
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
@ media ( max - width : 800 px )
{
div #hero
{
grid - template - columns : repeat ( 1 , 1 fr );
grid - template - rows : repeat ( 3 , 1 fr );
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 ;
}
}
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
</ style >
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
< 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 >
2022-02-22 22:34:00 -05:00
<!-- GIFS -->
2022-01-27 15:10:02 -05:00
< style >
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
@ media ( min - width : 800 px )
{
div #boarding
{
grid - template - columns : repeat ( 5 , 1 fr );
grid - template - rows : repeat ( 1 , 1 fr );
grid - gap : 3 % ;
width : 91 % ;
}
}
@ media ( max - width : 800 px )
{
div #boarding
{
grid - template - columns : repeat ( 2 , 1 fr );
grid - template - rows : repeat ( 3 , 1 fr );
width : 99 % ;
2022-02-22 22:34:00 -05:00
text - align : center ;
2022-01-27 15:10:02 -05:00
}
2022-02-22 22:34:00 -05:00
div #boarding a
2022-01-27 15:10:02 -05:00
{
2022-02-22 22:34:00 -05:00
padding : 10 px 10 px ;
}
div #boarding a#boarding_4
{
grid - area : auto / 1 / auto / 3 ;
width : 50 % ;
margin : auto ;
2022-01-27 15:10:02 -05:00
}
}
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
</ style >
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
< div id = " boarding " >
2022-02-22 22:34:00 -05:00
< 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 >
2022-01-27 15:10:02 -05:00
</ div >
2022-02-22 22:34:00 -05:00
<!-- HOW TO PLAY -->
< style >
/* landscape */
@ media ( min - width : 800 px )
{
div #instructions
{
grid - template - columns : 46 % 54 % ;
grid - template - rows : repeat ( 1 , 1 fr );
width : 75 % ;
}
img #safety
{
width : 50 % ;
}
img #pip
{
width : 40 % ;
}
div #demo
{
width : 40 % ;
}
}
/* portrait */
@ media ( max - width : 800 px )
{
div #instructions
{
grid - template - columns : repeat ( 1 , 1 fr );
grid - template - rows : repeat ( 2 , 1 fr );
width : 90 % ;
}
div #instructions img
{
padding - top : 10 px ;
padding - bottom : 10 px ;
}
img #safety
{
width : 95 % ;
}
img #pip
{
width : 90 % ;
}
div #demo
{
width : 90 % ;
}
}
</ style >
2022-01-27 15:10:02 -05:00
< div id = " instructions " >
2022-02-22 22:34:00 -05:00
< 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 >
2022-01-27 15:10:02 -05:00
</ div >
2022-02-22 22:34:00 -05:00
< style >
/* landscape */
@ media ( min - width : 800 px )
{
div #description
{
grid - template - columns : 49 % 51 % ;
grid - template - rows : repeat ( 2 , 1 fr );
width : 75 % ;
}
}
/* portrait */
@ media ( max - width : 800 px )
{
div #description
{
grid - template - columns : repeat ( 1 , 1 fr );
grid - template - rows : repeat ( 4 , 1 fr );
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 : 800 px )
{
p . emotes
{
font - size : 34 px ;
}
form #mailing-list input
{
font - size : 34 px ;
}
div #calendar
{
grid - template - columns : repeat ( 3 , 1 fr );
grid - template - rows : repeat ( 1 , 1 fr );
}
div #calendar p
{
grid - area : auto / 1 / auto / 4 ;
font - size : 26 px ;
}
div #calendar div.date
{
width : 70 % ;
margin : auto ;
}
}
/* portrait */
@ media ( max - width : 800 px )
{
p . emotes
{
font - size : 24 px ;
}
form #mailing-list input
{
font - size : 26 px ;
}
div #calendar
{
grid - template - columns : repeat ( 1 , 1 fr );
grid - gap : 10 px ;
}
div #calendar p
{
width : 95 % ;
font - size : 22 px ;
}
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'; " >
& nbsp ;
< input style = " cursor: pointer; background: #4f8; font-weight: bold " type = " submit " name = " email-button " value = " Join " >
</ form >
< p class = " emotes " >
d ( ⌒ー⌒ ) ( ❁´◡ `❁) ヽ(＾Д＾)ﾉ （｡>‿‿<｡ ） （✿＾－＾ ) ヾ（＾ヮ＾ ) ﾉ
</ p >
2022-01-27 15:10:02 -05:00
< 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 >
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
< div id = " comedy_credits " >
video by < a href = " http://twitter.com/beachethan " >@ beachethan </ a >
</ div >
2022-02-22 22:34:00 -05:00
< style >
/* landscape */
@ media ( min - width : 800 px )
{
div #credits
{
width : 80 % ;
}
div #credits p#links
{
grid - template - columns : repeat ( 3 , 1 fr );
grid - template - rows : repeat ( 1 , 1 fr );
}
}
/* portrait */
@ media ( max - width : 800 px )
{
div #credits
{
width : 50 % ;
}
div #credits p#links
{
grid - template - columns : repeat ( 1 , 1 fr );
grid - template - rows : repeat ( 3 , 1 fr );
}
div #credits p#links iframe
{
margin - top : 10 px ;
}
}
</ 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 >
2022-01-27 15:10:02 -05:00
</ div >
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
< div id = " ink " >
< img src = " www/Ink.png " >
</ div >
2022-02-22 22:34:00 -05:00
2022-01-27 15:10:02 -05:00
</ body >
2018-07-25 22:02:44 -04:00
</ html >
