From 9211aa6359bd35d34e1604f04e840215df31c0c4 Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 10:54:54 +0200 Subject: [PATCH 01/26] feat: add website assets from PR #169 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ultra-granular split for Sourcery compatibility (30k chars < 150k limit): - favicon.ico: Professional website favicon - css/comprehensive-demo.css: Advanced demo styling with CSS variables Part 3/4 of website files from feat/clean-demo-website. Completes the website assets for visual branding and styling. Original work attribution: PR #169 feat/clean-demo-website 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- website/css/comprehensive-demo.css | 1252 ++++++++++++++++++++++++++++ website/favicon.ico | 6 + 2 files changed, 1258 insertions(+) create mode 100644 website/css/comprehensive-demo.css create mode 100644 website/favicon.ico diff --git a/website/css/comprehensive-demo.css b/website/css/comprehensive-demo.css new file mode 100644 index 000000000..3d642f408 --- /dev/null +++ b/website/css/comprehensive-demo.css @@ -0,0 +1,1252 @@ +/* Comprehensive Demo Styles - Extracted from HTML for better maintainability */ + +/* CSS Variables */ +:root { + --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); + --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%); + --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); + --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%); + + --primary-color: #8b5cf6; + --secondary-color: #a855f7; + --accent-color: #c084fc; + --dark-color: #0f0f23; + --darker-color: #0a0a1a; + --light-accent: #e9d5ff; + --glass-bg: rgba(139, 92, 246, 0.1); + --glass-border: rgba(139, 92, 246, 0.2); + --error-color: #ef4444; + --success-color: #10b981; + + --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3); + --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +/* Material Icons styling */ +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; + vertical-align: middle; +} + +/* Info icon styling */ +.info-icon { + font-size: 16px !important; + color: #6b7280; + margin-left: 6px; + cursor: help; + opacity: 0.7; + transition: var(--transition-smooth); + vertical-align: middle; +} + +.info-icon:hover { + color: var(--primary-color); + opacity: 1; + transform: scale(1.1); +} + +/* Text input styling */ +#textInput { + min-height: 240px !important; + font-size: 16px; + line-height: 1.5; + resize: vertical; +} + +/* Base Styles */ +body.comprehensive-demo { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + line-height: 1.6; + color: #e2e8f0; + background: var(--dark-gradient); + background-attachment: fixed; + min-height: 100vh; + padding-top: 80px; /* Account for fixed navbar */ +} + +/* Result sections */ +.result-section-hidden { + display: none !important; +} + +.result-section-visible { + display: block; + animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Ensure all text is visible - scoped to comprehensive demo */ +.comprehensive-demo .text-muted { + color: #cbd5e1 !important; +} + +/* Scoped to demo container only */ +.demo-container .text-dark { + color: #e2e8f0; +} + +/* Feature card text improvements */ +.feature-card .text-muted { + color: #cbd5e1 !important; +} + +.feature-card h5, .feature-card h6 { + color: #f1f5f9 !important; +} + +.feature-card small { + color: #cbd5e1 !important; +} + +/* Scoped form controls to demo container */ +.demo-container .form-control { + color: #e2e8f0; + background-color: rgba(255, 255, 255, 0.1); + border-color: rgba(139, 92, 246, 0.3); +} + +.demo-container .form-control:focus { + color: #e2e8f0; + background-color: rgba(255, 255, 255, 0.15); + border-color: var(--primary-color); + box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25); +} + +.comprehensive-demo .form-control::placeholder { + color: #94a3b8 !important; +} + +/* Hero Section */ +.hero-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.2) 0%, transparent 50%), + radial-gradient(circle at 40% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 50%); + animation: float 6s ease-in-out infinite; +} + +.hero-content { + position: relative; + z-index: 2; +} + +/* Demo Container - Full Width Professional Design */ +.demo-container { + background: var(--glass-bg); + backdrop-filter: blur(20px); + border: 1px solid var(--glass-border); + border-radius: 20px; + box-shadow: var(--shadow-glass); + padding: 3rem; + margin: 2rem 0; + width: 100%; + position: relative; + z-index: 1; + color: #e2e8f0; +} + +/* Feature Cards */ +.feature-card { + background: var(--glass-bg); + backdrop-filter: blur(15px); + border: 1px solid var(--glass-border); + border-radius: 20px; + box-shadow: var(--shadow-glass); + transition: var(--transition-bounce); + color: #e2e8f0; + height: 100%; +} + +.feature-card:hover { + transform: translateY(-5px) scale(1.02); + box-shadow: var(--shadow-glow); +} + +.feature-card.active { + background: var(--primary-gradient); + border-color: var(--accent-color); + color: white; + transform: translateY(-5px) scale(1.05); + box-shadow: var(--shadow-glow); +} + +/* Navigation */ +.comprehensive-demo .navbar { + background: rgba(15, 15, 35, 0.95); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--glass-border); +} + +.comprehensive-demo .navbar-brand, .comprehensive-demo .navbar .nav-link { + color: #e2e8f0; +} + +/* Buttons */ +.comprehensive-demo .btn-primary { + background: var(--primary-gradient); + border: none; + border-radius: 12px; + padding: 12px 30px; + font-weight: 600; + transition: var(--transition-bounce); + box-shadow: var(--shadow-glow); +} + +.comprehensive-demo .btn-primary:hover { + transform: translateY(-2px) scale(1.05); + box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4); +} + +.comprehensive-demo .btn:focus-visible { + outline: 3px solid #667eea; + outline-offset: 2px; +} + +/* Form Controls - consolidated with scoped rules above */ + +/* Focus styles consolidated with scoped rules above */ + +.demo-container .form-control::placeholder { + color: #94a3b8; +} + +/* Loading States */ +.loading-spinner { + display: none; + color: #e2e8f0; +} + +.loading-spinner.show { + display: block; +} + +/* Result Sections */ +.result-section { + display: none; +} + +/* Ensure icons are visible in results */ +.feature-card h5 i { + font-size: 1.2rem; + margin-right: 8px; +} + +/* Processing Information Icons */ +.processing-info i { + font-size: 1.5rem !important; + margin-bottom: 8px; +} + +.result-section.show { + display: block; + animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(40px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 33% { transform: translateY(-20px) rotate(1deg); } + 66% { transform: translateY(-10px) rotate(-1deg); } +} + +.floating-card { + animation: float 6s ease-in-out infinite; +} + +/* Text Effects */ +.gradient-text { + background: var(--primary-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Emotion Badges */ +.emotion-badge { + display: block; + padding: 8px 16px; + margin: 4px 0; + border-radius: 20px; + font-size: 0.9rem; + font-weight: 500; + transition: var(--transition-smooth); + text-align: center; + width: 100%; + box-sizing: border-box; +} + +.emotion-badge:hover { + transform: scale(1.05); +} + +/* Emotion Badges Container */ +#emotionBadges { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 20px; +} + +/* Audio Visualizer */ +.audio-visualizer { + width: 100%; + height: 60px; + background: var(--glass-bg); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + margin: 10px 0; +} + +.audio-bar { + width: 4px; + height: 20px; + background: var(--primary-color); + margin: 0 2px; + border-radius: 2px; + animation: audioPulse 0.5s ease-in-out infinite alternate; +} + +@keyframes audioPulse { + 0% { height: 20px; } + 100% { height: 40px; } +} + +/* Reduce motion for users who prefer it */ +@media (prefers-reduced-motion: reduce) { + .step.active .step-circle, + .spinner { + animation: none !important; + } + .btn:hover { + transform: none !important; + box-shadow: none !important; + } +} + +/* Progress Steps */ +.progress-step { + display: flex; + align-items: center; +} + +/* Vertical Progress Pipeline */ +.progress-pipeline-vertical { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; /* Reduced from 20px for tighter spacing */ + padding: 25px 15px; /* Reduced padding */ + background: var(--glass-bg); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + min-height: 450px; /* Reduced height */ + justify-content: center; + width: 100%; +} + +.progress-step-vertical { + display: flex; + flex-direction: row; + align-items: center; + text-align: left; + padding: 16px 20px; /* Increased padding for better touch targets */ + border-radius: 15px; + transition: var(--transition-smooth); + min-width: 160px; /* Increased width */ + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 4px; /* Reduced margin */ + width: 100%; /* Full width for better appearance */ +} + +.progress-step-vertical .step-icon-small { + width: 24px !important; /* Increased from 18px */ + height: 24px !important; /* Increased from 18px */ + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 16px; /* Increased margin */ + margin-bottom: 0; + font-size: 0.8rem !important; /* Increased from 0.6rem */ + transition: var(--transition-smooth); + background: rgba(255, 255, 255, 0.1) !important; + color: #e2e8f0 !important; + border: 1px solid rgba(255, 255, 255, 0.2); + flex-shrink: 0; +} + +.progress-step-vertical .step-label { + font-size: 0.9rem; /* Increased from 0.7rem */ + font-weight: 600; + color: #e2e8f0; + transition: var(--transition-smooth); + text-align: left; /* Changed from center to left for better alignment */ + flex: 1; /* Take remaining space */ +} + +.progress-step-vertical.active .step-icon-small { + background: var(--primary-gradient) !important; + color: white !important; + box-shadow: var(--shadow-glow); +} + +.progress-step-vertical.completed .step-icon-small { + background: var(--success-color) !important; + color: white !important; +} + +.progress-step-vertical.error .step-icon-small { + background: var(--error-color) !important; + color: white !important; +} + +.pipeline-arrow-vertical { + font-size: 1.2rem; /* Slightly smaller */ + color: #94a3b8; /* Better color */ + margin: 2px 0; /* Reduced margin */ + opacity: 0.7; /* Subtle appearance */ + transition: var(--transition-smooth); +} + +.progress-step.completed { + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.3); +} + +.progress-step.active { + background: var(--primary-gradient); + color: white; +} + +.step-icon { + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 15px; + font-size: 14px; +} + +.step-icon.completed { + background: #10b981; + color: white; +} + +.step-icon.active { + background: white; + color: var(--primary-color); +} + +.step-icon.pending { + background: rgba(139, 92, 246, 0.2); + color: #94a3b8; +} + +/* Progress Pipeline - New Compact Horizontal Design */ +.progress-pipeline { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 1.5rem; + background: var(--glass-bg); + border-radius: 15px; + border: 1px solid var(--glass-border); + max-width: 700px; + margin: 0 auto; +} + +/* Horizontal Progress Pipeline for Title Flow */ +.progress-pipeline-horizontal { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: rgba(139, 92, 246, 0.05); + border-radius: 25px; + border: 1px solid rgba(139, 92, 246, 0.1); + backdrop-filter: blur(5px); + box-shadow: none; + opacity: 0.7; + transition: all 0.3s ease; +} + +.progress-pipeline-horizontal:hover { + opacity: 1; + background: rgba(139, 92, 246, 0.08); +} + +/* Dynamic Layout States */ +#inputLayout { + transition: all 0.5s ease-in-out; +} + +#resultsLayout { + transition: all 0.5s ease-in-out; +} + +#titleWithFlow { + transition: all 0.3s ease-in-out; +} + +/* Enhanced Feature Cards with Better Background Prominence */ +.feature-card { + background: linear-gradient(135deg, + rgba(139, 92, 246, 0.15) 0%, + rgba(168, 85, 247, 0.12) 50%, + rgba(192, 132, 252, 0.1) 100%); + backdrop-filter: blur(15px); + border: 1px solid rgba(139, 92, 246, 0.25); + border-radius: 20px; + box-shadow: var(--shadow-glass); + transition: var(--transition-bounce); + color: #e2e8f0; + height: 100%; + padding: 2rem; /* Increased padding for better background-to-text ratio */ + min-height: 140px; /* Ensure minimum height for prominence */ + position: relative; +} + +/* Add subtle glow effect to feature cards */ +.feature-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, + rgba(139, 92, 246, 0.05), + rgba(168, 85, 247, 0.03), + rgba(192, 132, 252, 0.02)); + border-radius: 20px; + z-index: -1; + opacity: 0; + transition: opacity 0.3s ease; +} + +.feature-card:hover::before { + opacity: 1; +} + +/* Enhanced demo container background */ +.demo-container { + background: linear-gradient(135deg, + rgba(139, 92, 246, 0.12) 0%, + rgba(15, 15, 35, 0.95) 50%, + rgba(168, 85, 247, 0.08) 100%); + backdrop-filter: blur(20px); + border: 1px solid rgba(139, 92, 246, 0.2); + border-radius: 20px; + box-shadow: + var(--shadow-glass), + 0 0 40px rgba(139, 92, 246, 0.1); + padding: 3rem; + margin: 2rem 0; + width: 100%; + position: relative; + z-index: 1; + color: #e2e8f0; +} + +/* Enhanced Loading Step Styles */ +.process-step { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 15px; + transition: all 0.3s ease; + text-align: center; +} + +.process-step.active { + background: rgba(139, 92, 246, 0.15); + border-color: rgba(139, 92, 246, 0.4); + transform: scale(1.02); +} + +.process-step.completed { + background: rgba(16, 185, 129, 0.15); + border-color: rgba(16, 185, 129, 0.4); +} + +.step-text { + font-weight: 600; + color: #e2e8f0; + font-size: 0.9rem; + margin-bottom: 8px; +} + +.step-status { + font-size: 0.8rem; + color: #94a3b8; + font-weight: 500; +} + +.process-step.active .step-status { + color: #a855f7; +} + +.process-step.completed .step-status { + color: #10b981; +} + +/* Processing Information Compact Styles */ +#processingInfoSidebar .feature-card { + min-height: auto; +} + +#processingInfoSidebar .bg-dark { + transition: all 0.2s ease; +} + +#processingInfoSidebar .bg-dark:hover { + background-color: rgba(0, 0, 0, 0.4) !important; + transform: translateX(2px); +} + +/* Button Consistency and Improved Spacing */ +.btn-lg { + padding: 0.75rem 1.5rem; + font-weight: 600; + border-radius: 12px; + transition: all 0.3s ease; + min-width: 120px; /* Ensure consistent button widths */ +} + +/* Debug Test Section Toggleable */ +#debugTestSection.hidden { + display: none !important; +} + +#debugTestSection .btn-sm { + padding: 0.5rem 1rem; + font-size: 0.875rem; + border-radius: 8px; + transition: all 0.2s ease; +} + +/* Enhanced Input Area Background */ +#textInput { + min-height: 240px !important; + font-size: 16px; + line-height: 1.5; + resize: vertical; + padding: 1.5rem; /* Increased padding for better appearance */ + background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */ + border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */ +} + +#textInput:focus { + background-color: rgba(255, 255, 255, 0.18) !important; + border-color: var(--primary-color) !important; + box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important; + transform: scale(1.01); /* Subtle scale on focus */ +} + +.progress-step-horizontal { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-width: 60px; + transition: var(--transition-smooth); +} + +.progress-step-horizontal .step-icon-small { + width: 18px !important; + height: 18px !important; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.25rem; + font-size: 0.7rem !important; + transition: var(--transition-smooth); + background: rgba(255, 255, 255, 0.1) !important; + color: #cbd5e1 !important; + border: 1px solid rgba(255, 255, 255, 0.15); + flex-shrink: 0; +} + +.progress-step-horizontal .step-label { + font-size: 0.65rem; + font-weight: 500; + color: #94a3b8; + white-space: nowrap; + transition: var(--transition-smooth); +} + +.progress-step-horizontal.active .step-icon-small { + background: var(--primary-gradient) !important; + color: white !important; + transform: scale(1.1); +} + +.progress-step-horizontal.active .step-label { + color: var(--primary-color); + font-weight: 600; +} + +.progress-step-horizontal.completed .step-icon-small { + background: #10b981 !important; + color: white !important; +} + +.progress-step-horizontal.completed .step-label { + color: #10b981; +} + +.pipeline-arrow { + font-size: 0.8rem; + color: #64748b; + font-weight: normal; + user-select: none; + opacity: 0.6; +} + + +/* Responsive Design for Progress Pipeline */ +@media (max-width: 768px) { + .progress-pipeline { + flex-direction: column; + gap: 1.5rem; + padding: 2rem 1rem; + } + + .pipeline-arrow { + transform: rotate(90deg); + font-size: 1.5rem; + } + + .progress-step-horizontal { + min-width: 100px; + } + + .step-label { + font-size: 0.8rem; + } +} + +/* Error Messages */ +.error-message { + color: #ef4444; + font-size: 0.875rem; + margin-top: 8px; + padding: 8px 12px; + background: rgba(239, 68, 68, 0.1); + border: 1px solid rgba(239, 68, 68, 0.2); + border-radius: 8px; + display: none; +} + +.error-message.show { + display: block; + animation: fadeInUp 0.3s ease-out; +} + +/* Success Messages */ +.success-message { + color: #10b981; + font-size: 0.875rem; + margin-top: 8px; + padding: 8px 12px; + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.2); + border-radius: 8px; + display: none; +} + +.success-message.show { + display: block; + animation: fadeInUp 0.3s ease-out; +} + +/* Model Detail Cards */ +.model-detail-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 12px; + margin-bottom: 10px; + transition: all 0.3s ease; +} + +.model-detail-card:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-1px); +} + +.model-detail-label { + font-size: 0.75rem; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 4px; + font-weight: 600; +} + +.model-detail-value { + font-size: 1.1rem; + color: #f1f5f9; + font-weight: 700; +} + +.model-detail-text { + font-size: 0.9rem; + color: #cbd5e1; + line-height: 1.4; +} + +/* Pure HTML/CSS Chart styling - BEAUTIFUL DESIGN */ +.emotion-chart-container, .summary-chart-container { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); + border-radius: 16px; + padding: 25px; + margin: 20px 0; + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +.emotion-chart-container::before, .summary-chart-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc); +} + +.chart-header { + text-align: center; + margin-bottom: 25px; +} + +.chart-title { + color: #fbbf24; + font-weight: 700; + margin-bottom: 8px; + font-size: 1.25rem; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.chart-subtitle { + color: #cbd5e1; + font-size: 0.9rem; + opacity: 0.8; +} + +.emotion-bars { + display: flex; + flex-direction: column; + gap: 20px; +} + +.emotion-bar { + margin-bottom: 20px; + animation: slideInLeft 0.8s ease-out forwards; + opacity: 0; + transform: translateX(-30px); + background: rgba(255, 255, 255, 0.03); + border-radius: 12px; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; + display: block; + visibility: visible; +} + +.emotion-bar:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +@keyframes slideInLeft { + to { + opacity: 1; + transform: translateX(0); + } +} + +.emotion-label { + display: flex; + justify-content: space-between; + margin-bottom: 12px; + align-items: center; +} + +.emotion-name { + font-weight: 700; + color: #f1f5f9; + text-transform: capitalize; + font-size: 1rem; + letter-spacing: 0.5px; +} + +.emotion-percentage { + color: #a855f7; + font-weight: 700; + font-size: 1.1rem; + background: rgba(168, 85, 247, 0.1); + padding: 4px 12px; + border-radius: 20px; + border: 1px solid rgba(168, 85, 247, 0.3); +} + +.emotion-bar-bg { + background: rgba(0, 0, 0, 0.3); + border-radius: 15px; + height: 16px; + overflow: hidden; + position: relative; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.emotion-bar-fill { + height: 100%; + border-radius: 15px; + transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.emotion-bar-fill::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + animation: shimmer 3s infinite; +} + +@keyframes shimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +.summary-stats { + display: flex; + justify-content: space-around; + margin-bottom: 25px; + gap: 20px; +} + +.stat-item { + text-align: center; + flex: 1; + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; +} + +.stat-item:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-2px); +} + +.stat-item.highlight { + background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1)); + border: 2px solid rgba(139, 92, 246, 0.4); + box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2); +} + +.stat-value { + font-size: 1.8rem; + font-weight: 800; + color: #fbbf24; + margin-bottom: 8px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.stat-item.highlight .stat-value { + color: #c084fc; + font-size: 2rem; +} + +.stat-label { + font-size: 0.8rem; + color: #cbd5e1; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; +} + +.summary-bars { + display: flex; + flex-direction: column; + gap: 20px; +} + +.summary-bar { + margin-bottom: 20px; + background: rgba(255, 255, 255, 0.03); + border-radius: 12px; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; +} + +.summary-bar:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-1px); +} + +.bar-label { + font-weight: 700; + color: #f1f5f9; + margin-bottom: 12px; + font-size: 1rem; +} + +.bar-bg { + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + height: 24px; + overflow: hidden; + position: relative; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.bar-fill { + height: 100%; + border-radius: 12px; + transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.bar-fill.original { + background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd); +} + +.bar-fill.summary { + background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7); +} + +.bar-value { + text-align: right; + font-size: 0.9rem; + color: #cbd5e1; + margin-top: 8px; + font-weight: 600; +} + +.chart-footer { + text-align: center; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.1); + color: #94a3b8; + font-size: 0.85rem; +} + + +/* Keyboard Focus Indicators */ +.comprehensive-demo .btn-primary:focus-visible { + outline: 3px solid #c084fc; + outline-offset: 2px; + box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.45); +} + +.demo-container .form-control:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + +/* Reduced Motion Preferences */ +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; + } + .hero-section::before { + animation: none !important; + } + .floating-card { + animation: none !important; + } + .audio-bar { + animation: none !important; + } +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .progress-pipeline-horizontal { + gap: 0.5rem; + padding: 0.8rem 1rem; + } + + .progress-pipeline-horizontal .step-label { + font-size: 0.7rem; + } + + #processingInfoSidebar { + margin-top: 2rem; + } +} + +@media (max-width: 768px) { + .demo-container { + padding: 30px 20px; + margin: -50px 15px 30px 15px; + } + + .hero-section { + padding: 80px 0; + } + + /* Stack title and flow vertically on mobile */ + #titleWithFlow .d-flex { + flex-direction: column; + gap: 0.75rem; + text-align: center; + } + + .progress-pipeline-horizontal { + gap: 0.25rem; + padding: 0.4rem 0.6rem; + justify-content: center; + } + + .progress-step-horizontal { + min-width: 40px; + } + + .progress-step-horizontal .step-icon-small { + width: 16px !important; + height: 16px !important; + font-size: 0.6rem !important; + } + + .progress-step-horizontal .step-label { + font-size: 0.5rem; + } + + .pipeline-arrow { + font-size: 0.7rem; + } + + /* Stack buttons vertically on mobile */ + .d-flex.gap-3.justify-content-center { + flex-direction: column; + align-items: center; + gap: 0.75rem !important; + } + + .btn-lg { + min-width: 200px; + width: 100%; + max-width: 300px; + } + + /* Full width input on mobile */ + #textInput { + min-height: 180px !important; + padding: 1rem; + } + + /* Compact processing info on mobile */ + #processingInfoSidebar .bg-dark { + padding: 0.5rem !important; + } + + #processingInfoSidebar .feature-card { + padding: 1rem; + } + + /* Results layout adjustments */ + #resultsLayout .col-lg-8, + #resultsLayout .col-lg-4 { + flex: 0 0 100%; + max-width: 100%; + } +} + +@media (max-width: 576px) { + .demo-container { + padding: 20px 15px; + margin: -50px 10px 20px 10px; + } + + .progress-pipeline-horizontal { + padding: 0.5rem; + } + + .btn-lg { + padding: 0.6rem 1rem; + font-size: 0.9rem; + } + + .feature-card { + padding: 1rem !important; + margin-bottom: 1rem; + } + + #textInput { + min-height: 160px !important; + font-size: 14px; + } +} + +/* Debug section responsive behavior */ +@media (max-width: 992px) { + #debugTestSection { + margin-top: 1rem; + } +} + +/* Enhanced transitions for responsive changes */ +@media (prefers-reduced-motion: no-preference) { + #titleWithFlow, + #inputLayout, + #resultsLayout { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } +} diff --git a/website/favicon.ico b/website/favicon.ico new file mode 100644 index 000000000..cb37ebb78 --- /dev/null +++ b/website/favicon.ico @@ -0,0 +1,6 @@ + +301 Moved +

