Add system control feature for remote shutdown/restart with timer support and UI integration

wwwroot/index.html

@@ -33,6 +33,10 @@
                     <button id="refreshData" class="bg-green-500 hover:bg-green-700 px-4 py-2 rounded-lg transition-colors">
                         <i class="fas fa-sync-alt mr-2"></i>Refresh
                     </button>
+                    <!-- Hidden System Control Button (requires triple-click to show) -->
+                    <button id="systemControl" class="hidden bg-red-600 hover:bg-red-800 px-4 py-2 rounded-lg transition-colors" title="System Control">
+                        <i class="fas fa-power-off mr-2"></i>System
+                    </button>
                 </div>
             </div>
         </div>
@@ -191,6 +195,60 @@
         </div>
     </div>
 
+    <!-- System Control Modal -->
+    <div id="systemControlModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-bold text-gray-800">
+                    <i class="fas fa-power-off mr-2 text-red-600"></i>System Control
+                </h3>
+                <button id="closeSystemModal" class="text-gray-400 hover:text-gray-600">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            
+            <div class="space-y-4">
+                <!-- Timer Input -->
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-2">
+                        Timer (seconds) - Leave empty for immediate action
+                    </label>
+                    <input type="number" id="systemTimer" 
+                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" 
+                           placeholder="0" min="0" max="86400">
+                    <p class="text-xs text-gray-500 mt-1">Maximum: 24 hours (86400 seconds)</p>
+                </div>
+                
+                <!-- Action Buttons -->
+                <div class="grid grid-cols-2 gap-3">
+                    <button id="shutdownBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-3 rounded-lg transition-colors flex items-center justify-center">
+                        <i class="fas fa-power-off mr-2"></i>Shutdown
+                    </button>
+                    <button id="restartBtn" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-3 rounded-lg transition-colors flex items-center justify-center">
+                        <i class="fas fa-redo mr-2"></i>Restart
+                    </button>
+                </div>
+                
+                <!-- Force Shutdown Option -->
+                <div class="flex items-center">
+                    <input type="checkbox" id="forceShutdown" class="mr-2" checked>
+                    <label for="forceShutdown" class="text-sm text-gray-700">Force shutdown (close applications without saving)</label>
+                </div>
+                
+                <!-- Warning -->
+                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                    <div class="flex">
+                        <i class="fas fa-exclamation-triangle text-yellow-600 mr-2 mt-0.5"></i>
+                        <div class="text-sm text-yellow-800">
+                            <strong>Warning:</strong> This will shut down or restart the entire system. 
+                            Make sure to save any unsaved work first.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="js/dashboard.js"></script>
 </body>
 </html>