From dc0f3c0e8b477891f00fb49ec469a29726c8cdb5 Mon Sep 17 00:00:00 2001
From: louisafriederike <louisateichmann@outlook.com>
Date: Thu, 14 Sep 2023 15:51:08 +0200
Subject: [PATCH] vertical view expo

---
 app.js               |   4 +-
 public/style.css     |   1 +
 public/stylev.css    | 419 +++++++++++++++++++++++++++++++++++++++++++
 public/vertical.html | 281 +++++++++++++++++++++++++++++
 4 files changed, 703 insertions(+), 2 deletions(-)
 create mode 100644 public/stylev.css
 create mode 100644 public/vertical.html

diff --git a/app.js b/app.js
index 5a79e48..2c0e260 100644
--- a/app.js
+++ b/app.js
@@ -25,8 +25,8 @@ var trashcan = new osc.UDPPort({
   localPort: 57122,
 
   // This is where sclang is listening for OSC messages.
-  remoteAddress: "192.168.2.12", //this is the hamsters ip
-  remotePort: 8888, //this is the hamsters port :*s
+  remoteAddress: "192.168.2.12", //this is the trashcan ip
+  remotePort: 8888, //this is the trashcan port :*s
   metadata: true
 });
 
diff --git a/public/style.css b/public/style.css
index b1c659e..3cacabc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -21,6 +21,7 @@ body {
   font-weight: 400;
   background-color: #736c9f;
   text-shadow: #FF4800;
+
   /* overflow-y: hidden;
   overflow-x: hidden; */
 }
