vertical view expo
parent
04afb61d91
commit
dc0f3c0e8b
@ -0,0 +1,419 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
font-size: 2em;
|
||||||
|
color: black;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.profile{padding-left:1.8vw;}
|
||||||
|
|
||||||
|
|
||||||
|
body {
|
||||||
|
font: 1.0em/1.6 'Inconsolata', monospace;
|
||||||
|
color: #c9cdc0;
|
||||||
|
font-weight: 400;
|
||||||
|
background-color: #000000;
|
||||||
|
text-shadow: #FF4800;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transform-origin: right;
|
||||||
|
transform: translate(-100vw, 0) rotate(180deg);
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
/* overflow-y: hidden;
|
||||||
|
overflow-x: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Use a media query to add a breakpoint at 800px: */
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.left, .main, .right {
|
||||||
|
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#map{
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
/* margin-top:2.5vh; */
|
||||||
|
margin-bottom:2.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#zoommap{
|
||||||
|
position: fixed;
|
||||||
|
width: 68%;
|
||||||
|
/* margin-left: auto;
|
||||||
|
margin-right: auto; */
|
||||||
|
/* margin-top:2.5vh; */
|
||||||
|
top: 10px;
|
||||||
|
margin-bottom:2.5vh;
|
||||||
|
display:none;
|
||||||
|
/* height: 60vh; */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#svg55{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .zoom>img{
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
width: auto;
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* #dreammap{
|
||||||
|
height: 90vh;
|
||||||
|
|
||||||
|
} */
|
||||||
|
|
||||||
|
#gateway-distance{
|
||||||
|
font: 1.2em/1.6 'Inconsolata', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-left {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
/* border: 2px solid #c9cdc0; */
|
||||||
|
border-radius: 2px;
|
||||||
|
/* margin-right:3px; */
|
||||||
|
padding: 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
background-color:rgb(26, 26, 26, 0);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .flex-right {
|
||||||
|
width: 45%;
|
||||||
|
height: 100vh;
|
||||||
|
/* border: 5px solid #c9cdc0; */
|
||||||
|
/* border-radius: 2px;
|
||||||
|
padding: 5px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
background-color:rgb(26, 26, 26);
|
||||||
|
} */
|
||||||
|
|
||||||
|
.section{
|
||||||
|
border: 2px solid #3d3f38;
|
||||||
|
border-radius:6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom:6px;
|
||||||
|
color: #FF4800;
|
||||||
|
background-color: #0e0e0a;
|
||||||
|
}
|
||||||
|
.section2{
|
||||||
|
border: 2px solid #3d3f38;
|
||||||
|
border-radius:6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom:6px;
|
||||||
|
color: rgb(88, 130, 255);
|
||||||
|
background-color: #0e0e0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-base{
|
||||||
|
padding: 5px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-console{
|
||||||
|
color: #c9cdc0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scene1{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#input{
|
||||||
|
background-color: #c9cdc0;
|
||||||
|
border: 2px solid black;
|
||||||
|
font: 1.2em/1.6 'Inconsolata', monospace;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-ms-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
background-color: #bd3e00;
|
||||||
|
font: 1.2em/1.6 'Inconsolata', monospace;
|
||||||
|
color:black;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 2px solid black;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-ms-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
margin-left: 2px;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active{
|
||||||
|
background-color: rgb(65, 184, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#log{
|
||||||
|
visibility: hidden;
|
||||||
|
background-color: rgb(177, 193, 213);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#back{
|
||||||
|
visibility: hidden;
|
||||||
|
width: 22%;
|
||||||
|
background-color: #c9cdc0;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#back2{
|
||||||
|
display: none;
|
||||||
|
width: 22%;
|
||||||
|
background-color: #c9cdc0;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#log1{
|
||||||
|
display: none;
|
||||||
|
background-color: rgb(65, 184, 255);
|
||||||
|
border: none;
|
||||||
|
border-radius: 0px;
|
||||||
|
color: black;
|
||||||
|
padding: 1px;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#log2{
|
||||||
|
display: none;
|
||||||
|
background-color: rgb(65, 184, 255);
|
||||||
|
color: black;
|
||||||
|
border-radius: 0px;
|
||||||
|
border: none;
|
||||||
|
padding: 1px;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
#log3{
|
||||||
|
display: none;
|
||||||
|
background-color: rgb(65, 184, 255);
|
||||||
|
color: black;
|
||||||
|
border-radius: 0px;
|
||||||
|
border: none;
|
||||||
|
padding: 1px;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
#log4{
|
||||||
|
display: none;
|
||||||
|
background-color: rgb(65, 184, 255);
|
||||||
|
color: black;
|
||||||
|
border-radius: 0px;
|
||||||
|
border: none;
|
||||||
|
padding: 1px;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
#log5{
|
||||||
|
display: none;
|
||||||
|
background-color: rgb(65, 184, 255);
|
||||||
|
color: black;
|
||||||
|
border-radius: 0px;
|
||||||
|
border: none;
|
||||||
|
padding: 1px;
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#log1:active{
|
||||||
|
|
||||||
|
background-color: rgb(129, 135, 121);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#log2:active{
|
||||||
|
|
||||||
|
background-color: rgb(129, 135, 121);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#log3:active{
|
||||||
|
|
||||||
|
background-color: rgb(129, 135, 121);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#log4:active{
|
||||||
|
|
||||||
|
background-color: rgb(129, 135, 121);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#log5:active{
|
||||||
|
|
||||||
|
background-color: rgb(129, 135, 121);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#dreamlog{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.flex-top {
|
||||||
|
position: absolute;
|
||||||
|
top:0px;
|
||||||
|
width: 100vw;
|
||||||
|
height: 50vh;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 5px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
background-color:rgb(26, 26, 26);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom:0px;
|
||||||
|
width: 100vw;
|
||||||
|
height: 50vh;
|
||||||
|
bottom:0px;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 5px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
background-color:rgb(26,26,26);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section2{
|
||||||
|
display: flex;
|
||||||
|
border: 2px solid black;
|
||||||
|
border-radius:1px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction:row;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom:6px;
|
||||||
|
color: white;
|
||||||
|
background-color: black;
|
||||||
|
width: 30vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.section-main{
|
||||||
|
|
||||||
|
border: 2px solid #3d3f38;
|
||||||
|
border-radius:6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom:6px;
|
||||||
|
color: rgb(37, 37, 37);
|
||||||
|
background-color: #a5bad5ed;
|
||||||
|
|
||||||
|
}
|
||||||
|
.flex-container2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect13:active{
|
||||||
|
fill:yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rect15:active{
|
||||||
|
fill:yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper{
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-video {
|
||||||
|
position: fixed;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
z-index: -10;
|
||||||
|
}
|
||||||
|
.embed{width: 100%}
|
||||||
|
|
||||||
|
#location-log{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat-window{
|
||||||
|
height: 95vh;
|
||||||
|
width: 50vw;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 10px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
#messages {
|
||||||
|
height: 40vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
#messages li {
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.me {
|
||||||
|
text-align: right;
|
||||||
|
color: #e8b722;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.others {
|
||||||
|
text-align: left;
|
||||||
|
color: #DE6C3F;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
input[type="text"] {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo{
|
||||||
|
max-width: 480px;
|
||||||
|
position: sticky;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#weather{
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,281 @@
|
|||||||
|
<!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="stylev.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="section" id="chat-window">
|
||||||
|
<p>~* *..* live chat ~~</p>
|
||||||
|
<ul id="messages"></ul>
|
||||||
|
<span><form id="form" action="">
|
||||||
|
<input id="input" autocomplete="off"/><button onclick="sendMessage()">>>></button>
|
||||||
|
</form></span>
|
||||||
|
</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>° <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" >
|
||||||
|
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue