Hugging Face's logo

Spaces:
Doubleupai
/
Videoretro.ai
No application file

App Files Community
2
Doubleupai commited on
Commit
709c85a
•
1 Parent(s): 0b324eb

Create Wghhd.html

Browse files
Files changed (1) hide show
  1. Wghhd.html +103 -0
Wghhd.html ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Retro Style Video Generator
2
+
3
+ <!DOCTYPE html>
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="UTF-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Retro Style Video Generator</title>
9
+ <style>
10
+ body {
11
+ font-family: 'Arial', sans-serif;
12
+ background-color: #f0f0f0;
13
+ text-align: center;
14
+ }
15
+ .container {
16
+ margin: 50px auto;
17
+ width: 80%;
18
+ background-color: #fff;
19
+ padding: 20px;
20
+ border-radius: 10px;
21
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22
+ }
23
+ button {
24
+ padding: 10px 20px;
25
+ margin: 10px;
26
+ border: none;
27
+ border-radius: 5px;
28
+ background-color: #007BFF;
29
+ color: white;
30
+ cursor: pointer;
31
+ }
32
+ button:hover {
33
+ background-color: #0056b3;
34
+ }
35
+ .loading {
36
+ display: none;
37
+ margin-top: 20px;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body>
42
+
43
+ <div class="container">
44
+ <h1>Retro Style Video Generator</h1>
45
+ <div>
46
+ <button id="textButton">Text in Video</button>
47
+ <button id="imageButton">Image in Video</button>
48
+ </div>
49
+
50
+ <div id="textInput" style="display:none;">
51
+ <input type="text" id="textPrompt" placeholder="Enter your text prompt">
52
+ <button id="goText">Go</button>
53
+ <div class="loading" id="loadingText">Loading...</div>
54
+ <video id="videoText" controls style="display:none;">
55
+ <source src="your-video-source.mp4" type="video/mp4">
56
+ Your browser does not support the video tag.
57
+ </video>
58
+ </div>
59
+
60
+ <div id="imageInput" style="display:none;">
61
+ <input type="file" id="imageUpload" accept="image/*">
62
+ <input type="text" id="imagePrompt" placeholder="Enter your image prompt">
63
+ <button id="goImage">Go</button>
64
+ <div class="loading" id="loadingImage">Loading...</div>
65
+ <video id="videoImage" controls style="display:none;">
66
+ <source src="your-video-source.mp4" type="video/mp4">
67
+ Your browser does not support the video tag.
68
+ </video>
69
+ </div>
70
+ </div>
71
+
72
+ <script>
73
+ document.getElementById('textButton').onclick = function() {
74
+ document.getElementById('textInput').style.display = 'block';
75
+ document.getElementById('imageInput').style.display = 'none';
76
+ };
77
+
78
+ document.getElementById('imageButton').onclick = function() {
79
+ document.getElementById('imageInput').style.display = 'block';
80
+ document.getElementById('textInput').style.display = 'none';
81
+ };
82
+
83
+ document.getElementById('goText').onclick = function() {
84
+ document.getElementById('loadingText').style.display = 'block';
85
+ // Simulate loading
86
+ setTimeout(function() {
87
+ document.getElementById('loadingText').style.display = 'none';
88
+ document.getElementById('videoText').style.display = 'block';
89
+ }, 2000);
90
+ };
91
+
92
+ document.getElementById('goImage').onclick = function() {
93
+ document.getElementById('loadingImage').style.display = 'block';
94
+ // Simulate loading
95
+ setTimeout(function() {
96
+ document.getElementById('loadingImage').style.display = 'none';
97
+ document.getElementById('videoImage').style.display = 'block';
98
+ }, 2000);
99
+ };
100
+ </script>
101
+
102
+ </body>
103
+ </html>