mirror of
https://github.com/AleziaKurdis/Overte-community-apps.git
synced 2025-04-06 06:33:09 +02:00
272 lines
8.6 KiB
HTML
272 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
notes.html
|
|
|
|
Created by Alezia Kurdis, May 27th 2022.
|
|
Copyright 2022 Overte e.V.
|
|
|
|
UI for a simple application to take notes online, mainly for when we are in HMD mode.
|
|
|
|
Distributed under the Apache License, Version 2.0.
|
|
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script src='jquery.min.js'></script>
|
|
<script>
|
|
//Parameters
|
|
|
|
function findGetParameter(parameterName) {
|
|
var result = null,
|
|
tmp = [];
|
|
var items = location.search.substr(1).split("&");
|
|
for (var index = 0; index < items.length; index++) {
|
|
tmp = items[index].split("=");
|
|
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
var mode = findGetParameter("mode");
|
|
if(mode === null){mode = "light";}
|
|
|
|
|
|
//Paths
|
|
var thisPageName = "notes.html";
|
|
var currentPath = window.location.protocol + "//" + window.location.host + window.location.pathname;
|
|
var ROOTPATH = currentPath.replace(thisPageName, "");
|
|
|
|
var channel = "overte.application.ak.notes";
|
|
|
|
//LISTENER FROM JS FILE:
|
|
EventBridge.scriptEventReceived.connect(function(message){
|
|
var messageObj = JSON.parse(message);
|
|
if (messageObj.channel === channel && messageObj.action === "loadText") {
|
|
document.getElementById("page").value = messageObj.notes;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
@font-face {
|
|
font-family: FiraSans-SemiBold;
|
|
src: url(FiraSans-SemiBold.ttf);
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: #21293d;
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
font-style: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div.container {
|
|
height: 95%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
textarea.light {
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 14px;
|
|
resize: none;
|
|
outline: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
border: 0px;
|
|
}
|
|
|
|
textarea.dark {
|
|
font-family: FiraSans-SemiBold;
|
|
font-size: 14px;
|
|
resize: none;
|
|
outline: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
background-color: #000000;
|
|
color: #AAAAAA;
|
|
border: 0px;
|
|
}
|
|
|
|
#mode {
|
|
margin: 3px;
|
|
background: #ebebeb;
|
|
background-image: linear-gradient(to bottom, #ebebeb, #999999);
|
|
border-radius: 7px;
|
|
font-family: FiraSans-SemiBold;
|
|
color: #000000;
|
|
font-size: 20px;
|
|
padding: 0px 5px 0px 5px;
|
|
border: solid #000000 0px;
|
|
text-decoration: none;
|
|
height: 24px;
|
|
}
|
|
|
|
#mode:hover {
|
|
background: #f2f2f2;
|
|
background-image: linear-gradient(to bottom, #f2f2f2, #5c5c5c);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#mode:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#clear {
|
|
margin: 3px;
|
|
background: #ebebeb;
|
|
background-image: linear-gradient(to bottom, #ebebeb, #999999);
|
|
border-radius: 7px;
|
|
font-family: FiraSans-SemiBold;
|
|
color: #000000;
|
|
font-size: 16px;
|
|
padding: 2px 5px 0px 5px;
|
|
border: solid #000000 0px;
|
|
text-decoration: none;
|
|
height: 24px;
|
|
}
|
|
|
|
#clear:hover {
|
|
background: #f2f2f2;
|
|
background-image: linear-gradient(to bottom, #f2f2f2, #5c5c5c);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#clear:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#saveAndClose {
|
|
margin: 3px;
|
|
background: #ebebeb;
|
|
background-image: linear-gradient(to bottom, #ebebeb, #999999);
|
|
border-radius: 7px;
|
|
font-family: FiraSans-SemiBold;
|
|
color: #000000;
|
|
font-size: 16px;
|
|
padding: 2px 5px 0px 5px;
|
|
border: solid #000000 0px;
|
|
text-decoration: none;
|
|
height: 24px;
|
|
}
|
|
|
|
#saveAndClose:hover {
|
|
background: #f2f2f2;
|
|
background-image: linear-gradient(to bottom, #f2f2f2, #5c5c5c);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#saveAndClose:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#copy {
|
|
margin: 3px;
|
|
background: #ebebeb;
|
|
background-image: linear-gradient(to bottom, #ebebeb, #999999);
|
|
border-radius: 7px;
|
|
font-family: FiraSans-SemiBold;
|
|
color: #000000;
|
|
font-size: 16px;
|
|
padding: 2px 5px 0px 5px;
|
|
border: solid #000000 0px;
|
|
text-decoration: none;
|
|
height: 24px;
|
|
}
|
|
|
|
#copy:hover {
|
|
background: #f2f2f2;
|
|
background-image: linear-gradient(to bottom, #f2f2f2, #5c5c5c);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#copy:focus {
|
|
outline: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container" class="container">
|
|
<textarea id="page" class="light" placeholder="Enter your notes here..."></textarea>
|
|
</div>
|
|
<div style="width: 100%; display: flex;">
|
|
<div style="width: 50%; text-align: left;">
|
|
<button id="mode" onClick="toggleMode();">◑</button> <button id="clear" onClick="clearContent();">Clear</button>
|
|
</div>
|
|
<div style="width: 50%; text-align: right;">
|
|
<button id="saveAndClose" onClick="saveAndClose();">Save and Close</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function setMode() {
|
|
if (mode === "dark") {
|
|
document.getElementById("page").className = "dark";
|
|
} else {
|
|
document.getElementById("page").className = "light";
|
|
}
|
|
}
|
|
|
|
function toggleMode() {
|
|
if (mode === "dark") {
|
|
mode = "light";
|
|
} else {
|
|
mode = "dark";
|
|
}
|
|
|
|
var dataObj = {
|
|
"channel": channel,
|
|
"action": "saveMode",
|
|
"data": mode
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(dataObj));
|
|
|
|
setMode();
|
|
}
|
|
|
|
function clearContent() {
|
|
document.getElementById("page").value = "";
|
|
}
|
|
|
|
function saveAndClose() {
|
|
var dataObj = {
|
|
"channel": channel,
|
|
"action": "saveText",
|
|
"data": document.getElementById("page").value
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(dataObj));
|
|
}
|
|
|
|
function requestData() {
|
|
var dataObj = {
|
|
"channel": channel,
|
|
"action": "requestData"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(dataObj));
|
|
}
|
|
|
|
setMode();
|
|
requestData();
|
|
</script>
|
|
</body>
|
|
</html>
|