<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGBCat — Amiga Workbench 1.3</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root{--wb-blue:#0055aa;--wb-white:#ffffff;--wb-black:#000000;--wb-orange:#ff8800}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--wb-blue);font-family:'Share Tech Mono',monospace;min-height:100vh;display:flex;flex-direction:column;cursor:default;overflow:hidden}
.screen-bar{height:22px;background:var(--wb-blue);border-bottom:2px solid var(--wb-black);display:flex;align-items:center;justify-content:space-between;padding:0 4px;z-index:200}
.screen-bar-title{font-size:13px;color:var(--wb-white);letter-spacing:1px}
.screen-bar-right{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--wb-white)}
.screen-gadget{width:22px;height:16px;border:2px solid var(--wb-white);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.screen-gadget.depth::before{content:'';width:10px;height:8px;border:1.5px solid var(--wb-orange);position:absolute;top:1px;left:1px}
.screen-gadget.depth::after{content:'';width:10px;height:8px;border:1.5px solid var(--wb-white);position:absolute;bottom:1px;right:1px;background:var(--wb-blue)}
.desktop{flex:1;position:relative;background-image:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.08) 1px,rgba(0,0,0,.08) 2px),repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(0,0,0,.08) 1px,rgba(0,0,0,.08) 2px);background-size:2px 2px;background-color:var(--wb-blue);overflow:hidden}
.disk-icons{position:absolute;top:8px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:5}
.disk-icon{display:flex;align-items:center;gap:6px;padding:2px 6px;cursor:pointer;border:1px solid transparent}
.disk-icon:hover,.disk-icon.selected{background:var(--wb-orange);color:var(--wb-black);border-color:var(--wb-black)}
.disk-icon:hover .disk-label,.disk-icon.selected .disk-label{color:var(--wb-black)}
.disk-shape{width:28px;height:24px;background:var(--wb-orange);border:2px solid var(--wb-black);border-radius:2px;position:relative;flex-shrink:0}
.disk-shape::before{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);width:14px;height:6px;background:var(--wb-black);border-radius:1px}
.disk-shape::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:18px;height:8px;background:var(--wb-white);border:1px solid var(--wb-black)}
.disk-label{font-size:13px;color:var(--wb-white);text-shadow:1px 1px 0 var(--wb-black);white-space:nowrap}
.window-container{position:absolute;top:12px;left:12px;z-index:10;animation:amigaOpen .12s ease-out}
@keyframes amigaOpen{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.amiga-window{width:660px;max-width:calc(100vw - 120px);border:2px solid var(--wb-black);background:var(--wb-blue);display:flex;flex-direction:column}
.amiga-titlebar{background:var(--wb-white);height:22px;display:flex;align-items:center;border-bottom:2px solid var(--wb-black);user-select:none}
.amiga-close-gadget{width:22px;height:18px;border-right:2px solid var(--wb-black);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.amiga-close-gadget::before{content:'';width:10px;height:10px;border:2px solid var(--wb-black);background:var(--wb-white)}
.amiga-drag-bar{flex:1;height:100%;position:relative;overflow:hidden}
.amiga-drag-bar::before{content:'';position:absolute;top:2px;left:0;right:0;bottom:2px;background:repeating-linear-gradient(0deg,var(--wb-blue),var(--wb-blue) 1px,var(--wb-white) 1px,var(--wb-white) 2px)}
.amiga-title-label{background:var(--wb-white);padding:0 8px;position:relative;z-index:1;color:var(--wb-blue);font-size:14px;letter-spacing:1px;white-space:nowrap}
.amiga-depth-gadget{width:26px;height:18px;border-left:2px solid var(--wb-black);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative}
.amiga-depth-gadget::before{content:'';width:10px;height:8px;border:1.5px solid var(--wb-blue);position:absolute;top:2px;left:4px}
.amiga-depth-gadget::after{content:'';width:10px;height:8px;border:1.5px solid var(--wb-black);position:absolute;bottom:2px;right:4px;background:var(--wb-white)}
.amiga-nav{display:flex;padding:6px 8px;gap:4px;background:var(--wb-blue);border-bottom:1px solid var(--wb-black)}
.amiga-nav-btn{font-family:'Share Tech Mono',monospace;font-size:14px;padding:3px 16px;cursor:pointer;color:var(--wb-white);border:2px solid var(--wb-white);border-right-color:var(--wb-black);border-bottom-color:var(--wb-black);background:var(--wb-blue);letter-spacing:.5px;transition:none}
.amiga-nav-btn:hover{background:var(--wb-orange);color:var(--wb-black);border-color:var(--wb-black);border-right-color:var(--wb-white);border-bottom-color:var(--wb-white)}
.amiga-nav-btn.active{background:var(--wb-orange);color:var(--wb-black);border-color:var(--wb-black);border-right-color:var(--wb-white);border-bottom-color:var(--wb-white)}
.amiga-nav-btn:active{border:2px solid var(--wb-black);border-right-color:var(--wb-white);border-bottom-color:var(--wb-white)}
.amiga-content{background:var(--wb-blue);min-height:400px;overflow-y:auto;border-top:1px solid var(--wb-white);position:relative}
.amiga-content::-webkit-scrollbar{width:18px}
.amiga-content::-webkit-scrollbar-track{background:repeating-linear-gradient(0deg,var(--wb-blue),var(--wb-blue) 1px,var(--wb-black) 1px,var(--wb-black) 2px);border-left:2px solid var(--wb-black)}
.amiga-content::-webkit-scrollbar-thumb{background:var(--wb-blue);border:2px solid var(--wb-white);border-right-color:var(--wb-black);border-bottom-color:var(--wb-black)}
.amiga-content::-webkit-scrollbar-button{background:var(--wb-blue);border:2px solid var(--wb-white);border-right-color:var(--wb-black);border-bottom-color:var(--wb-black);height:18px}
.page{display:none;padding:16px;animation:pageFade .15s ease}.page.active{display:block}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
.amiga-panel{border:2px solid var(--wb-white);border-right-color:var(--wb-black);border-bottom-color:var(--wb-black);padding:12px;margin-bottom:12px;background:var(--wb-blue)}
.amiga-heading{font-size:20px;color:var(--wb-white);margin-bottom:10px;letter-spacing:2px;text-shadow:2px 2px 0 var(--wb-black)}
.amiga-heading-orange{font-size:20px;color:var(--wb-orange);margin-bottom:10px;letter-spacing:2px;text-shadow:2px 2px 0 var(--wb-black)}
.amiga-text{font-size:13px;color:var(--wb-white);line-height:1.7;margin-bottom:10px}
.home-logo{text-align:center;padding:10px 0 6px}
.home-logo h1{font-size:42px;color:var(--wb-orange);letter-spacing:6px;text-shadow:3px 3px 0 var(--wb-black);margin-bottom:2px}
.home-logo .sub{font-size:15px;color:var(--wb-white);letter-spacing:3px;text-shadow:1px 1px 0 var(--wb-black)}
.image-placeholder{border:2px solid var(--wb-orange);margin:12px 0;background:var(--wb-white);display:flex;align-items:center;justify-content:center;min-height:200px;position:relative}
.image-placeholder img{max-width:100%;max-height:300px;display:block}
.visitor-row{text-align:center;padding:8px;color:var(--wb-white);font-size:13px}
.v-digit{display:inline-block;background:var(--wb-black);color:var(--wb-orange);padding:2px 5px;margin:0 1px;border:1px solid var(--wb-white);font-size:15px}
.team-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.team-card{border:2px solid var(--wb-white);border-right-color:var(--wb-black);border-bottom-color:var(--wb-black);padding:10px;display:flex;gap:10px;align-items:center;background:var(--wb-blue)}
.team-face{width:40px;height:40px;border:2px solid var(--wb-orange);background:var(--wb-black);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--wb-orange)}
.team-detail h4{font-size:14px;color:var(--wb-orange);letter-spacing:1px}
.team-detail p{font-size:11px;color:var(--wb-white);line-height:1.3;margin:0}
.contact-panel{border:2px solid var(--wb-orange);padding:14px;background:var(--wb-blue);margin-top:10px}
.contact-panel h3{font-size:16px;color:var(--wb-orange);margin-bottom:10px;letter-spacing:1px}
.contact-line{font-size:13px;color:var(--wb-white);margin-bottom:6px;padding-left:4px;display:flex;align-items:center;gap:8px}
.contact-line .c-label{color:var(--wb-orange);min-width:55px}
.contact-line a{color:var(--wb-orange);text-decoration:underline;text-decoration-color:var(--wb-white)}
.buy-header{text-align:center;margin-bottom:14px}
.buy-header h2{font-size:22px;color:var(--wb-orange);letter-spacing:3px;text-shadow:2px 2px 0 var(--wb-black);margin-bottom:4px}
.buy-header p{font-size:13px;color:var(--wb-white)}
.seller-stack{display:flex;flex-direction:column;gap:8px}
.seller-row{border:2px solid var(--wb-white);border-right-color:var(--wb-black);border-bottom-color:var(--wb-black);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;background:var(--wb-blue)}
.seller-left{display:flex;align-items:center;gap:10px}
.seller-disk{width:32px;height:28px;background:var(--wb-orange);border:2px solid var(--wb-black);border-radius:2px;position:relative;flex-shrink:0}
.seller-disk::before{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);width:16px;height:5px;background:var(--wb-black);border-radius:1px}
.seller-disk::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:20px;height:8px;background:var(--wb-white);border:1px solid var(--wb-black)}
.seller-meta .seller-name{font-size:15px;color:var(--wb-orange);letter-spacing:1px}
.seller-meta .seller-desc{font-size:11px;color:var(--wb-white)}
.seller-badge{font-size:11px;background:var(--wb-orange);color:var(--wb-black);padding:1px 6px;border:1px solid var(--wb-black);margin-left:6px;letter-spacing:.5px}
.amiga-btn{font-family:'Share Tech Mono',monospace;font-size:13px;padding:3px 14px;background:var(--wb-blue);color:var(--wb-white);border:2px solid var(--wb-white);border-right-color:var(--wb-black);border-bottom-color:var(--wb-black);cursor:pointer;text-decoration:none;display:inline-block;letter-spacing:.5px}
.amiga-btn:hover{background:var(--wb-orange);color:var(--wb-black)}
.amiga-btn:active{border-color:var(--wb-black);border-right-color:var(--wb-white);border-bottom-color:var(--wb-white)}
.warn-box{margin-top:16px;border:2px solid var(--wb-orange);padding:10px 12px;background:var(--wb-black);display:flex;gap:10px;align-items:flex-start}
.warn-icon{font-size:20px;color:var(--wb-orange);flex-shrink:0;line-height:1}
.warn-box p{font-size:11px;color:var(--wb-white);line-height:1.5}
.warn-box strong{color:var(--wb-orange)}
.status-requester{margin:0 2px 2px;padding:4px 10px;border:1px solid var(--wb-black);background:var(--wb-blue);font-size:12px;color:var(--wb-white);display:flex;justify-content:space-between;letter-spacing:.5px}
.amiga-bottom-bar{height:14px;background:var(--wb-blue);border-top:2px solid var(--wb-white);display:flex;align-items:center;justify-content:flex-end;padding-right:2px}
.amiga-resize-gadget{width:16px;height:10px;border:2px solid var(--wb-white);border-right-color:var(--wb-black);border-bottom-color:var(--wb-black);cursor:nwse-resize}
@media(max-width:720px){.amiga-window{max-width:calc(100vw - 24px)}.team-row{grid-template-columns:1fr}.disk-icons{display:none}.seller-row{flex-direction:column;gap:8px;align-items:flex-start}}
</style>
</head>
<body>
<div class="screen-bar">
  <div class="screen-bar-title">Amiga Workbench 40.42</div>
  <div class="screen-bar-right">
    <span id="wb-clock"></span>
    <div class="screen-gadget depth"></div>
  </div>
