<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ממיר קבצים מתקדם לקובץ HTML עצמאי</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', system-ui, sans-serif;
background: #0f172a;
color: #f8fafc;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-6">

<div class="bg-slate-800/70 backdrop-blur-md border border-slate-700/50 p-8 rounded-2xl shadow-2xl max-w-2xl w-full text-center">
    <h2 class="text-2xl font-bold text-sky-400 mb-2">🛠️ ממיר קבצים כללי לקובץ HTML עצמאי</h2>
    <p class="text-slate-400 text-sm mb-6">בחר או גרור את סוג הקובץ הרצוי לאזור הייעודי לו, והורד אותו כקובץ אינטרנט עצמאי שרץ לחלוטין אצלך.</p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        
        <!-- תמונה -->
        <div class="bg-slate-900/40 border border-slate-700/60 rounded-xl p-4 flex flex-col items-center">
            <h3 class="text-sky-300 font-semibold mb-2">🖼️ תמונה</h3>
            <div id="dropZoneImage" class="w-full border-2 border-dashed border-sky-400/40 rounded-lg p-4 cursor-pointer transition-all hover:border-sky-400 hover:bg-sky-400/5 text-center" onclick="document.getElementById('fileInputImage').click()">
                <span class="text-xs text-slate-300">גרור תמונה לכאן או לחץ</span>
                <input type="file" id="fileInputImage" accept="image/*" class="hidden" onchange="handleFileSelect(event, 'image')">
            </div>
            <div id="previewImage" class="mt-3 hidden w-full">
                <p id="infoImage" class="text-xs text-sky-200 mb-2 truncate"></p>
                <button class="w-full bg-sky-500 hover:bg-sky-600 text-white text-xs font-bold py-2 px-3 rounded-lg shadow transition" onclick="downloadFile('image')">📥 הורד HTML</button>
            </div>
        </div>

        <!-- וידאו -->
        <div class="bg-slate-900/40 border border-slate-700/60 rounded-xl p-4 flex flex-col items-center">
            <h3 class="text-sky-300 font-semibold mb-2">🎬 וידאו (MP4)</h3>
            <div id="dropZoneVideo" class="w-full border-2 border-dashed border-sky-400/40 rounded-lg p-4 cursor-pointer transition-all hover:border-sky-400 hover:bg-sky-400/5 text-center" onclick="document.getElementById('fileInputVideo').click()">
                <span class="text-xs text-slate-300">גרור וידאו לכאן או לחץ</span>
                <input type="file" id="fileInputVideo" accept="video/mp4,video/*" class="hidden" onchange="handleFileSelect(event, 'video')">
            </div>
            <div id="previewVideo" class="mt-3 hidden w-full">
                <p id="infoVideo" class="text-xs text-sky-200 mb-2 truncate"></p>
                <button class="w-full bg-sky-500 hover:bg-sky-600 text-white text-xs font-bold py-2 px-3 rounded-lg shadow transition" onclick="downloadFile('video')">📥 הורד HTML</button>
            </div>
        </div>

        <!-- אודיו -->
        <div class="bg-slate-900/40 border border-slate-700/60 rounded-xl p-4 flex flex-col items-center">
            <h3 class="text-sky-300 font-semibold mb-2">🎵 אודיו (שמע)</h3>
            <div id="dropZoneAudio" class="w-full border-2 border-dashed border-sky-400/40 rounded-lg p-4 cursor-pointer transition-all hover:border-sky-400 hover:bg-sky-400/5 text-center" onclick="document.getElementById('fileInputAudio').click()">
                <span class="text-xs text-slate-300">גרור שמע לכאן או לחץ</span>
                <input type="file" id="fileInputAudio" accept="audio/*" class="hidden" onchange="handleFileSelect(event, 'audio')">
            </div>
            <div id="previewAudio" class="mt-3 hidden w-full">
                <p id="infoAudio" class="text-xs text-sky-200 mb-2 truncate"></p>
                <button class="w-full bg-sky-500 hover:bg-sky-600 text-white text-xs font-bold py-2 px-3 rounded-lg shadow transition" onclick="downloadFile('audio')">📥 הורד HTML</button>
            </div>
        </div>

        <!-- GIF -->
        <div class="bg-slate-900/40 border border-slate-700/60 rounded-xl p-4 flex flex-col items-center">
            <h3 class="text-sky-300 font-semibold mb-2">🎞️ קובץ GIF</h3>
            <div id="dropZoneGif" class="w-full border-2 border-dashed border-sky-400/40 rounded-lg p-4 cursor-pointer transition-all hover:border-sky-400 hover:bg-sky-400/5 text-center" onclick="document.getElementById('fileInputGif').click()">
                <span class="text-xs text-slate-300">גרור GIF לכאן או לחץ</span>
                <input type="file" id="fileInputGif" accept="image/gif" class="hidden" onchange="handleFileSelect(event, 'gif')">
            </div>
            <div id="previewGif" class="mt-3 hidden w-full">
                <p id="infoGif" class="text-xs text-sky-200 mb-2 truncate"></p>
                <button class="w-full bg-sky-500 hover:bg-sky-600 text-white text-xs font-bold py-2 px-3 rounded-lg shadow transition" onclick="downloadFile('gif')">📥 הורד HTML</button>
            </div>
        </div>

    </div>
