Use bootstrap classes instead of custom css

build.sh

@@ -7,7 +7,6 @@ rm -rf dist
 mkdir dist
 php src/index.php | minify --type html -o dist/index.html
 minify -o dist/default.css src/default.css
-minify -o dist/index.css src/index.css
 minify -o dist/index.js src/index.js
 
 # Copy other assets

src/index.js

@@ -152,7 +152,9 @@ function loadFormFromLocalStorage() {
   const data = JSON.parse(localStorage.getItem("form"));
   if (data) {
     Object.keys(data).forEach((key) => {
-      let input = document.querySelector(`input[name="${key}"]`);
+      let input = document.querySelector(
+        `input[name="${key}"], select[name="${key}"]`
+      );
 
       // If the input is hidden, continue
       if (input && input.type === "hidden") {
@@ -208,10 +210,6 @@ form.addEventListener("submit", (e) => {
   form.submit();
 });
 
-document.addEventListener("DOMContentLoaded", () => {
-  loadFormFromLocalStorage();
-});
-
 let urlInputs = document.querySelectorAll('input[type="url"]');
 urlInputs.forEach((input) => {
   input.addEventListener("blur", (event) => {
@@ -241,23 +239,12 @@ var formData = document.getElementById("form");
 var theme = document.getElementById("theme");
 
 // Real time variables
-var preview = false;
 var photo = "";
-const styleElement = document.createElement("style");
 
 // Preview Button functionality
 previewButton.addEventListener("click", () => {
-  preview = !preview;
-  if (preview) {
-    // previewBlock.style.display = 'block';
-    previewBlock.style.right = "0";
-    previewButton.style.filter = "invert(1)";
-    UpdatePreview();
-  } else {
-    // previewBlock.style.display = 'none';
-    previewBlock.style.right = "-100%";
-    previewButton.style.filter = "invert(0)";
-  }
+  previewBlock.classList.toggle("show");
+  previewButton.classList.toggle("active");
 });
 
 // Update Preview Photo On Input
@@ -344,8 +331,7 @@ function UpdatePreview() {
 
     // Create iframe to include in previewBlock
     const preview_iframe = document.createElement("iframe");
-    preview_iframe.style.width = "100%";
-    preview_iframe.style.height = "100%";
+    preview_iframe.classList.add("w-100", "h-100");
     preview_iframe.srcdoc = previewHTMLCode;
     preview_iframe.id = "preview_iframe";
 
@@ -388,3 +374,12 @@ formData["url"].addEventListener("input", UpdatePreview);
 formData["description"].addEventListener("input", UpdatePreview);
 formData["email"].addEventListener("input", UpdatePreview);
 theme.addEventListener("input", UpdatePreview);
+
+/*****************************************************/
+/******************** Run on Load ********************/
+/*****************************************************/
+
+document.addEventListener("DOMContentLoaded", () => {
+  loadFormFromLocalStorage();
+  UpdatePreview();
+});

src/index.php

@@ -61,7 +61,6 @@
   <meta name="twitter:image" content='https://opengraph.githubassets.com/<?= hash("sha256", date("Y-m-d H:i:s T")) ?>/chriskthomas/linkfree-generator'>
 
   <title>LinkFree Generator</title>
-  <link rel="stylesheet" href="index.css">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 
@@ -179,14 +178,14 @@
     </div>
   </footer>
 
-  <button id="previewButton" aria-label="Preview">
-    <ion-icon name="eye"></ion-icon>
+  <button id="previewButton" class="btn btn-info btn-lg position-fixed bottom-0 end-0 d-flex align-items-center gap-1 z-2 m-3">
+    <ion-icon name="eye"></ion-icon> Preview
   </button>
-  <div id="previewBlock"></div>
+  <div id="previewBlock" class="offcanvas offcanvas-end z-1"></div>
   <script src="./index.js"></script>
 
   <script type="module" src="<?= $ionicons_source ?>/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="<?= $ionicons_source ?>/dist/ionicons/ionicons.js"></script>
 </body>
 
-</html>
+</html>