Lots of template work - Luminate, G2, Crayon. Added Mizuno Running's script. Small changes to notes.

2023-06-15 19:50:44 -04:00
parent 73ae8fe55b
commit 807739cae6
13 changed files with 523 additions and 38 deletions
--- a/Custom_Templates/customer_templates/G2/_modal_popup.html.liquid
+++ b/Custom_Templates/customer_templates/G2/_modal_popup.html.liquid
@ -0,0 +1,160 @@
+<script>
+  function showPopup() {
+    setTimeout(function() {
+      document.querySelector(".popup-trigger").click()
+      console.log("showing popup")
+    }, 500)}
+</script>
+
+
+    <button
+      type="button"
+      class="popup-trigger"
+      data-toggle-class-on-target
+      data-toggle-target="#firstTimeUsers"
+      data-toggle-escape
+      data-toggle-modal>
+      Click
+    </button>
+    </main>
+
+<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">Welcome to G2 University, {{ current_person.first_name }}! Have you become
+	#G2Certified yet?</div>
+      <div class="modal-links">
+      	<a href="javascript:setPopupSeenProperty('/app')" class="secondary" data-toggle-trigger-off>
+	  I'm just looking around.</a>
+        <a href="javascript:setPopupSeenProperty('/app/learning_paths')" data-redirect="/app">Let's get
+	  #G2Certified!</a>
+      </div>
+		</div>
+	</section>
+</div>
+
+{% if current_person.signed_in? %}
+  {% unless current_person.email contains "+preview" %}
+    <script>
+      window.addEventListener("load", function() {
+            showPopup()
+      })
+    </script>
+  {% endunless %}
+{% endif %}
+
+
+<script>
+  function setPopupSeenProperty(redirectUrl) {
+    localStorage.setItem("modal_clicked", true);
+
+    const data = { learner_uuid: '{{current_person.id}}' }
+
+    window.location.href = redirectUrl;
+
+  }
+</script>
+<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);
+  visibility: hidden;
+  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;
+}
+
+.modal-links {
+  display: flex;
+}
+
+.modal-links a {
+  border: 2px solid #3c228a;
+  background: #3c228a;
+  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>