crea un sitio que recoja todos los papers sobre inteligencia artificial que se pueda filtrar por fechas y que sirva como plataforma para consultar los papers que se van publicando

README.md

@@ -1,10 +1,13 @@
 ---
-title: Synapse Search
-emoji: 💻
-colorFrom: pink
-colorTo: red
+title: Synapse Search 🧠
+colorFrom: red
+colorTo: yellow
+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,91 @@
+class SiteFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background-color: #020617;
+          border-top: 1px solid rgba(148, 163, 184, 0.1);
+          padding: 3rem 1.5rem;
+          margin-top: auto;
+        }
+
+        .content {
+          max-width: 1280px;
+          margin: 0 auto;
+          text-align: center;
+        }
+
+        .logo {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 1.25rem;
+          font-weight: 700;
+          color: #fff;
+          margin-bottom: 1rem;
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        
+        .logo span {
+          color: #8b5cf6;
+        }
+
+        .text {
+          color: #64748b;
+          font-size: 0.875rem;
+          line-height: 1.6;
+          max-width: 600px;
+          margin: 0 auto 1.5rem;
+        }
+
+        .links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          flex-wrap: wrap;
+        }
+
+        .link {
+          color: #94a3b8;
+          text-decoration: none;
+          font-size: 0.9rem;
+          transition: color 0.2s;
+        }
+
+        .link:hover {
+          color: #06b6d4;
+        }
+
+        .copyright {
+          margin-top: 2rem;
+          color: #475569;
+          font-size: 0.75rem;
+        }
+      </style>
+      <footer>
+        <div class="content">
+          <div class="logo">
+            <i data-feather="cpu"></i>
+            <span>Synapse<span>Search</span></span>
+          </div>
+          <p class="text">
+            An aggregator for the latest Artificial Intelligence research papers. 
+            Curated for researchers, developers, and enthusiasts.
+          </p>
+          <div class="links">
+            <a href="#" class="link">Privacy Policy</a>
+            <a href="#" class="link">Terms of Service</a>
+            <a href="#" class="link">API Documentation</a>
+            <a href="#" class="link">Contact Support</a>
+          </div>
+          <p class="copyright">
+            © 2023 Synapse Search. Data provided by ArXiv.
+          </p>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('site-footer', SiteFooter);

components/navbar.js

