done

canvas.js

@@ -0,0 +1,579 @@
+function fontRead(){
+  fontReady = true;
+}
+
+
+
+
+
+function preload() {
+    
+           footsteps = document.getElementById("footsteps");//walking
+PNF1 = document.getElementById("PNF1");
+
+    
+myFont = loadFont("ApfelGrotezk-Regular.ttf", fontRead);
+    myFont2 = loadFont("typefaces/TINY5x3-40.ttf", fontRead);
+    myFont3 = loadFont("typefaces/TINY5x3-60.ttf", fontRead);
+    myFont4 = loadFont("typefaces/TINY5x3-80.ttf", fontRead);
+    myFont5 = loadFont("typefaces/TINY5x3-100.ttf", fontRead);
+    myFont6 = loadFont("typefaces/TINY5x3-120.ttf", fontRead);
+    myFont7 = loadFont("typefaces/TINY5x3-140.ttf", fontRead);
+    myFont8 = loadFont("typefaces/TINY5x3-160.ttf", fontRead);
+    myFont9 = loadFont("typefaces/TINY5x3-180.ttf", fontRead);
+    myFont10 = loadFont("typefaces/TINY5x3-200.ttf", fontRead);
+    myFont11 = loadFont("typefaces/TINY5x3-220.ttf", fontRead);
+    myFont12 = loadFont("typefaces/TINY5x3-240.ttf", fontRead);
+    myFont13 = loadFont("typefaces/TINY5x3-260.ttf", fontRead);
+    myFont14 = loadFont("typefaces/TINY5x3-280.ttf", fontRead);
+        
+    sou = PNF1
+};
+
+
+
+
+
+// Place not found 1
+// Place not found 2
+// Lobster Lounge 1
+// Lobster Lounge 1
+// The Secret Garden
+// Sonic the Sellout1
+// Sonic the Sellout 2
+// Pigeon Plaza 1
+// Pigeon Plaza 2
+
+
+p5.disableFriendlyErrors = true;
+
+var canvas;
+
+var hit = false;
+
+//little ball
+var ballX = Math.random() * window.innerWidth; //set starting point of ball
+var ballY = Math.random() * window.innerHeight;
+var ballwidth = 35;//set size of ball
+var ballheight = 35;
+
+var ballDirectionX = -1;
+var ballDirectionY = -1;
+var ballSpeed = 5;
+
+//player1 is  CPU
+var p1X = 5;//set a distance from left border***
+var p1Y = 250;
+var cpuSpeed = 40;
+
+//player 2
+var p2X = -5;//set a distance from right border***
+var p2Y = -5;
+
+//player 2
+var p3X = -20;//set a distance from right border***
+var p3Y = -20;
+
+
+//playersize
+var playerWidth = 10;
+var playerHeight = 200; 
+var pSpeed = 15;
+
+//scoreboard
+var p1Score = 0;
+var p2Score = 0;
+
+//FUNCTIONS
+var stage = 0;
+//0 =splash
+//1 =pong
+
+var coordinateX = Math.random() * window.innerWidth;
+var coordinateY = Math.random() * window.innerHeight;
+
+var letterSize = 50;
+
+
+var myFont, fontReady = false;
+var clicks = 0;
+var song;
+
+var hit = false;
+
+var inside = false;
+
+var capture = true;
+
+
+var r = 0;
+var g = 0;
+var b = 0;
+
+var col = 0;
+
+var img;
+
+
+//var _createImg2;
+//let cheatcode = '';
+
+//var sliderRate,
+//var sliderPan;
+
+function setup() {  
+    
+    
+  // // console.log(coordinateX);
+  createCanvas(windowWidth, windowHeight).position(0,0).style('z-index','-10').style('display','fixed');
+  width = windowWidth;
+  height = windowHeight;  
+  rectMode(CENTER);
+  textSize(30);
+  //textalignment
+  textAlign(CENTER);
+  //img = loadImage =('INTRO.gif');  
+}
+
+
+
+// function loaded(){
+//   song.play();
+// }
+
+function draw(){ 
+    
+    footsteps.play();
+
+    //pong(); //run pong function
+    if (stage == 0){
+      splash1();//run splash1
+    }
+    if(stage == 0 && clicks== 2){
+      stage = 1;//startslide1  
+      document.getElementById("GIF").style.visibility = "hidden";  
+    }//close 0  
+    if (stage == 1){
+      splash2();//run splash2
+    }
+    if(stage == 1 && clicks == 3){
+      stage = 2;//run splash2  
+    }//close 1
+    
+    if (stage == 2){
+      splash3();//run splash3
+    }
+    if(stage == 2 && clicks == 4){
+      stage = 3;//run splash3  
+    }//close 2
+    
+    if (stage == 3){
+      splash4();//run splash4
+    }
+    if(stage == 3 && clicks == 5){
+      stage = 4;//run splash4  
+    }//close 3
+    if (stage == 4){
+      hideSplash(); // added by mb
+      pong();//run pong
+      noStroke();
+      fill(255);
+      textSize(80);
+      textAlign(CENTER, CENTER);
+      //displaying number of clicks
+      //text(clicks, width/2, height/2);  
+    }//close 2
+    
+    if(stage == 6){ //player 1 wins
+      p1Wins();
+    }//close 3
+    
+    if(stage == 7){ //player 2 wins
+      p2Wins();
+    }//close 4
+    
+
+  
+}//close draw
+
+function keyPressed() {
+  // console.log('keyPressed: ' + key);
+}
+
+function keyPressed() {
+  // console.log('keyPressed: ' + key);
+}
+
+function keyReleased() {
+  // console.log('keyReleased: ' + key);
+}
+
+function keyTyped(){
+ //   cheatcode += key;  
+  // console.log('keyTyped: ' + key);
+}
+
+function mousePressed(){
+  // console.log('mousePressed'); 
+  clicks ++;  
+  capture = true;  
+}
+
+function mouseReleased(){
+    console.log('mouseReleased');
+    capture = false;
+}
+
+function mouseClicked(){
+  // console.log('mouseClicked');
+}
+
+function mouseMoved(){
+  // console.log('mouseMoved');
+}
+
+function mouseDragged(){
+  // console.log('mouseDragged');
+}
+
+function mouseWheel(){
+  // console.log('mouseWheel');
+}
+
+function displayInSplash(html){
+    var textcontainer = document.getElementById("textcontainer");
+    textcontainer.innerHTML = html;
+    textcontainer.style.display = "block"; // show the textcontainer
+}
+function hideSplash(){
+    var textcontainer = document.getElementById("textcontainer");
+    textcontainer.style.display = "none"; // hide the textcontainer
+}
+
+function splash1(){
+    var html = "Tap or Click <em>anywhere</em> to start";
+    displayInSplash(html);
+    fill(255);
+}
+function splash2(){
+    var html = 'You are the ball in a city-based pinball game. <br><br> Bounce from bumper to bumper.<br><br>Unlock secrets and surprises.<br><br>Drift through our urban playfield.';
+    displayInSplash(html);
+    background(255);
+}
+
+function splash3(){
+    //welcome screen
+    var html = "    1. Walk through the city using the <strong>coordinates</strong> (hints) given in this website.<br><br>2. Once you arrive, open your Wi-Fi settings and connect to the <strong>hotspot</strong> whose name you'll also find here.<br><br>3. Go to your <strong>web browser</strong> and type the name of the hotspot as a url:  <strong>name.wlan/</strong>.<br><br>A hotspot is a local wireless access point. Within the context of this issue, however, a hotspot is not a regular Wi-Fi connection: it doesn't connect you to the Internet, but, instead, to our pinball game.";
+    displayInSplash(html);
+    background(255);
+}
+
+function splash4(){
+    //welcome screen
+    var html = 'Tap anywhere to launch a ball!';
+    displayInSplash(html);
+    background(255);
+}
+
+
+function p1Wins(){
+  //P1 Win screen
+  r = map(mouseX, 0, windowHeight, 0, 255); 
+  g = map(mouseY, 0, windowHeight, 255, 0);
+  b = map(mouseX, 0, windowWidth, 0, 255);
+//  col = mouseX/2;  
+  background(r, g, b);  
+  fill(255);
+  textSize(25);
+  textFont(myFont);  
+  text('Refresh to launch a new ball', width/2, height/2);
+    
+    
+}//close P1
+
+
+function p2Wins(){
+  //P2 Win screen
+  background(163);
+  fill(255);
+  
+  textSize(20);
+  textFont(myFont);
+  text('Refresh to launch a new ball', width/2, height/2);
+}//close P2
+
+
+function windowResized() { 
+    resizeCanvas(windowWidth, windowHeight); 
+} 
+
+function ball(){
+  ballX = ballX + (ballDirectionX*ballSpeed);//move horizontally
+  ballY = ballY + (ballDirectionY*ballSpeed);//move vertically
+
+  noStroke();//turn off outline border
+  fill(255); //fill set to white
+  ellipse(ballX, ballY, ballwidth, ballheight);
+  
+  if(ballX < 0){//ball off the left of the screen
+    ballDirectionX = ballDirectionX*-1;
+  }
+  if(ballX > width){//ball off the right of the screen
+    ballDirectionX = ballDirectionX*-1;
+    //insert a sound here  
+  }
+  if(ballY < 0){//ball off the left of the screen
+    ballDirectionY = ballDirectionY*-1;
+  }
+  if(ballY > height){//ball off the top of the screen
+    ballDirectionY = ballDirectionY*-1;
+  }
+}
+
+function coordinateBall(){
+  noStroke();//turn off outline border
+  fill(0,0,0); //fill set to white
+  let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
+  ellipse(coordinateX,coordinateY, d, d);
+}
+
+function coordinateBallColored(){
+  noStroke();
+  r = map(ballX, 0, windowWidth, 0, 255); 
+  g = map(ballY, 0, windowHeight, 255, 0);
+  c = map(mouseX, -99 , windowHeight, 255, 0)
+  let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
+  fill(r,g,c);
+  ellipse(coordinateX,coordinateY, d, d);
+  
+}
+function pong() {
+    
+  let name = "Hotspot name:\nPLACE NOT FOUND";
+  let coord = "52.07239, 4.31139";
+
+  cpu(); //loop cpu function
+      
+  //if (PNF1.paused) {
+   // PNF1.play();
+  //}    
+
+
+  //IN BETWEEN VARIABLES SHOWCASE
+ 
+      r = map(ballX, 0, windowWidth, 0, 255); 
+      g = map(ballY, 0, windowHeight, 255, 0);
+      b = map(mouseX, 0, windowWidth, 0, 255);
+
+      let d = map(mouseY, 0, height, 100, 800); //diameter of the ball
+      let e = int(dist(width/2, height/2, ballX, ballY)); 
+  
+    if (inside){
+    
+      hit = collideCircleCircle(coordinateX,coordinateY,d-ballwidth,ballX, ballY,ballwidth) 
+      console.log(hit)
+    } else {
+      hit = collideCircleCircle(coordinateX,coordinateY,d,ballX, ballY,ballwidth) 
+      console.log(hit)
+    }
+      if (hit == true){
+          PNF1.play();
+          inside = true;
+
+      } else {
+          if (inside){
+            if (capture){
+              //inside bounce
+                ballDirectionX = ballDirectionX*-1;
+                ballDirectionY = ballDirectionY*-1;               
+            }  else {
+                inside = false;
+            }
+          }  
+      }
+    
+    
+      fill(255);
+//      text(cheatcode, 100, 100);          
+
+    
+      if (hit == false){
+        background(r,g,b);
+        coordinateBall();
+        textSize(width/20);
+        fill(255); 
+        textFont(myFont); 
+        textAlign(TOP);
+        textLeading(width/20);   
+text("I Don't Know Where We're Going, But\nyou are "+e+"px away from finding a hotspot ", width/2, 70);
+        textSize(width/35); 
+        textFont(myFont); 
+        textAlign(CENTER);
+        textLeading(width/35);   
+        text('Click/Press while the ball is inside the circle\n to get your coordinates', width/2, height-120);  
+        fill(0);   
+        ball();  
+        //background(r, g, b); 
+        } else if (hit == true) {
+        background(0,0,0);
+                    
+        //click.loop = false;              
+        //text('Your mouse is inside the hotspot range range at: '+ mouseX + ' pixels (x) /' + mouseY + ' pixels (y)', width/2, 280); 
+        // clear();
+            
+        if(mouseIsPressed == true) {
+            // if the mouse is pressed, while the ball is in the circle
+            // big text at the top
+            coordinateBallColored();
+            ball();
+            textSize(width/20);   
+            fill(255);
+            textFont(myFont); 
+            textAlign(TOP);  
+            textLeading(width/20);   
+            text('I Don\'t Know Where We\'re Going, But\ngo and find a hotspot at:', width/2, 70); 
+            
+            // text at the bottom
+            textFont(myFont);
+            textAlign(CENTER); 
+            textSize(width/20);
+            textLeading(width/20);   
+            text(name, width/2, height-100);
+            textSize(width/17);
+            text(coord , width/2, 150);
+            fill(0);
+            //layer1.play();//sirens
+        } else {
+            // if the mouse is not pressed, while the ball is in the circle
+            // big text at the top
+            coordinateBallColored();
+            ball();
+            textSize(width/20);   
+            fill(255);
+            textFont(myFont); 
+            textAlign(TOP);  
+            textLeading(width/20);   
+            text('I Don\'t Know Where We\'re Going, But\ntouch or click find a hotspot!', width/2, 70); 
+        }       
+}
+
+  if(mouseIsPressed == true) {
+    textFont(myFont);
+    textAlign(CENTER); 
+    textSize(20); 
+    fill(0);  
+    //text('Sound Unlocked! (your mouse is currently pressed) ', width/2, height-90);
+    //layer1.play();//sirens
+  }
+      
+  if(mouseIsPressed){  
+    if(mouseButton === RIGHT) {
+      textFont(myFont);
+      textAlign(CENTER); 
+      textSize(20); 
+      fill(255);  
+      //text('Sound Unlocked! (your mouse is right clicked) ', width/2, height/2-160)
+      //layer5.play();  
+    }    
+  }  
+
+  if(keyIsPressed == true) {
+    textAlign(CENTER);
+    textFont(myFont);   
+    fill(0);  
+    textSize(50);    
+    // // console.log("playlayer4");
+  }
+
+  if(ballX >= 900 && ballX <= 1100) {
+    textAlign(CENTER); 
+    textFont(myFont);   
+    textSize(20);    
+    fill(0);  
+    // // console.log("playlayer6");  
+  }
+
+  if(ballY >= 50 && ballY <= 200) {
+    textAlign(CENTER); 
+    textSize(20); 
+    // // console.log("playlayer2");          
+  } 
+      
+  if(windowWidth < 800) {
+    textAlign(BOTTOM);
+    textFont(myFont); 
+    textSize(20); 
+    fill(0);  
+    // // console.log("playlayer8");           
+  
+  }  
+
+  if(windowHeight < 400) {
+    textAlign(CENTER); 
+    fill(0);  
+    textSize(20); 
+    // // console.log("playlayer8");          
+  }
+
+  
+  if(ballX <= 0){
+    //off left wall - p1 missed
+    p2Score = p2Score+1;//add point
+    //recenterball   
+    ball1X = width/2; 
+    ballY = height/2;
+  }//close p2 scores
+  
+  if(ballX >= width){
+    //off right wall - p2 missed
+    p1Score = p1Score+1;//add point
+    //recenterball
+  //    ball1X = width/2; 
+  //    ballY = height/2;
+  }//close p1 scores
+    
+  if(p1Score >= 10000){
+    stage = 6; //run p1wins
+  }//close p1wins
+  
+    if(p2Score >= 10000){
+    stage = 6; //run p2wins
+        
+  }//close p2wins
+    
+}//close pong
+
+
+//UP
+function keyTyped(){
+  if(key == 'z' && keyIsPressed){
+    p1Y = p1Y-pSpeed; 
+  }//close w
+//DOWN  
+  if(key == 's' && keyIsPressed){
+    p1Y = p1Y+pSpeed; 
+  }//close s
+  
+}//close keytyped
+
+function cpu(){
+  //controls cpu player
+  if(ballX < width/2){//has the ball crossed the court?
+    if(p1Y <= ballY){
+      p1Y = p1Y+cpuSpeed;
+      //move down
+    }//close above cel
+  
+  
+    if(p1Y >= ballY){
+      p1Y = p1Y-cpuSpeed;
+    //move up     
+    }//close bellow ball
+  }//close move cpu
+  else{
+    p1Y = p1Y; //only move when ball is on cpu side
+  }//close else
+  
+    
+}//close cpu
+hit

