From 46c727ea759da75b7d84655e4d562f2d77cf2744 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Thu, 30 Oct 2025 10:01:28 +0700
Subject: [PATCH] Update frontend to modern responsive design (v2.0.0)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modernized the web interface with a mobile-first responsive design:

- Added CSS custom properties (variables) for consistent theming
- Implemented responsive breakpoints (640px, 768px) for mobile/tablet/desktop
- Applied fluid typography using clamp() for automatic font scaling
- Enhanced animations (fade-in, slide-in, scale effects) for smooth UX
- Improved component styling with modern shadows and hover effects
- Added backdrop blur effects on modals
- Optimized touch targets (min 44px height) for mobile accessibility
- Updated button groups and layouts to stack on mobile
- Enhanced visual hierarchy with better spacing and typography
- Improved recordings grid with responsive card layout

Template version bumped from 1.9.2 to 2.0.0

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 rotary_phone_web.py | 646 ++++++++++++++++++++++++++++++++------------
 1 file changed, 470 insertions(+), 176 deletions(-)

diff --git a/rotary_phone_web.py b/rotary_phone_web.py
index 16ca732..637d131 100644
--- a/rotary_phone_web.py
+++ b/rotary_phone_web.py
@@ -151,7 +151,7 @@ BACKUP_ON_WRITE = BACKUP_CONFIG.get('backup_on_write', True)
 WEB_PORT = SYS_CONFIG['web']['port']
 
 # Template version - increment this when HTML template changes
-TEMPLATE_VERSION = "1.9.2"  # Updated: Use Unicode escapes for emojis in JavaScript strings
+TEMPLATE_VERSION = "2.0.0"  # Updated: Modern responsive design with mobile-first approach, improved layout and animations
 
 # Flask app
 app = Flask(__name__)
@@ -1351,302 +1351,531 @@ def main():
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Rotary Phone Control Panel</title>
     <style>
+        :root {
+            --primary: #667eea;
+            --primary-dark: #5568d3;
+            --secondary: #764ba2;
+            --success: #10b981;
+            --success-dark: #059669;
+            --danger: #ef4444;
+            --danger-dark: #dc2626;
+            --warning: #f59e0b;
+            --gray-50: #f9fafb;
+            --gray-100: #f3f4f6;
+            --gray-200: #e5e7eb;
+            --gray-300: #d1d5db;
+            --gray-400: #9ca3af;
+            --gray-500: #6b7280;
+            --gray-600: #4b5563;
+            --gray-700: #374151;
+            --gray-900: #111827;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+            --radius-sm: 8px;
+            --radius-md: 12px;
+            --radius-lg: 16px;
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
-        
+
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
             min-height: 100vh;
-            padding: 20px;
+            padding: 1rem;
+            line-height: 1.6;
         }
-        
+
+        @media (min-width: 768px) {
+            body {
+                padding: 2rem;
+            }
+        }
+
         .container {
-            max-width: 1200px;
+            max-width: 1400px;
             margin: 0 auto;
+            width: 100%;
         }
-        
+
         .header {
             text-align: center;
             color: white;
-            margin-bottom: 30px;
+            margin-bottom: 2rem;
+            animation: fadeInDown 0.6s ease-out;
         }
-        
+
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
         .header h1 {
-            font-size: 2.5em;
-            margin-bottom: 10px;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+            font-size: clamp(1.75rem, 5vw, 3rem);
+            margin-bottom: 0.5rem;
+            text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
+            font-weight: 700;
+            letter-spacing: -0.02em;
         }
-        
+
         .header p {
-            font-size: 1.1em;
-            opacity: 0.9;
+            font-size: clamp(0.95rem, 2vw, 1.15rem);
+            opacity: 0.95;
+            font-weight: 300;
         }
-        
+
         .card {
             background: white;
-            border-radius: 15px;
-            padding: 25px;
-            margin-bottom: 20px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+            border-radius: var(--radius-lg);
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: var(--shadow-xl);
+            transition: var(--transition);
+            animation: fadeInUp 0.6s ease-out backwards;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .card:nth-child(2) { animation-delay: 0.1s; }
+        .card:nth-child(3) { animation-delay: 0.2s; }
+        .card:nth-child(4) { animation-delay: 0.3s; }
+        .card:nth-child(5) { animation-delay: 0.4s; }
+        .card:nth-child(6) { animation-delay: 0.5s; }
+        .card:nth-child(7) { animation-delay: 0.6s; }
+
+        @media (min-width: 768px) {
+            .card {
+                padding: 2rem;
+            }
+        }
+
+        .card:hover {
+            box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.15);
+            transform: translateY(-2px);
         }
         
         .status-card {
             display: flex;
-            align-items: center;
-            justify-content: space-between;
+            flex-direction: column;
+            gap: 1rem;
         }