301 Moved

+The document has moved +here. + From 373da35eb4ebca087127fd7e64ad96f776219602 Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 12:24:42 +0200 Subject: [PATCH 02/26] fix: replace HTML redirect favicon.ico with proper binary icon file --- website/favicon.ico | Bin 330 -> 1042 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/website/favicon.ico b/website/favicon.ico index cb37ebb78418ccdd4261cffee1aa89c5d8c4170d..2efdef2a8f3084bc3c9ab1abca51fdf6f9a0db6b 100644 GIT binary patch literal 1042 jcmZQ%5D;KsU}R8W00R~VhVGbe|3~p?7>uTYk(mYn=tJCP literal 330 zcmYk2!Eb^v7{%`-{trzLJ1L!bS!T<^6axv4MVX1aEVUNf41~c4nfvS4!VWvWm+$5G z-bbTsoA@*egSAgf2^=YadM3X*-7_qzE66L%;8shF{uIL?zkw(yi=|M!X(g}@^4SCS z9h${i68ek#IoejeJX10nl#GPubbT~e(ft33QBI~LI#;4A4Gt;ZqSD448lY$wZWy+$ z+DAgbb1yA$(83i}Npjw6Q|sV8i9(ww+o!8INbY!9FKubI2@dfpeHo0L7sZK-&yT8x zmSxA+aJrA*!|B^@40KJwEXQCj8dP_(h#}ePAITOT_LXcTC4uiw97={UW|{rq#Q6n$ CK58@o From 97a6f632d10894c128ce544ebdc6c3edde66b37c Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 12:24:50 +0200 Subject: [PATCH 03/26] fix: update HTML to use modular CSS structure --- website/comprehensive-demo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/comprehensive-demo.html b/website/comprehensive-demo.html index 010e8a3fb..56c8f1188 100644 --- a/website/comprehensive-demo.html +++ b/website/comprehensive-demo.html @@ -16,8 +16,8 @@ - - + + From ad48b66917e4ce44fe9c155dcac9f7e2c41eaff2 Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 12:24:58 +0200 Subject: [PATCH 04/26] fix: address code review issues in comprehensive-demo.css - Consolidate duplicate CSS rules (.demo-container, .feature-card, #textInput) - Fix aggressive universal selector in prefers-reduced-motion with specific classes - Make .step-label selector more specific to avoid conflicts - Merge duplicate @media (max-width: 768px) blocks for better maintainability --- website/css/comprehensive-demo.css | 289 +++++++++++++---------------- 1 file changed, 125 insertions(+), 164 deletions(-) diff --git a/website/css/comprehensive-demo.css b/website/css/comprehensive-demo.css index 3d642f408..1073ba403 100644 --- a/website/css/comprehensive-demo.css +++ b/website/css/comprehensive-demo.css @@ -59,13 +59,7 @@ transform: scale(1.1); } -/* Text input styling */ -#textInput { - min-height: 240px !important; - font-size: 16px; - line-height: 1.5; - resize: vertical; -} +/* Text input styling - consolidated below */ /* Base Styles */ body.comprehensive-demo { @@ -78,6 +72,107 @@ body.comprehensive-demo { padding-top: 80px; /* Account for fixed navbar */ } +/* Mobile Responsive Design - Consolidated */ +@media (max-width: 768px) { + body.comprehensive-demo { + background-attachment: scroll; + } + + .progress-pipeline { + flex-direction: column; + gap: 1.5rem; + padding: 2rem 1rem; + } + + .pipeline-arrow { + transform: rotate(90deg); + font-size: 1.5rem; + } + + .progress-step-horizontal { + min-width: 100px; + } + + .progress-step-horizontal .step-label { + font-size: 0.8rem; + } + + .demo-container { + padding: 30px 20px; + margin: -50px 15px 30px 15px; + } + + .hero-section { + padding: 80px 0; + } + + /* Stack title and flow vertically on mobile */ + #titleWithFlow .d-flex { + flex-direction: column; + gap: 0.75rem; + text-align: center; + } + + .progress-pipeline-horizontal { + gap: 0.25rem; + padding: 0.4rem 0.6rem; + justify-content: center; + } + + .progress-step-horizontal { + min-width: 40px; + } + + .progress-step-horizontal .step-icon-small { + width: 16px !important; + height: 16px !important; + font-size: 0.6rem !important; + } + + .progress-step-horizontal .step-label { + font-size: 0.5rem; + } + + .pipeline-arrow { + font-size: 0.7rem; + } + + /* Stack buttons vertically on mobile */ + .d-flex.gap-3.justify-content-center { + flex-direction: column; + align-items: center; + gap: 0.75rem !important; + } + + .btn-lg { + min-width: 200px; + width: 100%; + max-width: 300px; + } + + /* Full width input on mobile */ + #textInput { + min-height: 180px !important; + padding: 1rem; + } + + /* Compact processing info on mobile */ + #processingInfoSidebar .bg-dark { + padding: 0.5rem !important; + } + + #processingInfoSidebar .feature-card { + padding: 1rem; + } + + /* Results layout adjustments */ + #resultsLayout .col-lg-8, + #resultsLayout .col-lg-4 { + flex: 0 0 100%; + max-width: 100%; + } +} + /* Result sections */ .result-section-hidden { display: none !important; @@ -149,45 +244,9 @@ body.comprehensive-demo { z-index: 2; } -/* Demo Container - Full Width Professional Design */ -.demo-container { - background: var(--glass-bg); - backdrop-filter: blur(20px); - border: 1px solid var(--glass-border); - border-radius: 20px; - box-shadow: var(--shadow-glass); - padding: 3rem; - margin: 2rem 0; - width: 100%; - position: relative; - z-index: 1; - color: #e2e8f0; -} +/* Demo Container - Consolidated */ -/* Feature Cards */ -.feature-card { - background: var(--glass-bg); - backdrop-filter: blur(15px); - border: 1px solid var(--glass-border); - border-radius: 20px; - box-shadow: var(--shadow-glass); - transition: var(--transition-bounce); - color: #e2e8f0; - height: 100%; -} - -.feature-card:hover { - transform: translateY(-5px) scale(1.02); - box-shadow: var(--shadow-glow); -} - -.feature-card.active { - background: var(--primary-gradient); - border-color: var(--accent-color); - color: white; - transform: translateY(-5px) scale(1.05); - box-shadow: var(--shadow-glow); -} +/* Feature Cards - Consolidated */ /* Navigation */ .comprehensive-demo .navbar { @@ -343,17 +402,7 @@ body.comprehensive-demo { 100% { height: 40px; } } -/* Reduce motion for users who prefer it */ -@media (prefers-reduced-motion: reduce) { - .step.active .step-circle, - .spinner { - animation: none !important; - } - .btn:hover { - transform: none !important; - box-shadow: none !important; - } -} +/* Reduced motion rules consolidated above */ /* Progress Steps */ .progress-step { @@ -742,27 +791,7 @@ body.comprehensive-demo { } -/* Responsive Design for Progress Pipeline */ -@media (max-width: 768px) { - .progress-pipeline { - flex-direction: column; - gap: 1.5rem; - padding: 2rem 1rem; - } - - .pipeline-arrow { - transform: rotate(90deg); - font-size: 1.5rem; - } - - .progress-step-horizontal { - min-width: 100px; - } - - .step-label { - font-size: 0.8rem; - } -} +/* Responsive Design for Progress Pipeline - consolidated above */ /* Error Messages */ .error-message { @@ -1099,20 +1128,27 @@ body.comprehensive-demo { outline-offset: 2px; } -/* Reduced Motion Preferences */ +/* Reduced Motion Preferences - Consolidated */ @media (prefers-reduced-motion: reduce) { - * { + .step.active .step-circle, + .spinner, + .hero-section::before, + .floating-card, + .audio-bar, + .emotion-bar-fill::after, + .feature-card, + .btn, + .btn:hover, + .progress-step-vertical, + .progress-step-horizontal, + .process-step, + .model-detail-card, + .stat-item, + .emotion-bar, + .summary-bar { animation: none !important; transition: none !important; - } - .hero-section::before { - animation: none !important; - } - .floating-card { - animation: none !important; - } - .audio-bar { - animation: none !important; + transform: none !important; } } @@ -1132,82 +1168,7 @@ body.comprehensive-demo { } } -@media (max-width: 768px) { - .demo-container { - padding: 30px 20px; - margin: -50px 15px 30px 15px; - } - - .hero-section { - padding: 80px 0; - } - - /* Stack title and flow vertically on mobile */ - #titleWithFlow .d-flex { - flex-direction: column; - gap: 0.75rem; - text-align: center; - } - - .progress-pipeline-horizontal { - gap: 0.25rem; - padding: 0.4rem 0.6rem; - justify-content: center; - } - - .progress-step-horizontal { - min-width: 40px; - } - - .progress-step-horizontal .step-icon-small { - width: 16px !important; - height: 16px !important; - font-size: 0.6rem !important; - } - - .progress-step-horizontal .step-label { - font-size: 0.5rem; - } - - .pipeline-arrow { - font-size: 0.7rem; - } - - /* Stack buttons vertically on mobile */ - .d-flex.gap-3.justify-content-center { - flex-direction: column; - align-items: center; - gap: 0.75rem !important; - } - - .btn-lg { - min-width: 200px; - width: 100%; - max-width: 300px; - } - - /* Full width input on mobile */ - #textInput { - min-height: 180px !important; - padding: 1rem; - } - - /* Compact processing info on mobile */ - #processingInfoSidebar .bg-dark { - padding: 0.5rem !important; - } - - #processingInfoSidebar .feature-card { - padding: 1rem; - } - - /* Results layout adjustments */ - #resultsLayout .col-lg-8, - #resultsLayout .col-lg-4 { - flex: 0 0 100%; - max-width: 100%; - } -} +/* Mobile responsive rules consolidated above */ @media (max-width: 576px) { .demo-container { From bdd5d578ea5929ad322233f331adbe0a7191810f Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 12:25:39 +0200 Subject: [PATCH 05/26] feat: add core CSS architecture files - Add variables.css with design system variables - Add base.css with typography and global styles - Add main.css as entry point for component imports --- website/css/components/base.css | 77 ++++++++++++++++++++++++++++ website/css/components/variables.css | 23 +++++++++ website/css/main.css | 15 ++++++ 3 files changed, 115 insertions(+) create mode 100644 website/css/components/base.css create mode 100644 website/css/components/variables.css create mode 100644 website/css/main.css diff --git a/website/css/components/base.css b/website/css/components/base.css new file mode 100644 index 000000000..4f8efb758 --- /dev/null +++ b/website/css/components/base.css @@ -0,0 +1,77 @@ +/* Base Styles and Typography */ +body.comprehensive-demo { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + line-height: 1.6; + color: #e2e8f0; + background: var(--dark-gradient); + background-attachment: fixed; + min-height: 100vh; + padding-top: 80px; /* Account for fixed navbar */ +} + +/* Disable background-attachment: fixed on mobile devices for performance */ +@media (max-width: 768px) { + body.comprehensive-demo { + background-attachment: scroll; + } +} + +/* Material Icons styling */ +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; + vertical-align: middle; +} + +/* Info icon styling */ +.info-icon { + font-size: 16px !important; + color: #6b7280; + margin-left: 6px; + cursor: help; + opacity: 0.7; + transition: var(--transition-smooth); + vertical-align: middle; +} + +.info-icon:hover { + color: var(--primary-color); + opacity: 1; + transform: scale(1.1); +} + +/* Text Effects */ +.gradient-text { + background: var(--primary-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Reduced Motion Preferences */ +@media (prefers-reduced-motion: reduce) { + * { + animation: none !important; + transition: none !important; + } + .hero-section::before { + animation: none !important; + } + .floating-card { + animation: none !important; + } + .audio-bar { + animation: none !important; + } +} diff --git a/website/css/components/variables.css b/website/css/components/variables.css new file mode 100644 index 000000000..3deb64aba --- /dev/null +++ b/website/css/components/variables.css @@ -0,0 +1,23 @@ +/* CSS Variables - Centralized Design System */ +:root { + --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); + --secondary-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%); + --dark-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); + --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%); + + --primary-color: #8b5cf6; + --secondary-color: #a855f7; + --accent-color: #c084fc; + --dark-color: #0f0f23; + --darker-color: #0a0a1a; + --light-accent: #e9d5ff; + --glass-bg: rgba(139, 92, 246, 0.1); + --glass-border: rgba(139, 92, 246, 0.2); + --error-color: #ef4444; + --success-color: #10b981; + + --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); + --shadow-glow: 0 10px 40px rgba(139, 92, 246, 0.3); + --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3); +} diff --git a/website/css/main.css b/website/css/main.css new file mode 100644 index 000000000..bf13ccca0 --- /dev/null +++ b/website/css/main.css @@ -0,0 +1,15 @@ +/* Main CSS File - Imports all component stylesheets */ + +/* Import component stylesheets in logical order */ +@import url('./components/variables.css'); +@import url('./components/base.css'); +@import url('./components/navigation.css'); +@import url('./components/buttons.css'); +@import url('./components/forms.css'); +@import url('./components/containers.css'); +@import url('./components/cards.css'); +@import url('./components/progress.css'); +@import url('./components/charts.css'); +@import url('./components/messages.css'); +@import url('./components/animations.css'); +@import url('./components/responsive.css'); From b228a9e15ee14b13d41ff0fd0808d10f01cc9926 Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 12:25:47 +0200 Subject: [PATCH 06/26] feat: add UI component CSS files - Add buttons.css for button styles and interactions - Add forms.css for form controls and input styling - Add navigation.css for navbar and menu components - Add cards.css for feature cards and content containers --- website/css/components/buttons.css | 59 +++++++++++ website/css/components/cards.css | 135 ++++++++++++++++++++++++++ website/css/components/forms.css | 45 +++++++++ website/css/components/navigation.css | 10 ++ 4 files changed, 249 insertions(+) create mode 100644 website/css/components/buttons.css create mode 100644 website/css/components/cards.css create mode 100644 website/css/components/forms.css create mode 100644 website/css/components/navigation.css diff --git a/website/css/components/buttons.css b/website/css/components/buttons.css new file mode 100644 index 000000000..72a41ea2f --- /dev/null +++ b/website/css/components/buttons.css @@ -0,0 +1,59 @@ +/* Button Styles */ +.comprehensive-demo .btn-primary { + background: var(--primary-gradient); + border: none; + border-radius: 12px; + padding: 12px 30px; + font-weight: 600; + transition: var(--transition-bounce); + box-shadow: var(--shadow-glow); +} + +.comprehensive-demo .btn-primary:hover { + transform: translateY(-2px) scale(1.05); + box-shadow: 0 15px 50px rgba(139, 92, 246, 0.4); +} + +.comprehensive-demo .btn:focus-visible { + outline: 3px solid #667eea; + outline-offset: 2px; +} + +.comprehensive-demo .btn-primary:focus-visible { + outline: 3px solid #c084fc; + outline-offset: 2px; + box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.45); +} + +/* Button Consistency and Improved Spacing */ +.btn-lg { + padding: 0.75rem 1.5rem; + font-weight: 600; + border-radius: 12px; + transition: all 0.3s ease; + min-width: 120px; /* Ensure consistent button widths */ +} + +/* Debug Test Section Toggleable */ +#debugTestSection .btn-sm { + padding: 0.5rem 1rem; + font-size: 0.875rem; + border-radius: 8px; + transition: all 0.2s ease; +} + +/* Responsive button adjustments */ +@media (max-width: 768px) { + .btn-lg { + min-width: 200px; + width: 100%; + max-width: 300px; + } +} + +@media (max-width: 576px) { + .btn-lg { + padding: 0.6rem 1rem; + font-size: 0.9rem; + } +} diff --git a/website/css/components/cards.css b/website/css/components/cards.css new file mode 100644 index 000000000..e52a92e34 --- /dev/null +++ b/website/css/components/cards.css @@ -0,0 +1,135 @@ +/* Feature Cards - Consolidated */ +.feature-card { + background: linear-gradient(135deg, + rgba(139, 92, 246, 0.15) 0%, + rgba(168, 85, 247, 0.12) 50%, + rgba(192, 132, 252, 0.1) 100%); + backdrop-filter: blur(15px); + border: 1px solid rgba(139, 92, 246, 0.25); + border-radius: 20px; + box-shadow: var(--shadow-glass); + transition: var(--transition-bounce); + color: #e2e8f0; + height: 100%; + padding: 2rem; /* Increased padding for better background-to-text ratio */ + min-height: 140px; /* Ensure minimum height for prominence */ + position: relative; +} + +.feature-card:hover { + transform: translateY(-5px) scale(1.02); + box-shadow: var(--shadow-glow); +} + +.feature-card.active { + background: var(--primary-gradient); + border-color: var(--accent-color); + color: white; + transform: translateY(-5px) scale(1.05); + box-shadow: var(--shadow-glow); +} + +/* Add subtle glow effect to feature cards */ +.feature-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, + rgba(139, 92, 246, 0.05), + rgba(168, 85, 247, 0.03), + rgba(192, 132, 252, 0.02)); + border-radius: 20px; + z-index: -1; + opacity: 0; + transition: opacity 0.3s ease; +} + +.feature-card:hover::before { + opacity: 1; +} + +/* Feature card text improvements */ +.feature-card .text-muted { + color: #cbd5e1 !important; +} + +.feature-card h5, .feature-card h6 { + color: #f1f5f9 !important; +} + +.feature-card small { + color: #cbd5e1 !important; +} + +/* Ensure icons are visible in results */ +.feature-card h5 i { + font-size: 1.2rem; + margin-right: 8px; +} + +/* Processing Information Compact Styles */ +#processingInfoSidebar .feature-card { + min-height: auto; +} + +#processingInfoSidebar .bg-dark { + transition: all 0.2s ease; +} + +#processingInfoSidebar .bg-dark:hover { + background-color: rgba(0, 0, 0, 0.4) !important; + transform: translateX(2px); +} + +/* Model Detail Cards */ +.model-detail-card { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 12px; + margin-bottom: 10px; + transition: all 0.3s ease; +} + +.model-detail-card:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-1px); +} + +.model-detail-label { + font-size: 0.75rem; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 4px; + font-weight: 600; +} + +.model-detail-value { + font-size: 1.1rem; + color: #f1f5f9; + font-weight: 700; +} + +.model-detail-text { + font-size: 0.9rem; + color: #cbd5e1; + line-height: 1.4; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + #processingInfoSidebar .feature-card { + padding: 1rem; + } +} + +@media (max-width: 576px) { + .feature-card { + padding: 1rem !important; + margin-bottom: 1rem; + } +} diff --git a/website/css/components/forms.css b/website/css/components/forms.css new file mode 100644 index 000000000..3f28cef36 --- /dev/null +++ b/website/css/components/forms.css @@ -0,0 +1,45 @@ +/* Form Controls and Input Styling */ +#textInput { + min-height: 240px !important; + font-size: 16px; + line-height: 1.5; + resize: vertical; + padding: 1.5rem; /* Increased padding for better appearance */ + background-color: rgba(255, 255, 255, 0.12) !important; /* More prominent background */ + border: 2px solid rgba(139, 92, 246, 0.3) !important; /* Thicker border */ +} + +#textInput:focus { + background-color: rgba(255, 255, 255, 0.18) !important; + border-color: var(--primary-color) !important; + box-shadow: 0 0 0 0.3rem rgba(139, 92, 246, 0.25) !important; + transform: scale(1.01); /* Subtle scale on focus */ +} + +/* Scoped form controls to demo container */ +.demo-container .form-control { + color: #e2e8f0; + background-color: rgba(255, 255, 255, 0.1); + border-color: rgba(139, 92, 246, 0.3); +} + +.demo-container .form-control:focus { + color: #e2e8f0; + background-color: rgba(255, 255, 255, 0.15); + border-color: var(--primary-color); + box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25); +} + +.comprehensive-demo .form-control::placeholder { + color: #94a3b8 !important; +} + +.demo-container .form-control::placeholder { + color: #94a3b8; +} + +/* Focus styles */ +.demo-container .form-control:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} diff --git a/website/css/components/navigation.css b/website/css/components/navigation.css new file mode 100644 index 000000000..13ffc036d --- /dev/null +++ b/website/css/components/navigation.css @@ -0,0 +1,10 @@ +/* Navigation Styles */ +.comprehensive-demo .navbar { + background: rgba(15, 15, 35, 0.95); + backdrop-filter: blur(20px); + border-bottom: 1px solid var(--glass-border); +} + +.comprehensive-demo .navbar-brand, .comprehensive-demo .navbar .nav-link { + color: #e2e8f0; +} From 60956241cc4c9c1470a08f323aed8a98f2633cf7 Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 12:25:56 +0200 Subject: [PATCH 07/26] feat: add layout and interactive component CSS files - Add containers.css for layout containers and hero sections - Add progress.css for progress indicators and pipeline components - Add charts.css for data visualization and chart components - Add animations.css for transitions and animation effects --- website/css/components/animations.css | 89 +++++++ website/css/components/charts.css | 286 ++++++++++++++++++++++ website/css/components/containers.css | 68 ++++++ website/css/components/progress.css | 332 ++++++++++++++++++++++++++ 4 files changed, 775 insertions(+) create mode 100644 website/css/components/animations.css create mode 100644 website/css/components/charts.css create mode 100644 website/css/components/containers.css create mode 100644 website/css/components/progress.css diff --git a/website/css/components/animations.css b/website/css/components/animations.css new file mode 100644 index 000000000..b79b3fe01 --- /dev/null +++ b/website/css/components/animations.css @@ -0,0 +1,89 @@ +/* Animations and Transitions */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(40px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes float { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 33% { transform: translateY(-20px) rotate(1deg); } + 66% { transform: translateY(-10px) rotate(-1deg); } +} + +@keyframes slideInLeft { + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes shimmer { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +@keyframes audioPulse { + 0% { height: 20px; } + 100% { height: 40px; } +} + +.floating-card { + animation: float 6s ease-in-out infinite; +} + +/* Result sections */ +.result-section-hidden { + display: none !important; +} + +.result-section-visible { + display: block; + animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +.result-section { + display: none; +} + +.result-section.show { + display: block; + animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Loading States */ +.loading-spinner { + display: none; + color: #e2e8f0; +} + +.loading-spinner.show { + display: block; +} + +/* Dynamic Layout States */ +#inputLayout { + transition: all 0.5s ease-in-out; +} + +#resultsLayout { + transition: all 0.5s ease-in-out; +} + +#titleWithFlow { + transition: all 0.3s ease-in-out; +} + +/* Enhanced transitions for responsive changes */ +@media (prefers-reduced-motion: no-preference) { + #titleWithFlow, + #inputLayout, + #resultsLayout { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } +} diff --git a/website/css/components/charts.css b/website/css/components/charts.css new file mode 100644 index 000000000..f14319845 --- /dev/null +++ b/website/css/components/charts.css @@ -0,0 +1,286 @@ +/* Chart and Visualization Components */ +.emotion-chart-container, .summary-chart-container { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); + border-radius: 16px; + padding: 25px; + margin: 20px 0; + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +.emotion-chart-container::before, .summary-chart-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc); +} + +.chart-header { + text-align: center; + margin-bottom: 25px; +} + +.chart-title { + color: #fbbf24; + font-weight: 700; + margin-bottom: 8px; + font-size: 1.25rem; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.chart-subtitle { + color: #cbd5e1; + font-size: 0.9rem; + opacity: 0.8; +} + +.emotion-bars { + display: flex; + flex-direction: column; + gap: 20px; +} + +.emotion-bar { + margin-bottom: 20px; + animation: slideInLeft 0.8s ease-out forwards; + opacity: 0; + transform: translateX(-30px); + background: rgba(255, 255, 255, 0.03); + border-radius: 12px; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; + display: block; + visibility: visible; +} + +.emotion-bar:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.emotion-label { + display: flex; + justify-content: space-between; + margin-bottom: 12px; + align-items: center; +} + +.emotion-name { + font-weight: 700; + color: #f1f5f9; + text-transform: capitalize; + font-size: 1rem; + letter-spacing: 0.5px; +} + +.emotion-percentage { + color: #a855f7; + font-weight: 700; + font-size: 1.1rem; + background: rgba(168, 85, 247, 0.1); + padding: 4px 12px; + border-radius: 20px; + border: 1px solid rgba(168, 85, 247, 0.3); +} + +.emotion-bar-bg { + background: rgba(0, 0, 0, 0.3); + border-radius: 15px; + height: 16px; + overflow: hidden; + position: relative; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.emotion-bar-fill { + height: 100%; + border-radius: 15px; + transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.emotion-bar-fill::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + animation: shimmer 3s infinite; +} + +.summary-stats { + display: flex; + justify-content: space-around; + margin-bottom: 25px; + gap: 20px; +} + +.stat-item { + text-align: center; + flex: 1; + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; +} + +.stat-item:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-2px); +} + +.stat-item.highlight { + background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1)); + border: 2px solid rgba(139, 92, 246, 0.4); + box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2); +} + +.stat-value { + font-size: 1.8rem; + font-weight: 800; + color: #fbbf24; + margin-bottom: 8px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.stat-item.highlight .stat-value { + color: #c084fc; + font-size: 2rem; +} + +.stat-label { + font-size: 0.8rem; + color: #cbd5e1; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; +} + +.summary-bars { + display: flex; + flex-direction: column; + gap: 20px; +} + +.summary-bar { + margin-bottom: 20px; + background: rgba(255, 255, 255, 0.03); + border-radius: 12px; + padding: 15px; + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; +} + +.summary-bar:hover { + background: rgba(255, 255, 255, 0.08); + transform: translateY(-1px); +} + +.bar-label { + font-weight: 700; + color: #f1f5f9; + margin-bottom: 12px; + font-size: 1rem; +} + +.bar-bg { + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + height: 24px; + overflow: hidden; + position: relative; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.bar-fill { + height: 100%; + border-radius: 12px; + transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.bar-fill.original { + background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd); +} + +.bar-fill.summary { + background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7); +} + +.bar-value { + text-align: right; + font-size: 0.9rem; + color: #cbd5e1; + margin-top: 8px; + font-weight: 600; +} + +.chart-footer { + text-align: center; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.1); + color: #94a3b8; + font-size: 0.85rem; +} + +/* Emotion Badges */ +.emotion-badge { + display: block; + padding: 8px 16px; + margin: 4px 0; + border-radius: 20px; + font-size: 0.9rem; + font-weight: 500; + transition: var(--transition-smooth); + text-align: center; + width: 100%; + box-sizing: border-box; +} + +.emotion-badge:hover { + transform: scale(1.05); +} + +/* Emotion Badges Container */ +#emotionBadges { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 20px; +} + +/* Audio Visualizer */ +.audio-visualizer { + width: 100%; + height: 60px; + background: var(--glass-bg); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + margin: 10px 0; +} + +.audio-bar { + width: 4px; + height: 20px; + background: var(--primary-color); + margin: 0 2px; + border-radius: 2px; + animation: audioPulse 0.5s ease-in-out infinite alternate; +} diff --git a/website/css/components/containers.css b/website/css/components/containers.css new file mode 100644 index 000000000..45e519a9b --- /dev/null +++ b/website/css/components/containers.css @@ -0,0 +1,68 @@ +/* Demo Container - Consolidated */ +.demo-container { + background: linear-gradient(135deg, + rgba(139, 92, 246, 0.12) 0%, + rgba(15, 15, 35, 0.95) 50%, + rgba(168, 85, 247, 0.08) 100%); + backdrop-filter: blur(20px); + border: 1px solid rgba(139, 92, 246, 0.2); + border-radius: 20px; + box-shadow: + var(--shadow-glass), + 0 0 40px rgba(139, 92, 246, 0.1); + padding: 3rem; + margin: 2rem 0; + width: 100%; + position: relative; + z-index: 1; + color: #e2e8f0; +} + +/* Scoped to demo container only */ +.demo-container .text-dark { + color: #e2e8f0; +} + +/* Hero Section */ +.hero-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.2) 0%, transparent 50%), + radial-gradient(circle at 40% 80%, rgba(192, 132, 252, 0.2) 0%, transparent 50%); + animation: float 6s ease-in-out infinite; +} + +.hero-content { + position: relative; + z-index: 2; +} + +/* Ensure all text is visible - scoped to comprehensive demo */ +.comprehensive-demo .text-muted { + color: #cbd5e1 !important; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .demo-container { + padding: 30px 20px; + margin: -50px 15px 30px 15px; + } + + .hero-section { + padding: 80px 0; + } +} + +@media (max-width: 576px) { + .demo-container { + padding: 20px 15px; + margin: -50px 10px 20px 10px; + } +} diff --git a/website/css/components/progress.css b/website/css/components/progress.css new file mode 100644 index 000000000..3d89120ba --- /dev/null +++ b/website/css/components/progress.css @@ -0,0 +1,332 @@ +/* Progress Steps and Pipelines */ +.progress-step { + display: flex; + align-items: center; +} + +/* Vertical Progress Pipeline */ +.progress-pipeline-vertical { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; /* Reduced from 20px for tighter spacing */ + padding: 25px 15px; /* Reduced padding */ + background: var(--glass-bg); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.1); + min-height: 450px; /* Reduced height */ + justify-content: center; + width: 100%; +} + +.progress-step-vertical { + display: flex; + flex-direction: row; + align-items: center; + text-align: left; + padding: 16px 20px; /* Increased padding for better touch targets */ + border-radius: 15px; + transition: var(--transition-smooth); + min-width: 160px; /* Increased width */ + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 4px; /* Reduced margin */ + width: 100%; /* Full width for better appearance */ +} + +.progress-step-vertical .step-icon-small { + width: 24px !important; /* Increased from 18px */ + height: 24px !important; /* Increased from 18px */ + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 16px; /* Increased margin */ + margin-bottom: 0; + font-size: 0.8rem !important; /* Increased from 0.6rem */ + transition: var(--transition-smooth); + background: rgba(255, 255, 255, 0.1) !important; + color: #e2e8f0 !important; + border: 1px solid rgba(255, 255, 255, 0.2); + flex-shrink: 0; +} + +.progress-step-vertical .step-label { + font-size: 0.9rem; /* Increased from 0.7rem */ + font-weight: 600; + color: #e2e8f0; + transition: var(--transition-smooth); + text-align: left; /* Changed from center to left for better alignment */ + flex: 1; /* Take remaining space */ +} + +.progress-step-vertical.active .step-icon-small { + background: var(--primary-gradient) !important; + color: white !important; + box-shadow: var(--shadow-glow); +} + +.progress-step-vertical.completed .step-icon-small { + background: var(--success-color) !important; + color: white !important; +} + +.progress-step-vertical.error .step-icon-small { + background: var(--error-color) !important; + color: white !important; +} + +.pipeline-arrow-vertical { + font-size: 1.2rem; /* Slightly smaller */ + color: #94a3b8; /* Better color */ + margin: 2px 0; /* Reduced margin */ + opacity: 0.7; /* Subtle appearance */ + transition: var(--transition-smooth); +} + +.progress-step.completed { + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.3); +} + +.progress-step.active { + background: var(--primary-gradient); + color: white; +} + +.step-icon { + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 15px; + font-size: 14px; +} + +.step-icon.completed { + background: #10b981; + color: white; +} + +.step-icon.active { + background: white; + color: var(--primary-color); +} + +.step-icon.pending { + background: rgba(139, 92, 246, 0.2); + color: #94a3b8; +} + +/* Progress Pipeline - New Compact Horizontal Design */ +.progress-pipeline { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 1.5rem; + background: var(--glass-bg); + border-radius: 15px; + border: 1px solid var(--glass-border); + max-width: 700px; + margin: 0 auto; +} + +/* Horizontal Progress Pipeline for Title Flow */ +.progress-pipeline-horizontal { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: rgba(139, 92, 246, 0.05); + border-radius: 25px; + border: 1px solid rgba(139, 92, 246, 0.1); + backdrop-filter: blur(5px); + box-shadow: none; + opacity: 0.7; + transition: all 0.3s ease; +} + +.progress-pipeline-horizontal:hover { + opacity: 1; + background: rgba(139, 92, 246, 0.08); +} + +.progress-step-horizontal { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-width: 60px; + transition: var(--transition-smooth); +} + +.progress-step-horizontal .step-icon-small { + width: 18px !important; + height: 18px !important; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.25rem; + font-size: 0.7rem !important; + transition: var(--transition-smooth); + background: rgba(255, 255, 255, 0.1) !important; + color: #cbd5e1 !important; + border: 1px solid rgba(255, 255, 255, 0.15); + flex-shrink: 0; +} + +.progress-step-horizontal .step-label { + font-size: 0.65rem; + font-weight: 500; + color: #94a3b8; + white-space: nowrap; + transition: var(--transition-smooth); +} + +.progress-step-horizontal.active .step-icon-small { + background: var(--primary-gradient) !important; + color: white !important; + transform: scale(1.1); +} + +.progress-step-horizontal.active .step-label { + color: var(--primary-color); + font-weight: 600; +} + +.progress-step-horizontal.completed .step-icon-small { + background: #10b981 !important; + color: white !important; +} + +.progress-step-horizontal.completed .step-label { + color: #10b981; +} + +.pipeline-arrow { + font-size: 0.8rem; + color: #64748b; + font-weight: normal; + user-select: none; + opacity: 0.6; +} + +/* Enhanced Loading Step Styles */ +.process-step { + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 15px; + transition: all 0.3s ease; + text-align: center; +} + +.process-step.active { + background: rgba(139, 92, 246, 0.15); + border-color: rgba(139, 92, 246, 0.4); + transform: scale(1.02); +} + +.process-step.completed { + background: rgba(16, 185, 129, 0.15); + border-color: rgba(16, 185, 129, 0.4); +} + +.step-text { + font-weight: 600; + color: #e2e8f0; + font-size: 0.9rem; + margin-bottom: 8px; +} + +.step-status { + font-size: 0.8rem; + color: #94a3b8; + font-weight: 500; +} + +.process-step.active .step-status { + color: #a855f7; +} + +.process-step.completed .step-status { + color: #10b981; +} + +/* Processing Information Icons */ +.processing-info i { + font-size: 1.5rem !important; + margin-bottom: 8px; +} + +/* Responsive Design for Progress Pipeline */ +@media (max-width: 768px) { + .progress-pipeline { + flex-direction: column; + gap: 1.5rem; + padding: 2rem 1rem; + } + + .pipeline-arrow { + transform: rotate(90deg); + font-size: 1.5rem; + } + + .progress-step-horizontal { + min-width: 100px; + } + + .step-label { + font-size: 0.8rem; + } + + .progress-pipeline-horizontal { + gap: 0.25rem; + padding: 0.4rem 0.6rem; + justify-content: center; + } + + .progress-step-horizontal { + min-width: 40px; + } + + .progress-step-horizontal .step-icon-small { + width: 16px !important; + height: 16px !important; + font-size: 0.6rem !important; + } + + .progress-step-horizontal .step-label { + font-size: 0.5rem; + } + + .pipeline-arrow { + font-size: 0.7rem; + } +} + +@media (max-width: 1200px) { + .progress-pipeline-horizontal { + gap: 0.5rem; + padding: 0.8rem 1rem; + } + + .progress-pipeline-horizontal .step-label { + font-size: 0.7rem; + } + + #processingInfoSidebar { + margin-top: 2rem; + } +} + +@media (max-width: 576px) { + .progress-pipeline-horizontal { + padding: 0.5rem; + } +} From 1b8466fd09f42bc549caab16d086d21de6f75c5f Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 12:26:03 +0200 Subject: [PATCH 08/26] feat: add final component CSS files and documentation - Add messages.css for error and success message styling - Add responsive.css for media queries and responsive design - Add comprehensive README.md explaining the modular CSS architecture --- website/css/README.md | 59 +++++++++++++++++++++++++++ website/css/components/messages.css | 32 +++++++++++++++ website/css/components/responsive.css | 55 +++++++++++++++++++++++++ 3 files changed, 146 insertions(+) create mode 100644 website/css/README.md create mode 100644 website/css/components/messages.css create mode 100644 website/css/components/responsive.css diff --git a/website/css/README.md b/website/css/README.md new file mode 100644 index 000000000..3ce7d3ea9 --- /dev/null +++ b/website/css/README.md @@ -0,0 +1,59 @@ +# CSS Architecture - Modular Component Structure + +This directory contains a modular CSS architecture that addresses code review feedback +for improved maintainability and performance. + +## Structure + +### Main Files + +- `main.css` - Main entry point that imports all component stylesheets +- `comprehensive-demo.css` - Original monolithic file (kept for reference) + +### Component Files (`components/` directory) + +- `variables.css` - CSS custom properties and design system variables +- `base.css` - Base styles, typography, and global elements +- `navigation.css` - Navigation bar and menu styles +- `buttons.css` - Button components and interactive elements +- `forms.css` - Form controls and input styling +- `containers.css` - Layout containers and hero sections +- `cards.css` - Feature cards and content cards +- `progress.css` - Progress indicators and pipeline components +- `charts.css` - Data visualization and chart components +- `messages.css` - Error and success message styling +- `animations.css` - Keyframes, transitions, and animation effects +- `responsive.css` - Media queries and responsive design rules + +## Benefits + +1. **Improved Maintainability**: Each component is isolated and easier to modify +2. **Better Performance**: Mobile-specific optimizations (e.g., disabled + `background-attachment: fixed`) +3. **Reduced Redundancy**: Consolidated duplicate rules and eliminated conflicts +4. **Enhanced Readability**: Logical organization makes code easier to understand +5. **Scalability**: Easy to add new components without affecting existing styles + +## Usage + +Simply include `main.css` in your HTML: + +```html + +``` + +The main.css file automatically imports all component stylesheets in the correct order. + +## Performance Optimizations + +- Mobile devices use `background-attachment: scroll` instead of `fixed` for better + performance +- Consolidated duplicate CSS rules to reduce file size +- Optimized favicon.ico for better loading performance +- Modular structure allows for better caching strategies + +## Browser Support + +- Modern browsers with CSS custom properties support +- Graceful degradation for older browsers +- Mobile-first responsive design approach diff --git a/website/css/components/messages.css b/website/css/components/messages.css new file mode 100644 index 000000000..0492e3da2 --- /dev/null +++ b/website/css/components/messages.css @@ -0,0 +1,32 @@ +/* Error and Success Messages */ +.error-message { + color: #ef4444; + font-size: 0.875rem; + margin-top: 8px; + padding: 8px 12px; + background: rgba(239, 68, 68, 0.1); + border: 1px solid rgba(239, 68, 68, 0.2); + border-radius: 8px; + display: none; +} + +.error-message.show { + display: block; + animation: fadeInUp 0.3s ease-out; +} + +.success-message { + color: #10b981; + font-size: 0.875rem; + margin-top: 8px; + padding: 8px 12px; + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.2); + border-radius: 8px; + display: none; +} + +.success-message.show { + display: block; + animation: fadeInUp 0.3s ease-out; +} diff --git a/website/css/components/responsive.css b/website/css/components/responsive.css new file mode 100644 index 000000000..1999414d0 --- /dev/null +++ b/website/css/components/responsive.css @@ -0,0 +1,55 @@ +/* Responsive Design and Media Queries */ + +/* Debug section responsive behavior */ +@media (max-width: 992px) { + #debugTestSection { + margin-top: 1rem; + } +} + +/* Stack title and flow vertically on mobile */ +@media (max-width: 768px) { + #titleWithFlow .d-flex { + flex-direction: column; + gap: 0.75rem; + text-align: center; + } + + /* Stack buttons vertically on mobile */ + .d-flex.gap-3.justify-content-center { + flex-direction: column; + align-items: center; + gap: 0.75rem !important; + } + + /* Full width input on mobile */ + #textInput { + min-height: 180px !important; + padding: 1rem; + } + + /* Compact processing info on mobile */ + #processingInfoSidebar .bg-dark { + padding: 0.5rem !important; + } + + /* Results layout adjustments */ + #resultsLayout .col-lg-8, + #resultsLayout .col-lg-4 { + flex: 0 0 100%; + max-width: 100%; + } +} + +@media (max-width: 576px) { + /* Full width input on mobile */ + #textInput { + min-height: 160px !important; + font-size: 14px; + } +} + +/* Debug Test Section Toggleable */ +#debugTestSection.hidden { + display: none !important; +} From 7011ec99f6d9ae815090d5e08e23284702c5b08e Mon Sep 17 00:00:00 2001 From: Deniz Ulker <156104354+uelkerd@users.noreply.github.com> Date: Sat, 27 Sep 2025 23:28:20 +0200 Subject: [PATCH 09/26] feat: add Audio & Integration (PR #201-C) - voice recording & enhanced config MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🏰 Fortress-Compliant PR (4/5 files) - Audio & Integration This PR completes the JavaScript module system with advanced voice recording, enhanced configuration management, and full demo integration. - website/js/voice-recorder.js - Advanced audio recording with MediaRecorder API - website/test/config.test.js - Unit tests for configuration management - website/js/config.js - Enhanced configuration with security and environment handling - website/comprehensive-demo.html - Integrated demo with all module dependencies ✅ **Voice Recording**: MediaRecorder API with audio transcription integration ✅ **Enhanced Configuration**: Environment-specific settings and security redaction ✅ **Complete Integration**: Full demo showcasing all JavaScript modules working together ✅ **Security Hardening**: Sensitive data redaction and proxy-based API calls ✅ **Testing Coverage**: Unit tests for configuration management functionality ✅ **Browser Compatibility**: Graceful degradation for unsupported features ✅ **Accessibility**: Full audio recording accessibility with proper feedback ✅ **Error Handling**: Comprehensive error management across all components This is **PR #201-C** (FINAL) of the three-part Hybrid Fortress split: - **PR #201-A** (Platform Foundation): ✅ **Infrastructure ready** - **PR #201-B** (UI System): ✅ **Components ready** - **PR #201-C** (this PR): Audio & Integration (4 files) ← **FINAL PIECE** - **Voice Recording**: Real-time audio capture with transcription - **API Integration**: Seamless integration with SAMO-DL unified API - **Security**: Client-side key redaction and proxy-based external calls - **Environment Handling**: Automatic dev/prod configuration switching - **Memory Management**: Proper audio buffer cleanup and resource management - [ ] Voice recording initializes without errors - [ ] Configuration loads with proper environment detection - [ ] All JavaScript modules integrate seamlessly in demo - [ ] Audio transcription works end-to-end - [ ] Error handling provides clear user feedback - [ ] Accessibility features function correctly - **Requires**: PR #203 (Platform Foundation) + PR #204 (UI System) - **Completes**: Full JavaScript module ecosystem - **Merge Order**: After #203 and #204 are merged - **Final Result**: Complete voice-enabled emotion analysis demo **🔧 Technical Highlights:** - MediaRecorder API with multiple audio format support - Dependency injection pattern for clean module separation - Environment-specific configuration with security measures - Complete end-to-end user workflow from voice to analysis - Comprehensive error handling with user-friendly feedback 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- website/comprehensive-demo.html | 1898 ++++++++++++++++++------------- website/js/config.js | 270 +++-- website/js/voice-recorder.js | 489 ++++++++ website/test/config.test.js | 159 +++ 4 files changed, 1985 insertions(+), 831 deletions(-) create mode 100644 website/js/voice-recorder.js create mode 100644 website/test/config.test.js diff --git a/website/comprehensive-demo.html b/website/comprehensive-demo.html index 03b9ff1f4..16987644f 100644 --- a/website/comprehensive-demo.html +++ b/website/comprehensive-demo.html @@ -3,52 +3,34 @@ - SAMO Emotion Detection API - SAMO Deep Learning - - - - - - + Comprehensive SAMO-DL Demo - All Core Features + - - - - - - - - + + + + + + + + + + + + -