Hugging Face's logo

Spaces:
MidouEmail
/
biosphere-clone-hub
Running

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

i want u to use something like in this picture https://user-images.githubusercontent.com/23019968/82480022-ce981000-9a98-11ea-8d60-403846c7004e.png

Browse files

but of course just icons and soft background
as a button with another circle with plus button , keep the text click to add sovial media , so user can click the social media picture so the modal box open and he can choose his social media and add his handle and the true icon appear in the place of picture and the and the plus button too apear, so usur can add another and another social media

Files changed (1) hide show
  1. index.html +66 -42
index.html CHANGED
@@ -160,50 +160,74 @@
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>
 
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>