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.
192 lines
8.2 KiB
HTML
192 lines
8.2 KiB
HTML
<!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';
|
|
}
|
|
if (node === 'node4' && value === '21') {
|
|
// Change the background color to red
|
|
document.body.style.backgroundColor = 'blue';
|
|
}
|
|
else {
|
|
// Restore the default background color
|
|
document.body.style.backgroundColor = 'white';
|
|
}
|
|
});
|
|
</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>>>></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="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>
|