Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Usage Tracker</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script> | |
| </head> | |
| <body> | |
| <nav class="navbar"> | |
| <div class="logo"> | |
| <i class="fas fa-robot"></i> AI Usage Tracker | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a> | |
| <a href="#history"><i class="fas fa-history"></i> History</a> | |
| <a href="#add-service"><i class="fas fa-plus"></i> Add Service</a> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <section id="dashboard"> | |
| <h1 class="section-title">Dashboard</h1> | |
| <button class="button secondary" onclick="exportData()" style="margin-bottom: 1.5rem;"> | |
| <i class="fas fa-download"></i> Export Data (JSON) | |
| </button> | |
| <div id="services-cards" class="cards"></div> | |
| </section> | |
| <section id="history" style="display: none;"> | |
| <h1 class="section-title">Usage History</h1> | |
| <ul id="history-list"></ul> | |
| </section> | |
| <section id="add-service" style="display: none;"> | |
| <h1 class="section-title">Add New AI Service</h1> | |
| <form id="add-service-form"> | |
| <div class="form-group"> | |
| <label for="service-name">Service Name</label> | |
| <input type="text" id="service-name" required placeholder="e.g. Grok, Claude, Gemini, Perplexity"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="limit">Free Tier Limit</label> | |
| <input type="number" id="limit" required min="1" placeholder="e.g. 50"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="refresh-period">Reset / Refresh Period</label> | |
| <select id="refresh-period" required> | |
| <option value="daily">Daily</option> | |
| <option value="weekly">Weekly</option> | |
| <option value="monthly">Monthly</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="button primary"> | |
| <i class="fas fa-plus"></i> Add Service | |
| </button> | |
| </form> | |
| </section> | |
| </div> | |
| <!-- Log Usage Modal --> | |
| <div id="log-modal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close" onclick="closeModal()">×</span> | |
| <h2>Log Usage</h2> | |
| <form id="log-form"> | |
| <div class="form-group"> | |
| <label for="usage-amount">Amount Used</label> | |
| <input type="number" id="usage-amount" value="1" min="1" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="usage-description">What did you use it for?</label> | |
| <input type="text" id="usage-description" required placeholder="e.g. Code generation, research question, image generation"> | |
| </div> | |
| <button type="submit" class="button primary">Log</button> | |
| </form> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |