<!doctype html>
< html >
< head >
< title > 868mhz.net< / 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 = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js" > < / script >
< script >
const socket = io();
socket.on('node-data', function(data) {
console.log(data);
// Split the data into separate parts
const [node, value] = data.split(' ');
if (node === 'node3' & & 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);
}
});
function sendMessage() {
const inputField = document.getElementById('input');
const message = inputField.value;
if (message === 'BLINK') {
socket.emit('blink');
console.log('socket: blink');
}
inputField.value = '';
}
< / script >
< script src = 'socket.io/socket.io.js' > < / script >
< meta property = "og:title" content = "868 MHz" / >
< meta property = "og:description" content = "868 MHz is a hybrid reality game running on the same standardized frequency as the LoRa gateways of The Things Network. Chase the electric currents of the asphalt to locate gateways and encounter a being which has nested itself beneath the city streets, all the way down the power lines woven amidst its whirring epicenter." / >
< meta property = "og:image" content = "/img/868.png" / >
< / head >
< body >
< div class = "wrapper" >
< div class = "flex-container" >
< div class = "flex-left" >
< div class = "section" >
<!-- <progress id="file" max="100" value="70"> 70% </progress> -->
< p > >>> CACHE CODE:< / p >
< span > < form id = "form" action = "" >
< input id = "input" autocomplete = "off" onkeyup = "this.value = this.value.toUpperCase();" / > < button onclick = "sendMessage()" > >>>< / button >
< / form > < / span >
< div class = "section" id = "objective" > < br > < br > < br > < br >
< p > OBJECTIVE:< br > RUN< / p >
< / div >
<!-- <div>
< embed class = "embed" src = "https://hack.chat/?mtmw" >
< / div >
< div >
< embed class = "embed" src = "https://wttr.in/Rotterdam?T0" >
< / div > -->
< / div >
< div class = "section" id = "location-log" >
< p > user 15 entered zone 4< / 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 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 type = "text/javascript" src = "js/input.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 >
< / html >
