Hugging Face's logo

Spaces:
48leewsypc
/
Website
No application file

App Files Community
48leewsypc commited on
Commit
6f36e81
·
verified ·
1 Parent(s): 8a86c2c

Create Index.html

Browse files
Files changed (1) hide show
  1. Index.html +118 -0
Index.html ADDED
@@ -0,0 +1,118 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <title>Video Downloader</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ max-width: 800px;
11
+ margin: 0 auto;
12
+ padding: 20px;
13
+ background-color: #f5f5f5;
14
+ }
15
+ .container {
16
+ background-color: white;
17
+ padding: 20px;
18
+ border-radius: 10px;
19
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
20
+ }
21
+ h1 {
22
+ color: #333;
23
+ text-align: center;
24
+ }
25
+ .form-group {
26
+ margin-bottom: 20px;
27
+ }
28
+ input[type="url"] {
29
+ width: 100%;
30
+ padding: 10px;
31
+ border: 1px solid #ddd;
32
+ border-radius: 5px;
33
+ font-size: 16px;
34
+ }
35
+ button {
36
+ background-color: #4CAF50;
37
+ color: white;
38
+ padding: 10px 20px;
39
+ border: none;
40
+ border-radius: 5px;
41
+ cursor: pointer;
42
+ font-size: 16px;
43
+ width: 100%;
44
+ }
45
+ button:hover {
46
+ background-color: #45a049;
47
+ }
48
+ #status {
49
+ margin-top: 20px;
50
+ padding: 10px;
51
+ border-radius: 5px;
52
+ text-align: center;
53
+ }
54
+ .error {
55
+ background-color: #ffebee;
56
+ color: #c62828;
57
+ }
58
+ .success {
59
+ background-color: #e8f5e9;
60
+ color: #2e7d32;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <div class="container">
66
+ <h1>Video Downloader</h1>
67
+ <form id="downloadForm">
68
+ <div class="form-group">
69
+ <input type="url" id="url" placeholder="Enter YouTube, Instagram, or TikTok URL" required>
70
+ </div>
71
+ <button type="submit">Download</button>
72
+ </form>
73
+ <div id="status"></div>
74
+ </div>
75
+
76
+ <script>
77
+ document.getElementById('downloadForm').addEventListener('submit', async (e) => {
78
+ e.preventDefault();
79
+ const status = document.getElementById('status');
80
+ const url = document.getElementById('url').value;
81
+
82
+ status.className = '';
83
+ status.textContent = 'Downloading...';
84
+
85
+ try {
86
+ const response = await fetch('/download', {
87
+ method: 'POST',
88
+ headers: {
89
+ 'Content-Type': 'application/x-www-form-urlencoded',
90
+ },
91
+ body: `url=${encodeURIComponent(url)}`
92
+ });
93
+
94
+ if (response.ok) {
95
+ const blob = await response.blob();
96
+ const downloadUrl = window.URL.createObjectURL(blob);
97
+ const a = document.createElement('a');
98
+ a.href = downloadUrl;
99
+ a.download = 'video.mp4';
100
+ document.body.appendChild(a);
101
+ a.click();
102
+ window.URL.revokeObjectURL(downloadUrl);
103
+ document.body.removeChild(a);
104
+
105
+ status.className = 'success';
106
+ status.textContent = 'Download completed successfully!';
107
+ } else {
108
+ const error = await response.json();
109
+ throw new Error(error.error || 'Download failed');
110
+ }
111
+ } catch (error) {
112
+ status.className = 'error';
113
+ status.textContent = `Error: ${error.message}`;
114
+ }
115
+ });
116
+ </script>
117
+ </body>
118
+ </html>