/home/devscfvi/app.devsquantum.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Trading Journal</title>
<!-- PWA Meta Tags -->
<meta name="theme-color" content="#8b5cf6">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Trading Journal">
<link rel="apple-touch-icon" href="/icon-192.png">
<link rel="manifest" href="/manifest.json">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
if (window.tailwind) { tailwind.config = {}; }
</script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom Styles -->
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon-16x16.png">
<style>
body { opacity: 0; transition: opacity 0.2s; }
body.loaded { opacity: 1; }
</style>
</head>
<body class="bg-slate-950 text-white overflow-x-hidden">
<!-- ========================================
LAYOUT WRAPPER
======================================== -->
<div class="flex min-h-screen">
<!-- ======================================
SIDEBAR NAVIGATION (Desktop md+)
====================================== -->
<aside id="sidebar-nav" class="hidden md:flex flex-col fixed left-0 top-0 h-full w-64 sidebar-glass border-r border-violet-500/20 z-50">
<!-- Logo / App Name -->
<div class="px-5 py-5 border-b border-violet-500/20 flex-shrink-0">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl gradient-bg flex items-center justify-center flex-shrink-0">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
</div>
<div>
<h1 class="text-sm font-bold text-white leading-tight">Trading Journal</h1>
<p class="text-xs text-violet-400">Track • Analyze • Improve</p>
</div>
</div>
</div>
<!-- Nav Links -->
<nav class="flex-1 p-3 space-y-0.5 overflow-y-auto">
<!-- Primary views -->
<button onclick="navigateTo('calculator')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="calculator">
<svg class="w-4.5 h-4.5 w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
<span class="text-sm font-medium">Calculator</span>
</button>
<button onclick="navigateTo('history')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="history">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
<span class="text-sm font-medium">Trades</span>
</button>
<button onclick="navigateTo('analytics')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="analytics">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
<span class="text-sm font-medium">Analytics</span>
</button>
<button onclick="navigateTo('goals')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="goals">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
<span class="text-sm font-medium">Goals</span>
</button>
<button onclick="navigateTo('journal')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="journal">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
<span class="text-sm font-medium">Journal</span>
</button>
<!-- Divider -->
<div class="my-2 border-t border-violet-500/10"></div>
<button onclick="navigateTo('stats')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="stats">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
</svg>
<span class="text-sm font-medium">Statistics</span>
</button>
<button onclick="navigateTo('calendar')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="calendar">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span class="text-sm font-medium">P&L Calendar</span>
</button>
<button onclick="navigateTo('mistakes')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="mistakes">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
<span class="text-sm font-medium">Mistakes</span>
</button>
<button onclick="navigateTo('budget')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="budget">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-sm font-medium">Budget</span>
</button>
<button onclick="navigateTo('coins')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="coins">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
<span class="text-sm font-medium" id="sidebar-coins-label">Favorite Coins</span>
</button>
<!-- Divider -->
<div class="my-2 border-t border-violet-500/10"></div>
<button onclick="navigateTo('import')" class="sidebar-btn w-full flex items-center gap-3 px-4 py-2.5 rounded-xl" data-view="import">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
<span class="text-sm font-medium">Import Trades</span>
</button>
</nav>
<!-- Mode Toggle + App Info -->
<div class="p-4 border-t border-violet-500/20 flex-shrink-0">
<div class="glass rounded-2xl p-3 border border-violet-500/20 mb-3">
<p class="text-xs text-violet-400 mb-2 font-semibold uppercase tracking-wide">Trading Mode</p>
<div class="grid grid-cols-2 gap-1.5">
<button onclick="switchMode('crypto')" id="mode-crypto-btn"
class="mode-btn py-2 px-2 rounded-lg text-xs font-semibold">
🪙 Crypto
</button>
<button onclick="switchMode('stocks')" id="mode-stocks-btn"
class="mode-btn py-2 px-2 rounded-lg text-xs font-semibold">
📈 Stocks
</button>
</div>
</div>
<p class="text-xs text-slate-600 text-center">Trading Journal v2.0</p>
</div>
</aside>
<!-- ======================================
MAIN APP CONTENT
====================================== -->
<div id="app" class="flex-1 pb-20 md:pb-6 md:ml-64 min-w-0"></div>
</div>
<!-- ========================================
BOTTOM NAVIGATION (Mobile only)
======================================== -->
<nav id="bottom-nav" class="fixed bottom-0 left-0 right-0 md:hidden glass border-t border-violet-500/20 z-50 safe-area-bottom">
<div class="flex items-center justify-around py-2 px-1 max-w-screen overflow-x-hidden">
<button onclick="navigateTo('calculator')" class="nav-btn flex flex-col items-center gap-0.5 px-1 py-1.5 rounded-lg transition active:scale-95 flex-1 min-w-0" data-view="calculator">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
<span class="text-[10px] font-medium truncate w-full text-center">Calc</span>
</button>
<button onclick="navigateTo('history')" class="nav-btn flex flex-col items-center gap-0.5 px-1 py-1.5 rounded-lg transition active:scale-95 flex-1 min-w-0" data-view="history">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
</svg>
<span class="text-[10px] font-medium truncate w-full text-center">Trades</span>
</button>
<button onclick="navigateTo('analytics')" class="nav-btn flex flex-col items-center gap-0.5 px-1 py-1.5 rounded-lg transition active:scale-95 flex-1 min-w-0" data-view="analytics">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
<span class="text-[10px] font-medium truncate w-full text-center">Stats</span>
</button>
<button onclick="navigateTo('goals')" class="nav-btn flex flex-col items-center gap-0.5 px-1 py-1.5 rounded-lg transition active:scale-95 flex-1 min-w-0" data-view="goals">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
<span class="text-[10px] font-medium truncate w-full text-center">Goals</span>
</button>
<button onclick="navigateTo('journal')" class="nav-btn flex flex-col items-center gap-0.5 px-1 py-1.5 rounded-lg transition active:scale-95 flex-1 min-w-0" data-view="journal">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
<span class="text-[10px] font-medium truncate w-full text-center">Journal</span>
</button>
<button onclick="navigateTo('more')" class="nav-btn flex flex-col items-center gap-0.5 px-1 py-1.5 rounded-lg transition active:scale-95 flex-1 min-w-0" data-view="more">
<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<span class="text-[10px] font-medium truncate w-full text-center">More</span>
</button>
</div>
</nav>
<!-- Modal & Toast Containers -->
<div id="modal-container"></div>
<div id="toast-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
<!-- JavaScript Modules (CRITICAL ORDER) -->
<script src="js/utils.js"></script>
<script src="js/calculator.js"></script>
<script src="js/history.js"></script>
<script src="js/analytics.js"></script>
<script src="js/mistakes.js"></script>
<script src="js/goals.js"></script>
<script src="js/journal.js"></script>
<script src="js/calendar.js"></script>
<script src="js/import.js"></script>
<script src="js/app.js"></script>
<!-- PWA Service Worker -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('✅ Service Worker registered'))
.catch(err => console.log('❌ SW registration failed:', err));
});
}
</script>
<script>
window.addEventListener('load', () => {
document.body.classList.add('loaded');
});
</script>
</body>
</html>
