Hugging Face's logo

Spaces:
Z4Y
/
cloudshare-haven
Running

App Files Community
Z4Y commited on
Commit
cc4cadd
·
verified ·
1 Parent(s): 62d3a6e

Improve elegance, header using entire width, the animation actually looping

Browse files
Files changed (1) hide show
  1. index.html +129 -291
index.html CHANGED
@@ -27,254 +27,78 @@
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 relative overflow-hidden">
75
- <div class="container mx-auto px-4 text-center relative z-10">
76
- <h1 class="text-4xl md:text-5xl font-bold mb-6 animate-float">CloudShare Haven</h1>
77
- <p class="text-xl md:text-2xl mb-8 animate-float-delay">Simple, secure file sharing</p>
78
- </div>
79
- <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
80
- <div class="bubble absolute rounded-full bg-white opacity-10 animate-bubble"></div>
81
- <div class="bubble absolute rounded-full bg-white opacity-10 animate-bubble-delay"></div>
82
- <div class="bubble absolute rounded-full bg-white opacity-10 animate-bubble-delay2"></div>
83
- </div>
84
- </section>
 
 
 
85
 
86
- <!-- File Upload Section -->
87
- <section class="py-12 bg-white">
88
- <div class="container mx-auto px-4 max-w-4xl">
89
- <div class="border-2 border-dashed border-primary rounded-lg p-8 text-center">
90
- <i data-feather="upload-cloud" class="w-16 h-16 mx-auto text-primary mb-4"></i>
91
- <h3 class="text-xl font-bold mb-2">Drag & drop files here</h3>
92
- <p class="mb-4 text-slate-500">or</p>
93
- <button class="bg-primary hover:bg-slate-600 text-white font-bold py-2 px-6 rounded-full transition duration-300">
94
- Select Files
95
- </button>
96
- </div>
97
- </div>
98
- </section>
99
 
100
- <!-- File List Section -->
101
- <section class="py-12 bg-slate-50">
102
- <div class="container mx-auto px-4 max-w-4xl">
103
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
104
- <div class="flex justify-between items-center p-4 border-b">
105
- <h3 class="font-bold text-lg">Recent Files</h3>
106
- <div class="flex space-x-2">
107
- <button class="p-2 rounded hover:bg-slate-100">
108
- <i data-feather="grid" class="w-5 h-5"></i>
109
- </button>
110
- <button class="p-2 rounded hover:bg-slate-100">
111
- <i data-feather="list" class="w-5 h-5"></i>
112
- </button>
113
- </div>
114
- </div>
115
-
116
- <div class="divide-y">
117
- <!-- File Item -->
118
- <div class="flex items-center p-4 hover:bg-slate-50">
119
- <div class="bg-slate-100 p-3 rounded-lg mr-4">
120
- <i data-feather="file" class="w-6 h-6 text-primary"></i>
121
- </div>
122
- <div class="flex-grow">
123
- <div class="font-medium">Project_Report.pdf</div>
124
- <div class="text-sm text-slate-500">3.2 MB • Updated 2 hours ago</div>
125
- </div>
126
- <div class="flex space-x-2">
127
- <button class="p-2 rounded-full hover:bg-slate-100">
128
- <i data-feather="download" class="w-5 h-5"></i>
129
- </button>
130
- <button class="p-2 rounded-full hover:bg-slate-100">
131
- <i data-feather="share-2" class="w-5 h-5"></i>
132
- </button>
133
- <button class="p-2 rounded-full hover:bg-slate-100">
134
- <i data-feather="more-vertical" class="w-5 h-5"></i>
135
- </button>
136
- </div>
137
- </div>
138
-
139
- <!-- File Item -->
140
- <div class="flex items-center p-4 hover:bg-slate-50">
141
- <div class="bg-slate-100 p-3 rounded-lg mr-4">
142
- <i data-feather="image" class="w-6 h-6 text-primary"></i>
143
- </div>
144
- <div class="flex-grow">
145
- <div class="font-medium">Team_Photo.jpg</div>
146
- <div class="text-sm text-slate-500">1.8 MB • Updated yesterday</div>
147
- </div>
148
- <div class="flex space-x-2">
149
- <button class="p-2 rounded-full hover:bg-slate-100">
150
- <i data-feather="download" class="w-5 h-5"></i>
151
- </button>
152
- <button class="p-2 rounded-full hover:bg-slate-100">
153
- <i data-feather="share-2" class="w-5 h-5"></i>
154
- </button>
155
- <button class="p-2 rounded-full hover:bg-slate-100">
156
- <i data-feather="more-vertical" class="w-5 h-5"></i>
157
- </button>
158
- </div>
159
- </div>
160
-
161
- <!-- File Item -->
162
- <div class="flex items-center p-4 hover:bg-slate-50">
163
- <div class="bg-slate-100 p-3 rounded-lg mr-4">
164
- <i data-feather="file-text" class="w-6 h-6 text-primary"></i>
165
- </div>
166
- <div class="flex-grow">
167
- <div class="font-medium">Meeting_Notes.docx</div>
168
- <div class="text-sm text-slate-500">540 KB • Updated 1 week ago</div>
169
- </div>
170
- <div class="flex space-x-2">
171
- <button class="p-2 rounded-full hover:bg-slate-100">
172
- <i data-feather="download" class="w-5 h-5"></i>
173
- </button>
174
- <button class="p-2 rounded-full hover:bg-slate-100">
175
- <i data-feather="share-2" class="w-5 h-5"></i>
176
- </button>
177
- <button class="p-2 rounded-full hover:bg-slate-100">
178
- <i data-feather="more-vertical" class="w-5 h-5"></i>
179
- </button>
180
- </div>
181
- </div>
182
- </div>
183
- </div>
184
- </div>
185
- </section>
186
 
