You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

313 lines
16 KiB
HTML

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!--
//////////////////////////////////////////////////////////////////
W h e n y o u m i g h t g o a s t r a y
---- ----
by Anna Sandri
//////////////////////////////////////////////////////////////////
* C R E D I T S *
---f o n t s---
Joly | Designed by Léon Hugues | Blaze Type
Sinistre | Designed by Jules Durand | Collletttivo
---s o u n d---
* S: Final_Boss_Battle.wav by MATRIXXX_ | License: Attribution
* S: battle-march action loop by haydensayshi123 | License: Creative Commons 0
* S: water_flows_over_rock.wav by volivieri | License: Attribution
* S: Alien x.wav by Jace | License: Attribution
* S: Magic disappearing/appearing by Tetoszka | License: Creative Commons 0
* S: Laser Shot Silenced by bubaproducer | License: Attribution
* S: Scary & Suspense by tyops | License: Attribution
* S: Danger is Near (01) by NightWolfCFM | License: Attribution
* S: smoke.wav by ilame | License: Attribution
* S: Chicken Single Alarm Call by Rudmer_Rotteveel | License: Creative Commons 0
* S: RAAAAAAAAAW!!!.wav by Reitanna | License: Creative Commons 0
* S: Building Tension by AlmightyPsyche | License: Attribution
* S: single dog bark 1 by crazymonke9 | License: Attribution
* S: strained gibberish.wav by Reitanna | License: Creative Commons 0
* S: GIBBERISH.wav by xtrgamr | License: Attribution
* S: evening in the forest.wav by reinsamba | License: Attribution
* S: Turning page by supersnd | License: Creative Commons 0
* S: Game music Time of joy by BloodPixelHero | License: Attribution
* P: beeps by thisusernameis
* S: beep3.wav by thisusernameis | License: Creative Commons 0
* S: Click.ogg by Pachoba | License: Creative Commons 0
* S: UI Confirmation Alert, A1.wav by InspectorJ | License: Attribution
* S: Park Ambiance by philipecp | License: Creative Commons 0
* S: evening in the forest.wav by reinsamba | License: Attribution
* S: Spring Birds Raw (New Jersey) by hargissssound | License: Creative Commons 0
* S: Cricket in the desert (close recording) by felix.blume | License: Creative Commons 0
* S: tongue click by fleurescence | License: Creative Commons 0
* S: UI Confirmation Alert, A2.wav by InspectorJ | License: Attribution
//////////////////////////////////////////////////////////////////
-->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>whenyoumightgoastray</title>
<link rel="icon" href="imgs/avatars/ball2.gif">
<link rel="stylesheet" href="index.css">
</head>
<body>
<audio id="click"><source src="sound/click.wav" type="audio/wav"></audio>
<audio loop="loop" id="theme_amanda" preload="auto"><source src="sound/amanda_theme.wav" type="audio/wav"></audio>
<div class="small_screen" style="display: none;">
whoops ☃!
It seems like you are reading this message from a phone or a tablet. Sadly, <span class="small_title">When you might go astray</span> is not available for these formats. Try again with a bigger device ツ
</div>
<div id="info_box" style="display: none;">
This project has been developed by <a href="https://www.annasandri.com/" target="_blank">Anna Sandri</a> in the context of the <a href="https://www.pzwart.nl/experimental-publishing/" target="_blank">Experimental Publishing</a> master course, Piet Zwart Institute (NL).
</div>
<div class="step1">
<span class=" info_button special_button"></span> <span class="special1"style="-webkit-padding-start: 11vw;">When you might go astray</span> <span class="special1">( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span>
is a research <span class="special1">( <img src="imgs/avatars/fiction.gif" height="65vw">)</span> project exploring <span class="special1">( <img src="imgs/avatars/glass.gif" height="65vw">) conspiracy fantasies ( <img src="imgs/avatars/ball2.gif" height="65vw"> , <img src="imgs/avatars/rept.gif" height="65vw"> , <img src="imgs/avatars/ball1.png" height="65vw"> )</span> and their entanglement with
<span class="special1">fictional narratives ( <img src="imgs/avatars/oracle.gif" height="65vw"> , <img src="imgs/avatars/fiction.gif" height="65vw"> , <img src="imgs/avatars/fantasy.gif" height="65vw"> )</span> transforming their believers <span class="special2">( <img src="imgs/avatars/believer.gif" height="65vw">)</span> into
heroes <span class="special1">( <img src="imgs/avatars/hero2.gif" height="65vw"> , <img src="imgs/avatars/parrot.gif" height="65vw"> , <img src="imgs/avatars/hero3.gif" height="65vw"> )</span> on a quest.
<br>
<div class="line"></div> Do you want to hear more about it? <button id="step1_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step1_no"><span class="button_text"> no </span></button>
</div>
<div class="step1_2" style="display: none;">
<span class="backto1 special_button"></span><span style="-webkit-padding-start: 11vw;">I'm</span> afraid <span class="special1">( <img src="imgs/avatars/sad.gif" height="65vw"> )</span> I don't have much to make you stay here in this case.<br>
<div class="line"></div>Do you maybe want to play a game <span class="special1">( <img src="imgs/avatars/game.gif" height="65vw"> )</span> ? <button id="step1_2_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step1_2_no"><span class="button_text"> no </span></button>
</div>
<div class="step2" style="display: none;">
<span class="backto1 special_button"></span><span class="special1"style="-webkit-padding-start: 11vw;">When you might go astray</span><span class="special1"> ( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span> is divided into two parts: a <span class="special1">game ( <img src="imgs/avatars/game.gif" height="65vw"> )</span> where the <span class="special1"> player ( <img src="imgs/avatars/walk.gif" height="65vw"> )</span> is asked to undertake a <span class="special1">journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span>, and an <span class="special1"> essay ( <img src="imgs/avatars/fiction.gif" height="65vw">) </span>, examining conspiratorial narratives through the <span class="special1">lenses ( <img src="imgs/avatars/glass.gif" height="65vw"> )</span> of the mono-myth.<br>
<div class="line"></div> Do you want to play the game? <button id="step2_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step2_no"><span class="button_text"> no </span></button>
</div>
<div class="step2_1" style="display: none;">
<span class="backto2 special_button"></span><span class="special1"style="-webkit-padding-start: 11vw;">When you might go astray</span><span class="special1"> ( <img src="imgs/avatars/tree.gif" height="65vw">, <img src="imgs/avatars/amanda.gif" height="65vw">, <img src="imgs/avatars/fire.gif" height="65vw"> )</span> is divided into two parts: a <span class="special1">game ( <img src="imgs/avatars/game.gif" height="65vw"> )</span> where the <span class="special1"> player ( <img src="imgs/avatars/walk.gif" height="65vw"> )</span> is asked to undertake a <span class="special1">journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span>, and an <span class="special1"> essay ( <img src="imgs/avatars/fiction.gif" height="65vw">) </span>, examining conspiratorial narratives through the <span class="special1">lenses ( <img src="imgs/avatars/glass.gif" height="65vw"> )</span> of the mono-myth.<br>
<div class="line"></div> Do you want to read the essay? <button id="step2_1_yes"><span class="button_text"> yes </span></button><span class="special1"> / </span><button id="step2_1_no"><span class="button_text"> no </span></button>
</div>
<div class="step3" style="display: none;">
<span class="backto2 special_button"></span><span style="-webkit-padding-start: 11vw;">You</span> will be there soon, but before you need to know something. Along this <span class="special1"> journey ( <img src="imgs/avatars/horse.gif" height="65vw"> )</span> , someone who we will call the <span class="special1">oracle (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> will follow your steps <span class="special1">( <img src="imgs/avatars/walk.gif" height="65vw"> )</span>. They won't bother you. You just have to wake them up <span class="special1">( <img src="imgs/avatars/sleep.gif" height="65vw"> )</span>.<br>
<div class="line"></div> Do you want to summon the game's oracle?<button id="step3_yes"><span class="button_text"> yes </span></button ><span class="special1"> / </span><button id="step3_no"><span class="button_text"> no </span></button>
</div>
<div class="step4" style="display: none;">
<span class="backto3 special_button"></span><span style="-webkit-padding-start: 11vw;">You</span> summoned the <span class="special1">oracle ( <img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw"> )</span>
. You are now ready to start your adventure: throughout it you will be called
<form name="nameForm">
<input id="player_name" type="text" >
</form>
you can decide whether you are going to look like
<form id="avatar_form">
<label class="radio" for="player1" >
<span class="radio__input">
<input class="avatar"type="radio" id="player1" name="player_avatar" value="imgs/avatars/avatar1.gif" checked="checked" >
<span class="radio__control"></span><img id="player_img_1" src="imgs/avatars/avatar1.gif" height="60vw">
</span>
</label>
,
<label class="radio" for="player2" >
<span class="radio__input">
<input class="avatar"type="radio" id="player2" name="player_avatar" value="imgs/avatars/avatar2.gif">
<span class="radio__control"></span><img id="player_img_2" src="imgs/avatars/avatar2.gif" height="60vw">
</span>
</label>
,
<label class="radio" for="player3">
<span class="radio__input">
<input class="avatar"type="radio" id="player3" name="player_avatar" value="imgs/avatars/avatar3.gif">
<span class="radio__control"></span><img id="player_img_3" src="imgs/avatars/avatar3.gif" height="60vw">
</span>
</label>
,
<label class="radio" for="player4">
<span class="radio__input">
<input class="avatar"type="radio" id="player4" name="player_avatar" value="imgs/avatars/avatar4.gif">
<span class="radio__control"></span><img id="player_img_4" src="imgs/avatars/avatar4.gif" height="60vw">
</span>
</label>
,
<label class="radio" for="player5">
<span class="radio__input">
<input class="avatar"type="radio" id="player5" name="player_avatar" value="imgs/avatars/avatar5.gif">
<span class="radio__control"></span><img id="player_img_5" src="imgs/avatars/avatar5.gif" height="70vh">
</span>
</label>
,
<label class="radio" for="player6">
<span class="radio__input">
<input class="avatar"type="radio" id="player6" name="player_avatar" value="imgs/avatars/avatar6.gif">
<span class="radio__control"></span><img id="player_img_6" src="imgs/avatars/avatar6.gif" height="70vh">
</span>
</label>
,
<label class="radio" for="player7">
<span class="radio__input">
<input class="avatar"type="radio" id="player7" name="player_avatar" value="imgs/avatars/avatar7.gif">
<span class="radio__control"></span><img id="player_img_7" src="imgs/avatars/avatar7.gif" height="70vh">
</span>
</label>
,
<label class="radio" for="player8">
<span class="radio__input">
<input class="avatar"type="radio" id="player8" name="player_avatar" value="imgs/avatars/avatar8.gif">
<span class="radio__control"></span><img id="player_img_8" src="imgs/avatars/avatar8.gif" height="70vh">
</span>
</label>
,
<label class="radio" for="player9">
<span class="radio__input">
<input class="avatar"type="radio" id="player9" name="player_avatar" value="imgs/avatars/avatar9.gif">
<span class="radio__control"></span><img id="player_img_9" src="imgs/avatars/avatar9.gif" height="70vh">
</span>
</label>
,
<label class="radio" for="player10">
<span class="radio__input">
<input class="avatar"type="radio" id="player10" name="player_avatar" value="imgs/avatars/avatar10.gif">
<span class="radio__control"></span><img id="player_img_10" src="imgs/avatars/avatar10.gif" height="70vh">
</span>
</label>
,
<label class="radio" for="player11">
<span class="radio__input">
<input class="avatar"type="radio" id="player11" name="player_avatar" value="imgs/avatars/avatar11.gif">
<span class="radio__control"></span><img id="player_img_11" src="imgs/avatars/avatar11.gif" height="70vh">
</span>
</label>
or like
<label class="radio"for="player12">
<span class="radio__input">
<input class="avatar"type="radio" id="player12" name="player_avatar" value="imgs/avatars/avatar12.gif">
<span class="radio__control"></span><img id="player_img_12" src="imgs/avatars/avatar12.gif" height="70vh">
</span>
</label>
</form> <div class="line"></div>
you can press
<button id="gotostart" onclick="storeName()"><span class="button_text"> start </span></button>
when you are ready
</div>
<script src="jquery.min.js"></script>
<script>
//audio
var click = document.querySelector("#click");
var theme= document.querySelector("#theme_amanda");
theme.volume = 0.4;
click.volume = 0.5;
$("body").hover( function() {
theme.play();
theme.addEventListener('paused',function() {
theme.play();
},false);
})
window.onload = function(){
theme.play();
//blocks the user if they are using mobile/tablet
if (screen.width < 769) {
$(".step1").hide();
$(".small_screen").show();
$("body").css("background-color", "#c94dff");
}
}
$(".info_button").click( function () {
$("#info_box").toggle();
click.play();
});
$("#step1_yes").click( function () {
$(".step1").hide();
$(".step2").show();
click.play();
});
$("#step1_no").click( function () {
$(".step1").hide();
$(".step1_2").show();
click.play();
});
$("#step1_2_yes").click( function () {
$(".step1_2").hide();
$(".step3").show();
click.play();
});
$("#step1_2_no").click( function () {
$(".step1_2").hide();
$(".step1").show();
click.play();
});
$("#step2_yes").click( function () {
$(".step2").hide();
$(".step3").show();
click.play();
});
$("#step2_no").click( function () {
$(".step2").hide();
$(".step2_1").show();
click.play();
});
$("#step2_1_yes").click( function () {
$(".step2_1").hide();
click.play();
window.location.href = "thesis.html";
});
$("#step2_1_no").click( function () {
$(".step2_1").hide();
$(".step1").show();
click.play();
});
$("#step3_yes").click( function () {
$(".step3").hide();
$(".step4").show();
click.play();
});
$("#step3_no").click( function () {
$(".step3").hide();
$(".step1").show();
click.play();
});
$(".backto1").click( function () {
$(".step1_2, .step2").hide();
$(".step1").show();
click.play();
});
$(".backto2").click( function () {
$(".step3, .step2_1").hide();
$(".step2").show();
click.play();
});
$(".backto3").click( function () {
$(".step4").hide();
$(".step3").show();
click.play();
});
/*
document.addEventListener("DOMContentLoaded", function () {
window.localStorage.clear();
console.log("loaded");
updateAvatar();
});
*/
</script>
<script type="text/javascript" src="index.js" ></script>
</body>