@@ -0,0 +1,95 @@
+class SiteHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');
+        
+        header {
+          background-color: rgba(15, 23, 42, 0.85);
+          backdrop-filter: blur(12px);
+          border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+          position: sticky;
+          top: 0;
+          z-index: 50;
+        }
+
+        .container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 1rem 1.5rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .logo {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: #fff;
+          text-decoration: none;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          transition: opacity 0.2s;
+        }
+
+        .logo:hover {
+          opacity: 0.8;
+        }
+
+        .logo-icon {
+          color: #06b6d4;
+        }
+
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          align-items: center;
+        }
+
+        .nav-link {
+          color: #94a3b8;
+          text-decoration: none;
+          font-size: 0.95rem;
+          font-weight: 500;
+          transition: color 0.2s;
+          display: flex;
+          align-items: center;
+          gap: 0.4rem;
+        }
+
+        .nav-link:hover {
+          color: #06b6d4;
+        }
+        
+        @media (max-width: 640px) {
+          .nav-links span {
+            display: none;
+          }
+        }
+      </style>
+      <header>
+        <div class="container">
+          <a href="/" class="logo">
+            <i data-feather="cpu" class="logo-icon"></i>
+            <span>Synapse<span style="color: #8b5cf6">Search</span></span>
+          </a>
+          <nav class="nav-links">
+            <a href="https://github.com/public-apis/public-apis" target="_blank" class="nav-link">
+              <i data-feather="github" width="18" height="18"></i>
+              <span>GitHub</span>
+            </a>
+            <a href="https://arxiv.org" target="_blank" class="nav-link">
+              <i data-feather="external-link" width="18" height="18"></i>
+              <span>ArXiv</span>
+            </a>
+          </nav>
+        </div>
+      </header>
+    `;
+  }
+}
+
+customElements.define('site-header', SiteHeader);

components/paper-card.js

@@ -0,0 +1,182 @@
+class PaperCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  static get observedAttributes() {
+    return ['title', 'summary', 'authors', 'date', 'pdf-link', 'abs-link'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this.render();
+    }
+  }
+
+  render() {
+    const title = this.getAttribute('title') || 'No Title';
+    const summary = this.getAttribute('summary') || 'No summary available.';
+    const authors = this.getAttribute('authors') || 'Unknown';
+    const date = this.getAttribute('date') || '';
+    const pdfLink = this.getAttribute('pdf-link') || '#';
+    const absLink = this.getAttribute('abs-link') || '#';
+
+    // Truncate summary if too long
+    const shortSummary = summary.length > 200 ? summary.substring(0, 200) + '...' : summary;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .card {
+          background-color: rgba(30, 41, 59, 0.6);
+          border: 1px solid rgba(148, 163, 184, 0.1);
+          border-radius: 1rem;
+          padding: 1.5rem;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+        }
+
+        .card:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.15);
+          border-color: rgba(6, 182, 212, 0.3);
+          background-color: rgba(30, 41, 59, 0.9);
+        }
+
+        .card::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 4px;
+          height: 100%;
+          background: linear-gradient(to bottom, #06b6d4, #8b5cf6);
+          opacity: 0;
+          transition: opacity 0.3s;
+        }
+
+        .card:hover::before {
+          opacity: 1;
+        }
+
+        .badge {
+          display: inline-block;
+          background-color: rgba(139, 92, 246, 0.1);
+          color: #a78bfa;
+          font-size: 0.75rem;
+          font-weight: 600;
+          padding: 0.25rem 0.75rem;
+          border-radius: 9999px;
+          margin-bottom: 0.75rem;
+          border: 1px solid rgba(139, 92, 246, 0.2);
+        }
+
+        h3 {
+          font-size: 1.125rem;
+          font-weight: 700;
+          color: #f1f5f9;
+          margin-bottom: 0.75rem;
+          line-height: 1.4;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .authors {
+          font-size: 0.8rem;
+          color: #94a3b8;
+          margin-bottom: 0.75rem;
+          display: flex;
+          align-items: center;
+          gap: 0.35rem;
+        }
+
+        p {
+          font-size: 0.875rem;
+          color: #cbd5e1;
+          line-height: 1.6;
+          margin-bottom: 1.5rem;
+          flex-grow: 1;
+        }
+
+        .actions {
+          display: flex;
+          gap: 0.75rem;
+          margin-top: auto;
+        }
+
+        .btn {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          padding: 0.5rem 1rem;
+          border-radius: 0.5rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+          text-decoration: none;
+          transition: all 0.2s;
+        }
+
+        .btn-primary {
+          background-color: #0e7490;
+          color: white;
+        }
+        
+        .btn-primary:hover {
+          background-color: #06b6d4;
+        }
+
+        .btn-outline {
+          background-color: transparent;
+          border: 1px solid #475569;
+          color: #94a3b8;
+        }
+
+        .btn-outline:hover {
+          border-color: #94a3b8;
+          color: #e2e8f0;
+        }
+      </style>
+      
+      <article class="card">
+        <span class="badge">${date}</span>
+        <h3 title="${title}">${title}</h3>
+        <div class="authors">
+          <i data-feather="users" width="12" height="12"></i>
+          <span>${authors}</span>
+        </div>
+        <p>${shortSummary}</p>
+        <div class="actions">
+          <a href="${pdfLink}" target="_blank" class="btn btn-primary">
+            <i data-feather="file-text" width="16" height="16"></i> PDF
+          </a>
+          <a href="${absLink}" target="_blank" class="btn btn-outline">
+            <i data-feather="external-link" width="16" height="16"></i> Abstract
+          </a>
+        </div>
+      </article>
+    `;
+    
+    // Re-initialize icons inside Shadow DOM
+    if(window.feather) {
+        feather.replace();
+    }
+  }
+}
+
+customElements.define('paper-card', PaperCard);

