abuhassan89/offline-database-ninja
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Offline Updater</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>11 <style>12 .progress-bar {13 transition: width 0.5s ease-in-out;14 }15 .card-hover:hover {16 transform: translateY(-5px);17 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);18 }19 </style>20</head>21<body class="bg-gray-900 text-white min-h-screen">22 <div id="vanta-bg" class="fixed inset-0 z-0"></div>23 24 <div class="relative z-10 container mx-auto px-4 py-12">25 <header class="text-center mb-12">26 <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">27 Offline Database Ninja28 </h1>29 <p class="text-xl text-gray-300 max-w-2xl mx-auto">30 Smart migrations with network control and auto-versioning31 </p>32</header>33 34 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">35 <!-- Update Card -->36 <div class="bg-gray-800 rounded-xl p-6 shadow-lg transition-all duration-300 card-hover">37 <div class="flex items-center mb-4">38 <i data-feather="refresh-cw" class="w-8 h-8 text-blue-400 mr-3"></i>39 <h2 class="text-2xl font-semibold">Smart Migration</h2>40 </div>41 <div class="space-y-4">42 <div>43 <label class="block text-gray-400 mb-2">Current Version</label>44 <div class="bg-gray-700 px-4 py-2 rounded-lg">v2.0.3</div>45 </div>46 <div>47 <label class="block text-gray-400 mb-2">Migration Target</label>48 <select class="bg-gray-700 px-4 py-2 rounded-lg w-full">49 <option>v2.0.4 (Minor update)</option>50 <option>v2.1.0 (Feature update)</option>51 <option>v3.0.0 (Major upgrade)</option>52 </select>53 </div>54 <div class="flex items-center space-x-4">55 <button id="checkUpdateBtn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition flex items-center justify-center">56 <i data-feather="search" class="w-4 h-4 mr-2"></i> Analyze57 </button>58 <button id="simulateBtn" class="flex-1 bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition flex items-center justify-center">59 <i data-feather="play" class="w-4 h-4 mr-2"></i> Simulate60 </button>61 </div>62 </div>63</div>64 65 <!-- Network Control Card -->66 <div class="bg-gray-800 rounded-xl p-6 shadow-lg transition-all duration-300 card-hover">67 <div class="flex items-center mb-4">68 <i data-feather="shield" class="w-8 h-8 text-red-400 mr-3"></i>69 <h2 class="text-2xl font-semibold">Safety Controls</h2>70 </div>71 <div class="space-y-4">72 <div>73 <label class="block text-gray-400 mb-2">Safety Level</label>74 <select id="safetyLevel" class="bg-gray-700 px-4 py-2 rounded-lg w-full">75 <option value="standard">Standard (Backup only)</option>76 <option value="protected" selected>Protected (Backup + Verify)</option>77 <option value="secure">Secure (Backup + Verify + Network Lock)</option>78 </select>79 </div>80 <div class="grid grid-cols-2 gap-4">81 <div>82 <label class="block text-gray-400 mb-2">Backup Type</label>83 <select class="bg-gray-700 px-4 py-2 rounded-lg w-full">84 <option>Full Database</option>85 <option selected>Critical Tables Only</option>86 <option>Schema Only</option>87 </select>88 </div>89 <div>90 <label class="block text-gray-400 mb-2">Timeout</label>91 <select class="bg-gray-700 px-4 py-2 rounded-lg w-full">92 <option>5 minutes</option>93 <option selected>15 minutes</option>94 <option>30 minutes</option>95 </select>96 </div>97 </div>98 <button id="prepareUpdateBtn" class="w-full bg-gradient-to-r from-red-600 to-purple-600 hover:from-red-700 hover:to-purple-700 text-white py-3 px-4 rounded-lg transition flex items-center justify-center">99 <i data-feather="lock" class="w-5 h-5 mr-2"></i> Secure Migration100 </button>101 </div>102</div>103 </div>104 <!-- Migration Dashboard -->105 <div id="progressSection" class="hidden max-w-4xl mx-auto mt-12 bg-gray-800 rounded-xl p-6 shadow-lg">106 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">107 <div class="col-span-2">108 <div class="flex justify-between items-center mb-3">109 <h3 class="text-xl font-semibold">Migration Dashboard</h3>110 <span id="progressPercentage" class="text-blue-400">0%</span>111 </div>112 <div class="w-full bg-gray-700 rounded-full h-2.5 mb-4">113 <div id="progressBar" class="progress-bar bg-gradient-to-r from-blue-600 to-purple-600 h-2.5 rounded-full" style="width: 0%"></div>114 </div>115 <div class="grid grid-cols-3 gap-4 mb-4">116 <div class="bg-gray-700 p-3 rounded-lg text-center">117 <div class="text-sm text-gray-400">Tables</div>118 <div id="tableCount" class="text-lg font-bold">0/12</div>119 </div>120 <div class="bg-gray-700 p-3 rounded-lg text-center">121 <div class="text-sm text-gray-400">Network</div>122 <div id="networkStatus" class="text-lg font-bold flex items-center justify-center">123 <span class="inline-block w-3 h-3 rounded-full bg-green-500 mr-2"></span>124 Active125 </div>126 </div>127 <div class="bg-gray-700 p-3 rounded-lg text-center">128 <div class="text-sm text-gray-400">Integrity</div>129 <div id="integrityStatus" class="text-lg font-bold">Pending</div>130 </div>131 </div>132 <div id="statusMessage" class="mt-2 text-gray-300"></div>133 </div>134 <div class="bg-gray-700 p-4 rounded-lg">135 <h4 class="font-semibold mb-3 flex items-center">136 <i data-feather="alert-circle" class="w-4 h-4 mr-2"></i>137 Safety Checks138 </h4>139 <ul class="space-y-3 text-sm">140 <li class="flex items-start" id="backupCheck">141 <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>142 <span>Backup configuration</span>143 </li>144 <li class="flex items-start" id="networkCheck">145 <i data-feather="x-circle" class="w-4 h-4 text-red-500 mr-2 mt-0.5 flex-shrink-0"></i>146 <span>Network termination ready</span>147 </li>148 <li class="flex items-start" id="versionCheck">149 <i data-feather="alert-triangle" class="w-4 h-4 text-yellow-500 mr-2 mt-0.5 flex-shrink-0"></i>150 <span>Version compatibility</span>151 </li>152 <li class="flex items-start" id="spaceCheck">153 <i data-feather="check-circle" class="w-4 h-4 text-green-500 mr-2 mt-0.5 flex-shrink-0"></i>154 <span>Disk space available</span>155 </li>156 </ul>157 <div id="errorMessage" class="hidden mt-4 p-3 bg-red-900 rounded-lg text-red-100"></div>158 </div>159 </div>160 </div>161<!-- Update Log -->162 <div id="updateLog" class="hidden max-w-4xl mx-auto mt-8 bg-gray-800 rounded-xl p-6 shadow-lg">163 <h3 class="text-xl font-semibold mb-4 flex items-center">164 <i data-feather="activity" class="w-5 h-5 mr-2"></i>165 Update Log166 </h3>167 <div id="logContent" class="font-mono text-sm text-gray-300 bg-gray-900 p-4 rounded-lg max-h-60 overflow-y-auto">168 <!-- Log entries will be added here -->169 </div>170 </div>171 </div>172 173 <script>174 feather.replace();175 176 // Initialize Vanta.js background177 VANTA.NET({178 el: "#vanta-bg",179 mouseControls: true,180 touchControls: true,181 gyroControls: false,182 minHeight: 200.00,183 minWidth: 200.00,184 scale: 1.00,185 scaleMobile: 1.00,186 color: 0x3b82f6,187 backgroundColor: 0x111827,188 points: 10.00,189 maxDistance: 20.00,190 spacing: 15.00191 });192 193 // Simulate update process194 document.getElementById('checkUpdateBtn').addEventListener('click', function() {195 const progressSection = document.getElementById('progressSection');196 const progressBar = document.getElementById('progressBar');197 const progressPercentage = document.getElementById('progressPercentage');198 const statusMessage = document.getElementById('statusMessage');199 const updateLog = document.getElementById('updateLog');200 const logContent = document.getElementById('logContent');201 const prepareUpdateBtn = document.getElementById('prepareUpdateBtn');202 203 progressSection.classList.remove('hidden');204 updateLog.classList.remove('hidden');205 206 // Reset progress207 progressBar.style.width = '0%';208 progressPercentage.textContent = '0%';209 statusMessage.innerHTML = 'Checking for updates...';210 logContent.innerHTML = '';211 212 // Simulate network check213 setTimeout(() => {214 addLogEntry('Connected to update server');215 addLogEntry('Checking version information...');216 217 setTimeout(() => {218 addLogEntry('Update found: v2.0.4 available');219 statusMessage.innerHTML = 'Update available: v2.0.4';220 prepareUpdateBtn.disabled = false;221 }, 800);222 }, 500);223 });224 225 document.getElementById('prepareUpdateBtn').addEventListener('click', function() {226 const forceShutdown = document.getElementById('forceShutdownToggle').checked;227 const progressBar = document.getElementById('progressBar');228 const progressPercentage = document.getElementById('progressPercentage');229 const statusMessage = document.getElementById('statusMessage');230 const logContent = document.getElementById('logContent');231 const errorMessage = document.getElementById('errorMessage');232 233 errorMessage.classList.add('hidden');234 statusMessage.innerHTML = forceShutdown ? 235 'Preparing offline update (network will be terminated)...' : 236 'Preparing update...';237 238 addLogEntry('Downloading update package...');239 240 // Simulate download241 simulateProgress(0, 40, 2000, () => {242 addLogEntry('Package downloaded successfully');243 244 if (forceShutdown) {245 addLogEntry('Terminating network connections...');246 setTimeout(() => {247 addLogEntry('Network terminated successfully');248 continueUpdate();249 }, 1000);250 } else {251 continueUpdate();252 }253 });254 255 function continueUpdate() {256 addLogEntry('Validating update package...');257 258 simulateProgress(40, 70, 1500, () => {259 addLogEntry('Package validated');260 addLogEntry('Applying updates...');261 262 simulateProgress(70, 95, 2000, () => {263 addLogEntry('Update applied successfully');264 addLogEntry('Cleaning up temporary files...');265 266 simulateProgress(95, 100, 500, () => {267 statusMessage.innerHTML = 'Update completed successfully!';268 addLogEntry('Update process completed');269 270 // Show restart prompt271 setTimeout(() => {272 addLogEntry('Please restart the application to complete the update');273 statusMessage.innerHTML = '<span class="text-green-400">Update successful! Please restart the application.</span>';274 }, 300);275 });276 });277 });278 }279 280 function simulateProgress(start, end, duration, callback) {281 let startTime = null;282 const step = (timestamp) => {283 if (!startTime) startTime = timestamp;284 const progress = Math.min((timestamp - startTime) / duration, 1);285 const currentProgress = start + (end - start) * progress;286 progressBar.style.width = `${currentProgress}%`;287 progressPercentage.textContent = `${Math.round(currentProgress)}%`;288 289 if (progress < 1) {290 window.requestAnimationFrame(step);291 } else if (callback) {292 callback();293 }294 };295 window.requestAnimationFrame(step);296 }297 298 function addLogEntry(message) {299 const now = new Date();300 const timeString = now.toLocaleTimeString();301 const entry = document.createElement('div');302 entry.textContent = `[${timeString}] ${message}`;303 logContent.appendChild(entry);304 logContent.scrollTop = logContent.scrollHeight;305 }306 });307 </script>308</body>309</html>310