OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📁 audio	-	01/22/2025 07:07:41 AM	rwxrwxrwx
📄 export.php	6.97 KB	05/19/2025 10:07:22 AM	rw-r--r--
📁 files	-	01/22/2025 07:01:42 AM	rwxrwxrwx
📄 index.php	4.93 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 script.js	6.46 KB	01/22/2025 07:01:36 AM	rw-r--r--
📄 styles.css	929 bytes	01/22/2025 07:01:36 AM	rw-r--r--
📄 video_process.php	11.12 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 zexport.php	3.56 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 zindex.php	4.48 KB	05/19/2025 10:07:22 AM	rw-r--r--
📄 zscript.js	5.78 KB	01/22/2025 07:01:36 AM	rw-r--r--

Editing: zscript.js

// let rowCount = 1;

// function previewImage(input, index) {
//   const preview = document.getElementById("preview" + index);
//   const file = input.files[0];
//   const reader = new FileReader();

//   reader.onload = function (e) {
//     preview.src = e.target.result;
//   };
//   reader.readAsDataURL(file);
// }

// function addRow() {
//   const storyboard = document.getElementById("storyboard");
//   rowCount++;

//   // Create new storyboard item
//   const storyboardItem = document.createElement("div");
//   storyboardItem.className = "storyboard-item";

//   const img = document.createElement("img");
//   img.id = "preview" + rowCount;
//   img.style.maxWidth = "100px";
//   img.style.height = "auto";

//   const fileInput = document.createElement("input");
//   fileInput.type = "file";
//   fileInput.name = "images[]";
//   fileInput.accept = "image/*";
//   fileInput.onchange = function () {
//     previewImage(this, rowCount);
//   };
//   fileInput.required = true;

//   const durationInput = document.createElement("input");
//   durationInput.type = "number";
//   durationInput.name = "durations[]";
//   durationInput.step = "0.1";
//   durationInput.min = "0.1";
//   durationInput.value = "5";
//   durationInput.required = true;

//   storyboardItem.appendChild(img);
//   storyboardItem.appendChild(fileInput);
//   storyboardItem.appendChild(durationInput);

//   const deleteButton = document.createElement("span");
//   deleteButton.className = "delete-row";
//   deleteButton.textContent = "Delete";
//   deleteButton.onclick = function () {
//     deleteRow(storyboardItem);
//   };

//   storyboardItem.appendChild(deleteButton);
//   storyboard.appendChild(storyboardItem);
// }

// function deleteRow(storyboardItem) {
//   storyboardItem.parentNode.removeChild(storyboardItem);
//   rowCount--;

//   // Reorder storyboard item IDs
//   const storyboardItems = document.querySelectorAll(".storyboard-item");
//   storyboardItems.forEach((item, index) => {
//     item.querySelector("img").setAttribute("id", "preview" + (index + 1));
//     item
//       .querySelector('input[type="file"]')
//       .setAttribute("onchange", "previewImage(this, " + (index + 1) + ")");
//   });
// }

// function validateForm() {
//   const inputs = document.querySelectorAll('input[name="images[]"]');
//   for (let i = 0; i < inputs.length; i++) {
//     if (!inputs[i].files.length) {
//       alert("Please upload all images.");
//       return false;
//     }
//   }
//   return true;
// }

let rowCount = 1; // Initialize rowCount

function previewImage(input, index) {
    const preview = document.getElementById("preview" + index);
    const file = input.files[0];
    const reader = new FileReader();

reader.onload = function (e) {
        preview.src = e.target.result;
    };
    reader.readAsDataURL(file);
}

function addRow() {
    const storyboard = document.getElementById("storyboard");
    rowCount++;

// Create new storyboard item
    const storyboardItem = document.createElement("div");
    storyboardItem.className = "storyboard-item";
    storyboardItem.id = "item" + rowCount;

const img = document.createElement("img");
    img.id = "preview" + rowCount;
    img.style.maxWidth = "100px";
    img.style.height = "auto";

const fileInput = document.createElement("input");
    fileInput.type = "file";
    fileInput.name = "images[]";
    fileInput.accept = "image/*";
    fileInput.onchange = function () {
        previewImage(this, rowCount);
    };
    fileInput.required = true;

const durationInput = document.createElement("input");
    durationInput.type = "number";
    durationInput.name = "durations[]";
    durationInput.step = "0.1";
    durationInput.min = "0.1";
    durationInput.value = "5";
    durationInput.required = true;

const captionTextarea = document.createElement("textarea");
    captionTextarea.name = "captions[]";
    captionTextarea.rows = "2";
    captionTextarea.placeholder = "Enter caption for this image...";
    captionTextarea.required = true;

const deleteButton = document.createElement("span");
    deleteButton.className = "delete-row";
    deleteButton.textContent = "Delete";
    deleteButton.onclick = function () {
        deleteRow(this);
    };

storyboardItem.appendChild(img);
    storyboardItem.appendChild(fileInput);
    storyboardItem.appendChild(durationInput);
    storyboardItem.appendChild(captionTextarea);
    storyboardItem.appendChild(deleteButton);
    
    storyboard.appendChild(storyboardItem);
}

function deleteRow(button) {
    const storyboardItem = button.parentNode;
    storyboardItem.parentNode.removeChild(storyboardItem);
    rowCount--;

// Reorder storyboard item IDs
    const storyboardItems = document.querySelectorAll(".storyboard-item");
    storyboardItems.forEach((item, index) => {
        const itemIndex = index + 1;
        item.id = "item" + itemIndex;
        item.querySelector("img").id = "preview" + itemIndex;
        item.querySelector('input[type="file"]').setAttribute("onchange", `previewImage(this, ${itemIndex})`);
    });
}