| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BLEED TIME SYSTEM | AGNO Framework</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #0a0a0a; |
| color: #e5e5e5; |
| } |
| |
| .mono { |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .bleed-gradient { |
| background: linear-gradient(135deg, #1a0a0a 0%, #2a0a0a 50%, #3a0a0a 100%); |
| } |
| |
| .status-critical { |
| border-left: 4px solid #ef4444; |
| } |
| |
| .status-moderate { |
| border-left: 4px solid #f59e0b; |
| } |
| |
| .status-ok { |
| border-left: 4px solid #10b981; |
| } |
| |
| .chart-container { |
| position: relative; |
| height: 200px; |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bleed-gradient"> |
| |
| <div id="landing" class="flex flex-col items-center justify-center min-h-screen px-4 transition-opacity duration-500"> |
| <div class="text-center max-w-2xl"> |
| <pre class="mono text-2xl sm:text-4xl text-red-400 mb-6"> |
| ░▒▓█ BLEED █▓▒░ |
| </pre> |
| <h1 class="text-3xl sm:text-5xl font-bold text-white mb-6">TIME SYSTEM</h1> |
| <p class="text-lg sm:text-xl text-gray-300 mb-10 leading-relaxed"> |
| Optimizing human capital efficiency through real-time bleed analysis. |
| Our mission is to quantify and minimize productivity leakage in |
| knowledge work environments. |
| </p> |
| <button onclick="enterDashboard()" class="px-8 py-3 bg-red-700 hover:bg-red-600 text-white rounded-lg font-medium transition-colors duration-200"> |
| Enter Dashboard |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="dashboard" class="hidden min-h-screen p-4 sm:p-8"> |
| <header class="flex justify-between items-center mb-8"> |
| <div class="flex items-center"> |
| <pre class="mono text-xl sm:text-2xl text-red-400 mr-4"> |
| ░▒▓█ BLEED █▓▒░ |
| </pre> |
| <span class="text-xl sm:text-2xl font-bold text-white">TIME SYSTEM</span> |
| </div> |
| <div class="flex space-x-2"> |
| <button id="exportBtn" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded text-sm flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> |
| </svg> |
| Export |
| </button> |
| </div> |
| </header> |
|
|
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800"> |
| <h3 class="text-gray-400 text-sm mb-1">Total Hours (Week)</h3> |
| <p class="text-3xl font-bold text-white">42.5</p> |
| <div class="flex items-center mt-2"> |
| <span class="text-xs text-gray-500">+2.1% from last week</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800"> |
| <h3 class="text-gray-400 text-sm mb-1">Authentic Hours</h3> |
| <p class="text-3xl font-bold text-white">31.8</p> |
| <div class="flex items-center mt-2"> |
| <span class="text-xs text-gray-500">74.8% efficiency</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800"> |
| <h3 class="text-gray-400 text-sm mb-1">Bleed %</h3> |
| <p class="text-3xl font-bold text-red-400">25.2%</p> |
| <div class="w-full bg-gray-800 rounded-full h-2 mt-3"> |
| <div class="bg-red-500 h-2 rounded-full" style="width: 25.2%"></div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800"> |
| <h3 class="text-gray-400 text-sm mb-1">Investment Ratio</h3> |
| <p class="text-3xl font-bold text-green-400">68%</p> |
| <div class="w-full bg-gray-800 rounded-full h-2 mt-3"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 68%"></div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800"> |
| <h3 class="text-gray-400 text-sm mb-1">Economic Cost</h3> |
| <p class="text-3xl font-bold text-white">€1,284</p> |
| <div class="flex items-center mt-2"> |
| <span class="text-xs text-gray-500">Weekly impact</span> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800 status-critical"> |
| <h3 class="text-gray-400 text-sm mb-1">Trend Alert</h3> |
| <div class="flex items-center"> |
| <span class="text-xl font-bold text-red-400 mr-2">Critical</span> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor"> |
| <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /> |
| </svg> |
| </div> |
| <p class="text-sm text-gray-300 mt-2">Bleed increased by 8.2% this week. Immediate action recommended.</p> |
| </div> |
| </div> |
| |
| |
| <div class="lg:col-span-1 space-y-6"> |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800"> |
| <h3 class="text-gray-400 text-sm mb-3">Bleed Composition</h3> |
| <div class="chart-container"> |
| <canvas id="bleedChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800"> |
| <h3 class="text-gray-400 text-sm mb-3">Investment Allocation</h3> |
| <div class="chart-container"> |
| <canvas id="investmentChart"></canvas> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900 p-5 rounded-lg border border-gray-800"> |
| <h3 class="text-gray-400 text-sm mb-3">Quick Actions</h3> |
| <div class="space-y-2"> |
| <button class="w-full px-4 py-2 bg-red-800 hover:bg-red-700 text-white rounded text-sm text-left flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> |
| </svg> |
| Optimize Meeting Schedule |
| </button> |
| <button class="w-full px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded text-sm text-left flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| Review Time Blocking |
| </button> |
| <button class="w-full px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded text-sm text-left flex items-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
| </svg> |
| Generate Report |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| |
| function enterDashboard() { |
| document.getElementById('landing').classList.add('opacity-0'); |
| setTimeout(() => { |
| document.getElementById('landing').classList.add('hidden'); |
| document.getElementById('dashboard').classList.remove('hidden'); |
| initCharts(); |
| }, 500); |
| } |
| |
| |
| document.getElementById('exportBtn').addEventListener('click', function() { |
| |
| alert('Export functionality would connect to backend API here.\nOptions: CSV or JSON format.'); |
| |
| |
| console.log('Exporting data...'); |
| }); |
| |
| |
| function initCharts() { |
| |
| const bleedCtx = document.getElementById('bleedChart').getContext('2d'); |
| new Chart(bleedCtx, { |
| type: 'doughnut', |
| data: { |
| labels: ['Meetings', 'Context Switching', 'Administrative', 'Communication', 'Other'], |
| datasets: [{ |
| data: [35, 25, 20, 15, 5], |
| backgroundColor: [ |
| '#ef4444', |
| '#f97316', |
| '#f59e0b', |
| '#ec4899', |
| '#6b7280' |
| ], |
| borderWidth: 0 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| cutout: '70%', |
| plugins: { |
| legend: { |
| position: 'bottom', |
| labels: { |
| color: '#9ca3af', |
| font: { |
| size: 10 |
| }, |
| padding: 20 |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const investmentCtx = document.getElementById('investmentChart').getContext('2d'); |
| new Chart(investmentCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Core Work', 'Learning', 'Strategy', 'Networking', 'Admin'], |
| datasets: [{ |
| data: [45, 20, 15, 15, 5], |
| backgroundColor: '#10b981', |
| borderRadius: 4 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| color: 'rgba(55, 65, 81, 0.5)' |
| }, |
| ticks: { |
| color: '#9ca3af' |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| }, |
| ticks: { |
| color: '#9ca3af' |
| } |
| } |
| }, |
| plugins: { |
| legend: { |
| display: false |
| } |
| } |
| } |
| }); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| console.log('Dashboard loaded. Ready to fetch data from API.'); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mtornani/bleedtime" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