diff --git a/public/stylev.css b/public/stylev.css
new file mode 100644
index 0000000..dca333c
--- /dev/null
+++ b/public/stylev.css
@@ -0,0 +1,419 @@
+* {
+    box-sizing: border-box;
+    margin: 0px;
+    padding: 0px;
+    
+  }
+#title{
+  font-size: 2em;
+  color: black;
+  text-align: left;
+ 
+}
+
+
+.profile{padding-left:1.8vw;}
+
+
+body {
+  font: 1.0em/1.6 'Inconsolata', monospace;
+  color:  #c9cdc0;
+  font-weight: 400;
+  background-color: #000000;
+  text-shadow: #FF4800;
+  margin: 0;
+  overflow: hidden;
+  transform-origin: right;
+  transform: translate(-100vw, 0) rotate(180deg);
+  writing-mode: vertical-rl;
+  /* overflow-y: hidden;
+  overflow-x: hidden; */
+}
+
+/* Use a media query to add a breakpoint at 800px: */
+@media screen and (max-width: 800px) {
+  .left, .main, .right {
+    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
+  }
+}
+
+#map{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  /* margin-top:2.5vh; */
+  margin-bottom:2.5vh;
+}
+
+#zoommap{
+  position: fixed;
+  width: 68%;
+  /* margin-left: auto;
+  margin-right: auto; */
+  /* margin-top:2.5vh; */
+  top: 10px;
+  margin-bottom:2.5vh;
+  display:none;
+  /* height: 60vh; */
+}
+
+
+#svg55{
+   width: 100%; 
+   height: 100%;
+   padding-top: none;
+}
+
+/* .zoom>img{
+  height: calc(100vh - 60px);
+  width: auto;
+} */
+
+/* #dreammap{
+   height: 90vh; 
+  
+} */
+   
+#gateway-distance{
+  font: 1.2em/1.6 'Inconsolata', monospace;
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  
+}
+
+.flex-left {
+  width: 100%;
+  height: 100vh;
+  /* border: 2px solid #c9cdc0; */
+  border-radius: 2px;
+  /* margin-right:3px; */
+  padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 10px;
+  background-color:rgb(26, 26, 26, 0);
+
+}
+
+/* .flex-right {
+  width: 45%;
+  height: 100vh;
+  /* border: 5px solid #c9cdc0; */
+  /* border-radius: 2px;
+  padding: 5px;
+  padding-right: 10px;
+  padding-top: 10px;
+  background-color:rgb(26, 26, 26);
+} */ 
+
+.section{
+  border: 2px solid #3d3f38;
+  border-radius:6px;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  margin-bottom:6px;
+  color: #FF4800;
+  background-color: #0e0e0a;
+}
+.section2{
+  border: 2px solid #3d3f38;
+  border-radius:6px;
+  display: flex;
+  flex-direction: row;
+  padding: 5px;
+  margin-bottom:6px;
+  color: rgb(88, 130, 255);
+  background-color: #0e0e0a;
+}
+
+.button-base{
+  padding: 5px;
+  margin: 5px;
+}
+
+#nav-console{
+  color: #c9cdc0;
+}
+
+#scene1{
+  display: none;
+}
+
+#input{
+  background-color: #c9cdc0;
+  border: 2px solid black;
+  font: 1.2em/1.6 'Inconsolata', monospace;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 5px;
+}
+
+button{
+  background-color: #bd3e00;
+  font: 1.2em/1.6 'Inconsolata', monospace;
+  color:black;
+  border-radius: 5px;
+  border: 2px solid black;
+  -webkit-appearance: none;
+  -ms-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin-left: 2px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+button:active{
+  background-color: rgb(65, 184, 255);
+}
+
+
+
+#log{
+  visibility: hidden; 
+  background-color: rgb(177, 193, 213);
+  color: black;
+}
+
+#back{
+  visibility: hidden;
+  width: 22%;
+  background-color: #c9cdc0;
+  color: black;
+  
+}
+
+#back2{
+  display: none; 
+  width: 22%;
+  background-color: #c9cdc0;
+  color: black;
+}
+
+#log1{
+  display: none;
+  background-color: rgb(65, 184, 255);
+  border: none;
+  border-radius: 0px;
+  color: black;
+  padding: 1px;
+  padding-left: 6px;
+}
+
+
+#log2{
+  display: none;
+  background-color: rgb(65, 184, 255);
+  color: black;
+  border-radius: 0px;
+  border: none;
+  padding: 1px;
+  padding-left: 6px;
+}
+#log3{
+  display: none;
+  background-color: rgb(65, 184, 255);
+  color: black;
+  border-radius: 0px;
+  border: none;
+  padding: 1px;
+  padding-left: 6px;
+}
+#log4{
+  display: none;
+  background-color: rgb(65, 184, 255);
+  color: black;
+  border-radius: 0px;
+  border: none;
+  padding: 1px;
+  padding-left: 6px;
+}
+#log5{
+  display: none;
+  background-color: rgb(65, 184, 255);
+  color: black;
+  border-radius: 0px;
+  border: none;
+  padding: 1px;
+  padding-left: 6px;
+}
+
+#log1:active{
+
+  background-color: rgb(129, 135, 121);
+
+}
+
+#log2:active{
+
+  background-color: rgb(129, 135, 121);
+
+}
+
+#log3:active{
+
+  background-color: rgb(129, 135, 121);
+
+}
+
+#log4:active{
+
+  background-color: rgb(129, 135, 121);
+
+}
+
+#log5:active{
+
+  background-color: rgb(129, 135, 121);
+
+}
+
+#dreamlog{
+  display: none;
+}
+
+
+.flex-top {
+  position: absolute;
+  top:0px;
+  width: 100vw;
+  height: 50vh;
+  border-radius: 2px;
+  padding: 5px;
+  padding-right: 10px;
+  padding-top: 10px;
+  background-color:rgb(26, 26, 26);
+}
+
+.flex-bottom {
+  position: absolute;
+  bottom:0px;
+  width: 100vw;
+  height: 50vh;
+  bottom:0px;
+  border-radius: 2px;
+  padding: 5px;
+  padding-right: 10px;
+  padding-top: 10px;
+  background-color:rgb(26,26,26);
+}
+
+.section2{
+  display: flex;
+  border: 2px solid black;
+  border-radius:1px;
+  display: flex;
+  flex-direction:row;
+  padding: 5px;
+  margin-bottom:6px;
+  color: white;
+  background-color: black;
+  width: 30vw;
+}
+
+
+.section-main{
+
+  border: 2px solid #3d3f38;
+  border-radius:6px;
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  margin-bottom:6px;
+  color: rgb(37, 37, 37);
+  background-color: #a5bad5ed;
+
+}
+.flex-container2 {
+  display: flex;
+  flex-direction: row;
+}
+
+#rect13:active{
+  fill:yellow;
+}
+
+#rect15:active{
+  fill:yellow;
+}
+
+.wrapper{
+  margin: 0 auto;
+  max-width: 450px;
+  }
+
+    .fullscreen-video {
+      position: fixed;
+      overflow: hidden;
+      top: 50%;
+      left: 50%;
+      min-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+      transform: translateX(-50%) translateY(-50%);
+      z-index: -10;
+    }
+.embed{width: 100%}
+
+#location-log{
+  display: none;
+}
+
+#chat-window{
+  height: 95vh;
+  width: 50vw;
+  border: 1px solid #ccc;
+  padding: 10px;
+  overflow-y: scroll;
+}
+
+#messages {
+  height: 40vh;
+  overflow-y: auto;
+  padding: 0;
+  word-wrap: break-word;
+}
+
+#messages li {
+  padding: 5px;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.me {
+  text-align: right;
+  color: #e8b722;
+  padding-bottom: 2px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.others {
+  text-align: left;
+  color: #DE6C3F;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+
+
+input[type="text"] {
+  padding: 5px;
+}
+
+#logo{
+  max-width: 480px;
+  position: sticky;
+  z-index: 2;
+}
+
+#weather{
+  z-index: 0;
+}
\ No newline at end of file
diff --git a/public/vertical.html b/public/vertical.html
new file mode 100644
index 0000000..7fa9f7a
--- /dev/null
+++ b/public/vertical.html
@@ -0,0 +1,281 @@
+<!doctype html>
+<html>
+    <head>
+        <title>eixogen</title>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link href="stylev.css" rel="stylesheet">
+        <!-- <script src="js/p5.js"></script>
+        <script src="js/p5.geolocation.js"></script> -->
+        <script src='socket.io/socket.io.js'></script>   
+        
+        <meta property="og:title" content="EIXOGEN" />
+        <meta property="og:description" content="EIXOGEN" />
+        <meta property="og:image" content="" />
+    </head>
+    <body>     
+     
+      <!-- <div class="profile"> <p id="title">Welcome to Eixogen, "player name".</p> 
+             
+      <button >profile</button>
+      <button >sign up</button>
+      <button >log in</button> -->
+    
+        <div class="wrapper">
+        <div class="flex-container" >
+          <div class="flex-left">              
+            <!-- <div>
+              
+         <img id="logo" src="img/bw.png">
+              <embed class ="embed" id="weather" src="https://wttr.in/Rotterdam?T0">
+            </div>                 -->
+            <!-- <div class="section" id="objective"><br><br><br><br>
+              <p>~* *..* active trails ~~</p> 
+              <button onclick="window.location.href='riddles.html';">~* *..* mechanical fireflies<br> ~~ by user [xx[[</button>
+            </div> -->
+            <div class="section" id="chat-window">
+              <p>~* *..* live chat ~~</p>
+              <ul id="messages"></ul>
+              <span><form id="form" action="">
+                <input id="input" autocomplete="off"/><button onclick="sendMessage()">>>></button>
+              </form></span> 
+            </div>           
+            <!-- <div class="section" >
+              <p>users online: </p> 
+              <ul id="user-log"></ul>    
+            </div> -->
+            <!-- <div class="section-main">
+              <p>~* *..* eixogen phase 1: 15.09 ~ 01.10 ~~</p>
+              <progress id="file" max="100" value="10"> </progress>                    
+              <p>~* *..* highscore ~~</p>
+              <p>sane__xxx: wallet: 61100 ETH * completed trails: 904</p>
+              <p>non-zero/: wallet: 56900 ETH * completed trails: 633</p>
+              <p>wire3e3ee: wallet: 54000 ETH * completed trails: 523</p>
+            </div> -->
+            <!-- <p id="log-text"></p>  
+           <div class="section-main">
+                        
+                            
+                        highscore cheat code input moved to riddles.html-->
+                           
+                        <!-- <p>>>> CACHE CODE:<br><br></p>
+                        <span><form id="form" action="">
+                            <input id="input" autocomplete="off" onkeyup="this.value = this.value.toUpperCase();"/><button onclick="sendMessage()">>>></button>
+                        </form><br><br></span> 
+                      
+
+           </div> -->
+
+                  <!-- unused below -->
+<!-- 
+                  <div class="section" id="location-log">
+  
+                  </div> -->
+                        <!-- <div class="section" id="nav-console">
+                            
+                            <p>DISTANCE: <span id="distance">0</span> km</p>
+                      
+                            <div id="tripmeter">
+                               <p>Gateway 1:<br/>
+                                    <span id="startLat">???</span>&deg; <br><span id="startLon">???</span>&deg;
+                                </p>
+                                <p>Gateway 2:<br/>
+                                    <span id="startLat2">???</span>&deg; <br><span id="startLon2">???</span>&deg;
+                                </p>
+                                <p>
+                                    Status:<br/>
+                                    <span id="message2">detecting....</span>
+                                    </p>
+                                <p>
+                                    Current Location:<br/>
+                                    <span id="currentLat">locating...</span>&deg; <br><span id="currentLon">locating...</span>&deg;
+                                </p> 
+                                    <p>
+                                    STATUS:
+                                    <span id="message">detecting....</span>
+                                    </p>                               
+                                </div> 
+                        </div> -->
+                        <!-- <div class="section" >
+                          
+                            </div> -->
+                            <div class="section" id="back2" onclick="backAgain2()">
+                                ↪ log 
+                        </div>
+                    
+                    
+                        <div class="section" id="log1">          
+                        <p onclick="log1Open()">LOG 1  03:02:00  02-04-22  PORT: 9.1.13.<br></p>
+                        </div> 
+                        <div class="section" id="log2">   
+                        <p onclick="log2Open()">LOG 2  02:42:00  13-04-22  PORT: 16.18.15.<br></p>
+                        </div>
+                        <div class="section" id="log3">             
+                        <p onclick="log3Open()">LOG 3  03:36:00  25-04-22  PORT: 20.5.3.<br></p>
+                        </div>
+                        <div class="section" id="log4">   
+                        <p onclick="log4Open()">LOG 4  03:86:00  07-05-22  PORT: 20.15.18<br></p>
+                        </div>
+                        <div class="section" id="log5">                 
+                        <p onclick="log5Open()">LOG 5  06:86:00  17-05-22  PORT: 868<br></p>   
+                        </div>              
+                       
+                        <div class="section" id="log">
+                        <p id="info"></p>
+
+                           </div>   
+                           <div class="section" id="back" onclick="backAgain()">
+                              ↪
+                           </div>
+                           <!-- <div class="section2">
+                              <div class="button-base">
+                                    <p onclick="showHelp()">HELP</p>
+                              </div>
+                              <div class="button-base">
+                                    <p onclick="showAbout()">ABOUT</p>
+                              </div>
+                           </div> -->
+                    </div>
+                       
+
+            
+            <div class="flex-right">
+                <!-- <div class="section">
+                <p onclick="showLog()">LOG</p>
+                </div> -->
+                    <!-- <input id="icon" width="20%" class="on-location-track" type="image" src="img/868.png"  onclick="playMusic()" style="visibility: hidden; z-index: 2"/>
+                    <input id="icon" width="22%" class="nav-track" type="image" src="img/868.png"  onclick="playMusic1()" style="visibility: visible;"/>  -->
+                
+            </div>
+
+
+        </div>  
+        
+      </div>
+      <!-- <video class="fullscreen-video" id="myVideo" autoplay="autoplay" muted loop>
+         <source src="img/bg.m4v">   
+     </video> -->
+     
+        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+        <!-- <script type="text/javascript" src="js/fence.js"></script> -->
+        <!-- <script type="text/javascript" src="js/level.js"></script> -->
+       
+        <!-- <script>
+         window.onload = checkLevel();
+         function checkLevel(){
+
+         console.log(localStorage.getItem('gateway'));
+
+         if (localStorage.getItem("gateway")!==null){
+             
+           if(localStorage.getItem("gateway") == "1") {
+            levelTwo();
+           } 
+          
+           if(localStorage.getItem("gateway") == "2") {
+             levelThree();
+           } 
+
+           if(localStorage.getItem("gateway") == "3") {
+             levelFour();
+           } 
+
+           if(localStorage.getItem("gateway") == "4") {
+             levelFive();
+           } 
+
+           
+           if(localStorage.getItem("gateway") == "5") {
+             levelFive();
+           } 
+
+           if(localStorage.getItem("gateway") == "6") {
+             levelSix();
+           } 
+
+         }else {levelOne()}; 
+         };
+         </script>    -->
+
+    
+    </body>
+    <script>
+      const socket = io();
+      const activeUsers = [];
+  
+      updateActiveUsers(); // Call it here to show active users on page load
+  
+      socket.on('node-data', function(data) {
+        console.log(data);
+  
+        // Split the data into separate parts
+        const [node, value] = data.split(' ');
+  
+        document.getElementById('log-text').textContent = `user ${value} entered zone ${node}`;
+  
+        if (node === '3' && value === '15') {
+          // Change the background color to red
+          document.body.style.backgroundColor = 'red';
+          document.getElementById('location-log').style.display = 'block';
+        } else if (node === 'node4' && value === '21') {
+          // Change the background color to blue
+          document.body.style.backgroundColor = 'blue';
+        } else {
+          // Restore the default background color
+          document.body.style.backgroundColor = rgb(26, 26, 26);
+        }
+      });
+  
+      //testing socket message from textinput field to arduino
+      var messages = document.getElementById('messages');
+      var chatHistory = localStorage.getItem('chatHistory');
+      if (chatHistory) {
+        messages.innerHTML = chatHistory;
+      }
+  
+      function sendMessage() {
+        const inputField = document.getElementById('input');
+        const message = inputField.value;
+        var item = document.createElement('li');
+        item.textContent = message;
+        item.className = 'me';
+        messages.appendChild(item);
+        inputField.value = '';
+        socket.emit('chat message', message);
+        messages.scrollTop = messages.scrollHeight;
+        localStorage.setItem('chatHistory', messages.innerHTML);
+      }
+  
+      socket.on('chat message', function(msg) {
+        var item = document.createElement('li');
+        item.textContent = msg;
+        item.className = 'others';
+        messages.appendChild(item);
+        messages.scrollTop = messages.scrollHeight - messages.clientHeight;
+      });
+  
+      socket.on('connect', function() {
+        // Add the current socket ID to the activeUsers array
+        activeUsers.push(socket.id);
+        updateActiveUsers();
+      });
+  
+      socket.on('disconnect', function() {
+        // Remove the disconnected socket ID from the activeUsers array
+        const index = activeUsers.indexOf(socket.id);
+        if (index !== -1) {
+          activeUsers.splice(index, 1);
+          updateActiveUsers();
+        }
+      });
+  
+      function updateActiveUsers() {
+        const userLog = document.getElementById('user-log');
+        userLog.textContent = activeUsers.join(', ');
+      }
+    </script>
+    
+   <script type="text/javascript" src="js/input.js"></script>
+</html>