Skip to content

Commit 6091799

Browse files
Ali-CheikhAli-Cheikh
committed
fix(profile): enhance profile card layout and improve contact details display
"Class work"
1 parent a2ba030 commit 6091799

1 file changed

Lines changed: 75 additions & 42 deletions

File tree

‎profile/main.js‎

Lines changed: 75 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ document.addEventListener("DOMContentLoaded", function() {
2020
// Set initial background
2121
document.body.style.background = "url(https://tccards.tn/Assets/bg.png) center fixed";
2222
document.body.style.backgroundSize = "cover";
23-
document.body.style.backdropFilter = "blur(5px)";
23+
document.body.style.backdropFilter = "blur(5px)";
2424

2525
// Extract identifier from URL hash
2626
const hash = window.location.hash.substring(1);
@@ -184,41 +184,70 @@ function handleProfileData(data, plan) {
184184
};
185185
// Render the profile card
186186
container.innerHTML = `
187-
<div class="w-full container max-w-md p-6 md:p-24 rounded-xl shadow-lg mx-auto" style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);">
188-
<div class="flex justify-end mb-0 top-right" onclick="showShareOptions('${escapeHtml(profileData.link)}')">
189-
<div class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center">
190-
<i class="fas fa-share-alt text-gray-400"></i>
191-
</div>
192-
</div>
193-
<div class="flex flex-col items-center">
194-
<img src="${escapeHtml(profileData.profilePic)}" class="w-32 h-32 bg-gray-800 rounded-full mb-4 profile-picture" alt="${escapeHtml(profileData.name)}'s profile">
195-
<div class="w-full h-12 bg-gray-800 rounded mb-2 flex items-center justify-center">
196-
<h1 class="text-xl text-2xl font-bold text-white">${escapeHtml(profileData.name)}</h1>
197-
</div>
198-
${profileData.tagline ? `<div class="w-full h-full bg-gray-800 rounded mb-4 flex items-center justify-center"><p class="text-gray-300">${escapeHtml(profileData.tagline)}</p></div>` : ''}
199-
<div class="w-full bg-transparent mb-4">
200-
${renderSocialLinks(profileData.socialLinks)}
201-
</div>
202-
${(profileData.email || profileData.phone || profileData.address) ?
203-
`<div class="w-48 h-12 bg-gray-800 rounded mb-4 flex items-center justify-center">
204-
<button class="contact-btn" onclick="showContactDetails(${escapeHtml(JSON.stringify({
205-
name: profileData.name,
206-
profilepic: profileData.profilePic,
207-
email: profileData.email,
208-
phone: profileData.phone,
209-
address: profileData.address,
210-
style: styles[data['Selected Style']]?.background || styles.default
211-
}))})">Get in Touch</button>
212-
</div>` : ''}
187+
<div class="w-full container max-w-md p-6 md:p-24 rounded-xl shadow-lg mx-auto" style="background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);">
188+
<!-- Share Button -->
189+
<div class="flex justify-end mb-0 top-right" onclick="showShareOptions('@${escapeHtml(profileData.link)}')">
190+
<div class="w-8 h-8 rounded-full flex items-center justify-center" style="background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);">
191+
<i class="fas fa-share-alt text-gray-400"></i>
192+
</div>
193+
</div>
194+
195+
<!-- Profile Image & Name Side by Side -->
196+
<div class="flex items-center w-full mb-4">
197+
<div class="w-1/3 flex justify-center">
198+
<img src="${escapeHtml(profileData.profilePic)}"
199+
class="w-32 h-32 rounded-full profile-picture"
200+
style="background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);"
201+
alt="${escapeHtml(profileData.name)}'s profile">
202+
</div>
203+
<div class="w-2/3 h-32 flex items-center"
204+
style="background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border-radius: 0.75rem;">
205+
<h1 class="text-2xl font-bold text-white w-full text-center">${escapeHtml(profileData.name)}</h1>
206+
</div>
207+
</div>
208+
209+
<!-- Tagline -->
210+
${profileData.tagline ? `
211+
<div class="w-full mb-4 flex items-center justify-center rounded"
212+
style="background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);">
213+
<p class="text-gray-300">${escapeHtml(profileData.tagline)}</p>
214+
</div>
215+
` : ''}
216+
217+
<!-- Social Links -->
218+
<div class="w-full bg-transparent mb-4">
219+
${renderSocialLinks(profileData.socialLinks)}
220+
</div>
221+
222+
<!-- Contact Button -->
223+
${(profileData.email || profileData.phone || profileData.address) ? `
224+
<div class="w-48 h-12 mb-4 flex items-center justify-center rounded"
225+
style="background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);">
226+
<button class="contact-btn" onclick="showContactDetails(${escapeHtml(JSON.stringify({
227+
name: profileData.name,
228+
profilepic: profileData.profilePic,
229+
email: profileData.email,
230+
phone: profileData.phone,
231+
address: profileData.address,
232+
style: styles[data['Selected Style']]?.background || styles.default
233+
}))})">Get in Touch</button>
234+
</div>
235+
` : ''}
236+
237+
<!-- Footer -->
238+
<div class="border-t border-gray-800">
239+
<footer class="footer mt-4">
240+
<div class="w-full h-4 rounded mb-2 mx-auto"
241+
style="background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);">
242+
<a href="https://tccards.tn">Powered by &copy; Total Connect ${new Date().getFullYear()}</a>
213243
</div>
214-
<div class="border-t border-gray-800">
215-
<footer class="footer mt-4">
216-
<div class="w-full h-4 bg-gray-800 rounded mb-2 mx-auto"><a href="https://tccards.tn"> Powered by &copy; Total Connect ${new Date().getFullYear()}</a></div>
217-
<div class="w-1/2 h-4 bg-gray-800 rounded mx-auto"><a href="https://get.tccards.tn" target="_blank" style='color:springgreen'>Get Your Free Card</a></div>
218-
</footer>
244+
<div class="w-1/2 h-4 bg-gray-800 rounded mx-auto">
245+
<a href="https://plans.tccards.tn" target="_blank" style="color:springgreen">Upgrade your Card</a>
219246
</div>
247+
</footer>
220248
</div>
221-
`;
249+
</div>
250+
`;
222251

223252
// Show simple success notification
224253
try {
@@ -338,14 +367,18 @@ async function showContactDetails(contact) {
338367
}
339368

340369
const contactHtml = `
341-
<div class="contact-details-container">
342-
<div class="contact-header">
343-
<img src="${escapeHtml(
344-
contact.profilePic
345-
)}" class="profile-picture" alt="${escapeHtml(
346-
contact.name
347-
)}" onerror="this.src='https://tccards.tn/Assets/default.png'">
348-
<h3>${escapeHtml(contact.name)}</h3>
370+
<div class="contact-details-container">
371+
<div class="flex items-center w-full mb-4">
372+
<div class="w-1/3 flex justify-center">
373+
<img src="${escapeHtml(contact.profilePic)}"
374+
class="w-20 h-20 rounded-full profile-picture"
375+
alt="${escapeHtml(contact.name)}"
376+
onerror="this.src='https://tccards.tn/Assets/default.png'">
377+
</div>
378+
<div class="w-2/3 h-20 flex items-center"
379+
style="background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border-radius: 0.75rem;">
380+
<h3 class="text-xl font-bold text-white w-full text-center">${escapeHtml(contact.name)}</h3>
381+
</div>
349382
</div>
350383
<div class="contact-table">
351384
${
@@ -390,7 +423,7 @@ async function showContactDetails(contact) {
390423
: ""
391424
}
392425
</div>
393-
</div>
426+
</div>
394427
`;
395428

396429
const result = await Swal.fire({

0 commit comments

Comments
 (0)