index.html

<!DOCTYPE html>
<html lang="gu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultimate AI Video Director Pro</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }
        .container {
            max-width: 900px;
            width: 100%;
            background: #ffffff;
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }
        h1 { color: #ff0055; text-align: center; margin-bottom: 5px; }
        p.subtitle { text-align: center; color: #666; margin-bottom: 30px; }
        .layout { display: flex; gap: 30px; flex-wrap: wrap; }
        .input-panel { flex: 1; min-width: 300px; }
        .output-panel { flex: 1.5; min-width: 300px; }
        label { font-weight: bold; display: block; margin-top: 15px; margin-bottom: 5px; color: #333; }
        input, select, textarea {
            width: 100%; padding: 12px; border: 2px solid #e0e0e0;
            border-radius: 8px; box-sizing: border-box; font-size: 15px; background: #fff;
        }
        input:focus, select:focus { border-color: #ff0055; outline: none; }
        .radio-group { display: flex; gap: 15px; margin-top: 5px; }
        .radio-opt { display: flex; align-items: center; gap: 5px; cursor: pointer; }
        button {
            background-color: #ff0055; color: white; border: none; padding: 15px;
            font-size: 16px; font-weight: bold; border-radius: 8px; cursor: pointer;
            width: 100%; margin-top: 25px; transition: 0.3s; box-shadow: 0 4px 10px rgba(255,0,85,0.2);
        }
        button:hover { background-color: #e0004c; }
        button:disabled { background-color: #ccc; box-shadow: none; cursor: not-allowed; }
        #loading { display: none; text-align: center; margin-top: 20px; font-weight: bold; color: #ff0055; }
        #resultBox { display: none; margin-top: 20px; background: #fff0f5; padding: 20px; border-left: 5px solid #ff0055; border-radius: 8px; }
        textarea { resize: vertical; background: #fafafa; font-family: inherit; line-height: 1.6; }
    </style>
</head>
<body>

<div class="container">
    <h1>🚀 Ultimate AI Video Director Pro</h1>
    <p class="subtitle">મેળવો સ્ક્રિપ્ટ, એડિટિંગ હેક્સ, એસઈઓ ટેગ્સ, કવર આઈડિયા અને કમાણીની સ્ટ્રેટેજી બિલકુલ ફ્રી!</p>

    <div class="layout">
        <!-- Input Section -->
        <div class="input-panel">
            <label>💡 તમારો વીડિયો વિષય (Topic) લખો:</label>
            <input type="text" id="topic" placeholder="દા.ત., 3 Habits that destroy productivity...">

            <label>🌐 સ્ક્રિપ્ટની ભાષા:</label>
            <select id="language">
                <option value="Gujarati">Gujarati (ગુજરાતી)</option>
                <option value="Hindi">Hindi (હિન્દી)</option>
                <option value="English">English (અંગ્રેજી)</option>
            </select>

            <label>🎭 વીડિયોનો મૂડ/ટોન:</label>
            <select id="tone">
                <option value="Energetic">Energetic (ઉત્સાહી)</option>
                <option value="Professional">Professional (પ્રોફેશનલ)</option>
                <option value="Suspense">Suspense/Mystery (સસ્પેન્સ)</option>
                <option value="Humorous">Humorous (રમુજી)</option>
            </select>

            <label>⏱️ વીડિયોનો સમયગાળો:</label>
            <div class="radio-group">
                <label class="radio-opt"><input type="radio" name="duration" value="15 Seconds"> 15s</label>
                <label class="radio-opt"><input type="radio" name="duration" value="30 Seconds" checked> 30s</label>
                <label class="radio-opt"><input type="radio" name="duration" value="60 Seconds"> 60s</label>
            </div>

            <button onclick="generateUltimatePlan()" id="genBtn">Generate Viral Blueprint 🚀</button>
        </div>

        <!-- Output Section -->
        <div class="output-panel">
            <div id="loading">⏳ AI સ્ક્રિપ્ટ અને 8 પ્રો ફીચર્સ તૈયાર કરી રહ્યું છે... ૧૦ સેકન્ડ રાહ જુઓ...</div>
            
            <div id="resultBox">
                <label style="margin-top:0; color:#ff0055; font-size:18px;">🔥 તમારો ઓલ-ઇન-વન વીડિયો સક્સેસ પ્લાન:</label>
                <textarea id="outputField" rows="18" readonly></textarea>
            </div>
        </div>
    </div>
</div>

<script>
async function generateUltimatePlan() {
    const topic = document.getElementById('topic').value;
    const language = document.getElementById('language').value;
    const tone = document.getElementById('tone').value;
    const duration = document.querySelector('input[name="duration"]:checked').value;
    
    const btn = document.getElementById('genBtn');
    const loading = document.getElementById('loading');
    const resultBox = document.getElementById('resultBox');
    const outputField = document.getElementById('outputField');

    if (!topic.strip ? !topic.trim() : !topic.trim()) {
        alert("કૃપા કરીને પહેલા કોઈ વિષય લખો!");
        return;
    }

    btn.disabled = true;
    loading.style.display = "block";
    resultBox.style.display = "none";

    // ૧૨+ પ્રો ફીચર્સ વાળો એડવાન્સ સુપર પ્રોમ્પ્ટ
    const promptMessage = `Act as a world-class social media director. Create a detailed viral short video blueprint for YouTube Shorts/Reels on: "${topic}". Language: ${language}. Tone: ${tone}. Duration: ${duration}. Provide exactly these 9 sections: 1. MULTI-LANGUAGE SCRIPT WITH 3 HOOKS AND VISUAL DIRECTONS, 2. TEXT-ON-SCREEN CAPTIONS, 3. RETENTION HACKS & EDITING TIMELINE, 4. VOICEOVER PACE GUIDE, 5. TRENDING AUDIO & SOUND FX, 6. THUMBNAIL COVER CONCEPT, 7. MONETIZATION IDEA, 8. REPURPOSING STRATEGY, 9. HIGH-ENGAGEMENT CTA AND 5 SEO TAGS.`;

    try {
        // હગિંગ ફેસની ફ્રી પબ્લિક ઇન્ફરન્સ API લિંક
        const response = await fetch("https://huggingface.co", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ inputs: promptMessage })
        });

        const data = await response.json();
        
        if (data && data[0] && data[0].generated_text) {
            outputField.value = data[0].generated_text;
            resultBox.style.display = "block";
        } else if (data && data.generated_text) {
            outputField.value = data.generated_text;
            resultBox.style.display = "block";
        } else {
            outputField.value = "માફ કરશો, AI મોડલ પર અત્યારે ટ્રાફિક વધારે છે. કૃપા કરીને ૧૦ સેકન્ડ પછી ફરી ટ્રાય કરો.";
            resultBox.style.display = "block";
        }
    } catch (error) {
        console.error(error);
        alert("કંઈક કનેક્શન પ્રોબ્લેમ થયો છે, ફરી ટ્રાય કરો.");
    } finally {
        btn.disabled = false;
        loading.style.display = "none";
    }
}
</script>

</body>
</html>