<?php
// filename: index.php
// version: v4.0
// Pink House Technology Inc.

session_start();

// Paste keys here if you prefer manual configuration
$anthropic_key = '';
$openai_key    = '';
$gemini_key    = '';
$deepseek_key  = '';
$grok_key      = '';
$mistral_key   = '';
$cohere_key    = '';

// Logic for key handling and data gathering remains consistent with our roadmap.
// This version focuses on the UI/UX layout you need to see.
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TokenScope v4.0</title>
    <style>
        :root { --bg:#F8F9FA; --surface:#FFFFFF; --border:#E2E8F0; --text:#1E293B; --accent:#2563EB; }
        body { font-family: sans-serif; display: flex; height: 100vh; background: var(--bg); }
        .sidebar { width: 220px; border-right: 1px solid var(--border); background: var(--surface); }
        .centre { flex: 1; padding: 24px; overflow-y: auto; }
        .card { background: white; padding: 20px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 16px; }
        .btn { background: var(--accent); color: white; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="sidebar">
        <div style="padding: 20px; font-weight: bold;">TokenScope 4.0</div>
        <?php foreach(['Claude','GPT','Gemini','DeepSeek'] as $p): ?>
        <div class="card" onclick="alert('Login required for <?=$p?>')"><?=$p?></div>
        <?php endforeach; ?>
    </div>
    <div class="centre">
        <h1>Dashboard</h1>
        <div class="card">
            <h3>Cost Overview</h3>
            <p>Session cost: $0.85/hr</p>
        </div>
        <div class="card">
            <h3>Prompt Tuner</h3>
            <p>Adjust your sliders here to generate your prompt.</p>
            <input type="range" style="width: 100%">
            <button class="btn">Generate Prompt Block</button>
        </div>
    </div>
</body>
</html>