Hugging Face's logo

Spaces:
MidouEmail
/
biosphere-clone-hub
Running

App Files Community
MidouEmail commited on
Commit
9b6d1ca
·
verified ·
1 Parent(s): c22ac1a

now i want you to convert this page to be a profile builder and a link in bio builder. but using what you see is what you get "wysiwyg" method, so user when come to this page can generate his profile with just typing in the section that said for example"Tap to Add your Name" and

Browse files

"Tap to Add a Description about Yourself" , and for the social media links and icons i want a button with a dropdown menu so user can choose from all major 10 social media ranked by popularity, and the user choose that platform and add his handle and an automatic icon appear on the page with the correct url to the user profile.
and for the contact button make it vertically using 60% of the section width and same as social media user can add his phone number and its automatic call when its pressed, and the image user must upload his image

Files changed (1) hide show
  1. index.html +103 -22
index.html CHANGED
@@ -1,9 +1,10 @@
 
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>BioSphere Clone</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>
@@ -25,41 +26,121 @@
25
  background-clip: text;
26
  color: transparent;
27
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </style>
29
  </head>
30
  <body class="bg-gray-900 text-white min-h-screen">
 
 
 
 
 
 
 
31
  <!-- Hero Section -->
32
  <div id="vanta-bg" class="min-h-screen flex items-center justify-center px-4">
33
  <div class="glass-card p-6 max-w-md w-full mx-auto text-center" style="aspect-ratio: 9/19; max-height: 95vh;">
34
  <div class="flex flex-col justify-center h-full">
35
- <div class="w-56 h-56 mx-auto mb-6 rounded-full overflow-hidden border-4 border-indigo-500">
36
- <img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
 
 
 
 
 
37
  </div>
38
- <h1 class="text-3xl font-bold mb-3 gradient-text">John Doe</h1>
39
- <a href="#contact" class="px-6 py-3 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-base mb-4">Contact</a>
40
- <p class="text-xl text-gray-300 mb-4">Full Stack Developer & UI/UX Designer</p>
41
- <p class="text-base text-gray-400 mb-8 px-2">Building digital experiences that matter. Passionate about creating clean, efficient code and beautiful interfaces.</p>
42
 
43
- <div class="flex justify-center space-x-4 mb-8">
44
- <a href="#" class="p-3 rounded-full bg-indigo-600 hover:bg-indigo-700 transition">
45
- <i data-feather="github" class="w-5 h-5"></i>
46
- </a>
47
- <a href="#" class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 transition">
48
- <i data-feather="twitter" class="w-5 h-5"></i>
49
- </a>
50
- <a href="#" class="p-3 rounded-full bg-red-500 hover:bg-red-600 transition">
51
- <i data-feather="youtube" class="w-5 h-5"></i>
52
- </a>
53
- <a href="#" class="p-3 rounded-full bg-blue-700 hover:bg-blue-800 transition">
54
- <i data-feather="linkedin" class="w-5 h-5"></i>
55
  </a>
56
  </div>
57
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  <div class="flex justify-center space-x-3 mt-auto">
59
- <a href="#projects" class="px-4 py-2 bg-indigo-600 rounded-full hover:bg-indigo-700 transition text-sm">Projects</a>
60
- <a href="#about" class="px-4 py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-sm">About Me</a>
61
  </div>
62
- </div>
63
  </div>
64
  </div>
65
  <!-- Scripts -->
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Profile Builder - WYSIWYG Link in Bio</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://unpkg.com/feather-icons"></script>
10
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 
26
  background-clip: text;
27
  color: transparent;
28
  }
29
+ .editable {
30
+ cursor: pointer;
31
+ transition: all 0.3s ease;
32
+ }
33
+ .editable:hover {
34
+ background: rgba(255, 255, 255, 0.1);
35
+ border-radius: 4px;
36
+ padding: 2px 4px;
37
+ }
38
+ .social-dropdown {
39
+ display: none;
40
+ position: absolute;
41
+ background: rgba(0, 0, 0, 0.9);
42
+ border: 1px solid rgba(255, 255, 255, 0.2);
43
+ border-radius: 8px;
44
+ padding: 8px;
45
+ z-index: 1000;
46
+ min-width: 200px;
47
+ }
48
+ .image-upload-container {
49
+ position: relative;
50
+ cursor: pointer;
51
+ }
52
+ .image-upload-overlay {
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ right: 0;
57
+ bottom: 0;
58
+ background: rgba(0, 0, 0, 0.7);
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ opacity: 0;
63
+ transition: opacity 0.3s ease;
64
+ border-radius: 50%;
65
+ }
66
+ .image-upload-container:hover .image-upload-overlay {
67
+ opacity: 1;
68
+ }
69
  </style>