code/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+    <meta charset="utf-8">
+
+    <title>LAUNCHER</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+
+        <div class="overlay">
+        <a href="https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/test.zip">GET YOUR BONUS FILES</a>
+    </div>
+    </body>
+</html>

code/style.css

@@ -0,0 +1,58 @@
+*{
+/* Prevent any object from being highlighted upon touch event*/
+  tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  outline: none;
+}
+
+@font-face {
+  font-family: "ApfelGrotezk-Regular";
+  src: url("../../ApfelGrotezk-Regular.ttf");
+}
+
+.display-none {
+  display:none;
+}
+.display-flex {
+  display:flex;
+}
+.display-block{
+  display:block;
+}
+
+body{
+    font-size: 1.5em;
+    background-color: black;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    text-align: center;
+}
+
+.overlay{
+    z-index: 2;
+    position: fixed;
+}
+
+#code-input{
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+}
+
+#input{
+    visibility: hidden;
+}
+
+a{
+    text-decoration: none;
+    color: white
+}
+
+a:hover{
+    text-decoration: none;
+    color: blue;
+    cursor: pointer;
+}

codes.js

@@ -0,0 +1,74 @@
+
+    function openInput(){
+        document.getElementById("input").style.visibility = "visible";
+        document.getElementById("code-input").style.visibility = "hidden";
+        document.getElementById("fname").focus(); 
+    } 
+
+    let toxt = document.querySelector ("input[type='toxt']");
+
+    function checkCode (e) {
+        if (e.key == "Enter") {
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "PPRGM") {
+                location='ZIPFILES/pprgm/'; 
+            }//OK
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "BORDERS") {
+                location='ZIPFILES/BORDERS.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "LIFE") {
+                location='ZIPFILES/LIFE.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "FUTURE") {
+                location='ZIPFILES/FUTURE.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "DIALOGUE") {
+                location='ZIPFILES/DIALOGUE.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "BREATH") {
+                location='ZIPFILES/BREATH.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "CAPITALISM") {
+                location='ZIPFILES/CAPITALISM.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "GAMES") {
+                location='ZIPFILES/CAPITALISM.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "SYNERGY") {
+                location='ZIPFILES/SINERGY.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "DEATH") {
+                location='ZIPFILES/DEATH.zip'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "VIRUS") {
+                location='ZIPFILES/VIRUS.zip'; 
+            } 
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "THEWHOLE") {
+                location='ZIPFILES/THEWHOLE.zip'; 
+            } 
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "CAT") {
+                location='https://hub.xpub.nl/sandbot/PrototypingTimes/sketches/Euna/'; 
+            }
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "APPOINTMENT") {
+                location='ZIPFILES/appointment/'; 
+            } 
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "PRAXIS") {
+                location='ZIPFILES/PRAXIS.zip'; 
+            } 
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "OFFLINE") {
+                location='ZIPFILES/OFFLINE.zip'; 
+            } //OK
+
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "POISON") {
+                location='ZIPFILES/poison/'; 
+            }  
+            if (document.querySelector ("input[type='toxt']").value.toUpperCase() === "THISISNOTART") {
+                location='ZIPFILES/THISISNOTART.zip'; 
+            }  
+            
+            else {
+                console.log("NO GOOD");
+            }         
+        }
+    }
+
+    toxt.addEventListener("keydown", checkCode );