187
- <!-- Quick Stats Section -->
188
- <section class="py-12 bg-primary text-white">
189
- <div class="container mx-auto px-4">
190
- <div class="grid md:grid-cols-4 gap-8 text-center">
191
- <div>
192
- <div class="text-3xl font-bold mb-2">1.2TB</div>
193
- <div>Total Storage</div>
194
- </div>
195
- <div>
196
- <div class="text-3xl font-bold mb-2">856GB</div>
197
- <div>Available</div>
198
- </div>
199
- <div>
200
- <div class="text-3xl font-bold mb-2">1,248</div>
201
- <div>Files Shared</div>
202
- </div>
203
- <div>
204
- <div class="text-3xl font-bold mb-2">98</div>
205
- <div>Active Users</div>
206
- </div>
207
- </div>
208
- </div>
209
- </section>
210
- <!-- Footer -->
211
- <footer class="bg-secondary text-white pt-16 pb-8">
212
- <div class="container mx-auto px-4">
213
- <div class="grid md:grid-cols-4 gap-12 mb-12">
214
- <!-- Service -->
215
- <div>
216
- <h3 class="text-lg font-bold mb-4">Service</h3>
217
- <ul class="space-y-2">
218
- <li><a href="https://zorgvooronssamen.nl/cookie-verklaring/" class="hover:text-primary">Cookieverklaring</a></li>
219
- <li><a href="https://zorgvooronssamen.nl/klachtenprocedure/" class="hover:text-primary">Klachtenprocedure</a></li>
220
- <li><a href="https://zorgvooronssamen.nl/vertrouwenspersoon/" class="hover:text-primary">Vertrouwenspersoon</a></li>
221
- <li><a href="https://zorgvooronssamen.nl/privacy-verklaring/" class="hover:text-primary">Privacyverklaring</a></li>
222
- <li><a href="https://zorgvooronssamen.nl/zorg-locaties/" class="hover:text-primary">Zorglocaties</a></li>
223
- </ul>
224
- </div>
225
-
226
- <!-- Vacatures -->
227
- <div>
228
- <h3 class="text-lg font-bold mb-4">Vacatures</h3>
229
- <ul class="space-y-2">
230
- <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>
231
- </ul>
232
- </div>
233
-
234
- <!-- Sociale media -->
235
- <div>
236
- <h3 class="text-lg font-bold mb-4">Sociale media</h3>
237
- <div class="flex space-x-4">
238
- <a href="https://www.instagram.com/zorgvooronssamen/" class="hover:text-primary">
239
- <i data-feather="instagram" class="w-6 h-6"></i>
240
- </a>
241
- <a href="#" class="hover:text-primary">
242
- <i data-feather="tiktok" class="w-6 h-6"></i>
243
- </a>
244
- <a href="http://www.linkedin.com/in/zorg-voor-ons-samen-3151ba270" class="hover:text-primary">
245
- <i data-feather="linkedin" class="w-6 h-6"></i>
246
- </a>
247
- </div>
248
- </div>
249
-
250
- <!-- Contactgegevens -->
251
- <div>
252
- <h3 class="text-lg font-bold mb-4">Contactgegevens</h3>
253
- <ul class="space-y-2">
254
- <li class="flex items-start">
255
- <i data-feather="phone" class="mr-2 w-5 h-5 mt-0.5"></i>
256
- <span>085-1633320</span>
257
- </li>
258
- <li class="flex items-start">
259
- <i data-feather="mail" class="mr-2 w-5 h-5 mt-0.5"></i>
260
- <span>info@zorgvooronssamen.nl</span>
261
- </li>
262
- <li class="flex items-start">
263
- <i data-feather="map-pin" class="mr-2 w-5 h-5 mt-0.5"></i>
264
- <span>Wesselplantsoen 21<br>7351 DE Hoenderloo</span>
265
- </li>
266
- <li>KVK: 93594607</li>
267
- <li>BTW: NL866461887B01</li>
268
- </ul>
269
- </div>
270
- </div>
271
-
272
- <div class="pt-8 border-t border-slate-600 text-center">
273
- <p>Copyright © 2023. All Right Reserved | Gemaakt door Cwebbureau.com</p>
274
- </div>
275
- </div>
276
- </footer>
277
- <style>
278
  @keyframes float {
279
  0%, 100% { transform: translateY(0); }
280
  50% { transform: translateY(-10px); }
@@ -299,59 +123,73 @@
299
  .animate-bubble-delay2 {
300
  animation: bubble 15s linear 10s infinite;
301
  }
302
- .bubble {
303
- width: 100px;
304
- height: 100px;
305
- bottom: -100px;
 
 
 
 
 
 
 
 
 
306
  }
307
  </style>
308
-
309
- <!-- Cookie Consent -->
310
- <div id="cookie-consent" class="fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4 md:p-6 hidden">
311
- <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
312
- <div class="mb-4 md:mb-0 md:mr-6">
313
- <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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
314
  </div>
315
- <div class="flex space-x-4">
316
- <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>
317
- <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>
 
 
 
 
 
 
 
318
  </div>
319
  </div>
320
- </div>
321
-
322
- <script>
323
- // Mobile menu toggle
324
- document.getElementById('menu-toggle').addEventListener('click', function() {
325
- const mobileMenu = document.getElementById('mobile-menu');
326
- mobileMenu.classList.toggle('hidden');
327
- feather.replace();
328
- });
329
-
330
- // Mobile zorg dropdown toggle
331
- document.getElementById('zorg-toggle').addEventListener('click', function() {
332
- const dropdown = document.getElementById('zorg-dropdown');
333
- dropdown.classList.toggle('hidden');
334
- feather.replace();
335
- });
336
-
337
- // Cookie consent
338
- if (!localStorage.getItem('cookie-consent')) {
339
- document.getElementById('cookie-consent').classList.remove('hidden');
340
- }
341
-
342
- document.getElementById('cookie-accept').addEventListener('click', function() {
343
- localStorage.setItem('cookie-consent', 'true');
344
- document.getElementById('cookie-consent').classList.add('hidden');
345
- });
346
- // Initialize feather icons
347
- feather.replace();
348
-
349
- // Random bubble positioning
350
- document.querySelectorAll('.bubble').forEach(bubble => {
351
- bubble.style.left = `${Math.random() * 100}%`;
352
- bubble.style.width = `${50 + Math.random() * 100}px`;
353
- bubble.style.height = bubble.style.width;
354
- });
355
- </script>
356
  </body>
357
  </html>
 
27
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
28
  }
