examples: add init modal

examples/demo/index.html

@@ -30,6 +30,16 @@ <h1>teler-waf tester</h1>
 </header>
 
 <main id="app" role="main">
+  <div class="popup" id="init">
+    <div class="popup-inner" id="popup-inner">
+      <div class="popup__text">
+        <h1>What is this?</h1>
+        <p>This page serves as a demonstration of the <a href="https://github.com/kitabisa/teler-waf" target="_blank">teler-waf</a> package implementation, which is configured with default settings to test the resilience of web applications against common web attack threats.</p>
+        <p>If you are able to successfully execute attacks such as cross-site scripting (XSS) and trigger an alert, kindly report it to us via the <a href="https://github.com/kitabisa/teler-waf/security/advisories/new" target="_blank">vulnerability report form</a> under its GitHub repository or reach us through the <a href="https://security.kitabisa.com/#official-channels" target="_blank">official channels</a> specified on our <a href="https://security.kitabisa.com/" target="_blank">security policy page</a>.</p>
+      </div>
+      <a class="popup__close" href="#">X</a>
+    </div>
+  </div>
   <form method="GET">
     <fieldset class="form-item">
       <legend>GET</legend>
@@ -54,6 +64,7 @@ <h1>teler-waf tester</h1>
     <input type="text" value="{{.Body}}" placeholder="body" style="width: 49%;">
   </div>
 </main>
-<img src="https://user-images.githubusercontent.com/25837540/212849713-c9c73940-cc0e-4da0-a34e-c97ba479cfcd.png" class="teler">
+<a href="#init"><img src="https://user-images.githubusercontent.com/25837540/212849713-c9c73940-cc0e-4da0-a34e-c97ba479cfcd.png" class="teler"></a>
+<script src="/static/script.js" defer=""></script>
 </body>
 </html>

examples/demo/static/script.js

@@ -0,0 +1,29 @@
+function getCookie(name) {
+  var cookieArr = document.cookie.split(";");
+
+  for(var i = 0; i < cookieArr.length; i++) {
+    var cookiePair = cookieArr[i].split("=");
+    if(name == cookiePair[0].trim()) {
+      return decodeURIComponent(cookiePair[1]);
+    }
+  }
+
+  return undefined;
+}
+
+function setCookie(name, value, expirationDays) {
+  var date = new Date();
+  date.setTime(date.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
+  var expires = "expires=" + date.toUTCString();
+  document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/";
+}
+
+var init = document.getElementById("init")
+
+window.addEventListener("DOMContentLoaded", function() {
+  popup = getCookie("popup") || 0;
+  if (popup != 1) {
+    window.location.replace("#init")
+    setCookie("popup", 1, 1)
+  }
+})

examples/demo/static/style.css

@@ -196,3 +196,79 @@ main[role=main] {
     width: 80%;
   }
 }
+
+/** Pop-up */
+.popup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 2;
+  visibility: hidden;
+  opacity: 0;
+  overflow: hiden;
+  transition: 0.64s ease-in-out;
+}
+.popup-inner {
+  position: relative;
+  bottom: -100vw;
+  right: -100vh;
+  display: flex;
+  align-items: center;
+  max-width: 800px;
+  max-height: 600px;
+  width: 100%;
+  background-color: #fff;
+  transform: rotate(32deg);
+  transition: 0.64s ease-in-out;
+}
+.popup__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 2rem;
+}
+.popup__text h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 2rem;
+  text-transform: uppercase;
+  color: #0A0A0A;
+}
+.popup__text p {
+  color: #434343;
+  line-height: 1.5;
+}
+.popup:target {
+  visibility: visible;
+  opacity: 1;
+}
+.popup:target .popup-inner {
+  bottom: 0;
+  right: 0;
+  transform: rotate(0);
+}
+.popup__close {
+  position: absolute;
+  right: -1rem;
+  top: -1rem;
+  width: 3rem;
+  height: 3rem;
+  font-size: 0.875rem;
+  font-weight: 300;
+  border-radius: 100%;
+  background-color: #0A0A0A;
+  z-index: 4;
+  color: #fff;
+  line-height: 3rem;
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+}