index.html

@@ -1,8 +1,200 @@
+
+<!DOCTYPE html>
+
 <html>
+
 <head>
+    <meta name="viewport" content= "width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script src="p5.min.js"></script>
+    <script src="p5.dom.min.js"></script>
+    <script src="p5.sound.js"></script>
+    <script src="https://unpkg.com/p5.collide2d"></script> 
+    <script type="text/javascript"></script>
+        
+    <title>I Don't Know Where We're Going, But..</title>
+
+        <!--------------- INPUT CODE ---------------------------------->  
+
+    <div class="overlay">
+        <button id="code-input" value="myimage" onclick="openInput()">Enter code
+        </button>
+    </div>
+    
+    <div id="input">
+        <input type="toxt" id="fname" name="firstname" placeholder="">
+    </div>
+
+<!---------------  PRINT BUTTON (OPTIONAL)----------------------------->
+    
+
 </head>
+    
+<!--------------- textcontainer (mb) ------------------------------------------>
+
+<div id="textcontainer"></div>
+    
+    
 <body>
-test+
+ <div>
+        
+        <img src="INTRO.gif" alt=""  id="GIF"/></div>
+    
+        <div id="BOX3">
+            <img src="symboles/HELP.png">
+        </div> 
+
+        <div id="openModal" class="modalDialog">
+            <div>
+                <a href="#close" title="Close" class="close">X</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.
+All that is left is the city in its rawest form and the people inhabiting its shut down structures. 
+Where can you go if everything is closed? What could you encounter along the way?
+Locked within the walls of a comatose town, you are missing direction. If the city is your new playground, who are the players and what is the objective? 
+
+<br><br>
+
+Special Issue #14 from Piet Zwart Institute's Master of Experimental Publishing is born from the never-realised seventh issue of The Situationist Times, a magazine edited and published by the Dutch artist Jacqueline de Jong from 1962 to 1964. We began by delving into the material De Jong had gathered for the prospective issue, which revolved around pinball machines and their female player. 
+
+<br><br>
+
+With this in mind, "I Don't Know Where We're Going, But" intends to explore these themes by situating our emerging experiments in a more contemporary medium: hyper-stimulating video games. We took a deep dive into their history throughout the years and, (from this,) started making prototypes of retro arcade games. The result is an exploration of video game mechanics as a tool for narration. To anchor our digital games into the reality of the city, we felt it was appropriate to lean into the method of dérive, a term coined by The Situationists that refers to the wandering of the city without a set destination. The notion of going against predetermined structures resonated with our theoretical research on feminism, socialism & counter play. In the spirit of Situationism, we are stepping into psychogeographic methods of publishing, encouraging the exploration of urban environments through playfulness and dérive.
+
+<br><br>
+
+Find new trajectories or get lost within the many paths of this coordinate-based Special Issue, and discover the hidden signals we are sending out to you all across town. Bounce within a spontaneous rearrangement of situations and nodes, as the only way to experience the local network-based publication. In a battle of chance and control, let your personal path unravel an ensemble of concrete and fictitious publishing environments, where the shared notion of network is flipped-out.
+
+<hr>
+
+You receive coordinates in the city of Den Haag. On arrival at the given location, you log into a local wifi network with your mobile phone. This gives you access to parts of the content of this Issue, only to be directed to the next location. This game is playable within a day or spread out over days, as it will be running for the month of April. We hope that the content you will gather on your devices during your escape will last you for longer than that.
+
+<small>A short note on the interface: The sounds you are hearing were recorded at the location of the hotspots that you need to find.</small>
+
+<br><br>
+
+<strong>Colophon</strong>
+
+<br><br>
+
+Conceptualised, designed, created, edited, produced, published and distributed by XPUB1 class of 2020.
+
+<br><br>
+
+Kendal Beynon, Martin Foucaut, Camilo García A., Clara Gradel, Nami Kim, Euna Lee, Jacopo Lega, Federico Poni, Louisa Teichmann, Floor van Meeuwen 
+
+<strong>Tutors</strong>: Manetta Berends, Aymeric Mansoux, Michael Murtaugh, Lídia Pereira, Steve Rushton, Marloes de Valk
+
+<br><br>
+
+<strong>Special thanks to</strong>: Sébastien Tien , Ola Vasiljeva,Jacqueline de Jong 
+
+<br><br>
+
+<strong>and all the great people we met along the way</strong>: Kishonna Gray, Ellef Prestsæter, David Maroto, Anne-Marie Schleiner, Jamie Woodcock
+
+<br><br>
+
+<strong>Thanks to</strong>: Anesca and colleagues Hanny, Vincent and Wim Kenny.The Seafood service for hosting our hotspots. 
+
+<br><br>
+
+<strong>Typeface: </strong> Apfel Grotezk, TINY 
+
+<br><br>
+
+Rotterdam, NL <br>
+Spring, 2021 
+
+<br><br>
+
+Published by the Master Experimental Publishing at Piet Zwart Institute and Page Not Found
+
+<br><br>
+
+<strong>Licensing</strong>
+
+<br><br>
+
+XPUB - “I Don’t Know Where We’re Going, But” <br>
+A Local Network CityQuest <br>
+A Situationist times license<br>
+© 2021 XPUB - SPECIAL ISSUE 14 
+
+<br><br>
+
+All deformation, reproduction, modification, derivation and transformation of the "I Don't Know Where We're Going, But..." is permitted. This refers to all the games, images, texts, and videos created for this local network city quest. 
+
+<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 : ⨂. 
+</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="GARDE" src="sounds/spinoza_01.mp3"></audio>
+    <!-- <audio controls loop id="spinoza2" 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';
+    }
+};
+    </script> 
+    
 </html>
