<!DOCTYPE html>
<html>
<head>
    <title>Bubulle Corp - Dashboard</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="icon" href="/static/blowfish.svg" type="image/svg+xml">
</head>
<body>
    <div class="dashboard">
        <div class="bubbles">
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
        </div>
        <div class="topbar">
            <div class="brand">
                <span class="fish-icon">&#x1F421;</span>
                <h1>BUBULLE CORP</h1>
                <span>Command Center</span>
            </div>
            <div class="profile">
                <span class="username">{{ user['username'] }}</span>
                <a href="/settings"><img src="/icon" alt="Profile"></a>
                <a href="/logout" class="logout">Logout</a>
            </div>
        </div>

        <div class="content">
            <div class="welcome-banner">
                <h2>&#x1F30A; Good morning, {{ user['username'] }}!</h2>
                <p>The ocean is calm today. Perfect conditions for deep sea operations.</p>
            </div>

            <div class="stats">
                <div class="stat-card">
                    <div class="icon">&#x1F41F;</div>
                    <div class="label">Fish Caught</div>
                    <div class="value">12,847</div>
                    <div class="sub">+342 this week</div>
                </div>
                <div class="stat-card">
                    <div class="icon">&#x1F3A3;</div>
                    <div class="label">Active Lures</div>
                    <div class="value">38</div>
                    <div class="sub">3 need rebaiting</div>
                </div>
                <div class="stat-card">
                    <div class="icon">&#x1F4A7;</div>
                    <div class="label">Depth Reached</div>
                    <div class="value">4,200m</div>
                    <div class="sub">Abyssal zone record</div>
                </div>
                <div class="stat-card">
                    <div class="icon">&#x1F6A2;</div>
                    <div class="label">Fleet Active</div>
                    <div class="value">7 / 9</div>
                    <div class="sub">2 vessels in dock</div>
                </div>
            </div>

            <div class="panels">
                <div class="panel">
                    <h2>&#x1F4CB; Recent Catches</h2>
                    <div class="activity-item">
                        <span class="dot"></span>
                        <span>&#x1F988; Giant Squid spotted - Sector 7-G</span>
                        <span class="time">2 min ago</span>
                    </div>
                    <div class="activity-item">
                        <span class="dot"></span>
                        <span>&#x1F41F; Tuna school detected - Quadrant Alpha</span>
                        <span class="time">18 min ago</span>
                    </div>
                    <div class="activity-item">
                        <span class="dot"></span>
                        <span>&#x1F420; Clownfish colony mapped - Reef B4</span>
                        <span class="time">45 min ago</span>
                    </div>
                    <div class="activity-item">
                        <span class="dot"></span>
                        <span>&#x1F433; Whale migration path updated</span>
                        <span class="time">1 hr ago</span>
                    </div>
                    <div class="activity-item">
                        <span class="dot"></span>
                        <span>&#x1F419; Octopus nest discovered - Cave 12</span>
                        <span class="time">3 hr ago</span>
                    </div>
                </div>

                <div class="panel">
                    <h2>&#x1F6A2; Fleet Status</h2>
                    <div class="activity-item">
                        <span class="dot"></span>
                        <span>SS Anglerfish - Sector 4</span>
                        <span class="time">Active</span>
                    </div>
                    <div class="activity-item">
                        <span class="dot"></span>
                        <span>SS Barracuda - Sector 7</span>
                        <span class="time">Active</span>
                    </div>
                    <div class="activity-item">
                        <span class="dot"></span>
                        <span>SS Nautilus - Deep Trench</span>
                        <span class="time">Active</span>
                    </div>
                    <div class="activity-item">
                        <span class="dot warning"></span>
                        <span>SS Coelacanth - Maintenance</span>
                        <span class="time">ETA 4hr</span>
                    </div>
                    <div class="activity-item">
                        <span class="dot offline"></span>
                        <span>SS Bubulle - Dry dock</span>
                        <span class="time">Offline</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