29
  </style>
30
+ <style>
31
+ :root{ --speed: 6s; }
 
 
 
 
 
 
 
 
 
32
 
33
+ /* Base */
34
+ *{ box-sizing:border-box; }
35
+ html,body{ height:100%; }
36
+ body{
37
+ margin:0;
38
+ background:#ffffff; /* Ensure full-page white background */
39
+ color:#0b0c10;
40
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
41
+ display:grid;
42
+ place-items:center;
43
+ min-height:100svh;
44
+ }
45
 
46
+ main{
47
+ display:grid;
48
+ place-items:center;
49
+ gap:16px;
50
+ padding:28px;
51
+ text-align:center;
52
+ }
 
 
 
 
 
 
 
53
 
54
+ /* Animated logo stage — background explicitly white */
55
+ .stage{
56
+ --logo-size: min(360px, 64vw);
57
+ background:#ffffff; /* required white background */
58
+ border-radius:16px;
59
+ display:grid;
60
+ place-items:center;
61
+ padding:24px;
62
+ }
63
+ .logo-wrap{
64
+ position:relative;
65
+ width:var(--logo-size);
66
+ aspect-ratio:1/1;
67
+ display:grid;
68
+ place-items:center;
69
+ animation: floatY var(--speed) ease-in-out infinite;
70
+ }
71
+ .logo{
72
+ width:100%;
73
+ height:100%;
74
+ object-fit:contain;
75
+ will-change:transform;
76
+ animation: zoomIn var(--speed) linear infinite;
77
+ }
78
 