+
+
+

louisa code/.ipynb_checkpoints/index-checkpoint.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+    <meta charset="utf-8">
+
+    <title>LAUNCHER</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+ <div id="GIF">
+        
+        <img src="INTRO.gif" alt="whatever" id="gif"/></div>
+        <div class="overlay">
+            <button  id="code-input" value="myimage" onclick="openInput()">enter codeword
+            </button>
+        </div>
+
+        <div id="input">
+            <input type="text" id="fname" name="firstname" placeholder="">
+        </div>
+        <script>    
+            
+            function openInput(){
+                document.getElementById("input").style.visibility = "visible";
+                document.getElementById("code-input").style.visibility = "hidden";
+                document.getElementById("fname").focus(); 
+            } 
+
+
+            let text = document.querySelector ("input[type='text']");
+
+            function checkCode (e) {
+                if (e.key == "Enter") {
+                    if (document.querySelector ("input[type='text']").value === "codeword") {
+                        location='https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/index.html'; 
+                        console.log("codeword works because of checkCode");
+                    } else {
+                        console.log("NO GOOD");
+                    }         
+                }
+            }
+            
+            text.addEventListener("keydown", checkCode );
+        </script>
+    </body>
+</html>

louisa code/.ipynb_checkpoints/style-checkpoint.css

