|
<!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> |
|
|
|
|
|
<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 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> |
