StreamYard UI - Propuesta UX

¡Excelente! Basándome en el análisis UX detallado del video, aquí te presento una propuesta de código para HTML5, CSS3 y JavaScript que busca replicar los principios de diseño y experiencia de usuario observados en la interfaz de StreamYard. Nos enfocaremos en: * **Modularidad HTML:** Estructura clara y semántica. * **Variables CSS:** Para mantener la consistencia en estilos y facilitar cambios. * **Flexbox/Grid:** Para layouts complejos y responsivos. * **JavaScript:** Para gestionar el estado de la UI, proporcionar feedback instantáneo, manejar modales, tabs y simular el drag-and-drop. --- ### **1. HTML5 (`index.html`)** Esta estructura HTML refleja los principales paneles y componentes, con atributos `data-` para facilitar la interacción con JavaScript. ```html StreamYard UI - Propuesta UX

Mis Escenas

Demo scene 1

Demo scene 2

720p Producido con

Cesar Mendivil

Invitar

Pack de Halloween NUEVO

6 overlays, 9 fondos

Clips de video

Video de introducción

Video de conclusión

Bucle

Más

Música de fondo

``` ### **2. CSS3 (`style.css`)** Manteniendo las variables y un diseño moderno, se añaden estilos para los nuevos componentes como modales y tooltips. ```css /* Variables CSS para consistencia (Reiterado para contexto completo) */ :root { --primary-color: #ff0040; /* Rojo/Rosa distintivo */ --secondary-color: #3f475a; /* Gris oscuro para botones secundarios */ --background-dark: #1e2430; /* Fondo principal oscuro */ --background-medium: #2a313e; /* Fondos de tarjetas y secciones */ --text-light: #e0e6f0; /* Texto claro */ --text-muted: #8c96a3; /* Texto secundario/desactivado */ --border-color: #3a4459; /* Color de borde sutil */ --shadow-light: rgba(0, 0, 0, 0.1); --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; } body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; background-color: var(--background-dark); color: var(--text-light); overflow: hidden; /* Evita scroll en el body principal */ font-size: 14px; /* Ajuste base para legibilidad */ } .app-container { display: flex; flex-direction: column; height: 100vh; } /* --- Top Header Bar --- */ .top-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); background-color: var(--background-medium); border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 4px var(--shadow-light); z-index: 100; } .header-left { display: flex; align-items: center; gap: var(--spacing-sm); } .app-title { font-weight: 600; font-size: 1.1rem; } .beta-tag { background-color: rgba(var(--primary-color), 0.2); color: var(--primary-color); padding: 2px 8px; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 500; } .header-right { display: flex; align-items: center; gap: var(--spacing-md); } .user-avatar { display: flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; } .user-avatar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); } .live-button { display: flex; align-items: center; gap: var(--spacing-xs); } /* --- Main Content Area --- */ .main-content { display: flex; flex: 1; /* Ocupa el espacio restante */ overflow: hidden; /* Oculta el desbordamiento dentro del main */ } /* --- Left Sidebar --- */ .sidebar-left { width: 250px; background-color: var(--background-dark); border-right: 1px solid var(--border-color); padding: var(--spacing-md) 0; display: flex; flex-direction: column; overflow-y: auto; /* Permite scroll si el contenido es largo */ flex-shrink: 0; /* No se encoge */ } .sidebar-section { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-color); } .sidebar-section:last-child { border-bottom: none; } .sidebar-left h3 { margin-top: 0; margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-xs); } .sidebar-left h4 { color: var(--text-muted); font-size: 0.9rem; margin-top: 0; margin-bottom: var(--spacing-sm); } .scenes-list { flex-grow: 1; /* Permite que la lista de escenas crezca */ } .scene-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-sm); margin-bottom: var(--spacing-sm); border-radius: var(--radius-md); cursor: pointer; transition: background-color 0.2s ease; position: relative; /* Para el menú de opciones */ } .scene-item:hover { background-color: var(--background-medium); } .scene-item.active { background-color: var(--primary-color); color: white; } .scene-item.active .scene-name { color: white; } .scene-item img { width: 60px; /* Reducido para mejor ajuste */ height: 34px; /* Proporcional a 16:9 */ border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--border-color); } .scene-item .scene-name { flex-grow: 1; color: var(--text-light); } .scene-item .scene-options { position: relative; padding: 0 5px; } .scene-item .scene-options i { color: var(--text-muted); cursor: pointer; } .scene-item .scene-options .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background-color: var(--background-medium); border-radius: var(--radius-sm); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); min-width: 150px; z-index: 10; } .scene-item .scene-options .dropdown-menu.active { display: block; } .scene-item .scene-options .dropdown-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; color: var(--text-light); cursor: pointer; } .scene-item .scene-options .dropdown-menu button:hover { background-color: var(--secondary-color); } .scene-item .scene-options .dropdown-menu button.danger { color: #dc3545; } .scene-item .scene-options .dropdown-menu button.danger:hover { background-color: rgba(220, 53, 69, 0.2); } .btn-add-scene { width: 100%; margin-top: var(--spacing-md); background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--text-light); display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); } .action-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; color: var(--text-light); cursor: pointer; transition: color 0.2s ease; } .action-item:hover { color: var(--primary-color); } /* --- Central Live Area --- */ .live-area { flex: 1; /* Ocupa todo el espacio central disponible */ background-color: #000; /* Fondo para el video */ display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: var(--spacing-md); gap: var(--spacing-md); overflow-y: auto; /* Permite scroll si el contenido es demasiado alto */ } .video-player { position: relative; width: 100%; max-width: 900px; /* Max width for the video player */ aspect-ratio: 16 / 9; /* Standard video aspect ratio */ background-color: var(--background-dark); /* Color de fondo mientras no hay video */ border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; } .video-player img#live-video-stream { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .video-overlay { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); right: var(--spacing-sm); display: flex; justify-content: space-between; color: white; font-size: 0.8rem; z-index: 10; } .streamyard-logo { display: flex; align-items: center; gap: 5px; } .streamyard-logo img { height: 15px; width: auto; } .stage-element { position: absolute; z-index: 5; /* Asegurar que estén sobre el video */ } #stage-overlay { top: var(--spacing-sm); left: var(--spacing-sm); width: 200px; /* Ejemplo de tamaño */ height: auto; object-fit: contain; } #stage-logo { top: var(--spacing-sm); right: var(--spacing-sm); width: 80px; /* Ejemplo de tamaño */ height: auto; object-fit: contain; } #stage-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; z-index: 1; } .participant-feed { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; /* Ocupa todo el espacio para posicionar */ display: flex; justify-content: center; align-items: flex-end; /* Posicionar los elementos de participantes */ z-index: 5; } .participant-name-tag { background-color: var(--primary-color); color: white; padding: 5px 10px; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 20px; /* Ejemplo de posición */ } .participants-controls { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); background-color: var(--background-medium); padding: var(--spacing-md); border-radius: var(--radius-lg); } .participants-grid { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; /* Permite que los participantes se envuelvan */ } .participant-card { display: flex; flex-direction: column; align-items: center; background-color: var(--background-dark); padding: var(--spacing-sm); border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; } .participant-card.active { border-color: var(--primary-color); } .participant-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-bottom: var(--spacing-xs); } .participant-card span { font-size: 0.85rem; } .participant-card.add-card { justify-content: center; font-size: 1.5rem; color: var(--text-muted); border: 2px dashed var(--border-color); display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; } .participant-card.add-card i { font-size: 1.5rem; } .participant-card.add-card:hover { border-color: var(--primary-color); color: var(--primary-color); } .interaction-buttons { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm); } .btn-presentar { background-color: var(--primary-color); color: white; padding: var(--spacing-xs) var(--spacing-md); border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: background-color 0.2s ease; } .btn-presentar:hover { background-color: #e00038; } .bottom-controls { display: flex; justify-content: center; align-items: center; gap: var(--spacing-md); background-color: var(--background-medium); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-lg); margin-top: var(--spacing-md); } .leave-button { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .leave-button:hover { background-color: #e00038; } /* --- Right Sidebar - Settings --- */ .sidebar-right { width: 320px; /* Ancho más amplio para los ajustes */ background-color: var(--background-dark); border-left: 1px solid var(--border-color); padding: var(--spacing-md) 0; display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0; } .brand-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-lg); border-bottom: 1px solid var(--border-color); margin-bottom: var(--spacing-md); } .brand-actions { display: flex; gap: var(--spacing-md); color: var(--text-muted); } .brand-actions i { cursor: pointer; } .brand-actions i:hover { color: var(--primary-color); } .dropdown-select { background-color: var(--background-medium); color: var(--text-light); border: 1px solid var(--border-color); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); appearance: none; /* Elimina estilos nativos del select */ -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } .dropdown-select:focus { outline: none; border-color: var(--primary-color); } .card { background-color: var(--background-medium); border-radius: var(--radius-lg); padding: var(--spacing-md); margin: 0 var(--spacing-md) var(--spacing-md); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); position: relative; } .settings-card h4 { margin-top: 0; margin-bottom: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-xs); } .new-tag, .premium-badge { background-color: var(--primary-color); color: white; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 500; } .premium-badge::before { content: "Premium"; } .settings-card p { color: var(--text-muted); font-size: 0.85rem; margin-bottom: var(--spacing-md); } .settings-card .btn-secondary { padding: 8px 16px; font-size: 0.9rem; } .settings-card .icon-action { position: absolute; top: var(--spacing-md); right: var(--spacing-md); color: var(--text-muted); cursor: pointer; } .settings-card .icon-action:hover { color: var(--primary-color); } .sidebar-tabs { display: flex; justify-content: space-around; padding: 0 var(--spacing-md); border-bottom: 1px solid var(--border-color); margin-bottom: var(--spacing-md); } .tab-item { flex: 1; text-align: center; padding: var(--spacing-sm) 0; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); } .tab-item:hover { color: var(--text-light); } .tab-item.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } .tab-content { display: none; /* Por defecto oculto */ padding: 0 var(--spacing-lg); } .tab-content.active { display: block; /* Muestra el activo */ } .icon-help { color: var(--text-muted); font-size: 0.8rem; margin-left: var(--spacing-xs); cursor: help; } .presets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); margin-top: var(--spacing-sm); } .preset-item { aspect-ratio: 1 / 1; background-color: var(--background-medium); border: 2px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.2s ease; } .preset-item:hover, .preset-item.active { border-color: var(--primary-color); } .color-picker { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-sm); } .color-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 30px; height: 30px; background-color: transparent; border: none; cursor: pointer; } .color-input::-webkit-color-swatch { border-radius: 50%; border: 2px solid var(--border-color); } .color-input::-moz-color-swatch { border-radius: 50%; border: 2px solid var(--border-color); } .theme-buttons { display: flex; gap: var(--spacing-xs); margin-top: var(--spacing-sm); flex-wrap: wrap; } .btn-theme { background-color: var(--background-medium); color: var(--text-light); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; font-size: 0.9rem; } .btn-theme:hover, .btn-theme.active { background-color: var(--primary-color); border-color: var(--primary-color); color: white; } /* Toggle Switch */ .toggle-switch-container { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-md); } .switch { position: relative; display: inline-block; width: 40px; height: 20px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--secondary-color); transition: 0.4s; border-radius: 20px; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: var(--primary-color); } input:focus + .slider { box-shadow: 0 0 1px var(--primary-color); } input:checked + .slider:before { transform: translateX(20px); } /* Multimedia Tab Specifics */ .logo-uploader { display: flex; align-items: center; gap: var(--spacing-md); margin-top: var(--spacing-sm); } .logo-preview { width: 60px; height: 60px; background-color: var(--background-dark); border: 2px dashed var(--border-color); border-radius: var(--radius-md); display: flex; justify-content: center; align-items: center; overflow: hidden; } .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-position { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .logo-position .btn-icon { width: 40px; height: 40px; background-color: var(--background-medium); border: 1px solid var(--border-color); color: var(--text-light); border-radius: var(--radius-sm); font-size: 0.9rem; display: flex; justify-content: center; align-items: center; position: relative; } .logo-position .btn-icon[data-position="top-left"]::before { content: "\f02d"; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: 5px; left: 5px; } .logo-position .btn-icon[data-position="top-right"]::before { content: "\f02d"; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: 5px; right: 5px; } .logo-position .btn-icon.active { background-color: var(--primary-color); border-color: var(--primary-color); } .overlay-grid, .background-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); margin-top: var(--spacing-sm); } .overlay-item, .background-item { aspect-ratio: 16/9; background-color: var(--background-medium); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .overlay-item.active, .background-item.active { border-color: var(--primary-color); } .overlay-item:hover, .background-item:hover { border-color: var(--primary-color); } .overlay-item.add-more, .background-item.add-more { font-size: 1.2rem; color: var(--text-muted); flex-direction: column; gap: 5px; border-style: dashed; } .overlay-item.add-more i, .background-item.add-more i { font-size: 1.5rem; color: var(--primary-color); } .overlay-item img, .background-item img { width: 100%; height: 100%; object-fit: cover; } #qr-code-generator .qr-code-form { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-top: var(--spacing-sm); } #qr-code-generator input { background-color: var(--background-medium); border: 1px solid var(--border-color); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); color: var(--text-light); } #qr-code-generator input::placeholder { color: var(--text-muted); } #qr-code-generator button { margin-top: var(--spacing-xs); } .video-clips-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); margin-top: var(--spacing-sm); } .video-clip-item { background-color: var(--background-medium); border: 1px dashed var(--border-color); border-radius: var(--radius-md); padding: var(--spacing-md); text-align: center; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); position: relative; } .video-clip-item i { font-size: 1.2rem; color: var(--primary-color); } .video-clip-item:hover { border-color: var(--primary-color); color: var(--primary-color); } .video-clip-item .premium-badge { position: absolute; top: 5px; right: 5px; font-size: 0.6rem; padding: 2px 5px; background-color: #f7b000; /* Color premium */ } .countdown-options { display: flex; gap: var(--spacing-xs); margin-top: var(--spacing-md); } .countdown-item { background-color: var(--background-medium); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; font-size: 0.9rem; } .countdown-item.active { background-color: var(--primary-color); border-color: var(--primary-color); color: white; } .countdown-item:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); } .countdown-item.add-more { border-style: dashed; color: var(--primary-color); } .countdown-item.add-more i { font-size: 1rem; } .sound-volume-control { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-sm); } .slider-volume { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: var(--secondary-color); outline: none; opacity: 0.7; transition: opacity .2s; border-radius: 5px; } .slider-volume:hover { opacity: 1; } .slider-volume::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--primary-color); cursor: pointer; } .slider-volume::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--primary-color); cursor: pointer; } .sound-effects-grid, .music-effects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xs); margin-top: var(--spacing-sm); } /* --- Far Right Vertical Bar --- */ .sidebar-far-right { width: 60px; /* Ancho fijo para la barra vertical de íconos */ background-color: var(--background-medium); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; padding: var(--spacing-lg) 0; gap: var(--spacing-lg); flex-shrink: 0; } .far-right-item { color: var(--text-muted); font-size: 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: color 0.2s ease; width: 100%; padding: var(--spacing-xs) 0; } .far-right-item i { font-size: 1.2rem; } .far-right-item:hover, .far-right-item.active { color: var(--primary-color); } /* --- Common Button Styles --- */ .btn { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: background-color 0.2s ease, border-color 0.2s ease; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); border: 1px solid transparent; } .btn-primary { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } .btn-primary:hover { background-color: #e00038; border-color: #e00038; } .btn-secondary { background-color: var(--secondary-color); color: var(--text-light); border-color: var(--secondary-color); } .btn-secondary:hover { background-color: #4a546d; border-color: #4a546d; } .btn-danger { background-color: #dc3545; color: white; border-color: #dc3545; } .btn-danger:hover { background-color: #c82333; border-color: #bd2130; } .btn-icon { background: none; border: none; color: var(--text-light); font-size: 1.1rem; cursor: pointer; padding: var(--spacing-xs); border-radius: var(--radius-sm); transition: background-color 0.2s ease, color 0.2s ease; } .btn-icon:hover { background-color: var(--secondary-color); color: var(--primary-color); } .btn-icon.active { color: var(--primary-color); } /* --- Modals --- */ .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; /* Hidden by default */ justify-content: center; align-items: center; z-index: 1000; } .modal { background-color: white; border-radius: var(--radius-lg); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); display: none; /* Hidden by default */ flex-direction: column; position: relative; max-width: 90%; max-height: 90%; overflow: hidden; color: #333; /* Texto oscuro para modal */ } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid #eee; } .modal-header h3 { margin: 0; font-size: 1.2rem; } .close-modal { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #888; } .close-modal:hover { color: #333; } .modal-content { padding: var(--spacing-lg); overflow-y: auto; /* Scroll dentro del contenido del modal */ } /* Specific styles for Configuration Modal */ #config-modal { width: 800px; height: 550px; display: flex; flex-direction: column; } .modal-content-flex { display: flex; flex: 1; } .modal-nav { width: 200px; border-right: 1px solid #eee; padding: var(--spacing-lg) 0; flex-shrink: 0; } .modal-nav-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-lg); cursor: pointer; color: #666; transition: background-color 0.2s ease, color 0.2s ease; } .modal-nav-item:hover { background-color: #f5f5f5; } .modal-nav-item.active { background-color: #e6f2ff; /* Azul claro para activo */ color: var(--primary-color); font-weight: 500; } .modal-settings-content { flex: 1; padding: var(--spacing-lg); overflow-y: auto; } .config-tab-content { display: none; } .config-tab-content.active { display: block; } .setting-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); font-size: 0.95rem; } .setting-row span { flex-shrink: 0; margin-right: var(--spacing-md); } .setting-row select, .setting-row input[type="text"] { flex-grow: 1; padding: var(--spacing-xs); border: 1px solid #ccc; border-radius: var(--radius-sm); } .setting-row .btn { margin-left: var(--spacing-sm); } .checkbox-container, .radio-container { display: block; position: relative; padding-left: 25px; margin-bottom: 12px; cursor: pointer; font-size: 0.95rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-container input, .radio-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark, .radiomark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; background-color: #eee; border-radius: 3px; } .radio-container .radiomark { border-radius: 50%; } .checkbox-container:hover input ~ .checkmark, .radio-container:hover input ~ .radiomark { background-color: #ccc; } .checkbox-container input:checked ~ .checkmark, .radio-container input:checked ~ .radiomark { background-color: var(--primary-color); } .checkmark:after { content: ""; position: absolute; display: none; } .checkbox-container input:checked ~ .checkmark:after { display: block; } .checkbox-container .checkmark:after { left: 6px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .radiomark:after { content: ""; position: absolute; display: none; } .radio-container input:checked ~ .radiomark:after { display: block; } .radio-container .radiomark:after { top: 5px; left: 5px; width: 8px; height: 8px; border-radius: 50%; background: white; } .small-text { font-size: 0.85rem; color: #666; margin-top: -10px; margin-bottom: var(--spacing-md); } .small-text a { color: var(--primary-color); text-decoration: none; } .small-text-muted { font-size: 0.85rem; color: #999; } .small-text-muted.indent { margin-left: 25px; /* Para alinear con checkboxes */ } .setting-row-img { display: flex; gap: var(--spacing-lg); margin-bottom: var(--spacing-md); align-items: flex-start; } .setting-row-img img { width: 150px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); } .camera-settings { flex-grow: 1; } .camera-settings .setting-row { margin-bottom: var(--spacing-sm); } .alert-box { background-color: #fff3cd; /* Amarillo claro */ color: #856404; /* Texto amarillo oscuro */ border: 1px solid #ffeeba; border-radius: var(--radius-md); padding: var(--spacing-md); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .alert-box i { font-size: 1.5rem; } .alert-box button { background-color: #ffc107; /* Amarillo oscuro para botón */ border-color: #ffc107; color: #333; } .alert-box button:hover { background-color: #e0a800; } .info-box { background-color: #d1ecf1; /* Azul claro */ color: #0c5460; /* Texto azul oscuro */ border: 1px solid #bee5eb; border-radius: var(--radius-md); padding: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .info-box i { font-size: 1.2rem; flex-shrink: 0; } .info-box p { margin: 0; font-size: 0.9rem; } .shortcuts-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .shortcut-item { display: flex; align-items: center; gap: var(--spacing-sm); } .shortcut-item span { flex-grow: 1; } .shortcut-item input { width: 120px; text-align: center; background-color: #f0f0f0; border: 1px solid #ddd; padding: 5px 10px; border-radius: var(--radius-sm); } .shortcut-item i { color: #999; cursor: pointer; } .shortcut-item i:hover { color: #dc3545; } .design-checkbox-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-sm); margin-top: var(--spacing-md); } .design-checkbox { display: flex; align-items: center; gap: var(--spacing-sm); padding-left: 30px; /* Ajustar padding para ícono */ } .design-checkbox .checkmark { top: 5px; } .design-checkbox i { font-size: 1.1rem; margin-right: 5px; color: #666; } #guests textarea { width: 100%; min-height: 80px; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: var(--radius-sm); padding: var(--spacing-sm); resize: vertical; font-family: 'Inter', sans-serif; font-size: 0.9rem; color: #333; margin-top: var(--spacing-xs); } /* Specific styles for Media Selection Modal */ #media-selection-modal { width: 800px; height: 600px; } .upload-area { background-color: #f0f0f0; border: 2px dashed #ddd; border-radius: var(--radius-md); padding: var(--spacing-lg); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .upload-area i { font-size: 3rem; color: #ccc; } .upload-area p { margin: 0; color: #666; } .media-tabs { display: flex; border-bottom: 1px solid #eee; margin-bottom: var(--spacing-md); } .media-tab-item { background: none; border: none; padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; color: #666; font-size: 1rem; border-bottom: 2px solid transparent; transition: all 0.2s ease; } .media-tab-item:hover { color: #333; } .media-tab-item.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: 500; } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--spacing-sm); overflow-y: auto; flex: 1; } .media-item { border: 1px solid #eee; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all 0.2s ease; text-align: center; padding-bottom: var(--spacing-xs); } .media-item:hover { border-color: var(--primary-color); box-shadow: 0 0 5px rgba(var(--primary-color), 0.5); } .media-item img { width: 100%; height: 70px; /* Altura fija para miniaturas */ object-fit: cover; display: block; margin-bottom: 5px; } .media-item span { font-size: 0.8rem; color: #333; } /* --- Tooltip Styles --- */ [data-tooltip] { position: relative; cursor: help; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; background-color: var(--background-medium); color: var(--text-light); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.75rem; white-space: nowrap; z-index: 1001; bottom: calc(100% + 8px); /* Posición arriba del elemento */ left: 50%; transform: translateX(-50%); pointer-events: none; /* Asegura que el tooltip no interfiera con el mouse */ opacity: 0; animation: fade-in 0.2s forwards; } [data-tooltip]:hover::before { content: ''; position: absolute; bottom: calc(100% + 4px); /* Triángulo debajo del tooltip */ left: 50%; transform: translateX(-50%); border-width: 4px; border-style: solid; border-color: var(--background-medium) transparent transparent transparent; z-index: 1001; pointer-events: none; opacity: 0; animation: fade-in 0.2s forwards; } /* Animación para el tooltip */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Scrollbar personalizado */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--background-dark); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--secondary-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-color); } ``` ### **3. JavaScript (`script.js`)** Este script implementa la lógica de UX para el feedback instantáneo, la gestión de modales, pestañas, y la simulación de algunas funcionalidades. ```javascript document.addEventListener('DOMContentLoaded', () => { // --- Global State Management (Conceptual) --- const appState = { currentSceneId: '1', activeBrand: 'brand1', brandColor: '#ff0040', activeTheme: 'block', showNames: true, showTitles: false, logoSrc: 'https://via.placeholder.com/50/aaaaaa/ffffff?text=Logo', logoPosition: 'top-left', activeOverlay: 'none', activeBackground: 'none', activeBackgroundImg: '', // To store actual image src soundVolume: 70, musicVolume: 50, micOn: true, camOn: true, participantsOnStage: { 'cesar': { name: 'Cesar Mendivil', onStage: true, mic: true, cam: true, image: 'https://via.placeholder.com/60/777777/ffffff?text=CM' }, // Add other participants here as needed }, // State for active right sidebar panel activeRightPanel: 'activos-multimedia', // Default to multimedia for demo activeConfigModalTab: 'general', qrCodeFormVisible: false, }; // --- DOM Elements Cache --- const elements = { // Main layout scenesList: document.getElementById('scenes-list'), liveVideoStream: document.getElementById('live-video-stream'), participantFeed: document.getElementById('participant-feed'), mainParticipantTag: document.getElementById('main-participant-tag'), // Right sidebar rightSidebarTabs: document.querySelectorAll('.sidebar-tabs .tab-item'), rightSidebarContents: document.querySelectorAll('.sidebar-right .tab-content'), brandColorInput: document.querySelector('[data-setting="brand-color"]'), brandColorValue: document.getElementById('brand-color-value'), themeButtons: document.querySelectorAll('[data-setting="theme"] .btn-theme'), showNamesToggle: document.querySelector('[data-setting="show-names"]'), showTitlesToggle: document.querySelector('[data-setting="show-titles"]'), logoPreview: document.getElementById('logo-preview').querySelector('img'), logoFileInput: document.getElementById('logo-file-input'), uploadLogoBtn: document.querySelector('[data-action="upload-logo"]'), logoPositionButtons: document.querySelectorAll('[data-setting="logo-position"] .btn-icon'), overlayItems: document.querySelectorAll('[data-setting="overlay"] .overlay-item'), backgroundItems: document.querySelectorAll('[data-setting="background-video"] .background-item'), stageOverlay: document.getElementById('stage-overlay'), stageLogo: document.getElementById('stage-logo'), stageBackground: document.getElementById('stage-background'), qrCodeGenerator: document.getElementById('qr-code-generator'), addQrCodeBtn: document.querySelector('[data-action="add-qr-code"]'), qrCodeForm: document.querySelector('.qr-code-form'), createQrBtn: document.querySelector('[data-action="create-qr"]'), cancelQrBtn: document.querySelector('[data-action="cancel-qr"]'), qrTitleInput: document.querySelector('[data-qr-title]'), qrUrlInput: document.querySelector('[data-qr-url]'), soundVolumeSlider: document.querySelector('[data-setting="sound-volume"]'), musicVolumeSlider: document.querySelector('[data-setting="music-volume"]'), // Modals modalBackdrop: document.getElementById('modal-backdrop'), configModal: document.getElementById('config-modal'), configModalCloseBtn: document.querySelector('#config-modal [data-action="close-modal"]'), configModalNavItems: document.querySelectorAll('.modal-nav-item'), configModalContents: document.querySelectorAll('.config-tab-content'), mediaSelectionModal: document.getElementById('media-selection-modal'), mediaModalTitle: document.getElementById('media-modal-title'), mediaGrid: document.getElementById('media-grid'), mediaModalCloseBtn: document.querySelector('#media-selection-modal [data-action="close-modal"]'), mediaTabItems: document.querySelectorAll('.media-tab-item'), // Far right panel farRightPanelItems: document.querySelectorAll('.sidebar-far-right .far-right-item'), // Controls micToggles: document.querySelectorAll('[data-mic-toggle]'), camToggles: document.querySelectorAll('[data-cam-toggle]'), participantCards: document.querySelectorAll('.participants-grid .participant-card'), // Scene options dropdown sceneOptionsToggles: document.querySelectorAll('.scene-options i.fa-ellipsis-v'), }; // --- Core UI Update Functions --- /** * Renders the current active scene in the main video player area. * Updates background, overlay, logo, and participant visibility based on appState. */ function renderLiveView() { // Update Brand Color (for elements like name tags) document.documentElement.style.setProperty('--primary-color', appState.brandColor); // Update Logo if (appState.logoSrc && appState.activeLogo !== 'none') { // 'none' could be a conceptual value to hide elements.stageLogo.src = appState.logoSrc; elements.stageLogo.style.display = 'block'; // Simple positioning based on state if (appState.logoPosition === 'top-left') { elements.stageLogo.style.top = 'var(--spacing-sm)'; elements.stageLogo.style.left = 'var(--spacing-sm)'; elements.stageLogo.style.right = 'auto'; } else if (appState.logoPosition === 'top-right') { elements.stageLogo.style.top = 'var(--spacing-sm)'; elements.stageLogo.style.right = 'var(--spacing-sm)'; elements.stageLogo.style.left = 'auto'; } } else { elements.stageLogo.style.display = 'none'; } // Update Overlay if (appState.activeOverlay === 'streamyard-live') { elements.stageOverlay.src = 'https://via.placeholder.com/100x56/ff0040/ffffff?text=EN+VIVO'; elements.stageOverlay.style.display = 'block'; } else { elements.stageOverlay.style.display = 'none'; } // Update Background if (appState.activeBackground !== 'none' && appState.activeBackgroundImg) { elements.stageBackground.style.backgroundImage = `url(${appState.activeBackgroundImg})`; elements.stageBackground.style.display = 'block'; } else { elements.stageBackground.style.backgroundImage = 'none'; elements.stageBackground.style.display = 'none'; } // Update participant visibility and name tag const mainParticipant = appState.participantsOnStage['cesar']; // Assuming 'cesar' is the main one if (mainParticipant && mainParticipant.onStage) { elements.liveVideoStream.src = mainParticipant.image.replace('60', '800x450'); // Simulate full-size video if (appState.showNames) { elements.mainParticipantTag.textContent = mainParticipant.name; elements.mainParticipantTag.style.display = 'block'; } else { elements.mainParticipantTag.style.display = 'none'; } } else { elements.liveVideoStream.src = 'https://via.placeholder.com/800x450/1e2430/ffffff?text=Vista+Previa+de+la+Transmision'; // Default placeholder elements.mainParticipantTag.style.display = 'none'; } // Update mic/cam icons for active participant (if any) elements.micToggles.forEach(btn => { if (appState.micOn) { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); elements.camToggles.forEach(btn => { if (appState.camOn) { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); console.log("Live view rendered with state:", appState); } /** * Updates the UI elements in the right sidebar based on current appState. */ function updateRightSidebarUI() { // Brand Color elements.brandColorInput.value = appState.brandColor; elements.brandColorValue.textContent = appState.brandColor; // Theme Buttons elements.themeButtons.forEach(btn => { if (btn.dataset.theme === appState.activeTheme) { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); // Show Names Toggle elements.showNamesToggle.checked = appState.showNames; // Show Titles Toggle elements.showTitlesToggle.checked = appState.showTitles; // Logo elements.logoPreview.src = appState.logoSrc; elements.logoPositionButtons.forEach(btn => { if (btn.dataset.position === appState.logoPosition) { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); // Overlay elements.overlayItems.forEach(item => { if (item.dataset.overlay === appState.activeOverlay) { item.classList.add('active'); } else { item.classList.remove('active'); } }); // Background elements.backgroundItems.forEach(item => { if (item.dataset.background === appState.activeBackground) { item.classList.add('active'); } else { item.classList.remove('active'); } }); // QR Code form visibility if (appState.qrCodeFormVisible) { elements.qrCodeForm.style.display = 'flex'; } else { elements.qrCodeForm.style.display = 'none'; } // Sound Volumes elements.soundVolumeSlider.value = appState.soundVolume; elements.musicVolumeSlider.value = appState.musicVolume; } // --- Event Listeners and Handlers --- // Right Sidebar Tabs (Estilo, Multimedia) elements.rightSidebarTabs.forEach(tab => { tab.addEventListener('click', () => { elements.rightSidebarTabs.forEach(item => item.classList.remove('active')); tab.classList.add('active'); elements.rightSidebarContents.forEach(content => content.classList.remove('active')); const targetContent = document.getElementById(tab.dataset.tab); if (targetContent) { targetContent.classList.add('active'); } appState.activeRightPanel = tab.dataset.tab; // Update state console.log(`Changed to right sidebar tab: ${appState.activeRightPanel}`); }); }); // Brand Color Picker elements.brandColorInput.addEventListener('input', (event) => { appState.brandColor = event.target.value; renderLiveView(); updateRightSidebarUI(); // Update value span }); // Theme Buttons elements.themeButtons.forEach(button => { button.addEventListener('click', () => { appState.activeTheme = button.dataset.theme; updateRightSidebarUI(); // In a real app, this would trigger visual theme changes console.log(`Theme changed to: ${appState.activeTheme}`); }); }); // Show Names Toggle elements.showNamesToggle.addEventListener('change', (event) => { appState.showNames = event.target.checked; renderLiveView(); }); // Show Titles Toggle elements.showTitlesToggle.addEventListener('change', (event) => { appState.showTitles = event.target.checked; renderLiveView(); }); // Logo Upload elements.uploadLogoBtn.addEventListener('click', () => { elements.logoFileInput.click(); }); elements.logoFileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { appState.logoSrc = e.target.result; renderLiveView(); updateRightSidebarUI(); }; reader.readAsDataURL(file); } }); // Logo Position Buttons elements.logoPositionButtons.forEach(button => { button.addEventListener('click', () => { appState.logoPosition = button.dataset.position; renderLiveView(); updateRightSidebarUI(); }); }); // Overlay Selection elements.overlayItems.forEach(item => { item.addEventListener('click', () => { appState.activeOverlay = item.dataset.overlay; renderLiveView(); updateRightSidebarUI(); // To update active class console.log(`Overlay changed to: ${appState.activeOverlay}`); }); }); // Background Selection elements.backgroundItems.forEach(item => { item.addEventListener('click', () => { appState.activeBackground = item.dataset.background; appState.activeBackgroundImg = item.dataset.img || ''; // Store image URL renderLiveView(); updateRightSidebarUI(); // To update active class console.log(`Background changed to: ${appState.activeBackground}`); }); }); // QR Code Form Toggles elements.addQrCodeBtn.addEventListener('click', () => { appState.qrCodeFormVisible = true; updateRightSidebarUI(); }); elements.cancelQrBtn.addEventListener('click', () => { appState.qrCodeFormVisible = false; elements.qrTitleInput.value = ''; elements.qrUrlInput.value = ''; updateRightSidebarUI(); }); elements.createQrBtn.addEventListener('click', () => { const title = elements.qrTitleInput.value; const url = elements.qrUrlInput.value; if (title && url) { console.log(`Created QR Code: Title - ${title}, URL - ${url}`); // In a real app, generate QR code and add to UI appState.qrCodeFormVisible = false; elements.qrTitleInput.value = ''; elements.qrUrlInput.value = ''; updateRightSidebarUI(); } else { alert('Por favor, ingresa un título y una URL para el código QR.'); } }); // Sound Volume Slider elements.soundVolumeSlider.addEventListener('input', (event) => { appState.soundVolume = event.target.value; console.log(`Sound volume: ${appState.soundVolume}`); // In a real app, adjust actual audio volume }); // Music Volume Slider elements.musicVolumeSlider.addEventListener('input', (event) => { appState.musicVolume = event.target.value; console.log(`Music volume: ${appState.musicVolume}`); // In a real app, adjust actual music volume }); // --- Scenes List (Left Sidebar) --- elements.scenesList.addEventListener('click', (event) => { const sceneItem = event.target.closest('.scene-item'); if (sceneItem && !event.target.closest('.scene-options')) { // Avoid activating scene when clicking options elements.scenesList.querySelectorAll('.scene-item').forEach(item => item.classList.remove('active')); sceneItem.classList.add('active'); appState.currentSceneId = sceneItem.dataset.sceneId; renderLiveView(); // Re-render live view for new scene console.log(`Active scene changed to: ${appState.currentSceneId}`); } }); // Scene Options Dropdown Toggle elements.scenesList.addEventListener('click', (event) => { const ellipsisIcon = event.target.closest('.scene-options i.fa-ellipsis-v'); if (ellipsisIcon) { const dropdown = ellipsisIcon.nextElementSibling; dropdown.classList.toggle('active'); // Close other dropdowns elements.scenesList.querySelectorAll('.dropdown-menu').forEach(menu => { if (menu !== dropdown) { menu.classList.remove('active'); } }); } else if (!event.target.closest('.dropdown-menu')) { // Close all dropdowns if click is outside elements.scenesList.querySelectorAll('.dropdown-menu').forEach(menu => menu.classList.remove('active')); } const showOnStageBtn = event.target.closest('[data-action="show-on-stage"]'); if(showOnStageBtn) { const sceneItem = showOnStageBtn.closest('.scene-item'); elements.scenesList.querySelectorAll('.scene-item').forEach(item => item.classList.remove('active')); sceneItem.classList.add('active'); appState.currentSceneId = sceneItem.dataset.sceneId; renderLiveView(); console.log(`Scene ${appState.currentSceneId} shown on stage.`); showOnStageBtn.closest('.dropdown-menu').classList.remove('active'); // Close dropdown after action } }); // --- Participants Controls (Central Area) --- elements.participantCards.forEach(card => { card.addEventListener('click', () => { if (card.dataset.participantId) { const participantId = card.dataset.participantId; if (appState.participantsOnStage[participantId]) { const currentStatus = appState.participantsOnStage[participantId].onStage; appState.participantsOnStage[participantId].onStage = !currentStatus; // Toggle on/off stage card.classList.toggle('active', !currentStatus); renderLiveView(); console.log(`Participant ${participantId} toggled stage status to: ${!currentStatus}`); } } else if (card.dataset.action === 'add-participant') { console.log('Open invite participant modal.'); // Placeholder for opening an invite modal } }); }); elements.micToggles.forEach(btn => { btn.addEventListener('click', () => { appState.micOn = !appState.micOn; renderLiveView(); console.log(`Microphone toggled: ${appState.micOn ? 'On' : 'Off'}`); }); }); elements.camToggles.forEach(btn => { btn.addEventListener('click', () => { appState.camOn = !appState.camOn; renderLiveView(); console.log(`Camera toggled: ${appState.camOn ? 'On' : 'Off'}`); }); }); // --- Far Right Panel (Main Navigation) --- elements.farRightPanelItems.forEach(item => { item.addEventListener('click', () => { elements.farRightPanelItems.forEach(i => i.classList.remove('active')); item.classList.add('active'); appState.activeRightPanel = item.dataset.panel; // Simulate changing the right sidebar content // Here you would dynamically load or show/hide different full panels in sidebar-right // For this demo, we'll just log the change. console.log(`Far right panel changed to: ${appState.activeRightPanel}`); // To demonstrate, we can switch the right sidebar's main tab if it matches const correspondingTab = document.querySelector(`.sidebar-tabs .tab-item[data-tab="${appState.activeRightPanel}"]`); if (correspondingTab) { correspondingTab.click(); // Programmatically click the tab } else { // If it's a different panel (like "Comentarios"), you'd load a different content structure // For now, ensure only multimedia/estilo tabs are handled. // Or you could make the right-sidebar itself dynamic, replacing its content entirely. elements.rightSidebarTabs.forEach(tab => tab.classList.remove('active')); elements.rightSidebarContents.forEach(content => content.classList.remove('active')); // And then load specific content for, e.g., 'comentarios' } }); }); // --- Modals --- function openModal(modalElement) { elements.modalBackdrop.style.display = 'flex'; modalElement.style.display = 'flex'; // Add a class to body to prevent scrolling document.body.style.overflow = 'hidden'; } function closeModal() { elements.modalBackdrop.style.display = 'none'; elements.configModal.style.display = 'none'; elements.mediaSelectionModal.style.display = 'none'; document.body.style.overflow = ''; // Restore body scroll } // Open Config Modal document.querySelector('[data-action="open-settings"]').addEventListener('click', () => { openModal(elements.configModal); // Ensure default tab is active on open elements.configModalNavItems.forEach(item => item.classList.remove('active')); elements.configModalContents.forEach(content => content.classList.remove('active')); document.querySelector(`.modal-nav-item[data-config-tab="${appState.activeConfigModalTab}"]`).classList.add('active'); document.getElementById(appState.activeConfigModalTab).classList.add('active'); }); // Close Modals elements.modalBackdrop.addEventListener('click', (event) => { if (event.target === elements.modalBackdrop) { // Only close if clicking backdrop directly closeModal(); } }); elements.configModalCloseBtn.addEventListener('click', closeModal); elements.mediaModalCloseBtn.addEventListener('click', closeModal); // Config Modal Navigation elements.configModalNavItems.forEach(navItem => { navItem.addEventListener('click', () => { elements.configModalNavItems.forEach(item => item.classList.remove('active')); navItem.classList.add('active'); elements.configModalContents.forEach(content => content.classList.remove('active')); const targetTabId = navItem.dataset.configTab; document.getElementById(targetTabId).classList.add('active'); appState.activeConfigModalTab = targetTabId; // Update state console.log(`Config modal tab changed to: ${targetTabId}`); }); }); // Open Media Selection Modal (Background) document.querySelector('[data-action="open-background-modal"]').addEventListener('click', () => { elements.mediaModalTitle.textContent = 'Fondo'; openModal(elements.mediaSelectionModal); // Load background media specific items elements.mediaGrid.innerHTML = ''; // Clear previous items // Filter media-items by type 'image' or 'video' if applicable document.querySelectorAll('.media-item[data-media-type="image"]').forEach(item => { const clone = item.cloneNode(true); clone.addEventListener('click', (event) => { const src = event.currentTarget.dataset.mediaSrc; const backgroundName = event.currentTarget.querySelector('span').textContent; appState.activeBackground = backgroundName; appState.activeBackgroundImg = src; renderLiveView(); updateRightSidebarUI(); // To update the smaller grid in sidebar closeModal(); console.log(`Selected background: ${backgroundName}`); }); elements.mediaGrid.appendChild(clone); }); // Set images tab as active for backgrounds elements.mediaTabItems.forEach(item => item.classList.remove('active')); document.querySelector('.media-tab-item[data-media-type="images"]').classList.add('active'); }); // Open Media Selection Modal (Overlay) document.querySelector('[data-action="open-overlay-modal"]').addEventListener('click', () => { elements.mediaModalTitle.textContent = 'Superposición'; openModal(elements.mediaSelectionModal); // Load overlay media specific items (similar to background but might be different assets) elements.mediaGrid.innerHTML = ''; // Clear previous items document.querySelectorAll('.media-item[data-media-type="image"]').forEach(item => { // Re-using image assets for demo const clone = item.cloneNode(true); clone.addEventListener('click', (event) => { const src = event.currentTarget.dataset.mediaSrc; const overlayName = event.currentTarget.querySelector('span').textContent; appState.activeOverlay = overlayName; // Update with selected overlay // Potentially store a specific overlay image if needed renderLiveView(); updateRightSidebarUI(); closeModal(); console.log(`Selected overlay: ${overlayName}`); }); elements.mediaGrid.appendChild(clone); }); elements.mediaTabItems.forEach(item => item.classList.remove('active')); document.querySelector('.media-tab-item[data-media-type="images"]').classList.add('active'); }); // Media Modal Tabs (Images/Videos) elements.mediaTabItems.forEach(tab => { tab.addEventListener('click', () => { elements.mediaTabItems.forEach(item => item.classList.remove('active')); tab.classList.add('active'); const mediaType = tab.dataset.mediaType; // Filter/re-render media grid based on type elements.mediaGrid.innerHTML = ''; document.querySelectorAll(`.media-item[data-media-type="${mediaType}"]`).forEach(item => { const clone = item.cloneNode(true); // Re-attach click listener for new clones if necessary, or use delegation elements.mediaGrid.appendChild(clone); }); console.log(`Media modal tab changed to: ${mediaType}`); }); }); // --- Drag-and-Drop for Scenes (Conceptual) --- let draggedScene = null; elements.scenesList.addEventListener('dragstart', (event) => { draggedScene = event.target.closest('.scene-item'); if (draggedScene) { event.dataTransfer.effectAllowed = 'move'; // Optional: Store some data about the dragged item event.dataTransfer.setData('text/plain', draggedScene.dataset.sceneId); setTimeout(() => { draggedScene.classList.add('dragging'); }, 0); } }); elements.scenesList.addEventListener('dragover', (event) => { event.preventDefault(); // Allow drop const targetItem = event.target.closest('.scene-item'); if (targetItem && targetItem !== draggedScene) { const rect = targetItem.getBoundingClientRect(); const midpoint = rect.y + rect.height / 2; if (event.clientY < midpoint) { elements.scenesList.insertBefore(draggedScene, targetItem); } else { elements.scenesList.insertBefore(draggedScene, targetItem.nextSibling); } } }); elements.scenesList.addEventListener('dragend', () => { if (draggedScene) { draggedScene.classList.remove('dragging'); draggedScene = null; // In a real app, update the order in appState or backend here. console.log("Scenes reordered. Update backend/state."); } }); // --- Initialization --- function initializeUI() { // Set initial active states for right sidebar and far right panel elements.rightSidebarTabs[1].click(); // Activate "Activos multimedia" tab initially elements.farRightPanelItems[2].click(); // Activate "Activos multimedia" in far right renderLiveView(); // Render the initial state of the live view updateRightSidebarUI(); // Update sidebar UI elements console.log("UI initialized."); } initializeUI(); }); ``` --- ### **Explicación de la Propuesta UX en el Código:** 1. **HTML5 (`index.html`):** * **Estructura Semántica:** Utiliza `

`, `

` para una estructura clara. * **Controles Orientados a la UX:** * `data-action` atributos en botones para indicar su propósito y facilitar el manejo de eventos en JS. * `data-setting` atributos para elementos de configuración que afectan el estado. * `data-scene-id`, `data-participant-id` para identificar elementos específicos. * `beta-tag` y `new-tag` para destacar características nuevas/en beta. * `premium-badge` para indicar funciones de pago. * **Modales:** Estructura HTML para los modales de `Configuración` y `Selección de Medios`, con `modal-backdrop` para el overlay. * **Elementos Dinámicos:** Placeholders (``, `

`) donde JavaScript inyectará o modificará el contenido para reflejar los cambios en tiempo real. * **Tooltips:** Atributos `data-tooltip` en varios elementos para proporcionar información adicional al pasar el ratón, mejorando la discoverability y learnability. 2. **CSS3 (`style.css`):** * **Variables CSS:** Reafirma el uso de `--primary-color`, `--background-dark`, etc., para la coherencia visual y facilidad de mantenimiento, directamente aplicando los colores y espaciados identificados en el análisis pixel-perfect. * **Layout Adaptativo:** Flexbox para la mayoría de los contenedores (top-header, main-content, sidebars, participant-controls), y Grid para componentes específicos (presets-grid, overlay-grid, etc.) para organizar los elementos de manera eficiente. * **Estados Visuales Claros:** Clases `.active` para resaltar elementos seleccionados (escenas, pestañas, temas, presets). * **Diseño de Componentes:** Estilos detallados para botones, toggles, dropdowns, input de color, sliders de volumen, checkbox/radio personalizados para mantener una interfaz limpia y moderna. * **Tooltips Estilizados:** CSS para el `data-tooltip` que asegura que los tooltips sean discretos, legibles y aparezcan de forma consistente. * **Modales:** Estilos para el backdrop, el contenedor del modal y su contenido, incluyendo la navegación lateral del modal de configuración, replicando la apariencia del video. * **Scrollbars Personalizados:** Un toque extra para mantener la estética oscura en los scrollbars. 3. **JavaScript (`script.js`):** * **Gestión de Estado Centralizada (`appState`):** Un objeto global que mantiene el estado actual de la aplicación (escena activa, color de marca, logo, superposiciones, estado de micrófono/cámara, etc.). Esto es crucial para un feedback visual instantáneo, ya que la UI se actualiza en función de este estado. * **Funciones de Renderizado y Actualización:** * `renderLiveView()`: La función más importante para la UX. Se encarga de actualizar el área central de transmisión (cambio de fondo, superposiciones, logos, visibilidad de nombres de participantes) **inmediatamente** después de un cambio en el `appState`. Esto proporciona el feedback visual instantáneo. * `updateRightSidebarUI()`: Sincroniza los controles del panel derecho (sliders, toggles, active-states de botones) con el `appState`. * **Delegación de Eventos:** Se utilizan event listeners en contenedores padre (ej., `scenesList`, `participantsList`) para manejar clics en elementos hijos que pueden ser añadidos o removidos dinámicamente, optimizando el rendimiento. * **Manejo de Modales:** Funciones `openModal()` y `closeModal()` para gestionar la visibilidad del backdrop y los modales, y para controlar el `overflow` del `body` para evitar el scroll accidental detrás del modal. * **Navegación por Pestañas y Subpestañas:** Lógica para cambiar la clase `active` en las pestañas y mostrar/ocultar el contenido correspondiente en el sidebar derecho y dentro del modal de configuración. * **Simulación de Drag-and-Drop:** Una implementación básica para reordenar las escenas, mostrando cómo se manejaría visualmente el arrastre y la inserción. * **Interacciones Específicas:** * Cambio de color de marca: El `input type="color"` actualiza `appState.brandColor` y `renderLiveView()` cambia el `--primary-color` en CSS. * Toggles: `showNamesToggle` actualiza `appState.showNames`, lo que afecta la visibilidad del nombre del participante en la vista previa. * Selección de logo/superposición/fondo: Actualizan `appState` y `renderLiveView()` cambia las imágenes en el área central. * QR Code form: Lógica para mostrar/ocultar el formulario. * Controles de micrófono/cámara: Actualizan `appState` y cambian el icono de `active` en los botones. * **Inicialización (`initializeUI`):** Asegura que la UI se cargue en un estado predecible y activo, activando el primer tab y panel por defecto, y renderizando la vista en vivo inicial. Esta propuesta de código es un punto de partida sólido para construir una interfaz con la misma atención a los detalles de UX que se observa en el video de StreamYard. La clave es la estrecha relación entre la gestión del estado en JavaScript y la actualización visual instantánea del DOM a través de CSS.

Configuración

General

Cámara

Audio

Efectos visuales

Grabación

Teclas de acceso rápido

Diseños

Invitados

Fondo