@@ -0,0 +1,99 @@
+*{
+/* Prevent any object from being highlighted upon touch event*/
+  tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  outline: none;
+}
+
+@font-face {
+  font-family: "ApfelGrotezk-Regular";
+  src: url("../ApfelGrotezk-Regular.ttf");
+}
+
+
+.display-none {
+  display:none;
+}
+.display-flex {
+  display:flex;
+}
+.display-block{
+  display:block;
+}
+
+body{
+    font-size: 1.5em;
+    background-color: black;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+}
+
+.overlay{
+    z-index: 2;
+    position: fixed;
+}
+
+#code-input{
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 0.8em;
+}
+
+#code-input:hover{
+    color: blue;
+    cursor: pointer;
+
+}
+
+#input{
+    visibility: hidden;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 0.8em;
+
+}
+
+#fname{
+    border: 0;
+    outline: 0;
+    background: transparent;
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 1em;
+
+}
+
+img { opacity: 1; 
+    z-index: 0;
+    display: block;
+    position: fixed;
+}
+
+#gif {
+    visibility: visible;
+    position: absolute;
+    height: 50%;
+    top: 48%;
+    text-align: center;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}

louisa code/code/.ipynb_checkpoints/index-checkpoint.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+    <meta charset="utf-8">
+
+    <title>LAUNCHER</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+
+        <div class="overlay">
+        <a href="https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/test.zip">GET YOUR BONUS FILES</a>
+    </div>
+    </body>
+</html>

louisa code/code/.ipynb_checkpoints/style-checkpoint.css

