diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..578e421 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,196 @@ +:root { + --background-color: #181818; + --surface-color: #282828; + --surface-color-hover: #3a3a3a; + --primary-color: #00A0F0; + --secondary-color: #FFD700; + --text-color: #E0E0E0; + --text-color-dark: #181818; + --red-color: #D93025; + --green-color: #34A853; + --border-color: #444; + --border-radius: 4px; +} + +body { + background-color: var(--background-color); + color: var(--text-color); + font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; +} + +.main-header { + background-color: var(--surface-color); + border-bottom: 1px solid var(--border-color); + padding: 0.75rem 1.5rem; +} + +.video-panel { + background-color: #000; + border: 2px solid var(--border-color); + border-radius: var(--border-radius); + aspect-ratio: 16 / 9; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + position: relative; + overflow: hidden; + transition: background-color 0.3s ease; +} + +.video-panel .panel-label { + position: absolute; + top: 10px; + left: 10px; + padding: 5px 10px; + border-radius: var(--border-radius); + font-size: 0.9rem; + font-weight: bold; + text-transform: uppercase; +} + +.video-panel .scene-content { + font-size: 1.5rem; + font-weight: bold; + color: #fff; + text-shadow: 2px 2px 4px rgba(0,0,0,0.7); +} + +#preview-panel .panel-label { + background-color: var(--green-color); + color: #fff; +} + +#program-panel .panel-label { + background-color: var(--red-color); + color: #fff; +} + +.control-panel { + background-color: var(--surface-color); + padding: 1rem; + border-radius: var(--border-radius); + margin-top: 1rem; +} + +.scene-list .list-group-item { + background-color: var(--surface-color); + color: var(--text-color); + border-color: var(--border-color); + cursor: pointer; + transition: background-color 0.2s; +} + +.scene-list .list-group-item:hover { + background-color: var(--surface-color-hover); +} + +.scene-list .list-group-item { + display: flex; + justify-content: space-between; + align-items: center; +} + +.scene-list .scene-name { + flex-grow: 1; + cursor: pointer; +} + +.scene-list .remove-scene-btn { + margin-left: 1rem; + visibility: hidden; /* Hidden by default */ + opacity: 0; + transition: opacity 0.2s, visibility 0.2s; +} + +.scene-list .list-group-item:hover .remove-scene-btn { + visibility: visible; /* Show on hover */ + opacity: 1; +} + +#add-scene-btn { + padding: 0.2rem 0.5rem; + font-size: 0.9rem; +} + +.scene-list .list-group-item.active { + background-color: var(--primary-color); + border-color: var(--primary-color); + color: #fff; +} + +.transition-controls .btn { + font-size: 1.2rem; + font-weight: bold; + padding: 0.75rem 0; + width: 120px; +} + +.btn-cut { + background-color: var(--secondary-color); + color: var(--text-color-dark); + border: none; +} +.btn-cut:hover { + background-color: #ffed4a; + color: var(--text-color-dark); +} + +.btn-fade { + background-color: #6c757d; + color: #fff; + border: none; +} +.btn-fade:hover { + background-color: #5a6268; +} + +/* Modal Styles */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 1040; + display: flex; + align-items: center; + justify-content: center; +} + +.modal-dialog { + background-color: var(--surface-color); + color: var(--text-color); + border-radius: var(--border-radius); + border: 1px solid var(--border-color); + width: 100%; + max-width: 500px; +} + +.modal-content { + background-color: transparent; + border: none; +} + +.modal-header, .modal-footer { + border-bottom-color: var(--border-color); + border-top-color: var(--border-color); +} + +.modal-body .form-control, .modal-body .form-select { + background-color: var(--background-color); + color: var(--text-color); + border-color: var(--border-color); +} + +.modal-body .form-control:focus, .modal-body .form-select:focus { + background-color: var(--background-color); + color: var(--text-color); + border-color: var(--primary-color); + box-shadow: 0 0 0 0.25rem rgba(0, 160, 240, 0.25); +} + +.modal-body .form-control-color { + min-height: 38px; +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..f7710de --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,182 @@ +document.addEventListener('DOMContentLoaded', function () { + // UI Elements + const sceneListEl = document.querySelector('.scene-list'); + const previewPanel = document.getElementById('preview-panel'); + const programPanel = document.getElementById('program-panel'); + const previewContent = previewPanel.querySelector('.scene-content'); + const programContent = programPanel.querySelector('.scene-content'); + const cutButton = document.getElementById('cut-button'); + + // Modal Elements + const addSceneBtn = document.getElementById('add-scene-btn'); + const modal = document.getElementById('add-scene-modal'); + const modalCloseBtn = document.getElementById('modal-close-btn'); + const modalCancelBtn = document.getElementById('modal-cancel-btn'); + const modalSaveBtn = document.getElementById('modal-save-btn'); + const sceneNameInput = document.getElementById('scene-name-input'); + const sceneTypeSelect = document.getElementById('scene-type-select'); + const sceneColorInput = document.getElementById('scene-color-input'); + + // Data Store + let scenes = []; + let activePreviewSceneId = null; + let activeProgramSceneId = null; + let sceneIdCounter = 0; + + // --- DATA MANAGEMENT --- + function addScene(name, type, value) { + const newScene = { + id: sceneIdCounter++, + name: name, + type: type, + value: value + }; + scenes.push(newScene); + renderSceneList(); + return newScene; + } + + function removeScene(id) { + scenes = scenes.filter(scene => scene.id !== id); + if (activePreviewSceneId === id) { + clearPreview(); + } + renderSceneList(); + } + + function getScene(id) { + return scenes.find(scene => scene.id === id); + } + + // --- UI RENDERING --- + function renderSceneList() { + sceneListEl.innerHTML = ''; // Clear existing list + scenes.forEach(scene => { + const icon = getIconForSceneType(scene.type); + const item = document.createElement('div'); + item.className = 'list-group-item list-group-item-action'; + item.dataset.sceneId = scene.id; + if (scene.id === activePreviewSceneId) { + item.classList.add('active'); + } + item.innerHTML = ` + ${icon} ${scene.name} + + `; + sceneListEl.appendChild(item); + }); + } + + function updatePreview(sceneId) { + const scene = getScene(sceneId); + if (!scene) return; + + activePreviewSceneId = scene.id; + + previewContent.textContent = scene.name; + switch (scene.type) { + case 'color': + previewPanel.style.backgroundColor = scene.value; + break; + default: + previewPanel.style.backgroundColor = '#000'; + break; + } + renderSceneList(); // Re-render to show active state + } + + function clearPreview() { + activePreviewSceneId = null; + previewContent.textContent = 'Select a Scene'; + previewPanel.style.backgroundColor = '#000'; + renderSceneList(); + } + + function getIconForSceneType(type) { + switch (type) { + case 'color': return ''; + case 'image': return ''; + case 'video': return ''; + default: return ''; + } + } + + // --- EVENT LISTENERS --- + + // Scene list interactions (select, remove) + sceneListEl.addEventListener('click', (e) => { + const target = e.target; + const sceneItem = target.closest('.list-group-item'); + if (!sceneItem) return; + + const sceneId = parseInt(sceneItem.dataset.sceneId); + + if (target.classList.contains('remove-scene-btn')) { + removeScene(sceneId); + } else { + updatePreview(sceneId); + } + }); + + // Transition button + cutButton.addEventListener('click', () => { + if (activePreviewSceneId === null) return; + + const previewScene = getScene(activePreviewSceneId); + activeProgramSceneId = previewScene.id; + + programContent.textContent = previewScene.name; + programPanel.style.backgroundColor = previewPanel.style.backgroundColor; + + clearPreview(); + }); + + // Modal interactions + function showModal() { modal.style.display = 'flex'; sceneNameInput.focus(); } + function hideModal() { modal.style.display = 'none'; } + + addSceneBtn.addEventListener('click', showModal); + modalCloseBtn.addEventListener('click', hideModal); + modalCancelBtn.addEventListener('click', hideModal); + + modalSaveBtn.addEventListener('click', () => { + const name = sceneNameInput.value.trim(); + if (!name) { + alert('Please enter a scene name.'); + return; + } + const type = sceneTypeSelect.value; + const value = sceneColorInput.value; // For now, only color + + const newScene = addScene(name, type, value); + updatePreview(newScene.id); + + // Reset form and hide modal + sceneNameInput.value = ''; + sceneColorInput.value = '#1e90ff'; + hideModal(); + }); + + // --- INITIALIZATION --- + function initialize() { + // Add some default scenes + addScene('Main Camera', 'color', '#003366'); + addScene('Screen Share', 'color', '#006633'); + addScene('Starting Soon', 'color', '#333333'); + + // Set initial program scene for display + const firstScene = scenes[0]; + if (firstScene) { + activeProgramSceneId = firstScene.id; + programContent.textContent = firstScene.name; + programPanel.style.backgroundColor = firstScene.value; + } + + // Select the second scene for preview initially + if (scenes.length > 1) { + updatePreview(scenes[1].id); + } + } + + initialize(); +}); diff --git a/index.php b/index.php index 7205f3d..4e3d8d0 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,120 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + VMIXTER + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+

VMIXTER

+ +
+ +
+
+ +
+
+ +
+
+ PREVIEW +
Select a Scene
+
+
+ +
+
+ PROGRAM (ON AIR) +
Initial Scene
+
+
+
+ +
+ +
+
+
+
Scenes
+ +
+
+ +
+
+
+ +
+
+
Transitions
+
+ + +
+
+
+
+
+ + + -
- + + + +