79
+ /* Animations (from logo.html, simplified) */
80
+ @keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
81
+ @keyframes zoomIn{ 0%{ transform:scale(1) } 100%{ transform:scale(1.1) } }
 
 
 
 
 
 
 
 
 
 
82
 
83
+ /* Respect reduced motion */
84
+ @media (prefers-reduced-motion: reduce){
85
+ .logo, .logo-wrap{ animation: none !important; }
86
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87
 
88
+ h1{
89
+ margin:0;
90
+ font-weight:700;
91
+ letter-spacing:.2px;
92
+ font-size:clamp(18px,2.6vw,24px);
93
+ }
94
+ .muted{
95
+ margin:0;
96
+ color:#6b7280;
97
+ font-size:14px;
98
+ letter-spacing:.02em;
99
+ }
100
+ </style>
101
+ <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  @keyframes float {
103
  0%, 100% { transform: translateY(0); }
104
  50% { transform: translateY(-10px); }
 
123
  .animate-bubble-delay2 {
124
  animation: bubble 15s linear 10s infinite;
125
  }
126
+ .bubble {
127
+ width: 80px;
128
+ height: 80px;
129
+ bottom: -80px;
130
+ }
131
+ @keyframes float {
132
+ 0%, 100% { transform: translateY(0); }
133
+ 50% { transform: translateY(-15px); }
134
+ }
135
+ @keyframes bubble {
136
+ 0% { transform: translateY(0) scale(0.5); opacity: 0; }
137
+ 20% { opacity: 0.1; }
138
+ 100% { transform: translateY(-100vh) scale(1.8); opacity: 0; }
139
  }
140
  </style>
141
+ </head>
142
+ <body class="bg-white text-slate-800 font-sans antialiased">
143
+ <!-- Full-width Header -->
144
+ <header class="w-full bg-primary text-white">
145
+ <div class="container mx-auto px-6 py-4 flex flex-col md:flex-row justify-between items-center">
146
+ <div class="flex items-center mb-4 md:mb-0">
147
+ <i data-feather="cloud" class="w-8 h-8 mr-2 animate-pulse"></i>
148
+ <h1 class="text-xl font-bold">CloudShare Haven</h1>
149
+ </div>
150
+ <nav class="flex space-x-6">
151
+ <a href="#" class="hover:text-secondary transition-colors flex items-center">
152
+ <i data-feather="home" class="mr-1 w-4 h-4"></i> Home
153
+ </a>
154
+ <a href="#" class="hover:text-secondary transition-colors flex items-center">
155
+ <i data-feather="upload" class="mr-1 w-4 h-4"></i> Upload
156
+ </a>
157
+ <a href="#" class="hover:text-secondary transition-colors flex items-center">
158
+ <i data-feather="user" class="mr-1 w-4 h-4"></i> Account
159
+ </a>
160
+ </nav>
161
+ </div>
162
+ </header>
163
+ <!-- Main Content -->
164
+ <main class="min-h-screen flex flex-col items-center justify-center p-8">
165
+ <div class="relative w-64 h-64 mb-8">
166
+ <div class="absolute inset-0 flex items-center justify-center">
167
+ <div class="w-full h-full rounded-full bg-gradient-to-br from-blue-200 to-blue-500 opacity-20 animate-pulse"></div>
168
  </div>
169
+ <div class="relative flex items-center justify-center">
170
+ <img
171
+ src="https://thijsdezeeuw.com/assets/zorgvooronssamen/logo_upscale_nb.png"
172
+ alt="CloudShare Haven Logo"
173
+ class="w-48 h-48 object-contain animate-float"
174
+ />
175
+ <!-- Floating bubbles -->
176
+ <div class="absolute bubble rounded-full bg-white opacity-10 animate-bubble" style="left: 10%;"></div>
177
+ <div class="absolute bubble rounded-full bg-white opacity-10 animate-bubble-delay" style="left: 30%;"></div>
178
+ <div class="absolute bubble rounded-full bg-white opacity-10 animate-bubble-delay2" style="left: 70%;"></div>
179
  </div>
180
  </div>
181
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">CloudShare Haven</h1>
182
+ <p class="text-gray-600 max-w-md text-center mb-8">
183
+ Your secure and simple file sharing solution. Upload, share, and manage files effortlessly.
184
+ </p>
185
+ <div class="flex space-x-4">
186
+ <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg shadow-md transition-all flex items-center">
187
+ <i data-feather="upload" class="mr-2"></i> Upload Files
188
+ </button>
189
+ <button class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-6 py-3 rounded-lg shadow-md transition-all flex items-center">
190
+ <i data-feather="folder" class="mr-2"></i> Browse Files
191
+ </button>
192
+ </div>
193
+ </main>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  </body>
195
  </html>