`public/index.html`

215 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Museum Art Bot - Bringing Classical Art to X</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            margin: 0;
            padding: 0;
        }
        header {
            background: rgba(255,255,255,0.95);
            padding: 2rem;
            text-align: center;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }
        h1 {
            margin: 0;
            color: #667eea;
            font-size: 2.5rem;
        }
        .tagline {
            color: #666;
            margin-top: 0.5rem;
        }
        .container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        }
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }
        .feature {
            text-align: center;
        }
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        .cta {
            background: #667eea;
            color: white;
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            display: inline-block;
            margin: 1rem;
            transition: transform 0.2s;
        }
        .cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102,126,234,0.4);
        }
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }
        .artwork {
            aspect-ratio: 1;
            background: #f3f4f6;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }
        footer {
            text-align: center;
            padding: 2rem;
            color: white;
        }
        a { color: #667eea; }
        footer a { color: white; }
    </style>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  </head>
<body>
<!-- Theme toggle (theme1 / theme2) — query-param-gated preview surface
     (Steve 2026-05-29). ?theme=2 in URL flips to theme2 and persists in
     localStorage. Toggle UI hidden until theme2 mode active. Same key
     ('wallco-page-theme') as wallco.ai for cross-site continuity. -->
<script>
(function(){
  var qs = new URLSearchParams(location.search);
  var fromUrl = qs.get('theme');
  var saved = null; try { saved = localStorage.getItem('wallco-page-theme'); } catch(e){}
  var theme = null;
  if (fromUrl === '2' || fromUrl === 'theme2') theme = 'theme2';
  else if (fromUrl === '1' || fromUrl === 'theme1') theme = 'theme1';
  else if (saved === 'theme2' || saved === 'theme1') theme = saved;
  if (theme) {
    document.documentElement.setAttribute('data-page-theme', theme);
    if (fromUrl) { try { localStorage.setItem('wallco-page-theme', theme); } catch(e){} }
  }
})();
</script>
<style id="page-theme-css-fleet">
  [data-page-theme="theme2"] body{
    background:#fff !important; color:#0a0a0a !important;
  }
  [data-page-theme="theme2"] h1,
  [data-page-theme="theme2"] h2,
  [data-page-theme="theme2"] h3{ letter-spacing:-0.01em; font-weight:500; }
  [data-page-theme="theme2"] .card,
  [data-page-theme="theme2"] [class*="card"]{
    background:#fafafa !important; border:1px solid #e5e5e5 !important; box-shadow:none !important;
  }
  #page-theme-toggle{ display:none; }
  [data-page-theme] #page-theme-toggle{ display:inline-flex; }
  #page-theme-toggle{
    position:fixed; top:96px; right:14px; z-index:90;
    gap:0; align-items:center;
    background:rgba(255,255,255,.92); border:1px solid #d8d2c5;
    border-radius:999px; padding:3px; backdrop-filter:blur(6px);
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    font:600 11px ui-sans-serif,system-ui; letter-spacing:.06em; text-transform:uppercase;
  }
  #page-theme-toggle button{
    border:0; background:transparent; color:#5a5048; cursor:pointer;
    padding:6px 14px; border-radius:999px; font:inherit; transition:all .15s;
  }
  #page-theme-toggle button[aria-pressed="true"]{ background:#1a1714; color:#faf7f2; }
  #page-theme-toggle button:hover:not([aria-pressed="true"]){ color:#1a1714; }
</style>
<div id="page-theme-toggle" role="group" aria-label="Page theme">
  <button type="button" data-theme="theme1" aria-pressed="false">Theme 1</button>
  <button type="button" data-theme="theme2" aria-pressed="false">Theme 2</button>
</div>
<script>
(function(){
  var cur = document.documentElement.getAttribute('data-page-theme') || 'theme1';
  var btns = document.querySelectorAll('#page-theme-toggle button');
  function sync(t){ btns.forEach(function(b){ b.setAttribute('aria-pressed', b.dataset.theme === t ? 'true' : 'false'); }); }
  sync(cur);
  btns.forEach(function(b){
    b.addEventListener('click', function(){
      var t = b.dataset.theme;
      document.documentElement.setAttribute('data-page-theme', t);
      try { localStorage.setItem('wallco-page-theme', t); } catch(e){}
      sync(t);
    });
  });
})();
</script>

    <header>
        <h1>🎨 Museum Art Bot</h1>
        <p class="tagline">Bringing timeless masterpieces to your X timeline</p>
    </header>

    <div class="container">
        <h2>About</h2>
        <p>Museum Art Bot is an automated service that shares beautiful public domain artwork from world-renowned museums and artists on X (formerly Twitter). Every few hours, we post a carefully selected masterpiece with historical context and artist information.</p>

        <div class="features">
            <div class="feature">
                <div class="feature-icon">🖼️</div>
                <h3>Classic Art</h3>
                <p>Masterpieces from Rembrandt, Van Gogh, Vermeer, and more</p>
            </div>
            <div class="feature">
                <div class="feature-icon">🏛️</div>
                <h3>Public Domain</h3>
                <p>All artwork is in the public domain and free to share</p>
            </div>
            <div class="feature">
                <div class="feature-icon">🤖</div>
                <h3>Automated</h3>
                <p>Posts every 6 hours with artwork details and context</p>
            </div>
        </div>

        <h2>Featured Artists</h2>
        <div class="gallery">
            <div class="artwork">🌌</div>
            <div class="artwork">👤</div>
            <div class="artwork">🌻</div>
            <div class="artwork">🌊</div>
            <div class="artwork">🎭</div>
            <div class="artwork">🏛️</div>
        </div>

        <h2>Follow Us</h2>
        <p>Follow <strong>@goodquestionai</strong> on X to get daily doses of classical art in your timeline!</p>

        <div style="text-align: center;">
            <a href="https://x.com/goodquestionai" class="cta">Follow on X</a>
        </div>

        <h2>Open Source</h2>
        <p>This bot is open source! Check out the code, contribute, or create your own art bot.</p>
        <p><a href="https://github.com/yourusername/museum-art-bot">View on GitHub</a></p>
    </div>

    <footer>
        <p>© 2025 Museum Art Bot | <a href="/terms.html">Terms</a> | <a href="/privacy.html">Privacy</a></p>
        <p>Not affiliated with any museum. All artwork is public domain.</p>
    </footer>
<script>window.DwHeaderConfig={siteName:"Animate-Museum-Posts",accent:"#9B7B4F",navLinks:[{name:'Home',url:'/'},{name:'Collections',url:'#shop'},{name:'About',url:'/about'},{name:'Care',url:'/care.html'},{name:'History',url:'/history.html'}],adminLinks:[{name:'Shopify admin',url:'https://admin.shopify.com',external:true},{name:'Edit hero',url:'#'},{name:'Analytics',url:'#'}]};</script>
<script src="/dw-header.js" defer></script>
</body>
</html>