XPUB
/
SI14
57
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

colophon fixed

Browse Source
master
poni 4 years ago
parent 4e26dc1261
commit 66a9b6728b
2 changed files with 203 additions and 98 deletions
Show Stats Download Patch File Download Diff File

133
index.html
Unescape Escape View File

@ -12,6 +12,7 @@
<script src="p5.sound.js"></script>
<script src="p5.collide2d.js"></script>
<script type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>I Don't Know Where We're Going, But..</title>
@ -41,13 +42,54 @@
<img src="INTRO.gif" alt="" id="GIF"/></div>
<div id="BOX3">
<img src="symboles/HELP.png">
</div>
<a href="#colophon" id="colophonX"><button>?</button></a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<div id="audio">
<audio autoplay loop id="footsteps" src="sounds/walking.mp3"></audio>
<!-- <audio controls loop id="PNF1" src="sounds/PNF_01.mp3"></audio>
<audio controls loop id="PNF2" src="sounds/PNF_02.mp3"></audio>
<audio controls loop id="PNF3" src="sounds/PNF_03.mp3"></audio>
<audio controls loop id="PNF4" src="sounds/PNF_04.mp3"></audio> -->
<audio controls loop id="PNF1" src="sounds/PNF_05.mp3"></audio>
<audio controls loop id="PNF2" src="sounds/PNF_06.mp3"></audio>
<!-- <audio controls loop id="Chinatown1" src="sounds/chinatown_01.mp3"></audio> -->
<audio controls loop id="LOBS1" src="sounds/chinatown_02.mp3"></audio>
<audio controls loop id="LOBS2" src="sounds/chinatown_03.mp3"></audio>
<audio controls loop id="SONIC1" src="sounds/schoolstraat_01.mp3"></audio>
<audio controls loop id="SONIC2" src="sounds/schoolstraat_02.mp3"></audio>
<!-- <audio controls loop id="Schoolstraat3" src="sounds/schoolstraat_03.mp3"></audio>
<audio controls loop id="Schoolstraat4" src="sounds/schoolstraat_04.mp3"></audio> -->
<!-- <audio controls loop id="pigeonsquare1" src="sounds/pigeonsquare_01.mp3"></audio>
<audio controls loop id="pigeonsquare2" src="sounds/pigeonsquare_02.mp3"></audio>
<audio controls loop id="pigeonsquare3" src="sounds/pigeonsquare_03.mp3"></audio>-->
<audio controls loop id="PIGEON1" src="sounds/pigeonsquare_04.mp3"></audio>
<audio controls loop id="PIGEON2" src="sounds/pigeonsquare_05.mp3"></audio>
<audio controls loop id="GARDE1" src="sounds/spinoza_01.mp3"></audio>
<audio controls loop id="GARDE2" src="sounds/spinoza_02.mp3"></audio>
<!-- <audio controls loop id="spinoza3" src="sounds/spinoza_03.mp3"></audio> -->
</div>
<div id="container">
<div id="a">
</div>
</div>
<script defer src="canvas.js"></script>
<script defer src="codes.js"></script>
<div id="openModal" class="modalDialog">
<div><a href="#colophonX" id="colophon"><button>Back to top</button></a>
<p2>
Another lockdown; shops closed, museums closed, bars closed, cafés closed, restaurants closed.
You turn to escapist media, in another attempt to climb the inner walls of a deflating castle.
@ -129,69 +171,36 @@ All deformation, reproduction, modification, derivation and transformation of th
<br><br>
This license does not apply to the materials that were created by third party creators. Third party materials will be marked with this symbol : ⨂.
This license does not apply to the materials that were created by third party creators. Third party materials will be marked with a symbol.
<br><br>
<br><br>
</p2>
</div>
</div>
<div id="audio">
<audio autoplay loop id="footsteps" src="sounds/walking.mp3"></audio>
<!-- <audio controls loop id="PNF1" src="sounds/PNF_01.mp3"></audio>
<audio controls loop id="PNF2" src="sounds/PNF_02.mp3"></audio>
<audio controls loop id="PNF3" src="sounds/PNF_03.mp3"></audio>
<audio controls loop id="PNF4" src="sounds/PNF_04.mp3"></audio> -->
<audio controls loop id="PNF1" src="sounds/PNF_05.mp3"></audio>
<audio controls loop id="PNF2" src="sounds/PNF_06.mp3"></audio>
<!-- <audio controls loop id="Chinatown1" src="sounds/chinatown_01.mp3"></audio> -->
<audio controls loop id="LOBS1" src="sounds/chinatown_02.mp3"></audio>
<audio controls loop id="LOBS2" src="sounds/chinatown_03.mp3"></audio>
<audio controls loop id="SONIC1" src="sounds/schoolstraat_01.mp3"></audio>
<audio controls loop id="SONIC2" src="sounds/schoolstraat_02.mp3"></audio>
<!-- <audio controls loop id="Schoolstraat3" src="sounds/schoolstraat_03.mp3"></audio>
<audio controls loop id="Schoolstraat4" src="sounds/schoolstraat_04.mp3"></audio> -->
<!-- <audio controls loop id="pigeonsquare1" src="sounds/pigeonsquare_01.mp3"></audio>
<audio controls loop id="pigeonsquare2" src="sounds/pigeonsquare_02.mp3"></audio>
<audio controls loop id="pigeonsquare3" src="sounds/pigeonsquare_03.mp3"></audio>-->
<audio controls loop id="PIGEON1" src="sounds/pigeonsquare_04.mp3"></audio>
<audio controls loop id="PIGEON2" src="sounds/pigeonsquare_05.mp3"></audio>
<audio controls loop id="GARDE1" src="sounds/spinoza_01.mp3"></audio>
<audio controls loop id="GARDE2" src="sounds/spinoza_02.mp3"></audio>
<!-- <audio controls loop id="spinoza3" src="sounds/spinoza_03.mp3"></audio> -->
</div>
<div id="container">
<div id="a">
</div>
</div>
<script defer src="canvas.js"></script>
<script defer src="codes.js"></script>
</body>
<script>
var button = document.getElementById('BOX3'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('openModal');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
$(document).ready(function(){
$("#colophon").click(function(){
$('.modalDialog').fadeIn(600);})
$("#colophonX").click(function(){
$('.modalDialog').fadeIn(600);})
});
//var button = document.getElementById('BOX3'); // Assumes element with id='button'
//button.onclick = function() {
// var div = document.getElementById('openModal');
// if (div.style.display !== 'none') {
// div.style.display = 'none';
//}
//else {
//div.style.display = 'block';
//}
//};
</script>
</html>

166
style.css
Unescape Escape View File

@ -13,9 +13,6 @@ a span.unclickable { text-decoration: none;
/*----------------- CANVAS FROM P5.JS--------------------*/
canvas{
z-index: 20;
}
#GIF {
visibility: visible;
@ -34,33 +31,49 @@ canvas{
/*----------------- WHAT IS THIS? THE MODAL BOX MAYBE--------------------*/
@keyframes disparition {
0% {opacity:1; z-index: 15000;}
10%, 90% { opacity: 0; z-index: -100;}
100% {opacity : 0; z-index: -100;}
}
/*----------------- HELP POP UP WINDOW--------------------*/
a button{
background-color: transparent;
margin-bottom: 0;
cursor: pointer;
border: none !important;
font-size:3vw;
margin-bottom: 0;
bottom:0%;
right: 1%;
cursor: url(symboles/CURSEUR.png), pointer;
opacity: 0.5;
}
button{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 3px 1em;
text-decoration: none;
margin-bottom: 1%;
background-color: rgba(0,0,0,.2);
border-radius: 40px;
color: white;
}
#openModal {
display:none;
font-family: 'ApfelGrotezk-Regular';
color: #000;
z-index: 99999;
margin-top: 200%;
}
.modalDialog {
position: absolute;
border; red 1px solid;
position: relative;
font-family: 'ApfelGrotezk-Regular';
color: #FFFF;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 1);
z-index: 99999;
cursor: url(symboles/CURSEUR.png), pointer;
}
@ -77,13 +90,17 @@ canvas{
url('ApfelGrotezk-Regular.woff') format('woff');
width: 100%;
color: white;
position: fixed;
margin: 1% auto;
padding: 1% 1% 1% 1%;
background: #000;
position: relative;
margin: auto;
cursor: url(symboles/CURSEUR.png), pointer;
}
canvas{
z-index: 20;
height: 100%;
}
/*----------------- CLOSE POP UP --------------------*/
*{
@ -92,6 +109,7 @@ canvas{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
scroll-behavior: smooth;
}
@font-face {
@ -112,7 +130,6 @@ canvas{
body{
font-size: 1.5em;
background-color: black;
color: white;
font-family: "ApfelGrotezk-Regular";
}
@ -123,20 +140,22 @@ body{
}
#code-input{
left: 1em;
bottom: 1em;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 0.8em;
font-size: 3vw;
cursor: url(symboles/CURSEUR.png), pointer;
opacity: 0.5;
}
#code-input:hover{
color: white;
cursor: pointer;
cursor: url(symboles/CURSEUR.png), pointer;
}
#input{
@ -144,14 +163,14 @@ body{
border: 0;
outline: 0;
background: transparent;
left: 1em;
bottom: 1em;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 5vw;
font-size: 3vw;
}
@ -159,8 +178,8 @@ body{
border: 0;
outline: 0;
background: transparent;
left: 1em;
bottom: 1em;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
@ -278,6 +297,83 @@ cursor: url(symboles/NOcursor.png), pointer; min-height: 100%;
@media screen and (max-width: 768px) {
a button{
background-color: transparent;
margin-bottom: 0;
cursor: pointer;
border: none !important;
font-size:4vw;
margin-bottom: 0;
bottom:0%;
right: 1%;
cursor: url(symboles/CURSEUR.png), pointer;
opacity: 0.5;
}
button{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
padding: 3px 1em;
text-decoration: none;
margin-bottom: 1%;
background-color: rgba(0,0,0,.2);
border-radius: 40px;
color: white;
}
#code-input{
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 4vw;
cursor: url(symboles/CURSEUR.png), pointer;
opacity: 0.5;
}
#code-input:hover{
color: white;
cursor: pointer;
cursor: url(symboles/CURSEUR.png), pointer;
}
#input{
visibility: hidden;
border: 0;
outline: 0;
background: transparent;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 3vw;
}
#fname{
border: 0;
outline: 0;
background: transparent;
left: 1%;
bottom: 1%;
border: none;
position: fixed;
background: transparent;
color: white;
font-family: "ApfelGrotezk-Regular";
font-size: 4vw;
}
#textcontainer{
display: none;
position: absolute;
@ -286,7 +382,7 @@ cursor: url(symboles/NOcursor.png), pointer; min-height: 100%;
right:0;
width: auto;
height: auto;
font-size: 4.5vw;
font-size: 4vw;
text-align: center;
color: black;
margin-top: 70px;
@ -308,8 +404,8 @@ cursor: url(symboles/NOcursor.png), pointer; min-height: 100%;
p2 {
text-align: center;
font-size: 3vw;
line-height: 110%;
font-size: 4vw;
line-height: 90%;
padding-left:10%;
padding-right:10%;

Write Preview
Loading…
Cancel
Save