Hugging Face's logo

Spaces:
MidouEmail
/
biosphere-clone-hub
Running

App Files Community
MidouEmail commited on
Commit
6d65498
·
verified ·
1 Parent(s): dea9e4f

Promote version 263df98 to main

Browse files

Promoted commit 263df98f7eaea49aa2bad06516f17ecab1ae984c to main branch

Files changed (1) hide show
  1. index.html +43 -67
index.html CHANGED
@@ -148,7 +148,7 @@
148
  </div>
149
  <!-- Editable Name -->
150
  <div class="relative mb-3">
151
- <h1 id="editableName" class="text-3xl font-bold text-white text-center min-h-[1.5em] px-2 py-1" contenteditable="true" data-placeholder="Tap to Add your Name">Tap to Add your Name</h1>
152
  </div>
153
  <!-- Contact Button -->
154
  <div class="relative mb-4 w-3/5 mx-auto">
@@ -160,74 +160,50 @@
160
  <p id="editableDescription" class="text-base text-gray-400 mb-8 px-2 editable" contenteditable="true" data-placeholder="Tap to Add a Description about Yourself"></p>
161
  <!-- Social Media Section -->
162
  <div class="mb-8">
163
- <div class="text-center mb-3">
164
- <span class="text-xs text-gray-400">Click to add social media</span>
165
- </div>
166
- <div class="flex justify-center flex-wrap gap-4 mb-4" id="socialIconsContainer">
167
  <!-- Social media icons will be added here -->
168
- <!-- Add button with social media preview -->
169
- <div class="relative group">
170
- <div class="w-16 h-16 rounded-full bg-indigo-600/20 flex items-center justify-center transition cursor-pointer border-2 border-dashed border-indigo-500/50 hover:border-indigo-500" id="addSocialButton">
171
- <i data-feather="plus" class="w-6 h-6 text-indigo-400"></i>
172
- </div>
173
- <div class="absolute -top-1 -right-1 w-6 h-6 bg-indigo-600 rounded-full flex items-center justify-center">
174
- <i data-feather="plus" class="w-3 h-3 text-white"></i>
175
- </div>
176
  </div>
177
- </div>
178
-
179
- <!-- Social Media Selection Modal -->
180
- <div id="socialModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
181
- <div class="bg-gray-800 rounded-lg max-w-sm w-full mx-4">
182
- <div class="p-4 border-b border-gray-700">
183
- <h3 class="text-lg font-medium">Choose Social Media</h3>
184
- </div>
185
- <div class="max-h-60 overflow-y-auto">
186
- <div class="grid grid-cols-3 gap-3 p-4">
187
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="instagram">
188
- <i data-feather="instagram" class="w-6 h-6 mx-auto mb-1"></i>
189
- <span class="text-xs">Instagram</span>
190
- </div>
191
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="facebook">
192
- <i data-feather="facebook" class="w-6 h-6 mx-auto mb-1"></i>
193
- <span class="text-xs">Facebook</span>
194
- </div>
195
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="twitter">
196
- <i data-feather="twitter" class="w-6 h-6 mx-auto mb-1"></i>
197
- <span class="text-xs">Twitter</span>
198
- </div>
199
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="tiktok">
200
- <i data-feather="video" class="w-6 h-6 mx-auto mb-1"></i>
201
- <span class="text-xs">TikTok</span>
202
- </div>
203
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="youtube">
204
- <i data-feather="youtube" class="w-6 h-6 mx-auto mb-1"></i>
205
- <span class="text-xs">YouTube</span>
206
- </div>
207
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="linkedin">
208
- <i data-feather="linkedin" class="w-6 h-6 mx-auto mb-1"></i>
209
- <span class="text-xs">LinkedIn</span>
210
- </div>
211
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="snapchat">
212
- <i data-feather="camera" class="w-6 h-6 mx-auto mb-1"></i>
213
- <span class="text-xs">Snapchat</span>
214
- </div>
215
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="pinterest">
216
- <i data-feather="image" class="w-6 h-6 mx-auto mb-1"></i>
217
- <span class="text-xs">Pinterest</span>
218
- </div>
219
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="reddit">
220
- <i data-feather="message-circle" class="w-6 h-6 mx-auto mb-1"></i>
221
- <span class="text-xs">Reddit</span>
222
- </div>
223
- <div class="social-platform-option p-3 rounded-lg bg-gray-700/50 hover:bg-indigo-600/30 transition cursor-pointer text-center" data-platform="github">
224
- <i data-feather="github" class="w-6 h-6 mx-auto mb-1"></i>
225
- <span class="text-xs">GitHub</span>
226
- </div>
227
- </div>
228
- </div>
229
- <div class="p-4 border-t border-gray-700 flex justify-end">
230
- <button id="closeSocialModal" class="px-4 py-2 text-gray-300 hover:text-white">Cancel</button>
231
  </div>
