229 lines
No EOL
8.1 KiB
HTML
229 lines
No EOL
8.1 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<link href="https://fonts.googleapis.com/css?family=Cairo:400,700" rel="stylesheet">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title>Feedback App</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="./feedbackAppWebPage_files/css" "=" rel="stylesheet">
|
|
<style>
|
|
.thankyou {
|
|
background-color: #1dbb87;
|
|
border-radius: 20px;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.white-text {
|
|
color: white;
|
|
}
|
|
|
|
.subheading {
|
|
font-family: 'Cairo', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
padding-bottom: 500px;
|
|
}
|
|
|
|
.chosen {
|
|
height: 180px;
|
|
width: 180px;
|
|
margin: auto;
|
|
}
|
|
|
|
body {
|
|
text-align: center;
|
|
margin: 0;
|
|
width: 100%;
|
|
font-family: 'Cairo', sans-serif;
|
|
font-weight: 600;
|
|
font-size: 30px;
|
|
line-height: 1.2;
|
|
color: black;
|
|
background: linear-gradient(#2b2b2b, #0f212e);
|
|
background-image: url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/main-screen-bg.jpg");
|
|
background-position: center top;
|
|
background-size: auto;
|
|
background-repeat: no-repeat;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.slider {
|
|
overflow-y: hidden;
|
|
max-height: 600px;
|
|
/* approximate max height */
|
|
|
|
transition-property: all;
|
|
transition-duration: .5s;
|
|
transition-timing-function: ease-in-out(1, 1, 1, 1);
|
|
}
|
|
|
|
.slider.closed {
|
|
max-height: 0;
|
|
}
|
|
|
|
.flex-parent {
|
|
display: flex;
|
|
padding: 8px 8% 15px 8%;
|
|
}
|
|
|
|
.content {
|
|
margin-top: 90px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.one {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button1-idle.png");
|
|
filter: drop-shadow(0px 0px 8px #242424);
|
|
}
|
|
|
|
.one:enabled:hover {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button1-hover.png");
|
|
}
|
|
|
|
.one:focus {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button1-active.png");
|
|
outline: none;
|
|
}
|
|
|
|
.two {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button2-idle.png");
|
|
filter: drop-shadow(0px 0px 8px #242424);
|
|
}
|
|
|
|
.two:enabled:hover {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button2-hover.png");
|
|
}
|
|
|
|
.two:focus {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button2-active.png");
|
|
outline: none;
|
|
}
|
|
|
|
.three {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button3-idle.png");
|
|
filter: drop-shadow(0px 0px 8px #242424);
|
|
}
|
|
|
|
.three:enabled:hover {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button3-hover.png");
|
|
}
|
|
|
|
.three:focus {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button3-active.png");
|
|
outline: none;
|
|
}
|
|
|
|
.four {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button4-idle.png");
|
|
filter: drop-shadow(0px 0px 8px #242424);
|
|
}
|
|
|
|
.four:enabled:hover {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button4-hover.png");
|
|
}
|
|
|
|
.four:focus {
|
|
background: no-repeat center/100% url("https://hifi-content.s3.amazonaws.com/brosche/DomainContent/LoadTest/FeedbackApp/images/buttonImages/button4-active.png");
|
|
outline: none;
|
|
}
|
|
|
|
input[type=button] {
|
|
vertical-align: top;
|
|
border-radius: 50%;
|
|
border: none;
|
|
cursor: pointer;
|
|
width: 120px;
|
|
height: 120px;
|
|
margin: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=button]:disabled {
|
|
color: #252525;
|
|
background: linear-gradient(#575757 20%, #252525 100%);
|
|
}
|
|
|
|
.space {
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="vsc-initialized">
|
|
<div class="content">
|
|
<div class="slider" id="slider-content">
|
|
<div class="space"></div>
|
|
<p>How would you rate your experience today?</p>
|
|
<p></p>
|
|
<div class="flex-parent">
|
|
<input type="button" class="feedback-button one" name="1">
|
|
<input type="button" class="feedback-button two" name="2">
|
|
<input type="button" class="feedback-button three" name="3">
|
|
<input type="button" class="feedback-button four" name="4">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="thankyou-container">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./feedbackAppWebPage_files/jquery.min.js.download"></script>
|
|
<script>
|
|
function main() {
|
|
// Send an event to feedbackApp.js when the page loads and is ready to get things rolling
|
|
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 stirng
|
|
EventBridge.emitWebEvent(JSON.stringify(readyEvent));
|
|
|
|
// Send an event when user clicks on each of the emoji buttons.
|
|
$(".feedback-button").click(function () {
|
|
console.log(this.name + " button click");
|
|
var clickEvent = {
|
|
"type": "click",
|
|
"data": this.name
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(clickEvent));
|
|
|
|
$("#thankyou-container").append("<div class='thankyou'><div class='chosen'></div><div><p class='white-text'>Thanks for your feedback!</p><p class='subheading'>(this app will close automatically)</p></div></div>")
|
|
$("#slider-content").addClass('closed');
|
|
|
|
var chosen;
|
|
if (this.name == 1) {
|
|
chosen = "one";
|
|
} else if (this.name == 2) {
|
|
chosen = "two";
|
|
} else if (this.name == 3) {
|
|
chosen = "three";
|
|
} else {
|
|
chosen = "four";
|
|
}
|
|
|
|
$(".chosen").addClass(chosen);
|
|
});
|
|
}
|
|
|
|
$(document).ready(main);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |