admin/34109-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create leaderboard with profile modal

Browse Source
This commit is contained in:
Flatlogic Bot 2025-09-16 17:43:57 +00:00
parent 2aeeda9cf4
commit 4e77aa8f18
2 changed files with 418 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
assets/css/custom.css Normal file
View File

@ -0,0 +1,219 @@
body {
font-family: 'Roboto', sans-serif;
background: #FFFFFF;
color: #1A1E38;
min-height: 100vh;
}
.leaderboard-header {
color: #361C7A;
text-transform: uppercase;
letter-spacing: 2px;
}
.podium-card {
background: #F8F9FA;
border: 1px solid #E9ECEF;
border-radius: 0.75rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.podium-card:hover {
transform: translateY(-10px);
box-shadow: 0 0 20px rgba(54, 28, 122, 0.2);
}
.podium-rank {
font-size: 3rem;
font-weight: bold;
}
.podium-card.rank-1 .podium-rank {
color: #FFD700; /* Gold */
}
.podium-card.rank-2 .podium-rank {
color: #C0C0C0; /* Silver */
}
.podium-card.rank-3 .podium-rank {
color: #CD7F32; /* Bronze */
}
.podium-img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #361C7A;
object-fit: cover;
}
.podium-name {
font-size: 1.5rem;
font-weight: bold;
color: #1A1E38;
}
.podium-points {
font-size: 1.2rem;
color: #361C7A;
font-weight: bold;
}
.leaderboard-table-section {
border: 1px solid #E9ECEF;
border-radius: 0.75rem;
overflow: hidden;
}
.leaderboard-table {
background: #FFFFFF;
}
.leaderboard-table thead {
color: #361C7A;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
background-color: #F8F9FA;
}
.leaderboard-table tbody tr {
transition: background-color 0.2s ease;
}
.leaderboard-table tbody tr:hover {
background-color: #F1EEF6;
}
.leaderboard-table .player-name {
font-weight: bold;
}
.table > :not(caption) > * > * {
padding: 1rem 1rem;
vertical-align: middle;
}
.table thead th {
border-bottom-width: 1px;
}
.text-success {
color: #198754 !important;
}
.text-danger {
color: #DC3545 !important;
}
.text-warning {
color: #6E7191 !important;
}
/*
* Profile Card Styles
*/
.profile-card {
background: #FFFFFF;
border-radius: 0.75rem;
border: 1px solid #E9ECEF;
overflow: hidden;
max-width: 700px;
margin: auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.profile-header {
background: #F8F9FA;
padding: 2rem;
text-align: center;
position: relative;
}
.back-link {
position: absolute;
top: 1rem;
left: 1rem;
color: #6E7191;
text-decoration: none;
font-size: 0.9rem;
}
.back-link:hover {
color: #361C7A;
}
.profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid #FFFFFF;
box-shadow: 0 0 10px rgba(54, 28, 122, 0.2);
margin-bottom: 1rem;
object-fit: cover;
}
.profile-name {
color: #1A1E38;
font-weight: 700;
font-size: 2rem;
margin: 0;
}
.profile-position {
color: #6E7191;
font-size: 1.1rem;
}
.profile-joined {
color: #6E7191;
font-size: 0.9rem;
margin-top: 0.5rem;
}
.profile-body {
padding: 2rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1.5rem;
text-align: center;
}
.stat-item {
background: #F8F9FA;
padding: 1rem;
border-radius: 0.5rem;
}
.stat-value {
font-size: 2rem;
font-weight: 700;
color: #361C7A;
}
.stat-label {
font-size: 0.8rem;
color: #6E7191;
text-transform: uppercase;
}
.profile-footer {
padding: 1.5rem 2rem;
background: #F8F9FA;
border-top: 1px solid #E9ECEF;
}
.btn-highlight {
background-color: #FFCB05;
color: #1A1E38;
font-weight: bold;
border: none;
transition: background-color 0.3s ease;
}
.btn-highlight:hover {
background-color: #e6b804;
color: #1A1E38;
}