232
  </div>
233
  </div>
 
148
  </div>
149
  <!-- Editable Name -->
150
  <div class="relative mb-3">
151
+ <h1 id="editableName" class="text-3xl font-bold text-white text-center min-h-[1.5em] px-2 py-1 gradient-text" contenteditable="true" data-placeholder="Tap to Add your Name">Tap to Add your Name</h1>
152
  </div>
153
  <!-- Contact Button -->
154
  <div class="relative mb-4 w-3/5 mx-auto">
 
160
  <p id="editableDescription" class="text-base text-gray-400 mb-8 px-2 editable" contenteditable="true" data-placeholder="Tap to Add a Description about Yourself"></p>
161
  <!-- Social Media Section -->
162
  <div class="mb-8">
163
+ <div class="flex justify-center flex-wrap gap-3 mb-4" id="socialIconsContainer">
 
 
 
164
  <!-- Social media icons will be added here -->
165
+ <div class="flex items-center justify-center space-x-1 mb-2 w-full">
166
+ <span class="social-icon-placeholder"></span>
167
+ <span class="social-icon-placeholder"></span>
168
+ <span class="social-icon-placeholder"></span>
169
+ <span class="text-xs text-gray-400">Click + to add social media</span>
 
 
 
170
  </div>
171
+ <!-- Plus button for adding social media -->
172
+ <div class="relative">
173
+ <button id="addSocialButton" class="w-12 h-12 rounded-full bg-indigo-600 hover:bg-indigo-700 flex items-center justify-center transition">
174
+ <i data-feather="plus" class="w-5 h-5"></i>
175
+ </button>
176
+ <div id="socialDropdown" class="social-dropdown">
177
+ <a class="social-option" data-platform="instagram">
178
+ <i data-feather="instagram"></i> Instagram
179
+ </a>
180
+ <a class="social-option" data-platform="facebook">
181
+ <i data-feather="facebook"></i> Facebook
182
+ </a>
183
+ <a class="social-option" data-platform="twitter">
184
+ <i data-feather="twitter"></i> Twitter
185
+ </a>
186
+ <a class="social-option" data-platform="tiktok">
187
+ <i data-feather="video"></i> TikTok
188
+ </a>
189
+ <a class="social-option" data-platform="youtube">
190
+ <i data-feather="youtube"></i> YouTube
191
+ </a>
192
+ <a class="social-option" data-platform="linkedin">
193
+ <i data-feather="linkedin"></i> LinkedIn
194
+ </a>
195
+ <a class="social-option" data-platform="snapchat">
196
+ <i data-feather="camera"></i> Snapchat
197
+ </a>
198
+ <a class="social-option" data-platform="pinterest">
199
+ <i data-feather="image"></i> Pinterest
200
+ </a>
201
+ <a class="social-option" data-platform="reddit">
202
+ <i data-feather="message-circle"></i> Reddit
203
+ </a>
204
+ <a class="social-option" data-platform="github">
205
+ <i data-feather="github"></i> GitHub
206
+ </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
207
  </div>
208
  </div>
209
  </div>