Remade frontend dashboard as flutter dashboard, still WIP
This commit is contained in:
Nate Anderson
@@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>XP Nix - Productivity Dashboard</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🎮 XP Nix Productivity Dashboard</h1>
|
||||
<div class="header-stats">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Level</span>
|
||||
<span class="stat-value" id="current-level">1</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">XP</span>
|
||||
<span class="stat-value" id="current-xp">0</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">Streak</span>
|
||||
<span class="stat-value" id="current-streak">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<!-- Today's Stats -->
|
||||
<div class="card">
|
||||
<h2>📊 Today's Progress</h2>
|
||||
<div class="progress-stats">
|
||||
<div class="progress-item">
|
||||
<span class="progress-label">Focus Time</span>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="focus-progress"></div>
|
||||
</div>
|
||||
<span class="progress-value" id="focus-time">0h 0m</span>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span class="progress-label">Meeting Time</span>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="meeting-progress"></div>
|
||||
</div>
|
||||
<span class="progress-value" id="meeting-time">0h 0m</span>
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span class="progress-label">Focus Sessions</span>
|
||||
<span class="progress-value" id="focus-sessions">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XP History Chart -->
|
||||
<div class="card chart-card">
|
||||
<h2>📈 XP Progress (7 Days)</h2>
|
||||
<canvas id="xp-chart"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="card">
|
||||
<h2>⚡ Recent Activity</h2>
|
||||
<div class="activity-list" id="recent-activity">
|
||||
<div class="activity-item">
|
||||
<span class="activity-type">No recent activity</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- XP Breakdown -->
|
||||
<div class="card">
|
||||
<h2>💎 XP Sources Today</h2>
|
||||
<div class="xp-breakdown" id="xp-breakdown">
|
||||
<div class="xp-source-item">
|
||||
<span class="xp-source-name">Loading XP breakdown...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Achievements -->
|
||||
<div class="card">
|
||||
<h2>🏆 Recent Achievements</h2>
|
||||
<div class="achievements-list" id="achievements-list">
|
||||
<div class="achievement-item">
|
||||
<span class="achievement-name">No achievements yet</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Panel -->
|
||||
<div class="card config-card">
|
||||
<h2>⚙️ Configuration</h2>
|
||||
<div class="config-section">
|
||||
<h3>XP Multipliers</h3>
|
||||
<div class="config-group">
|
||||
<label for="coding-xp">Coding XP per minute:</label>
|
||||
<input type="number" id="coding-xp" min="1" max="50" value="10">
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label for="research-xp">Research XP per minute:</label>
|
||||
<input type="number" id="research-xp" min="1" max="50" value="8">
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label for="meeting-xp">Meeting XP per minute:</label>
|
||||
<input type="number" id="meeting-xp" min="1" max="50" value="3">
|
||||
</div>
|
||||
<div class="config-group">
|
||||
<label for="focus-bonus">Focus session bonus per minute:</label>
|
||||
<input type="number" id="focus-bonus" min="1" max="20" value="5">
|
||||
</div>
|
||||
<button id="save-config" class="btn-primary">Save Configuration</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Application Classifications -->
|
||||
<div class="card classification-card">
|
||||
<h2>🏷️ Application Classifications</h2>
|
||||
<div class="classification-section">
|
||||
<h3>Unclassified Applications</h3>
|
||||
<div class="unclassified-list" id="unclassified-list">
|
||||
<div class="unclassified-item">
|
||||
<span class="unclassified-name">Loading unclassified applications...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Current Classifications</h3>
|
||||
<div class="classifications-list" id="classifications-list">
|
||||
<div class="classification-item">
|
||||
<span class="classification-name">Loading classifications...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Logs -->
|
||||
<div class="card logs-card">
|
||||
<h2>📝 System Logs</h2>
|
||||
<div class="logs-controls">
|
||||
<select id="log-level">
|
||||
<option value="">All Levels</option>
|
||||
<option value="debug">Debug</option>
|
||||
<option value="info">Info</option>
|
||||
<option value="warn">Warning</option>
|
||||
<option value="error">Error</option>
|
||||
</select>
|
||||
<button id="refresh-logs" class="btn-secondary">Refresh</button>
|
||||
</div>
|
||||
<div class="logs-container" id="logs-container">
|
||||
<div class="log-entry">Loading logs...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user