index.html

@@ -1,19 +1,124 @@
-<!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" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Synapse Search | AI Paper Explorer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#06b6d4', // Cyan 500
+                        secondary: '#8b5cf6', // Violet 500
+                        dark: '#0f172a', // Slate 900
+                        darker: '#020617', // Slate 950
+                        card: '#1e293b', // Slate 800
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-darker text-gray-200 font-sans antialiased min-h-screen flex flex-col transition-colors duration-300">
+
+    <!-- Navbar Component -->
+    <site-header></site-header>
+
+    <!-- Main Content -->
+    <main class="flex-grow container mx-auto px-4 py-8 max-w-7xl">
+        
+        <!-- Hero Section -->
+        <section class="text-center mb-12 mt-8 animate-fade-in-down">
+            <h1 class="text-4xl md:text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary mb-4">
+                Discover the Future of AI
+            </h1>
+            <p class="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto">
+                Explore the latest research papers in Artificial Intelligence. Filter by date, search by topic, and stay ahead of the curve.
+            </p>
+        </section>
+
+        <!-- Filters & Controls -->
+        <section class="bg-card/50 backdrop-blur-md border border-gray-700/50 rounded-2xl p-6 mb-8 shadow-xl animate-fade-in-up">
+            <div class="flex flex-col md:flex-row gap-4 items-end">
+                
+                <!-- Search -->
+                <div class="flex-grow w-full">
+                    <label class="block text-sm font-medium text-primary mb-1">Search Query</label>
+                    <div class="relative">
+                        <i data-feather="search" class="absolute left-3 top-3 text-gray-400 w-5 h-5"></i>
+                        <input type="text" id="searchInput" placeholder="e.g. Reinforcement Learning, Transformers..." 
+                            class="w-full bg-darker border border-gray-600 rounded-lg py-2.5 pl-10 pr-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all placeholder-gray-500">
+                    </div>
+                </div>
+
+                <!-- Date From -->
+                <div class="w-full md:w-auto">
+                    <label class="block text-sm font-medium text-secondary mb-1">From Date</label>
+                    <input type="date" id="dateFrom" 
+                        class="w-full bg-darker border border-gray-600 rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-secondary focus:ring-1 focus:ring-secondary transition-all cursor-pointer">
+                </div>
+
+                <!-- Date To -->
+                <div class="w-full md:w-auto">
+                    <label class="block text-sm font-medium text-secondary mb-1">To Date</label>
+                    <input type="date" id="dateTo" 
+                        class="w-full bg-darker border border-gray-600 rounded-lg py-2.5 px-4 text-white focus:outline-none focus:border-secondary focus:ring-1 focus:ring-secondary transition-all cursor-pointer">
+                </div>
+
+                <!-- Search Button -->
+                <button id="searchBtn" class="w-full md:w-auto bg-gradient-to-r from-primary to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-bold py-2.5 px-8 rounded-lg shadow-lg transform hover:-translate-y-0.5 transition-all duration-200 flex items-center justify-center gap-2">
+                    <i data-feather="zap" class="w-4 h-4"></i>
+                    Find Papers
+                </button>
+            </div>
+        </section>
+
+        <!-- Stats / Status -->
+        <div class="flex justify-between items-center mb-6 px-2">
+            <h2 class="text-2xl font-bold text-white flex items-center gap-2">
+                <i data-feather="file-text" class="text-primary"></i> Latest Papers
+            </h2>
+            <span id="resultCount" class="text-sm text-gray-400 bg-gray-800 px-3 py-1 rounded-full border border-gray-700">Loading...</span>
+        </div>
+
+        <!-- Papers Grid -->
+        <div id="papersGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Papers will be injected here via JS -->
+        </div>
+
+        <!-- Empty State / No Results -->
+        <div id="noResults" class="hidden text-center py-20">
+            <div class="inline-block p-6 rounded-full bg-gray-800/50 mb-4">
+                <i data-feather="inbox" class="w-16 h-16 text-gray-500"></i>
+            </div>
+            <h3 class="text-2xl font-bold text-gray-300 mb-2">No papers found</h3>
+            <p class="text-gray-500">Try adjusting your search terms or date range.</p>
+        </div>
+
+        <!-- Loading State -->
+        <div id="loader" class="hidden flex justify-center items-center py-20">
+            <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-primary"></div>
+        </div>
+
+    </main>
+
+    <!-- Footer Component -->
+    <site-footer></site-footer>
+
+    <!-- Web Components -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/paper-card.js"></script>
+    
+    <!-- Main Logic -->
+    <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,178 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const papersGrid = document.getElementById('papersGrid');
+    const searchInput = document.getElementById('searchInput');
+    const dateFrom = document.getElementById('dateFrom');
+    const dateTo = document.getElementById('dateTo');
+    const searchBtn = document.getElementById('searchBtn');
+    const loader = document.getElementById('loader');
+    const noResults = document.getElementById('noResults');
+    const resultCount = document.getElementById('resultCount');
+
+    // Default query for AI papers
+    const DEFAULT_QUERY = 'cat:cs.AI OR cat:cs.LG OR cat:cs.CL';
+    
+    // Initial Fetch
+    fetchPapers(DEFAULT_QUERY);
+
+    // Event Listeners
+    searchBtn.addEventListener('click', () => {
+        const query = searchInput.value.trim();
+        fetchPapers(query ? `all:${query}` : DEFAULT_QUERY);
+    });
+
+    searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            searchBtn.click();
+        }
+    });
+
+    // Date Filter Listener (Client-side filter on loaded data)
+    // For simplicity in this demo, we re-fetch or filter if data is present. 
+    // Here we'll re-trigger the search logic to apply filters if data exists, 
+    // but for a robust app, we'd store the 'allPapers' array.
+    let allPapersData = [];
+
+    dateFrom.addEventListener('change', applyClientFilters);
+    dateTo.addEventListener('change', applyClientFilters);
+
+    async function fetchPapers(searchQuery) {
+        showLoader(true);
+        noResults.classList.add('hidden');
+        papersGrid.innerHTML = '';
+        
+        try {
+            // ArXiv API endpoint
+            const baseUrl = 'http://export.arxiv.org/api/query?';
+            const params = new URLSearchParams({
+                search_query: searchQuery,
+                start: 0,
+                max_results: 50, // Fetch a good amount to filter by date
+                sortBy: 'submittedDate',
+                sortOrder: 'descending'
+            });
+
+            const response = await fetch(baseUrl + params.toString());
+            if (!response.ok) throw new Error('Network response was not ok');
+            
+            const xmlText = await response.text();
+            const papers = parseArxivXml(xmlText);
+            
+            allPapersData = papers;
+            applyClientFilters(); // Apply any existing date filters immediately
+
+        } catch (error) {
+            console.error('Error fetching papers:', error);
+            resultCount.textContent = 'Error fetching data';
+            noResults.classList.remove('hidden');
+            showLoader(false);
+        }
+    }
+
+    function parseArxivXml(xmlString) {
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(xmlString, "text/xml");
+        const entries = xmlDoc.getElementsByTagName("entry");
+        const papers = [];
+
+        for (let i = 0; i < entries.length; i++) {
+            const entry = entries[i];
+            
+            // Title
+            const title = entry.getElementsByTagName("title")[0].textContent;
+            
+            // Summary (Abstract) - Remove newlines and trim
+            const summary = entry.getElementsByTagName("summary")[0].textContent.replace(/\s+/g, ' ').trim();
+            
+            // Published Date
+            const published = entry.getElementsByTagName("published")[0].textContent;
+            
+            // Authors
+            const authors = [];
+            const authorNodes = entry.getElementsByTagName("author");
+            for (let j = 0; j < authorNodes.length; j++) {
+                authors.push(authorNodes[j].getElementsByTagName("name")[0].textContent);
+            }
+            
+            // Link (PDF)
+            const links = entry.getElementsByTagName("link");
+            let pdfLink = "";
+            for(let k=0; k<links.length; k++) {
+                if(links[k].getAttribute("type") === "application/pdf") {
+                    pdfLink = links[k].getAttribute("href");
+                    break;
+                }
+            }
+            // Arxiv ID Link
+            const idLink = entry.getElementsByTagName("id")[0].textContent;
+
+            papers.push({
+                title,
+                summary,
+                published,
+                authors,
+                pdfLink,
+                idLink
+            });
+        }
+        return papers;
+    }
+
+    function applyClientFilters() {
+        papersGrid.innerHTML = '';
+        
+        const fromVal = dateFrom.value ? new Date(dateFrom.value) : null;
+        const toVal = dateTo.value ? new Date(dateTo.value) : null;
+        
+        // Set time to end of day for 'to' filter to be inclusive
+        if (toVal) toVal.setHours(23, 59, 59, 999);
+
+        const filteredPapers = allPapersData.filter(paper => {
+            const paperDate = new Date(paper.published);
+            
+            let isValid = true;
+
+            if (fromVal && paperDate < fromVal) isValid = false;
+            if (toVal && paperDate > toVal) isValid = false;
+
+            return isValid;
+        });
+
+        displayPapers(filteredPapers);
+    }
+
+    function displayPapers(papers) {
+        showLoader(false);
+        resultCount.textContent = `Found ${papers.length} papers`;
+
+        if (papers.length === 0) {
+            noResults.classList.remove('hidden');
+            return;
+        }
+
+        papers.forEach(paper => {
+            // Create Web Component
+            const card = document.createElement('paper-card');
+            
+            // Pass data to component
+            card.setAttribute('title', paper.title);
+            card.setAttribute('summary', paper.summary);
+            card.setAttribute('authors', paper.authors.join(', '));
+            card.setAttribute('date', new Date(paper.published).toLocaleDateString());
+            card.setAttribute('pdf-link', paper.pdfLink);
+            card.setAttribute('abs-link', paper.idLink);
+            
+            papersGrid.appendChild(card);
+        });
+    }
+
+    function showLoader(show) {
+        if (show) {
+            loader.classList.remove('hidden');
+            papersGrid.classList.add('hidden');
+            resultCount.textContent = 'Searching...';
+        } else {
+            loader.classList.add('hidden');
+            papersGrid.classList.remove('hidden');
+        }
+    }
+});

style.css

@@ -1,28 +1,69 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
+
+:root {
+    --primary: #06b6d4;
+    --secondary: #8b5cf6;
+    --bg-dark: #0f172a;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+::-webkit-scrollbar-track {
+    background: #020617; 
+}
+::-webkit-scrollbar-thumb {
+    background: #334155; 
+    border-radius: 5px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary); 
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Animations */
+@keyframes fadeInDown {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.animate-fade-in-down {
+    animation: fadeInDown 0.6s ease-out forwards;
 }
+
+.animate-fade-in-up {
+    animation: fadeInUp 0.6s ease-out forwards;
+}
+
+/* Glassmorphism Utilities */
+.glass {
+    background: rgba(30, 41, 59, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Code/Abstract styling */
+pre {
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+/* Date Picker Dark Mode Fixes */
+input[type="date"]::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    opacity: 0.5;
+    cursor: pointer;
+}