-        
+
+        @media (min-width: 640px) {
+            .status-card {
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+            }
+        }
+
         .status-indicator {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 0.75rem;
+            flex-wrap: wrap;
         }
-        
+
         .status-dot {
-            width: 20px;
-            height: 20px;
+            width: 18px;
+            height: 18px;
             border-radius: 50%;
             animation: pulse 2s infinite;
+            flex-shrink: 0;
         }
-        
+
         .status-dot.on-hook {
-            background: #10b981;
+            background: var(--success);
+            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
         }
-        
+
         .status-dot.off-hook {
-            background: #ef4444;
+            background: var(--danger);
+            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
         }
-        
+
         .status-dot.recording {
-            background: #f59e0b;
+            background: var(--warning);
+            box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
         }
-        
+
         @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
+            0%, 100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+            50% {
+                opacity: 0.7;
+                transform: scale(1.05);
+            }
         }
-        
+
         .card h2 {
-            color: #333;
-            margin-bottom: 20px;
-            font-size: 1.5em;
-            border-bottom: 2px solid #667eea;
-            padding-bottom: 10px;
+            color: var(--gray-900);
+            margin-bottom: 1.25rem;
+            font-size: clamp(1.25rem, 3vw, 1.5rem);
+            font-weight: 700;
+            border-bottom: 3px solid var(--primary);
+            padding-bottom: 0.75rem;
+            letter-spacing: -0.01em;
         }
         
         .upload-section {
-            border: 2px dashed #667eea;
-            border-radius: 10px;
-            padding: 30px;
+            border: 2px dashed var(--primary);
+            border-radius: var(--radius-md);
+            padding: 1.5rem;
             text-align: center;
-            margin-bottom: 20px;
-            background: #f8f9fa;
+            margin-bottom: 1.5rem;
+            background: var(--gray-50);
+            transition: var(--transition);
         }
-        
+
+        @media (min-width: 768px) {
+            .upload-section {
+                padding: 2rem;
+            }
+        }
+
+        .upload-section:hover {
+            border-color: var(--primary-dark);
+            background: white;
+        }
+
         .upload-section input[type="file"] {
             display: none;
         }
-        
+
         .upload-label {
             display: inline-block;
-            padding: 12px 30px;
-            background: #667eea;
+            padding: 0.875rem 1.75rem;
+            background: var(--primary);
             color: white;
-            border-radius: 8px;
+            border-radius: var(--radius-sm);
             cursor: pointer;
             font-weight: 600;
-            transition: background 0.3s;
+            transition: var(--transition);
+            font-size: 0.95rem;
+            box-shadow: var(--shadow-md);
         }
-        
+
         .upload-label:hover {
-            background: #5568d3;
+            background: var(--primary-dark);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-lg);
+        }
+
+        .upload-label:active {
+            transform: translateY(0);
         }
 
         .sound-selector {
             width: 100%;
-            padding: 12px;
-            font-size: 1em;
-            border: 2px solid #e5e7eb;
-            border-radius: 8px;
+            padding: 0.875rem 1rem;
+            font-size: 0.95rem;
+            border: 2px solid var(--gray-200);
+            border-radius: var(--radius-sm);
             background: white;
             cursor: pointer;
-            transition: border-color 0.3s;
+            transition: var(--transition);
+            font-family: inherit;
         }
 
         .sound-selector:hover {
-            border-color: #667eea;
+            border-color: var(--primary);
         }
 
         .sound-selector:focus {
             outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
         }
 
         .btn {
-            padding: 10px 20px;
+            padding: 0.75rem 1.5rem;
             border: none;
-            border-radius: 8px;
+            border-radius: var(--radius-sm);
             cursor: pointer;
             font-weight: 600;
-            transition: all 0.3s;
-            font-size: 0.95em;
+            transition: var(--transition);
+            font-size: 0.9rem;
+            font-family: inherit;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            box-shadow: var(--shadow-sm);
+            white-space: nowrap;
+            min-height: 44px;
         }
-        
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
         .btn-primary {
-            background: #667eea;
+            background: var(--primary);
             color: white;
         }
