You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

278 lines
11 KiB
HTML

<!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/hamsterz.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>