From a424b05c10a2fcbf415607c6669ff1729ae7568e Mon Sep 17 00:00:00 2001
From: louisafriederike <louisateichmann@outlook.com>
Date: Fri, 15 Sep 2023 17:21:52 +0200
Subject: [PATCH] v2

---
 public/img/trash.png | Bin 0 -> 7163 bytes
 public/v2.html       | 277 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 277 insertions(+)
 create mode 100644 public/img/trash.png
 create mode 100644 public/v2.html

diff --git a/public/img/trash.png b/public/img/trash.png
new file mode 100644
index 0000000000000000000000000000000000000000..32640c6d0a10a4faf4ed5b90d86d3da9dac58497
GIT binary patch
literal 7163
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
LT<@*!oyh+JhyK!|

literal 0
HcmV?d00001

diff --git a/public/v2.html b/public/v2.html
new file mode 100644
index 0000000..18bd574
--- /dev/null
+++ b/public/v2.html
@@ -0,0 +1,277 @@
+<!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="style.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="section11">
+            <img src="img/trash.png">
+            </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>