Hugging Face's logo

Spaces:
Z4Y
/
cloudshare-haven
Running

App Files Community
Z4Y commited on
Commit
5adaf34
·
verified ·
1 Parent(s): 3da523a

Remake it simple, for file sharing only; keep the header and footer, and instead of the current referral buttons, make it file lists.

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +314 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Cloudshare Haven
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: gray
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: CloudShare Haven 🚀
3
+ colorFrom: gray
4
+ colorTo: blue
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).
14
+
index.html CHANGED
@@ -1,19 +1,315 @@
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="nl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CloudShare Haven | Simple File Sharing</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#64748b', // slate-500
16
+ secondary: '#000000',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ .hero-gradient {
24
+ background: linear-gradient(135deg, rgba(100, 116, 139, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
25
+ }
26
+ .nav-shadow {
27
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-white text-slate-800 font-sans antialiased">
32
+ <!-- Top Bar -->
33
+ <div class="bg-primary text-white text-sm py-2 px-4 flex justify-between items-center">
34
+ <a href="mailto:info@zorgvooronssamen.nl" class="hover:text-secondary flex items-center">
35
+ <i data-feather="mail" class="mr-2 w-4 h-4"></i> info@zorgvooronssamen.nl
36
+ </a>
37
+ <a href="tel:0851633320" class="hover:text-secondary flex items-center">
38
+ <i data-feather="phone" class="mr-2 w-4 h-4"></i> 085-1633320
39
+ </a>
40
+ </div>
41
+
42
+ <!-- Navigation -->
43
+ <nav class="sticky top-0 z-50 bg-white nav-shadow">
44
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
45
+ <a href="/" class="flex items-center">
46
+ <img src="https://static.photos/technology/320x240/42" alt="CloudShare Haven logo" class="h-12">
47
+ </a>
48
+
49
+ <!-- Mobile menu button -->
50
+ <button class="md:hidden focus:outline-none" id="menu-toggle">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+
54
+ <!-- Desktop Menu -->
55
+ <div class="hidden md:flex space-x-8">
56
+ <a href="/" class="hover:text-primary font-medium">Home</a>
57
+ <a href="#upload" class="hover:text-primary font-medium">Upload</a>
58
+ <a href="#files" class="hover:text-primary font-medium">My Files</a>
59
+ <a href="#shared" class="hover:text-primary font-medium">Shared</a>
60
+ <a href="#account" class="hover:text-primary font-medium">Account</a>
61
+ </div>
62
+ </div>
63
+
64
+ <!-- Mobile Menu -->
65
+ <div class="hidden md:hidden bg-white py-2 px-4" id="mobile-menu">
66
+ <a href="/" class="block py-2 hover:text-primary">Home</a>
67
+ <a href="#upload" class="block py-2 hover:text-primary">Upload</a>
68
+ <a href="#files" class="block py-2 hover:text-primary">My Files</a>
69
+ <a href="#shared" class="block py-2 hover:text-primary">Shared</a>
70
+ <a href="#account" class="block py-2 hover:text-primary">Account</a>
71
+ </div>
72
+ </nav>
73
+ <!-- Hero Section -->
74
+ <section class="hero-gradient text-white py-20">
75
+ <div class="container mx-auto px-4 text-center">
76
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">CloudShare Haven</h1>
77
+ <p class="text-xl md:text-2xl mb-8">Simple, secure file sharing</p>
78
+ </div>
79
+ </section>
80
+
81
+ <!-- File Upload Section -->
82
+ <section class="py-12 bg-white">
83
+ <div class="container mx-auto px-4 max-w-4xl">
84
+ <div class="border-2 border-dashed border-primary rounded-lg p-8 text-center">
85
+ <i data-feather="upload-cloud" class="w-16 h-16 mx-auto text-primary mb-4"></i>
86
+ <h3 class="text-xl font-bold mb-2">Drag & drop files here</h3>
87
+ <p class="mb-4 text-slate-500">or</p>
88
+ <button class="bg-primary hover:bg-slate-600 text-white font-bold py-2 px-6 rounded-full transition duration-300">
89
+ Select Files
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </section>
94
+
95
+ <!-- File List Section -->
96
+ <section class="py-12 bg-slate-50">
97
+ <div class="container mx-auto px-4 max-w-4xl">
98
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
99
+ <div class="flex justify-between items-center p-4 border-b">
100
+ <h3 class="font-bold text-lg">Recent Files</h3>
101
+ <div class="flex space-x-2">
102
+ <button class="p-2 rounded hover:bg-slate-100">
103
+ <i data-feather="grid" class="w-5 h-5"></i>
104
+ </button>
105
+ <button class="p-2 rounded hover:bg-slate-100">
106
+ <i data-feather="list" class="w-5 h-5"></i>
107
+ </button>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="divide-y">
112
+ <!-- File Item -->
113
+ <div class="flex items-center p-4 hover:bg-slate-50">
114
+ <div class="bg-slate-100 p-3 rounded-lg mr-4">
115
+ <i data-feather="file" class="w-6 h-6 text-primary"></i>
116
+ </div>
117
+ <div class="flex-grow">
118
+ <div class="font-medium">Project_Report.pdf</div>
119
+ <div class="text-sm text-slate-500">3.2 MB • Updated 2 hours ago</div>
120
+ </div>
121
+ <div class="flex space-x-2">
122
+ <button class="p-2 rounded-full hover:bg-slate-100">
123
+ <i data-feather="download" class="w-5 h-5"></i>
124
+ </button>
125
+ <button class="p-2 rounded-full hover:bg-slate-100">
126
+ <i data-feather="share-2" class="w-5 h-5"></i>
127
+ </button>
128
+ <button class="p-2 rounded-full hover:bg-slate-100">
129
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- File Item -->
135
+ <div class="flex items-center p-4 hover:bg-slate-50">
136
+ <div class="bg-slate-100 p-3 rounded-lg mr-4">
137
+ <i data-feather="image" class="w-6 h-6 text-primary"></i>
138
+ </div>
139
+ <div class="flex-grow">
140
+ <div class="font-medium">Team_Photo.jpg</div>
141
+ <div class="text-sm text-slate-500">1.8 MB • Updated yesterday</div>
142
+ </div>
143
+ <div class="flex space-x-2">
144
+ <button class="p-2 rounded-full hover:bg-slate-100">
145
+ <i data-feather="download" class="w-5 h-5"></i>
146
+ </button>
147
+ <button class="p-2 rounded-full hover:bg-slate-100">
148
+ <i data-feather="share-2" class="w-5 h-5"></i>
149
+ </button>
150
+ <button class="p-2 rounded-full hover:bg-slate-100">
151
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
152
+ </button>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- File Item -->
157
+ <div class="flex items-center p-4 hover:bg-slate-50">
158
+ <div class="bg-slate-100 p-3 rounded-lg mr-4">
159
+ <i data-feather="file-text" class="w-6 h-6 text-primary"></i>
160
+ </div>
161
+ <div class="flex-grow">
162
+ <div class="font-medium">Meeting_Notes.docx</div>
163
+ <div class="text-sm text-slate-500">540 KB • Updated 1 week ago</div>
164
+ </div>
165
+ <div class="flex space-x-2">
166
+ <button class="p-2 rounded-full hover:bg-slate-100">
167
+ <i data-feather="download" class="w-5 h-5"></i>
168
+ </button>
169
+ <button class="p-2 rounded-full hover:bg-slate-100">
170
+ <i data-feather="share-2" class="w-5 h-5"></i>
171
+ </button>
172
+ <button class="p-2 rounded-full hover:bg-slate-100">
173
+ <i data-feather="more-vertical" class="w-5 h-5"></i>
174
+ </button>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </section>
181
+
182
+ <!-- Quick Stats Section -->
183
+ <section class="py-12 bg-primary text-white">
184
+ <div class="container mx-auto px-4">
185
+ <div class="grid md:grid-cols-4 gap-8 text-center">
186
+ <div>
187
+ <div class="text-3xl font-bold mb-2">1.2TB</div>
188
+ <div>Total Storage</div>
189
+ </div>
190
+ <div>
191
+ <div class="text-3xl font-bold mb-2">856GB</div>
192
+ <div>Available</div>
193
+ </div>
194
+ <div>
195
+ <div class="text-3xl font-bold mb-2">1,248</div>
196
+ <div>Files Shared</div>
197
+ </div>
198
+ <div>
199
+ <div class="text-3xl font-bold mb-2">98</div>
200
+ <div>Active Users</div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </section>
205
+ <!-- Footer -->
206
+ <footer class="bg-secondary text-white pt-16 pb-8">
207
+ <div class="container mx-auto px-4">
208
+ <div class="grid md:grid-cols-4 gap-12 mb-12">
209
+ <!-- Service -->
210
+ <div>
211
+ <h3 class="text-lg font-bold mb-4">Service</h3>
212
+ <ul class="space-y-2">
213
+ <li><a href="https://zorgvooronssamen.nl/cookie-verklaring/" class="hover:text-primary">Cookieverklaring</a></li>
214
+ <li><a href="https://zorgvooronssamen.nl/klachtenprocedure/" class="hover:text-primary">Klachtenprocedure</a></li>
215
+ <li><a href="https://zorgvooronssamen.nl/vertrouwenspersoon/" class="hover:text-primary">Vertrouwenspersoon</a></li>
216
+ <li><a href="https://zorgvooronssamen.nl/privacy-verklaring/" class="hover:text-primary">Privacyverklaring</a></li>
217
+ <li><a href="https://zorgvooronssamen.nl/zorg-locaties/" class="hover:text-primary">Zorglocaties</a></li>
218
+ </ul>
219
+ </div>
220
+
221
+ <!-- Vacatures -->
222
+ <div>
223
+ <h3 class="text-lg font-bold mb-4">Vacatures</h3>
224
+ <ul class="space-y-2">
225
+ <li><a href="https://zorgvooronssamen.nl/vacature/persoonlijk-begeleiders-24-36-uur-per-week-voor-beschermd-woonvorm-in-hoenderloo/" class="hover:text-primary">Persoonlijk Begeleiders (24-36 uur per week)</a></li>
226
+ </ul>
227
+ </div>
228
+
229
+ <!-- Sociale media -->
230
+ <div>
231
+ <h3 class="text-lg font-bold mb-4">Sociale media</h3>
232
+ <div class="flex space-x-4">
233
+ <a href="https://www.instagram.com/zorgvooronssamen/" class="hover:text-primary">
234
+ <i data-feather="instagram" class="w-6 h-6"></i>
235
+ </a>
236
+ <a href="#" class="hover:text-primary">
237
+ <i data-feather="tiktok" class="w-6 h-6"></i>
238
+ </a>
239
+ <a href="http://www.linkedin.com/in/zorg-voor-ons-samen-3151ba270" class="hover:text-primary">
240
+ <i data-feather="linkedin" class="w-6 h-6"></i>
241
+ </a>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Contactgegevens -->
246
+ <div>
247
+ <h3 class="text-lg font-bold mb-4">Contactgegevens</h3>
248
+ <ul class="space-y-2">
249
+ <li class="flex items-start">
250
+ <i data-feather="phone" class="mr-2 w-5 h-5 mt-0.5"></i>
251
+ <span>085-1633320</span>
252
+ </li>
253
+ <li class="flex items-start">
254
+ <i data-feather="mail" class="mr-2 w-5 h-5 mt-0.5"></i>
255
+ <span>info@zorgvooronssamen.nl</span>
256
+ </li>
257
+ <li class="flex items-start">
258
+ <i data-feather="map-pin" class="mr-2 w-5 h-5 mt-0.5"></i>
259
+ <span>Wesselplantsoen 21<br>7351 DE Hoenderloo</span>
260
+ </li>
261
+ <li>KVK: 93594607</li>
262
+ <li>BTW: NL866461887B01</li>
263
+ </ul>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="pt-8 border-t border-slate-600 text-center">
268
+ <p>Copyright © 2023. All Right Reserved | Gemaakt door Cwebbureau.com</p>
269
+ </div>
270
+ </div>
271
+ </footer>
272
+
273
+ <!-- Cookie Consent -->
274
+ <div id="cookie-consent" class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4 md:p-6 hidden">
275
+ <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
276
+ <div class="mb-4 md:mb-0 md:mr-6">
277
+ <p class="text-sm md:text-base">We gebruiken cookies om ervoor te zorgen dat onze site zo soepel mogelijk draait. Als je doorgaat met het gebruiken van deze site, gaan we ervan uit dat je ermee instemt. <a href="https://zorgvooronssamen.nl/privacy-verklaring/" class="text-primary hover:underline">Privacybeleid</a></p>
278
+ </div>
279
+ <div class="flex space-x-4">
280
+ <button id="cookie-accept" class="bg-primary hover:bg-slate-600 text-white px-4 py-2 rounded-md text-sm md:text-base">Ok</button>
281
+ <a href="https://zorgvooronssamen.nl/privacy-verklaring/" class="bg-transparent hover:bg-slate-100 text-primary px-4 py-2 rounded-md text-sm md:text-base">Privacybeleid</a>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <script>
287
+ // Mobile menu toggle
288
+ document.getElementById('menu-toggle').addEventListener('click', function() {
289
+ const mobileMenu = document.getElementById('mobile-menu');
290
+ mobileMenu.classList.toggle('hidden');
291
+ feather.replace();
292
+ });
293
+
294
+ // Mobile zorg dropdown toggle
295
+ document.getElementById('zorg-toggle').addEventListener('click', function() {
296
+ const dropdown = document.getElementById('zorg-dropdown');
297
+ dropdown.classList.toggle('hidden');
298
+ feather.replace();
299
+ });
300
+
301
+ // Cookie consent
302
+ if (!localStorage.getItem('cookie-consent')) {
303
+ document.getElementById('cookie-consent').classList.remove('hidden');
304
+ }
305
+
306
+ document.getElementById('cookie-accept').addEventListener('click', function() {
307
+ localStorage.setItem('cookie-consent', 'true');
308
+ document.getElementById('cookie-consent').classList.add('hidden');
309
+ });
310
+
311
+ // Initialize feather icons
312
+ feather.replace();
313
+ </script>
314
+ </body>
315
  </html>