<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="sitemap.css"?>
<!DOCTYPE html [
  <!ENTITY bull "&#8226;">
  <!ENTITY arrow "&#8594;">
]>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
      lang="en">
<head>
  <title>Storacha Vault - XML Sitemap</title>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link rel="icon" type="image/png" href="/favicon.png" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&amp;family=Roboto+Mono:wght@300;400;500&amp;family=Exo+2:wght@300;400;600&amp;display=swap" rel="stylesheet"/>
  <style>
    /* Embedded CSS for offline viewing */
    :root {
      --primary-red: #ff0000;
      --light-bg: #ffffff;
      --card-bg: #ffffff;
      --glow-red: #ff0000;
      --neon-blue: #ff0000;
      --text-light: #666666;
      --text-dim: #333333;
    }
    
    body {
      background: var(--light-bg);
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 0, 0, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(0, 243, 255, 0.1) 0%, transparent 20%);
      color: var(--text-light);
      font-family: 'Exo 2', sans-serif;
      line-height: 1.6;
      padding: 2rem;
      min-height: 100vh;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
    }
    
    .header {
      text-align: center;
      padding: 3rem 1rem;
      margin-bottom: 3rem;
      position: relative;
      overflow: hidden;
    }
    
    .header::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 300px;
      z-index: -1;
    }
    
    h1 {
      font-family: 'Orbitron', sans-serif;
      font-size: 3.5rem;
      font-weight: 900;
      margin-bottom: 1rem;
      color: #444;
    }
    
    .subtitle {
      font-family: 'Roboto Mono', monospace;
      font-size: 1.2rem;
      color: var(--text-dim);
      margin-bottom: 2rem;
      letter-spacing: 1px;
    }
    
    .stats {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin: 2rem 0;
      flex-wrap: wrap;
    }
    
    .stat-box {
      background: var(--card-bg);
      padding: 1rem 2rem;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
    }
    
    .stat-number {
      font-family: 'Orbitron', sans-serif;
      font-size: 2rem;
      color: var(--primary-red);
      font-weight: 700;
    }
    
    .url-list {
      display: grid;
      gap: 1.5rem;
      margin-top: 2rem;
    }
    
    .url-card {
      background: var(--card-bg);
      border-radius: 16px;
      padding: 2rem;
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .url-card:hover {
      transform: translateY(-5px);
      border-color: var(--primary-red);
      box-shadow: 0 10px 30px rgba(255, 0, 0, 0.2);
    }
    
    .url-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(to bottom, var(--primary-red), var(--neon-blue));
    }
    
    .url-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    
    .url-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(45deg, var(--primary-red), var(--neon-blue));
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
    }
    
    .url-loc {
      font-family: 'Roboto Mono', monospace;
      font-size: 1.1rem;
      color: var(--neon-blue);
      text-decoration: none;
      word-break: break-all;
    }
    
    .url-loc:hover {
      text-decoration: underline;
      text-shadow: 0 0 10px var(--neon-blue);
    }
    
    .url-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      color: var(--text-dim);
    }
    
    .priority-high { color: #00ff00; }
    .priority-medium { color: #ffaa00; }
    .priority-low { color: var(--text-dim); }
    
    .image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }
    
    .image-item {
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: transform 0.3s ease;
    }
    
    .image-item:hover {
      transform: scale(1.05);
    }
    
    .footer {
      text-align: center;
      margin-top: 4rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-dim);
      font-size: 0.9rem;
    }
    
    @media (max-width: 768px) {
      h1 { font-size: 2.5rem; }
      .url-card { padding: 1.5rem; }
      .stats { flex-direction: column; align-items: center; }
      .image-grid { grid-template-columns: repeat(3, 1fr); }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Header Section -->
    <div class="header">
      <h1>🔥 Storacha Vault</h1>
      <div class="subtitle">Decentralized Storage Sitemap</div>
      <div class="stats">
        <div class="stat-box">
          <div class="stat-number">3</div>
          <div>URL Entries</div>
        </div>
        <div class="stat-box">
          <div class="stat-number">4</div>
          <div>SEO Images</div>
        </div>
        <div class="stat-box">
          <div class="stat-number">100%</div>
          <div>Decentralized</div>
        </div>
      </div>
    </div>
    
    <!-- URL Entries -->
    <div class="url-list">
      <!-- Main Entry -->
      <div class="url-card">
        <div class="url-header">
          <div class="url-icon">🌐</div>
          <a href="https://storacha.site/" class="url-loc" target="_blank">https://storacha.site/</a>
        </div>
        <div class="url-meta">
          <div class="meta-item"><strong>Last Modified:</strong> 2024-12-01</div>
          <div class="meta-item"><strong>Change Frequency:</strong> Weekly</div>
          <div class="meta-item">
            <strong>Priority:</strong> 
            <span class="priority-high">1.0 (Highest)</span>
          </div>
          <div class="meta-item"><strong>Type:</strong> Primary Landing Page</div>
        </div>
        
        <!-- Images Section -->
        <div style="margin-top: 1.5rem;">
          <strong style="color: var(--text-light);">SEO Images:</strong>
          <div class="image-grid">
            <div class="image-item">
              <img src="https://storacha.site/storacha.png" 
                   alt="Storacha Vault Platform" 
                   style="width:100%; height:80px; object-fit:cover;"/>
            </div>
            <div class="image-item">
              <img src="https://storacha.site/favicon-32x32.png" 
                   alt="Storacha Icon" 
                   style="width:100%; height:80px; object-fit:cover;"/>
            </div>
            <div class="image-item">
              <img src="https://storacha.site/apple-touch-icon.png" 
                   alt="Apple Touch Icon" 
                   style="width:100%; height:80px; object-fit:cover;"/>
            </div>
            <div class="image-item">
              <img src="https://storacha.site/android-chrome-192x192.png" 
                   alt="Android Chrome Icon" 
                   style="width:100%; height:80px; object-fit:cover;"/>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Service Worker -->
      <div class="url-card">
        <div class="url-header">
          <div class="url-icon">⚙️</div>
          <a href="https://storacha.site/serviceworker.js" class="url-loc" target="_blank">https://storacha.site/serviceworker.js</a>
        </div>
        <div class="url-meta">
          <div class="meta-item"><strong>Last Modified:</strong> 2024-12-01</div>
          <div class="meta-item"><strong>Change Frequency:</strong> Monthly</div>
          <div class="meta-item">
            <strong>Priority:</strong> 
            <span class="priority-low">0.1 (Low)</span>
          </div>
          <div class="meta-item"><strong>Type:</strong> Service Worker</div>
        </div>
      </div>
      
      <!-- Manifest -->
      <div class="url-card">
        <div class="url-header">
          <div class="url-icon">📱</div>
          <a href="https://storacha.site/manifest.json" class="url-loc" target="_blank">https://storacha.site/manifest.json</a>
        </div>
        <div class="url-meta">
          <div class="meta-item"><strong>Last Modified:</strong> 2024-12-01</div>
          <div class="meta-item"><strong>Change Frequency:</strong> Yearly</div>
          <div class="meta-item">
            <strong>Priority:</strong> 
            <span class="priority-low">0.1 (Low)</span>
          </div>
          <div class="meta-item"><strong>Type:</strong> Web App Manifest</div>
        </div>
      </div>
      
      <!-- SW.js -->
      <div class="url-card">
        <div class="url-header">
          <div class="url-icon">🔧</div>
          <a href="https://storacha.site/sw.js" class="url-loc" target="_blank">https://storacha.site/sw.js</a>
        </div>
        <div class="url-meta">
          <div class="meta-item"><strong>Last Modified:</strong> 2024-12-01</div>
          <div class="meta-item"><strong>Change Frequency:</strong> Monthly</div>
          <div class="meta-item">
            <strong>Priority:</strong> 
            <span class="priority-low">0.1 (Low)</span>
          </div>
          <div class="meta-item"><strong>Type:</strong> Static Asset</div>
        </div>
      </div>
    </div>
    
    <!-- Footer -->
    <div class="footer">
      <p>🔥 Storacha Vault | Decentralized Storage for Digital Art and NFTs</p>
      <p style="margin-top: 0.5rem; font-size: 0.8rem; opacity: 0.7;">
        This XML Sitemap is dynamically styled for better visualization.<br/>
        All URLs are indexed for SEO optimization.
      </p>
      <p style="margin-top: 1rem;">
        <a href="https://storacha.site/" 
           style="color: var(--primary-red); text-decoration: none;"
           target="_blank">← Return to Storacha Vault</a>
      </p>
    </div>
  </div>
</body>
</html>