added back avatar config field, reference VEL-Share, other polish
|
|
@ -11,3 +11,4 @@ discord_bot/graph.png
|
|||
discord_bot/config.py
|
||||
env_win/
|
||||
velconnect.db
|
||||
.idea/
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 437 KiB |
|
|
@ -35,11 +35,15 @@
|
|||
.centered {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: #0004;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
|
||||
<div id="loading"><br><br>
|
||||
<div class="loading loading-lg"></div>
|
||||
|
|
@ -49,71 +53,123 @@
|
|||
|
||||
<div id="headset_details" style="display: none;">
|
||||
<div class="panel card">
|
||||
<div class="card-image">
|
||||
<img class="img-responsive" src="/static/img/mini_landscape.png" alt="conVRged Logo">
|
||||
</div>
|
||||
<div class="panel-header text-center">
|
||||
<figure class="avatar avatar-lg"><img src="/static/favicons/android-chrome-192x192.png"
|
||||
alt="Avatar"></figure>
|
||||
<div class="panel-title h5 mt-10">Headset Info</div>
|
||||
<div class="panel-subtitle hw_id">---</div>
|
||||
<figure class="avatar avatar-lg" style="background: none;"><img
|
||||
src="/static/favicons/android-chrome-192x192.png" alt="Avatar"></figure>
|
||||
<div class="panel-title h5 mt-10">Headset ID:</div>
|
||||
<code class="panel-subtitle hw_id">---</code>
|
||||
<br>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="col-6">
|
||||
<div class="panel-title h5 mt-10">Pairing Code:</div>
|
||||
<div class="panel-subtitle pairing_code">---</div>
|
||||
<code class="panel-subtitle pairing_code">---</code>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<a href="/pair">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-right" id="pair_new"
|
||||
data-tooltip="Clear this headset and pair a new headset">Pair New
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="panel-body">
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">Current Room</div>
|
||||
<input class="btn current_room" type="text" id="current_room" placeholder="----">
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_room_id"
|
||||
data-tooltip="Set Room ID">Set</button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="tile tile-centered col-6">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">First Seen</div>
|
||||
<div class="tile-subtitle date_created">---</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile tile-centered col-6">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">Last Login</div>
|
||||
<div class="tile-subtitle last_used">---</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="divider text-center" data-content="User Settings"></div>
|
||||
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">User Name</div>
|
||||
<input class="btn user_name" type="text" id="user_name" placeholder="----">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_user_name"
|
||||
data-tooltip="">Set</button>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-right" id="set_user_name"
|
||||
data-tooltip="Set Username">Set
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <br>-->
|
||||
<!-- <div class="tile tile-centered">-->
|
||||
<!-- <div class="tile-content">-->
|
||||
<!-- <div class="tile-title text-bold">TV URL</div>-->
|
||||
<!-- <input class="btn tv_url" type="text" id="tv_url" placeholder="----">-->
|
||||
<!-- <button class="btn btn-primary btn-lg tooltip tooltip-right" id="set_tv_url"-->
|
||||
<!-- data-tooltip="">Set</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tile-action">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <br>-->
|
||||
<!-- <div class="tile tile-centered">-->
|
||||
<!-- <div class="tile-content">-->
|
||||
<!-- <div class="tile-title text-bold">User Color</div>-->
|
||||
<!-- <input class="btn user_color coloris" type="text" id="user_color" placeholder="#ffffff">-->
|
||||
<!-- <button class="btn btn-primary btn-lg tooltip tooltip-right" id="set_user_color"-->
|
||||
<!-- data-tooltip="Set User Color">Set</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tile-action">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">TV URL</div>
|
||||
<input class="btn tv_url" type="text" id="tv_url" placeholder="----">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_tv_url"
|
||||
data-tooltip="">Set</button>
|
||||
<div class="tile-title text-bold">Avatar URL</div>
|
||||
<div class="tile-subtitle">
|
||||
<a href="https://convrged.readyplayer.me" target="blank">
|
||||
Create New Avatar
|
||||
<svg style="width:1em;height:1em" viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<input class="btn avatar_url" type="text" id="avatar_url" placeholder="----">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-right" id="set_avatar_url"
|
||||
data-tooltip="Set Avatar URL">Set
|
||||
</button>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<div class="divider text-center" data-content="Room Settings"></div>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">User Color</div>
|
||||
<input class="btn user_color coloris" type="text" id="user_color" placeholder="#ffffff">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_user_color"
|
||||
data-tooltip="Set User Color">Set</button>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<div class="tile-title text-bold">Current Room</div>
|
||||
<input class="btn current_room" type="text" id="current_room" placeholder="----">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-right" id="set_room_id"
|
||||
data-tooltip="Set Room ID">Set
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
|
@ -121,13 +177,22 @@
|
|||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">Carpet Color</div>
|
||||
<input class="btn carpet_color coloris" type="text" id="carpet_color" placeholder="#ffffff">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_carpet_color"
|
||||
data-tooltip="Set Carpet Color">Set</button>
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-right" id="set_carpet_color"
|
||||
data-tooltip="Set Carpet Color">Set
|
||||
</button>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<p>To share your screen, download <a href="https://github.com/velaboratory/VEL-Share">VEL-Share
|
||||
<svg style="width:1em;height:1em" viewBox="0 0 24 24">
|
||||
<path fill="currentColor"
|
||||
d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
|
||||
</svg>
|
||||
</a></p>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,8 +208,15 @@
|
|||
let headset_details = document.getElementById('headset_details');
|
||||
let hw_id_field = document.getElementById('hw_id');
|
||||
let failure = document.getElementById('failure');
|
||||
let set_room_id = document.getElementById('set_room_id');
|
||||
let current_room = document.getElementById('current_room');
|
||||
let set_room_id = document.getElementById('set_room_id');
|
||||
let set_user_color = document.getElementById('set_user_color');
|
||||
let user_color = document.getElementById('user_color');
|
||||
let carpet_color = document.getElementById('carpet_color');
|
||||
let set_user_name = document.getElementById('set_user_name');
|
||||
let set_tv_url = document.getElementById('set_tv_url');
|
||||
let set_carpet_color = document.getElementById('set_carpet_color');
|
||||
let set_avatar_url = document.getElementById('set_avatar_url');
|
||||
|
||||
|
||||
// check cookie
|
||||
|
|
@ -165,12 +237,33 @@
|
|||
writeClass('date_created', respData['user']['date_created'] + "<br>" + timeSinceString(respData['user']['date_created']) + " ago");
|
||||
writeClass('last_used', respData['user']['last_used'] + "<br>" + timeSinceString(respData['user']['last_used']) + " ago");
|
||||
writeValue('user_color', respData['user']['user_color']);
|
||||
if (user_color) user_color.parentElement.style.color = "" + respData['user']['user_color'];
|
||||
writeValue('user_name', respData['user']['user_name']);
|
||||
writeValue('avatar_url', respData['user']['avatar_url']);
|
||||
if (respData['room']) {
|
||||
writeValue('tv_url', respData['room']['tv_url']);
|
||||
writeValue('carpet_color', respData['room']['carpet_color']);
|
||||
if (carpet_color) carpet_color.parentElement.style.color = "" + respData['room']['carpet_color'];
|
||||
}
|
||||
|
||||
|
||||
Coloris({
|
||||
el: '.coloris',
|
||||
swatches: [
|
||||
'#264653',
|
||||
'#2a9d8f',
|
||||
'#e9c46a',
|
||||
'#f4a261',
|
||||
'#e76f51',
|
||||
'#d62828',
|
||||
'#023e8a',
|
||||
'#0077b6',
|
||||
'#0096c7',
|
||||
'#00b4d8',
|
||||
'#48cae4',
|
||||
]
|
||||
});
|
||||
|
||||
loading.style.display = "none";
|
||||
headset_details.style.display = "block";
|
||||
}, (status) => {
|
||||
|
|
@ -182,44 +275,64 @@
|
|||
data["sender_id"] = "web";
|
||||
httpPostAsync('/api/set_headset_details/' + hw_id,
|
||||
data,
|
||||
(resp) => { console.log('success'); },
|
||||
(status) => { console.log('fail'); }
|
||||
(resp) => {
|
||||
console.log('success');
|
||||
},
|
||||
(status) => {
|
||||
console.log('fail');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function setRoomData(data) {
|
||||
data["sender_id"] = "web";
|
||||
httpPostAsync('/api/set_room_details/' + current_room.value,
|
||||
data,
|
||||
(resp) => { console.log('success'); },
|
||||
(status) => { console.log('fail'); }
|
||||
(resp) => {
|
||||
console.log('success');
|
||||
},
|
||||
(status) => {
|
||||
console.log('fail');
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (set_room_id) {
|
||||
set_room_id.addEventListener('click', () => {
|
||||
setUserData({ "current_room": current_room.value });
|
||||
setUserData({"current_room": current_room.value});
|
||||
});
|
||||
document.getElementById('set_user_color').addEventListener('click', () => {
|
||||
setUserData({ "user_color": document.getElementById('user_color').value });
|
||||
}
|
||||
if (set_user_color) {
|
||||
set_user_color.addEventListener('click', () => {
|
||||
setUserData({"user_color": document.getElementById('user_color').value});
|
||||
});
|
||||
document.getElementById('set_user_name').addEventListener('click', () => {
|
||||
setUserData({ "user_name": document.getElementById('user_name').value });
|
||||
}
|
||||
if (set_user_name) {
|
||||
set_user_name.addEventListener('click', () => {
|
||||
setUserData({"user_name": document.getElementById('user_name').value});
|
||||
});
|
||||
document.getElementById('set_tv_url').addEventListener('click', () => {
|
||||
setRoomData({ "tv_url": document.getElementById('tv_url').value });
|
||||
}
|
||||
if (set_tv_url) {
|
||||
set_tv_url.addEventListener('click', () => {
|
||||
setRoomData({"tv_url": document.getElementById('tv_url').value});
|
||||
});
|
||||
document.getElementById('set_carpet_color').addEventListener('click', () => {
|
||||
setRoomData({ "carpet_color": document.getElementById('carpet_color').value });
|
||||
}
|
||||
if (set_carpet_color) {
|
||||
set_carpet_color.addEventListener('click', () => {
|
||||
setRoomData({"carpet_color": document.getElementById('carpet_color').value});
|
||||
});
|
||||
}
|
||||
if (set_avatar_url) {
|
||||
set_avatar_url.addEventListener('click', () => {
|
||||
setUserData({"avatar_url": document.getElementById('avatar_url').value});
|
||||
});
|
||||
}
|
||||
|
||||
} else {
|
||||
window.location.href = "/pair";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Coloris({
|
||||
el: '.coloris',
|
||||
swatches: [
|
||||
|
|
@ -239,7 +352,7 @@
|
|||
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: true
|
||||
---
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
baseURL = 'http://example.org/'
|
||||
languageCode = 'en-us'
|
||||
title = 'My New Hugo Site'
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters -->
|
||||
<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
|
||||
<title>API Reference</title>
|
||||
</head>
|
||||
<body>
|
||||
<rapi-doc
|
||||
render-style = "read"
|
||||
primary-color = "#bc1f2d"
|
||||
show-header = "false"
|
||||
show-info = "true"
|
||||
spec-url = "https://connect.vel.workers.dev/api/api_spec.json"
|
||||
default-schema-tab = 'example'
|
||||
|
||||
>
|
||||
|
||||
|
||||
<div slot="nav-logo" style="display: flex; align-items: center; justify-content: center;">
|
||||
<img src = "/favicons/android-chrome-256x256.png" style="width:10em; margin: auto;" />
|
||||
</div>
|
||||
</rapi-doc>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
title: "FAILURE"
|
||||
---
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #333;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin: 8em auto;
|
||||
width: max-content;
|
||||
font-family: arial, sans-serif;
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="centered">
|
||||
🤮 FAIL 🤡
|
||||
</div>
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
---
|
||||
title: VEL Connect
|
||||
---
|
||||
<style>
|
||||
.container {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1em;
|
||||
box-shadow: 0 0 2em #0003;
|
||||
}
|
||||
|
||||
input.btn {
|
||||
cursor: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="loading"><br><br><div class="loading loading-lg"></div></div>
|
||||
<div id="failure" style="display: none;"><br><br><br>☹️</div>
|
||||
|
||||
|
||||
<div id="headset_details" style="display: none;">
|
||||
<div class="panel card">
|
||||
<div class="panel-header text-center">
|
||||
<figure class="avatar avatar-lg"><img src="/favicons/android-chrome-192x192.png" alt="Avatar"></figure>
|
||||
<div class="panel-title h5 mt-10">Headset Info</div>
|
||||
<div class="panel-subtitle hw_id">---</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">Current Room</div>
|
||||
<input class="btn current_room" type="text" id="current_room" placeholder="----">
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_room_id"
|
||||
data-tooltip="Set Room ID">Set</button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">First Seen</div>
|
||||
<div class="tile-subtitle date_created">---</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">Last Login</div>
|
||||
<div class="tile-subtitle last_used">---</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">User Name</div>
|
||||
<input class="btn user_name" type="text" id="user_name" placeholder="----">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_user_name" data-tooltip="">Set</button>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">TV URL</div>
|
||||
<input class="btn tv_url" type="text" id="tv_url" placeholder="----">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_tv_url" data-tooltip="">Set</button>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">User Color</div>
|
||||
<input class="btn user_color coloris" type="text" id="user_color" placeholder="#ffffff">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_user_color" data-tooltip="Set User Color">Set</button>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="tile tile-centered">
|
||||
<div class="tile-content">
|
||||
<div class="tile-title text-bold">Carpet Color</div>
|
||||
<input class="btn carpet_color coloris" type="text" id="carpet_color" placeholder="#ffffff">
|
||||
<button class="btn btn-primary btn-lg tooltip tooltip-left" id="set_carpet_color" data-tooltip="Set Carpet Color">Set</button>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/js/coloris.min.js"></script>
|
||||
<script>
|
||||
|
||||
let submit_button = document.getElementById('submit_pairing_code');
|
||||
let pair_code_input = document.getElementById('pair_code');
|
||||
let loading = document.getElementById('loading');
|
||||
let enter_pairing_id = document.getElementById('enter_pairing_id');
|
||||
let headset_details = document.getElementById('headset_details');
|
||||
let hw_id_field = document.getElementById('hw_id');
|
||||
let failure = document.getElementById('failure');
|
||||
let set_room_id = document.getElementById('set_room_id');
|
||||
let current_room = document.getElementById('current_room');
|
||||
|
||||
|
||||
// check cookie
|
||||
let hw_id = getCookie('hw_id');
|
||||
if (hw_id != "") {
|
||||
|
||||
httpGetAsync('https://connect.vel.workers.dev/api/get_state/' + hw_id, (resp) => {
|
||||
console.log(resp);
|
||||
let respData = JSON.parse(resp);
|
||||
|
||||
writeClass('hw_id', respData['user']['hw_id']);
|
||||
writeValue('current_room', respData['user']['current_room']);
|
||||
writeClass('date_created', respData['user']['date_created'] + "<br>" + timeSinceString(respData['user']['date_created']) + " ago");
|
||||
writeClass('last_used', respData['user']['last_used'] + "<br>" + timeSinceString(respData['user']['last_used']) + " ago");
|
||||
writeValue('user_color', respData['user']['user_color']);
|
||||
writeValue('user_name', respData['user']['user_name']);
|
||||
if (respData['room']) {
|
||||
writeValue('tv_url', respData['room']['tv_url']);
|
||||
writeValue('carpet_color', respData['room']['carpet_color']);
|
||||
}
|
||||
|
||||
loading.style.display = "none";
|
||||
headset_details.style.display = "block";
|
||||
}, (status) => {
|
||||
loading.style.display = "none";
|
||||
failure.style.display = "block";
|
||||
});
|
||||
|
||||
function setUserData(endpoint, data) {
|
||||
httpPostAsync('https://connect.vel.workers.dev/api/set_headset_details/' + hw_id + '/' + endpoint,
|
||||
data,
|
||||
(resp) => { console.log('success'); },
|
||||
(status) => { console.log('fail'); }
|
||||
);
|
||||
}
|
||||
function setRoomData(endpoint, data) {
|
||||
httpPostAsync('https://connect.vel.workers.dev/api/set_room_details/' + current_room.value + '/' + endpoint,
|
||||
data,
|
||||
(resp) => { console.log('success'); },
|
||||
(status) => { console.log('fail'); }
|
||||
);
|
||||
}
|
||||
|
||||
set_room_id.addEventListener('click', () => {
|
||||
setUserData('current_room', { "current_room": current_room.value });
|
||||
});
|
||||
document.getElementById('set_user_color').addEventListener('click', () => {
|
||||
setUserData('user_color', { "user_color": document.getElementById('user_color').value });
|
||||
});
|
||||
document.getElementById('set_user_name').addEventListener('click', () => {
|
||||
setUserData('user_name', { "user_name": document.getElementById('user_name').value });
|
||||
});
|
||||
document.getElementById('set_tv_url').addEventListener('click', () => {
|
||||
setRoomData('tv_url', { "tv_url": document.getElementById('tv_url').value });
|
||||
});
|
||||
document.getElementById('set_carpet_color').addEventListener('click', () => {
|
||||
setRoomData('carpet_color', { "carpet_color": document.getElementById('carpet_color').value });
|
||||
});
|
||||
|
||||
} else {
|
||||
window.location.href = "/pair";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Coloris({
|
||||
el: '.coloris',
|
||||
swatches: [
|
||||
'#264653',
|
||||
'#2a9d8f',
|
||||
'#e9c46a',
|
||||
'#f4a261',
|
||||
'#e76f51',
|
||||
'#d62828',
|
||||
'#023e8a',
|
||||
'#0077b6',
|
||||
'#0096c7',
|
||||
'#00b4d8',
|
||||
'#48cae4',
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
---
|
||||
title: "Pairing"
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #bc1f2d;
|
||||
}
|
||||
|
||||
#pair_code {
|
||||
max-width: 4em;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1em;
|
||||
box-shadow: 0 0 2em #0003;
|
||||
}
|
||||
|
||||
input.btn {
|
||||
cursor: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<img src="/img/pair_code_screenshot.png" class="img-responsive">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<div class="card-title h5">Enter Pairing Code</div>
|
||||
<div class="card-subtitle text-gray"></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
You can find the code in the bottom left of your menu tablet in conVRged.
|
||||
</div>
|
||||
<div class="card-footer centered">
|
||||
<input class="btn" type="text" id="pair_code" placeholder="0000">
|
||||
<button class="btn btn-primary" id="submit_pairing_code">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
let submit_button = document.getElementById('submit_pairing_code');
|
||||
let pair_code_input = document.getElementById('pair_code');
|
||||
submit_button.addEventListener('click', () => {
|
||||
httpGetAsync('https://connect.vel.workers.dev/api/pair_headset/' + pair_code_input.value, (resp) => {
|
||||
console.log(resp);
|
||||
let respData = JSON.parse(resp);
|
||||
if (respData['hw_id'] != '') {
|
||||
setCookie('hw_id', respData['hw_id'], 60);
|
||||
window.location.href = "/";
|
||||
}
|
||||
}, (status) => {
|
||||
window.location.href = "/failure";
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
---
|
||||
title: "SUCCESS"
|
||||
---
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #333;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin: 8em auto;
|
||||
width: max-content;
|
||||
font-family: arial, sans-serif;
|
||||
color: #ddd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="centered">
|
||||
🎉 SUCCESS 🎉
|
||||
</div>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
{{ partial "head.html" (dict "title" .Title ) }}
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/favicons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#b91d47">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ .title }}</title>
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/css/spectre.min.css">
|
||||
<link rel="stylesheet" href="/css/spectre-exp.min.css">
|
||||
<link rel="stylesheet" href="/css/spectre-icons.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/coloris.min.css">
|
||||
<script src="/js/util.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1em;
|
||||
box-shadow: 0 0 2em #0003;
|
||||
}
|
||||
|
||||
input.btn {
|
||||
cursor: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
Before Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,9 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/mstile-150x150.png"/>
|
||||
<TileColor>#b91d47</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
|
Before Width: | Height: | Size: 815 B |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,20 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M605 1500 l600 -600 97 0 98 0 0 600 0 600 -100 0 -100 0 0 -452 0
|
||||
-453 -453 453 -452 452 -145 0 -145 0 600 -600z"/>
|
||||
<path d="M1500 2000 l0 -100 300 0 300 0 0 100 0 100 -300 0 -300 0 0 -100z"/>
|
||||
<path d="M2200 1500 l0 -600 398 2 397 3 3 98 3 97 -301 0 -300 0 -2 498 -3
|
||||
497 -97 3 -98 3 0 -601z"/>
|
||||
<path d="M1500 1500 l0 -100 300 0 300 0 0 100 0 100 -300 0 -300 0 0 -100z"/>
|
||||
<path d="M1500 1000 l0 -100 300 0 300 0 0 100 0 100 -300 0 -300 0 0 -100z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 977 B |
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-256x256.png",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1,155 +0,0 @@
|
|||
|
||||
function httpGetAsync(theUrl, callback, failCallback) {
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function () {
|
||||
if (xmlHttp.readyState == 4) {
|
||||
if (xmlHttp.status == 200) {
|
||||
callback(xmlHttp.responseText);
|
||||
} else {
|
||||
failCallback(xmlHttp.status);
|
||||
}
|
||||
}
|
||||
}
|
||||
xmlHttp.open("GET", theUrl, true); // true for asynchronous
|
||||
xmlHttp.send(null);
|
||||
}
|
||||
|
||||
|
||||
function httpPostAsync(theUrl, data, callback, failCallback) {
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function () {
|
||||
if (xmlHttp.readyState == 4) {
|
||||
if (xmlHttp.status == 200) {
|
||||
callback(xmlHttp.responseText);
|
||||
} else {
|
||||
failCallback(xmlHttp.status);
|
||||
}
|
||||
}
|
||||
}
|
||||
xmlHttp.open("POST", theUrl, true); // true for asynchronous
|
||||
xmlHttp.setRequestHeader('Content-type', 'application/json');
|
||||
xmlHttp.send(JSON.stringify(data));
|
||||
}
|
||||
|
||||
function setCookie(cname, cvalue, exdays) {
|
||||
const d = new Date();
|
||||
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
|
||||
let expires = "expires=" + d.toUTCString();
|
||||
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||
}
|
||||
|
||||
|
||||
function getCookie(cname) {
|
||||
let name = cname + "=";
|
||||
let decodedCookie = decodeURIComponent(document.cookie);
|
||||
let ca = decodedCookie.split(';');
|
||||
for (let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) == 0) {
|
||||
return c.substring(name.length, c.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function writeClass(className, data) {
|
||||
if (data == undefined || data == null || data.toString() == 'undefined') {
|
||||
data = "";
|
||||
}
|
||||
|
||||
let elements = document.getElementsByClassName(className);
|
||||
Array.from(elements).forEach(e => {
|
||||
e.innerHTML = data;
|
||||
});
|
||||
}
|
||||
|
||||
function writeId(idName, data) {
|
||||
if (data == undefined || data == null || data.toString() == 'undefined') {
|
||||
data = "";
|
||||
}
|
||||
|
||||
document.getElementById(idName).innerHTML = data;
|
||||
}
|
||||
|
||||
function writeValue(className, data) {
|
||||
if (data == undefined || data == null || data.toString() == 'undefined') {
|
||||
data = "";
|
||||
}
|
||||
|
||||
let elements = document.getElementsByClassName(className);
|
||||
Array.from(elements).forEach(e => {
|
||||
e.value = data;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function writeSrc(className, data) {
|
||||
if (data == undefined || data == null || data.toString() == 'undefined') {
|
||||
data = "";
|
||||
}
|
||||
|
||||
let elements = document.getElementsByClassName(className);
|
||||
Array.from(elements).forEach(e => {
|
||||
e.src = data;
|
||||
});
|
||||
}
|
||||
|
||||
function timeSince(date) {
|
||||
|
||||
let seconds = Math.floor((new Date() - date) / 1000);
|
||||
|
||||
let interval = seconds / 31536000;
|
||||
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " years";
|
||||
}
|
||||
interval = seconds / 2592000;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " months";
|
||||
}
|
||||
interval = seconds / 86400;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " days";
|
||||
}
|
||||
interval = seconds / 3600;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " hours";
|
||||
}
|
||||
interval = seconds / 60;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " minutes";
|
||||
}
|
||||
return Math.floor(seconds) + " seconds";
|
||||
}
|
||||
|
||||
function timeSinceString(date) {
|
||||
|
||||
date = Date.parse(date);
|
||||
let seconds = Math.floor((new Date() - date) / 1000);
|
||||
|
||||
let interval = seconds / 31536000;
|
||||
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " years";
|
||||
}
|
||||
interval = seconds / 2592000;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " months";
|
||||
}
|
||||
interval = seconds / 86400;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " days";
|
||||
}
|
||||
interval = seconds / 3600;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " hours";
|
||||
}
|
||||
interval = seconds / 60;
|
||||
if (interval > 1) {
|
||||
return Math.floor(interval) + " minutes";
|
||||
}
|
||||
return Math.floor(seconds) + " seconds";
|
||||
}
|
||||