content/hifi-content/rebecca/CheckoutZone/Checkout.html
2022-02-14 02:04:11 +01:00

180 lines
No EOL
7 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>High Fidelity--Checkout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="landscaping_files/css.htm">
<style>
/* latin */
@font-face {
font-family: 'Artifika';
font-style: normal;
font-weight: 400;
src: local('Artifika Medium'), local('Artifika-Medium'), url(https://fonts.gstatic.com/s/artifika/v6/KUmbsEUmwZBks8S_dFROo_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
body {
margin: 0;
width: 100%;
font-family: 'Artifika', sans-serif;
font-size: 16pt;
color: #2F145F;
background: linear-gradient(#F5F5F8, #3A8AAF);
}
.top-bar {
height: 90px;
background: linear-gradient(#939492, #70D8F8);
font-weight: bold;
padding-left: 30px;
padding-right: 30px;
display: flex;
align-items: center;
position: fixed;
width: 480px;
top: 0;
z-index: 1;
font-size: 20pt;
}
.content {
margin-top: 90px;
padding: 30px;
}
input[type=button] {
font-family: 'Artifika';
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: #5D39DD;
background-color: #6A2CF9;
background: linear-gradient(#F7F5F3 20%, #8746F0 100%);
cursor: pointer;
}
input[type=button].buy {
color: #221053;
background-color: #afafaf;
background: linear-gradient(#A5E4EC 20%, #6247EC 100%);
}
input[type=button]:enabled:hover {
background: linear-gradient(#7AE0FA, #063155);
border: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="top-bar">
<h4>High Fidelity Marketplace Checkout</h4>
</div>
<div class="content">
<h4>Welcome!</h4>
<p>Would you like to purchase the items you are wearing? If you leave this area before purchasing, the items will no longer be attached to your avatar.</p>
<script>
for (var i = 0; i < myStuff.length; i++) {
document.write("<input type='button' name='" + myStuff[i].name + "' class='landscape-button buy' value='Buy'");
}
</script>
<div style="margin:10px">
<button id="button-1" class="ui-btn ui-corner-all">Sad Trombone</button>
<button id="button-2" class="ui-btn ui-corner-all">Scream!</button>
</div>
</div>
<script type="text/javascript" src="eventBridgeLoader.js"></script>
<script>
$(document).ready(function () {
// hook up a handler for events that come from hifi.
EventBridge.scriptEventReceived.connect(function (msg) {
print("received script event: " + msg);
console.log("WEB: recv script event = " + JSON.stringify(msg));
if (msg === "button1done") {
print("msg is button1done");
// re-enable the button now that the audio is complete
$("#button-1").removeClass("ui-disabled");
} else if (msg === "button2done") {
print("msg is button2done");
// re-enable the button now that the audio is complete
$("#button-2").removeClass("ui-disabled");
}
});
// hook up a click handler for button-1
$("#button-1").click(function () {
console.log("WEB: emit web event = " + JSON.stringify("button1play"));
// disable the button until we receive a done message.
$("#button-1").addClass("ui-disabled");
// send a play event to hifi
print("sending web event: button1play");
EventBridge.emitWebEvent(JSON.stringify("button1play"));
});
// hook up a click handler for button-2
$("#button-2").click(function () {
console.log("WEB: emit web event = " + JSON.stringify("button2play"));
// disable the button until we receive a done message.
$("#button-2").addClass("ui-disabled");
// send a play event to hifi
print("sending web event: button2play");
EventBridge.emitWebEvent(JSON.stringify("button2play"));
});
});
/* function main() {
// Send an event to landscape.js when the page loads and is ready to get things rolling
console.log("document ready");
var readyEvent = {
"type": "ready",
};
// The event bridge handles event represented as a string the best. So here we first create a Javascript object, then convert to string
EventBridge.emitWebEvent(JSON.stringify(readyEvent));
EventBridge.scriptEventReceived.connect(function (msg) {
print("WEB: recv script event = " + JSON.stringify(msg));
});
// Send an event when user click on each of the landscape buttons
$(".landscape-button").click(function(){
console.log(this.value + " button click");
var clickEvent = {
"type": "click",
"data": this.value
};
EventBridge.emitWebEvent(JSON.stringify(clickEvent));
});
}
EventBridge.scriptEventReceived.connect(function(data) {
var myStuff = JSON.parse(data);
print("received a script event " + myStuff);
});
$(document).ready(main);*/
</script>
<meta charset="utf-8">
<title></title>
</body></html>