mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-27 17:56:25 +02:00
318 lines
16 KiB
HTML
318 lines
16 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>SurfSense v2 - Design Directions</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: 'class',
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
// Shared Core
|
||
|
|
background: '#0B1221', // Deep Navy/Dark Gray compromise
|
||
|
|
foreground: '#ffffff',
|
||
|
|
card: '#111827', // Gray 900
|
||
|
|
border: '#1f2937', // Gray 800
|
||
|
|
|
||
|
|
// Option A: Safe Pro (Muted)
|
||
|
|
'safe-success': '#10b981', // Emerald 500
|
||
|
|
'safe-danger': '#ef4444', // Red 500
|
||
|
|
|
||
|
|
// Option B: Cyber (Neon)
|
||
|
|
'cyber-success': '#00ff9d',
|
||
|
|
'cyber-danger': '#ff003c',
|
||
|
|
'cyber-bg': '#000000',
|
||
|
|
|
||
|
|
// Option C: Hybrid (Traffic Light)
|
||
|
|
'hybrid-success': '#22c55e', // Green 500
|
||
|
|
'hybrid-danger': '#f43f5e', // Rose 500
|
||
|
|
'hybrid-warning': '#f59e0b', // Amber 500
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
sans: ['Geist Sans', 'Inter', 'sans-serif'],
|
||
|
|
mono: ['Geist Mono', 'JetBrains Mono', 'monospace'],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
/* Custom Scrollbar */
|
||
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||
|
|
::-webkit-scrollbar-track { background: transparent; }
|
||
|
|
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
|
||
|
|
|
||
|
|
/* Glow Effects for Cyber Mode */
|
||
|
|
.cyber-glow-text { text-shadow: 0 0 10px currentColor; }
|
||
|
|
.cyber-border { box-shadow: 0 0 5px rgba(0, 255, 157, 0.2); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-gray-900 text-white font-sans overflow-hidden h-screen flex flex-col">
|
||
|
|
|
||
|
|
<!-- Control Panel -->
|
||
|
|
<div class="bg-gray-800 border-b border-gray-700 p-4 flex items-center justify-between z-50">
|
||
|
|
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">
|
||
|
|
SurfSense v2 <span class="text-gray-400 text-sm font-normal">Design Directions</span>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<div class="flex gap-2 bg-gray-900 p-1 rounded-lg border border-gray-700">
|
||
|
|
<button onclick="switchMode('A')" id="btn-A" class="px-4 py-2 rounded text-sm font-medium transition-colors hover:bg-gray-700 text-gray-400">
|
||
|
|
Option A: Safe Pro
|
||
|
|
</button>
|
||
|
|
<button onclick="switchMode('B')" id="btn-B" class="px-4 py-2 rounded text-sm font-medium transition-colors hover:bg-gray-700 text-gray-400">
|
||
|
|
Option B: Cyber Terminal
|
||
|
|
</button>
|
||
|
|
<button onclick="switchMode('C')" id="btn-C" class="px-4 py-2 rounded text-sm font-medium bg-blue-600 text-white shadow-lg">
|
||
|
|
Option C: Hybrid (Rec)
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-sm text-gray-400">
|
||
|
|
Click options to toggle visuals
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main Container -->
|
||
|
|
<div id="mockup-container" class="flex-1 flex overflow-hidden bg-[#0B1221] transition-colors duration-500 relative">
|
||
|
|
|
||
|
|
<!-- SIDEBAR -->
|
||
|
|
<div id="sidebar" class="w-64 border-r border-[#1f2937] flex flex-col p-4 gap-2 transition-all duration-300">
|
||
|
|
<!-- Brand -->
|
||
|
|
<div class="flex items-center gap-3 mb-6 px-2">
|
||
|
|
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-lg">S</div>
|
||
|
|
<span class="font-bold text-lg tracking-tight">SurfSense</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Nav Items -->
|
||
|
|
<div class="space-y-1">
|
||
|
|
<div class="p-2 rounded bg-blue-500/10 text-blue-400 font-medium flex items-center gap-3">
|
||
|
|
<span>📊</span> Market Intel
|
||
|
|
</div>
|
||
|
|
<div class="p-2 rounded hover:bg-white/5 text-gray-400 font-medium flex items-center gap-3 cursor-pointer">
|
||
|
|
<span>💼</span> Portfolio
|
||
|
|
</div>
|
||
|
|
<div class="p-2 rounded hover:bg-white/5 text-gray-400 font-medium flex items-center gap-3 cursor-pointer">
|
||
|
|
<span>🔔</span> Smart Alerts
|
||
|
|
</div>
|
||
|
|
<div class="p-2 rounded hover:bg-white/5 text-gray-400 font-medium flex items-center gap-3 cursor-pointer">
|
||
|
|
<span>🤖</span> AI Chat
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mt-auto p-4 rounded bg-gray-800/50 border border-gray-700/50">
|
||
|
|
<div class="text-xs text-gray-400 uppercase font-bold mb-2">Extension Status</div>
|
||
|
|
<div class="flex items-center gap-2 text-sm text-green-400">
|
||
|
|
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
|
||
|
|
Active & Syncing
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CONTENT AREA -->
|
||
|
|
<div class="flex-1 flex flex-col min-w-0">
|
||
|
|
<!-- Header -->
|
||
|
|
<div id="header" class="h-16 border-b border-[#1f2937] flex items-center justify-between px-6 bg-[#0B1221]/50 backdrop-blur">
|
||
|
|
<div class="flex items-center gap-4 text-sm text-gray-400">
|
||
|
|
<span>Market Intelligence</span>
|
||
|
|
<span>/</span>
|
||
|
|
<span class="text-white">Whale Watch</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<input type="text" placeholder="Search tokens (Cmd+K)..." class="bg-gray-900 border border-gray-700 rounded-md px-3 py-1.5 text-sm w-64 focus:outline-none focus:border-blue-500 transition-colors">
|
||
|
|
<button class="w-8 h-8 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center">🔔</button>
|
||
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-tr from-purple-500 to-blue-500"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Dashboard Content -->
|
||
|
|
<div class="flex-1 overflow-auto p-6 space-y-6">
|
||
|
|
|
||
|
|
<!-- Stats Row -->
|
||
|
|
<div class="grid grid-cols-4 gap-4">
|
||
|
|
<div id="card-1" class="p-4 rounded-xl border border-gray-800 bg-[#111827] shadow-sm">
|
||
|
|
<div class="text-gray-400 text-sm mb-1">Total Signals</div>
|
||
|
|
<div class="text-2xl font-bold">1,204</div>
|
||
|
|
<div class="text-green-500 text-xs mt-2 flex items-center gap-1">
|
||
|
|
<span>↑ 12%</span> <span class="text-gray-500">vs yesterday</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="card-2" class="p-4 rounded-xl border border-gray-800 bg-[#111827] shadow-sm">
|
||
|
|
<div class="text-gray-400 text-sm mb-1">High Risk Detected</div>
|
||
|
|
<div class="text-2xl font-bold text-red-500">23</div>
|
||
|
|
<div class="text-red-500/80 text-xs mt-2">Critical Awareness</div>
|
||
|
|
</div>
|
||
|
|
<div id="card-3" class="p-4 rounded-xl border border-gray-800 bg-[#111827] shadow-sm">
|
||
|
|
<div class="text-gray-400 text-sm mb-1">Whale Inflow</div>
|
||
|
|
<div class="text-2xl font-bold text-blue-400">$34.2M</div>
|
||
|
|
<div class="text-gray-500 text-xs mt-2">Last 24h</div>
|
||
|
|
</div>
|
||
|
|
<!-- AI INSIGHT WIDGET -->
|
||
|
|
<div id="ai-card" class="p-4 rounded-xl border border-blue-900/30 bg-blue-900/10 shadow-sm relative overflow-hidden">
|
||
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-blue-500"></div>
|
||
|
|
<div class="flex items-start gap-3">
|
||
|
|
<span class="text-xl">🤖</span>
|
||
|
|
<div>
|
||
|
|
<div class="text-blue-300 font-bold text-sm mb-1">AI Insight</div>
|
||
|
|
<div class="text-xs text-blue-200/80 leading-relaxed">
|
||
|
|
"ETH whale accumulation detected in L2 sector. <span class="underline decoration-dotted cursor-pointer hover:text-white">ARB</span> and <span class="underline decoration-dotted cursor-pointer hover:text-white">OP</span> showing divergent strength."
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main Table -->
|
||
|
|
<div id="main-table" class="rounded-xl border border-gray-800 bg-[#111827] overflow-hidden">
|
||
|
|
<div class="p-4 border-b border-gray-800 flex justify-between items-center">
|
||
|
|
<h3 class="font-bold">Live Market Opportunities</h3>
|
||
|
|
<div class="flex gap-2">
|
||
|
|
<button class="px-3 py-1 rounded text-xs border border-gray-700 hover:bg-gray-800 transition-colors">Filter</button>
|
||
|
|
<button class="px-3 py-1 rounded text-xs border border-gray-700 hover:bg-gray-800 transition-colors">Export</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<table class="w-full text-left text-sm">
|
||
|
|
<thead class="bg-gray-900/50 text-gray-400 border-b border-gray-800">
|
||
|
|
<tr>
|
||
|
|
<th class="p-4 font-medium">Token</th>
|
||
|
|
<th class="p-4 font-medium">Price</th>
|
||
|
|
<th class="p-4 font-medium">Risk Score</th>
|
||
|
|
<th class="p-4 font-medium">Whale Activity</th>
|
||
|
|
<th class="p-4 font-medium text-right">Action</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="table-body" class="divide-y divide-gray-800">
|
||
|
|
<!-- Rows injected by JS -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const mockupContainer = document.getElementById('mockup-container');
|
||
|
|
const sidebar = document.getElementById('sidebar');
|
||
|
|
const cards = document.querySelectorAll('[id^="card-"]');
|
||
|
|
const mainTable = document.getElementById('main-table');
|
||
|
|
const tableBody = document.getElementById('table-body');
|
||
|
|
|
||
|
|
const styleConfigs = {
|
||
|
|
'A': {
|
||
|
|
name: 'Safe Pro',
|
||
|
|
classes: {
|
||
|
|
bg: 'bg-[#0f172a]', // Slate 900
|
||
|
|
sidebarBorder: 'border-slate-800',
|
||
|
|
cardBorder: 'border-slate-700',
|
||
|
|
cardBg: 'bg-slate-800',
|
||
|
|
text: 'text-slate-200',
|
||
|
|
tableRow: 'hover:bg-slate-700/50 transition-colors',
|
||
|
|
},
|
||
|
|
rowData: [
|
||
|
|
{ name: 'PEPE', price: '$0.000012', risk: 'Low', riskColor: 'text-emerald-400 bg-emerald-400/10', whale: 'Normal', id: 1 },
|
||
|
|
{ name: 'TRUMP', price: '$4.32', risk: 'Medium', riskColor: 'text-yellow-400 bg-yellow-400/10', whale: 'High', id: 2 },
|
||
|
|
{ name: 'SCAM', price: '$0.12', risk: 'Device Scan Failed', riskColor: 'text-red-400 bg-red-400/10', whale: 'Dumping', id: 3 },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
'B': {
|
||
|
|
name: 'Cyber Terminal',
|
||
|
|
classes: {
|
||
|
|
bg: 'bg-black',
|
||
|
|
sidebarBorder: 'border-green-900/30',
|
||
|
|
cardBorder: 'border-green-800/50',
|
||
|
|
cardBg: 'bg-black/80',
|
||
|
|
text: 'text-green-50 font-mono',
|
||
|
|
tableRow: 'hover:bg-green-900/20 text-xs font-mono border-green-900/30',
|
||
|
|
},
|
||
|
|
rowData: [
|
||
|
|
{ name: 'PEPE', price: '$0.000012', risk: '[SAFE]', riskColor: 'text-[#00ff9d] drop-shadow-[0_0_5px_rgba(0,255,157,0.5)]', whale: '>> ACCUMULATING', id: 1 },
|
||
|
|
{ name: 'TRUMP', price: '$4.32', risk: '[WARN]', riskColor: 'text-yellow-400', whale: '>> SPIKE DETECTED', id: 2 },
|
||
|
|
{ name: 'SCAM', price: '$0.12', risk: '[CRITICAL]', riskColor: 'text-[#ff003c] drop-shadow-[0_0_5px_rgba(255,0,60,0.5)]', whale: '!! DUMPING !!', id: 3 },
|
||
|
|
]
|
||
|
|
},
|
||
|
|
'C': { // Hybrid
|
||
|
|
name: 'Hybrid',
|
||
|
|
classes: {
|
||
|
|
bg: 'bg-[#0B1221]',
|
||
|
|
sidebarBorder: 'border-gray-800',
|
||
|
|
cardBorder: 'border-gray-800',
|
||
|
|
cardBg: 'bg-[#111827]',
|
||
|
|
text: 'text-white',
|
||
|
|
tableRow: 'hover:bg-gray-800/50 transition-colors font-sans',
|
||
|
|
},
|
||
|
|
rowData: [
|
||
|
|
{ name: 'PEPE', price: '$0.000012', risk: 'Safe', riskColor: 'text-green-500 font-bold', whale: 'Accumulating', id: 1 },
|
||
|
|
{ name: 'TRUMP', price: '$4.32', risk: 'Review', riskColor: 'text-amber-500 font-bold', whale: 'High Vol', id: 2 },
|
||
|
|
{ name: 'SCAM', price: '$0.12', risk: 'Danger', riskColor: 'text-rose-500 font-bold', whale: 'Dump Warning', id: 3 },
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function renderRows(configType) {
|
||
|
|
const config = styleConfigs[configType];
|
||
|
|
tableBody.innerHTML = config.rowData.map(row => `
|
||
|
|
<tr class="${config.classes.tableRow}">
|
||
|
|
<td class="p-4">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-xs">IMG</div>
|
||
|
|
<span class="font-bold">${row.name}</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="p-4 tabular-nums text-gray-300 font-mono">${row.price}</td>
|
||
|
|
<td class="p-4">
|
||
|
|
<span class="px-2 py-1 rounded text-xs ${row.riskColor} border border-current/20">
|
||
|
|
${row.risk}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td class="p-4 text-gray-400 text-xs">${row.whale}</td>
|
||
|
|
<td class="p-4 text-right">
|
||
|
|
<button class="bg-blue-600/20 text-blue-400 hover:bg-blue-600 hover:text-white px-3 py-1 rounded text-xs transition-all border border-blue-500/30">
|
||
|
|
Analyze
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`).join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
function switchMode(mode) {
|
||
|
|
// Update Buttons
|
||
|
|
['A', 'B', 'C'].forEach(m => {
|
||
|
|
const btn = document.getElementById(`btn-${m}`);
|
||
|
|
if (m === mode) {
|
||
|
|
btn.classList.remove('bg-gray-900', 'text-gray-400');
|
||
|
|
btn.classList.add('bg-blue-600', 'text-white', 'shadow-lg');
|
||
|
|
} else {
|
||
|
|
btn.classList.add('bg-gray-900', 'text-gray-400');
|
||
|
|
btn.classList.remove('bg-blue-600', 'text-white', 'shadow-lg');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const config = styleConfigs[mode];
|
||
|
|
|
||
|
|
// Update Global Containers
|
||
|
|
mockupContainer.className = `flex-1 flex overflow-hidden ${config.classes.bg} transition-colors duration-500 relative`;
|
||
|
|
sidebar.className = `w-64 border-r ${config.classes.sidebarBorder} flex flex-col p-4 gap-2 transition-all duration-300`;
|
||
|
|
|
||
|
|
// Update Cards
|
||
|
|
cards.forEach(card => {
|
||
|
|
card.className = `p-4 rounded-xl border ${config.classes.cardBorder} ${config.classes.cardBg} shadow-sm`;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update Table Container
|
||
|
|
mainTable.className = `rounded-xl border ${config.classes.cardBorder} ${config.classes.cardBg} overflow-hidden`;
|
||
|
|
|
||
|
|
// Render Table Rows
|
||
|
|
renderRows(mode);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Init
|
||
|
|
switchMode('C');
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|