privateuserh commited on
Commit
70c90d8
·
verified ·
1 Parent(s): 9733145

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +325 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privsmia
3
- emoji: 😻
4
  colorFrom: gray
5
- colorTo: indigo
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: privsmia
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,325 @@
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>Independent Influencers Union</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .floating-btn {
11
+ position: fixed;
12
+ bottom: 30px;
13
+ right: 30px;
14
+ z-index: 100;
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
16
+ transition: all 0.3s ease;
17
+ }
18
+ .floating-btn:hover {
19
+ transform: translateY(-5px) scale(1.05);
20
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
21
+ }
22
+ .modal-overlay {
23
+ position: fixed;
24
+ top: 0;
25
+ left: 0;
26
+ right: 0;
27
+ bottom: 0;
28
+ background-color: rgba(0, 0, 0, 0.7);
29
+ z-index: 1000;
30
+ display: flex;
31
+ justify-content: center;
32
+ align-items: center;
33
+ opacity: 0;
34
+ visibility: hidden;
35
+ transition: all 0.3s ease;
36
+ }
37
+ .modal-overlay.active {
38
+ opacity: 1;
39
+ visibility: visible;
40
+ }
41
+ .modal-content {
42
+ transform: translateY(-50px);
43
+ transition: all 0.3s ease;
44
+ }
45
+ .modal-overlay.active .modal-content {
46
+ transform: translateY(0);
47
+ }
48
+ .gradient-bg {
49
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
50
+ }
51
+ .benefits-panel {
52
+ position: fixed;
53
+ bottom: 100px;
54
+ right: 30px;
55
+ width: 300px;
56
+ background: white;
57
+ border-radius: 15px;
58
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
59
+ padding: 20px;
60
+ z-index: 99;
61
+ transform: translateY(20px);
62
+ opacity: 0;
63
+ visibility: hidden;
64
+ transition: all 0.3s ease;
65
+ }
66
+ .benefits-panel.active {
67
+ transform: translateY(0);
68
+ opacity: 1;
69
+ visibility: visible;
70
+ }
71
+ .benefits-panel:after {
72
+ content: '';
73
+ position: absolute;
74
+ bottom: -10px;
75
+ right: 40px;
76
+ width: 0;
77
+ height: 0;
78
+ border-left: 15px solid transparent;
79
+ border-right: 15px solid transparent;
80
+ border-top: 15px solid white;
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="bg-gray-50 font-sans">
85
+ <!-- Navigation -->
86
+ <nav class="gradient-bg text-white shadow-lg">
87
+ <div class="container mx-auto px-6 py-4">
88
+ <div class="flex justify-between items-center">
89
+ <div class="flex items-center space-x-4">
90
+ <i class="fas fa-users text-2xl"></i>
91
+ <span class="font-bold text-xl">IndieInfluencers</span>
92
+ </div>
93
+ <div class="hidden md:flex items-center space-x-8">
94
+ <a href="#" class="hover:text-gray-200">Home</a>
95
+ <a href="#" class="hover:text-gray-200">About</a>
96
+ <a href="#" class="hover:text-gray-200">Resources</a>
97
+ <a href="#" class="hover:text-gray-200">Community</a>
98
+ </div>
99
+ <button id="openSignup" class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">
100
+ Join Us
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </nav>
105
+
106
+ <!-- Hero Section -->
107
+ <section class="gradient-bg text-white py-20">
108
+ <div class="container mx-auto px-6 text-center">
109
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Your Voice, Your Rules</h1>
110
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">
111
+ The first autonomous union for social media influencers. No parent organization. No unnecessary rules. Just pure collective power.
112
+ </p>
113
+ <div class="flex flex-col md:flex-row justify-center gap-4">
114
+ <button id="openSignupHero" class="bg-white text-indigo-700 px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition transform hover:scale-105">
115
+ Join the Movement
116
+ </button>
117
+ <button class="border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:bg-opacity-10 transition transform hover:scale-105">
118
+ Learn More
119
+ </button>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- Features Section -->
125
+ <section class="py-20 bg-white">
126
+ <div class="container mx-auto px-6">
127
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">Why Go Independent?</h2>
128
+ <div class="grid md:grid-cols-3 gap-10">
129
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition">
130
+ <div class="text-indigo-600 mb-4">
131
+ <i class="fas fa-gem text-4xl"></i>
132
+ </div>
133
+ <h3 class="text-xl font-bold mb-3">Complete Autonomy</h3>
134
+ <p class="text-gray-600">Make decisions without answering to a larger bureaucratic structure. We're influencer-run and influencer-focused.</p>
135
+ </div>
136
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition">
137
+ <div class="text-indigo-600 mb-4">
138
+ <i class="fas fa-handshake text-4xl"></i>
139
+ </div>
140
+ <h3 class="text-xl font-bold mb-3">Better Deals</h3>
141
+ <p class="text-gray-600">Collective bargaining power means better rates, fairer contracts, and protection against exploitation.</p>
142
+ </div>
143
+ <div class="bg-gray-50 p-8 rounded-xl hover:shadow-xl transition">
144
+ <div class="text-indigo-600 mb-4">
145
+ <i class="fas fa-shield-alt text-4xl"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold mb-3">Legal Protection</h3>
148
+ <p class="text-gray-600">Access to legal resources and collective defense against platform changes, copyright issues, and contract disputes.</p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- Testimonials -->
155
+ <section class="py-20 bg-gray-50">
156
+ <div class="container mx-auto px-6">
157
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-16">What Our Members Say</h2>
158
+ <div class="grid md:grid-cols-2 gap-10 max-w-4xl mx-auto">
159
+ <div class="bg-white p-8 rounded-xl shadow-md">
160
+ <div class="flex items-center mb-4">
161
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Member" class="w-12 h-12 rounded-full mr-4">
162
+ <div>
163
+ <h4 class="font-bold">Sarah K.</h4>
164
+ <p class="text-gray-500 text-sm">Lifestyle Influencer</p>
165
+ </div>
166
+ </div>
167
+ <p class="text-gray-700 italic">"Before joining, I was constantly getting lowballed by brands. Now with the union's standard rate cards, I know my worth and get paid fairly."</p>
168
+ </div>
169
+ <div class="bg-white p-8 rounded-xl shadow-md">
170
+ <div class="flex items-center mb-4">
171
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Member" class="w-12 h-12 rounded-full mr-4">
172
+ <div>
173
+ <h4 class="font-bold">Jamal R.</h4>
174
+ <p class="text-gray-500 text-sm">Tech Reviewer</p>
175
+ </div>
176
+ </div>
177
+ <p class="text-gray-700 italic">"When a platform suddenly demonetized my content, the union's legal team helped me navigate the appeal process successfully. Worth every penny of membership."</p>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- Signup Modal -->
184
+ <div id="signupModal" class="modal-overlay">
185
+ <div class="modal-content bg-white rounded-xl w-full max-w-md mx-4">
186
+ <div class="p-8">
187
+ <div class="flex justify-between items-center mb-6">
188
+ <h3 class="text-2xl font-bold text-gray-800">Join IndieInfluencers</h3>
189
+ <button id="closeSignup" class="text-gray-500 hover:text-gray-700">
190
+ <i class="fas fa-times"></i>
191
+ </button>
192
+ </div>
193
+ <form id="signupForm" class="space-y-4">
194
+ <div>
195
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
196
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
197
+ </div>
198
+ <div>
199
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
200
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
201
+ </div>
202
+ <div>
203
+ <label for="platform" class="block text-sm font-medium text-gray-700 mb-1">Main Platform</label>
204
+ <select id="platform" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
205
+ <option value="">Select your platform</option>
206
+ <option value="instagram">Instagram</option>
207
+ <option value="youtube">YouTube</option>
208
+ <option value="tiktok">TikTok</option>
209
+ <option value="twitter">Twitter</option>
210
+ <option value="other">Other</option>
211
+ </select>
212
+ </div>
213
+ <div>
214
+ <label for="followers" class="block text-sm font-medium text-gray-700 mb-1">Approx. Follower Count</label>
215
+ <input type="number" id="followers" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
216
+ </div>
217
+ <div class="pt-2">
218
+ <button type="submit" class="w-full gradient-bg text-white px-6 py-3 rounded-lg font-bold hover:opacity-90 transition">
219
+ Apply for Membership
220
+ </button>
221
+ </div>
222
+ </form>
223
+ <div class="mt-6 text-center text-sm text-gray-500">
224
+ By joining, you agree to our <a href="#" class="text-indigo-600 hover:underline">Terms</a> and <a href="#" class="text-indigo-600 hover:underline">Privacy Policy</a>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Floating Benefits Button -->
231
+ <button id="benefitsBtn" class="floating-btn bg-indigo-600 text-white w-16 h-16 rounded-full flex items-center justify-center">
232
+ <i class="fas fa-star text-2xl"></i>
233
+ </button>
234
+
235
+ <!-- Benefits Panel -->
236
+ <div id="benefitsPanel" class="benefits-panel">
237
+ <h4 class="font-bold text-lg mb-4 text-indigo-700">Member Benefits</h4>
238
+ <ul class="space-y-3">
239
+ <li class="flex items-start">
240
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
241
+ <span>Collective bargaining with brands</span>
242
+ </li>
243
+ <li class="flex items-start">
244
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
245
+ <span>Legal support and contract review</span>
246
+ </li>
247
+ <li class="flex items-start">
248
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
249
+ <span>Exclusive networking events</span>
250
+ </li>
251
+ <li class="flex items-start">
252
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
253
+ <span>Platform change early warnings</span>
254
+ </li>
255
+ <li class="flex items-start">
256
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
257
+ <span>Health insurance partnerships</span>
258
+ </li>
259
+ </ul>
260
+ <div class="mt-6 text-center">
261
+ <button id="openSignupFromBenefits" class="text-sm gradient-bg text-white px-4 py-2 rounded-full font-medium">
262
+ Join to Access All Benefits
263
+ </button>
264
+ </div>
265
+ </div>
266
+
267
+ <script>
268
+ // Modal functionality
269
+ const openSignup = document.getElementById('openSignup');
270
+ const openSignupHero = document.getElementById('openSignupHero');
271
+ const openSignupFromBenefits = document.getElementById('openSignupFromBenefits');
272
+ const closeSignup = document.getElementById('closeSignup');
273
+ const signupModal = document.getElementById('signupModal');
274
+ const signupForm = document.getElementById('signupForm');
275
+
276
+ // Benefits panel functionality
277
+ const benefitsBtn = document.getElementById('benefitsBtn');
278
+ const benefitsPanel = document.getElementById('benefitsPanel');
279
+
280
+ // Open modal from various buttons
281
+ [openSignup, openSignupHero, openSignupFromBenefits].forEach(btn => {
282
+ btn.addEventListener('click', () => {
283
+ signupModal.classList.add('active');
284
+ document.body.style.overflow = 'hidden';
285
+ });
286
+ });
287
+
288
+ // Close modal
289
+ closeSignup.addEventListener('click', () => {
290
+ signupModal.classList.remove('active');
291
+ document.body.style.overflow = 'auto';
292
+ });
293
+
294
+ // Form submission
295
+ signupForm.addEventListener('submit', (e) => {
296
+ e.preventDefault();
297
+ // Here you would normally send the form data to your backend
298
+ alert('Application submitted! We will review your information and get back to you soon.');
299
+ signupModal.classList.remove('active');
300
+ document.body.style.overflow = 'auto';
301
+ signupForm.reset();
302
+ });
303
+
304
+ // Toggle benefits panel
305
+ benefitsBtn.addEventListener('click', () => {
306
+ benefitsPanel.classList.toggle('active');
307
+ });
308
+
309
+ // Close benefits panel when clicking outside
310
+ document.addEventListener('click', (e) => {
311
+ if (!benefitsPanel.contains(e.target) && e.target !== benefitsBtn) {
312
+ benefitsPanel.classList.remove('active');
313
+ }
314
+ });
315
+
316
+ // Close modal when clicking on overlay
317
+ signupModal.addEventListener('click', (e) => {
318
+ if (e.target === signupModal) {
319
+ signupModal.classList.remove('active');
320
+ document.body.style.overflow = 'auto';
321
+ }
322
+ });
323
+ </script>
324
+ <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=privateuserh/privsmia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
325
+ </html>