Created two pages - a single click SPA page and then the option to customize each param. Created modal and the data gets loaded into the modal, but styling needs to be updated.
This commit is contained in:
Norm Rasmussen
133
application/templates/modal_results.html
Normal file
133
application/templates/modal_results.html
Normal file
@ -0,0 +1,133 @@
|
||||
<script>
|
||||
function showPopup() {
|
||||
var dialogShown = localStorage.getItem('dialogShown')
|
||||
if (!dialogShown) {
|
||||
setTimeout(function() {
|
||||
document.querySelector(".popup-trigger").click()
|
||||
console.log("showing popup")
|
||||
localStorage.setItem('dialogShown', 1)
|
||||
}, 500)}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="first-time-user-popup"
|
||||
id="firstTimeUsers"
|
||||
role="dialog"
|
||||
aria-labelledby="dialogTitle"
|
||||
aria-describedby="dialogContent"
|
||||
aria-hidden="true">
|
||||
<section class="first-time-user-popup-container">
|
||||
<div id="dialogContent" class="first-time-user-popup-content">
|
||||
<div class="modal-headline">Here you go! Now go write a song!</div>
|
||||
<div class="modal-links">
|
||||
<h2> Key: </h2>
|
||||
<h3> {{ session.output_key }} </h3>
|
||||
<h2> Time Signature: </h2>
|
||||
<h3> {{ session.output_signature }} </h3>
|
||||
<h2> Theme: </h2>
|
||||
<h3> {{ session.output_theme }} </h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* MODAL POPUP */
|
||||
.first-time-user-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.25s ease-out;
|
||||
}
|
||||
.first-time-user-popup.is-active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.first-time-user-popup-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
transform: translateY(-1em) scale(0.95);
|
||||
background-color: white;
|
||||
transition: transform 0.25s ease-out;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.first-time-user-popup.is-active .first-time-user-popup-container {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.modal-headline {
|
||||
font-size: 20px;
|
||||
line-height: normal;
|
||||
font-weight: 500;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
color: #F7492D;
|
||||
}
|
||||
|
||||
.modal-links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-links a {
|
||||
border: 2px solid #3c228a;
|
||||
background: #F7492D;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
width: calc(50% - 8px);
|
||||
margin: 0 8px;
|
||||
border-radius: 30px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.modal-links a.secondary {
|
||||
background: transparent;
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
.modal-links a:hover {
|
||||
border: 2px solid #13014a;
|
||||
background: #13014a;
|
||||
}
|
||||
|
||||
.modal-links a.secondary:hover {
|
||||
border: 2px solid #13014a;
|
||||
background: #ebe8f3;
|
||||
color: #13014a;
|
||||
}
|
||||
|
||||
.first-time-user-popup-content {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.first-time-user-popup-content {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.modal-headline {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.modal-links a {
|
||||
min-height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
18
application/templates/results.html
Normal file
18
application/templates/results.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
{% include 'head.html' %}
|
||||
{% include 'header.html' %}
|
||||
{% block content %}
|
||||
<div class="main-container" style="padding-bottom:10px;">
|
||||
<h1> Here are your results! </h1>
|
||||
<p></p>
|
||||
<div class="results-container">
|
||||
<h2> Key: </h2>
|
||||
<h3> {{ session.output_key }} </h3>
|
||||
<h2> Time Signature: </h2>
|
||||
<h3> {{ session.output_signature }} </h3>
|
||||
<h2> Theme: </h2>
|
||||
<h3> {{ session.output_theme }} </h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
21
application/templates/single-button.html
Normal file
21
application/templates/single-button.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
{% include 'head.html' %}
|
||||
{% include 'header.html' %}
|
||||
{% block content %}
|
||||
<div class="main-container">
|
||||
{% if message %}
|
||||
{% include 'modal_results.html' %}
|
||||
{% endif %}
|
||||
<h1> Get Inspired with a Song Writing Prompt! </h1>
|
||||
<h2> {{ session.list_response }} </strong></h4>
|
||||
<div class="prompt-questions">
|
||||
<form class="prompt"
|
||||
action="{{ url_for("prompt_all")}}"
|
||||
method="post">
|
||||
<input class="prompt-button"
|
||||
id="fields" type="submit" value="Submit Prompt all Only">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user