| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Token Tracker: The Climber 📈</title> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="components/navbar.js"></script> |
| | </head> |
| | <body class="bg-gray-50"> |
| | <custom-navbar></custom-navbar> |
| | |
| | <main class="container mx-auto px-4 py-8"> |
| | <div class="bg-white rounded-xl shadow-lg p-6"> |
| | <div class="flex justify-between items-center mb-6"> |
| | <h1 class="text-2xl font-bold text-gray-800">Token Abstinence Dashboard</h1> |
| | <div class="flex space-x-2"> |
| | <div class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium"> |
| | Current Month |
| | </div> |
| | <button class="p-2 rounded-full hover:bg-gray-100"> |
| | <i data-feather="calendar"></i> |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="mb-4"> |
| | <div class="flex items-center space-x-4"> |
| | <div class="h-3 w-3 rounded-full bg-indigo-500"></div> |
| | <span class="text-gray-600">Token Consumption</span> |
| | <span class="text-gray-400 text-sm">(Abstinence since day 10)</span> |
| | </div> |
| | </div> |
| | |
| | <div class="relative h-80"> |
| | <canvas id="tokenChart"></canvas> |
| | </div> |
| | <div class="mt-6 grid grid-cols-1 md:grid-cols-5 gap-4"> |
| | <div class="bg-gray-50 p-4 rounded-lg"> |
| | <div class="text-gray-500 text-sm">Total Tokens</div> |
| | <div class="text-2xl font-bold text-gray-800">12,458</div> |
| | </div> |
| | <div class="bg-gray-50 p-4 rounded-lg"> |
| | <div class="text-gray-500 text-sm">Avg/Day</div> |
| | <div class="text-2xl font-bold text-gray-800">415</div> |
| | </div> |
| | <div class="bg-gray-50 p-4 rounded-lg"> |
| | <div class="text-gray-500 text-sm">Projected EOM</div> |
| | <div class="text-2xl font-bold text-gray-800">15,745</div> |
| | </div> |
| | <div class="bg-gray-50 p-4 rounded-lg"> |
| | <div class="text-gray-500 text-sm">Max Day</div> |
| | <div class="text-2xl font-bold text-gray-800">872</div> |
| | </div> |
| | <div class="bg-gray-50 p-4 rounded-lg"> |
| | <div class="text-gray-500 text-sm">Abstinence Days</div> |
| | <div class="text-2xl font-bold text-gray-800">21</div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | </script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
