Overte-community-apps-Alezi.../applications/appreciate/resources/appreciate_ui.html
Alezia Kurdis 4bb43d3443
Several reworks
v1.6 (By Alezia Kurdis for Overte, August 12th, 2023)

    Replace the Color Picker Component (sadly GPLv3) by a simple hue selector.
    Add an "uninstall" button
    Keep the icon active if the switch is on.
    The appreciation dodecahedron is now emissive, and glows as the intensity grows.
2023-08-12 23:12:25 -04:00

88 lines
3.2 KiB
HTML

<!DOCTYPE html>
<!--
appreciate_ui.html
Created by Zach Fox on January 30th, 2019
Copyright 2019 High Fidelity, Inc.
Copyright 2023, Overte e.V.
UI for the "Appreciate" application.
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>
<title>Appreciate</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="loadingContainer">
</div>
<div id="mainContainer">
<div id="titleBarContainer">
<div id="titleText" style="font-weight:bold;">
Appreciate v1.6
</div>
<label class="switch">
<input id="appreciateSwitch" type="checkbox" onclick="appreciateSwitchClicked(this)">
<span class="slider round"></span>
</label>
</div>
<div id="firstRun" style="display:none;">
<i id="tutorialArrow"></i>
<div>&nbsp;Use this switch to enable and disable the Appreciate app.</div>
</div>
<div id="progressBarContainer">
<span style="font-weight:bold;">Intensity Meter</span>
<div id="currentIntensityDisplay">
<span id="currentIntensity" style="width:0%"></span>
</div>
<div id="crosshatch"></div>
</div>
<div id="optionsContainer">
<span style="font-weight:bold;">Options</span>
<label id="neverWhistleContainer">
Never Whistle
<input id="neverWhistleCheckbox" type="checkbox" onclick="neverWhistleCheckboxClicked(this)">
<span class="checkmark"></span>
</label>
<label id="showAppreciationEntityContainer">
Show Appreciation Dodecahedron
<input id="showAppreciationEntityCheckbox" type="checkbox" onclick="showAppreciationEntityCheckboxClicked(this)">
<span class="checkmark"></span>
</label>
<br>
<div id="colorPickerContainer">
<div id="colorPicker">Dodecahedron Color</div>
<img src="images/hueBar.jpg" id="hueSelector" draggable="false">
</div>
</div>
<div id="instructions">
<div id="desktopModeInstructions">
Desktop Mode:<br/>Tap or hold the Z key on your keyboard!
</div>
<div id="vrModeInstructions">
VR Mode:<br/>Raise your hands above your head and shake them!
</div>
</div>
</div>
<div id ="uninstallBar">
<button id="uninstall" onClick = "uninstall();">Uninstall this application</button>
</div>
<!--Include this script here so it only executes once the DOM is ready.-->
<script type="text/javascript" src="js/appreciate_ui.js"></script>
</body>
</html>