Upload 2 files

static/scripts.js

@@ -0,0 +1,216 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const form = document.getElementById('process-form');
+    const loadingOverlay = document.getElementById('loading-overlay');
+    const downloadSection = document.getElementById('download-section');
+    const downloadLink = document.getElementById('download-link');
+    const fileInput = document.getElementById('images');
+    const fileError = document.getElementById('file-error');
+    const videoError = document.getElementById('video-error');
+    const operationSelect = document.getElementById('operation');
+    const operationError = document.getElementById('operation-error');
+    const languageError = document.getElementById('language-error');
+    const sourceLang = document.getElementById("source-lang");
+    const targetLang = document.getElementById("target-lang");
+    const languageSelection = document.getElementById("language-selection");
+    const dubbingOptions = document.getElementById("dubbing-options");
+    const dubbingType = document.getElementById("dubbing-type");
+    const dubbingLanguage = document.getElementById("dubbing-language");
+    const srtFileInput = document.getElementById("srt-file");
+    const videoFileInput = document.getElementById("video-file");
+    const fileLabel = document.getElementById("file-label");
+    const srtFileLabel = document.querySelector('label[for="srt-file"]');
+    const videoFileLabel = document.querySelector('label[for="video-file"]');
+
+    languageSelection.style.display = "none";
+    dubbingOptions.style.display = "none";
+
+    operationSelect.addEventListener('change', function () {
+        let selectedOperation = operationSelect.value;
+        resetFormFields();
+
+        if (selectedOperation === "translate" || selectedOperation === "both") {
+            languageSelection.style.display = "flex";
+            fileLabel.innerText = "Upload File (Max 5 images)";
+            fileInput.setAttribute("accept", "image/*");
+            fileInput.setAttribute("multiple", "multiple");
+            fileInput.style.display = "block";
+            fileLabel.style.display = "block";
+            sourceLang.required = true;
+            targetLang.required = true;
+            fileInput.required = true;
+        } else if (selectedOperation === "subtitle") {
+            languageSelection.style.display = "flex";
+            fileLabel.innerText = "Upload File (Max 1 video)";
+            fileInput.setAttribute("accept", "video/*");
+            fileInput.removeAttribute("multiple");
+            fileInput.style.display = "block";
+            fileLabel.style.display = "block";
+            sourceLang.required = true;
+            targetLang.required = true;
+            fileInput.required = true;
+        } else if (selectedOperation === "dubbing") {
+            dubbingOptions.style.display = "flex";
+            fileLabel.style.display = "none";
+            fileInput.style.display = "none";
+            dubbingType.required = true;
+        } else {
+            fileLabel.innerText = "Upload File (Max 5 images)";
+            fileInput.setAttribute("accept", "image/*");
+            fileInput.setAttribute("multiple", "multiple");
+            fileInput.style.display = "block";
+            fileLabel.style.display = "block";
+            fileInput.required = true;
+        }
+    });
+
+    dubbingType.addEventListener('change', function () {
+        if (dubbingType.value === "manual") {
+            dubbingLanguage.style.display = "flex";
+            srtFileInput.style.display = "block";
+            videoFileInput.style.display = "block";
+            srtFileLabel.style.display = "block";
+            videoFileLabel.style.display = "block";
+            videoFileInput.required = true;
+            srtFileInput.required = true;
+            document.getElementById('dubbing-lang').required = true;
+        } else {
+            dubbingLanguage.style.display = "none";
+            srtFileInput.style.display = "none";
+            videoFileInput.style.display = "none";
+            srtFileLabel.style.display = "none";
+            videoFileLabel.style.display = "none";
+            videoFileInput.required = false;
+            srtFileInput.required = false;
+            document.getElementById('dubbing-lang').required = false;
+        }
+    });
+
+    fileInput.addEventListener('change', function () {
+        const files = fileInput.files;
+        const selectedOperation = operationSelect.value;
+        let hasVideo = false;
+        let hasImage = false;
+
+        for (const file of files) {
+            if (file.type.startsWith('video/')) {
+                hasVideo = true;
+            } else if (file.type.startsWith('image/')) {
+                hasImage = true;
+            }
+        }
+
+        if ((selectedOperation === 'subtitle') && !hasVideo) {
+            videoError.style.display = 'block';
+            fileInput.value = '';
+        } else {
+            videoError.style.display = 'none';
+        }
+
+        if (files.length > 5 && !hasVideo) {
+            fileError.style.display = 'block';
+            fileInput.value = '';
+        } else {
+            fileError.style.display = 'none';
+        }
+    });
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        if (!validateForm()) {
+            return;
+        }
+
+        loadingOverlay.style.display = 'flex';
+        const formData = new FormData(form);
+        
+        try {
+            const response = await fetch('/process', {
+                method: 'POST',
+                body: formData,
+            });
+            const data = await response.json();
+            if (data.status === 'ready') {
+                downloadLink.href = data.download_url;
+                downloadSection.style.display = 'block';
+                form.style.display = 'none';
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        } finally {
+            loadingOverlay.style.display = 'none';
+        }
+    });
+
+    function validateForm() {
+        let isValid = true;
+        let operation = operationSelect.value;
+        let sourceLangValue = sourceLang.value;
+        let targetLangValue = targetLang.value;
+
+        if (!operation) {
+            operationError.innerText = "Please select an operation.";
+            operationError.style.display = "block";
+            isValid = false;
+        } else {
+            operationError.style.display = "none";
+        }
+
+        if ((operation === "translate" || operation === "both" || operation === "subtitle") &&
+            (!sourceLangValue || !targetLangValue)) {
+            languageError.innerText = "Both language fields must be selected.";
+            languageError.style.display = "block";
+            isValid = false;
+        } else if (sourceLangValue === targetLangValue && (operation === "translate" || operation === "both")) {
+            languageError.innerText = "Source and Target languages cannot be the same.";
+            languageError.style.display = "block";
+            isValid = false;
+        } else {
+            languageError.style.display = "none";
+        }
+
+        return isValid;
+    }
+
+    function resetFormFields() {
+        languageSelection.style.display = "none";
+        dubbingOptions.style.display = "none";
+        dubbingLanguage.style.display = "none";
+        srtFileInput.style.display = "none";
+        videoFileInput.style.display = "none";
+        srtFileLabel.style.display = "none";
+        videoFileLabel.style.display = "none";
+        fileInput.style.display = "none";
+        fileLabel.style.display = "none";
+        fileInput.value = '';
+        sourceLang.value = '';
+        targetLang.value = '';
+        dubbingType.value = '';
+        document.getElementById('dubbing-lang').value = '';
+        sourceLang.required = false;
+        targetLang.required = false;
+        fileInput.required = false;
+        dubbingType.required = false;
+        videoFileInput.required = false;
+        srtFileInput.required = false;
+        document.getElementById('dubbing-lang').required = false;
+    }
+});
+
+// Define resetForm outside of the DOMContentLoaded event listener
+function resetForm() {
+    window.location.reload();
+}
+
+function purchase() {
+    document.getElementById('purchase-modal').style.display = 'flex';
+}
+
+function closePurchaseModal() {
+    document.getElementById('purchase-modal').style.display = 'none';
+}
+
+function confirmPurchase() {
+    alert("Satın alma işlemi başarıyla tamamlandı!");
+    closePurchaseModal();
+}