320
index.php
View File

@ -1,131 +1,209 @@
<?php
declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
// --- Data Simulation ---
$players = [
['rank' => 1, 'name' => 'Alex Mercer', 'points' => 1500, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player1/100/100', 'group' => 'B3SC Strikers', 'position' => 'Forward', 'joined_date' => 'December 1, 2020', 'matches_played' => 98, 'wins' => 70, 'losses' => 28],
['rank' => 2, 'name' => 'Samira Khan', 'points' => 1450, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player2/100/100', 'group' => 'B3SC Defenders', 'position' => 'Defender', 'joined_date' => 'November 15, 2020', 'matches_played' => 102, 'wins' => 65, 'losses' => 37],
['rank' => 3, 'name' => 'Leo Martinez', 'points' => 1420, 'trend' => 'down', 'img' => 'https://picsum.photos/seed/player3/100/100', 'group' => 'B3SC Midfield', 'position' => 'Midfielder', 'joined_date' => 'January 5, 2021', 'matches_played' => 95, 'wins' => 60, 'losses' => 35],
['rank' => 4, 'name' => 'Chloe Davis', 'points' => 1390, 'trend' => 'same', 'img' => 'https://picsum.photos/seed/player4/80/80', 'group' => 'B3SC Strikers', 'position' => 'Forward', 'joined_date' => 'February 20, 2021', 'matches_played' => 90, 'wins' => 58, 'losses' => 32],
['rank' => 5, 'name' => 'Ben Carter', 'points' => 1350, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player5/80/80', 'group' => 'B3SC Midfield', 'position' => 'Midfielder', 'joined_date' => 'March 10, 2021', 'matches_played' => 88, 'wins' => 55, 'losses' => 33],
['rank' => 6, 'name' => 'Eva Rostova', 'points' => 1310, 'trend' => 'down', 'img' => 'https://picsum.photos/seed/player6/80/80', 'group' => 'B3SC Defenders', 'position' => 'Defender', 'joined_date' => 'April 1, 2021', 'matches_played' => 85, 'wins' => 52, 'losses' => 33],
['rank' => 7, 'name' => 'Daniel Park', 'points' => 1280, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player7/80/80', 'group' => 'B3SC Midfield', 'position' => 'Midfielder', 'joined_date' => 'May 25, 2021', 'matches_played' => 82, 'wins' => 50, 'losses' => 32],
['rank' => 8, 'name' => 'Olivia Chen', 'points' => 1250, 'trend' => 'same', 'img' => 'https://picsum.photos/seed/player8/80/80', 'group' => 'B3SC Strikers', 'position' => 'Forward', 'joined_date' => 'June 15, 2021', 'matches_played' => 80, 'wins' => 48, 'losses' => 32],
['rank' => 9, 'name' => 'Niko Bellic', 'points' => 1220, 'trend' => 'down', 'img' => 'https://picsum.photos/seed/player9/80/80', 'group' => 'B3SC Defenders', 'position' => 'Defender', 'joined_date' => 'July 1, 2021', 'matches_played' => 78, 'wins' => 45, 'losses' => 33],
['rank' => 10, 'name' => 'Jasmine Kaur', 'points' => 1190, 'trend' => 'up', 'img' => 'https://picsum.photos/seed/player10/80/80', 'group' => 'B3SC Midfield', 'position' => 'Midfielder', 'joined_date' => 'August 10, 2021', 'matches_played' => 75, 'wins' => 42, 'losses' => 33],
];
$phpVersion = PHP_VERSION;
$now = date('Y-m-d H:i:s');
$podium = array_slice($players, 0, 3);
$rest_of_players = array_slice($players, 3);
function get_trend_icon($trend) {
switch ($trend) {
case 'up':
return '<i class="bi bi-arrow-up-circle-fill text-success"></i>';
case 'down':
return '<i class="bi bi-arrow-down-circle-fill text-danger"></i>';
default:
return '<i class="bi bi-dash-circle-fill" style="color: #6E7191;"></i>';
}
}
function get_trend_icon_modal($trend) {
switch ($trend) {
case 'up':
return '<span class="trend-up"><i class="bi bi-arrow-up-right-circle-fill"></i></span>';
case 'down':
return '<span class="trend-down"><i class="bi bi-arrow-down-right-circle-fill"></i></span>';
default:
return '<span class="trend-same"><i class="bi bi-dash-circle-fill"></i></span>';
}
}
?>
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Style</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color-start: #6a11cb;
--bg-color-end: #2575fc;
--text-color: #ffffff;
--card-bg-color: rgba(255, 255, 255, 0.01);
--card-border-color: rgba(255, 255, 255, 0.1);
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
overflow: hidden;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
animation: bg-pan 20s linear infinite;
z-index: -1;
}
@keyframes bg-pan {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
main {
padding: 2rem;
}
.card {
background: var(--card-bg-color);
border: 1px solid var(--card-border-color);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.loader {
margin: 1.25rem auto 1.25rem;
width: 48px;
height: 48px;
border: 3px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hint {
opacity: 0.9;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
h1 {
font-size: 3rem;
font-weight: 700;
margin: 0 0 1rem;
letter-spacing: -1px;
}
p {
margin: 0.5rem 0;
font-size: 1.1rem;
}
code {
background: rgba(0,0,0,0.2);
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
footer {
position: absolute;
bottom: 1rem;
font-size: 0.8rem;
opacity: 0.7;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B3SC Leaderboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
</head>
<body>
<main>
<div class="card">
<h1>Analyzing your requirements and generating your website…</h1>
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
<span class="sr-only">Loading…</span>
</div>
<p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
<p class="hint">This page will update automatically as the plan is implemented.</p>
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
<div class="container my-5">
<header class="text-center mb-5">
<h1 class="display-4 fw-bold leaderboard-header">B3SC Leaderboard</h1>
<p class="lead" style="color: #6E7191;">Season 1 - Premier Division</p>
</header>
<!-- --- Podium Section --- -->
<section class="podium mb-5">
<div class="row justify-content-center align-items-end">
<?php foreach ($podium as $index => $player): ?>
<div class="col-12 col-md-4 <?php echo $index == 0 ? 'order-md-2' : ($index == 1 ? 'order-md-1' : 'order-md-3'); ?> mb-4 mb-md-0">
<div class="podium-card rank-<?php echo $player['rank']; ?> text-center p-4"
data-bs-toggle="modal" data-bs-target="#profileModal"
data-player-name="<?php echo htmlspecialchars($player['name']); ?>"
data-player-img="<?php echo htmlspecialchars($player['img']); ?>"
data-player-rank="<?php echo $player['rank']; ?>"
data-player-points="<?php echo $player['points']; ?>"
data-player-trend="<?php echo $player['trend']; ?>"
data-player-position="<?php echo htmlspecialchars($player['position']); ?>"
data-player-joined="<?php echo htmlspecialchars($player['joined_date']); ?>"
data-player-matches="<?php echo $player['matches_played']; ?>"
data-player-wins="<?php echo $player['wins']; ?>"
data-player-losses="<?php echo $player['losses']; ?>"
style="cursor: pointer;">
<div class="podium-rank mb-3"><?php echo $player['rank']; ?></div>
<img src="<?php echo $player['img']; ?>" alt="B3SC #<?php echo $player['rank']; ?> ranked player" class="podium-img mb-3">
<div class="podium-name"><?php echo htmlspecialchars($player['name']); ?></div>
<div class="podium-points"><?php echo $player['points']; ?> PTS</div>
</div>
</div>
<?php endforeach; ?>
</div>
</section>
<!-- --- Full Leaderboard Table --- -->
<section class="leaderboard-table-section">
<div class="leaderboard-table p-3">
<table class="table table-hover mb-0">
<thead>
<tr>
<th scope="col">Rank</th>
<th scope="col">Player</th>
<th scope="col" class="text-end">Points</th>
<th scope="col" class="text-center">Trend</th>
</tr>
</thead>
<tbody>
<?php foreach ($rest_of_players as $player): ?>
<tr data-bs-toggle="modal" data-bs-target="#profileModal"
data-player-name="<?php echo htmlspecialchars($player['name']); ?>"
data-player-img="<?php echo htmlspecialchars($player['img']); ?>"
data-player-rank="<?php echo $player['rank']; ?>"
data-player-points="<?php echo $player['points']; ?>"
data-player-trend="<?php echo $player['trend']; ?>"
data-player-position="<?php echo htmlspecialchars($player['position']); ?>"
data-player-joined="<?php echo htmlspecialchars($player['joined_date']); ?>"
data-player-matches="<?php echo $player['matches_played']; ?>"
data-player-wins="<?php echo $player['wins']; ?>"
data-player-losses="<?php echo $player['losses']; ?>"
style="cursor: pointer;">
<th scope="row" class="align-middle"><?php echo $player['rank']; ?></th>
<td class="align-middle player-name"><?php echo htmlspecialchars($player['name']); ?></td>
<td class="align-middle text-end fw-bold" style="color: #361C7A;"><?php echo $player['points']; ?></td>
<td class="align-middle text-center fs-5"><?php echo get_trend_icon($player['trend']); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</section>
</div>
</main>
<footer>
Page updated: <?= htmlspecialchars($now) ?> (UTC)
</footer>
<!-- Profile Modal -->
<div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body p-0">
<!-- Profile content will be injected here -->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const profileModal = document.getElementById('profileModal');
profileModal.addEventListener('show.bs.modal', event => {
const triggerElement = event.relatedTarget;
const name = triggerElement.getAttribute('data-player-name');
const img = triggerElement.getAttribute('data-player-img').replace('/100/100', '/150/150').replace('/80/80', '/150/150');
const rank = triggerElement.getAttribute('data-player-rank');
const points = triggerElement.getAttribute('data-player-points');
const trend = triggerElement.getAttribute('data-player-trend');
const position = triggerElement.getAttribute('data-player-position');
const joined = triggerElement.getAttribute('data-player-joined');
const matches = triggerElement.getAttribute('data-player-matches');
const wins = triggerElement.getAttribute('data-player-wins');
const losses = triggerElement.getAttribute('data-player-losses');
function getTrendIconModal(trend) {
if (trend === 'up') {
return '<span class="trend-up"><i class="bi bi-arrow-up-right-circle-fill"></i></span>';
} else if (trend === 'down') {
return '<span class="trend-down"><i class="bi bi-arrow-down-right-circle-fill"></i></span>';
} else {
return '<span class="trend-same"><i class="bi bi-dash-circle-fill"></i></span>';
}
}
const modalBody = profileModal.querySelector('.modal-body');
modalBody.innerHTML = `
<div class="profile-card">
<div class="profile-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="position: absolute; top: 1rem; right: 1rem;"></button>
<img src="${img}" alt="${name}" class="profile-avatar">
<h1 class="profile-name">${name}</h1>
<p class="profile-position">${position}</p>
<p class="profile-joined">Joined on ${joined}</p>
</div>
<div class="profile-body">
<div class="stats-grid">
<div class="stat-item">
<div class="stat-value">${rank}</div>
<div class="stat-label">Rank</div>
</div>
<div class="stat-item">
<div class="stat-value">${points}</div>
<div class="stat-label">Points</div>
</div>
<div class="stat-item">
<div class="stat-value">${getTrendIconModal(trend)}</div>
<div class="stat-label">Trend</div>
</div>
<div class="stat-item">
<div class="stat-value">${matches}</div>
<div class="stat-label">Played</div>
</div>
<div class="stat-item">
<div class="stat-value">${wins}</div>
<div class="stat-label">Wins</div>
</div>
<div class="stat-item">
<div class="stat-value">${losses}</div>
<div class="stat-label">Losses</div>
</div>
</div>
</div>
</div>
`;
});
</script>
</body>
</html>