Spaces:

eienmojiki
/

quote-image-gen

Running

App Files Files Community

eienmojiki commited on Dec 10, 2024

Commit

fbcf5d4

·

verified ·

1 Parent(s): eaac59e

Upload 21 files

Files changed (21) hide show

fonts/Oswald-Bold.ttf +0 -0
fonts/Oswald-ExtraLight.ttf +0 -0
fonts/Oswald-Light.ttf +0 -0
fonts/Oswald-Medium.ttf +0 -0
fonts/Oswald-Regular.ttf +0 -0
fonts/Oswald-SemiBold.ttf +0 -0
fonts/PlayfairDisplay-Black.ttf +0 -0
fonts/PlayfairDisplay-BlackItalic.ttf +0 -0
fonts/PlayfairDisplay-Bold.ttf +0 -0
fonts/PlayfairDisplay-BoldItalic.ttf +0 -0
fonts/PlayfairDisplay-ExtraBold.ttf +0 -0
fonts/PlayfairDisplay-ExtraBoldItalic.ttf +0 -0
fonts/PlayfairDisplay-Italic.ttf +0 -0
fonts/PlayfairDisplay-Medium.ttf +0 -0
fonts/PlayfairDisplay-MediumItalic.ttf +0 -0
fonts/PlayfairDisplay-Regular.ttf +0 -0
fonts/PlayfairDisplay-SemiBold.ttf +0 -0
fonts/PlayfairDisplay-SemiBoldItalic.ttf +0 -0
public/index.html +162 -0
public/script.js +284 -0
public/style.css +489 -0

fonts/Oswald-Bold.ttf ADDED Viewed

Binary file (87.6 kB). View file

fonts/Oswald-ExtraLight.ttf ADDED Viewed

Binary file (87.2 kB). View file

fonts/Oswald-Light.ttf ADDED Viewed

Binary file (87.5 kB). View file

fonts/Oswald-Medium.ttf ADDED Viewed

Binary file (87.6 kB). View file

fonts/Oswald-Regular.ttf ADDED Viewed

Binary file (87.3 kB). View file

fonts/Oswald-SemiBold.ttf ADDED Viewed

Binary file (87.6 kB). View file

fonts/PlayfairDisplay-Black.ttf ADDED Viewed

Binary file (194 kB). View file

fonts/PlayfairDisplay-BlackItalic.ttf ADDED Viewed

Binary file (178 kB). View file

fonts/PlayfairDisplay-Bold.ttf ADDED Viewed

Binary file (194 kB). View file

fonts/PlayfairDisplay-BoldItalic.ttf ADDED Viewed

Binary file (178 kB). View file

fonts/PlayfairDisplay-ExtraBold.ttf ADDED Viewed

Binary file (194 kB). View file

fonts/PlayfairDisplay-ExtraBoldItalic.ttf ADDED Viewed

Binary file (178 kB). View file

fonts/PlayfairDisplay-Italic.ttf ADDED Viewed

Binary file (178 kB). View file

fonts/PlayfairDisplay-Medium.ttf ADDED Viewed

Binary file (194 kB). View file

fonts/PlayfairDisplay-MediumItalic.ttf ADDED Viewed

Binary file (178 kB). View file

fonts/PlayfairDisplay-Regular.ttf ADDED Viewed

Binary file (193 kB). View file

fonts/PlayfairDisplay-SemiBold.ttf ADDED Viewed

Binary file (194 kB). View file

fonts/PlayfairDisplay-SemiBoldItalic.ttf ADDED Viewed

Binary file (179 kB). View file

public/index.html ADDED Viewed

	@@ -0,0 +1,162 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quote Image Generator</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
