diff --git a/electron/main/index.html b/electron/main/index.html new file mode 100644 index 0000000..c8d7b20 --- /dev/null +++ b/electron/main/index.html @@ -0,0 +1,26 @@ + + + + + + Video Upload Drag and Drop + Button + + + +
+ + + +
+

Drag and drop video file

+
No video chosen
+
+ + + + + + + + + \ No newline at end of file diff --git a/electron/main/script.js b/electron/main/script.js new file mode 100644 index 0000000..790e046 --- /dev/null +++ b/electron/main/script.js @@ -0,0 +1,50 @@ +const uploadContainer = document.getElementById('uploadContainer'); +const fileInput = document.getElementById('videoUpload'); +const fileName = document.getElementById('fileName'); +const manualBtn = document.getElementById('manualUploadBtn'); +const videoPreview = document.getElementById('videoPreview'); + + +// Drag & Drop Events +uploadContainer.addEventListener('dragover', (e) => { + e.preventDefault(); + uploadContainer.classList.add('dragover'); +}); + + +uploadContainer.addEventListener('dragleave', () => { + uploadContainer.classList.remove('dragover'); +}); + + +uploadContainer.addEventListener('drop', (e) => { + e.preventDefault(); + uploadContainer.classList.remove('dragover'); + + + const files = e.dataTransfer.files; + handleFiles(files); +}); + + +manualBtn.addEventListener('click', () => { + fileInput.click(); +}); + + +fileInput.addEventListener('change', () => { + handleFiles(fileInput.files); +}); + + + + +function handleFiles(files) { + if (files.length > 0) { + const file = files[0]; + if (file.type.startsWith('video/')) { + fileInput.files = files; + fileName.textContent = `Chosen video: ${file.name}`; + } +} +} diff --git a/electron/main/style.css b/electron/main/style.css new file mode 100644 index 0000000..f0bde45 --- /dev/null +++ b/electron/main/style.css @@ -0,0 +1,64 @@ +body { + font-family: Arial, sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f5f5f5; + gap: 15px; + margin: 0; +} + + +.upload-container { + background: white; + padding: 40px; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); + text-align: center; + width: 400px; + transition: border 0.3s, background-color 0.3s; + border: 2px dashed #ccc; +} + + +.upload-container.dragover { + border-color: #007BFF; + background-color: #eaf0ff; +} + + +.upload-container p { + margin: 0 0 15px 0; + font-size: 16px; + color: #555; +} + + +.file-name { + margin-top: 10px; + font-size: 14px; + color: #333; +} + + +.custom-btn { + padding: 10px 20px; + background-color: #007BFF; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 14px; +} + + +.custom-btn:hover { + background-color: #0056b3; +} + + +input[type="file"] { + display: none; +}