OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📁 audio	-	05/27/2025 11:39:08 AM	rwxrwxrwx
📄 export.php	7.03 KB	05/27/2025 08:33:14 AM	rw-r--r--
📁 files	-	01/20/2025 01:42:22 PM	rwxrwxrwx
📄 index.php	17.01 KB	05/27/2025 11:38:13 AM	rw-r--r--
📄 script.js	6.46 KB	01/20/2025 05:12:16 PM	rw-r--r--
📄 styles.css	1.01 KB	01/21/2025 10:07:14 AM	rw-r--r--
📄 video_process.php	17.44 KB	05/27/2025 11:38:14 AM	rwxrwxrwx
📄 zexport.php	3.56 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 zindex.php	4.48 KB	05/19/2025 10:07:19 AM	rw-r--r--
📄 zscript.js	5.78 KB	01/20/2025 11:47:19 AM	rw-r--r--

Editing: index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Video Generator</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .main-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            margin: 20px auto;
            max-width: 1200px;
        }
        .header-section {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            border-radius: 20px 20px 0 0;
            text-align: center;
        }
        .form-section {
            padding: 40px;
        }
        .upload-area {
            border: 3px dashed #007bff;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            background: #f8f9ff;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .upload-area:hover {
            border-color: #0056b3;
            background: #e6f3ff;
        }
        .upload-area.dragover {
            border-color: #28a745;
            background: #e6ffe6;
        }
        .image-preview-card {
            border: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-radius: 15px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .image-preview-card:hover {
            transform: translateY(-5px);
        }
        .audio-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            margin: 20px 0;
            border-left: 5px solid #28a745;
        }
        .audio-upload-area {
            border: 2px dashed #28a745;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            background: #f0fff4;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .audio-upload-area:hover {
            background: #e6ffe6;
            border-color: #20c997;
        }
        .btn-generate {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            border: none;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: bold;
            border-radius: 50px;
            color: white;
            box-shadow: 0 10px 20px rgba(238, 90, 36, 0.3);
            transition: all 0.3s ease;
        }
        .btn-generate:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(238, 90, 36, 0.4);
            color: white;
        }
        .feature-badge {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            display: inline-block;
            margin: 5px;
        }
        .form-control:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
            border-color: #007bff;
        }
        .progress-indicator {
            display: none;
            text-align: center;
            padding: 20px;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="main-container">
            
            <div class="header-section">
                <h1><i class="fas fa-video"></i>Video Generator</h1>
                
            </div>

<div class="form-section">
                <form method="post" enctype="multipart/form-data" id="videoGeneratorForm" action="video_process.php">
                    
                    
                    <div class="mb-5">
                        <h3><i class="fas fa-images text-primary"></i> Upload Images</h3>
                        <p class="text-muted">Select multiple images to create your video slideshow</p>
                        
                        <div class="upload-area" id="imageUploadArea">
                            <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                            <h5>Drag & Drop Images Here</h5>
                            <p class="text-muted">or click to browse</p>
                            <input type="file" id="images" name="images[]" multiple accept="image/*" style="display: none;" required>
                            <button type="button" class="btn btn-primary" onclick="document.getElementById('images').click()">
                                <i class="fas fa-folder-open"></i> Browse Images
                            </button>
                        </div>
                        
                        <div id="imagePreview" class="row mt-4"></div>
                    </div>

<div id="captionSection" style="display: none;">
                        <h3><i class="fas fa-comments text-success"></i> Add Captions & Timing</h3>
                        <p class="text-muted">Add voice-over text and set display duration for each image</p>
                        <div id="captionContainer"></div>
                    </div>

<div class="audio-section">
                        <h3><i class="fas fa-music text-success"></i> Audio Options</h3>
                        <p class="text-muted">Enhance your video with background music or additional audio</p>
                        
                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="enableAdditionalAudio" name="enable_additional_audio">
                            <label class="form-check-label" for="enableAdditionalAudio">
                                <strong>Add Background Music or Additional Audio</strong>
                            </label>
                        </div>

<div id="audioUploadSection" style="display: none;">
                            <div class="audio-upload-area" id="audioUploadArea">
                                <i class="fas fa-music fa-2x text-success mb-2"></i>
                                <h6>Upload Audio File</h6>
                                <p class="text-muted small">MP3, WAV, OGG, M4A (Max: 10MB)</p>
                                <input type="file" id="additional_audio" name="additional_audio" accept=".mp3,.wav,.ogg,.m4a,audio/*" style="display: none;">
                                <button type="button" class="btn btn-success btn-sm" onclick="document.getElementById('additional_audio').click()">
                                    <i class="fas fa-upload"></i> Choose Audio
                                </button>
                            </div>
                            
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <label for="audio_order" class="font-weight-bold">Audio Playback Order:</label>
                                    <select class="form-control" id="audio_order" name="audio_order">
                                        <option value="tts_first">Voice-over first, then background audio</option>
                                        <option value="uploaded_first">Background audio first, then voice-over</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="font-weight-bold">Audio Preview:</label>
                                    <div id="audioPreview" class="mt-2"></div>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="text-center mt-5">
                        <button type="submit" class="btn btn-generate btn-lg">
                            <i class="fas fa-magic"></i> Generate Video
                        </button>
                    </div>

<div class="progress-indicator" id="progressIndicator">
                        <div class="spinner"></div>
                        <h5>Generating your video...</h5>
                        <p class="text-muted">This may take a few minutes depending on the number of images.</p>
                    </div>
                </form>
            </div>
        </div>
    </div>

// Image upload area click handler
            $('#imageUploadArea').click(function() {
                $('#images').click();
            });

// Audio upload area click handler
            $('#audioUploadArea').click(function() {
                $('#additional_audio').click();
            });

// Drag and drop functionality for images
            $('#imageUploadArea').on('dragover', function(e) {
                e.preventDefault();
                $(this).addClass('dragover');
            }).on('dragleave', function(e) {
                e.preventDefault();
                $(this).removeClass('dragover');
            }).on('drop', function(e) {
                e.preventDefault();
                $(this).removeClass('dragover');
                
                const files = e.originalEvent.dataTransfer.files;
                const fileInput = document.getElementById('images');
                fileInput.files = files;
                handleImageSelection(files);
            });

// Handle image selection
            $('#images').change(function() {
                handleImageSelection(this.files);
            });

// Handle audio selection
            $('#additional_audio').change(function() {
                handleAudioSelection(this.files[0]);
            });

function handleAudioSelection(file) {
                if (file) {
                    const audioPreview = `
                        <audio controls class="w-100">
                            <source src="${URL.createObjectURL(file)}" type="${file.type}">
                            Your browser does not support the audio element.
                        </audio>
                        <small class="text-muted d-block mt-1">${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)</small>
                    `;
                    $('#audioPreview').html(audioPreview);
                }
            }

// Form submission handler
            $('#videoGeneratorForm').submit(function(e) {
                // Validate form
                if (imageFiles.length === 0) {
                    e.preventDefault();
                    alert('Please select at least one image.');
                    return false;
                }

// Check if captions are filled
                let emptyCaptions = 0;
                $('textarea[name^="captions"]').each(function() {
                    if ($(this).val().trim() === '') {
                        emptyCaptions++;
                    }
                });

if (emptyCaptions > 0) {
                    if (!confirm(`${emptyCaptions} image(s) don't have captions. Continue anyway?`)) {
                        e.preventDefault();
                        return false;
                    }
                }

// Show progress indicator
                $('#progressIndicator').slideDown();
                $('.btn-generate').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Generating...');
            });

// Add some animations
            setTimeout(function() {
                $('.main-container').addClass('animate__animated animate__fadeInUp');
            }, 100);
        });
    </script>
</body>
</html>