+      🌙
+    </button>
+    <div class="container">
+      <div class="panel">
+        <h2>Quote Generator</h2>
+        <div class="form-group">
+          <label>Quote Text</label>
+          <textarea id="quoteText">
+The only way to do great work is to love what you do.</textarea
+          >
+        </div>
+        <div class="form-group">
+          <label>Author</label>
+          <input type="text" id="author" value="Steve Jobs" />
+        </div>
+        <div class="color-grid">
+          <div class="form-group color-picker">
+            <label>Background Color</label>
+            <div class="color-input-wrapper">
+              <input type="color" id="bgColor" value="#ffffff" />
+              <input
+                type="text"
+                id="bgColorText"
+                value="#ffffff"
+                class="color-text"
+              />
+            </div>
+          </div>
+          <div class="form-group color-picker">
+            <label>Bar & Quote Mark Color</label>
+            <div class="color-input-wrapper">
+              <input type="color" id="barColor" value="#4f46e5" />
+              <input
+                type="text"
+                id="barColorText"
+                value="#4f46e5"
+                class="color-text"
+              />
+            </div>
+          </div>
+          <div class="form-group color-picker">
+            <label>Quote Text Color</label>
+            <div class="color-input-wrapper">
+              <input type="color" id="textColor" value="#1e293b" />
+              <input
+                type="text"
+                id="textColorText"
+                value="#1e293b"
+                class="color-text"
+              />
+            </div>
+          </div>
+          <div class="form-group color-picker">
+            <label>Author Color</label>
+            <div class="color-input-wrapper">
+              <input type="color" id="authorColor" value="#64748b" />
+              <input
+                type="text"
+                id="authorColorText"
+                value="#64748b"
+                class="color-text"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="font-section">
+          <div class="form-group font-controls">
+            <label>Quote Font Style</label>
+            <div class="font-selectors">
+              <select id="quoteFontFamily" class="font-select">
+                <option value="">Loading fonts...</option>
+              </select>
+              <select id="quoteFontStyle" class="font-select">
+                <option value="normal">Normal</option>
+              </select>
+            </div>
+          </div>
+          <div class="form-group font-controls">
+            <label>Author Font Style</label>
+            <div class="font-selectors">
+              <select id="authorFontFamily" class="font-select">
+                <option value="">Loading fonts...</option>
+              </select>
+              <select id="authorFontStyle" class="font-select">
+                <option value="normal">Normal</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <label>Bar Width <span id="barWidthValue">4px</span></label>
+          <input
+            type="range"
+            id="barWidth"
+            min="2"
+            max="10"
+            value="4"
+            class="slider"
+            oninput="document.getElementById('barWidthValue').textContent = this.value + 'px'"
+          />
+        </div>
+        <div class="btn-group">
+          <button class="btn btn-primary" onclick="generateQuote()">
+            <span class="btn-text">Generate</span>
+            <div class="btn-loader"></div>
+          </button>
+          <button class="btn btn-success" onclick="downloadQuote()">
+            Download
+          </button>
+          <button class="btn btn-secondary" onclick="viewRequests()">
+            View Requests
+          </button>
+        </div>
+      </div>
+      <div class="panel">
+        <h2>Preview</h2>
+        <div id="preview-container">
+          <img id="quoteImage" alt="Generated Quote" />
+          <div id="loading" class="loading">
+            <div class="loading-content">
+              <div class="loading-spinner"></div>
+              <span>Generating quote...</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="requestsModal" class="modal">
+      <div class="modal-content">
+        <span class="close-btn" onclick="closeModal()">&times;</span>
+        <h2>Request History</h2>
+        <div id="requestsList" class="requests-list"></div>
+      </div>
+    </div>
+    <div id="status"></div>
+    <script src="script.js"></script>
+  </body>
+</html>

public/script.js ADDED Viewed

	@@ -0,0 +1,284 @@

