183 lines
No EOL
6.5 KiB
HTML
183 lines
No EOL
6.5 KiB
HTML
|
|
<!--
|
|
// quick_start_template.html
|
|
//
|
|
// Created by Faye Li on 3 Feb 2017
|
|
// Copyright 2017 High Fidelity, Inc.
|
|
//
|
|
// 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>Diamond Dave Hifi App</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700"" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
font-family: 'Raleway', sans-serif;
|
|
color: white;
|
|
background: linear-gradient(#2b2b2b, #0f212e);
|
|
}
|
|
|
|
.top-bar {
|
|
height: 90px;
|
|
background: linear-gradient(#2b2b2b, #1e1e1e);
|
|
font-weight: bold;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: fixed;
|
|
width: 480px;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 90px;
|
|
padding: 30px;
|
|
}
|
|
|
|
input[type=button] {
|
|
font-family: 'Raleway';
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
vertical-align: top;
|
|
height: 28px;
|
|
min-width: 120px;
|
|
padding: 0px 18px;
|
|
margin-right: 6px;
|
|
border-radius: 5px;
|
|
border: none;
|
|
color: #fff;
|
|
background-color: #000;
|
|
background: linear-gradient(#343434 20%, #000 100%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=button].red {
|
|
color: #fff;
|
|
background-color: #94132e;
|
|
background: linear-gradient(#d42043 20%, #94132e 100%);
|
|
}
|
|
input[type=button].blue {
|
|
color: #fff;
|
|
background-color: #1080b8;
|
|
background: linear-gradient(#00b4ef 20%, #1080b8 100%);
|
|
}
|
|
input[type=button].white {
|
|
color: #121212;
|
|
background-color: #afafaf;
|
|
background: linear-gradient(#fff 20%, #afafaf 100%);
|
|
}
|
|
|
|
input[type=button]:enabled:hover {
|
|
background: linear-gradient(#000, #000);
|
|
border: none;
|
|
}
|
|
input[type=button].red:enabled:hover {
|
|
background: linear-gradient(#d42043, #d42043);
|
|
border: none;
|
|
}
|
|
input[type=button].blue:enabled:hover {
|
|
background: linear-gradient(#00b4ef, #00b4ef);
|
|
border: none;
|
|
}
|
|
input[type=button].white:enabled:hover {
|
|
background: linear-gradient(#fff, #fff);
|
|
border: none;
|
|
}
|
|
|
|
input[type=button]:active {
|
|
background: linear-gradient(#343434, #343434);
|
|
}
|
|
input[type=button].red:active {
|
|
background: linear-gradient(#94132e, #94132e);
|
|
}
|
|
input[type=button].blue:active {
|
|
background: linear-gradient(#1080b8, #1080b8);
|
|
}
|
|
input[type=button].white:active {
|
|
background: linear-gradient(#afafaf, #afafaf);
|
|
}
|
|
|
|
input[type=button]:disabled {
|
|
color: #252525;
|
|
background: linear-gradient(#575757 20%, #252525 100%);
|
|
}
|
|
|
|
input[type=button][pressed=pressed] {
|
|
color: #00b4ef;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="top-bar">
|
|
<h4>Diamond Dave Hifi Tablet App. Ahayeaaaah!</h4>
|
|
</div>
|
|
<div class="content">
|
|
<h4>All good things in moderation, including moderation!</h4>
|
|
<p>Do you want to emphatically says "yes" to someone in-world? Do you ever need to scream out because someone has done something great? Have no fear, now you can use the brilliance of David Lee Roth and his squeals to emphasize meaningful Hifi moments.</p>
|
|
<p><input type="button" id ="yeah" value="Yeah!"> </input></p>
|
|
<p><input type="button" id="uuh" value="Uuh!"></p>
|
|
<p><input type="button" id ="ooh" value="Oooooooh!"></input></p>
|
|
<p><input type="button" id= "oohYeah" value="Oooh Yea!"></p>
|
|
<p><input type="button" id="aahaa" value="Aaaaahaa!"></p>
|
|
<p><input type="button" id="ahayeah" value="Ahayeaaaah!"></p>
|
|
</div>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
<script>
|
|
$('#yeah').click(function(){
|
|
var event = {
|
|
type: "yeah"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#uuh').click(function(){
|
|
var event = {
|
|
type: "uuh"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#ooh').click(function(){
|
|
var event = {
|
|
type: "ooh"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#oohYeah').click(function(){
|
|
var event = {
|
|
type: "oohYeah"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#aahaa').click(function(){
|
|
var event = {
|
|
type: "aahaa"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#ahayeah').click(function(){
|
|
var event = {
|
|
type: "ahayeah"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
|
|
|
|
|
|
function main() {
|
|
console.log("ready");
|
|
}
|
|
|
|
$(document).ready(main);
|
|
</script>
|
|
</body>
|
|
</html> |