Merge pull request #93 from esl/modal-dropdown

implements modal and dropdown
esl · Nov 13, 2023 · 91dc657 · 91dc657
2 parents daddc19 + 0353d96
commit 91dc657
Show file tree

Hide file tree

Showing 10 changed files with 328 additions and 0 deletions.
diff --git a/_includes/countdown.html b/_includes/countdown.html
@@ -0,0 +1,105 @@
+<div id="countdown" class="countdown-container">
+  <div class="countdown-row">
+    <div class="countdown-content">
+      <div class="countdown-title">Months</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-months"></div>
+      </div>
+    </div>
+
+    <div class="countdown-content">
+      <div class="countdown-title">Days</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-days"></div>
+      </div>
+    </div>
+
+    <div class="countdown-content">
+      <div class="countdown-title">Hours</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-hours"></div>
+      </div>
+    </div>
+
+    <div class="countdown-content">
+      <div class="countdown-title">Minutes</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-minutes"></div>
+      </div>
+    </div>
+
+    <div class="countdown-content">
+      <div class="countdown-title">Seconds</div>
+      <div class="countdown-square">
+        <div class="countdown-value" id="countdown-seconds"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="countdown-cta-container">
+    <a
+      class="countdown-cta-button"
+      target="_blank"
+      href="https://www.eventbrite.com/e/code-beam-europe-2023-in-person-tickets-416802205617?keep_tld=1"
+      >Get tickets</a
+    >
+  </div>
+  <div class="dismiss-container">
+    <div class="countdown-dismiss">
+      <svg
+        class="dismiss-icon"
+        onclick="dismissCountdown()"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path fill="#888" d="M19 13H5v-2h14v2z" />
+      </svg>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Set the target date for your conference
+  var targetDate = new Date("April 18, 2024").getTime();
+
+  // Update the countdown every second
+  var countdownInterval = setInterval(function () {
+    // Get the current date and time
+    var now = new Date().getTime();
+
+    // Calculate the time remaining
+    var timeRemaining = targetDate - now;
+
+    // Check if the countdown is complete
+    if (timeRemaining <= 0) {
+      clearInterval(countdownInterval);
+      document.getElementById("countdown").innerHTML =
+        "Conference is happening now!";
+    } else {
+      // Calculate the months, days, hours, minutes, and seconds
+      var months = Math.floor(timeRemaining / (1000 * 60 * 60 * 24 * 30));
+      var days = Math.floor(
+        (timeRemaining % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24)
+      );
+      var hours = Math.floor(
+        (timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      var minutes = Math.floor(
+        (timeRemaining % (1000 * 60 * 60)) / (1000 * 60)
+      );
+      var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
+
+      // Update the countdown elements
+      document.getElementById("countdown-months").innerHTML = months;
+      document.getElementById("countdown-days").innerHTML = days;
+      document.getElementById("countdown-hours").innerHTML = hours;
+      document.getElementById("countdown-minutes").innerHTML = minutes;
+      document.getElementById("countdown-seconds").innerHTML = seconds;
+    }
+  }, 1000);
+
+  function dismissCountdown() {
+    clearInterval(countdownInterval);
+    document.getElementById("countdown").style.display = "none";
+  }
+</script>
diff --git a/_includes/modal-after-conf-videos.html b/_includes/modal-after-conf-videos.html
diff --git a/_includes/modal-call-for-talks-link.html b/_includes/modal-call-for-talks-link.html
diff --git a/_includes/modal-newsletter.html b/_includes/modal-newsletter.html
@@ -0,0 +1,13 @@
+<h2 class="title">NEWSLETTER</h2>
+<p class="text">Subscribe to the newsletter</p>
+<div class="form-container">
+  <iframe
+    allowtransparency="true"
+    frameborder="0"
+    height="500"
+    src="https://www2.elixirconf.eu/l/23452/2020-01-20/6tlvh4"
+    style="border: 0"
+    type="text/html"
+    width="100%"
+  ></iframe>
+</div>
diff --git a/_includes/modal-waitlist.html b/_includes/modal-waitlist.html
diff --git a/_includes/modal.html b/_includes/modal.html
@@ -0,0 +1,49 @@
+<!-- The modal -->
+<div id="myModal" class="modal">
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    {% include modal-newsletter.html %}
+    <!-- {% include modal-waitlist.html %} -->
+    <!-- {% include modal-call-for-talks-link.html %} -->
+    <!-- {% include modal-after-conf-videos.html %} --> 
+    </div>
+  </div>
+</div>
+
+<script>
+  // Get the modal element
+  var modal = document.getElementById("myModal");
+
+  // Get the <span> element that closes the modal
+  var closeBtn = document.getElementsByClassName("close")[0];
+
+  // Function to open the modal
+  function openModal() {
+    modal.style.display = "block";
+  }
+
+  // Function to close the modal
+  function closeModal() {
+    modal.style.display = "none";
+  }
+
+  // Event listener to close the modal when the close button is clicked
+  closeBtn.addEventListener("click", closeModal);
+
+  // Event listener to close the modal when clicking on the backdrop
+  window.addEventListener("click", function (event) {
+    if (event.target === modal) {
+      closeModal();
+    }
+  });
+
+  // Event listener to close the modal when the "Escape" key is pressed
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+      closeModal();
+    }
+  });
+
+  // Open the modal after 4 seconds
+  setTimeout(openModal, 4000);
+</script>
diff --git a/_sass/_countdown.scss b/_sass/_countdown.scss
@@ -0,0 +1,113 @@
+.countdown-container {
+  background-color: #9ad7d8;
+  border-radius: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: "Montserrat", sans-serif;
+  padding: 14px 14px 14px 14px;
+  position: fixed;
+  max-width: 360px;
+  left: 16px;
+  right: 16px;
+  bottom: 20px;
+  z-index: 999;
+  @media only screen and (min-width: 415px) {
+    left: unset;
+  }
+  @media only screen and (min-width: 768px) {
+    align-items: center;
+    left: auto;
+    right: 16px;
+    flex-wrap: nowrap;
+    max-width: none;
+    padding: 14px 17px;
+  }
+
+  .dismiss-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+
+    @media only screen and (min-width: 768px) {
+      width: 0;
+      //   justify-content: flex-start;
+    }
+    .countdown-dismiss {
+      align-items: center;
+      display: flex;
+      background-color: white;
+      cursor: pointer;
+      justify-content: center;
+      border-radius: 50%;
+      height: 35px;
+      margin: -168px -26px 0 0;
+      padding: 8px;
+      position: absolute;
+      width: 35px;
+      @media only screen and (min-width: 768px) {
+        margin: -64px -24px 0 0;
+      }
+      .dismiss-icon {
+        height: 30px;
+      }
+    }
+  }
+  .countdown-row {
+    display: flex;
+    margin-bottom: 14px;
+    justify-content: space-between;
+    max-width: 360px;
+    width: 100%;
+    @media only screen and (min-width: 768px) {
+      margin-bottom: 0;
+      width: 299px;
+    }
+    .countdown-content {
+      width: 54px;
+
+      .countdown-title {
+        color: #020002;
+        font-size: 12px;
+        margin-bottom: 8px;
+        @media only screen and (min-width: 768px) {
+          font-weight: 600;
+          margin-bottom: 6px;
+        }
+      }
+      .countdown-square {
+        align-items: center;
+        background-color: white;
+        border-radius: 4px;
+        color: #020002;
+        display: flex;
+        height: 50px;
+        font-weight: bold;
+        justify-content: center;
+        font-size: 18px;
+      }
+    }
+  }
+
+  .countdown-cta-container {
+    width: 100%;
+    @media only screen and (min-width: 768px) {
+      width: unset;
+      padding: 20px 0 0 12px;
+    }
+    .countdown-cta-button {
+      align-items: center;
+      background: none;
+      color: #ffffff;
+      border-radius: 0.3em;
+      background-color: #e94e8b;
+      display: flex;
+      justify-content: center;
+      font-size: 1.3em;
+      font-weight: 500;
+      letter-spacing: 0.16em;
+      padding: 0.5em 2.7em;
+      text-transform: uppercase;
+      white-space: nowrap;
+    }
+  }
+}
diff --git a/_sass/modal.scss b/_sass/modal.scss
@@ -0,0 +1,42 @@
+/* Modal styles */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 999; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0, 0, 0, 0.4); /* Black with transparency */
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: #020002;
+  margin: 10% auto; /* Center vertically and horizontally */
+  padding: 20px;
+  width: 80%;
+  max-width: 500px;
+  .title {
+    color: white;
+    font-weight: bold;
+    margin-top: 10px;
+    margin-bottom: 8px;
+  }
+}
+
+.close {
+  color: #888;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
@@ -18,6 +18,8 @@
 @import "newsletter";
 @import "post";
 @import "video";
+@import "countdown";
+@import "modal";
 
 @import "_animations";
 @import "_owl-carousel";

diff --git a/index.html b/index.html
@@ -6,6 +6,10 @@
 ---
 {% include cover.html %}
 <!-- end of cover -->
+{% include countdown.html %}
+<!-- end of coundown -->
+{% include modal.html %}
+<!-- end of modal -->
 {% comment %} {% include banner-1.html %} {% endcomment %}
 <!-- end of banner-1  -->
 {% include welcome.html %}