Temp-Manager-Visualizer

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Temperature Manager</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* Color palette */
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
            
            /* Background colors */
            --bgc-primary: #f8f9fa;
            --bgc-secondary: #e9ecef;
            --bgc-modal: #ffffff;
            --bgc-table-header: #2c3e50;
            --bgc-table-row: #ffffff;
            --bgc-table-row-alt: #f8f9fa;
            --bgc-input: #ffffff;
            
            /* Text colors */
            --text-primary: #212529;
            --text-secondary: #6c757d;
            --text-light: #ffffff;
            --text-muted: #6c757d;
            
            /* Status colors */
            --status-ok: #28a745;
            --status-warning: #ffc107;
            --status-error: #dc3545;
            --status-info: #17a2b8;
            
            /* Temperature colors */
            --temp-low: #4facfe;
            --temp-medium: #00c6ff;
            --temp-warm: #ff9a44;
            --temp-hot: #ff4b2b;
            --temp-very-hot: #ff2b2b;
            
            /* Sizing and spacing */
            --border-radius: 8px;
            --border-radius-sm: 4px;
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            
            /* Font sizes */
            --font-size-xs: 0.75rem;
            --font-size-sm:...