File size: 5,636 Bytes
66a4042 37d7c88 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Transform text into engaging videos with AI - Try our powerful text-to-video conversion tool">
<meta name="keywords" content="AI text to video, video generation, content creation, artificial intelligence">
<title>SAIFS AI - Text to Video Converter</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div id="app">
<header class="site-header">
<a href="https://saifs.ai/text-to-video" target="_blank" class="logo-link">
<div class="logo-icon">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="8" fill="#6366f1"/>
<path d="M12 14.5C12 13.1193 13.1193 12 14.5 12H25.5C26.8807 12 28 13.1193 28 14.5V25.5C28 26.8807 26.8807 28 25.5 28H14.5C13.1193 28 12 26.8807 12 25.5V14.5Z" fill="white"/>
<path d="M20 16L16 18.5L20 21L24 18.5L20 16Z" fill="#6366f1"/>
<path d="M16 22.5L20 25L24 22.5V18.5L20 21L16 18.5V22.5Z" fill="#6366f1"/>
</svg>
</div>
<span class="logo-text">SAIFS AI</span>
</a>
<a href="https://saifs.ai/text-to-video" target="_blank" class="website-link">Visit Our Website</a>
</header>
<main class="main-container">
<h1 class="main-title">Text to Video Generator</h1>
<p class="subtitle">Create stunning videos from your descriptions in seconds</p>
<div class="video-generator">
<div class="input-section">
<div class="text-input-container">
<div class="input-header">
<div class="input-title">Describe your video</div>
<button class="enhance-btn" @click="enhanceText">
<i class="fas fa-wand-magic-sparkles"></i>
Enhance
</button>
</div>
<textarea
v-model="videoDescription"
placeholder="Example: A serene mountain landscape at sunset, with clouds drifting over snow-capped peaks..."
@input="updateCharCount"
class="video-input"
></textarea>
<div class="char-count">{{ charCount }}/1000</div>
</div>
<div class="style-buttons">
<button
v-for="style in videoStyles"
:key="style.id"
:class="['style-btn', { active: selectedStyle === style.id }]"
@click="selectStyle(style.id)"
>
{{ style.name }}
</button>
</div>
<button class="generate-btn" @click="generateVideo">
<i class="fas fa-wand-magic-sparkles"></i>
Generate Video
</button>
</div>
<div class="preview-section">
<div class="video-preview">
<i class="fas fa-video preview-icon"></i>
<p>Your generated video will appear here</p>
</div>
</div>
</div>
</main>
<!-- Pro Upgrade Modal -->
<div v-if="showProModal" class="modal-overlay" @click="closeProModal"></div>
<div v-if="showProModal" class="upgrade-modal">
<h2>Upgrade to Pro</h2>
<p>Get access to advanced features and create unlimited videos</p>
<ul class="features-list">
<li><i class="fas fa-check"></i> Unlimited video generations</li>
<li><i class="fas fa-check"></i> Higher resolution output</li>
<li><i class="fas fa-check"></i> Priority processing</li>
<li><i class="fas fa-check"></i> Advanced customization options</li>
<li><i class="fas fa-check"></i> Commercial usage rights</li>
</ul>
<div class="modal-buttons">
<a href="https://saifs.ai/text-to-video" target="_blank" class="upgrade-btn">
Upgrade to Pro
</a>
<button class="continue-free-btn" @click="closeProModal">
Continue with Free
</button>
</div>
</div>
<!-- Footer -->
<footer class="site-footer">
<div class="footer-content">
Created with <i class="fas fa-heart"></i> by
<a href="https://saifs.ai/text-to-video" target="_blank" class="footer-link">SAIFS AI</a>
</div>
<div class="footer-subtext">
Experience more AI solutions at
<a href="https://saifs.ai/text-to-video" target="_blank" class="footer-link">saifs.ai/text-to-video</a>
</div>
</footer>
</div>
<script src="app.js"></script>
</body>
</html> |