Team Ai
Apppublic

carlosargueta/ScriptAI

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
index.html710 linesDownload Raw Back to root
1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <link href="/logo4.ico?v=2" rel="icon" type="image/x-icon"/>7    <link href="/logo4.ico?v=2" rel="shortcut icon" type="image/x-icon"/>8    <link href="/logo4.ico?v=2" rel="apple-touch-icon"/>9    <title>Script Generator - Create Viral Scripts with AI</title>10    <meta name="description" content="Transform your ideas into engaging short-form video scripts that capture attention and drive results. AI-powered script generation for content creators."/>11    <meta name="author" content="Script Generator"/>12    <meta property="og:title" content="Script Generator - Create Viral Scripts with AI"/>13    <meta property="og:description" content="Transform your ideas into engaging short-form video scripts that capture attention and drive results."/>14    <meta property="og:type" content="website"/>15    <meta property="og:image" content="/opengraph-image.png"/>16    <meta name="twitter:card" content="summary_large_image"/>17    <meta name="twitter:site" content="@scriptgen_ai"/>18    <meta name="twitter:image" content="/opengraph-image.png"/>19    <script async src="https://www.googletagmanager.com/gtag/js?id=G-FBM92G575F"></script>20    <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-FBM92G575F'); </script>21    <link rel="preconnect" href="https://fonts.googleapis.com"/>22    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>23    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>24    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>25    <style>26        :root {27            --primary-color: #6366f1;28            --secondary-color: #8b5cf6;29            --accent-color: #f59e0b;30            --dark-bg: #0f172a;31            --light-bg: #f8fafc;32            --text-primary: #1e293b;33            --text-secondary: #64748b;34            --border-color: #e2e8f0;35            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);36            --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);37            --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);38        }39 40        * {41            margin: 0;42            padding: 0;43            box-sizing: border-box;44        }45 46        body {47            font-family: 'Inter', system-ui, -apple-system, sans-serif;48            background: var(--light-bg);49            color: var(--text-primary);50            line-height: 1.6;51            overflow-x: hidden;52        }53 54        /* Animated background */55        body::before {56            content: '';57            position: fixed;58            top: 0;59            left: 0;60            width: 100%;61            height: 100%;62            background: 63                radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),64                radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),65                radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);66            z-index: -1;67            animation: float 20s ease-in-out infinite;68        }69 70        @keyframes float {71            0%, 100% { transform: translate(0, 0) rotate(0deg); }72            33% { transform: translate(30px, -30px) rotate(120deg); }73            66% { transform: translate(-20px, 20px) rotate(240deg); }74        }75 76        .container {77            max-width: 1200px;78            margin: 0 auto;79            padding: 0 1rem;80        }81 82        header {83            background: rgba(255, 255, 255, 0.9);84            backdrop-filter: blur(10px);85            border-bottom: 1px solid var(--border-color);86            position: sticky;87            top: 0;88            z-index: 100;89        }90 91        nav {92            display: flex;93            justify-content: space-between;94            align-items: center;95            padding: 1rem 0;96        }97 98        .logo {99            display: flex;100            align-items: center;101            gap: 0.5rem;102            font-weight: 800;103            font-size: 1.5rem;104            color: var(--primary-color);105        }106 107        .logo i {108            font-size: 2rem;109            background: var(--gradient);110            -webkit-background-clip: text;111            -webkit-text-fill-color: transparent;112            background-clip: text;113        }114 115        .hero {116            text-align: center;117            padding: 4rem 0;118            background: var(--gradient);119            color: white;120            margin-bottom: 2rem;121        }122 123        .hero h1 {124            font-size: clamp(2rem, 5vw, 3.5rem);125            font-weight: 900;126            margin-bottom: 1rem;127            animation: slideInFromTop 0.8s ease-out;128        }129 130        .hero p {131            font-size: 1.25rem;132            opacity: 0.9;133            animation: slideInFromBottom 0.8s ease-out;134        }135 136        @keyframes slideInFromTop {137            from { opacity: 0; transform: translateY(-30px); }138            to { opacity: 1; transform: translateY(0); }139        }140 141        @keyframes slideInFromBottom {142            from { opacity: 0; transform: translateY(30px); }143            to { opacity: 1; transform: translateY(0); }144        }145 146        .main-content {147            padding: 2rem 0;148        }149 150        .generator-card {151            background: white;152            border-radius: 1rem;153            box-shadow: var(--shadow-lg);154            padding: 2rem;155            margin-bottom: 2rem;156            animation: fadeIn 0.6s ease-out;157        }158 159        @keyframes fadeIn {160            from { opacity: 0; transform: translateY(20px); }161            to { opacity: 1; transform: translateY(0); }162        }163 164        .form-group {165            margin-bottom: 1.5rem;166        }167 168        label {169            display: block;170            font-weight: 600;171            margin-bottom: 0.5rem;172            color: var(--text-primary);173        }174 175        .input-wrapper {176            position: relative;177        }178 179        textarea, input, select {180            width: 100%;181            padding: 0.75rem 1rem;182            border: 2px solid var(--border-color);183            border-radius: 0.5rem;184            font-size: 1rem;185            transition: all 0.3s ease;186            background: white;187        }188 189        textarea:focus, input:focus, select:focus {190            outline: none;191            border-color: var(--primary-color);192            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);193        }194 195        textarea {196            resize: vertical;197            min-height: 100px;198        }199 200        .word-counter {201            position: absolute;202            right: 0.5rem;203            bottom: 0.5rem;204            font-size: 0.875rem;205            color: var(--text-secondary);206            background: white;207            padding: 0.25rem 0.5rem;208            border-radius: 0.25rem;209        }210 211        .tone-options {212            display: grid;213            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));214            gap: 0.5rem;215            margin-top: 0.5rem;216        }217 218        .tone-option {219            position: relative;220        }221 222        .tone-option input[type="radio"] {223            position: absolute;224            opacity: 0;225            width: 0;226            height: 0;227        }228 229        .tone-option label {230            display: block;231            padding: 0.75rem 1rem;232            text-align: center;233            background: var(--light-bg);234            border: 2px solid var(--border-color);235            border-radius: 0.5rem;236            cursor: pointer;237            transition: all 0.3s ease;238            margin-bottom: 0;239            font-weight: 500;240        }241 242        .tone-option input[type="radio"]:checked + label {243            background: var(--primary-color);244            color: white;245            border-color: var(--primary-color);246            transform: translateY(-2px);247            box-shadow: var(--shadow);248        }249 250        .keywords-section {251            display: grid;252            grid-template-columns: 1fr 1fr;253            gap: 1rem;254        }255 256        .keyword-tag {257            display: inline-block;258            background: var(--light-bg);259            color: var(--text-primary);260            padding: 0.5rem 1rem;261            border-radius: 2rem;262            margin: 0.25rem;263            font-size: 0.875rem;264            transition: all 0.3s ease;265            cursor: pointer;266        }267 268        .keyword-tag:hover {269            background: var(--primary-color);270            color: white;271            transform: translateY(-2px);272        }273 274        .btn {275            display: inline-block;276            padding: 0.75rem 2rem;277            background: var(--gradient);278            color: white;279            border: none;280            border-radius: 0.5rem;281            font-weight: 600;282            font-size: 1rem;283            cursor: pointer;284            transition: all 0.3s ease;285            text-align: center;286        }287 288        .btn:hover {289            transform: translateY(-2px);290            box-shadow: var(--shadow-lg);291        }292 293        .btn:disabled {294            opacity: 0.6;295            cursor: not-allowed;296            transform: none;297        }298 299        .btn-secondary {300            background: white;301            color: var(--primary-color);302            border: 2px solid var(--primary-color);303        }304 305        .script-output {306            background: white;307            border-radius: 1rem;308            box-shadow: var(--shadow-lg);309            padding: 2rem;310            margin-top: 2rem;311            display: none;312        }313 314        .script-output.show {315            display: block;316            animation: fadeIn 0.6s ease-out;317        }318 319        .script-header {320            display: flex;321            justify-content: space-between;322            align-items: center;323            margin-bottom: 1.5rem;324            padding-bottom: 1rem;325            border-bottom: 1px solid var(--border-color);326        }327 328        .script-content {329            background: var(--light-bg);330            border-radius: 0.5rem;331            padding: 1.5rem;332            line-height: 1.8;333            white-space: pre-wrap;334            position: relative;335        }336 337        .script-content[contenteditable="true"] {338            outline: 2px solid var(--primary-color);339            background: white;340        }341 342        .edit-controls {343            position: absolute;344            top: 0.5rem;345            right: 0.5rem;346            display: flex;347            gap: 0.5rem;348        }349 350        .edit-btn {351            padding: 0.5rem;352            background: white;353            border: 1px solid var(--border-color);354            border-radius: 0.25rem;355            cursor: pointer;356            transition: all 0.3s ease;357        }358 359        .edit-btn:hover {360            background: var(--light-bg);361            transform: scale(1.1);362        }363 364        .loading {365            display: inline-block;366            width: 20px;367            height: 20px;368            border: 3px solid rgba(255, 255, 255, 0.3);369            border-radius: 50%;370            border-top-color: white;371            animation: spin 1s ease-in-out infinite;372        }373 374        @keyframes spin {375            to { transform: rotate(360deg); }376        }377 378        .toast {379            position: fixed;380            top: 2rem;381            right: 2rem;382            background: var(--text-primary);383            color: white;384            padding: 1rem 2rem;385            border-radius: 0.5rem;386            box-shadow: var(--shadow-lg);387            transform: translateX(100%);388            transition: transform 0.3s ease;389        }390 391        .toast.show {392            transform: translateX(0);393        }394 395        @media (max-width: 768px) {396            .keywords-section {397                grid-template-columns: 1fr;398            }399            400            .tone-options {401                grid-template-columns: 1fr 1fr;402            }403            404            .hero {405                padding: 2rem 0;406            }407            408            .generator-card, .script-output {409                padding: 1rem;410            }411        }412 413        .tooltip {414            position: relative;415            display: inline-block;416        }417 418        .tooltip .tooltiptext {419            visibility: hidden;420            width: 200px;421            background-color: var(--text-primary);422            color: white;423            text-align: center;424            border-radius: 0.25rem;425            padding: 0.5rem;426            position: absolute;427            z-index: 1;428            bottom: 125%;429            left: 50%;430            margin-left: -100px;431            opacity: 0;432            transition: opacity 0.3s;433            font-size: 0.875rem;434        }435 436        .tooltip:hover .tooltiptext {437            visibility: visible;438            opacity: 1;439        }440    </style>441</head>442<body>443    <header>444        <nav class="container">445            <div class="logo">446                <i class="fas fa-magic"></i>447                ScriptGen AI448            </div>449            <div class="nav-links">450                <button class="btn btn-secondary" onclick="resetForm()">451                    <i class="fas fa-redo"></i> New Script452                </button>453            </div>454        </nav>455    </header>456 457    <section class="hero">458        <div class="container">459            <h1>Create Viral TikTok Scripts with AI</h1>460            <p>Transform your ideas into engaging short-form video scripts that capture attention and drive results</p>461        </div>462    </section>463 464    <main class="main-content">465        <div class="container">466            <div class="generator-card">467                <form id="scriptForm">468                    <div class="form-group">469                        <label for="prompt">Script Idea</label>470                        <div class="input-wrapper">471                            <textarea 472                                id="prompt" 473                                placeholder="Describe your video idea... (e.g., 'A life hack for organizing your desk in 30 seconds')" 474                                maxlength="500"475                            ></textarea>476                            <span class="word-counter"><span id="promptCount">0</span>/500</span>477                        </div>478                    </div>479 480                    <div class="form-group">481                        <label>Word Count</label>482                        <input type="range" id="wordCount" min="50" max="300" value="150" class="slider">483                        <div style="display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-secondary);">484                            <span>50 words</span>485                            <span id="wordCountValue">150 words</span>486                            <span>300 words</span>487                        </div>488                    </div>489 490                    <div class="form-group">491                        <label>Tone Style</label>492                        <div class="tone-options">493                            <div class="tone-option">494                                <input type="radio" id="formal" name="tone" value="formal">495                                <label for="formal">Formal</label>496                            </div>497                            <div class="tone-option">498                                <input type="radio" id="academic" name="tone" value="academic">499                                <label for="academic">Academic</label>500                            </div>501                            <div class="tone-option">502                                <input type="radio" id="creative" name="tone" value="creative" checked>503                                <label for="creative">Creative</label>504                            </div>505                            <div class="tone-option">506                                <input type="radio" id="promotional" name="tone" value="promotional">507                                <label for="promotional">Promotional</label>508                            </div>509                            <div class="tone-option">510                                <input type="radio" id="funny" name="tone" value="funny">511                                <label for="funny">Funny</label>512                            </div>513                        </div>514                    </div>515 516                    <div class="keywords-section">517                        <div class="form-group">518                            <label for="keywords">Keywords</label>519                            <input type="text" id="keywords" placeholder="Enter keywords separated by commas">520                            <div id="keywordsList" style="margin-top: 0.5rem;"></div>521                        </div>522 523                        <div class="form-group">524                            <label for="hashtags">Hashtags</label>525                            <input type="text" id="hashtags" placeholder="Enter hashtags for your video">526                            <div id="hashtagsList" style="margin-top: 0.5rem;"></div>527                        </div>528                    </div>529 530                    <button type="submit" class="btn" id="generateBtn">531                        <i class="fas fa-sparkles"></i> Generate Script532                    </button>533                </form>534            </div>535 536            <div class="script-output" id="scriptOutput">537                <div class="script-header">538                    <h2>Generated Script</h2>539                    <div>540                        <button class="btn btn-secondary" onclick="editScript()">541                            <i class="fas fa-edit"></i> Edit542                        </button>543                        <button class="btn" onclick="copyScript()">544                            <i class="fas fa-copy"></i> Copy545                        </button>546                    </div>547                </div>548                <div class="script-content" id="scriptContent">549                    Your generated script will appear here...550                </div>551            </div>552        </div>553    </main>554 555    <div class="toast" id="toast"></div>556 557    <script>558        // Word counter559        const promptTextarea = document.getElementById('prompt');560        const promptCount = document.getElementById('promptCount');561        562        promptTextarea.addEventListener('input', () => {563            promptCount.textContent = promptTextarea.value.length;564        });565 566        // Word count slider567        const wordCountSlider = document.getElementById('wordCount');568        const wordCountValue = document.getElementById('wordCountValue');569        570        wordCountSlider.addEventListener('input', () => {571            wordCountValue.textContent = wordCountSlider.value + ' words';572        });573 574        // Keywords and hashtags575        const keywordsInput = document.getElementById('keywords');576        const keywordsList = document.getElementById('keywordsList');577        const hashtagsInput = document.getElementById('hashtags');578        const hashtagsList = document.getElementById('hashtagsList');579 580        function addTag(text, container) {581            if (!text.trim()) return;582            583            const tags = text.split(',').map(tag => tag.trim()).filter(tag => tag);584            container.innerHTML = '';585            586            tags.forEach(tag => {587                const span = document.createElement('span');588                span.className = 'keyword-tag';589                span.textContent = tag;590                span.onclick = () => span.remove();591                container.appendChild(span);592            });593        }594 595        keywordsInput.addEventListener('input', (e) => {596            addTag(e.target.value, keywordsList);597        });598 599        hashtagsInput.addEventListener('input', (e) => {600            addTag(e.target.value, hashtagsList);601        });602 603        // Form submission604        const form = document.getElementById('scriptForm');605        const generateBtn = document.getElementById('generateBtn');606        const scriptOutput = document.getElementById('scriptOutput');607        const scriptContent = document.getElementById('scriptContent');608 609        form.addEventListener('submit', async (e) => {610            e.preventDefault();611            612            const prompt = promptTextarea.value;613            const wordCount = wordCountSlider.value;614            const tone = document.querySelector('input[name="tone"]:checked').value;615            const keywords = Array.from(keywordsList.children).map(tag => tag.textContent);616            const hashtags = Array.from(hashtagsList.children).map(tag => tag.textContent);617 618            if (!prompt.trim()) {619                showToast('Please enter a script idea');620                return;621            }622 623            generateBtn.innerHTML = '<span class="loading"></span> Generating...';624            generateBtn.disabled = true;625 626            // Simulate AI generation627            setTimeout(() => {628                const script = generateScript(prompt, wordCount, tone, keywords, hashtags);629                scriptContent.textContent = script;630                scriptOutput.classList.add('show');631                632                generateBtn.innerHTML = '<i class="fas fa-sparkles"></i> Generate Script';633                generateBtn.disabled = false;634                635                // Scroll to output636                scriptOutput.scrollIntoView({ behavior: 'smooth' });637            }, 2000);638        });639 640        function generateScript(prompt, wordCount, tone, keywords, hashtags) {641            const tones = {642                formal: "professional and sophisticated",643                academic: "educational and informative",644                creative: "imaginative and artistic",645                promotional: "persuasive and sales-focused",646                funny: "entertaining and humorous"647            };648 649            const hook = `🔥 ${prompt.split(' ').slice(0, 5).join(' ')}... but make it ${tones[tone]}!`;650            651            const body = `${prompt}. ${keywords.length > 0 ? `Key points: ${keywords.join(', ')}` : 'Here\'s what you need to know'}. This is going to blow your mind!`;652            653            const cta = hashtags.length > 0 ? 654                `Save this for later! Drop a ${hashtags[0]} in the comments if this helped!` :655                "Save this for later! Let me know in the comments!";656            657            const hashtagsText = hashtags.length > 0 ? 658                `\n\nHashtags: ${hashtags.map(tag => `#${tag}`).join(' ')}` : '';659            660            return `${hook}\n\n${body}\n\n${cta}${hashtagsText}`;661        }662 663        function editScript() {664            const isEditable = scriptContent.getAttribute('contenteditable') === 'true';665            if (isEditable) {666                scriptContent.setAttribute('contenteditable', 'false');667                showToast('Script saved!');668            } else {669                scriptContent.setAttribute('contenteditable', 'true');670                scriptContent.focus();671                showToast('You can now edit the script');672            }673        }674 675        function copyScript() {676            navigator.clipboard.writeText(scriptContent.textContent).then(() => {677                showToast('Script copied to clipboard!');678            });679        }680 681        function resetForm() {682            form.reset();683            promptCount.textContent = '0';684            keywordsList.innerHTML = '';685            hashtagsList.innerHTML = '';686            scriptOutput.classList.remove('show');687            showToast('Form reset successfully');688        }689 690        function showToast(message) {691            const toast = document.getElementById('toast');692            toast.textContent = message;693            toast.classList.add('show');694            setTimeout(() => {695                toast.classList.remove('show');696            }, 3000);697        }698 699        // Add smooth scrolling700        document.querySelectorAll('a[href^="#"]').forEach(anchor => {701            anchor.addEventListener('click', function (e) {702                e.preventDefault();703                document.querySelector(this.getAttribute('href')).scrollIntoView({704                    behavior: 'smooth'705                });706            });707        });708    </script>709</body>710</html>