Merge pull request #10 from sojijr/font-selector

feat(font): add font selector to threadimage

Author: sojijr

assets/css/styles.css

@@ -215,9 +215,13 @@ footer a {
     display: block;
 }
 
-.expand-content p {
-    color: #fff;
-    margin: 10px 0;
+#fontSelector {
+    width: 100%;
+    padding: 5px;
+    margin-top: -150px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 85px;
 }
 
 .loading-spinner {
@@ -309,6 +313,7 @@ a.link-preview-box strong {
 
     .container {
         width: 90%;
+        transition: height 0.5s ease;
     }
 
     .github-link {
@@ -363,6 +368,28 @@ a.link-preview-box strong {
         font-size: 21px;
     }
 
+    .expanded {
+        height: 700px;
+        transition: height 2s ease;
+    }
+    
+    .expanded-content {
+        display: flex;
+        max-height: 700px;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    label {
+        margin-bottom: 5px;
+    }
+
+    #colorPicker,
+    #fontSelector {
+        width: 100%;
+        margin-right: 0;
+    }
+
     footer {
         font-size: 13px;
     }

assets/js/script.js

@@ -25,6 +25,12 @@ document.addEventListener("DOMContentLoaded", function () {
         resultBox.style.backgroundColor = selectedColor;
     });
 
+    //font picker
+    fontSelector.addEventListener("change", function () {
+        const selectedFont = fontSelector.value;
+        resultBox.style.fontFamily = selectedFont;
+    });
+
     form.addEventListener("submit", function (event) {
         event.preventDefault(); // Prevent form submission
 

index.php

@@ -18,6 +18,10 @@
     <title>Threadimage: Threads to Images</title>
     <link rel="icon" href="assets/images/favicon.png" type="image/x-icon">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="assets/css/styles.css" rel="stylesheet" type="text/css">
 </head>
@@ -44,6 +48,16 @@ class="github-icon">
         <div class="expand-content">
             <label for="colorPicker">Select Color:</label>
             <input type="color" id="colorPicker" name="colorPicker" value="#000000">
+            <label for="fontSelector">Select Font:</label>
+            <select id="fontSelector" name="fontSelector">
+                <option value="Poppins, sans-serif">Poppins</option>
+                <option value="Pacifico, cursive">Pacifico</option>
+                <option value="Fugaz One, sans-serif">Fugaz One</option>
+                <option value="Georgia, serif">Georgia</option>
+                <option value="Courier New, monospace">Courier New</option>
+                <option value="Dancing Script, cursive">Dancing Script</option>
+                <option value="Sansita Swashed, sans-serif">Sansita</option>
+            </select>
         </div>
     </div>