content/hifi-content/caitlyn/swampboat/appHTML.html
2022-02-13 22:19:19 +01:00

565 lines
No EOL
23 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>appHTML</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<meta content="width=480, initial-scale=1" name="viewport">
<style>
body {
margin: 0;
width: 100%;
font-family: 'Raleway', sans-serif;
background: #4527a0;
}
table {
align-items: center;
border: none;
border-spacing: 0;
border-collapse: collapse;
}
td {
text-align: center;
vertical-align: middle;
}
.top-bar {
height: 45px;
background: #4527a0;
padding-left: 0px;
padding-right: 30px;
display: block;
align-items: center;
position: fixed;
width: 100%;
top: 0;
z-index: 10;
}
.top-bar:after {
content: "";
height: 3px;
background: linear-gradient(0deg, rgba(0, 0, 112, 1) 0%, rgba(147, 147, 147, 1) 10%, rgba(121, 83, 210, 0.5) 100%);
width: 100%;
display: block;
margin-bottom: 10px;
}
.content {
margin-top: 90px;
padding: 0px;
}
.button {
padding: 10px 10px;
height: 120px;
width: 120px;
border-radius: 5px;
font-size: 80px;
}
button[type=button] {
font-family: 'Raleway';
font-weight: bold;
font-size: 100%;
text-transform: uppercase;
vertical-align: top;
height: 90px;
min-width: 90%;
padding: 0px 5px;
margin-right: 6px;
border-radius: 15px;
border: none;
color: #fff;
background-color: #000;
background: linear-gradient(#343434 20%, #000 100%);
cursor: pointer;
}
button[type=button].red {
color: #fff;
background-color: #94132e;
background: linear-gradient(#d42043 20%, #94132e 100%);
}
button[type=button].blue {
color: #fff;
background-color: #1c82b8;
background: linear-gradient(#1eb2e9 20%, #1c82b8 100%);
}
button:enabled:hover {
background: linear-gradient(#000, #000);
border: none;
}
button[type=button].red:enabled:hover {
background: linear-gradient(#d42043, #d42043);
border: none;
}
button[type=button].blue:enabled:hover {
background: linear-gradient(#1eb2e9, #1eb2e9);
border: none;
}
button[type=button]:active {
background: linear-gradient(#343434, #343434);
}
button[type=button].red:enabled:hover:active {
background: linear-gradient(#94132e, #94132e);
}
button[type=button].blue:enabled:hover:active {
background: linear-gradient(#1c82b8, #1c82b8);
}
button[type=button]:disabled {
color: #252525;
background: linear-gradient(#575757 20%, #252525 100%);
}
button[type=button][pressed=pressed] {
color: #00b4ef;
}
button[type=button][pressed=pressed].red {
color: #5c0d1d;
}
button[type=button][pressed=pressed].blue {
color: #155479;
}
.appName {
color: #ffffff;
left: 50%;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: top;
}
.appDesc {
color: #ffffff;
left: 50%;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: top;
}
.appInstructions {
text-align: left;
color: #ffffff;
left: 50%;
padding-top: 15px;
padding-bottom: 10px;
vertical-align: top;
}
.appCredits {
text-align: left;
color: #ffffff;
left: 50%;
padding-top: 15px;
padding-bottom: 10px;
vertical-align: top;
}
.slideScreen {
height: 100%;
width: 480px;
position: fixed;
z-index: 1;
top: 45px;
left: 100%;
background-color: #4527a0;
transition: 0.5s;
padding-top: 60px;
}
.slideScreen a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.slideScreen a:hover {
color: #f1f1f1;
}
.slideScreen .closebtn {
position: absolute;
cursor: pointer;
top: 0;
left: 10px;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: bold;
font-size: 36px;
margin-left: 0px;
}
.slideButton {
color: #ffffff;
cursor: pointer;
padding-top: 12px;
padding-left: 28px;
padding-bottom: 12px;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: bold;
font-size: 18px;
text-align: left;
border-top: 1px solid #53517f;
border-bottom: 1px solid #53517f;
}
.slideButton .arrow {
color: #ffffff;
font-size: 36px;
padding-right: 20px;
text-align: left;
vertical-align: middle;
margin-left: 60px;
font-weight: bold;
}
.slideButton .label {
left: 30px;
color: #ffffff;
text-transform: uppercase;
text-align: left;
vertical-align: middle;
font-family: 'Raleway';
font-weight: bold;
font-size: 18px;
text-align: left;
}
</style>
<style>
</style>
</head>
<body>
<div class="top-bar">
<table border="0" width="100%">
<tbody>
<tr>
<td width="20"></td>
<td width="1%">
<div class="appName" style="font-size: 20px;">
HoverKart
</div>
</td>
<td width="300"></td>
</tr>
</tbody>
</table>
</div>
<div align="center" class="content">
<table align="center" border="0" class="table" width="100%">
<tbody>
<tr>
<td><svg
height="100px" width="100px"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="svg20"
viewBox="0 0 477.42856 685.71429"
sodipodi:docname="hoverKart.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata26">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs24" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2520"
inkscape:window-height="1481"
id="namedview22"
showgrid="false"
inkscape:zoom="1.3766666"
inkscape:cx="365.35857"
inkscape:cy="453.42319"
inkscape:window-x="-11"
inkscape:window-y="735"
inkscape:window-maximized="1"
inkscape:current-layer="svg20" />
<path
style="fill:#ffffff;stroke-width:0.14522925"
d="m 142.71252,373.0262 c -1.27749,-0.18005 -4.60658,-0.86123 -6.38925,-1.30734 -6.30403,-1.57942 -11.98799,-4.04206 -17.13244,-7.42295 -3.33276,-2.18957 -5.11493,-3.64896 -8.55059,-7.00384 -3.54555,-3.4629 -5.45897,-5.79152 -8.74162,-10.64279 -0.4722,-0.69818 -0.95721,-1.30734 -1.0778,-1.35335 -0.22031,-0.09 -16.193027,-0.22206 -58.738971,-0.50313 -13.245456,-0.09 -23.434237,-0.21306 -24.104894,-0.29608 -3.218318,-0.39811 -6.482278,-2.08655 -9.1952225,-4.75625 -2.567175,-2.52566 -4.038081,-5.00031 -4.808295,-8.09012 -0.657547,-2.63869 -2.68849,-13.48954 -3.49734399,-18.6869 -0.659246,-4.23612 -0.632948,-7.95509 0.07328,-10.36373 1.42893899,-4.87227 4.95661299,-9.01736 9.58622649,-11.26195 0.798656,-0.3881 1.876842,-0.83822 2.395969,-1.00126 1.810947,-0.56915 2.065107,-0.58415 16.552359,-1.02927 2.754481,-0.08 5.053469,-0.20005 5.108864,-0.25707 0.0918,-0.09 0.271081,-7.33492 0.486296,-19.63915 0.197086,-11.26795 0.549668,-14.00167 2.424129,-18.79092 2.906122,-7.42595 16.077451,-30.62103 20.710553,-36.47257 1.810584,-2.2866 6.270323,-6.59172 8.792235,-8.48822 2.368638,-1.78047 6.385317,-3.99205 9.492535,-5.22537 3.96989,-1.57542 11.770263,-4.20811 109.37838,-36.90969 16.17279,-5.41842 30.87081,-10.34771 32.66225,-10.95287 l 3.2572,-1.10229 h 5.09702 5.09702 l 1.44749,1.03927 c 4.93637,3.54093 7.60991,6.91382 8.20906,10.35572 0.22772,1.30734 0.0894,7.27591 -0.21896,9.44847 -0.64209,4.5242 -1.64028,9.90761 -2.1326,11.50203 -0.3932,1.27333 -0.40171,1.32035 -0.5695,3.16783 -0.0798,0.87923 -0.27468,2.70871 -0.43306,4.06707 -0.15839,1.35835 -0.30877,2.64869 -0.33417,2.86875 -0.0286,0.24706 0.0229,0.3991 0.13555,0.3991 0.65526,0 23.89873,-8.72328 29.27561,-10.98688 0.92823,-0.3911 1.58635,-0.75419 1.63324,-0.90223 0.11263,-0.3551 -0.3344,-1.86649 -1.7421,-5.89255 l -1.23599,-3.53393 -0.002,-2.30561 c -0.002,-3.09081 0.2036,-4.06907 1.26529,-6.00757 1.28661,-2.34962 3.25478,-4.16009 5.93492,-5.45844 l 1.62705,-0.7892 h 2.98545 2.98544 l 1.17531,0.49613 c 1.51708,0.64017 2.22303,1.05928 3.52991,2.09855 1.23166,0.97926 2.34807,2.32361 2.99066,3.60194 0.24733,0.49213 0.91564,2.06054 1.48514,3.48592 3.09355,7.74204 13.82244,36.32853 14.22388,37.89894 0.36799,1.43838 0.40357,4.77626 0.065,6.0936 -0.92751,3.61095 -3.9069,6.92182 -7.54277,8.3832 l -1.16526,0.46812 h -2.9042 c -2.78317,0 -2.94815,-0.01 -3.95872,-0.3841 -1.62492,-0.59416 -3.14437,-1.61942 -4.68755,-3.16483 -1.66782,-1.67044 -1.9107,-2.11155 -4.20084,-7.627 -1.83926,-4.42916 -2.10732,-4.99831 -2.41154,-5.11434 -0.33941,-0.13103 -5.70449,1.79647 -19.01096,6.82779 -10.85252,4.10408 -12.50321,4.77425 -12.3518,5.01932 0.0472,0.08 0.94561,0.80921 1.99642,1.62842 4.61115,3.59295 7.65801,7.2259 9.92175,11.8281 1.5868,3.22685 2.43089,6.20663 5.31377,18.76292 0.73771,3.21285 1.38436,5.91155 1.437,5.99658 0.0668,0.10802 4.90932,0.15404 16.05702,0.15304 16.79226,0 19.37681,-0.05 19.91773,-0.39111 0.17939,-0.11303 1.97637,-1.58441 3.99328,-3.26985 6.51603,-5.44743 9.89693,-7.79905 14.77572,-10.2797 4.48409,-2.2786 8.77998,-3.90602 13.21413,-5.00331 2.40684,-0.59616 3.2242,-0.74019 24.39531,-4.30413 23.7321,-3.99405 25.31245,-4.28812 28.4612,-5.30339 5.98615,-1.92951 12.04334,-5.20236 16.36615,-8.84232 2.09987,-1.76746 6.61736,-6.46869 9.78696,-10.18367 7.57841,-8.88233 30.58431,-36.25351 30.9744,-36.85167 0.24318,-0.3731 0.26491,-2.14756 0.39637,-32.39049 l 0.13906,-31.99639 0.53478,-1.30334 c 0.70181,-1.71145 1.69302,-3.20784 2.94051,-4.43816 1.63696,-1.614428 3.19383,-2.519666 5.11502,-2.972785 1.26179,-0.297077 4.38317,-0.287075 5.61652,0.02001 3.75237,0.930244 6.56461,3.652955 8.27147,8.009095 0.25971,0.66317 0.27248,2.44664 0.36005,50.21717 0.0499,27.24115 0.13196,59.73667 0.18231,72.21194 l 0.0915,22.68295 0.45281,0.08 c 0.24905,0.04 4.2428,0.11803 8.875,0.16704 11.37808,0.11903 14.12673,0.24106 15.90052,0.70519 6.6454,1.73945 12.43849,5.78251 16.05177,11.20193 1.24724,1.87049 2.66696,4.75125 3.65084,7.40794 l 0.69942,1.8875 v 11.47501 c 0,12.56729 0.0168,12.28322 -0.88858,15.01894 -1.11612,3.37288 -3.21844,7.04084 -5.54501,9.67353 -2.97266,3.36389 -6.46662,5.74252 -11.19477,7.62101 -2.23575,0.88823 -2.29851,0.92924 -2.39457,1.56241 -0.0457,0.30108 -0.15086,2.86875 -0.23364,5.70449 -0.26405,9.04438 -0.43803,10.53077 -1.50162,12.83337 -1.80543,3.90902 -4.66719,6.51171 -9.09897,8.27517 l -1.66992,0.66517 -29.04204,0.14104 -29.04204,0.14104 -0.32378,0.41011 c -0.17807,0.22605 -1.01898,1.42337 -1.86868,2.66169 -2.37683,3.46391 -4.06067,5.47244 -7.31059,8.72129 -4.93291,4.93229 -8.67627,7.66501 -14.47286,10.56977 -4.71613,2.36262 -9.29031,3.90703 -15.16073,5.11834 l -2.90658,0.60016 -7.4396,-0.07 c -8.1184,-0.08 -7.82407,-0.05 -12.0137,-1.05728 -8.36055,-2.01052 -16.18329,-5.7335 -22.21716,-10.57277 -3.15282,-2.52966 -7.0857,-6.45769 -9.52051,-9.50949 -0.6586,-0.82622 -2.00374,-2.6677 -2.98919,-4.09307 -1.31169,-1.8975 -1.88926,-2.61669 -2.15566,-2.68371 -0.20015,-0.05 -28.13535,-0.12603 -62.07824,-0.16804 l -61.71433,-0.08 -1.01647,1.64543 c -2.40927,3.90002 -4.98031,7.05185 -8.80904,10.79783 -3.59881,3.52092 -6.42874,5.74551 -10.12431,7.95709 -5.95101,3.56193 -12.64183,6.06059 -19.76517,7.38293 -1.53662,0.28608 -2.2379,0.31308 -8.78522,0.34909 -3.91342,0.02 -7.31133,0.01 -7.55093,-0.02 z"
id="path4087"
inkscape:connector-curvature="0" />
</svg></td>
</tr>
<tr>
<td>
<div class="appName" style="font-size: 34px;">
HoverKart
</div>
</td>
</tr>
<tr>
<td>
<div style="padding-top: 8px"></div>
</td>
</tr>
<tr>
<td>
<div class="appDesc" style="font-size: 18px; padding-left: 20px; padding-right: 20px">
The HoverKart App allows you to drive a HoverKart around! Vroom!
</div>
</td>
</tr>
<tr>
<td>
<div style="padding-top: 8px"></div>
</td>
</tr>
<tr>
<td>
<button class="FloofVRTool button red" id="Toggle" type="button">On</button>
</td>
</tr>
<tr>
<td>
<div style="padding-top: 8px"></div>
</td>
</tr>
<tr>
<td>
<button class="FloofVRTool button blue" id="CameraMode" type="button">Off</button><br/>
<div class="appDesc" style="font-size: 10px;">
NOTE: Dynamic Camera is experimental!
</div>
</td>
</tr>
<tr>
<td>
<button class="FloofVRTool button red" id="SoundMode" type="button">Off</button><br/>
</td>
</tr>
<tr>
<td>
<div style="padding-top: 15px"></div>
</td>
</tr>
<tr>
<td>
<div class="slideButton" onclick="openSlideScreen('Instructions')">
<table border="0" width="0">
<tbody>
<tr>
<td width="100%">
<div class="label">
Instructions
</div>
</td>
<td width="100%"><span class="arrow"></span></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="slideButton" onclick="openSlideScreen('Credits')">
<table border="0" width="0">
<tbody>
<tr>
<td width="100%">
<div class="label">
Credits
</div>
</td>
<td width="100%"><span class="arrow"></span></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="slideScreen appInstructions" id="Instructions"
style="font-size: 18px; padding-left: 20px; padding-right: 20px">
<div class="closebtn" onclick="closeSlideScreen('Instructions')">
</div>
<span style="font-weight:bold">How to use the HoverKart:</span><br>
Press the HoverKart on button to turn on the kart<br/><br/>
The HoverKart uses normal WASD controls!<br/><br/>
If you want to use the dynamic camera just hit the Dynamic Camera button.<br/><br/>
NOTE: Dynamic Camera is experimental!<br/><br/>
HoverKart too loud? Simply hit the Sound button to toggle the sounds!<br/>
<br/>
</div>
<div class="slideScreen appCredits" id="Credits"
style="font-size: 18px; padding-left: 20px; padding-right: 20px">
<div class="closebtn" onclick="closeSlideScreen('Credits')">
</div>
<span style="font-weight:bold">Created by FluffyJenkins</span><br/>
<br/>
<p>If you can improve on the instructions feel free <br/>
to contact me via the forums or inworld</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
var appUUID;
function openSlideScreen(element) {
document.getElementById(element).style.left = "0%";
}
function closeSlideScreen(element) {
document.getElementById(element).style.left = "100%";
}
function main() {
var parsedUrl = new URL(window.location.href);
var appName = "HoverKart";
var on = true;
var CameraMode = false;
var SoundMode = true;
appUUID = parsedUrl.searchParams.get("appUUID");
function emitWebEvent(obj) {
if (window.qt) {
obj.appUUID = appUUID;
EventBridge.emitWebEvent(JSON.stringify(obj));
}
}
if (window.qt) {
var readyEvent = {
"type": "ready"
};
emitWebEvent(readyEvent);
console.log("sending ready signal!");
}
$("#Toggle").click(function () {
if (!on) {
$("#Toggle").addClass("red").removeClass("blue").text("TURN OFF " + appName);
emitWebEvent({"state": true});
on = true;
}
else if (on) {
$("#Toggle").addClass("blue").removeClass("red").text("TURN ON " + appName);
emitWebEvent({"state": false});
on = false;
}
}).text("TURN OFF " + appName);
$("#CameraMode").click(function () {
if (!CameraMode) {
$("#CameraMode").addClass("red").removeClass("blue").text("TURN OFF DYNAMIC CAMERA");
emitWebEvent({"camera": true});
CameraMode = true;
}
else if (CameraMode) {
$("#CameraMode").addClass("blue").removeClass("red").text("TURN ON DYNAMIC CAMERA");
emitWebEvent({"camera": false});
CameraMode = false;
}
}).text("TURN ON DYNAMIC CAMERA");
$("#SoundMode").click(function () {
if (!SoundMode) {
$("#SoundMode").addClass("red").removeClass("blue").text("TURN OFF SOUNDS");
emitWebEvent({"sound": true});
SoundMode = true;
}
else if (SoundMode) {
$("#SoundMode").addClass("blue").removeClass("red").text("TURN ON SOUNDS");
emitWebEvent({"sound": false});
SoundMode = false;
}
}).text("TURN OFF SOUNDS");
if (parsedUrl.searchParams.get("enabled") === "true") {
$("#Toggle").addClass("red").removeClass("blue").text("TURN OFF " + appName);
on = true;
} else if (parsedUrl.searchParams.get("enabled") === "false") {
$("#Toggle").addClass("blue").removeClass("red").text("TURN ON " + appName);
on = false;
}
if (parsedUrl.searchParams.get("camera") === "true") {
$("#CameraMode").addClass("red").removeClass("blue").text("TURN OFF DYNAMIC CAMERA");
CameraMode = true;
} else if (parsedUrl.searchParams.get("camera") === "false") {
$("#CameraMode").addClass("blue").removeClass("red").text("TURN ON DYNAMIC CAMERA");
CameraMode = false;
}
if (parsedUrl.searchParams.get("sound") === "true") {
$("#SoundMode").addClass("red").removeClass("blue").text("TURN OFF SOUNDS");
SoundMode = true;
} else if (parsedUrl.searchParams.get("sound") === "false") {
$("#SoundMode").addClass("blue").removeClass("red").text("TURN ON SOUNDS");
SoundMode = false;
}
if (window.qt) {
console.log("connecting to eventbridge");
EventBridge.scriptEventReceived.connect(function (message) {
console.log(message);
var data = JSON.parse(message);
if (data.appUUID === appUUID) {
if (data.hasOwnProperty("state")) {
if (data.state === true) {
on = true;
$("#Toggle").addClass("red").removeClass("blue").text("TURN OFF " + appName);
} else if (data.state === false) {
on = false;
$("#Toggle").addClass("blue").removeClass("red").text("TURN ON " + appName);
}
}
}
});
console.log("connected?");
}
}
$(document).ready(main);
</script>
</body>
</html>