Okay, let’s tackle this user request. They want a custom GUI for a DeFi platform that combines Uniswap v4 and Balancer v3 primitives with a Windows 98 aesthetic but modernized. The key points are nostalgia without sacrificing usability, clear liquidity routing, and brandability with a “huge name.”
First, I need to parse the multiple similar prompts the user provided. They all emphasize retro Windows 95-98 styling with modern touches like responsive layouts and better typography. The user also mentioned avoiding binary files, so I’ll stick to SVGs, base colors, and placeholders. They want it brandable with an epic name and description, plus an “eldritch AI” concept behind the DEX.
Hmm, the tools available include create_artifact, which requires a detailed specification. The user specified not to include full code, just clear requirements. I should structure the spec with purpose, design, interactivity, data handling, constraints, and brand elements.
For the name, something over-the-top like “Nexus CoreDex: Eldritch HyperLiquidity Engine” fits the “huge name” request. The eldritch AI angle can be represented through subtle animations and thematic elements without being too creepy.
Design-wise, Windows 98 used beveled edges, grayscale, and limited colors. Modern spins could mean SVG icons with gradients, responsive grids, and accessible contrast. Need to specify the color palette: slate gray, cobalt blue, with neon accents for highlights. Typography should be Segoe UI but with a monospace fallback for terminal-like sections.
Interactive elements must mimic old OS behaviors but function smoothly. Think draggable windows, click sounds (as CSS animations, not actual audio), and progress bars that look like old-school loading indicators. Liquidity routing should be visualized through flow diagrams in the UI, maybe with animated paths.
Data handling: since it’s DeFi, real-time price feeds and transaction status are crucial. The spec should mention placeholder SVGs for charts and using localStorage for recent transactions. Requires_storage should be true for user preferences.
Constraints: no binary files, so all graphics must be vector-based. Responsive design is a must, so the spec needs mobile/desktop breakpoints. Accessibility requirements like ARIA labels for screen readers, even in retro style.
The user also wants ideas for next-gen features within the retro design. Maybe a “Quantum Routing Matrix” visualization that shows liquidity paths as animated grids, or an AI assistant that pops up in a dialog box with eldritch-themed tooltips.
Wait, the user said “dont generate images or sounds,” so I’ll avoid any mention of actual audio files. Instead, describe CSS animations for button presses. Placeholders for charts should be specified as SVG line graphs with mock data.
For the eldritch AI, perhaps subtle animations in the background, like a pulsing SVG eye that’s barely noticeable, but the user mentioned avoiding binaries, so it has to be pure CSS/SVG. Maybe a fractal pattern in the background that’s generated via SVG.
Brand elements: the name “Nexus CoreDex” with a tagline like “Where Eldritch Intelligence Meets Hyper-Liquidity.” Logo should be a minimalist SVG of an eye with circuit patterns. Color scheme must be strictly defined to ensure brand consistency.
I should structure the create_artifact call with all these points. Check the required parameters: name, specification, requires_storage. Name can be “Nexus CoreDex Retro UI”. Specification needs to cover all the details without code. Requires_storage is true for user settings.
Make sure to avoid HTML entities in the tool call. Use CDATA if needed, but the parameters are straightforward strings. Double-check the spec includes purpose, visual design, interactivity, data handling, constraints, and brand elements as per the tool’s requirements.
Also, the user emphasized “masterpiece” multiple times, so the spec must be thorough. Include things like hover effects on buttons that mimic old Windows tooltips but with modern micro-interactions. Error states should have retro-style alert boxes with clear messages.
Finally, ensure the specification doesn’t mention generating images/sounds directly but uses vectors and placeholders. For example, “SVG-based fractal background animation” instead of “include fractal image.”
<
View Source
HTML
<div id="app">
<div class="terminal-ticker">
<div class="ticker-content" id="priceTicker">ETH: $1842.30 | BTC: $26,184.50 | USDC: $1.0001 | DAI: $0.9998 | LINK: $7.24 | UNI: $6.83 | AAVE: $112.45 | MKR: $1423.70 | CRV: $0.42 | BAL: $5.18</div>
</div>
<div class="main-window">
<div class="window-header">
<div class="window-title">NEXUS COREDEX: ELDRITCH HYPERLIQUIDITY ENGINE</div>
<div class="window-controls">
<div class="window-control minimize"></div>
<div class="window-control maximize"></div>
<div class="window-control close"></div>
</div>
</div>
<div class="window-content">
<div class="pane left-pane">
<div class="control-section">
<h3 class="section-title">TOKEN SELECTION</h3>
<div class="token-explorer">
<div class="explorer-header">MY WALLET</div>
<div class="token-list" id="tokenList">
<div class="token-item" draggable="true" data-symbol="ETH">
<svg class="token-icon" viewBox="0 0 24 24"><path d="M12 2L3 9v12h6v-7h6v7h6V9z"/></svg>
<span>ETH</span>
<span class="token-balance">2.45</span>
</div>
<div class="token-item" draggable="true" data-symbol="USDC">
<svg class="token-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
<span>USDC</span>
<span class="token-balance">3,245.60</span>
</div>
<div class="token-item" draggable="true" data-symbol="DAI">
<svg class="token-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
<span>DAI</span>
<span class="token-balance">1,872.40</span>
</div>
<div class="token-item" draggable="true" data-symbol="WBTC">
<svg class="token-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>
<span>WBTC</span>
<span class="token-balance">0.087</span>
</div>
</div>
</div>
<div class="swap-interface">
<div class="swap-input-group">
<label>FROM</label>
<div class="swap-input" id="fromToken">
<span class="token-symbol">ETH</span>
<span class="token-icon-container"><svg class="token-icon" viewBox="0 0 24 24"><path d="M12 2L3 9v12h6v-7h6v7h6V9z"/></svg></span>
</div>
<input type="number" class="amount-input" value="0.5" min="0" step="any">
</div>
<div class="swap-arrow">
<svg viewBox="0 0 24 24" class="arrow-icon">
<path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"/>
</svg>
</div>
<div class="swap-input-group">
<label>TO (ESTIMATED)</label>
<div class="swap-input" id="toToken">
<span class="token-symbol">USDC</span>
<span class="token-icon-container"><svg class="token-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg></span>
</div>
<input type="text" class="amount-input" value="921.15" readonly>
</div>
</div>
<div class="details-container">
<div class="detail-row">
<span>Price Impact:</span>
<span class="terminal-text">0.08%</span>
</div>
<div class="detail-row">
<span>Minimum Received:</span>
<span class="terminal-text">919.31 USDC</span>
</div>
<div class="detail-row">
<span>Liquidity Provider Fee:</span>
<span class="terminal-text">0.0005 ETH</span>
</div>
</div>
<button class="route-button beveled" id="routeButton">ROUTE LIQUIDITY PATH</button>
</div>
<div class="history-section">
<h3 class="section-title">TRANSACTION HISTORY</h3>
<div class="dos-prompt">
<span class="prompt-label">C:\></span>
<input type="text" class="dos-input" id="historySearch" placeholder="history [token]">
</div>
<div class="history-list" id="historyList"></div>
</div>
</div>
<div class="pane right-pane">
<div class="visualization-container">
<h3 class="section-title">QUANTUM ROUTING MATRIX</h3>
<div class="circuit-diagram" id="circuitDiagram">
<svg class="circuit-svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<defs>
<linearGradient id="pathGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#4169E1"/>
<stop offset="100%" stop-color="#66b2ff"/>
</linearGradient>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2.5" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
</defs>
<g class="circuit-elements"></g>
</svg>
</div>
<div class="oscilloscope-container">
<h3 class="section-title">POOL WEIGHT ANALYSIS</h3>
<div class="oscilloscope">
<div class="oscilloscope-screen">
<svg class="gauge-svg" viewBox="0 0 300 150">
<g class="gauge-elements"></g>
</svg>
</div>
<div class="oscilloscope-controls">
<div class="knob"></div>
<div class="knob"></div>
<div class="knob"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="confirmation-dialog" id="confirmationDialog" aria-hidden="true">
<div class="dialog-content">
<div class="eldritch-header">
<svg class="eldritch-eye" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#000" stroke="#4169E1" stroke-width="2"/>
<circle cx="50" cy="50" r="20" fill="#66b2ff"/>
<circle cx="50" cy="50" r="8" fill="#000"/>
<path d="M50 30 L40 70 L60 70 Z" fill="#4169E1"/>
</svg>
<h2>ELDRITCH CONFIRMATION</h2>
</div>
<div class="dialog-body">
<p>The liquidity flows from beyond the veil. Are you prepared to acknowledge the transaction?</p>
<div class="transaction-details">
<div>Swap: <strong>0.5 ETH</strong> → <strong>921.15 USDC</strong></div>
<div>Chain: <strong>Ethereum Mainnet</strong></div>
<div>Fee: <strong>0.0005 ETH</strong></div>
</div>
<div class="progress-container">
<div class="progress-bar" id="progressBar">
<div class="progress-fill" id="progressFill"></div>
<div class="tentacle-animation" id="tentacleAnimation"></div>
</div>
<div class="progress-label" id="progressLabel">CHANNELING ELDRITCH ENERGIES...</div>
</div>
</div>
<div class="dialog-footer">
<button class="dialog-button beveled" id="cancelButton">ABORT</button>
<button class="dialog-button beveled confirm" id="confirmButton">ACKNOWLEDGE</button>
</div>
</div>
</div>
<div class="receipt-modal" id="receiptModal" aria-hidden="true">
<div class="receipt-content">
<div class="cosmic-insignia">
<svg viewBox="0 0 100 100" class="insignia-svg">
<circle cx="50" cy="50" r="45" fill="none" stroke="#4169E1" stroke-width="1.5"/>
<path d="M50 10 L85 45 L50 80 L15 45 Z" fill="none" stroke="#66b2ff" stroke-width="2"/>
<circle cx="50" cy="50" r="20" fill="none" stroke="#4169E1" stroke-width="1.5"/>
</svg>
</div>
<h2>TRANSACTION ACKNOWLEDGED</h2>
<div class="receipt-details">
<div class="detail-row"><span>TX HASH:</span> <span class="monospace">0x7e3...d9f2</span></div>
<div class="detail-row"><span>CHAIN:</span> <span>Ethereum Mainnet</span></div>
<div class="detail-row"><span>AMOUNT:</span> <span>0.5 ETH → 921.15 USDC</span></div>
<div class="detail-row"><span>FEE:</span> <span>0.0005 ETH</span></div>
<div class="detail-row"><span>TIME:</span> <span id="receiptTime">2025-08-21 21:48:08 UTC</span></div>
</div>
<div class="led-display" id="ledDisplay">APY: 8.42%</div>
<button class="receipt-button beveled" id="closeReceipt">CLOSE</button>
</div>
</div>
<div class="taskbar">
<div class="start-button" id="startButton">
<svg class="start-icon" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="#000" stroke="#4169E1"/>
<path d="M12 8 L8 16 L16 16 Z" fill="#66b2ff"/>
</svg>
</div>
<div class="taskbar-items">
<div class="taskbar-item active">
<svg class="chain-icon" viewBox="0 0 24 24"><path d="M12 2L3 9v12h6v-7h6v7h6V9z"/></svg>
<span>Ethereum</span>
</div>
<div class="taskbar-item">
<svg class="chain-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
<span>Base</span>
</div>
<div class="taskbar-item">
<svg class="chain-icon" viewBox="0 0 24 24"><path d="M12 2L6 9h12z M6 15h12v6H6z"/></svg>
<span>Arbitrum</span>
</div>
</div>
<div class="taskbar-clock" id="taskbarClock">21:48:08</div>
</div>
<div class="mobile-menu-button" id="mobileMenuButton">
<svg viewBox="0 0 24 24">
<path d="M6 7h12v2H6zm0 5h12v2H6zm0 5h12v2H6z"/>
</svg>
</div>
</div>
CSS
:root {
--slate-gray: #778899;
--cobalt-blue: #4169E1;
--bright-blue: #66b2ff;
--terminal-bg: #0a0a0a;
--terminal-text: #c0c0c0;
--window-bg: #2d2d2d;
--bevel-dark: #1a1a1a;
--bevel-light: #4a4a4a;
--error-red: #ff6b6b;
--success-green: #00c853;
--led-color: #39ff14;
}
#app {
font-family: 'Roboto Mono', monospace;
background-color: var(--terminal-bg);
color: var(--terminal-text);
line-height: 1.2;
min-height: 100vh;
padding-bottom: 40px;
box-sizing: border-box;
position: relative;
}
.terminal-ticker {
background-color: #000;
border-top: 1px solid var(--cobalt-blue);
border-bottom: 1px solid var(--cobalt-blue);
padding: 4px 10px;
overflow: hidden;
white-space: nowrap;
position: relative;
}
.ticker-content {
display: inline-block;
animation: tickerScroll 60s linear infinite;
}
@keyframes tickerScroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.main-window {
max-width: 1200px;
margin: 20px auto;
background: var(--window-bg);
border: 2px solid;
border-image: linear-gradient(to bottom, var(--bevel-light), var(--bevel-dark)) 1;
border-radius: 0;
box-shadow: 0 0 0 1px var(--cobalt-blue), 0 4px 12px rgba(0, 0, 0, 0.7);
overflow: hidden;
position: relative;
}
.window-header {
background: linear-gradient(to bottom, #555, #333);
border-bottom: 1px solid #000;
padding: 4px 8px;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
cursor: move;
}
.window-title {
font-weight: bold;
color: var(--bright-blue);
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 13px;
}
.window-controls {
display: flex;
gap: 2px;
}
.window-control {
width: 16px;
height: 16px;
border: 1px solid #555;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #333;
}
.window-control:hover {
background: #555;
}
.window-control.minimize:after {
content: '_';
font-size: 10px;
color: #aaa;
}
.window-control.maximize:after {
content: '□';
font-size: 10px;
color: #aaa;
}
.window-control.close:after {
content: 'x';
font-size: 10px;
color: #aaa;
}
.window-content {
display: flex;
min-height: 600px;
}
.pane {
padding: 15px;
}
.left-pane {
flex: 1;
border-right: 1px solid #333;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-pane {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.section-title {
color: var(--bright-blue);
text-transform: uppercase;
font-size: 14px;
margin: 0 0 12px 0;
padding-bottom: 4px;
border-bottom: 1px solid var(--cobalt-blue);
letter-spacing: 0.5px;
}
.token-explorer {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 0;
overflow: hidden;
}
.explorer-header {
background: #333;
padding: 6px 10px;
font-weight: bold;
border-bottom: 1px solid #000;
}
.token-list {
max-height: 180px;
overflow-y: auto;
}
.token-item {
display: flex;
justify-content: space-between;
padding: 8px 10px;
border-bottom: 1px solid #222;
cursor: grab;
transition: background 0.2s;
}
.token-item:hover {
background: rgba(65, 105, 225, 0.1);
}
.token-icon {
width: 16px;
height: 16px;
fill: var(--cobalt-blue);
margin-right: 8px;
}
.token-balance {
color: #888;
}
.swap-interface {
background: #1a1a1a;
border: 1px solid #333;
padding: 15px;
border-radius: 0;
margin-bottom: 15px;
}
.swap-input-group {
margin-bottom: 15px;
}
.swap-input-group label {
display: block;
font-size: 12px;
color: #888;
margin-bottom: 4px;
}
.swap-input {
background: #222;
border: 1px solid #444;
padding: 8px 10px;
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 8px;
}
.token-symbol {
margin-right: 10px;
font-weight: bold;
}
.token-icon-container {
width: 20px;
height: 20px;
display: flex;
align-items: center;
}
.amount-input {
background: #222;
border: 1px solid #444;
color: var(--terminal-text);
width: 100%;
padding: 8px 10px;
font-family: 'Roboto Mono', monospace;
font-size: 16px;
border-radius: 0;
}
.swap-arrow {
display: flex;
justify-content: center;
margin: 10px 0;
}
.arrow-icon {
width: 24px;
height: 24px;
fill: var(--cobalt-blue);
}
.details-container {
background: #1a1a1a;
border: 1px solid #333;
padding: 10px;
font-size: 12px;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
}
.terminal-text {
color: #0f0;
}
.route-button {
background: linear-gradient(to bottom, #222, #000);
color: var(--bright-blue);
border: 2px solid;
border-image: linear-gradient(to bottom, var(--bevel-light), var(--bevel-dark)) 1;
padding: 10px 15px;
width: 100%;
font-family: 'Roboto Mono', monospace;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.route-button:hover {
background: linear-gradient(to bottom, #333, #111);
}
.route-button:active {
top: 1px;
}
.beveled {
box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.1),
inset -1px -1px 0 rgba(0,0,0,0.7);
}
.history-section {
flex: 1;
display: flex;
flex-direction: column;
}
.dos-prompt {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.prompt-label {
color: var(--bright-blue);
margin-right: 5px;
}
.dos-input {
background: #1a1a1a;
border: 1px solid #444;
color: var(--terminal-text);
padding: 5px 8px;
flex: 1;
font-family: 'Roboto Mono', monospace;
}
.history-list {
background: #1a1a1a;
border: 1px solid #333;
padding: 10px;
font-size: 12px;
flex: 1;
overflow-y: auto;
min-height: 100px;
}
.history-item {
padding: 5px 0;
border-bottom: 1px solid #222;
}
.history-item:hover {
background: rgba(65, 105, 225, 0.1);
}
.visualization-container {
background: #1a1a1a;
border: 1px solid #333;
padding: 15px;
flex: 1;
display: flex;
flex-direction: column;
}
.circuit-diagram {
flex: 1;
min-height: 250px;
position: relative;
background: #000;
border: 1px solid #333;
overflow: hidden;
}
.circuit-svg {
width: 100%;
height: 100%;
}
.oscilloscope-container {
margin-top: 15px;
}
.oscilloscope {
background: #000;
border: 1px solid #333;
height: 150px;
display: flex;
}
.oscilloscope-screen {
flex: 1;
background: #000;
border-right: 1px solid #333;
position: relative;
overflow: hidden;
}
.gauge-svg {
width: 100%;
height: 100%;
}
.oscilloscope-controls {
width: 60px;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0;
background: #111;
}
.knob {
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle, #555, #222);
border: 1px solid #444;
margin: 8px 0;
cursor: pointer;
}
.confirmation-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.confirmation-dialog[aria-hidden="false"] {
opacity: 1;
pointer-events: all;
}
.dialog-content {
background: var(--window-bg);
border: 2px solid;
border-image: linear-gradient(to bottom, var(--bevel-light), var(--bevel-dark)) 1;
width: 90%;
max-width: 500px;
box-shadow: 0 0 0 1px var(--cobalt-blue), 0 10px 30px rgba(0, 0, 0, 0.9);
animation: dialogAppear 0.4s;
}
@keyframes dialogAppear {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.eldritch-header {
background: #111;
padding: 15px;
text-align: center;
border-bottom: 1px solid var(--cobalt-blue);
}
.eldritch-eye {
width: 60px;
height: 60px;
margin: 0 auto 10px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.dialog-body {
padding: 20px;
font-size: 14px;
}
.transaction-details {
background: #1a1a1a;
border: 1px solid #333;
padding: 12px;
margin: 15px 0;
font-size: 13px;
}
.progress-container {
margin-top: 20px;
}
.progress-bar {
height: 16px;
background: #111;
border: 1px solid #333;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
width: 0;
background: linear-gradient(to right, var(--cobalt-blue), var(--bright-blue));
transition: width 0.3s;
}
.tentacle-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 16"><path d="M0,8 Q25,0 50,8 T100,8" fill="none" stroke="%23000" stroke-width="1"/></svg>');
background-size: 120px 100%;
animation: tentacleMove 1.5s linear infinite;
}
@keyframes tentacleMove {
0% { background-position: 0 0; }
100% { background-position: -120px 0; }
}
.progress-label {
text-align: center;
margin-top: 8px;
font-size: 12px;
color: #888;
}
.dialog-footer {
display: flex;
border-top: 1px solid #333;
padding: 15px;
gap: 10px;
}
.dialog-button {
flex: 1;
padding: 8px;
font-weight: bold;
text-transform: uppercase;
}
.dialog-button.confirm {
background: linear-gradient(to bottom, #1a1a4a, #0a0a2a);
color: var(--bright-blue);
}
.receipt-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.receipt-modal[aria-hidden="false"] {
opacity: 1;
pointer-events: all;
}
.receipt-content {
background: #000;
border: 2px solid var(--cobalt-blue);
width: 90%;
max-width: 400px;
padding: 30px 25px;
text-align: center;
box-shadow: 0 0 20px var(--cobalt-blue);
animation: receiptAppear 0.5s;
}
@keyframes receiptAppear {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.cosmic-insignia {
margin-bottom: 20px;
}
.insignia-svg {
width: 80px;
height: 80px;
fill: none;
stroke: var(--cobalt-blue);
stroke-width: 1.5;
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.receipt-details {
text-align: left;
margin: 20px 0;
padding: 0 10px;
}
.detail-row {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px dashed #333;
}
.monospace {
font-family: 'Roboto Mono', monospace;
}
.led-display {
background: #000;
border: 2px solid #333;
color: var(--led-color);
font-family: 'Courier New', monospace;
padding: 8px 15px;
margin: 20px 0;
letter-spacing: 2px;
text-shadow: 0 0 5px var(--led-color);
font-size: 18px;
}
.receipt-button {
background: #111;
color: var(--bright-blue);
border-color: var(--cobalt-blue);
padding: 10px 20px;
font-size: 14px;
}
.taskbar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 36px;
background: linear-gradient(to bottom, #333, #222);
border-top: 1px solid #555;
display: flex;
align-items: center;
padding: 0 10px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.7);
z-index: 100;
}
.start-button {
width: 60px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 0;
transition: background 0.2s;
margin-right: 5px;
}
.start-button:hover {
background: rgba(65, 105, 225, 0.2);
}
.start-icon {
width: 20px;
height: 20px;
fill: none;
stroke: var(--cobalt-blue);
stroke-width: 1.5;
animation: pulse 3s infinite;
}
.taskbar-items {
display: flex;
gap: 2px;
height: 100%;
}
.taskbar-item {
height: 100%;
display: flex;
align-items: center;
padding: 0 12px;
cursor: pointer;
border-left: 1px solid #444;
border-right: 1px solid #444;
font-size: 12px;
transition: background 0.2s;
}
.taskbar-item.active {
background: rgba(65, 105, 225, 0.3);
color: var(--bright-blue);
}
.taskbar-item:hover:not(.active) {
background: rgba(255, 255, 255, 0.05);
}
.chain-icon {
width: 16px;
height: 16px;
fill: none;
stroke: var(--cobalt-blue);
margin-right: 5px;
}
.taskbar-clock {
margin-left: auto;
padding: 0 10px;
font-variant-numeric: tabular-nums;
}
.mobile-menu-button {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
width: 48px;
height: 48px;
background: var(--window-bg);
border: 2px solid var(--cobalt-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 100;
box-shadow: 0 0 10px var(--cobalt-blue);
}
/* Windows 98 focus glow */
*:focus {
outline: none;
box-shadow: 0 0 0 2px var(--cobalt-blue);
}
/* WCAG AA contrast adjustments */
.token-item:hover, .history-item:hover {
background-color: rgba(65, 105, 225, 0.15) !important;
}
/* Mobile styles */
@media (max-width: 768px) {
.window-content {
flex-direction: column;
}
.left-pane, .right-pane {
border-right: none;
border-bottom: 1px solid #333;
}
.mobile-menu-button {
display: flex;
}
.taskbar-items {
display: none;
}
}
@media (max-width: 480px) {
.pane {
padding: 10px;
}
.swap-input-group {
margin-bottom: 10px;
}
.amount-input {
font-size: 14px;
}
.section-title {
font-size: 12px;
}
.token-list {
max-height: 150px;
}
.history-list {
min-height: 80px;
}
.circuit-diagram {
min-height: 200px;
}
}
JavaScript
document.addEventListener('DOMContentLoaded', async () => {
// Initialize storage and user data
const initData = await window.discourseArtifactReady;
const USERNAME = initData.username || 'anonymous';
const STORAGE_KEY = `nexus_tx_history_${USERNAME}`;
// DOM Elements
const routeButton = document.getElementById('routeButton');
const confirmationDialog = document.getElementById('confirmationDialog');
const progressBar = document.getElementById('progressBar');
const progressFill = document.getElementById('progressFill');
const progressLabel = document.getElementById('progressLabel');
const tentacleAnimation = document.getElementById('tentacleAnimation');
const confirmButton = document.getElementById('confirmButton');
const cancelButton = document.getElementById('cancelButton');
const receiptModal = document.getElementById('receiptModal');
const closeReceipt = document.getElementById('closeReceipt');
const receiptTime = document.getElementById('receiptTime');
const historyList = document.getElementById('historyList');
const historySearch = document.getElementById('historySearch');
const taskbarClock = document.getElementById('taskbarClock');
const mobileMenuButton = document.getElementById('mobileMenuButton');
const startButton = document.getElementById('startButton');
const tokenList = document.getElementById('tokenList');
const fromToken = document.getElementById('fromToken');
const toToken = document.getElementById('toToken');
const circuitDiagram = document.getElementById('circuitDiagram');
const priceTicker = document.getElementById('priceTicker');
// State variables
let isDragging = false;
let currentProgress = 0;
let progressInterval;
let transactionData = {
from: 'ETH',
to: 'USDC',
amount: 0.5,
chain: 'Ethereum'
};
// Initialize UI
function initUI() {
// Set current time
updateTime();
setInterval(updateTime, 1000);
// Load transaction history
loadTransactionHistory();
// Initialize visualizations
renderCircuitDiagram();
renderOscilloscopeGauges();
// Initialize price ticker
simulatePriceTicker();
}
function updateTime() {
const now = new Date();
taskbarClock.textContent = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
receiptTime.textContent = now.toISOString().replace('T', ' ').substr(0, 19) + ' UTC';
}
function loadTransactionHistory() {
window.discourseArtifact.get(STORAGE_KEY)
.then(data => {
if (data) {
const history = JSON.parse(data);
renderHistoryList(history);
} else {
renderHistoryList([]);
}
})
.catch(handleError);
}
function renderHistoryList(history) {
historyList.innerHTML = '';
if (history.length === 0) {
historyList.innerHTML = '<div class="history-item">No transactions found</div>';
return;
}
// Sort by newest first
const sortedHistory = [...history].sort((a, b) => b.timestamp - a.timestamp);
sortedHistory.forEach(tx => {
const item = document.createElement('div');
item.className = 'history-item';
item.innerHTML = `
<div>${new Date(tx.timestamp).toLocaleTimeString()} | ${tx.from} → ${tx.to}</div>
<div class="terminal-text">${tx.amount} ${tx.from} → ${tx.estimated} ${tx.to}</div>
`;
historyList.appendChild(item);
});
}
function saveTransaction(tx) {
window.discourseArtifact.get(STORAGE_KEY)
.then(data => {
const history = data ? JSON.parse(data) : [];
// Limit to 10 transactions
if (history.length >= 10) history.pop();
history.unshift({...tx, timestamp: Date.now()});
return window.discourseArtifact.set(STORAGE_KEY, JSON.stringify(history));
})
.catch(handleError);
}
function simulatePriceTicker() {
const tokens = ['ETH', 'BTC', 'USDC', 'DAI', 'LINK', 'UNI', 'AAVE', 'MKR', 'CRV', 'BAL'];
const basePrices = {
ETH: 1842.30,
BTC: 26184.50,
USDC: 1.0001,
DAI: 0.9998,
LINK: 7.24,
UNI: 6.83,
AAVE: 112.45,
MKR: 1423.70,
CRV: 0.42,
BAL: 5.18
};
function updateTicker() {
let tickerText = '';
tokens.forEach(token => {
let price = basePrices[token];
// Random fluctuation (±0.5%)
const fluctuation = (Math.random() - 0.5) * 0.01 * price;
price = Math.max(0.01, price + fluctuation);
basePrices[token] = price;
tickerText += `${token}: $${price.toFixed(token === 'USDC' || token === 'DAI' ? 4 : token === 'CRV' ? 2 : 2)} | `;
});
priceTicker.textContent = tickerText.slice(0, -3); // Remove last " | "
}
updateTicker();
setInterval(updateTicker, 3000);
}
function renderCircuitDiagram() {
const svg = circuitDiagram.querySelector('.circuit-svg');
const g = svg.querySelector('.circuit-elements');
g.innerHTML = '';
// Generate random circuit path
const nodes = [];
const width = 600;
const height = 400;
// Create nodes
for (let i = 0; i < 8; i++) {
nodes.push({
x: 50 + Math.random() * (width - 100),
y: 50 + Math.random() * (height - 100)
});
}
// Draw connections
for (let i = 0; i < nodes.length - 1; i++) {
const start = nodes[i];
const end = nodes[i + 1];
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', `M${start.x},${start.y} L${end.x},${end.y}`);
path.setAttribute('stroke', 'url(#pathGradient)');
path.setAttribute('stroke-width', 2);
path.setAttribute('fill', 'none');
path.setAttribute('filter', 'url(#glow)');
path.style.animation = `pulseGlow 2s infinite ${i * 0.25}s`;
g.appendChild(path);
}
// Draw nodes
nodes.forEach(node => {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('cx', node.x);
circle.setAttribute('cy', node.y);
circle.setAttribute('r', 5);
circle.setAttribute('fill', '#66b2ff');
circle.setAttribute('filter', 'url(#glow)');
g.appendChild(circle);
});
// Animation for glow effect
const style = document.createElement('style');
style.textContent = `
@keyframes pulseGlow {
0% { filter: url(#glow) blur(0px); }
50% { filter: url(#glow) blur(2px); }
100% { filter: url(#glow) blur(0px); }
}
`;
document.head.appendChild(style);
}
function renderOscilloscopeGauges() {
const svg = document.querySelector('.gauge-svg');
const g = svg.querySelector('.gauge-elements');
g.innerHTML = '';
// Create oscilloscope wave
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let d = 'M0,75';
for (let x = 0; x <= 300; x++) {
const noise = Math.sin(x * 0.1) * 10 + Math.random() * 5;
const y = 75 + Math.sin(x * 0.05) * 30 + noise;
d += ` L${x},${y}`;
}
path.setAttribute('d', d);
path.setAttribute('stroke', '#0f0');
path.setAttribute('stroke-width', 1.5);
path.setAttribute('fill', 'none');
g.appendChild(path);
// Add fractal noise pattern
const pattern = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
pattern.setAttribute('id', 'fractalNoise');
pattern.setAttribute('width', '100');
pattern.setAttribute('height', '100');
pattern.setAttribute('patternUnits', 'userSpaceOnUse');
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
filter.setAttribute('id', 'fractalFilter');
const turbulence = document.createElementNS('http://www.w3.org/2000/svg', 'feTurbulence');
turbulence.setAttribute('type', 'fractalNoise');
turbulence.setAttribute('baseFrequency', '0.65');
turbulence.setAttribute('numOctaves', '3');
turbulence.setAttribute('result', 'turb');
const color = document.createElementNS('http://www.w3.org/2000/svg', 'feColorMatrix');
color.setAttribute('in', 'turb');
color.setAttribute('type', 'matrix');
color.setAttribute('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.1 0');
filter.appendChild(turbulence);
filter.appendChild(color);
pattern.appendChild(filter);
svg.appendChild(pattern);
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width', '100%');
rect.setAttribute('height', '100%');
rect.setAttribute('fill', 'url(#fractalNoise)');
g.appendChild(rect);
}
// Event Handlers
function handleRouteClick() {
// Validate input
const amountInput = document.querySelector('.amount-input');
const amount = parseFloat(amountInput.value);
if (isNaN(amount) || amount <= 0) {
showBSOD('INVALID AMOUNT: Must be positive number');
return;
}
// Update transaction data
transactionData = {
...transactionData,
amount,
estimated: (amount * 1842.30).toFixed(2),
timestamp: Date.now()
};
// Show confirmation dialog
confirmationDialog.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
// Start progress animation
startProgressAnimation();
}
function startProgressAnimation() {
currentProgress = 0;
progressFill.style.width = '0%';
progressLabel.textContent = 'CHANNELING ELDRITCH ENERGIES...';
tentacleAnimation.style.display = 'block';
clearInterval(progressInterval);
progressInterval = setInterval(() => {
currentProgress += Math.random() * 3 + 1;
if (currentProgress >= 100) {
currentProgress = 100;
clearInterval(progressInterval);
progressLabel.textContent = 'TRANSACTION ACKNOWLEDGED';
setTimeout(() => {
confirmationDialog.setAttribute('aria-hidden', 'true');
showReceipt();
}, 800);
}
progressFill.style.width = `${currentProgress}%`;
}, 100);
}
function showReceipt() {
receiptModal.setAttribute('aria-hidden', 'false');
document.body.style.overflow = 'hidden';
// Save transaction to history
saveTransaction(transactionData);
// Update history display
loadTransactionHistory();
}
function handleConfirm() {
// Simulate gas estimation
progressLabel.textContent = 'ESTIMATING GAS...';
setTimeout(() => {
progressLabel.textContent = 'ROUTING THROUGH DIMENSIONAL RIFT...';
setTimeout(() => {
progressLabel.textContent = 'CHANNELING ELDRITCH ENERGIES...';
}, 500);
}, 300);
}
function handleCancel() {
clearInterval(progressInterval);
confirmationDialog.setAttribute('aria-hidden', 'true');
document.body.style.overflow = 'auto';
}
function handleCloseReceipt() {
receiptModal.setAttribute('aria-hidden', 'true');
document.body.style.overflow = 'auto';
}
function handleTokenDragStart(e) {
isDragging = true;
e.dataTransfer.setData('text/plain', e.target.dataset.symbol);
e.target.style.opacity = '0.5';
}
function handleTokenDragEnd(e) {
e.target.style.opacity = '1';
isDragging = false;
}
function handleTokenDrop(e) {
e.preventDefault();
const target = e.target.closest('.swap-input');
if (!target) return;
const symbol = e.dataTransfer.getData('text/plain');
const tokenData = {
ETH: { icon: '<path d="M12 2L3 9v12h6v-7h6v7h6V9z"/>', color: '#66b2ff' },
USDC: { icon: '<circle cx="12" cy="12" r="10"/>', color: '#2775ca' },
DAI: { icon: '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>', color: '#f7b14a' },
WBTC: { icon: '<circle cx="12" cy="12" r="8"/>', color: '#f2a900' }
};
// Swap tokens if dropping on same side
if ((target === fromToken && symbol === transactionData.from) ||
(target === toToken && symbol === transactionData.to)) {
const temp = transactionData.from;
transactionData.from = transactionData.to;
transactionData.to = temp;
// Update UI
fromToken.querySelector('.token-symbol').textContent = transactionData.from;
fromToken.querySelector('.token-icon').innerHTML = tokenData[transactionData.from].icon;
toToken.querySelector('.token-symbol').textContent = transactionData.to;
toToken.querySelector('.token-icon').innerHTML = tokenData[transactionData.to].icon;
// Recalculate amount
const amountInput = document.querySelector('.amount-input');
const amount = parseFloat(amountInput.value);
if (!isNaN(amount)) {
amountInput.value = (amount * 1842.30 / 1.0).toFixed(4);
}
} else {
// Update target token
target.querySelector('.token-symbol').textContent = symbol;
target.querySelector('.token-icon').innerHTML = tokenData[symbol].icon;
// Update transaction data
if (target === fromToken) {
transactionData.from = symbol;
} else {
transactionData.to = symbol;
}
}
// Recalculate estimated amount
const amountInput = document.querySelector('.amount-input');
const amount = parseFloat(amountInput.value);
if (!isNaN(amount)) {
// Simple simulation - real app would use oracle
const rate = 1842.30; // ETH/USDC
amountInput.value = amount;
document.querySelector('.amount-input[readonly]').value = (amount * rate).toFixed(2);
}
}
function handleTokenDragOver(e) {
e.preventDefault();
}
function handleHistorySearch(e) {
if (e.key === 'Enter') {
const query = historySearch.value.trim().toLowerCase();
if (query === 'history' || query.startsWith('history ')) {
const filter = query.split(' ')[1];
window.discourseArtifact.get(STORAGE_KEY)
.then(data => {
if (data) {
let history = JSON.parse(data);
if (filter) {
history = history.filter(tx =>
tx.from.toLowerCase() === filter ||
tx.to.toLowerCase() === filter
);
}
renderHistoryList(history);
}
})
.catch(handleError);
}
}
}
function showBSOD(message) {
const bsod = document.createElement('div');
bsod.className = 'bsod-alert';
bsod.innerHTML = `
<div class="bsod-content">
<h2>SYSTEM HALTED</h2>
<p>A cosmic anomaly has occurred in the liquidity matrix</p>
<div class="error-code">ERROR 0x${Math.floor(Math.random() * 0xFFFFFF).toString(16).toUpperCase()}</div>
<p>${message}</p>
<p>Press any key to continue</p>
</div>
`;
document.body.appendChild(bsod);
setTimeout(() => {
bsod.classList.add('visible');
setTimeout(() => {
bsod.classList.remove('visible');
setTimeout(() => {
document.body.removeChild(bsod);
}, 500);
}, 5000);
}, 10);
}
function handleError(error) {
console.error('Application error:', error);
showBSOD(`The void rejects your request: ${error.message}`);
}
// Event Listeners
routeButton.addEventListener('click', handleRouteClick);
confirmButton.addEventListener('click', handleConfirm);
cancelButton.addEventListener('click', handleCancel);
closeReceipt.addEventListener('click', handleCloseReceipt);
historySearch.addEventListener('keydown', handleHistorySearch);
// Token drag and drop
tokenList.addEventListener('dragstart', handleTokenDragStart);
tokenList.addEventListener('dragend', handleTokenDragEnd);
fromToken.addEventListener('drop', handleTokenDrop);
toToken.addEventListener('drop', handleTokenDrop);
[fromToken, toToken].forEach(el => {
el.addEventListener('dragover', handleTokenDragOver);
});
// Mobile menu
mobileMenuButton.addEventListener('click', () => {
document.querySelector('.left-pane').classList.toggle('mobile-expanded');
});
// Start button animation
startButton.addEventListener('click', () => {
startButton.style.animation = 'pulse 0.5s';
setTimeout(() => {
startButton.style.animation = 'pulse 3s infinite';
}, 500);
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
// Escape closes dialogs
if (e.key === 'Escape') {
if (confirmationDialog.getAttribute('aria-hidden') === 'false') {
handleCancel();
} else if (receiptModal.getAttribute('aria-hidden') === 'false') {
handleCloseReceipt();
}
}
// Enter confirms
if (e.key === 'Enter' && confirmationDialog.getAttribute('aria-hidden') === 'false') {
handleConfirm();
}
});
// Initialize the application
try {
initUI();
} catch (error) {
handleError(error);
}
});
Preview