static/styles.css

@@ -0,0 +1,231 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    background: url('/static/wallpaper.jpg') no-repeat center center fixed;
+    background-size: cover;
+    color: #ffffff;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.menu {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: #000000;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    color: white;
+    text-align: center;
+    width: 70px;
+    height: 20px;
+}
+.menu-options {
+    display: none;
+    position: absolute;
+    top: 40px;
+    left: 0px;
+    background-color: rgba(0, 0, 0, 0.9);
+    padding: 5px;
+    border-radius: 5px;
+    width: 80px;
+    max-height: 300px;
+    overflow-y: auto;
+}
+.menu:hover .menu-options {
+    display: block;
+}
+.menu-options button {
+    display: block;
+    background: none;
+    border: none;
+    color: white;
+    padding: 5px;
+    cursor: pointer;
+    width: 100%;
+    text-align: left;
+}
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 20px;
+    border-radius: 10px;
+    width: 300px;
+    text-align: center;
+}
+
+.modal-content input {
+    width: 93%;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 5px;
+    border: none;
+    background-color: #1e1e1e;
+    color: white;
+}
+
+.modal-content button {
+    background-color: #eb142a;
+    color: white;
+    border: none;
+    padding: 15px;
+    width: 250px;
+    height: 45px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.modal-content button:hover {
+    background-color: #c01022;
+}
+
+.close-btn {
+    background-color: #eb142a;
+    margin-top: 10px;
+}
+
+.close-btn:hover {
+    background-color: #c01022;
+}
+
+.product-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.product {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 15px;
+    border-radius: 5px;
+    width: 30%;
+    text-align: center;
+}
+
+.product h3 {
+    margin-bottom: 10px;
+}
+
+.product p {
+    margin-bottom: 15px;
+}
+
+.product button {
+    background-color: #eb142a;
+    color: white;
+    border: none;
+    padding: 15px;
+    width: 250px;
+    height: 50px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.product button:hover {
+    background-color: #c01022;
+}
+
+main {
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 20px;
+    max-width: 600px;
+    margin: auto;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    text-align: center;
+}
+header h1 {
+    font-size: 2em;
+    color: #eb142a;
+}
+label, select, input[type="file"], button {
+    display: block;
+    width: 100%;
+    margin: 10px 0;
+    font-size: 1rem;
+}
+select, input[type="file"] {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #1e1e1e;
+    color: #ffffff;
+}
+button, #download-link, #reset-button {
+    padding: 12px;
+    border: none;
+    border-radius: 5px;
+    background-color: #eb142a;
+    color: #ffffff;
+    font-size: 1rem;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: center;
+    width: 100%;
+    margin-top: 10px;
+}
+button:hover, #download-link:hover, #reset-button:hover {
+    background-color: #c01022;
+}
+#download-link {
+    background-color: #28a745;
+}
+#download-link:hover {
+    background-color: #218838;
+}
+#loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+#loading-overlay .spinner {
+    width: 50px;
+    height: 50px;
+    border: 6px solid rgba(255, 255, 255, 0.3);
+    border-top: 6px solid #ffffff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+@media (max-width: 768px) {
+    main {
+        margin: 20px;
+        padding: 15px;
+    }
+    header h1 {
+        font-size: 1.5em;
+    }
+}