@@ -0,0 +1,58 @@
+*{
+/* Prevent any object from being highlighted upon touch event*/
+  tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  outline: none;
+}
+
+@font-face {
+  font-family: "ApfelGrotezk-Regular";
+  src: url("../../ApfelGrotezk-Regular.ttf");
+}
+
+.display-none {
+  display:none;
+}
+.display-flex {
+  display:flex;
+}
+.display-block{
+  display:block;
+}
+
+body{
+    font-size: 1.5em;
+    background-color: black;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    text-align: center;
+}
+
+.overlay{
+    z-index: 2;
+    position: fixed;
+}
+
+#code-input{
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+}
+
+#input{
+    visibility: hidden;
+}
+
+a{
+    text-decoration: none;
+    color: white
+}
+
+a:hover{
+    text-decoration: none;
+    color: blue;
+    cursor: pointer;
+}

louisa code/code/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+    <meta charset="utf-8">
+
+    <title>LAUNCHER</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+
+        <div class="overlay">
+        <a href="https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/test.zip">GET YOUR BONUS FILES</a>
+    </div>
+    </body>
+</html>

louisa code/code/style.css

@@ -0,0 +1,58 @@
+*{
+/* Prevent any object from being highlighted upon touch event*/
+  tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  outline: none;
+}
+
+@font-face {
+  font-family: "ApfelGrotezk-Regular";
+  src: url("../../ApfelGrotezk-Regular.ttf");
+}
+
+.display-none {
+  display:none;
+}
+.display-flex {
+  display:flex;
+}
+.display-block{
+  display:block;
+}
+
+body{
+    font-size: 1.5em;
+    background-color: black;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    text-align: center;
+}
+
+.overlay{
+    z-index: 2;
+    position: fixed;
+}
+
+#code-input{
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+}
+
+#input{
+    visibility: hidden;
+}
+
+a{
+    text-decoration: none;
+    color: white
+}
+
+a:hover{
+    text-decoration: none;
+    color: blue;
+    cursor: pointer;
+}

louisa code/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+    <meta charset="utf-8">
+
+    <title>LAUNCHER</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+ <div id="GIF">
+        
+        <img src="INTRO.gif" alt="whatever" id="gif"/></div>
+        <div class="overlay">
+            <button  id="code-input" value="myimage" onclick="openInput()">enter codeword
+            </button>
+        </div>
+
+        <div id="input">
+            <input type="text" id="fname" name="firstname" placeholder="">
+        </div>
+        <script>    
+            
+            function openInput(){
+                document.getElementById("input").style.visibility = "visible";
+                document.getElementById("code-input").style.visibility = "hidden";
+                document.getElementById("fname").focus(); 
+            } 
+
+
+            let text = document.querySelector ("input[type='text']");
+
+            function checkCode (e) {
+                if (e.key == "Enter") {
+                    if (document.querySelector ("input[type='text']").value === "codeword") {
+                        location='https://hub.xpub.nl/sandbot/PrototypingTimes/LAUNCHER/louisa%20code/code/index.html'; 
+                        console.log("codeword works because of checkCode");
+                    } else {
+                        console.log("NO GOOD");
+                    }         
+                }
+            }
+            
+            text.addEventListener("keydown", checkCode );
+        </script>
+    </body>
+</html>

louisa code/style.css

@@ -0,0 +1,99 @@
+*{
+/* Prevent any object from being highlighted upon touch event*/
+  tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  outline: none;
+}
+
+@font-face {
+  font-family: "ApfelGrotezk-Regular";
+  src: url("../ApfelGrotezk-Regular.ttf");
+}
+
+
+.display-none {
+  display:none;
+}
+.display-flex {
+  display:flex;
+}
+.display-block{
+  display:block;
+}
+
+body{
+    font-size: 1.5em;
+    background-color: black;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+}
+
+.overlay{
+    z-index: 2;
+    position: fixed;
+}
+
+#code-input{
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 0.8em;
+}
+
+#code-input:hover{
+    color: blue;
+    cursor: pointer;
+
+}
+
+#input{
+    visibility: hidden;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 0.8em;
+
+}
+
+#fname{
+    border: 0;
+    outline: 0;
+    background: transparent;
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 1em;
+
+}
+
+img { opacity: 1; 
+    z-index: 0;
+    display: block;
+    position: fixed;
+}
+
+#gif {
+    visibility: visible;
+    position: absolute;
+    height: 50%;
+    top: 48%;
+    text-align: center;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}

mobile.css

@@ -0,0 +1,12 @@
+#textcontainer{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    background-color: yellow;
+    font-size: 72px;
+    text-align: center;
+    color: blue;
+}

myTools.js

