From 4e77aa8f18d4b00773b696f62c5fc93502f4f878 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Tue, 16 Sep 2025 17:43:57 +0000 Subject: [PATCH] Create leaderboard with profile modal --- assets/css/custom.css | 219 +++++++++++++++++++++++++++++ index.php | 320 ++++++++++++++++++++++++++---------------- 2 files changed, 418 insertions(+), 121 deletions(-) create mode 100644 assets/css/custom.css diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..c928130 --- /dev/null +++ b/assets/css/custom.css @@ -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; +} diff --git a/index.php b/index.php index e13ae95..6531aa3 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,209 @@ 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 ''; + case 'down': + return ''; + default: + return ''; + } +} + +function get_trend_icon_modal($trend) { + switch ($trend) { + case 'up': + return ''; + case 'down': + return ''; + default: + return ''; + } +} ?> - + - - - New Style - - - - + + + B3SC Leaderboard + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

Flatlogic AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+
+

B3SC Leaderboard

+

Season 1 - Premier Division

+
+ + +
+
+ $player): ?> +
+
+
+ B3SC #<?php echo $player['rank']; ?> ranked player +
+
PTS
+
+
+ +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
RankPlayerPointsTrend
+
+
-
- + + + + + +