opaolilo/sqlite-data-viz-delight
0
1<!DOCTYPE html>2<html lang="pt-br" class="dark">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Dashboard SQLite - Monitoring</title>7 <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql-wasm.js"></script>8 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://unpkg.com/feather-icons"></script>12 <link rel="stylesheet" href="style.css">13 <script>14 tailwind.config = {15 darkMode: 'class',16 theme: {17 extend: {18 colors: {19 primary: {20 500: '#6366f1',21 600: '#4f46e5',22 },23 secondary: {24 500: '#ec4899',25 600: '#db2777',26 }27 }28 }29 }30 }31 </script>32</head>33<body class="bg-gray-900 text-gray-100 min-h-screen">34 <custom-header></custom-header>35 <div class="container mx-auto px-4 py-8">36<!-- Header -->37 <header class="mb-12">38 <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">39 <div>40 <h1 class="text-3xl font-bold text-primary-500">Vale Global Safe Integration - Monitoring</h1>41</div>42 <div class="flex items-center gap-2">43 <button id="themeToggle" class="p-2 rounded-full bg-gray-800 text-gray-400 hover:bg-gray-700 transition-colors">44 <i data-feather="moon" class="hidden"></i>45 <i data-feather="sun" class="hidden"></i>46 </button>47 </div>48 </div>49 </header>50 51 <!-- File Upload Card -->52 <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">53 <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">54 <div class="flex-1">55 <label class="block text-sm font-medium text-gray-300 mb-1">Upload SQLite Database</label>56 <div class="flex flex-wrap items-center gap-2">57 <label class="cursor-pointer">58 <span class="inline-flex items-center px-4 py-2 bg-primary-500 border border-transparent rounded-md font-semibold text-white hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors">59 <i data-feather="upload" class="mr-2"></i>60 Select File61 <input type="file" id="fileInput" class="hidden" accept=".db" />62 </span>63 </label>64 <button id="btnReload" disabled class="px-4 py-2 bg-gray-700 border border-transparent rounded-md font-semibold text-gray-300 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors">65 <i data-feather="refresh-cw" class="mr-2"></i>66 Refresh67 </button>68 <div class="relative">69 <button id="autoRefreshBtn" class="px-4 py-2 bg-gray-800 border border-gray-600 rounded-md font-semibold text-gray-300 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors flex items-center gap-2">70 <i data-feather="clock" class="w-4 h-4"></i>71 <span>Auto Refresh</span>72 <i data-feather="chevron-down" class="w-4 h-4"></i>73 </button>74 <div id="autoRefreshDropdown" class="hidden absolute z-10 mt-1 w-32 bg-gray-800 border border-gray-700 rounded-md shadow-lg">75 <div class="py-1">76 <button data-interval="5000" class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">5 seconds</button>77 <button data-interval="15000" class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">15 seconds</button>78 <button data-interval="60000" class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">1 minute</button>79 <button data-interval="0" class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">Off</button>80 </div>81 </div>82 </div>83 </div>84<p id="filename" class="mt-2 text-sm text-gray-400">No file selected</p>85 </div>86 <div class="bg-gray-700 p-3 rounded-lg flex items-center gap-3">87 <i data-feather="info" class="text-secondary-500"></i>88 <p class="text-sm text-gray-300">Supported formats: SQLite database (.db)</p>89 </div>90 </div>91 </div>92 <!-- Charts Grid -->93 <div class="grid grid-cols-1 gap-6 mb-8">94 <!-- Bar Chart Card -->95 <div class="bg-gray-800 rounded-xl p-6 shadow-lg">96 <div class="flex items-center justify-between mb-4">97 <h3 class="text-lg font-semibold text-gray-200 hovered-element">Request Status Distribution</h3>98 <div class="flex items-center gap-2"></div>99 </div>100 <div class="h-80">101 <canvas id="barChart"></canvas>102 </div>103 </div>104 </div>105 <!-- Line Chart Card -->106 <div class="bg-gray-800 rounded-xl p-6 shadow-lg">107 <div class="flex items-center justify-between mb-4">108 <h3 class="text-lg font-semibold text-gray-200">Status Trend</h3>109 <div class="flex items-center gap-2">110 <span class="h-3 w-3 rounded-full bg-yellow-500"></span>111 <span class="text-xs text-gray-400">Trend</span>112 </div>113 </div>114 <div class="h-80">115 <canvas id="lineChart"></canvas>116 </div>117 </div>118 119 <!-- Stats Overview -->120<div id="statsContainer" class="hidden mt-8">121 <h2 class="text-xl font-semibold text-gray-200 mb-4">Overview</h2>122 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">123 <!-- Stats will be dynamically inserted here -->124 </div>125 </div>126 </div>127 <script src="components/header.js"></script>128 <script src="script.js"></script>129<script>130 feather.replace();131 132 // Theme toggle133 const themeToggle = document.getElementById('themeToggle');134 const themeIconMoon = themeToggle.querySelector('[data-feather="moon"]');135 const themeIconSun = themeToggle.querySelector('[data-feather="sun"]');136 137 if (localStorage.getItem('darkMode') === 'false') {138 document.documentElement.classList.remove('dark');139 themeIconMoon.classList.add('hidden');140 themeIconSun.classList.remove('hidden');141 } else {142 themeIconSun.classList.add('hidden');143 themeIconMoon.classList.remove('hidden');144 }145 146 themeToggle.addEventListener('click', () => {147 document.documentElement.classList.toggle('dark');148 const isDark = document.documentElement.classList.contains('dark');149 localStorage.setItem('darkMode', isDark);150 151 if (isDark) {152 themeIconSun.classList.add('hidden');153 themeIconMoon.classList.remove('hidden');154 } else {155 themeIconMoon.classList.add('hidden');156 themeIconSun.classList.remove('hidden');157 }158 });159 </script>160<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>161</body>162</html>