carlosargueta/ScriptAI
0
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>