+let isDarkMode = false;
+let fontData = [];
+// Load available fonts when page loads
+async function loadAvailableFonts() {
+  try {
+    const response = await fetch("/api/fonts");
+    fontData = await response.json();
+    // Populate both quote and author font family selects
+    const quoteFontFamily = document.getElementById("quoteFontFamily");
+    const authorFontFamily = document.getElementById("authorFontFamily");
+    const fontOptions = fontData
+      .map((font) => `<option value="${font.family}">${font.family}</option>`)
+      .join("");
+    quoteFontFamily.innerHTML = fontOptions;
+    authorFontFamily.innerHTML = fontOptions;
+    // Initialize variations for both
+    if (fontData.length > 0) {
+      updateFontVariations("quote", fontData[0].family);
+      updateFontVariations("author", fontData[0].family);
+      generateQuote();
+    }
+  } catch (error) {
+    console.error("Error loading fonts:", error);
+    showStatus("Error loading fonts", "error");
+  }
+}
+// Update font variations based on selected font family
+function updateFontVariations(type, family) {
+  const font = fontData.find((f) => f.family === family);
+  if (!font) return;
+  const styleSelect = document.getElementById(`${type}FontStyle`);
+  // Get unique styles
+  const styles = new Set(font.variations.map((v) => v.style));
+  // Update style options
+  styleSelect.innerHTML = Array.from(styles)
+    .map(
+      (style) => `<option value="${style}">${formatFontStyle(style)}</option>`
+    )
+    .join("");
+}
+// Format font weight for display
+function formatFontWeight(weight) {
+  switch (weight) {
+    case "normal":
+      return "Regular";
+    case "bold":
+      return "Bold";
+    case "light":
+      return "Light";
+    case "medium":
+      return "Medium";
+    default:
+      return weight.charAt(0).toUpperCase() + weight.slice(1);
+  }
+}
+// Format font style for display
+function formatFontStyle(style) {
+  switch (style) {
+    case "normal":
+      return "Normal";
+    case "italic":
+      return "Italic";
+    default:
+      return style.charAt(0).toUpperCase() + style.slice(1);
+  }
+}
+// Setup color pickers with hex input sync
+function setupColorPickers() {
+  const colorInputs = document.querySelectorAll('input[type="color"]');
+  colorInputs.forEach((input) => {
+    const textInput = document.getElementById(input.id + "Text");
+    // Update text input when color changes
+    input.addEventListener("input", () => {
+      textInput.value = input.value.toUpperCase();
+    });
+    // Update color input when valid hex is entered
+    textInput.addEventListener("input", () => {
+      let hex = textInput.value.trim();
+      if (!hex.startsWith("#")) {
+        hex = "#" + hex;
+      }
+      if (/^#[0-9A-F]{6}$/i.test(hex)) {
+        input.value = hex;
+      }
+    });
+    // Format hex on blur
+    textInput.addEventListener("blur", () => {
+      let hex = textInput.value.trim();
+      if (!hex.startsWith("#")) {
+        hex = "#" + hex;
+      }
+      if (/^#[0-9A-F]{6}$/i.test(hex)) {
+        textInput.value = hex.toUpperCase();
+        input.value = hex;
+      } else {
+        textInput.value = input.value.toUpperCase();
+      }
+    });
+  });
+}
+async function generateQuote() {
+  const generateBtn = document.querySelector(".btn-primary");
+  const btnText = generateBtn.querySelector(".btn-text");
+  const btnLoader = generateBtn.querySelector(".btn-loader");
+  try {
+    // Show loading state
+    generateBtn.disabled = true;
+    btnText.style.opacity = "0";
+    btnLoader.style.display = "block";
+    document.getElementById("loading").style.display = "flex";
+    document.getElementById("quoteImage").style.opacity = "0.5";
+    const data = {
+      text: document.getElementById("quoteText").value,
+      author: document.getElementById("author").value,
+      bgColor: document.getElementById("bgColor").value,
+      barColor: document.getElementById("barColor").value,
+      textColor: document.getElementById("textColor").value,
+      authorColor: document.getElementById("authorColor").value,
+      quoteFontFamily: document.getElementById("quoteFontFamily").value,
+      quoteFontWeight: "bold", // Force bold for quote
+      quoteFontStyle: document.getElementById("quoteFontStyle").value,
+      authorFontFamily: document.getElementById("authorFontFamily").value,
+      authorFontWeight: "normal", // Force normal for author
+      authorFontStyle: document.getElementById("authorFontStyle").value,
+      barWidth: parseInt(document.getElementById("barWidth").value),
+    };
+    const response = await fetch("/api/generate-quote", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+    const result = await response.json();
+    if (result.success) {
+      const img = document.getElementById("quoteImage");
+      img.src = result.imageUrl;
+      img.style.opacity = "1";
+      showStatus("Quote generated successfully!", "success");
+    } else {
+      throw new Error(result.error);
+    }
+  } catch (error) {
+    showStatus(error.message || "Error generating quote", "error");
+    console.error(error);
+  } finally {
+    // Reset loading state
+    generateBtn.disabled = false;
+    btnText.style.opacity = "1";
+    btnLoader.style.display = "none";
+    document.getElementById("loading").style.display = "none";
+  }
+}
+function downloadQuote() {
+  const img = document.getElementById("quoteImage");
+  if (!img.src || img.src === window.location.href) {
+    showStatus("Generate a quote first!", "error");
+    return;
+  }
+  const link = document.createElement("a");
+  const timestamp = new Date().toISOString().split("T")[0];
+  link.download = `quote-${timestamp}.png`;
+  link.href = img.src;
+  link.click();
+}
+async function viewRequests() {
+  try {
+    const response = await fetch("/api/requests-history");
+    const requests = await response.json();
+    const requestsList = document.getElementById("requestsList");
+    requestsList.innerHTML = requests
+      .map(
+        (req) => `
+            <div class="request-item">
+                <div class="request-time">${new Date(
+                  req.timestamp
+                ).toLocaleString()}</div>
+                <pre class="request-data">${JSON.stringify(
+                  req.request,
+                  null,
+                  2
+                )}</pre>
+            </div>
+        `
+      )
+      .join("");
+    document.getElementById("requestsModal").style.display = "block";
+  } catch (error) {
+    showStatus("Error fetching requests", "error");
+    console.error(error);
+  }
+}
+function closeModal() {
+  document.getElementById("requestsModal").style.display = "none";
+}
+function toggleTheme() {
+  isDarkMode = !isDarkMode;
+  document.documentElement.setAttribute(
+    "data-theme",
+    isDarkMode ? "dark" : "light"
+  );
+  document.querySelector(".theme-toggle").textContent = isDarkMode
+    ? "☀️"
+    : "🌙";
+}
+function showStatus(message, type) {
+  const status = document.getElementById("status");
+  status.textContent = message;
+  status.style.color = type === "success" ? "var(--success)" : "#ef4444";
+  status.style.display = "block";
+  setTimeout(() => {
+    status.style.display = "none";
+  }, 3000);
+}
+// Event Listeners
+document.addEventListener("DOMContentLoaded", () => {
+  loadAvailableFonts();
+  setupColorPickers();
+  // Font family change listeners
+  document.getElementById("quoteFontFamily").addEventListener("change", (e) => {
+    updateFontVariations("quote", e.target.value);
+  });
+  document
+    .getElementById("authorFontFamily")
+    .addEventListener("change", (e) => {
+      updateFontVariations("author", e.target.value);
+    });
+  // Check system theme preference
+  if (
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  ) {
+    toggleTheme();
+  }
+  // Setup bar width value display
+  const barWidthSlider = document.getElementById("barWidth");
+  const barWidthValue = document.getElementById("barWidthValue");
+  barWidthSlider.addEventListener("input", () => {
+    barWidthValue.textContent = `${barWidthSlider.value}px`;
+  });
+});
+// Close modal when clicking outside
+window.onclick = function (event) {
+  const modal = document.getElementById("requestsModal");
+  if (event.target === modal) {
+    closeModal();
+  }
+};

public/style.css ADDED Viewed

	@@ -0,0 +1,489 @@

+:root {
+  --primary: #4f46e5;
+  --success: #10b981;
+  --secondary: #64748b;
+  --bg: #f8fafc;
+  --text: #1e293b;
+  --panel-bg: #ffffff;
+  --border: #e2e8f0;
+}
+[data-theme="dark"] {
+  --primary: #818cf8;
+  --success: #34d399;
+  --secondary: #94a3b8;
+  --bg: #0f172a;
+  --text: #e2e8f0;
+  --panel-bg: #1e293b;
+  --border: #334155;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+body {
+  background: var(--bg);
+  min-height: 100vh;
+  padding: 2rem;
+  color: var(--text);
+  transition: background-color 0.3s, color 0.3s;
+}
+.theme-toggle {
+  position: fixed;
+  top: 2rem;
+  right: 2rem;
+  background: var(--panel-bg);
+  border: 1px solid var(--border);
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  z-index: 100;
+}
+.theme-toggle:hover {
+  transform: scale(1.1);
+}
+.container {
+  max-width: 1400px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 2rem;
+}
+.panel {
+  background: var(--panel-bg);
+  padding: 2rem;
+  border-radius: 1rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s;
+}
+h2 {
+  color: var(--text);
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
+}
+.form-group {
+  margin-bottom: 1.25rem;
+}
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--text);
+}
+input,
+textarea,
+select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  font-size: 0.95rem;
+  background: var(--panel-bg);
+  color: var(--text);
+  transition: all 0.15s;
+}
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+textarea {
+  height: 120px;
+  resize: vertical;
+  line-height: 1.5;
+}
+/* Font section styling */
+.font-section {
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  background: var(--bg);
+}
+.font-controls {
+  margin-bottom: 1.25rem;
+}
+.font-controls:last-child {
+  margin-bottom: 0;
+}
+.font-selectors {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 0.75rem;
+}
+.font-select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1em;
+  padding-right: 2.5rem;
+}
+.font-select::-ms-expand {
+  display: none;
+}
+/* Color picker styling */
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.color-picker {
+  position: relative;
+}
+.color-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+input[type="color"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 1px var(--border);
+}
+input[type="color"]::-moz-color-swatch {
+  border: none;
+  border-radius: 0.5rem;
+  box-shadow: inset 0 0 0 1px var(--border);
+}
+.color-text {
+  flex: 1;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  font-family: monospace;
+  font-size: 0.95rem;
+  text-transform: uppercase;
+}
+/* Slider styling */
+.slider {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--border);
+  outline: none;
+  margin-top: 0.5rem;
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+.slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+.slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+  border: none;
+  transition: transform 0.2s;
+}
+.slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+/* Button styling */
+.btn-group {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 120px;
+  justify-content: center;
+}
+.btn:hover {
+  transform: translateY(-2px);
+}
+.btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+.btn-primary {
+  background: var(--primary);
+  color: white;
+}
+.btn-success {
+  background: var(--success);
+  color: white;
+}
+.btn-secondary {
+  background: var(--secondary);
+  color: white;
+}
+/* Preview container */
+#preview-container {
+  width: 100%;
+  aspect-ratio: 16/9;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  background: var(--panel-bg);
+  position: relative;
+}
+#quoteImage {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: opacity 0.3s ease;
+}
+/* Loading states */
+.loading {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  border-radius: 0.75rem;
+}
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  color: white;
+}
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: white;
+  animation: spin 1s linear infinite;
+}
+.btn-loader {
+  display: none;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Modal styling */
+.modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+}
+.modal-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--panel-bg);
+  padding: 2rem;
+  border-radius: 1rem;
+  max-width: 600px;
+  width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+.close-btn {
+  position: absolute;
+  right: 1.5rem;
+  top: 1.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  color: var(--text);
+}
+.close-btn:hover {
+  opacity: 1;
+}
+/* Request history styling */
+.requests-list {
+  margin-top: 1rem;
+}
+.request-item {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+.request-time {
+  font-size: 0.875rem;
+  color: var(--secondary);
+  margin-bottom: 0.5rem;
+}
+.request-data {
+  font-family: monospace;
+  font-size: 0.875rem;
+  white-space: pre-wrap;
+  overflow-x: auto;
+  color: var(--text);
+}
+/* Status message */
+#status {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  padding: 1rem 1.5rem;
+  border-radius: 0.5rem;
+  background: var(--panel-bg);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  display: none;
+  animation: slideIn 0.3s ease-out;
+  z-index: 100;
+}
+@keyframes slideIn {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+/* Responsive design */
+@media (max-width: 768px) {
+  body {
+    padding: 1rem;
+  }
+  .container {
+    grid-template-columns: 1fr;
+  }
+  .color-grid {
+    grid-template-columns: 1fr;
+  }
+  .font-selectors {
+    grid-template-columns: 1fr;
+  }
+  .btn-group {
+    flex-direction: column;
+  }
+  .btn {
+    width: 100%;
+  }
+  .theme-toggle {
+    top: 1rem;
+    right: 1rem;
+  }
+  .modal-content {
+    width: calc(100% - 2rem);
+    margin: 1rem;
+  }
+}