Build a modern, minimalistic website that acts as a directory for AI-generated image prompt components and their corresponding output images.

🧱 Style
Aesthetic: raw, cold, futuristic precision — think clean geometry, sharp edges, subtle lighting, and mechanical depth.
Color scheme: monochrome base palette (grays, white, and pure black) with optional dark/light mode toggle.
Typography: Geist font, large headings, tight line spacing, crisp contrast.
Visual motifs: subtle dots, lines, and grid overlays reminiscent of blueprints or schematics.
Layout: layered sections with slight shadows and parallax depth.
Animation: smooth, minimal micro-interactions — fades, slides, button hovers.
Art elements: optional ASCII-style dividers or corner markers for a raw computational vibe.
Responsiveness: fully adaptive for desktop and mobile while maintaining structural clarity.
⚙️ Function
The site reads entries from a CSV file with columns:
prompt: text describing the AI image component.
image: direct URL to the corresponding image.
tags: comma-separated list of keywords in brackets.
Each CSV row is rendered as a directory card:
Displays the image preview, the prompt text, and associated tags.
Includes a “Copy Prompt” button that copies the full prompt to the clipboard.
Option to reload or update the directory dynamically if the CSV changes.
Clean component structure (e.g., Card, Tag, SearchBar, FilterPanel).
🧭 UX / Interactivity
Interface focused on discoverability and speed:
Centralized directory grid with infinite scroll or lazy loading.
Search bar: filter entries by tag or keyword in real-time.
Tag filter chips: toggle tags to refine visible results.
Hover on images to reveal prompt text overlay.
Clear visual hierarchy: directory content is primary; UI chrome is secondary.
No unnecessary decoration — every element serves navigation, clarity, or functionality. ADD DEMO DATA IN PLACE OF THE CSV I WILL ADD THAT LATER THIS IS FOR PROOF OF CONCEPT

README.md

@@ -1,10 +1,13 @@
 ---
