Hugging Face's logo

Spaces:
ChetanSaifsAi
/
ai-text-to-video-template
Running

App Files Community
ChetanSaifsAi commited on
Commit
66a4042
·
verified ·
1 Parent(s): 6800c48

updated html

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