-        
-        .btn-primary:hover {
-            background: #5568d3;
-            transform: translateY(-2px);
+
+        .btn-primary:hover:not(:disabled) {
+            background: var(--primary-dark);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
         }
-        
+
         .btn-success {
-            background: #10b981;
+            background: var(--success);
             color: white;
         }
-        
-        .btn-success:hover {
-            background: #059669;
+
+        .btn-success:hover:not(:disabled) {
+            background: var(--success-dark);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
         }
-        
+
         .btn-danger {
-            background: #ef4444;
+            background: var(--danger);
             color: white;
         }
-        
-        .btn-danger:hover {
-            background: #dc2626;
+
+        .btn-danger:hover:not(:disabled) {
+            background: var(--danger-dark);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
         }
-        
+
         .btn-secondary {
-            background: #6b7280;
+            background: var(--gray-500);
             color: white;
         }
-        
-        .btn-secondary:hover {
-            background: #4b5563;
+
+        .btn-secondary:hover:not(:disabled) {
+            background: var(--gray-600);
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-md);
+        }
+
+        .btn:active:not(:disabled) {
+            transform: translateY(0);
         }
         
         .recordings-grid {
             display: grid;
-            gap: 15px;
+            gap: 1rem;
         }
-        
+
         .recording-item {
             display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 15px;
-            background: #f8f9fa;
-            border-radius: 10px;
-            transition: all 0.3s;
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1.25rem;
+            background: var(--gray-50);
+            border-radius: var(--radius-md);
+            transition: var(--transition);
+            border: 1px solid var(--gray-200);
         }
-        
+
+        @media (min-width: 768px) {
+            .recording-item {
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+            }
+        }
+
         .recording-item:hover {
-            background: #e9ecef;
-            transform: translateX(5px);
+            background: white;
+            transform: translateX(3px);
+            box-shadow: var(--shadow-md);
+            border-color: var(--primary);
         }
-        
+
         .recording-info {
             flex-grow: 1;
+            min-width: 0;
         }
-        
+
         .recording-info h3 {
-            color: #333;
-            font-size: 1em;
-            margin-bottom: 5px;
+            color: var(--gray-900);
+            font-size: 1rem;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
-        
+
         .recording-meta {
-            color: #6b7280;
-            font-size: 0.85em;
+            color: var(--gray-500);
+            font-size: 0.85rem;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
         }
-        
+
         .recording-actions {
             display: flex;
-            gap: 10px;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            justify-content: flex-start;
+        }
+
+        @media (min-width: 768px) {
+            .recording-actions {
+                justify-content: flex-end;
+            }
+        }
+
+        @media (max-width: 767px) {
+            .recording-actions .btn {
+                flex: 1 1 calc(50% - 0.25rem);
+                font-size: 0.85rem;
+                padding: 0.625rem 1rem;
+            }
         }
         
         .no-recordings {
             text-align: center;
-            padding: 40px;
-            color: #6b7280;
+            padding: 3rem 1.5rem;
+            color: var(--gray-500);
         }
-        
+
         .alert {
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 20px;
+            padding: 1rem 1.25rem;
+            border-radius: var(--radius-md);
+            margin-bottom: 1.5rem;
+            font-size: 0.95rem;
+            box-shadow: var(--shadow-sm);
+            animation: slideIn 0.3s ease-out;
         }
-        
+
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
         .alert-success {
             background: #d1fae5;
             color: #065f46;
-            border-left: 4px solid #10b981;
+            border-left: 4px solid var(--success);
         }
-        
+
         .alert-error {
             background: #fee2e2;
             color: #991b1b;
-            border-left: 4px solid #ef4444;
+            border-left: 4px solid var(--danger);
         }
-        
+
+        .alert-warning {
+            background: #fef3c7;
+            color: #92400e;
+            border-left: 4px solid var(--warning);
+        }
+
         .alert-info {
             background: #dbeafe;
             color: #1e40af;
             border-left: 4px solid #3b82f6;
         }
-        
+
         .filename-display {
-            font-family: 'Courier New', monospace;
-            background: #e9ecef;
-            padding: 5px 10px;
-            border-radius: 5px;
-            margin-top: 10px;
-            font-size: 0.9em;
+            font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
+            background: var(--gray-100);
+            padding: 0.625rem 1rem;
+            border-radius: var(--radius-sm);
+            margin-top: 1rem;
+            font-size: 0.875rem;
+            word-break: break-all;
         }
-        
+
         .stats {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin-top: 20px;
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+            gap: 1rem;
+            margin-top: 1.5rem;
         }
-        
+
+        @media (min-width: 640px) {
+            .stats {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
         .stat-box {
-            background: #667eea;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
             color: white;
-            padding: 20px;
-            border-radius: 10px;
+            padding: 1.5rem;
+            border-radius: var(--radius-md);
             text-align: center;
+            box-shadow: var(--shadow-lg);
+            transition: var(--transition);
         }
-        
+
+        .stat-box:hover {
+            transform: translateY(-3px) scale(1.02);
+            box-shadow: var(--shadow-xl);
+        }
+
         .stat-value {
-            font-size: 2em;
-            font-weight: bold;
-            margin-bottom: 5px;
+            font-size: clamp(1.75rem, 4vw, 2.25rem);
+            font-weight: 800;
+            margin-bottom: 0.25rem;
+            letter-spacing: -0.02em;
         }
-        
+
         .stat-label {
-            font-size: 0.9em;
-            opacity: 0.9;
+            font-size: 0.875rem;
+            opacity: 0.95;
+            font-weight: 500;
         }
-        
+
         .button-group {
             display: flex;
-            gap: 10px;
-            margin-top: 15px;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+            margin-top: 1.25rem;
+        }
+
+        @media (max-width: 640px) {
+            .button-group {
+                flex-direction: column;
+            }
+
+            .button-group .btn {
+                width: 100%;
+            }
         }
 
         .active-greeting {
-            border: 2px solid #667eea;
+            border: 2px solid var(--primary);
             background: #f0f4ff !important;
         }
 
@@ -1663,51 +1892,80 @@ def main():
             top: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.7);
+            background: rgba(0, 0, 0, 0.75);
             align-items: center;
             justify-content: center;
+            backdrop-filter: blur(4px);
+            padding: 1rem;
         }
 
         .audio-modal.show {
             display: flex;
+            animation: fadeIn 0.3s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
         }
 
         .audio-modal-content {
             background: white;
-            padding: 30px;
-            border-radius: 15px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+            padding: 2rem;
+            border-radius: var(--radius-lg);
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
             max-width: 500px;
-            width: 90%;
+            width: 100%;
+            animation: scaleIn 0.3s ease-out;
+        }
+
+        @keyframes scaleIn {
+            from {
+                opacity: 0;
+                transform: scale(0.9);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
         }
 
         .audio-modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 20px;
+            margin-bottom: 1.5rem;
         }
 
         .audio-modal-header h3 {
             margin: 0;
-            color: #333;
+            color: var(--gray-900);
+            font-size: 1.25rem;
+            font-weight: 700;
         }
 
         .close-modal {
-            font-size: 28px;
+            font-size: 1.75rem;
             font-weight: bold;
-            color: #6b7280;
+            color: var(--gray-400);
             cursor: pointer;
             border: none;
             background: none;
-            padding: 0;
-            width: 30px;
-            height: 30px;
+            padding: 0.25rem;
+            width: 36px;
+            height: 36px;
             line-height: 1;
+            border-radius: var(--radius-sm);
+            transition: var(--transition);
         }
 
         .close-modal:hover {
-            color: #333;
+            color: var(--gray-900);
+            background: var(--gray-100);
         }
 
         .audio-player-container {
@@ -1716,16 +1974,19 @@ def main():
 
         .audio-player-container audio {
             width: 100%;
-            margin-top: 20px;
+            margin-top: 1.25rem;
+            border-radius: var(--radius-sm);
         }
 
         .audio-filename {
-            font-family: 'Courier New', monospace;
-            background: #f8f9fa;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
+            font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
+            background: var(--gray-50);
+            padding: 0.75rem 1rem;
+            border-radius: var(--radius-sm);
+            margin-bottom: 0.75rem;
             word-break: break-all;
+            font-size: 0.875rem;
+            color: var(--gray-700);
         }
 
         /* Volume slider */
@@ -1733,6 +1994,17 @@ def main():
             -webkit-appearance: none;
             appearance: none;
             cursor: pointer;
+            width: 100%;
+        }
+
+        input[type="range"]::-webkit-slider-track {
+            height: 6px;
+            border-radius: 3px;
+        }
+
+        input[type="range"]::-moz-range-track {
+            height: 6px;
+            border-radius: 3px;
         }
 
         input[type="range"]::-webkit-slider-thumb {
@@ -1741,31 +2013,53 @@ def main():
             width: 20px;
             height: 20px;
             border-radius: 50%;
-            background: #667eea;
+            background: var(--primary);
             cursor: pointer;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            transition: all 0.2s;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+            transition: var(--transition);
+            margin-top: -7px;
         }
 
         input[type="range"]::-webkit-slider-thumb:hover {
-            background: #5568d3;
-            transform: scale(1.2);
+            background: var(--primary-dark);
+            transform: scale(1.15);
+            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
+        }
+
+        input[type="range"]::-webkit-slider-thumb:active {
+            transform: scale(1.05);
         }
 
         input[type="range"]::-moz-range-thumb {
             width: 20px;
             height: 20px;
             border-radius: 50%;
-            background: #667eea;
+            background: var(--primary);
             cursor: pointer;
             border: none;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            transition: all 0.2s;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+            transition: var(--transition);
         }
 
         input[type="range"]::-moz-range-thumb:hover {
-            background: #5568d3;
-            transform: scale(1.2);
+            background: var(--primary-dark);
+            transform: scale(1.15);
+            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
+        }
+
+        input[type="range"]::-moz-range-thumb:active {
+            transform: scale(1.05);
+        }
+
+        /* Responsive utilities */
+        @media (max-width: 640px) {
+            .card h2 {
+                font-size: 1.15rem;
+            }
+
+            h3 {
+                font-size: 1rem;
+            }
         }
     </style>
 </head>