</div>

<script>
    const fileData = {
        image: { base64: '', name: '' },
        video: { base64: '', name: '' },
        audio: { base64: '', name: '' },
        gif: { base64: '', name: '' }
    };

    // טיפול בגרירה ושחרור עבור כל האזורים
    ['image', 'video', 'audio', 'gif'].forEach(type => {
        const dropZone = document.getElementById(`dropZone${type.charAt(0).toUpperCase() + type.slice(1)}`);
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.add('border-sky-400', 'bg-sky-400/10'); }, false);
        });
        ['dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, (e) => { e.preventDefault(); dropZone.classList.remove('border-sky-400', 'bg-sky-400/10'); }, false);
        });
        
        dropZone.addEventListener('drop', (e) => {
            const file = e.dataTransfer.files[0];
            if (file) processFile(file, type);
        });
    });

    function handleFileSelect(e, type) {
        const file = e.target.files[0];
        if (file) processFile(file, type);
    }

    function processFile(file, type) {
        const reader = new FileReader();
        reader.onload = function(e) {
            fileData[type].base64 = e.target.result;
            fileData[type].name = file.name;

            document.getElementById(`preview${type.charAt(0).toUpperCase() + type.slice(1)}`).classList.remove('hidden');
            document.getElementById(`info${type.charAt(0).toUpperCase() + type.slice(1)}`).innerHTML = `<b>${file.name}</b> (${(file.size / (1024*1024)).toFixed(2)} MB)`;
        };
        reader.readAsDataURL(file);
    }

    function downloadFile(type) {
        const data = fileData[type];
        if (!data.base64) return;

        let bodyContent = '';
        let fileTitle = '';

        if (type === 'image' || type === 'gif') {
            fileTitle = type === 'gif' ? `קובץ GIF מוטמע - ${data.name}` : `תמונה מוטמעת - ${data.name}`;
            bodyContent = `<div style="background:#1e293b; padding:25px; border-radius:16px; text-align:center;"><img src="${data.base64}" alt="${data.name}" style="max-width:100%; max-height:85vh; border-radius:8px;"></div>`;
        } else if (type === 'video') {
            fileTitle = `נגן וידאו מוטמע - ${data.name}`;
            bodyContent = `<div style="background:#1e293b; padding:25px; border-radius:16px; text-align:center; max-width:600px; width:100%;"><h1 style="color:#38bdf8; margin-bottom:15px; font-size:1.2rem;">🎬 ${data.name}</h1><video controls style="width:100%; max-height:75vh; border-radius:8px; background:black;"><source src="${data.base64}" type="video/mp4">הדפדפן שלך אינו תומך בניגון וידאו.</video></div>`;
        } else if (type === 'audio') {
            fileTitle = `נגן אודיו מוטמע - ${data.name}`;
            bodyContent = `<div style="background:#1e293b; padding:25px; border-radius:16px; text-align:center; max-width:400px; width:100%;"><h1 style="color:#38bdf8; margin-bottom:15px; font-size:1.2rem;">🎵 ${data.name}</h1><audio controls autoplay style="width:100%;"><source src="${data.base64}" type="audio/mp3">הדפדפן שלך אינו תומך בניגון שמע.</audio></div>`;
        }

        const standaloneContent = `<!DOCTYPE html>

<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${fileTitle}</title>
<style>
body { margin:0; padding:20px; background:#0b0f19; display:flex; justify-content:center; align-items:center; min-height:100vh; font-family:sans-serif; color:#fff; }
</style>
</head>
<body>
${bodyContent}
</body>
</html>`;

        const blob = new Blob([standaloneContent], { type: 'text/html;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `standalone_${type}_${data.name.replace(/\.[^/.]+$/, "")}.html`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }
</script>

</body>
</html>