Hugging Face's logo

Spaces:
robotrule
/
awesome-site
Running

App Files Community
awesome-site
File size: 9,039 Bytes 
a81f016
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vid2Slide AI | Convert Videos to PowerPoint Presentations</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        dark: '#1e293b',
                        light: '#f8fafc',
                    },
                    animation: {
                        'pulse-slow': 'pulse 6s infinite',
                        'float': 'float 6s ease-in-out infinite',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }
        .upload-container {
            border: 2px dashed #c7d2fe;
            transition: all 0.3s ease;
        }
        .upload-container:hover {
            border-color: #818cf8;
            background-color: rgba(99, 102, 241, 0.05);
        }
        .graph-animation {
            animation: float 6s ease-in-out infinite;
        }
        .progress-bar {
            transition: width 0.5s ease;
        }
        .ai-chip {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }
        .slide-preview {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        .slide-preview:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50 font-sans antialiased">
    <!-- Header -->
    <header class="gradient-bg text-white">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-sliders-h text-2xl"></i>
                    <h1 class="text-2xl font-bold">Vid2Slide<span class="font-light">AI</span></h1>
                </div>
                <nav class="hidden md:flex space-x-8">
                    <a href="#" class="hover:text-indigo-200 transition">Home</a>
                    <a href="#" class="hover:text-indigo-200 transition">Features</a>
                    <a href="#" class="hover:text-indigo-200 transition">Pricing</a>
                    <a href="#" class="hover:text-indigo-200 transition">About</a>
                </nav>
                <button class="md:hidden text-xl">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="gradient-bg text-white py-16">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">Transform Videos into Stunning <span class="bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-pink-400">AI-Powered</span> Presentations</h1>
                <p class="text-xl mb-8 text-indigo-100">Our advanced AI analyzes your video content and automatically creates professional PowerPoint slides with keyframes, transcripts, and summaries.</p>
                <div class="flex flex-wrap gap-4 mb-8">
                    <div class="ai-chip px-4 py-2 rounded-full flex items-center">
                        <i class="fas fa-brain mr-2"></i>
                        <span>AI Analysis</span>
                    </div>
                    <div class="ai-chip px-4 py-2 rounded-full flex items-center">
                        <i class="fas fa-magic mr-2"></i>
                        <span>Auto Design</span>
                    </div>
                    <div class="ai-chip px-4 py-2 rounded-full flex items-center">
                        <i class="fas fa-bolt mr-2"></i>
                        <span>Fast Processing</span>
                    </div>
                </div>
                <button class="bg-white text-indigo-600 px-8 py-3 rounded-full font-bold hover:bg-indigo-100 transition duration-300 shadow-lg">
                    Try It Free <i class="fas fa-arrow-right ml-2"></i>
                </button>
            </div>
            <div class="md:w-1/2 relative">
                <div class="relative max-w-md mx-auto">
                    <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-300 rounded-full opacity-20 blur-xl"></div>
                    <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-blue-300 rounded-full opacity-20 blur-xl"></div>
                    <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden">
                        <div class="bg-gray-800 p-3 flex items-center">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="text-xs text-gray-400 mx-auto">video-presentation.pptx</div>
                        </div>
                        <div class="p-4">
                            <div class="bg-gray-100 rounded-lg overflow-hidden mb-3">
                                <div class="h-40 bg-gradient-to-r from-purple-400 to-blue-500 flex items-center justify-center">
                                    <i class="fas fa-play text-white text-4xl"></i>
                                </div>
                            </div>
                            <div class="grid grid-cols-3 gap-2">
                                <div class="h-16 bg-gray-200 rounded"></div>
                                <div class="h-16 bg-gray-200 rounded"></div>
                                <div class="h-16 bg-gray-200 rounded"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Upload Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">Convert Your Video in 3 Simple Steps</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Upload your video and let our AI work its magic to create a professional presentation</p>
            </div>
            
            <div class="max-w-4xl mx-auto bg-gray-50 rounded-2xl p-8 shadow-sm">
                <div class="flex flex-col md:flex-row gap-8">
                    <!-- Upload Area -->
                    <div class="md:w-1/2">
                        <div class="upload-container rounded-xl p-8 text-center cursor-pointer transition">
                            <div class="mb-6">
                                <i class="fas fa-cloud-upload-alt text-5xl text-indigo-500"></i>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">Upload Your Video</h3>
                            <p class="text-gray-500 mb-6">Drag & drop your video file here or click to browse</p>
                            <input type="file" id="video-upload" class="hidden" accept="video/*">
                            <label for="video-upload" class="inline-block bg-indigo-600 text-white px-6 py-2 rounded-full font-medium hover:bg-indigo-700 transition cursor-pointer">
                                Select File
                            </label>
                            <p class="text-xs text-gray-400 mt-4">Supports MP4, MOV
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=robotrule/awesome-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>