-title: Promptforge
-emoji: 📚
-colorFrom: indigo
-colorTo: yellow
+title: PromptForge 🏗️
+colorFrom: yellow
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,92 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-top: 4rem;
+        }
+        
+        footer {
+          background: rgba(255, 255, 255, 0.8);
+          backdrop-filter: blur(10px);
+          border-top: 1px solid rgba(0, 0, 0, 0.05);
+          padding: 2rem 0;
+        }
+        
+        .dark footer {
+          background: rgba(15, 15, 15, 0.8);
+          border-top: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+        
+        .footer-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 1.5rem;
+        }
+        
+        .ascii-divider {
+          font-family: monospace;
+          letter-spacing: -0.2em;
+          opacity: 0.3;
+        }
+        
+        .footer-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        
+        .footer-links a {
+          color: #6b7280;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        
+        .dark .footer-links a {
+          color: #9ca3af;
+        }
+        
+        .footer-links a:hover {
+          color: #111827;
+        }
+        
+        .dark .footer-links a:hover {
+          color: #f9fafb;
+        }
+        
+        .copyright {
+          color: #9ca3af;
+          font-size: 0.875rem;
+        }
+        
+        .dark .copyright {
+          color: #6b7280;
+        }
+      </style>
+      <footer>
+        <div class="container">
+          <div class="footer-content">
+            <div class="ascii-divider">+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</div>
+            <div class="footer-links">
+              <a href="#">Terms</a>
+              <a href="#">Privacy</a>
+              <a href="#">Contact</a>
+              <a href="#">GitHub</a>
+            </div>
+            <div class="copyright">© 2023 PromptForge. All rights reserved.</div>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/header.js

@@ -0,0 +1,109 @@
+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        
+        header {
+          background: rgba(255, 255, 255, 0.8);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+          padding: 1rem 0;
+        }
+        
+        .dark header {
+          background: rgba(15, 15, 15, 0.8);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        
+        .logo {
+          font-size: 1.5rem;
+          font-weight: 700;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        
+        nav ul {
+          display: flex;
+          list-style: none;
+          gap: 1.5rem;
+        }
+        
+        nav a {
+          text-decoration: none;
+          color: #6b7280;
+          font-weight: 500;
+          transition: color 0.2s;
+          position: relative;
+        }
+        
+        .dark nav a {
+          color: #9ca3af;
+        }
+        
+        nav a:hover {
+          color: #111827;
+        }
+        
+        .dark nav a:hover {
+          color: #f9fafb;
+        }
+        
+        nav a::after {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: #111827;
+          transition: width 0.3s;
+        }
+        
+        .dark nav a::after {
+          background: #f9fafb;
+        }
+        
+        nav a:hover::after {
+          width: 100%;
+        }
+        
+        @media (max-width: 768px) {
+          nav ul {
+            display: none;
+          }
+        }
+      </style>
+      <header>
+        <div class="container">
+          <div class="logo">
+            <span>🏗️</span>
+            <span>PromptForge</span>
+          </div>
+          <nav>
+            <ul>
+              <li><a href="/">Directory</a></li>
+              <li><a href="#">Submit</a></li>
+              <li><a href="#">About</a></li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+    `;
+  }
+}
+
+customElements.define('custom-header', CustomHeader);

components/searchBar.js

@@ -0,0 +1,73 @@
+class CustomSearchBar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        
+        .search-container {
+          position: relative;
+          max-width: 600px;
+          margin: 0 auto;
+        }
+        
+        .search-input {
+          width: 100%;
+          padding: 1rem 1rem 1rem 3rem;
+          border-radius: 50px;
+          border: 1px solid #e5e7eb;
+          background: #fff;
+          font-size: 1rem;
+          transition: all 0.3s;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        }
+        
+        .dark .search-input {
+          background: #1f2937;
+          border: 1px solid #374151;
+          color: #f9fafb;
+        }
+        
+        .search-input:focus {
+          outline: none;
+          border-color: #6366f1;
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+        
+        .search-icon {
+          position: absolute;
+          left: 1rem;
+          top: 50%;
+          transform: translateY(-50%);
+          color: #9ca3af;
+        }
+        
+        .dark .search-icon {
+          color: #6b7280;
+        }
+      </style>
+      <div class="search-container">
+        <i data-feather="search" class="search-icon w-5 h-5"></i>
+        <input type="text" class="search-input" placeholder="Search prompts or tags..." id="searchInput">
+      </div>
+    `;
+    
+    // Add event listener after rendering
+    setTimeout(() => {
+      const searchInput = this.shadowRoot.getElementById('searchInput');
+      searchInput.addEventListener('input', (e) => {
+        // Access the global search function
+        if (typeof searchPrompts === 'function') {
+          searchPrompts(e.target.value);
+        }
+      });
+      
+      // Initialize feather icons
+      feather.replace();
+    }, 0);
+  }
+}
+
+customElements.define('custom-search-bar', CustomSearchBar);

index.html

@@ -1,19 +1,55 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PromptForge - AI Image Prompt Directory</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏗️</text></svg>">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-['Geist'] transition-colors duration-300">
+    <custom-header></custom-header>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+            <div>
+                <h1 class="text-3xl md:text-4xl font-bold">AI Image Prompt Directory</h1>
+                <p class="text-gray-600 dark:text-gray-400 mt-2">Discover and copy prompts for AI-generated images</p>
+            </div>
+            <div class="flex gap-2">
+                <button id="toggleDarkMode" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
+                    <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
+                    <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
+                </button>
+            </div>
+        </div>
+
+        <div class="mb-8">
+            <custom-search-bar></custom-search-bar>
+        </div>
+
+        <div class="mb-6 flex flex-wrap gap-2" id="tagFilters">
+            <!-- Tags will be populated by JS -->
+        </div>
+
+        <div id="promptGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Cards will be populated by JS -->
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/header.js"></script>
+    <script src="components/searchBar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,193 @@
+// Demo data for proof of concept
+const demoData = [
+  {
+    prompt: "A futuristic cityscape at night with neon lights reflecting on wet streets, cyberpunk aesthetic, cinematic lighting, 8k resolution",
+    image: "http://static.photos/cityscape/640x360/1",
+    tags: ["cyberpunk", "futuristic", "night", "urban"]
+  },
+  {
+    prompt: "Minimalist interior design with clean lines, natural light, Scandinavian style, wooden furniture, plants, soft textures",
+    image: "http://static.photos/interior/640x360/2",
+    tags: ["minimalist", "scandinavian", "interior", "natural"]
+  },
+  {
+    prompt: "Abstract geometric patterns with vibrant colors, digital art, fractal designs, high detail, symmetrical composition",
+    image: "http://static.photos/abstract/640x360/3",
+    tags: ["abstract", "geometric", "digital", "vibrant"]
+  },
+  {
+    prompt: "Steampunk airship flying over Victorian-era city, brass and copper details, mechanical wings, cloudy sky, detailed machinery",
+    image: "http://static.photos/technology/640x360/4",
+    tags: ["steampunk", "victorian", "airship", "mechanical"]
+  },
+  {
+    prompt: "Underwater coral reef with bioluminescent creatures, deep sea colors, mysterious atmosphere, high detail, 4k resolution",
+    image: "http://static.photos/nature/640x360/5",
+    tags: ["underwater", "bioluminescent", "nature", "mysterious"]
+  },
+  {
+    prompt: "Space station orbiting a gas giant planet, futuristic architecture, stars in background, cinematic composition, NASA aesthetic",
+    image: "http://static.photos/space/640x360/6",
+    tags: ["space", "futuristic", "cinematic", "science"]
+  },
+  {
+    prompt: "Vintage film noir scene with detective in trench coat, rainy street, neon signs, dramatic shadows, black and white with selective color",
+    image: "http://static.photos/cityscape/640x360/7",
+    tags: ["noir", "vintage", "detective", "dramatic"]
+  },
+  {
+    prompt: "Fantasy forest with glowing mushrooms, magical creatures, ethereal lighting, detailed environment, concept art style",
+    image: "http://static.photos/nature/640x360/8",
+    tags: ["fantasy", "magical", "forest", "ethereal"]
+  },
+  {
+    prompt: "Industrial robot arm assembling circuit boards, factory setting, metallic textures, sparks, high-tech machinery, detailed mechanics",
+    image: "http://static.photos/technology/640x360/9",
+    tags: ["industrial", "robotic", "technology", "mechanical"]
+  }
+];
+
+let allTags = [];
+let currentFilter = '';
+let filteredData = [...demoData];
+
+// Initialize the page
+document.addEventListener('DOMContentLoaded', () => {
+  // Extract all unique tags
+  demoData.forEach(item => {
+    item.tags.forEach(tag => {
+      if (!allTags.includes(tag)) {
+        allTags.push(tag);
+      }
+    });
+  });
+  
+  renderTagFilters();
+  renderPromptCards();
+  
+  // Set up dark mode toggle
+  const toggleButton = document.getElementById('toggleDarkMode');
+  toggleButton.addEventListener('click', () => {
+    document.documentElement.classList.toggle('dark');
+    localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+    feather.replace();
+  });
+  
+  // Check for saved dark mode preference
+  if (localStorage.getItem('darkMode') === 'true') {
+    document.documentElement.classList.add('dark');
+  }
+  
+  // Add grid overlay
+  const gridOverlay = document.createElement('div');
+  gridOverlay.className = 'grid-overlay';
+  document.body.appendChild(gridOverlay);
+});
+
+// Render tag filter chips
+function renderTagFilters() {
+  const container = document.getElementById('tagFilters');
+  container.innerHTML = '<button class="tag px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" data-tag="">All</button>';
+  
+  allTags.forEach(tag => {
+    const tagButton = document.createElement('button');
+    tagButton.className = 'tag px-3 py-1 bg-gray-200 dark:bg-gray-700 rounded-full text-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors';
+    tagButton.textContent = tag;
+    tagButton.dataset.tag = tag;
+    tagButton.addEventListener('click', () => {
+      document.querySelectorAll('.tag').forEach(btn => btn.classList.remove('bg-blue-500', 'dark:bg-blue-600', 'text-white'));
+      tagButton.classList.add('bg-blue-500', 'dark:bg-blue-600', 'text-white');
+      currentFilter = tag;
+      filterPrompts();
+    });
+    container.appendChild(tagButton);
+  });
+}
+
+// Render prompt cards
+function renderPromptCards() {
+  const container = document.getElementById('promptGrid');
+  container.innerHTML = '';
+  
+  filteredData.forEach(item => {
+    const card = document.createElement('div');
+    card.className = 'prompt-card bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300';
+    card.innerHTML = `
+      <div class="relative">
+        <img src="${item.image}" alt="AI-generated image" class="w-full h-48 object-cover">
+        <div class="prompt-overlay absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 p-4">
+          <p class="text-white text-center text-sm">${item.prompt}</p>
+        </div>
+        <div class="absolute top-2 right-2">
+          <button class="copy-btn bg-white dark:bg-gray-700 p-2 rounded-full shadow-md" data-prompt="${item.prompt.replace(/"/g, '&quot;')}">
+            <i data-feather="copy" class="w-4 h-4"></i>
+          </button>
+        </div>
+      </div>
+      <div class="p-4">
+        <div class="flex flex-wrap gap-2 mb-3">
+          ${item.tags.map(tag => `<span class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-xs rounded">${tag}</span>`).join('')}
+        </div>
+        <button class="copy-btn w-full py-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-sm flex items-center justify-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="${item.prompt.replace(/"/g, '&quot;')}">
+          <i data-feather="copy" class="w-4 h-4"></i>
+          Copy Prompt
+        </button>
+      </div>
+    `;
+    container.appendChild(card);
+  });
+  
+  // Initialize feather icons
+  feather.replace();
+  
+  // Add event listeners to copy buttons
+  document.querySelectorAll('.copy-btn').forEach(button => {
+    button.addEventListener('click', (e) => {
+      const prompt = e.currentTarget.dataset.prompt;
+      navigator.clipboard.writeText(prompt).then(() => {
+        // Show feedback
+        const originalHTML = e.currentTarget.innerHTML;
+        e.currentTarget.innerHTML = '<i data-feather="check" class="w-4 h-4"></i> Copied!';
+        feather.replace();
+        
+        setTimeout(() => {
+          e.currentTarget.innerHTML = originalHTML;
+          feather.replace();
+        }, 2000);
+      });
+    });
+  });
+}
+
+// Filter prompts based on current filter
+function filterPrompts() {
+  if (currentFilter === '') {
+    filteredData = [...demoData];
+  } else {
+    filteredData = demoData.filter(item => 
+      item.tags.includes(currentFilter)
+    );
+  }
+  
+  renderPromptCards();
+}
+
+// Search functionality (to be implemented with real search bar)
+function searchPrompts(query) {
+  if (!query) {
+    filteredData = currentFilter ? demoData.filter(item => item.tags.includes(currentFilter)) : [...demoData];
+  } else {
+    const lowerQuery = query.toLowerCase();
+    filteredData = demoData.filter(item => 
+      item.prompt.toLowerCase().includes(lowerQuery) || 
+      item.tags.some(tag => tag.toLowerCase().includes(lowerQuery))
+    );
+    
+    // If we have a tag filter, apply it as well
+    if (currentFilter) {
+      filteredData = filteredData.filter(item => item.tags.includes(currentFilter));
+    }
+  }
+  
+  renderPromptCards();
+}

style.css

@@ -1,28 +1,154 @@
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+:root {
+  --grid-color: rgba(0, 0, 0, 0.05);
+  --dot-size: 1px;
+  --dot-space: 20px;
+}
+
+.dark {
+  --grid-color: rgba(255, 255, 255, 0.05);
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  font-family: 'Geist', sans-serif;
+  background-color: #fafafa;
+  background-image: radial-gradient(var(--grid-color) var(--dot-size), transparent var(--dot-size)),
+                    radial-gradient(var(--grid-color) var(--dot-size), transparent var(--dot-size));
+  background-position: 0 0, calc(var(--dot-space) / 2) calc(var(--dot-space) / 2);
+  background-size: var(--dot-space) var(--dot-space);
+  min-height: 100vh;
+}
+
+.dark body {
+  background-color: #0a0a0a;
+}
+
+.prompt-card {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.prompt-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+.dark .prompt-card {
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.dark .prompt-card:hover {
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
+}
+
+.tag {
+  transition: all 0.2s ease;
+}
+
+.tag:hover {
+  transform: scale(1.05);
+}
+
+.copy-btn {
+  transition: all 0.2s ease;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.copy-btn:hover {
+  background-color: #e5e7eb;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.dark .copy-btn:hover {
+  background-color: #374151;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.prompt-overlay {
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  transition: opacity 0.3s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
 }
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 4px;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #4b5563;
+}
+
+/* ASCII-style divider */
+.ascii-divider {
+  font-family: monospace;
+  letter-spacing: -0.2em;
+  opacity: 0.3;
+  margin: 2rem 0;
+}
+
+/* Blueprint grid overlay */
+.grid-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background-image: 
+    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
+  background-size: 20px 20px;
+  z-index: -1;
+}
+
+.dark .grid-overlay {
+  background-image: 
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+}
+
+/* Corner markers */
+.corner-marker {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 1px solid currentColor;
+}
+
+.corner-marker.top-left {
+  top: 0;
+  left: 0;
+  border-right: none;
+  border-bottom: none;
+}
+
+.corner-marker.top-right {
+  top: 0;
+  right: 0;
+  border-left: none;
+  border-bottom: none;
+}
+
+.corner-marker.bottom-left {
+  bottom: 0;
+  left: 0;
+  border-right: none;
+  border-top: none;
+}
+
+.corner-marker.bottom-right {
+  bottom: 0;
+  right: 0;
+  border-left: none;
+  border-top: none;
+}