emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-15 18:01:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

First base setup from Verena and me regarding the UI

Browse Source
This commit is contained in:
eric.minning
2025-11-03 13:13:42 +01:00
parent 749e44f322
commit 291fda8711
3 changed files with 140 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/main/index.html
+26
View File
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Upload Drag and Drop + Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form method="post" enctype="multipart/form-data" >
<input type="file" name="uploaddatei" >
<div class="upload-container" id="uploadContainer">
<p>Drag and drop video file</p>
<div class="file-name" id="fileName">No video chosen</div>
</div>
<button class="custom-btn" id="manualUploadBtn">Upload video</button>
<input type="file" id="videoUpload" accept="video/*">
<script src="script.js"></script>
</body>
</html>
electron/main/script.js
+50
View File
@@ -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}`;
}
}
}
electron/main/style.css
+64
View File
@@ -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;
}