From 20f956a72c91bc8f464894e491d7f0afb203a806 Mon Sep 17 00:00:00 2001
From: kfox <keven@fxq.one>
Date: Sun, 14 Dec 2025 14:07:26 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20WSB-themed=20HTML=20templa?=
 =?UTF-8?q?te=20with=20rockets=20and=20diamond=20hands?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 656 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 656 insertions(+)
 create mode 100644 templates/index.html
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..ef617f5
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,656 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>💎🙌 DIAMOND HANDS TRADING BOT 🙌💎</title>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Russo+One&family=Bangers&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --wsb-orange: #ff4500;
+            --moon-yellow: #ffd700;
+            --tendies-green: #00ff88;
+            --loss-red: #ff3366;
+            --degen-purple: #9b30ff;
+            --diamond-blue: #00d4ff;
+            --bg-dark: #0a0a0f;
+            --bg-card: #12121a;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Russo One', sans-serif;
+            background: var(--bg-dark);
+            color: #fff;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+
+        /* Animated background */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 
+                radial-gradient(ellipse at 20% 80%, rgba(255, 69, 0, 0.15) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 20%, rgba(155, 48, 255, 0.15) 0%, transparent 50%),
+                radial-gradient(ellipse at 50% 50%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .header {
+            text-align: center;
+            padding: 30px 20px;
+            background: linear-gradient(135deg, var(--wsb-orange) 0%, var(--degen-purple) 50%, var(--diamond-blue) 100%);
+            background-size: 200% 200%;
+            animation: gradient-shift 5s ease infinite;
+            border-bottom: 4px solid var(--moon-yellow);
+            box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
+        }
+
+        @keyframes gradient-shift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+        }
+
+        .header h1 {
+            font-family: 'Bangers', cursive;
+            font-size: 3rem;
+            text-shadow: 
+                3px 3px 0 #000,
+                -1px -1px 0 #000,
+                0 0 20px var(--moon-yellow);
+            letter-spacing: 4px;
+            animation: pulse-text 2s ease-in-out infinite;
+        }
+
+        @keyframes pulse-text {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+        }
+
+        .header .subtitle {
+            font-family: 'Press Start 2P', cursive;
+            font-size: 0.7rem;
+            margin-top: 10px;
+            opacity: 0.9;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .dashboard {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .card {
+            background: var(--bg-card);
+            border-radius: 16px;
+            padding: 24px;
+            border: 2px solid transparent;
+            background-clip: padding-box;
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 16px;
+            padding: 2px;
+            background: linear-gradient(135deg, var(--wsb-orange), var(--degen-purple), var(--diamond-blue));
+            -webkit-mask: 
+                linear-gradient(#fff 0 0) content-box, 
+                linear-gradient(#fff 0 0);
+            mask: 
+                linear-gradient(#fff 0 0) content-box, 
+                linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(255, 69, 0, 0.2);
+        }
+
+        .card-title {
+            font-family: 'Bangers', cursive;
+            font-size: 1.5rem;
+            color: var(--moon-yellow);
+            margin-bottom: 15px;
+            letter-spacing: 2px;
+        }
+
+        .stat-value {
+            font-size: 2.5rem;
+            font-weight: bold;
+            margin: 10px 0;
+        }
+
+        .stat-value.positive { color: var(--tendies-green); text-shadow: 0 0 20px var(--tendies-green); }
+        .stat-value.negative { color: var(--loss-red); text-shadow: 0 0 20px var(--loss-red); }
+        .stat-value.neutral { color: var(--diamond-blue); text-shadow: 0 0 20px var(--diamond-blue); }
+
+        .trade-button {
+            display: block;
+            width: 100%;
+            padding: 20px 40px;
+            font-family: 'Bangers', cursive;
+            font-size: 2rem;
+            color: #fff;
+            background: linear-gradient(135deg, var(--wsb-orange), var(--loss-red));
+            border: none;
+            border-radius: 12px;
+            cursor: pointer;
+            letter-spacing: 3px;
+            text-transform: uppercase;
+            transition: all 0.3s;
+            box-shadow: 0 10px 30px rgba(255, 69, 0, 0.4);
+            animation: button-glow 2s ease-in-out infinite;
+        }
+
+        @keyframes button-glow {
+            0%, 100% { box-shadow: 0 10px 30px rgba(255, 69, 0, 0.4); }
+            50% { box-shadow: 0 10px 50px rgba(255, 69, 0, 0.7); }
+        }
+
+        .trade-button:hover {
+            transform: scale(1.05);
+            background: linear-gradient(135deg, var(--tendies-green), var(--diamond-blue));
+        }
+
+        .trade-button:active {
+            transform: scale(0.98);
+        }
+
+        .auto-trade {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 15px;
+            margin-top: 15px;
+            font-size: 1.1rem;
+        }
+
+        .toggle-switch {
+            position: relative;
+            width: 60px;
+            height: 30px;
+        }
+
+        .toggle-switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: #333;
+            border-radius: 30px;
+            transition: 0.4s;
+        }
+
+        .toggle-slider::before {
+            position: absolute;
+            content: "";
+            height: 22px;
+            width: 22px;
+            left: 4px;
+            bottom: 4px;
+            background: white;
+            border-radius: 50%;
+            transition: 0.4s;
+        }
+
+        .toggle-switch input:checked + .toggle-slider {
+            background: linear-gradient(135deg, var(--tendies-green), var(--diamond-blue));
+        }
+
+        .toggle-switch input:checked + .toggle-slider::before {
+            transform: translateX(30px);
+        }
+
+        .trades-list {
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .trades-list::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        .trades-list::-webkit-scrollbar-track {
+            background: var(--bg-dark);
+            border-radius: 4px;
+        }
+
+        .trades-list::-webkit-scrollbar-thumb {
+            background: var(--degen-purple);
+            border-radius: 4px;
+        }
+
+        .trade-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 15px;
+            margin: 8px 0;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            border-left: 4px solid;
+            animation: slide-in 0.3s ease-out;
+        }
+
+        @keyframes slide-in {
+            from {
+                opacity: 0;
+                transform: translateX(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        .trade-item.buy { border-left-color: var(--tendies-green); }
+        .trade-item.sell { border-left-color: var(--loss-red); }
+
+        .trade-info {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .trade-ticker {
+            font-weight: bold;
+            font-size: 1.1rem;
+        }
+
+        .trade-details {
+            font-size: 0.85rem;
+            opacity: 0.7;
+        }
+
+        .trade-message {
+            font-size: 0.9rem;
+            color: var(--moon-yellow);
+        }
+
+        .trade-value {
+            text-align: right;
+        }
+
+        .trade-pnl {
+            font-weight: bold;
+        }
+
+        .trade-pnl.profit { color: var(--tendies-green); }
+        .trade-pnl.loss { color: var(--loss-red); }
+
+        .prices-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 10px;
+        }
+
+        .price-item {
+            text-align: center;
+            padding: 15px 10px;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            transition: transform 0.2s;
+        }
+
+        .price-item:hover {
+            transform: scale(1.05);
+            background: rgba(255, 255, 255, 0.1);
+        }
+
+        .price-ticker {
+            font-weight: bold;
+            font-size: 1rem;
+            color: var(--moon-yellow);
+        }
+
+        .price-value {
+            font-size: 0.85rem;
+            margin-top: 5px;
+            color: var(--diamond-blue);
+        }
+
+        .holdings-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .holding-item {
+            display: flex;
+            justify-content: space-between;
+            padding: 12px;
+            background: rgba(0, 212, 255, 0.1);
+            border-radius: 8px;
+            border: 1px solid rgba(0, 212, 255, 0.3);
+        }
+
+        .rocket-rain {
+            position: fixed;
+            pointer-events: none;
+            z-index: 1000;
+            font-size: 2rem;
+            animation: rocket-fly 2s ease-out forwards;
+        }
+
+        @keyframes rocket-fly {
+            0% {
+                opacity: 1;
+                transform: translateY(0) rotate(-45deg);
+            }
+            100% {
+                opacity: 0;
+                transform: translateY(-500px) rotate(-45deg);
+            }
+        }
+
+        .message-popup {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            font-family: 'Bangers', cursive;
+            font-size: 2.5rem;
+            color: var(--moon-yellow);
+            text-shadow: 3px 3px 0 #000, 0 0 30px var(--moon-yellow);
+            z-index: 1000;
+            animation: popup-message 1.5s ease-out forwards;
+            text-align: center;
+            white-space: nowrap;
+        }
+
+        @keyframes popup-message {
+            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
+            20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
+            40% { transform: translate(-50%, -50%) scale(1); }
+            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 30px;
+            opacity: 0.6;
+        }
+
+        .empty-state .emoji {
+            font-size: 3rem;
+            margin-bottom: 10px;
+        }
+
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 1.8rem;
+            }
+            .stat-value {
+                font-size: 1.8rem;
+            }
+            .trade-button {
+                font-size: 1.5rem;
+                padding: 15px 30px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="header">
+        <h1>💎🙌 DIAMOND HANDS BOT 🙌💎</h1>
+        <p class="subtitle">🚀 APE TOGETHER STRONG • TENDIES OR BUST 🚀</p>
+    </header>
+
+    <div class="container">
+        <div class="dashboard">
+            <div class="card">
+                <div class="card-title">💰 CASH BALANCE</div>
+                <div class="stat-value neutral" id="balance">$10,000.00</div>
+            </div>
+            <div class="card">
+                <div class="card-title">📊 PORTFOLIO VALUE</div>
+                <div class="stat-value neutral" id="total-value">$10,000.00</div>
+            </div>
+            <div class="card">
+                <div class="card-title">📈 TOTAL GAINS</div>
+                <div class="stat-value" id="total-gains">$0.00</div>
+            </div>
+        </div>
+
+        <div class="card" style="margin-bottom: 20px;">
+            <button class="trade-button" id="trade-btn" onclick="executeTrade()">
+                🎰 YOLO TRADE 🎰
+            </button>
+            <div class="auto-trade">
+                <span>🤖 AUTO-DEGEN MODE:</span>
+                <label class="toggle-switch">
+                    <input type="checkbox" id="auto-trade" onchange="toggleAutoTrade()">
+                    <span class="toggle-slider"></span>
+                </label>
+            </div>
+        </div>
+
+        <div class="dashboard">
+            <div class="card">
+                <div class="card-title">💹 LIVE PRICES</div>
+                <div class="prices-grid" id="prices-grid">
+                    <!-- Prices will be loaded here -->
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-title">🎒 YOUR BAGS</div>
+                <div class="holdings-list" id="holdings-list">
+                    <div class="empty-state">
+                        <div class="emoji">🦍</div>
+                        <p>No bags yet, ape!</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-title">📜 TRADE HISTORY</div>
+            <div class="trades-list" id="trades-list">
+                <div class="empty-state">
+                    <div class="emoji">🚀</div>
+                    <p>Hit that YOLO button to start trading!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let autoTradeInterval = null;
+
+        async function fetchPortfolio() {
+            try {
+                const res = await fetch('/api/portfolio');
+                const data = await res.json();
+                updateUI(data);
+            } catch (e) {
+                console.error('Failed to fetch portfolio:', e);
+            }
+        }
+
+        async function fetchPrices() {
+            try {
+                const res = await fetch('/api/prices');
+                const prices = await res.json();
+                updatePrices(prices);
+            } catch (e) {
+                console.error('Failed to fetch prices:', e);
+            }
+        }
+
+        function updateUI(data) {
+            // Update balance
+            document.getElementById('balance').textContent = `$${data.balance.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+            
+            // Update total value
+            document.getElementById('total-value').textContent = `$${data.total_value.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+            
+            // Update gains with color
+            const gainsEl = document.getElementById('total-gains');
+            const gains = data.total_gains;
+            gainsEl.textContent = `${gains >= 0 ? '+' : ''}$${gains.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
+            gainsEl.className = 'stat-value ' + (gains >= 0 ? 'positive' : 'negative');
+            
+            // Update holdings
+            const holdingsList = document.getElementById('holdings-list');
+            if (Object.keys(data.holdings).length === 0) {
+                holdingsList.innerHTML = `
+                    <div class="empty-state">
+                        <div class="emoji">🦍</div>
+                        <p>No bags yet, ape!</p>
+                    </div>
+                `;
+            } else {
+                holdingsList.innerHTML = Object.entries(data.holdings).map(([ticker, info]) => `
+                    <div class="holding-item">
+                        <span><strong>${ticker}</strong></span>
+                        <span>${info.quantity.toLocaleString()} @ $${info.avg_price.toFixed(6)}</span>
+                    </div>
+                `).join('');
+            }
+            
+            // Update trades
+            const tradesList = document.getElementById('trades-list');
+            if (data.trades.length === 0) {
+                tradesList.innerHTML = `
+                    <div class="empty-state">
+                        <div class="emoji">🚀</div>
+                        <p>Hit that YOLO button to start trading!</p>
+                    </div>
+                `;
+            } else {
+                tradesList.innerHTML = data.trades.map(trade => `
+                    <div class="trade-item ${trade.action.toLowerCase()}">
+                        <div class="trade-info">
+                            <span class="trade-ticker">${trade.action} ${trade.ticker}</span>
+                            <span class="trade-details">${trade.quantity.toLocaleString()} @ $${trade.price}</span>
+                            <span class="trade-message">${trade.message}</span>
+                        </div>
+                        <div class="trade-value">
+                            <div>$${trade.value.toLocaleString()}</div>
+                            ${trade.pnl !== 0 ? `<div class="trade-pnl ${trade.pnl >= 0 ? 'profit' : 'loss'}">${trade.pnl >= 0 ? '+' : ''}$${trade.pnl.toFixed(2)}</div>` : ''}
+                            <div style="font-size: 0.75rem; opacity: 0.6;">${trade.timestamp}</div>
+                        </div>
+                    </div>
+                `).join('');
+            }
+        }
+
+        function updatePrices(prices) {
+            const grid = document.getElementById('prices-grid');
+            grid.innerHTML = Object.entries(prices).map(([ticker, price]) => `
+                <div class="price-item">
+                    <div class="price-ticker">${ticker}</div>
+                    <div class="price-value">$${price < 0.01 ? price.toFixed(8) : price.toFixed(2)}</div>
+                </div>
+            `).join('');
+        }
+
+        async function executeTrade() {
+            const btn = document.getElementById('trade-btn');
+            btn.disabled = true;
+            btn.textContent = '🎲 ROLLING... 🎲';
+            
+            try {
+                const res = await fetch('/api/trade', { method: 'POST' });
+                const trade = await res.json();
+                
+                if (trade.error) {
+                    showMessage(trade.error);
+                } else {
+                    showMessage(trade.message);
+                    spawnRockets();
+                }
+                
+                await fetchPortfolio();
+            } catch (e) {
+                console.error('Trade failed:', e);
+                showMessage('💀 TRADE FAILED 💀');
+            }
+            
+            btn.disabled = false;
+            btn.textContent = '🎰 YOLO TRADE 🎰';
+        }
+
+        function showMessage(msg) {
+            const popup = document.createElement('div');
+            popup.className = 'message-popup';
+            popup.textContent = msg;
+            document.body.appendChild(popup);
+            
+            setTimeout(() => popup.remove(), 1500);
+        }
+
+        function spawnRockets() {
+            for (let i = 0; i < 5; i++) {
+                setTimeout(() => {
+                    const rocket = document.createElement('div');
+                    rocket.className = 'rocket-rain';
+                    rocket.textContent = '🚀';
+                    rocket.style.left = Math.random() * window.innerWidth + 'px';
+                    rocket.style.top = window.innerHeight + 'px';
+                    document.body.appendChild(rocket);
+                    
+                    setTimeout(() => rocket.remove(), 2000);
+                }, i * 100);
+            }
+        }
+
+        function toggleAutoTrade() {
+            const isAuto = document.getElementById('auto-trade').checked;
+            
+            if (isAuto) {
+                showMessage('🤖 DEGEN MODE ACTIVATED! 🤖');
+                autoTradeInterval = setInterval(executeTrade, 2000);
+            } else {
+                showMessage('🛑 DEGEN MODE OFF 🛑');
+                clearInterval(autoTradeInterval);
+                autoTradeInterval = null;
+            }
+        }
+
+        // Initial load
+        fetchPortfolio();
+        fetchPrices();
+        
+        // Refresh prices every 5 seconds
+        setInterval(fetchPrices, 5000);
+    </script>
+</body>
+</html>
