|
<!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>AI Text to Video Converter | Transform Text to Engaging Videos</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">
|
|
<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" class="upgrade-btn">
|
|
Upgrade to Pro
|
|
</a>
|
|
<button class="continue-free-btn" @click="closeProModal">
|
|
Continue with Free
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |
