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.
224 lines
9.2 KiB
HTML
224 lines
9.2 KiB
HTML
8 months ago
|
<!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> <!-- <img id="logo" src="img/logo.png"> <div class="profile"> <p id="title">Welcome to Eixogen, Sane! Take a deep breath.</p>
|
||
|
|
|
||
|
|
<button >profile</button>
|
||
|
|
</div> -->
|
||
|
|
<div class="wrapper">
|
||
|
|
<div class="flex-container" >
|
||
|
|
|
||
|
|
|
||
|
|
<div class="flex-left">
|
||
|
|
<!-- <progress id="file" max="100" value="70"> 70% </progress> -->
|
||
|
|
|
||
|
|
<div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<p style="font-size: 1.2em;">*~* **~ mechanical fireflies ~</p>
|
||
|
|
</div>
|
||
|
|
<div class="section" id="objective"><br><br><br><br>
|
||
|
|
|
||
|
|
<p>[by user 9]</p>
|
||
|
|
<p>[status: active until 12th November]</p>
|
||
|
|
<a href="https://maps.app.goo.gl/C6PJiKJdMeW5c8Ua8">[51.915909, 4.4778599]</a>
|
||
|
|
<p>[indoors]</p>
|
||
|
|
<p>[opening hours: Wed-Sun 14:00 -- 19:00]</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<p>Enter the space. Across from you, you will see a mouse. Not a hamster, not a rat, a mouse. Touch it to reveal an alphabet, that allows to read binary sequences into numbers. These sequences are hidden in the broadcast boxes, like mechanical fireflies trying to escape. You are looking for a 4 digit code. Once you decrypted all of the fireflies, mix up the pairs, starting with the higher number.</p>
|
||
|
|
<br><br> <p><br><br> ----The correct numbers entered the code on your profile page will reveal a password that unlocks our <a href="https://868mhz.net/archive">archive</a>. Look closely into the mirror world around you to spot it.----
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<br><br>
|
||
|
|
<div class="section-main">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<p>----enter the codeword into your personal page to mine ether credits----</p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button onclick="window.location.href='index.html';">back<br></button>
|
||
|
|
|
||
|
|
<!-- unused below -->
|
||
|
|
|
||
|
|
<div class="section" id="location-log">
|
||
|
|
|
||
|
|
<p id="log-text"></p>
|
||
|
|
</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>° <br><span id="startLon">???</span>°
|
||
|
|
</p>
|
||
|
|
<p>Gateway 2:<br/>
|
||
|
|
<span id="startLat2">???</span>° <br><span id="startLon2">???</span>°
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Status:<br/>
|
||
|
|
<span id="message2">detecting....</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Current Location:<br/>
|
||
|
|
<span id="currentLat">locating...</span>° <br><span id="currentLon">locating...</span>°
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
STATUS:
|
||
|
|
<span id="message">detecting....</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
<div class="section" id="dreamlog">
|
||
|
|
<p></p>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="flex-right">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></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>
|