.answer-text { color: black; } .letter { color: white; }
```markdown
.controls {
height: 0;
position: relative;
left: 47vw;
top: -80px;
button {
max-width: 15vw;
line-height: 1em;
font-size: 1em;
height: 80px;
width: 80px;
text-align: center;
border-radius: 40px;
border: 4px solid #3d758c;
background-color: #101011;
color: white;
cursor: pointer;
&:active,&:hover,&:focus {
border: 4px solid orange;
background-color: beige;
color: black;
}
}
}
.route-game-new {
height: 100vh;
width: 100vw;
form {
width: 400px;
input {
width: 100%;
margin-bottom: 20px;
font-size: 2em;
padding: 8px 16px;
text-align: center;
background: linear-gradient(-45deg, black, #470147);
border: 4px solid #3d758c;
color: white;
}
.form-controls {
height: 0;
position: relative;
left: 410px;
top: -91px;
// button {
// max-width: 15vw;
// line-height: 1em;
// font-size: 1em;
// height: 80px;
// width: 80px;
// text-align: center;
// border-radius: 40px;
// border: 4px solid #3d758c;
// background: linear-gradient(-45deg, black, #470147);
// color: white;
// cursor: pointer;
.btn {
padding: 12px 24px;
font-size: 1.4em;
border-radius: 100px;
cursor: pointer;
&.btn-purple {
background: radial-gradient(lighten($dark-purple, 20%), $dark-purple);
border: 4px solid $dark-purple;
color: white;
font-weight: 600;
&:hover,&:active,&:focus {
background: radial-gradient($dark-purple, darken($dark-purple, 5%));
}
}
&.btn-orange {
background: radial-gradient(lighten($orange, 20%), $orange);
border: 4px solid $orange;
color: black;
font-weight: 600;
&:hover,&:active,&:focus {
background: radial-gradient($orange, darken($orange, 10%));
}
}
&.btn-red {
background: radial-gradient(#790101, #d52828);
border: 4px solid #790101;
color: white;
font-weight: 600;
&:hover,&:active,&:focus {
background: radial-gradient(darken(#790101, 10%), darken(#d52828, 10%));
}
}
.route-game-list {
margin-top: 40px;
.container {
border: $boxed-border;
background: $boxed-background;
color: white;
h1 {
color: $orange;
margin: 0 0 20px;
}
li {
padding: 20px;
border-top: 1px solid $border-color
}
.label {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: baseline;
}
.name {
font-size: 1.5em;
font-weight: 600;
}
.status {
font-size: 1.25em;
font-weight: 400;
font-style: italic;
margin-left: 10px;
}
.controls {
margin-top: 20px;
& > * {
margin-right: 10px;
}
}
}
}
.answer-row {
background-image: url(/assets/images/answer_bg_line.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 100vw;
}
li {
flex: 0 0 680px;
margin: 5px 0 0;
&:nth-child(even) {
margin-left: 10px;
}
input[type=radio] {
display: none;
}
label {
display: flex;
background-image: url(/assets/images/answer_bg_sprite.webp);
background-size: cover;
height: 80px;
cursor: pointer;
.answer-text {
padding: 10px 35px;
width: 100%;
font-size: 2.5em;
font-weight: 600;
color: #ddd;
opacity: 0;
&.show {
opacity: 1;
}
pre {
margin: 0;
font-size: 1.25em;
&.small {
font-size: 0.8em;
}
}
.c-ask-question {
position: relative;
$question-height: 155px;
.question-text-bg {
background-image: url(/assets/images/question_bg.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 100vw;
height: $question-height;
}
.question-text {
padding: 10px;
font-size: 2.6em;
font-weight: 600;
width: 1200px;
margin: 0 auto;
height: $question-height;
text-align: center;
color: white;
.code-result {
font-size: 0.75em;
}
pre {
margin: 0;
font-size: 1.25em;
text-align: left;
&.small {
font-size: 1em;
}
}
}
.answers {
width: 100vw;
list-style: inside upper-alpha;
padding: 0;
margin: 10px 0 0 0;
.answers {
width: 100vw;
list-style: inside upper-alpha;
padding: 0;
margin: 10px 0 0 0;
.answer-row {
background-image: url(/assets/images/answer_bg_line.png);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 100vw;
}
li {
flex: 0 0 650px;
margin: 5px 0 0;
&:nth-child(even) {
margin-left: 10px;
}
input[type=radio] {
display: none;
}
label {
display: flex;
background-image: url(/assets/images/answer_bg_sprite.webp);
background-size: cover;
height: 72px;
ol.prize-stack {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
background: linear-gradient(-45deg, black, #470147);
border: 4px solid #3d758c;
height: 100%;
li {
list-style: none;
flex: 1 0 auto;
flex-direction: column;
display: flex;
justify-content: center;
color: orange;
padding: 5px 20px;
&.threshold {
color: white;
}
&.current {
background-color: orange;
color: black;
padding: 4px 20px;
border-bottom: 1px solid black;
}
.name {
font-weight: 600;
font-size: 1.6em;
}
.sponsor {
font-size: 1.2em;
font-weight: 400;
margin-left: 35px;
opacity: 0.8;
}
}
}
.route-giveaway {
height: 100vh;
width: 100vw;
.box {
margin-top: 60px;
width: 900px;
text-align: center;
&.hide {
display: none;
}
}
.prize-wrap {
position: absolute;
left: 0;
right: 0;
top: 60px;
}
h1 {
.sub {
font-size: 1.5em;
}
.main{
font-size: 2.5em;
line-height: 1em;
}
line-height: 0.9em;
font-weight: 600;
color: $orange;
margin-bottom: 20px;
filter: drop-shadow(0px 0px 20px #000);
}
.instruction {
font-size: 3em;
font-weight: 400;
}
.question-wrap {
position: fixed;
bottom: 80px;
width: 100vw;
}
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
// background: #00FF00;
font-family: 'Helvetica Neue', arial, sans-serif;
font-weight: 400;
color: #444;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
box-sizing: border-box;
}
ol, li {
list-style: none;
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
#app {
height: 100%;
width: 100%;
}
&.btn-round {
font-size: 1em;
padding: 5px;
height: 90px;
width: 90px;
}
&.btn-square {
border-radius: 0;
height: 140px;
width: 140px;
padding: 12px;
}
"assets/icons/android-chrome-512x512.png": "assets/icons/android-chrome-512x512.png",
"assets/icons/apple-touch-icon.png": "assets/icons/apple-touch-icon.png",
"assets/icons/favicon-16x16.png": "assets/icons/favicon-16x16.png",
"assets/icons/favicon-32x32.png": "assets/icons/favicon-32x32.png",
"assets/icons/mstile-150x150.png": "assets/icons/mstile-150x150.png",
"assets/icons/safari-pinned-tab.svg": "assets/icons/safari-pinned-tab.svg",
"assets/images/5050.svg": "assets/images/5050.svg",
"assets/images/answer_bg_line.png": "assets/images/answer_bg_line.png",
"assets/images/answer_bg_sprite.webp": "assets/images/answer_bg_sprite.webp",
"assets/images/ask_a_speaker.svg": "assets/images/ask_a_speaker.svg",
"assets/images/audience-app-qr.png": "assets/images/audience-app-qr.png",
"assets/images/logo.png": "assets/images/logo.png",
"assets/images/prize_bg.png": "assets/images/prize_bg.png",
"assets/images/question_bg.png": "assets/images/question_bg.png",
"assets/prizes/airpods.png": "assets/prizes/airpods.png",
"assets/prizes/amazongc.png": "assets/prizes/amazongc.png",
"assets/prizes/appletv.png": "assets/prizes/appletv.png",
"assets/prizes/books.png": "assets/prizes/books.png",
"assets/prizes/hammock.png": "assets/prizes/hammock.png",
"assets/prizes/hand_sanitizer.png": "assets/prizes/hand_sanitizer.png",
"assets/prizes/jogger.png": "assets/prizes/jogger.png",
"assets/prizes/lego_galaxy_explorer.png": "assets/prizes/lego_galaxy_explorer.png",
"assets/prizes/lego_infinity_glove.png": "assets/prizes/lego_infinity_glove.png",
"assets/prizes/lego_mandalorian.png": "assets/prizes/lego_mandalorian.png",
"assets/sponsors/ravendb.png": "assets/sponsors/ravendb.png",
"assets/sponsors/request_metrics.svg": "assets/sponsors/request_metrics.svg",
"assets/sponsors/techpros.svg": "assets/sponsors/techpros.svg",
"assets/sponsors/text_control.svg": "assets/sponsors/text_control.svg",
"assets/sponsors/trackjs.svg": "assets/sponsors/trackjs.svg",
"assets/sponsors/vonage.png": "assets/sponsors/vonage.png",
"assets/sponsors/wisej.png": "assets/sponsors/wisej.png",
"assets/video/set_display.mp4": "assets/video/set_display.mp4",
"assets/video/set_fanfare.mp4": "assets/video/set_fanfare.mp4",
"assets/video/set_graphics.mp4": "assets/video/set_graphics.mp4",
"prize_bg.png": "f49c632302f128aae0759752869a7d90.png",
"manifest.json": "manifest.json",
"sw-esm.js": "sw-esm.js",
"sw-esm.js.map": "sw-esm.js.map",
"sw.js": "sw.js",
"sw.js.map": "sw.js.map"
"assets/prizes/lego_motorized_lighthouse.png": "assets/prizes/lego_
## Top-Level Directory Explanations
<a class='local-link directory-link' data-ref="audience-app/" href="#audience-app/">audience-app/</a> - This directory contains the files for the audience-facing part of the application. It includes HTML files for different pages, static assets like images, and configuration files for Firebase and npm.
<a class='local-link directory-link' data-ref="audience-app/public/" href="#audience-app/public/">audience-app/public/</a> - This subdirectory holds the publicly accessible files of the audience app. It includes HTML files for specific pages, images, and other static assets.
<a class='local-link directory-link' data-ref="presenter-app/" href="#presenter-app/">presenter-app/</a> - This directory contains the files for the presenter-facing part of the application. It includes source code, static assets, and configuration files.
<a class='local-link directory-link' data-ref="presenter-app/build/" href="#presenter-app/build/">presenter-app/build/</a> - This subdirectory holds the compiled and bundled files for the presenter app. It includes HTML, CSS, JavaScript, and image files.
<a class='local-link directory-link' data-ref="presenter-app/src/" href="#presenter-app/src/">presenter-app/src/</a> - This subdirectory contains the source code for the presenter app. It includes components, controllers, routes, styles, and utility functions.
<a class='local-link directory-link' data-ref="presenter-app/tests/" href="#presenter-app/tests/">presenter-app/tests/</a> - This subdirectory contains test files for the presenter app. It includes mocks, controllers, and declarations.