@@ -0,0 +1,137 @@
+/*
+ myTools  KLL
+ use extra js file here in root
+ name: myTools.js
+ idea is to develop it here ( master ) and download / upload to other projects.
+ content: 
+ 
+ functions to call:
+
+ logo(x,y,radius,speed);
+ 
+ mysong( true/false ); //________________ from anywhere to start stop song
+ //______________________________________ here as example linked into the Button press action
+
+
+//_________________________________ !!
+<!-- 
+ need 
+    <script src="myTools.js"></script>  
+ inside index.html
+-->
+
+*/
+
+//________________________________________________________ FUNCTIONS MYSOUND
+
+
+let song;
+
+function preload() {
+  song = loadSound('sound/loop5.mp3');
+}
+
+function mysong( go ) {
+  if ( go && !song.isLooping() ) song.loop();
+  if ( !go && song.isLooping() ) song.pause();
+}
+
+
+function mouseVolume() {//___ test a simple mouse slider for volume
+   if ( song.isLooping() ) {
+     fill(200);
+     triangle(10,height-10, width-10,height-30,width-10,height-10);
+     let amp = map(mouseX, 0, width,0,1);
+     fill(200,0,0);
+     rect( amp*width,height-30,5,20);
+     //print(amp);
+     masterVolume(amp);
+   }
+}
+
+
+
+//________________________________________________________ FUNCTION LOGO
+var ang = 0;
+
+function logo(x, y, r, dang) {
+  var d1 = 2 * r;
+  var d2 = 2 * r / sqrt(2);
+  ang += dang; //__________________ animation
+  push();
+  fill(255); //____________________ fill same all 3 shapes
+  strokeWeight(4);
+  stroke(200, 200, 0); //__________ here same as main background gives a nice effect
+  ellipseMode(CENTER);
+  rectMode(CENTER);
+  translate(x + r, y + r); //______ CENTER thinking
+  push();
+  rotate(-ang); //__________________ animate first bigger rect
+  rect(0, 0, d1, d1);
+  pop();
+  ellipse(0, 0, d1, d1);
+  rotate(ang); //_________________ animate second smaller rect  
+  rect(0, 0, d2, d2);
+  textAlign(CENTER, CENTER);
+  textSize(20);
+  text("K L L", 0, 0);
+  pop();
+}
+
+/*
+ __________________________________ classes declared:
+ 
+ class Button
+ declare:
+  var button;
+  Button button(x, y, w, h, sel, textFalse, textTrue, id);
+ methods:
+  button.draw(); //_______________ from draw
+  button.mousePressed(); //_______ local use global mymouseClicked
+  boolean button.over(); //_______ local
+  
+*/
+
+class Button { //____________________________________ begin class
+  constructor(xi, yi, wi, hi, seli, atextisel,atextinosel, idi) {
+    this.xb = xi;
+    this.yb = yi;
+    this.wb = wi;
+    this.hb = hi;
+    this.selb = seli;
+    this.textbsel = atextisel;
+    this.textbnosel = atextinosel;
+    this.idb = idi;
+  }
+
+  draw() {
+    this.mousePressed();
+    strokeWeight(3);
+    if (this.selb) fill(0, 200, 0);
+    else fill(0, 0, 200);
+    if (this.over()) stroke(200, 0, 200);
+    else stroke(0, 200, 200);
+    rect(this.xb, this.yb, this.wb, this.hb);
+
+    noStroke();
+    fill(200);
+    textSize(30);
+    if ( this.selb ) text(this.textbnosel, this.xb + 5, this.yb + this.hb - 8);
+    else text(this.textbsel, this.xb + 5, this.yb + this.hb - 8);
+  }
+
+  over() {
+    return (mouseX > this.xb & mouseX < this.xb + this.wb & mouseY > this.yb & mouseY < this.yb + this.hb);
+  }
+
+  mousePressed() {
+    //    if (this.over() && mouseIsPressed) {
+    if (this.over() && mymouseClicked) {
+      mymouseClicked = false; // reset global
+      this.selb = ! this.selb; // toggle;
+      mysong( this.selb ); //__________________________ start stop sound
+    }
+  }
+
+} //___________________________________________________ end class
+

style-mb.css

@@ -0,0 +1,12 @@
+#textcontainer{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    background-color: pink;
+    font-size: 72px;
+    text-align: center;
+    color: red;
+}

style.css