</div>
<div class="desktop">
  <div class="disk-icons">
    <div class="disk-icon selected" onclick="switchTab(0)"><div class="disk-shape"></div><span class="disk-label">DH0:RGBCat</span></div>
    <div class="disk-icon" onclick="switchTab(1)"><div class="disk-shape"></div><span class="disk-label">DF0:About</span></div>
    <div class="disk-icon" onclick="switchTab(2)"><div class="disk-shape"></div><span class="disk-label">DF1:Sellers</span></div>
    <div class="disk-icon"><div class="disk-shape"></div><span class="disk-label">Ram Disk:</span></div>
  </div>
  <div class="window-container">
    <div class="amiga-window">
      <div class="amiga-titlebar">
        <div class="amiga-close-gadget"></div>
        <div class="amiga-drag-bar"></div>
        <span class="amiga-title-label" id="window-title">RGBCat Explorer</span>
        <div class="amiga-drag-bar"></div>
        <div class="amiga-depth-gadget"></div>
      </div>
      <div class="amiga-nav">
        <div class="amiga-nav-btn active" onclick="switchTab(0)">Home</div>
        <div class="amiga-nav-btn" onclick="switchTab(1)">About</div>
        <div class="amiga-nav-btn" onclick="switchTab(2)">Buy</div>
      </div>
      <div class="amiga-content">

        <!-- HOME -->
        <div class="page active" id="page-home">
          <div class="home-logo"><h1>RGBCat</h1><div class="sub">HOPE YOU LIKE CATS</div></div>
          <div class="image-placeholder">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Crect width='400' height='200' fill='white'/%3E%3C/svg%3E" alt="Image placeholder">
          </div>
          <div class="visitor-row">You are visitor # <span class="v-digit">0</span><span class="v-digit">0</span><span class="v-digit">4</span><span class="v-digit">8</span><span class="v-digit">2</span><span class="v-digit">7</span></div>
        </div>

        <!-- ABOUT -->
        <div class="page" id="page-about">
          <div class="amiga-panel">
            <div class="amiga-heading">About Us</div>
            <p class="amiga-text">RGBCat was founded in 1997 in a garage in Redmond by two college dropouts who believed that software should be both powerful and nostalgic. What started as a hobby project distributing shareware on 3.5" floppy disks has grown into a multinational operation spanning at least two rooms of our office.</p>
            <p class="amiga-text">Our mission is simple: deliver rock-solid software solutions that remind you of a simpler time — when installing a program meant swapping 14 floppy disks and crossing your fingers. We believe the best user interfaces were made in the late 80s, and we're not afraid to prove it.</p>
          </div>
          <div class="amiga-panel">
            <div class="amiga-heading-orange">Our Team</div>
            <div class="team-row">
              <div class="team-card"><div class="team-face">☻</div><div class="team-detail"><h4>Dave M.</h4><p>Founder &amp; CEO<br>"Chief Everything Officer"</p></div></div>
              <div class="team-card"><div class="team-face">☻</div><div class="team-detail"><h4>Sandra K.</h4><p>Lead Developer<br>Floppy Disk Whisperer</p></div></div>
              <div class="team-card"><div class="team-face">☻</div><div class="team-detail"><h4>Rick T.</h4><p>QA Engineer<br>"Have you tried rebooting?"</p></div></div>
              <div class="team-card"><div class="team-face">🐱</div><div class="team-detail"><h4>Pixel</h4><p>Office Cat<br>Morale &amp; Keyboard Dept.</p></div></div>
            </div>
          </div>
          <div class="amiga-panel">
            <div class="amiga-heading">Contact Us</div>
            <div class="contact-panel">
              <h3>⌨ GET IN TOUCH</h3>
              <div class="contact-line"><span class="c-label">EMAIL</span><a href="#">info@rgbcat.example.com</a></div>
              <div class="contact-line"><span class="c-label">BBS</span>rgbcat.bbs.example.com (14.4kbps)</div>
            </div>
          </div>
        </div>

        <!-- BUY -->
        <div class="page" id="page-buy">
          <div class="buy-header"><h2>OFFICIAL SELLERS</h2><p>Purchase RGBCat products from our trusted, authorized retailers.</p></div>
          <div class="seller-stack">
            <div class="seller-row"><div class="seller-left"><div class="seller-disk"></div><div class="seller-meta"><div class="seller-name">Amazon <span class="seller-badge">★ RECOMMENDED</span></div><div class="seller-desc">Free shipping on orders over $25. Prime eligible.</div></div></div><a href="#" class="amiga-btn" onclick="return false;">Visit ▸</a></div>
            <div class="seller-row"><div class="seller-left"><div class="seller-disk"></div><div class="seller-meta"><div class="seller-name">Best Buy</div><div class="seller-desc">Available in-store and online. Price match guarantee.</div></div></div><a href="#" class="amiga-btn" onclick="return false;">Visit ▸</a></div>
            <div class="seller-row"><div class="seller-left"><div class="seller-disk"></div><div class="seller-meta"><div class="seller-name">Micro Center</div><div class="seller-desc">In-store pickup available. Talk to a real human!</div></div></div><a href="#" class="amiga-btn" onclick="return false;">Visit ▸</a></div>
            <div class="seller-row"><div class="seller-left"><div class="seller-disk"></div><div class="seller-meta"><div class="seller-name">Newegg</div><div class="seller-desc">Combo deals &amp; bundle discounts available.</div></div></div><a href="#" class="amiga-btn" onclick="return false;">Visit ▸</a></div>
            <div class="seller-row"><div class="seller-left"><div class="seller-disk"></div><div class="seller-meta"><div class="seller-name">RGBCat Direct</div><div class="seller-desc">Order directly from us! Ships on 14 floppy disks.</div></div></div><a href="#" class="amiga-btn" onclick="return false;">Visit ▸</a></div>
          </div>
          <div class="warn-box"><div class="warn-icon">⚠</div><p><strong>SOFTWARE FAILURE:</strong> RGBCat is not responsible for purchases made through third-party sellers. Always verify you are purchasing from an authorized retailer. If your software arrives on more than 14 floppy disks, it may be a counterfeit. Press left mouse button to continue.</p></div>
        </div>

      </div>
      <div class="status-requester"><span id="status-text">Ready.</span><span>Chip: 847K  Fast: 3.2M</span></div>
      <div class="amiga-bottom-bar"><div class="amiga-resize-gadget"></div></div>
    </div>
  </div>
</div>
<script>
function switchTab(i){
  document.querySelectorAll('.amiga-nav-btn').forEach((b,j)=>b.classList.toggle('active',j===i));
  document.querySelectorAll('.page').forEach((p,j)=>p.classList.toggle('active',j===i));
  document.querySelectorAll('.disk-icon').forEach((d,j)=>d.classList.toggle('selected',j===i));
  document.getElementById('status-text').textContent=['Home — Welcome to RGBCat','About — Company Information','Buy — Official Sellers'][i]||'Ready.';
  document.getElementById('window-title').textContent=['RGBCat Explorer','About RGBCat','Buy RGBCat'][i]||'RGBCat Explorer';
}
function updateClock(){const d=new Date();document.getElementById('wb-clock').textContent=String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0')+':'+String(d.getSeconds()).padStart(2,'0')}
updateClock();setInterval(updateClock,1000);
let count=4827;setInterval(()=>{count++;const s=String(count).padStart(6,'0');document.querySelectorAll('.v-digit').forEach((d,i)=>{d.textContent=s[i]})},8000);
</script>
</body>
</html>
