Move styling and logic to appropriate files

files/templates/lottery_modal.html

@@ -1,122 +1,3 @@
-<style>
-  .lottery-modal--dialog {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .lottery-modal--content {
-    max-width: 850px;
-  }
-
-  .lottery-modal--close {
-    position: absolute;
-    top: 4px;
-    right: 12px;
-    z-index: 10;
-  }
-
-  .lottery-modal--wrapper {
-    display: flex;
-    align-items: center;
-    padding: 2rem;
-  }
-
-  .lottery-modal--wrapper > div {
-    height: 400px;
-  }
-
-  .lottery-modal--image {
-    width: 400px;
-    height: 400px;
-    position: relative;
-  }
-
-  .lottery-modal--image > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 400px;
-    height: 400px;
-  }
-
-  @media screen and (max-width: 1530px) {
-    .lottery-modal--wrapper > div {
-      height: 300px;
-    }
-
-    .lottery-modal--image {
-      width: 300px;
-      height: 300px;
-    }
-
-    .lottery-modal--image > img {
-      width: 300px;
-      height: 300px;
-    }
-  }
-
-  .lottery-modal--action {
-    border-width: 2px;
-    font-size: 1.4rem;
-  }
-
-  .lottery-modal--stats {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: space-between;
-    flex: 1;
-    margin-left: 2rem;
-  }
-
-  .lottery-modal--stat {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #32383e;
-    border: 1px solid #fff;
-    border-radius: 8px;
-    padding: 1rem;
-  }
-
-  .lottery-modal--stat-keys {
-    color: #ffb2d4;
-    font-variant: small-caps;
-    font-weight: 400;
-    margin-right: 2rem;
-  }
-
-  .lottery-modal--stat-values {
-    text-align: right;
-  }
-
-  @media screen and (max-width: 1330px) {
-    .lottery-modal--content {
-      width: 400px;
-    }
-
-    .lottery-modal--wrapper {
-      flex-direction: column;
-    }
-
-    .lottery-modal--image {
-      margin-bottom: 1rem;
-    }
-
-    .lottery-modal--stats {
-      margin-left: 0;
-      width: 300px;
-      flex-direction: column-reverse;
-    }
-
-    .lottery-modal--stat,
-    .lottery-modal--action {
-      margin-bottom: 1rem;
-    }
-  }
-</style>
-
 <div
   class="modal fade"
   id="lotteryModal"
@@ -198,13 +79,4 @@
   </div>
 </div>
 
-<script>
-  document.getElementById("purchaseTicket").addEventListener("click", () => {
-    // Show ticket being pulled.
-    document.getElementById("lotteryTicketPulled").style.display = "block";
-
-    setTimeout(() => {
-      document.getElementById("lotteryTicketPulled").style.display = "none";
-    }, 1600);
-  });
-</script>
+<script src="/assets/js/lottery_modal.js?v=249" data-cfasync="false"></script>