Hugging Face's logo

Spaces:
AnkhLP
/
slicestream-video-vibes-unleashed
Running

App Files Community
AnkhLP commited on
Commit
a115b6b
·
verified ·
1 Parent(s): f0f5bc0

create a site like https://www.slicetube.io/ where a user can input a youtube video URL and a start and ending time for the video clip. once processed the video clip can be downloaded in mp4 format

Browse files
Files changed (2) hide show
  1. clip.html +164 -0
  2. index.html +8 -8
clip.html ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SliceStream - Clip Videos</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ dark: '#1e293b',
17
+ light: '#f8fafc'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <script src="https://unpkg.com/feather-icons"></script>
24
+ <style>
25
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
26
+ body {
27
+ font-family: 'Inter', sans-serif;
28
+ background-color: #f8fafc;
29
+ }
30
+ .nav-blur {
31
+ backdrop-filter: blur(10px);
32
+ background-color: rgba(255, 255, 255, 0.8);
33
+ }
34
+ .dark .nav-blur {
35
+ background-color: rgba(30, 41, 59, 0.8);
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-light text-dark dark:bg-dark dark:text-light transition-colors duration-300">
40
+ <!-- Navigation Bar -->
41
+ <nav class="nav-blur fixed top-0 left-0 right-0 z-50 border-b border-gray-200 dark:border-gray-700">
42
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
43
+ <div class="flex items-center space-x-4">
44
+ <div class="flex items-center">
45
+ <i data-feather="play" class="text-primary w-6 h-6"></i>
46
+ <span class="ml-2 text-xl font-bold">SliceStream</span>
47
+ </div>
48
+ <div class="hidden md:flex space-x-6">
49
+ <a href="index.html" class="hover:text-primary transition">Home</a>
50
+ <a href="clip.html" class="text-primary font-medium">Clip Videos</a>
51
+ <a href="#" class="hover:text-primary transition">Subscriptions</a>
52
+ <a href="#" class="hover:text-primary transition">Library</a>
53
+ </div>
54
+ </div>
55
+ <div class="flex items-center space-x-4">
56
+ <button class="md:hidden" id="mobile-menu-button">
57
+ <i data-feather="menu"></i>
58
+ </button>
59
+ <div class="hidden md:flex items-center space-x-3">
60
+ <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
61
+ <i data-feather="user"></i>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </nav>
67
+
68
+ <!-- Main Content -->
69
+ <main class="pt-20 pb-12">
70
+ <div class="container mx-auto px-4 max-w-4xl">
71
+ <div class="text-center mb-12">
72
+ <h1 class="text-3xl md:text-4xl font-bold mb-4">Clip YouTube Videos</h1>
73
+ <p class="text-lg text-gray-600 dark:text-gray-300">Extract the perfect moments from any YouTube video</p>
74
+ </div>
75
+
76
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8">
77
+ <div class="mb-6">
78
+ <label for="youtube-url" class="block text-sm font-medium mb-2">YouTube Video URL</label>
79
+ <input type="text" id="youtube-url" placeholder="https://www.youtube.com/watch?v=..."
80
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
81
+ </div>
82
+
83
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
84
+ <div>
85
+ <label for="start-time" class="block text-sm font-medium mb-2">Start Time (HH:MM:SS)</label>
86
+ <input type="text" id="start-time" placeholder="00:00:00"
87
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
88
+ </div>
89
+ <div>
90
+ <label for="end-time" class="block text-sm font-medium mb-2">End Time (HH:MM:SS)</label>
91
+ <input type="text" id="end-time" placeholder="00:00:00"
92
+ class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary">
93
+ </div>
94
+ </div>
95
+
96
+ <div class="flex justify-center">
97
+ <button id="process-btn" class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium transition-all transform hover:scale-105 flex items-center">
98
+ <i data-feather="scissors" class="w-5 h-5 mr-2"></i>
99
+ Process Video
100
+ </button>
101
+ </div>
102
+
103
+ <div id="preview-section" class="mt-8 hidden">
104
+ <div class="mb-4">
105
+ <h3 class="text-lg font-medium mb-2">Your Clip Preview</h3>
106
+ <div class="aspect-w-16 aspect-h-9 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden">
107
+ <video id="clip-preview" controls class="w-full"></video>
108
+ </div>
109
+ </div>
110
+ <div class="flex justify-center">
111
+ <button id="download-btn" class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-lg font-medium transition-all transform hover:scale-105 flex items-center">
112
+ <i data-feather="download" class="w-5 h-5 mr-2"></i>
113
+ Download MP4
114
+ </button>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-sm">
120
+ <p>Note: This service is for personal use only. Please respect YouTube's Terms of Service.</p>
121
+ </div>
122
+ </div>
123
+ </main>
124
+
125
+ <script>
126
+ feather.replace();
127
+
128
+ document.getElementById('process-btn').addEventListener('click', function() {
129
+ const url = document.getElementById('youtube-url').value;
130
+ const startTime = document.getElementById('start-time').value;
131
+ const endTime = document.getElementById('end-time').value;
132
+
133
+ if (!url || !startTime || !endTime) {
134
+ alert('Please fill in all fields');
135
+ return;
136
+ }
137
+
138
+ // In a real implementation, this would call your backend API
139
+ // For demo purposes, we'll just show the preview section
140
+ document.getElementById('preview-section').classList.remove('hidden');
141
+
142
+ // This would be replaced with actual clip processing
143
+ const video = document.getElementById('clip-preview');
144
+ video.src = 'https://static.photos/technology/640x360/42';
145
+
146
+ // Simulate processing delay
147
+ this.innerHTML = '<i data-feather="loader" class="animate-spin w-5 h-5 mr-2"></i> Processing...';
148
+ this.disabled = true;
149
+
150
+ setTimeout(() => {
151
+ this.innerHTML = '<i data-feather="check" class="w-5 h-5 mr-2"></i> Clip Ready!';
152
+ setTimeout(() => {
153
+ this.innerHTML = '<i data-feather="scissors" class="w-5 h-5 mr-2"></i> Process Video';
154
+ this.disabled = false;
155
+ }, 2000);
156
+ }, 3000);
157
+ });
158
+
159
+ document.getElementById('download-btn').addEventListener('click', function() {
160
+ alert('In a real implementation, this would download the processed clip');
161
+ });
162
+ </script>
163
+ </body>
164
+ </html>
index.html CHANGED
@@ -64,11 +64,11 @@
64
  <span class="ml-2 text-xl font-bold">SliceStream</span>
65
  </div>
66
  <div class="hidden md:flex space-x-6">
67
- <a href="#" class="hover:text-primary transition">Home</a>
68
- <a href="#" class="hover:text-primary transition">Explore</a>
69
  <a href="#" class="hover:text-primary transition">Subscriptions</a>
70
  <a href="#" class="hover:text-primary transition">Library</a>
71
- </div>
72
  </div>
73
  <div class="flex items-center space-x-4">
74
  <div class="relative hidden md:block">
@@ -104,11 +104,11 @@
104
  </div>
105
  <div class="p-4 space-y-4">
106
  <input type="text" placeholder="Search..." class="w-full bg-gray-100 dark:bg-gray-700 rounded-full py-2 px-4">
107
- <a href="#" class="block py-2 hover:text-primary">Home</a>
108
- <a href="#" class="block py-2 hover:text-primary">Explore</a>
109
- <a href="#" class="block py-2 hover:text-primary">Subscriptions</a>
110
- <a href="#" class="block py-2 hover:text-primary">Library</a>
111
- <div class="pt-4 border-t">
112
  <button class="w-full bg-primary text-white py-2 rounded-lg">Upload Video</button>
113
  </div>
114
  </div>
 
64
  <span class="ml-2 text-xl font-bold">SliceStream</span>
65
  </div>
66
  <div class="hidden md:flex space-x-6">
67
+ <a href="index.html" class="hover:text-primary transition">Home</a>
68
+ <a href="clip.html" class="hover:text-primary transition">Clip Videos</a>
69
  <a href="#" class="hover:text-primary transition">Subscriptions</a>
70
  <a href="#" class="hover:text-primary transition">Library</a>
71
+ </div>
72
  </div>
73
  <div class="flex items-center space-x-4">
74
  <div class="relative hidden md:block">
 
104
  </div>
105
  <div class="p-4 space-y-4">
106
  <input type="text" placeholder="Search..." class="w-full bg-gray-100 dark:bg-gray-700 rounded-full py-2 px-4">
107
+ <a href="index.html" class="block py-2 hover:text-primary">Home</a>
108
+ <a href="clip.html" class="block py-2 hover:text-primary">Clip Videos</a>
109
+ <a href="#" class="block py-2 hover:text-primary">Subscriptions</a>
110
+ <a href="#" class="block py-2 hover:text-primary">Library</a>
111
+ <div class="pt-4 border-t">
112
  <button class="w-full bg-primary text-white py-2 rounded-lg">Upload Video</button>
113
  </div>
114
  </div>