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.sound.js"></script>
<script src="p5.collide2d.js"></script> <script src="p5.collide2d.js"></script>
<script type="text/javascript"></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> <title>I Don't Know Where We're Going, But..</title>
@ -41,13 +42,54 @@
<img src="INTRO.gif" alt="" id="GIF"/></div> <img src="INTRO.gif" alt="" id="GIF"/></div>
<div id="BOX3"> <a href="#colophon" id="colophonX"><button>?</button></a>
<img src="symboles/HELP.png">
</div>
<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> <p2>
Another lockdown; shops closed, museums closed, bars closed, cafés closed, restaurants closed. 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. 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> <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> </p2>
</div> </div>
</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> </body>
<script> <script>
var button = document.getElementById('BOX3'); // Assumes element with id='button'
button.onclick = function() { $(document).ready(function(){
var div = document.getElementById('openModal'); $("#colophon").click(function(){
if (div.style.display !== 'none') { $('.modalDialog').fadeIn(600);})
div.style.display = 'none'; $("#colophonX").click(function(){
} $('.modalDialog').fadeIn(600);})
else { });
div.style.display = 'block'; //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> </script>
</html> </html>

166
style.css
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save