Hugging Face's logo

Spaces:
Payknayk
/
screenpipe-visual-symphony-orchestrator
Running

App Files Community
Payknayk commited on
Commit
f734380
·
verified ·
1 Parent(s): e9dec83

https://screenpi.pe/

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +222 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Screenpipe Visual Symphony Orchestrator
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ScreenPipe - Visual Symphony Orchestrator 🎨
3
+ colorFrom: green
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,223 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </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
+ <title>ScreenPipe - Visual Symphony Orchestrator</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ .blur-bg {
20
+ backdrop-filter: blur(10px);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="bg-gray-900 text-white min-h-screen">
25
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
26
+
27
+ <nav class="relative z-10 blur-bg bg-gray-800/50 border-b border-gray-700">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex items-center justify-between h-16">
30
+ <div class="flex items-center">
31
+ <div class="flex-shrink-0">
32
+ <span class="text-2xl font-bold gradient-text">ScreenPipe</span>
33
+ </div>
34
+ <div class="hidden md:block">
35
+ <div class="ml-10 flex items-baseline space-x-4">
36
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-indigo-600 text-white">Home</a>
37
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Features</a>
38
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Pricing</a>
39
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Docs</a>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ <div class="hidden md:block">
44
+ <div class="ml-4 flex items-center md:ml-6">
45
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
46
+ <i data-feather="search"></i>
47
+ </button>
48
+ <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
49
+ <i data-feather="bell"></i>
50
+ </button>
51
+ <button class="ml-3 flex items-center text-sm rounded-full focus:outline-none">
52
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="User profile">
53
+ </button>
54
+ </div>
55
+ </div>
56
+ <div class="-mr-2 flex md:hidden">
57
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
58
+ <i data-feather="menu"></i>
59
+ </button>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </nav>
64
+
65
+ <main class="relative z-10">
66
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
67
+ <div class="text-center">
68
+ <h1 class="text-5xl md:text-7xl font-extrabold mb-6">
69
+ <span class="gradient-text">Visual Symphony</span> Orchestrator
70
+ </h1>
71
+ <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
72
+ ScreenPipe transforms your visual workflow into a harmonious pipeline of creativity and efficiency.
73
+ </p>
74
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
75
+ <button class="px-8 py-4 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-bold text-lg transition-all transform hover:scale-105">
76
+ Start Creating Free
77
+ </button>
78
+ <button class="px-8 py-4 bg-gray-800 hover:bg-gray-700 rounded-lg font-bold text-lg border border-gray-700 transition-all transform hover:scale-105">
79
+ <i data-feather="play-circle" class="inline mr-2"></i> Watch Demo
80
+ </button>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="mt-24 grid grid-cols-1 md:grid-cols-3 gap-8">
85
+ <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-8 hover:bg-gray-800/70 transition-all">
86
+ <div class="text-indigo-400 mb-4">
87
+ <i data-feather="layers" class="w-10 h-10"></i>
88
+ </div>
89
+ <h3 class="text-xl font-bold mb-3">Multi-Layer Composition</h3>
90
+ <p class="text-gray-400">Stack, blend, and arrange unlimited layers with pixel-perfect precision.</p>
91
+ </div>
92
+ <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-8 hover:bg-gray-800/70 transition-all">
93
+ <div class="text-pink-400 mb-4">
94
+ <i data-feather="cpu" class="w-10 h-10"></i>
95
+ </div>
96
+ <h3 class="text-xl font-bold mb-3">Real-Time Processing</h3>
97
+ <p class="text-gray-400">GPU-accelerated rendering for buttery smooth performance.</p>
98
+ </div>
99
+ <div class="bg-gray-800/50 border border-gray-700 rounded-xl p-8 hover:bg-gray-800/70 transition-all">
100
+ <div class="text-blue-400 mb-4">
101
+ <i data-feather="share-2" class="w-10 h-10"></i>
102
+ </div>
103
+ <h3 class="text-xl font-bold mb-3">Collaborative Workflows</h3>
104
+ <p class="text-gray-400">Invite team members and work together in real-time.</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="bg-gradient-to-r from-gray-900 via-gray-800/50 to-gray-900 py-20">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="flex flex-col md:flex-row items-center">
112
+ <div class="md:w-1/2 mb-10 md:mb-0">
113
+ <img src="http://static.photos/technology/1024x576/5" alt="ScreenPipe interface" class="rounded-xl shadow-2xl border border-gray-700">
114
+ </div>
115
+ <div class="md:w-1/2 md:pl-12">
116
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Modern Interface, <span class="gradient-text">Unlimited Possibilities</span></h2>
117
+ <p class="text-gray-300 mb-6">Our carefully designed interface puts all the tools you need at your fingertips without overwhelming you with complexity.</p>
118
+ <ul class="space-y-4">
119
+ <li class="flex items-start">
120
+ <i data-feather="check-circle" class="text-green-400 mr-3 mt-1"></i>
121
+ <span class="text-gray-300">Customizable workspace layouts</span>
122
+ </li>
123
+ <li class="flex items-start">
124
+ <i data-feather="check-circle" class="text-green-400 mr-3 mt-1"></i>
125
+ <span class="text-gray-300">Dark/light mode with accent colors</span>
126
+ </li>
127
+ <li class="flex items-start">
128
+ <i data-feather="check-circle" class="text-green-400 mr-3 mt-1"></i>
129
+ <span class="text-gray-300">Keyboard shortcuts for power users</span>
130
+ </li>
131
+ </ul>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="py-20">
138
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
139
+ <div class="text-center mb-16">
140
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted by <span class="gradient-text">creative teams</span> worldwide</h2>
141
+ <p class="text-gray-400 max-w-2xl mx-auto">Join thousands of professionals who rely on ScreenPipe for their daily creative work</p>
142
+ </div>
143
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
144
+ <div class="flex items-center justify-center p-4 bg-gray-800/50 rounded-lg">
145
+ <img src="http://static.photos/logo1.png" alt="Company logo" class="h-10">
146
+ </div>
147
+ <div class="flex items-center justify-center p-4 bg-gray-800/50 rounded-lg">
148
+ <img src="http://static.photos/logo2.png" alt="Company logo" class="h-10">
149
+ </div>
150
+ <div class="flex items-center justify-center p-4 bg-gray-800/50 rounded-lg">
151
+ <img src="http://static.photos/logo3.png" alt="Company logo" class="h-10">
152
+ </div>
153
+ <div class="flex items-center justify-center p-4 bg-gray-800/50 rounded-lg">
154
+ <img src="http://static.photos/logo4.png" alt="Company logo" class="h-10">
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </main>
160
+
161
+ <footer class="relative z-10 bg-gray-800/50 border-t border-gray-700 py-12">
162
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
163
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
164
+ <div>
165
+ <h3 class="text-lg font-bold mb-4">ScreenPipe</h3>
166
+ <p class="text-gray-400">The ultimate visual workflow platform for creative professionals.</p>
167
+ </div>
168
+ <div>
169
+ <h3 class="text-lg font-bold mb-4">Product</h3>
170
+ <ul class="space-y-2">
171
+ <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
172
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
173
+ <li><a href="#" class="text-gray-400 hover:text-white">Examples</a></li>
174
+ <li><a href="#" class="text-gray-400 hover:text-white">Updates</a></li>
175
+ </ul>
176
+ </div>
177
+ <div>
178
+ <h3 class="text-lg font-bold mb-4">Resources</h3>
179
+ <ul class="space-y-2">
180
+ <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
181
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
182
+ <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
183
+ <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
184
+ </ul>
185
+ </div>
186
+ <div>
187
+ <h3 class="text-lg font-bold mb-4">Connect</h3>
188
+ <div class="flex space-x-4">
189
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
190
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
191
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="github"></i></a>
192
+ <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ <div class="mt-12 pt-8 border-t border-gray-700 text-center text-gray-500 text-sm">
197
+ <p>© 2023 ScreenPipe. All rights reserved.</p>
198
+ </div>
199
+ </div>
200
+ </footer>
201
+
202
+ <script>
203
+ VANTA.NET({
204
+ el: "#vanta-bg",
205
+ mouseControls: true,
206
+ touchControls: true,
207
+ gyroControls: false,
208
+ minHeight: 200.00,
209
+ minWidth: 200.00,
210
+ scale: 1.00,
211
+ scaleMobile: 1.00,
212
+ color: 0x3b82f6,
213
+ backgroundColor: 0x111827,
214
+ points: 12.00,
215
+ maxDistance: 22.00,
216
+ spacing: 18.00
217
+ })
218
+ </script>
219
+ <script>
220
+ feather.replace();
221
+ </script>
222
+ </body>
223
  </html>