clean

.hta_slug/google-fonts-pair-finder.php

@@ -0,0 +1,88 @@
+
+<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700"> -->
+<div class="google-fonts-container">
+    <h1 class="google-fonts-heading">Google Fonts Pair Finder</h1>
+    <label for="selectedFont" class="google-fonts-label">Select a Font:</label>
+    <select id="selectedFont" class="google-fonts-select">
+      <!-- Options will be populated dynamically -->
+    </select>
+
+    <div class="google-fonts-preview">
+      <h2>Preview:</h2>
+      <p id="previewText">The quick brown fox jumps over the lazy dog.</p>
+    </div>
+  </div>
+
+<script>
+    // Function to fetch all Google Fonts and populate dropdown
+    function fetchGoogleFonts() {
+        fetch('https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyAssce4aiUByEQGByr49fHVn3TSzdBkQQE')
+        .then(response => response.json())
+        .then(data => {
+            const fonts = data.items.map(item => item.family);
+            const fontSelect = document.getElementById('selectedFont');
+            fonts.forEach(font => {
+            const option = document.createElement('option');
+            option.value = font;
+            option.textContent = font;
+            fontSelect.appendChild(option);
+            });
+        })
+        .catch(error => console.error('Error fetching Google Fonts:', error));
+    }
+
+    // Function to update font preview
+    function updatePreview() {
+        const selectedFont = document.getElementById('selectedFont').value;
+        const previewText = document.getElementById('previewText');
+        previewText.style.fontFamily = selectedFont;
+    }
+
+    // Add event listener to font dropdown
+    document.getElementById('selectedFont').addEventListener('change', updatePreview);
+
+    // Call function to fetch and populate Google Fonts
+    fetchGoogleFonts();
+
+    // Initial call to update preview
+    updatePreview();
+</script>
+<style>
+  .google-fonts-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #3d3d3d;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-top: 30px;
+  }
+
+  .google-fonts-heading {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .google-fonts-select {
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    padding: 8px;
+    width: 100%;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #3d3d3d;
+  }
+
+  .google-fonts-preview {
+    font-family: 'Roboto', sans-serif;
+    font-size: 25px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #3d3d3d;
+  }
+</style>