Add templates/user-profile.html
This commit is contained in:
parent
e44a646331
commit
9d9d896357
687
templates/user-profile.html
Normal file
687
templates/user-profile.html
Normal file
@ -0,0 +1,687 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>TAKEONE - Bahraini Themed User Profile</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Inter:400,700,900&display=swap" rel="stylesheet" />
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
/* Bahrain flag colors:
|
||||
Dark Red: #8A1538
|
||||
White: #FFFFFF
|
||||
Light Red Accent: #C8102E
|
||||
*/
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fef9f9;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #3a1f2b;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
margin: 48px auto;
|
||||
padding: 0 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
gap: 44px;
|
||||
background: white;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 10px 35px rgba(138, 21, 56, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Left Profile Card */
|
||||
.profile-card {
|
||||
position: relative;
|
||||
background: #8a1538;
|
||||
border-radius: 28px;
|
||||
color: white;
|
||||
padding: 60px 36px 48px 36px;
|
||||
box-shadow: 0 8px 28px rgba(138, 21, 56, 0.32);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 700px;
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
border-radius: 50%;
|
||||
border: 6px solid #c8102e;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 6px 35px rgba(200, 16, 46, 0.75);
|
||||
margin-top: -110px;
|
||||
background: white;
|
||||
}
|
||||
.profile-name {
|
||||
margin-top: 24px;
|
||||
font-weight: 900;
|
||||
font-size: 2.3rem;
|
||||
letter-spacing: 0.07em;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 8px rgba(200, 16, 46, 0.8);
|
||||
line-height: 1.1;
|
||||
}
|
||||
.profile-subtitle {
|
||||
margin-top: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
/* Stats with circular arcs */
|
||||
.stats-container {
|
||||
margin-top: 36px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 18px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.stat-arc-wrapper {
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
.stat-arc-svg {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
.stat-value {
|
||||
font-weight: 800;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 6px;
|
||||
letter-spacing: 0.05em;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 2px;
|
||||
}
|
||||
/* Affiliations */
|
||||
.affiliations-section {
|
||||
margin-top: 54px;
|
||||
width: 100%;
|
||||
}
|
||||
.affiliations-title {
|
||||
font-weight: 700;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 14px;
|
||||
letter-spacing: 0.08em;
|
||||
border-bottom: 2px solid #c8102e;
|
||||
padding-bottom: 6px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: #fefefe;
|
||||
filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
|
||||
}
|
||||
.clubs-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
}
|
||||
.club-chip {
|
||||
background: #c8102e;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 32px;
|
||||
font-weight: 600;
|
||||
font-size: 0.98rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 2px 10px rgba(200, 16, 46, 0.5);
|
||||
transition: background 0.3s;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
.club-chip:hover {
|
||||
background: #8a1538;
|
||||
}
|
||||
.club-logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 7px;
|
||||
background: white;
|
||||
border: 2px solid #8a1538;
|
||||
padding: 3px;
|
||||
object-fit: contain;
|
||||
}
|
||||
/* QR Code */
|
||||
.qr-container {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
background: white;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 18px rgba(200, 16, 46, 0.14);
|
||||
}
|
||||
.qr-code {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.qr-label {
|
||||
font-weight: 700;
|
||||
color: #8a1538;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
|
||||
/* Right Content Area */
|
||||
.right-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
min-height: 700px;
|
||||
position: relative;
|
||||
}
|
||||
/* Timeline Section */
|
||||
.timeline-section {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 36px 38px;
|
||||
box-shadow: 0 10px 30px rgba(200, 16, 46, 0.11);
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.timeline-title {
|
||||
font-weight: 800;
|
||||
font-size: 1.5rem;
|
||||
color: #8a1538;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.timeline-list {
|
||||
position: relative;
|
||||
margin-left: 12px;
|
||||
border-left: 3px solid #c8102e;
|
||||
padding-left: 26px;
|
||||
overflow-y: auto;
|
||||
max-height: 360px;
|
||||
}
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 38px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
padding: 12px 18px 12px 10px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
.timeline-item:hover {
|
||||
background: #fcf1f4;
|
||||
}
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 19px;
|
||||
background: #c8102e;
|
||||
border: 3.5px solid #8a1538;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 9px rgba(200,16,46,0.45);
|
||||
}
|
||||
.timeline-header {
|
||||
font-weight: 700;
|
||||
font-size: 1.08rem;
|
||||
color: #8a1538;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.timeline-header i {
|
||||
color: #c8102e;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.timeline-meta {
|
||||
font-weight: 500;
|
||||
opacity: 0.65;
|
||||
font-size: 0.92rem;
|
||||
padding-left: 28px;
|
||||
margin-top: 4px;
|
||||
color: #3a1f2b;
|
||||
}
|
||||
.timeline-amount {
|
||||
font-weight: 700;
|
||||
color: #8a1538;
|
||||
margin-left: auto;
|
||||
font-size: 1.05rem;
|
||||
padding-left: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-completed {
|
||||
color: #1b5e20;
|
||||
font-weight: 700;
|
||||
background: #c8e6c9;
|
||||
border-radius: 10px;
|
||||
padding: 1px 8px;
|
||||
font-size: 0.82rem;
|
||||
margin-left: 18px;
|
||||
}
|
||||
/* Expanded timeline details */
|
||||
.timeline-detail {
|
||||
background: #fce9ed;
|
||||
box-shadow: 0 6px 22px rgba(200, 16, 46, 0.18);
|
||||
border-radius: 18px;
|
||||
margin-top: 14px;
|
||||
padding: 18px 25px 22px 25px;
|
||||
font-size: 1rem;
|
||||
color: #6b2a3c;
|
||||
position: relative;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 18px;
|
||||
font-weight: 900;
|
||||
font-size: 1.3rem;
|
||||
color: #8a1538;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.attachment-container {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.attachment-container img,
|
||||
.attachment-container iframe {
|
||||
border-radius: 16px;
|
||||
width: 180px;
|
||||
height: 130px;
|
||||
box-shadow: 0 0 15px rgba(200,16,46,0.3);
|
||||
object-fit: contain;
|
||||
background: white;
|
||||
}
|
||||
.attachment-link {
|
||||
font-weight: 700;
|
||||
color: #8a1538;
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Highlight and achievements section */
|
||||
.achievements-highlights {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 36px;
|
||||
}
|
||||
.achievements-section {
|
||||
background: white;
|
||||
padding: 32px 40px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 10px 29px rgba(200, 16, 46, 0.12);
|
||||
}
|
||||
.achievements-title {
|
||||
font-weight: 800;
|
||||
font-size: 1.4rem;
|
||||
color: #8a1538;
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.badges-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
justify-content: center;
|
||||
}
|
||||
.badge {
|
||||
background: #c8102e;
|
||||
color: white;
|
||||
padding: 10px 28px;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 3px 16px rgba(200,16,46,0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
transition: background 0.3s ease;
|
||||
cursor: default;
|
||||
}
|
||||
.badge i {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.badge:hover {
|
||||
background: #8a1538;
|
||||
}
|
||||
.highlight-section {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
padding: 30px 38px;
|
||||
box-shadow: 0 10px 28px rgba(200, 16, 46, 0.12);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.highlight-photo,
|
||||
.highlight-video {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 6px 22px rgba(138, 21, 56, 0.12);
|
||||
object-fit: cover;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: transform 0.24s ease;
|
||||
}
|
||||
.highlight-photo:hover,
|
||||
.highlight-video:hover {
|
||||
transform: scale(1.06);
|
||||
box-shadow: 0 8px 26px rgba(138, 21, 56, 0.3);
|
||||
}
|
||||
.highlight-caption {
|
||||
flex-basis: 100%;
|
||||
color: #8a1538;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
letter-spacing: 0.07em;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Recommendations placed full width below Right Content */
|
||||
.recommendations-section {
|
||||
margin: 48px auto 68px auto;
|
||||
max-width: 1140px;
|
||||
padding: 28px 36px;
|
||||
background: #f9e0e6;
|
||||
border-radius: 32px;
|
||||
box-shadow: 0 8px 40px rgba(200, 16, 46, 0.16);
|
||||
color: #8a1538;
|
||||
font-weight: 600;
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: 0.03em;
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
flex-wrap: wrap;
|
||||
user-select: none;
|
||||
}
|
||||
.rec-card {
|
||||
background: white;
|
||||
flex: 1 1 280px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 6px 26px rgba(200, 16, 46, 0.09);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
transition: box-shadow 0.3s ease, transform 0.22s ease;
|
||||
color: #5d1a2c;
|
||||
}
|
||||
.rec-card:hover {
|
||||
box-shadow: 0 15px 50px rgba(200, 16, 46, 0.3);
|
||||
transform: scale(1.05);
|
||||
color: #8a1538;
|
||||
}
|
||||
.rec-img {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 18px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 0 12px rgba(200, 16, 46, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rec-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.rec-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 900;
|
||||
font-size: 1.12rem;
|
||||
gap: 10px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.rec-title i {
|
||||
color: #c8102e;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.rec-desc {
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
color: #5a1428;
|
||||
}
|
||||
|
||||
/* Responsive Layout */
|
||||
@media (max-width: 940px) {
|
||||
.container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 38px;
|
||||
}
|
||||
.profile-card {
|
||||
min-height: auto;
|
||||
margin: 0 auto;
|
||||
max-width: 320px;
|
||||
}
|
||||
.right-content {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.rec-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.rec-img {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Timeline interaction handlers
|
||||
function toggleDetail(id) {
|
||||
const openDetails = document.querySelectorAll('.timeline-detail');
|
||||
openDetails.forEach(detail => {
|
||||
if(detail.id !== 'detail-' + id) detail.style.display = 'none';
|
||||
});
|
||||
|
||||
const item = document.getElementById('detail-' + id);
|
||||
if (item.style.display === 'block') {
|
||||
item.style.display = 'none';
|
||||
} else {
|
||||
item.style.display = 'block';
|
||||
window.scrollTo({ top: item.offsetTop - 60, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
function closeDetail(id) {
|
||||
const item = document.getElementById('detail-' + id);
|
||||
if(item) item.style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Left profile card -->
|
||||
<section class="profile-card">
|
||||
<img class="profile-avatar" src="https://randomuser.me/api/portraits/men/14.jpg" alt="Mohammed Al-Tae Kwon" />
|
||||
<h1 class="profile-name">Mohammed Al-Tae Kwon</h1>
|
||||
<p class="profile-subtitle">🛡️ National Athlete of Bahrain</p>
|
||||
<p class="profile-subtitle">🎂 Age: 27</p>
|
||||
|
||||
<div class="stats-container" aria-label="User stats">
|
||||
<div class="stat-arc-wrapper" title="Years active: 9">
|
||||
<svg class="stat-arc-svg" viewBox="0 0 36 36">
|
||||
<path fill="none" stroke="#c8102e" stroke-width="3" d="M18 2a16 16 0 1 1 0 32a16 16 0 1 1 0-32"/>
|
||||
<path fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="80,100" d="M18 2a16 16 0 1 1 0 32"/>
|
||||
</svg>
|
||||
<div class="stat-value">9</div>
|
||||
<div class="stat-label">Years Active</div>
|
||||
</div>
|
||||
<div class="stat-arc-wrapper" title="Clubs affiliated: 15">
|
||||
<svg class="stat-arc-svg" viewBox="0 0 36 36">
|
||||
<path fill="none" stroke="#c8102e" stroke-width="3" d="M18 2a16 16 0 1 1 0 32a16 16 0 1 1 0-32"/>
|
||||
<path fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="90,100" d="M18 2a16 16 0 1 1 0 32"/>
|
||||
</svg>
|
||||
<div class="stat-value">15</div>
|
||||
<div class="stat-label">Clubs</div>
|
||||
</div>
|
||||
<div class="stat-arc-wrapper" title="Transactions completed: 120">
|
||||
<svg class="stat-arc-svg" viewBox="0 0 36 36">
|
||||
<path fill="none" stroke="#c8102e" stroke-width="3" d="M18 2a16 16 0 1 1 0 32a16 16 0 1 1 0-32"/>
|
||||
<path fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="65,100" d="M18 2a16 16 0 1 1 0 32"/>
|
||||
</svg>
|
||||
<div class="stat-value">120</div>
|
||||
<div class="stat-label">Transactions</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="affiliations-section" aria-label="Affiliated clubs">
|
||||
<h2 class="affiliations-title">Affiliated Clubs</h2>
|
||||
<div class="clubs-list">
|
||||
<span class="club-chip"><img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Martial_Arts_icon.png" class="club-logo" alt="Taekwondo Power Club"/>Taekwondo Power Club</span>
|
||||
<span class="club-chip"><img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Martial_Arts_icon.png" class="club-logo" alt="Elite Fighters"/>Elite Fighters</span>
|
||||
<span class="club-chip"><img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Martial_Arts_icon.png" class="club-logo" alt="Bahraini Warriors"/>Bahraini Warriors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qr-container" aria-label="Membership QR code">
|
||||
<img src="https://api.qrserver.com/v1/create-qr-code/?data=TKD123456789&size=100x100&color=8a1538" alt="Membership QR Code" class="qr-code" />
|
||||
<div class="qr-label">Membership QR</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Right side content -->
|
||||
<section class="right-content">
|
||||
<!-- Timeline -->
|
||||
<article class="timeline-section" aria-label="Transaction timeline">
|
||||
<div class="timeline-title"><i class="fa-solid fa-clock-rotate-left"></i> Transaction Timeline</div>
|
||||
<div class="timeline-list">
|
||||
<div class="timeline-item" onclick="toggleDetail(1)" tabindex="0" role="button" aria-expanded="false" aria-controls="detail-1" aria-label="Membership Renewal on 2025-10-18, BD 30">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-header">
|
||||
<i class="fa-solid fa-credit-card"></i> Membership Renewal
|
||||
<span class="timeline-amount">BD 30</span>
|
||||
<span class="status-completed" aria-label="Completed">Completed</span>
|
||||
</div>
|
||||
<div class="timeline-meta">Taekwondo Power Club · 2025-10-18</div>
|
||||
<div id="detail-1" class="timeline-detail" style="display:none;">
|
||||
<span class="close-btn" onclick="closeDetail(1)" aria-label="Close details">×</span>
|
||||
<b>Reference:</b> TXN-9384124<br />
|
||||
<b>Details:</b> Renewal for 2025/2026 season.<br />
|
||||
<b>Attachment:</b>
|
||||
<div class="attachment-container">
|
||||
<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" target="_blank" class="attachment-link">Download Receipt (PDF)</a>
|
||||
<iframe
|
||||
src="https://docs.google.com/gview?url=https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf&embedded=true"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item" onclick="toggleDetail(2)" tabindex="0" role="button" aria-expanded="false" aria-controls="detail-2" aria-label="Event Registration on 2025-08-22, BD 15">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-header">
|
||||
<i class="fa-solid fa-ticket"></i> Event Registration
|
||||
<span class="timeline-amount">BD 15</span>
|
||||
<span class="status-completed" aria-label="Completed">Completed</span>
|
||||
</div>
|
||||
<div class="timeline-meta">Elite Fighters · 2025-08-22</div>
|
||||
<div id="detail-2" class="timeline-detail" style="display:none;">
|
||||
<span class="close-btn" onclick="closeDetail(2)" aria-label="Close details">×</span>
|
||||
<b>Reference:</b> TXN-8371940<br />
|
||||
<b>Details:</b> Registration for Elite Summer Open.<br />
|
||||
<b>Attachment:</b>
|
||||
<div class="attachment-container">
|
||||
<img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=400&q=80" alt="Event Receipt" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-item" onclick="toggleDetail(3)" tabindex="0" role="button" aria-expanded="false" aria-controls="detail-3" aria-label="Tournament Fee on 2025-07-10, BD 20">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-header">
|
||||
<i class="fa-solid fa-trophy"></i> Tournament Fee
|
||||
<span class="timeline-amount">BD 20</span>
|
||||
<span class="status-completed" aria-label="Completed">Completed</span>
|
||||
</div>
|
||||
<div class="timeline-meta">Taekwondo Power Club · 2025-07-10</div>
|
||||
<div id="detail-3" class="timeline-detail" style="display:none;">
|
||||
<span class="close-btn" onclick="closeDetail(3)" aria-label="Close details">×</span>
|
||||
<b>Reference:</b> TXN-6638194<br />
|
||||
<b>Details:</b> Participation: Bahrain National Tournament 2025.<br />
|
||||
<b>Attachment:</b>
|
||||
<div class="attachment-container">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/3/38/Martial_Arts_icon.png" alt="Tournament Badge" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Achievements and Highlights -->
|
||||
<section class="achievements-highlights" aria-label="Achievements and highlights">
|
||||
<div class="achievements-section">
|
||||
<h2 class="achievements-title"><i class="fa-solid fa-award"></i> Achievements & Badges</h2>
|
||||
<div class="badges-list">
|
||||
<span class="badge"><i class="fa-solid fa-medal"></i> Gold Medal · Nationals 2024</span>
|
||||
<span class="badge"><i class="fa-solid fa-chess-knight"></i> Black Belt Level 3</span>
|
||||
<span class="badge"><i class="fa-solid fa-star"></i> Community Star 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="highlight-section">
|
||||
<img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=400&q=80" class="highlight-photo" alt="Event highlight" />
|
||||
<video class="highlight-video" src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
|
||||
<img src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?auto=format&fit=crop&w=400&q=80" class="highlight-photo" alt="Tournament highlight" />
|
||||
<div class="highlight-caption" aria-live="polite" aria-atomic="true">
|
||||
<i class="fa-solid fa-quote-left"></i> Defeated the top national athlete in the 2024 finals: a victory to remember!
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Recommendations positioned below the container -->
|
||||
<section class="recommendations-section" aria-label="Personalized recommendations">
|
||||
<div class="rec-card" tabindex="0" role="button" aria-describedby="rec1-desc" onclick="alert('Redirecting to Membership Renewal page');">
|
||||
<img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=80&q=80" alt="Membership Renewal" class="rec-img" />
|
||||
<div class="rec-content">
|
||||
<div class="rec-title"><i class="fa-solid fa-hourglass-half"></i> Renew your Taekwondo Power Club membership</div>
|
||||
<div id="rec1-desc" class="rec-desc">Secure your spot next season before the deadline!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rec-card" tabindex="0" role="button" aria-describedby="rec2-desc" onclick="alert('Redirecting to Alumni Meetup page');">
|
||||
<img src="https://images.unsplash.com/photo-1596495578060-02592f618695?auto=format&fit=crop&w=80&q=80" alt="Alumni Meetup" class="rec-img" />
|
||||
<div class="rec-content">
|
||||
<div class="rec-title"><i class="fa-solid fa-people-group"></i> Elite Fighters Alumni Meet-up</div>
|
||||
<div id="rec2-desc" class="rec-desc">Reconnect and share stories with fellow champions next month!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rec-card" tabindex="0" role="button" aria-describedby="rec3-desc" onclick="alert('Redirecting to tournament registration');">
|
||||
<img src="https://images.unsplash.com/photo-1549576490-b0b4831ef60a?auto=format&fit=crop&w=80&q=80" alt="Tournaments Open" class="rec-img" />
|
||||
<div class="rec-content">
|
||||
<div class="rec-title"><i class="fa-solid fa-trophy"></i> New Tournaments Open</div>
|
||||
<div id="rec3-desc" class="rec-desc">Explore upcoming events and test your skills on the big stage!</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user