70
  </head>
71
  <body class="bg-gray-900 text-white min-h-screen">
72
+ <!-- Builder Controls -->
73
+ <div class="fixed top-4 right-4 z-50">
74
+ <button id="saveProfile" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-full text-sm font-medium transition">
75
+ Save Profile
76
+ </button>
77
+ </div>
78
+
79
  <!-- Hero Section -->
80
  <div id="vanta-bg" class="min-h-screen flex items-center justify-center px-4">
81
  <div class="glass-card p-6 max-w-md w-full mx-auto text-center" style="aspect-ratio: 9/19; max-height: 95vh;">
82
  <div class="flex flex-col justify-center h-full">
83
+ <!-- Profile Image Upload -->
84
+ <div class="image-upload-container w-56 h-56 mx-auto mb-6 rounded-full overflow-hidden border-4 border-indigo-500 border-dashed">
85
+ <img id="profileImage" src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
86
+ <div class="image-upload-overlay">
87
+ <span class="text-white text-sm font-medium">Click to Upload</span>
88
+ </div>
89
+ <input type="file" id="imageUpload" accept="image/*" class="hidden">
90
  </div>
 
 
 
 
91
 
92
+ <!-- Editable Name -->
93
+ <h1 id="editableName" class="text-3xl font-bold mb-3 gradient-text editable" contenteditable="true">
94
+ Tap to Add your Name
95
+ </h1>
96
+
97
+ <!-- Contact Button -->
98
+ <div class="relative mb-4 w-3/5 mx-auto">
99
+ <a id="contactButton" href="tel:" class="px-6 py-3 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-base w-full block editable" contenteditable="true">
100
+ Tap to Add Phone Number
 
 
 
101
  </a>
102
  </div>
103
 
104
+ <!-- Editable Title -->
105
+ <p id="editableTitle" class="text-xl text-gray-300 mb-4 editable" contenteditable="true">
106
+ Tap to Add your Title
107
+ </p>
108
+
109
+ <!-- Editable Description -->
110
+ <p id="editableDescription" class="text-base text-gray-400 mb-8 px-2 editable" contenteditable="true">
111
+ Tap to Add a Description about Yourself
112
+ </p>
113
+
114
+ <!-- Social Media Section -->
115
+ <div class="mb-8">
116
+ <div class="flex justify-center space-x-4 mb-4" id="socialIconsContainer">
117
+ <!-- Social icons will be added here dynamically -->
118
+ </div>
119
+ <button id="addSocialButton" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-full text-sm transition">
120
+ + Add Social Media
121
+ </button>
122
+ <div id="socialDropdown" class="social-dropdown mt-2">
123
+ <div class="grid grid-cols-2 gap-2">
124
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="instagram">Instagram</button>
125
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="facebook">Facebook</button>
126
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="twitter">Twitter</button>
127
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="tiktok">TikTok</button>
128
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="youtube">YouTube</button>
129
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="linkedin">LinkedIn</button>
130
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="snapchat">Snapchat</button>
131
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="pinterest">Pinterest</button>
132
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="reddit">Reddit</button>
133
+ <button class="social-option p-2 text-left hover:bg-gray-700 rounded" data-platform="github">GitHub</button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Action Buttons -->
139
  <div class="flex justify-center space-x-3 mt-auto">
140
+ <button class="px-4 py-2 bg-indigo-600 rounded-full hover:bg-indigo-700 transition text-sm">Projects</button>
141
+ <button class="px-4 py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-sm">About Me</button>
142
  </div>
143
+ </div>
144
  </div>
145
  </div>
146
  <!-- Scripts -->