@@ -0,0 +1,369 @@
+
+
+img { opacity: 1; 
+    z-index: 0;
+    display: block;
+    position: fixed;
+}
+
+a span.unclickable  { text-decoration: none; 
+}
+     a span.unclickable:hover { cursor: default; 
+}
+
+/*----------------- CANVAS FROM P5.JS--------------------*/
+
+canvas{
+  z-index: 20;
+}
+
+#GIF {
+    visibility: visible;
+    position: absolute;
+    height: 50%;
+    top: 48%;
+    text-align: center;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+
+/*----------------- CONTAINING ALL CONTENTS--------------------*/
+
+
+
+/*----------------- 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--------------------*/
+
+#openModal {
+    display:none;
+    font-family: 'ApfelGrotezk-Regular';
+    color: #000;
+    z-index: 99999;
+}
+
+.modalDialog {
+    position: absolute;
+    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; 
+}
+
+
+.modalDialog:target {
+    opacity: 1;
+    pointer-events: auto;
+    cursor: url(symboles/CURSEUR.png), pointer; 
+
+}
+.modalDialog > div {
+    font-family: 'ApfelGrotezk-Regular';
+
+    url('ApfelGrotezk-Regular.woff') format('woff');
+    width: 100%;
+    color: white;
+    position: fixed;
+    margin: 1% auto;
+    padding: 1% 1% 1% 1%;
+    background: #000;
+    cursor: url(symboles/CURSEUR.png), pointer; 
+}
+
+/*----------------- CLOSE POP UP --------------------*/
+
+*{
+/* Prevent any object from being highlighted upon touch event*/
+  tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+  outline: none;
+}
+
+@font-face {
+  font-family: "ApfelGrotezk-Regular";
+  src: url("../ApfelGrotezk-Regular.ttf");
+}
+
+
+.display-none {
+  display:none;
+}
+.display-flex {
+  display:flex;
+}
+.display-block{
+  display:block;
+}
+
+body{
+    font-size: 1.5em;
+    background-color: black;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+}
+
+.overlay{
+    z-index: 2;
+    position: fixed;
+}
+
+#code-input{
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 0.8em;
+}
+
+#code-input:hover{
+    color: white;
+    cursor: pointer;
+
+}
+
+#input{
+    visibility: hidden;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 5vw;
+
+}
+
+#fname{
+    border: 0;
+    outline: 0;
+    background: transparent;
+    left: 1em;
+    bottom: 1em;
+    border: none;  
+    position: fixed;
+    background: transparent;
+    color: white;
+    font-family: "ApfelGrotezk-Regular";
+    font-size: 5vw;
+
+}
+
+.close {
+    font-family: 'ApfelGrotezk-Regular';
+    color: #FFF;
+    font-size: 200%;
+    position: fixed;
+    right: -0.7%;
+    bottom: 1.5%;
+    width:40px;
+    text-decoration: none;
+    cursor: url(symboles/CURSEUR.png), pointer; 
+   
+}
+.close:hover {
+  color: #FFF;
+  cursor: url(symboles/CURSEUR.png), pointer; 
+}
+
+/*----------------- FONTS --------------------*/
+
+@font-face {
+    font-family: 'ApfelGrotezk-Regular';
+
+
+    font-weight: normal;
+    font-style: normal;
+}
+
+/*----------------- CURSOR --------------------*/
+
+html {
+cursor: url(symboles/NOcursor.png), pointer; min-height: 100%;
+    background: black;
+}
+
+
+/*----------------- AUDIO --------------------*/
+
+
+#audio {
+    display: none;
+}
+
+
+#BOX4 img{
+  width:60px;
+  height: 60px;  
+  position:absolute;
+  bottom:0;
+  left: 0;
+  cursor: url(symboles/CURSEUR.png), pointer; 
+}
+
+#BOX4{
+  opacity:0;
+  transition: opacity .1s ease-out;
+  -moz-transition: opacity .1s ease-out;
+  -webkit-transition: opacity .1s ease-out;
+  -o-transition: opacity .1s ease-out;
+  animation: all 2s; 
+  cursor: url(symboles/CURSEUR.png), pointer; 
+}
+
+#BOX4:hover { 
+  opacity:1;
+  transition: opacity .1s ease-out;
+  -moz-transition: opacity .1s ease-out;
+  -webkit-transition: opacity .1s ease-out;
+  -o-transition: opacity .1s ease-out;
+  animation: all 2s; 
+  cursor: url(symboles/CURSEUR.png), pointer; 
+}
+
+/*-----------------HELP/ABOUT BUTTON---------------------------------*/
+
+  #BOX3 img{
+  display: block;    
+  width:40px;
+  height: 50px;
+  position: absolute;
+  bottom:0;
+  right: 0;
+  cursor: url(symboles/CURSEUR.png), pointer; 
+  z-index: 9999;    
+}
+
+#BOX3{ 
+  opacity:0.5;
+  transition: opacity .1s ease-out;
+  -moz-transition: opacity .1s ease-out;
+  -webkit-transition: opacity .1s ease-out;
+  -o-transition: opacity .1s ease-out;
+  animation: all 2s; 
+  cursor: url(symboles/CURSEUR.png), pointer; 
+
+}
+
+#BOX3:hover { 
+  opacity:1;
+  transition: opacity .1s ease-out;
+  -moz-transition: opacity .1s ease-out;
+  -webkit-transition: opacity .1s ease-out;
+  -o-transition: opacity .1s ease-out;
+  animation: all 2s; 
+  cursor: url(symboles/CURSEUR.png), pointer; 
+} 
+
+@media screen and (max-width: 768px) { 
+    
+#textcontainer{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right:0;
+    width: auto;
+    height: auto;
+    font-size: 4.5vw;
+    text-align: center;
+    color: black;
+    margin-top: 70px;
+    padding: 5%;
+}
+#container2{
+    font-family: 'ApfelGrotezk-Regular';
+    width:100%;
+    z-index: 15000;
+    position: relative;
+    color: white;
+    display: block; 
+    flex-direction: column;
+    justify-content: center;
+    align-items:center;
+    animation: disparition 1s ease-in forwards;
+    animation-delay: 10s;
+}
+
+ p2 {    
+    text-align: center; 
+    font-size: 3vw;
+    line-height: 110%;
+    padding-left:10%; 
+    padding-right:10%; 
+ 
+}     }
+
+@media screen and (min-width: 768px) {      
+    #textcontainer{
+    width: calc(100% - 4em);   
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    font-size: 3vw;
+    text-align: center;
+    color: black;
+    margin-top: 70px;
+}
+#container2{
+    font-family: 'ApfelGrotezk-Regular';
+    width:100%;
+    z-index: 15000;
+    position: relative;
+    color: white;
+    display: block; 
+    flex-direction: column;
+    justify-content: center;
+    align-items:center;
+    animation: disparition 1s ease-in forwards;
+    animation-delay: 10s;
+}
+
+ p2 {    
+    text-align: center; 
+    font-size: 3vw;
+    line-height: 110%;
+    padding-left:10%; 
+    padding-right:10%; 
+ 
+}        }
+
+
+
+
+  
+
+  
+
+
+
+
+
+  
+
+  
+  

symboles/index.html

@@ -0,0 +1,58 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
+    <meta name="generator" content="distribusi" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
+    <style>
+      .image{max-width: 100%;}
+      .pdf object{width:640px;height: 640px;}
+      .dir::before{content:"📁 ";font-size:18px;}
+      .filename{display:block;font-family:mono;}
+      .unkown-file::before{content:"📄 ";font-size:18px;}
+      div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;}
+      video {width:640px;max-height:640px;}
+      @media screen {
+    
+ @font-face {
+    font-family: wfdtf;
+    src: url(Fonts/wftfs-Regular.otf)
+}
+    
+     @font-face {
+    font-family: EBGaramond;
+    src: url(Fonts/EBGaramond-Italic.ttf)
+}
+    
+body {
+    background-image: none;
+    min-height: 500px;
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    
+    background-color: black;
+    margin: 5mm;
+    color: white;
+    font-family: monospace;
+    font-size: 10pt;
+    text-justify: inter-word;
+    columns: 3;
+    }
+    
+}
+
+
+    </style>
+  </head>
+  <body>
+<div id="CURSEUR" class="png"><figure><img class="image" src="CURSEUR.png"><figcaption>CURSEUR.png</figcaption></figure></div>
+<div id="HELP" class="png"><figure><img class="image" src="HELP.png"><figcaption>HELP.png</figcaption></figure></div>
+<div id="PRINT" class="png"><figure><img class="image" src="PRINT.png"><figcaption>PRINT.png</figcaption></figure></div>
+<div id="REFRESH" class="png"><figure><img class="image" src="REFRESH.png"><figcaption>REFRESH.png</figcaption></figure></div>
+<a href="../">../</a>
+
+  </body>
+</html>