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.

2023-11-28 18:58:50 -05:00
parent 10eb273b87
commit 85b64ef859
11 changed files with 218 additions and 6 deletions
--- a/application/templates/modal_results.html
+++ b/application/templates/modal_results.html
@ -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>
+