896 行
34 KiB
HTML
896 行
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Minecraft Profile Center</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
|
|
<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=Press+Start+2P&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-color: #1a1a1a;
|
|
--text-color: #ffffff;
|
|
--minecraft-green: #59a228;
|
|
--minecraft-dark-green: #376318;
|
|
--wood-light: #a07449;
|
|
--wood-dark: #634329;
|
|
--wood-border: #3d2919;
|
|
--gold: #fcc201;
|
|
--purple: #aa00aa;
|
|
--iron: #c6c6c6;
|
|
--diamond: #3fd2ea;
|
|
--red: #aa0000;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #2c2c2c;
|
|
background-image:
|
|
linear-gradient(45deg, #252525 25%, transparent 25%),
|
|
linear-gradient(-45deg, #252525 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, #252525 75%),
|
|
linear-gradient(-45deg, transparent 75%, #252525 75%);
|
|
background-size: 40px 40px;
|
|
font-family: 'Press Start 2P', cursive;
|
|
color: var(--text-color);
|
|
width: 1920px;
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.flex { display: flex; }
|
|
.flex-col { flex-direction: column; }
|
|
.items-center { align-items: center; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.gap-2 { gap: 8px; }
|
|
.gap-4 { gap: 16px; }
|
|
.w-full { width: 100%; }
|
|
.h-full { height: 100%; }
|
|
|
|
/* Minecraft UI Components */
|
|
.mc-btn {
|
|
background-color: #7d7d7d;
|
|
border: 4px solid #000;
|
|
border-top-color: #dedede;
|
|
border-left-color: #dedede;
|
|
border-right-color: #555;
|
|
border-bottom-color: #555;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
color: white;
|
|
text-decoration: none;
|
|
position: relative;
|
|
}
|
|
|
|
.mc-btn:active, .mc-btn.active {
|
|
background-color: #555;
|
|
border-top-color: #333;
|
|
border-left-color: #333;
|
|
border-right-color: #dedede;
|
|
border-bottom-color: #dedede;
|
|
color: #aaa;
|
|
}
|
|
|
|
.mc-card {
|
|
background-color: #c6c6c6;
|
|
border: 4px solid #000;
|
|
border-top-color: #fff;
|
|
border-left-color: #fff;
|
|
border-right-color: #555;
|
|
border-bottom-color: #555;
|
|
padding: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.mc-card-inner {
|
|
background-color: #8b8b8b;
|
|
border: 4px solid #373737;
|
|
border-right-color: #fff;
|
|
border-bottom-color: #fff;
|
|
padding: 16px;
|
|
height: 100%;
|
|
}
|
|
|
|
.mc-wood-panel {
|
|
background-color: var(--wood-light);
|
|
background-image:
|
|
linear-gradient(90deg, rgba(0,0,0,0.1) 50%, transparent 50%),
|
|
linear-gradient(rgba(0,0,0,0.1) 50%, transparent 50%);
|
|
background-size: 8px 8px;
|
|
border: 4px solid var(--wood-border);
|
|
box-shadow: inset 4px 4px 0 var(--wood-dark), inset -4px -4px 0 var(--wood-dark);
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Top Nav */
|
|
nav {
|
|
background: rgba(0,0,0,0.8);
|
|
padding: 20px 40px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
border-bottom: 4px solid #555;
|
|
}
|
|
|
|
.nav-brand { font-size: 24px; color: var(--diamond); text-shadow: 2px 2px #000; }
|
|
.nav-links { gap: 20px; }
|
|
|
|
/* Main Container */
|
|
.container {
|
|
padding: 40px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* User Info Card */
|
|
.user-hero {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr 400px;
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.avatar-container {
|
|
width: 160px;
|
|
height: 160px;
|
|
background: #000;
|
|
border: 4px solid #fff;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.user-details h1 {
|
|
font-size: 32px;
|
|
margin: 0 0 10px 0;
|
|
text-shadow: 3px 3px 0 #000;
|
|
}
|
|
|
|
.badge-lv {
|
|
display: inline-block;
|
|
background: var(--gold);
|
|
color: #000;
|
|
padding: 8px 12px;
|
|
border: 2px solid #fff;
|
|
margin-right: 10px;
|
|
box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.title-banner {
|
|
display: inline-block;
|
|
background: var(--purple);
|
|
padding: 8px 16px;
|
|
border: 2px solid #d369d3;
|
|
text-shadow: 2px 2px #000;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.xp-bar-container {
|
|
width: 100%;
|
|
height: 24px;
|
|
background: #333;
|
|
border: 2px solid #fff;
|
|
margin-top: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.xp-bar-fill {
|
|
height: 100%;
|
|
background: var(--minecraft-green);
|
|
width: 0%; /* JS will animate */
|
|
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.xp-bar-fill::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-image: linear-gradient(
|
|
45deg,
|
|
rgba(255, 255, 255, 0.2) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255, 255, 255, 0.2) 50%,
|
|
rgba(255, 255, 255, 0.2) 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
.xp-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 10px;
|
|
color: #fff;
|
|
text-shadow: 1px 1px #000;
|
|
z-index: 2;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: rgba(0,0,0,0.3);
|
|
border: 2px solid rgba(255,255,255,0.2);
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-val { font-size: 20px; color: var(--gold); margin-bottom: 5px; }
|
|
.stat-label { font-size: 10px; color: #ccc; }
|
|
|
|
/* 3 Columns Layout */
|
|
.main-content {
|
|
display: grid;
|
|
grid-template-columns: 25% 50% 25%;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* Column Styles */
|
|
.col-card {
|
|
background: #c6c6c6;
|
|
border: 4px solid #555;
|
|
padding: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.col-card-inner {
|
|
background: #222;
|
|
border: 2px solid #000;
|
|
padding: 15px;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.card-header {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
border-bottom: 2px solid #555;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Pie Chart Simulation */
|
|
.pie-chart-wrap {
|
|
position: relative;
|
|
width: 140px;
|
|
height: 140px;
|
|
margin: 20px auto;
|
|
border-radius: 50%;
|
|
background: conic-gradient(
|
|
var(--minecraft-green) 0% 50%,
|
|
var(--gold) 50% 80%,
|
|
var(--red) 80% 100%
|
|
);
|
|
border: 4px solid #000;
|
|
box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* Activity Grid */
|
|
.activity-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 4px;
|
|
margin-top: 15px;
|
|
}
|
|
.activity-cell {
|
|
width: 100%;
|
|
padding-top: 100%;
|
|
background: #333;
|
|
position: relative;
|
|
}
|
|
.activity-cell[data-level="1"] { background: #1a4d1a; }
|
|
.activity-cell[data-level="2"] { background: #2b7a2b; }
|
|
.activity-cell[data-level="3"] { background: #40b340; }
|
|
.activity-cell[data-level="4"] { background: #5cd65c; }
|
|
|
|
/* Achievement Wall */
|
|
.achievement-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 15px;
|
|
padding: 20px;
|
|
background: url('https://www.transparenttextures.com/patterns/wood-pattern.png') #634329;
|
|
border: 8px solid #3d2919;
|
|
box-shadow: inset 0 0 20px #000;
|
|
}
|
|
|
|
.achievement-slot {
|
|
aspect-ratio: 1;
|
|
background: rgba(0,0,0,0.3);
|
|
border: 2px solid #3d2919;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
transition: transform 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
.achievement-slot:hover {
|
|
transform: scale(1.1);
|
|
background: rgba(255,255,255,0.1);
|
|
z-index: 10;
|
|
}
|
|
.achievement-icon {
|
|
font-size: 32px;
|
|
filter: drop-shadow(2px 2px 0 #000);
|
|
}
|
|
.locked { filter: grayscale(1) brightness(0.5); }
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
bottom: 120%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #111;
|
|
border: 2px solid #fff;
|
|
padding: 8px;
|
|
font-size: 10px;
|
|
width: 150px;
|
|
text-align: center;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s;
|
|
z-index: 20;
|
|
}
|
|
.achievement-slot:hover .tooltip { opacity: 1; }
|
|
|
|
/* Learning Path */
|
|
.path-row { margin-bottom: 15px; }
|
|
.path-label { font-size: 12px; margin-bottom: 5px; display: flex; justify-content: space-between; }
|
|
.path-track {
|
|
height: 16px;
|
|
background: #000;
|
|
border: 2px solid #555;
|
|
position: relative;
|
|
}
|
|
.path-fill {
|
|
height: 100%;
|
|
background: var(--diamond);
|
|
width: 0;
|
|
transition: width 1s ease-out;
|
|
position: relative;
|
|
}
|
|
.path-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0;
|
|
width: 4px;
|
|
background: #fff;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Leaderboard */
|
|
.leaderboard-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border-bottom: 2px solid #333;
|
|
font-size: 12px;
|
|
}
|
|
.leaderboard-item.highlight {
|
|
background: rgba(255, 215, 0, 0.2);
|
|
border: 2px solid var(--gold);
|
|
}
|
|
.rank { width: 30px; text-align: center; font-weight: bold; }
|
|
.user { flex-grow: 1; padding-left: 10px; }
|
|
.score { color: var(--gold); }
|
|
|
|
/* Daily Tasks */
|
|
.task-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px dashed #444;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
.checkbox-custom {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #777;
|
|
background: #000;
|
|
margin-right: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.checked .checkbox-custom::after {
|
|
content: '✓';
|
|
color: var(--minecraft-green);
|
|
font-size: 14px;
|
|
}
|
|
.task-xp { margin-left: auto; color: #888; font-size: 10px; }
|
|
|
|
/* Treasure Chest */
|
|
.treasure-box {
|
|
text-align: center;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
.chest-icon {
|
|
font-size: 64px;
|
|
color: var(--gold);
|
|
filter: drop-shadow(0 0 10px var(--gold));
|
|
animation: bounce 2s infinite;
|
|
}
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-10px); }
|
|
}
|
|
.chest-glow {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100px; height: 100px;
|
|
background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
|
|
50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
|
|
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0; w-full; h-full;
|
|
width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.8);
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.modal-content {
|
|
background: #c6c6c6;
|
|
border: 4px solid #fff;
|
|
padding: 4px;
|
|
width: 400px;
|
|
text-align: center;
|
|
}
|
|
.modal-inner {
|
|
background: #222;
|
|
border: 4px solid #555;
|
|
padding: 30px;
|
|
color: #fff;
|
|
}
|
|
.reward-icon { font-size: 48px; margin: 20px 0; display: block; }
|
|
.close-btn {
|
|
background: var(--red);
|
|
border: 2px solid #fff;
|
|
color: #fff;
|
|
padding: 10px 20px;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="flex justify-between items-center">
|
|
<div class="nav-brand"><i class="ri-code-box-line"></i> CRAFTCODE</div>
|
|
<div class="nav-links flex">
|
|
<a href="#" class="mc-btn">Home</a>
|
|
<a href="#" class="mc-btn">Problems</a>
|
|
<a href="#" class="mc-btn active">Profile</a>
|
|
<a href="#" class="mc-btn">Shop</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<!-- User Hero Section -->
|
|
<div class="mc-wood-panel user-hero">
|
|
<div class="avatar-container">
|
|
<!-- Using a pixelated avatar placeholder -->
|
|
<img src="https://api.dicebear.com/7.x/pixel-art/svg?seed=Steve&backgroundColor=b6e3f4" alt="Avatar" class="avatar-img">
|
|
</div>
|
|
|
|
<div class="user-details flex flex-col justify-center">
|
|
<div class="flex items-center">
|
|
<h1>CodeMaster2024</h1>
|
|
</div>
|
|
<div style="color: #ddd; font-size: 14px; margin-bottom: 10px;">Passionate problem solver</div>
|
|
<div class="flex items-center">
|
|
<div class="badge-lv"><i class="ri-shield-star-fill"></i> Lv.25</div>
|
|
<div class="title-banner">Algorithm Expert</div>
|
|
</div>
|
|
|
|
<div class="xp-bar-container">
|
|
<div class="xp-bar-fill" id="mainXP" data-width="84.5%"></div>
|
|
<div class="xp-text">8,450 / 10,000 XP</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-val">128</div>
|
|
<div class="stat-label">Problems</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-val">456</div>
|
|
<div class="stat-label">Submits</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-val">85%</div>
|
|
<div class="stat-label">Acceptance</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-val">15🔥</div>
|
|
<div class="stat-label">Streak</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Three Column Content -->
|
|
<div class="main-content">
|
|
<!-- Left Column -->
|
|
<div class="left-col">
|
|
<div class="col-card">
|
|
<div class="col-card-inner">
|
|
<div class="card-header">Difficulty Stats</div>
|
|
<div class="pie-chart-wrap"></div>
|
|
<div class="flex justify-center gap-4" style="font-size: 10px; margin-top: 10px;">
|
|
<span style="color:var(--minecraft-green)">Easy</span>
|
|
<span style="color:var(--gold)">Med</span>
|
|
<span style="color:var(--red)">Hard</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-card">
|
|
<div class="col-card-inner">
|
|
<div class="card-header">Activity Log</div>
|
|
<div style="font-size: 10px; color: #aaa; text-align: center; margin-bottom: 5px;">Last 30 Days</div>
|
|
<div class="activity-grid" id="activityGrid">
|
|
<!-- Generated by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-card">
|
|
<div class="col-card-inner">
|
|
<div class="card-header">Timeline</div>
|
|
<div class="flex flex-col gap-2" style="font-size: 10px; color: #ccc;">
|
|
<div style="border-left: 2px solid #555; padding-left: 8px;">
|
|
<div style="color: var(--minecraft-green)">Solved "Two Sum"</div>
|
|
<div style="font-size: 8px; color: #888;">2 hours ago</div>
|
|
</div>
|
|
<div style="border-left: 2px solid #555; padding-left: 8px;">
|
|
<div style="color: var(--red)">Failed "Dijkstra"</div>
|
|
<div style="font-size: 8px; color: #888;">5 hours ago</div>
|
|
</div>
|
|
<div style="border-left: 2px solid #555; padding-left: 8px;">
|
|
<div style="color: var(--gold)">Badge Unlocked</div>
|
|
<div style="font-size: 8px; color: #888;">1 day ago</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Column -->
|
|
<div class="center-col">
|
|
<div class="col-card">
|
|
<div class="col-card-inner">
|
|
<div class="card-header">Achievement Wall</div>
|
|
<div class="achievement-grid">
|
|
<!-- 15 Slots: 5x3 -->
|
|
<!-- Row 1 -->
|
|
<div class="achievement-slot">
|
|
<i class="ri-sword-fill achievement-icon" style="color: #cd7f32;"></i>
|
|
<div class="tooltip">
|
|
<div style="color: var(--gold)">Novice Slayer</div>
|
|
<div style="margin-top:4px; color:#aaa">Solve 10 Easy</div>
|
|
<div style="color: var(--minecraft-green)">+50 XP</div>
|
|
</div>
|
|
</div>
|
|
<div class="achievement-slot">
|
|
<i class="ri-sword-fill achievement-icon" style="color: #eee;"></i>
|
|
<div class="tooltip">
|
|
<div style="color: var(--gold)">Iron Will</div>
|
|
<div style="margin-top:4px; color:#aaa">Solve 50 Medium</div>
|
|
<div style="color: var(--minecraft-green)">+200 XP</div>
|
|
</div>
|
|
</div>
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-sword-fill achievement-icon" style="color: var(--diamond);"></i>
|
|
<div class="tooltip">LOCKED: Diamond Blade</div>
|
|
</div>
|
|
<div class="achievement-slot">
|
|
<i class="ri-trophy-fill achievement-icon" style="color: var(--gold);"></i>
|
|
<div class="tooltip">
|
|
<div style="color: var(--gold)">Champion</div>
|
|
<div style="margin-top:4px; color:#aaa">Win a Contest</div>
|
|
<div style="color: var(--minecraft-green)">+1000 XP</div>
|
|
</div>
|
|
</div>
|
|
<div class="achievement-slot">
|
|
<i class="ri-book-3-fill achievement-icon" style="color: #a0522d;"></i>
|
|
<div class="tooltip">
|
|
<div style="color: var(--gold)">Scholar</div>
|
|
<div style="margin-top:4px; color:#aaa">Read 100 Articles</div>
|
|
<div style="color: var(--minecraft-green)">+100 XP</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2 -->
|
|
<div class="achievement-slot">
|
|
<i class="ri-flask-fill achievement-icon" style="color: #ff69b4;"></i>
|
|
<div class="tooltip">
|
|
<div style="color: var(--gold)">Alchemist</div>
|
|
<div style="margin-top:4px; color:#aaa">Optimize 10 times</div>
|
|
<div style="color: var(--minecraft-green)">+150 XP</div>
|
|
</div>
|
|
</div>
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-fire-fill achievement-icon" style="color: orange;"></i>
|
|
<div class="tooltip">LOCKED: Inferno</div>
|
|
</div>
|
|
<div class="achievement-slot">
|
|
<i class="ri-flashlight-fill achievement-icon" style="color: yellow;"></i>
|
|
<div class="tooltip">
|
|
<div style="color: var(--gold)">Speedster</div>
|
|
<div style="margin-top:4px; color:#aaa">Solve in 5 mins</div>
|
|
<div style="color: var(--minecraft-green)">+50 XP</div>
|
|
</div>
|
|
</div>
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-star-fill achievement-icon" style="color: cyan;"></i>
|
|
<div class="tooltip">LOCKED: Star Player</div>
|
|
</div>
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-map-pin-user-fill achievement-icon" style="color: var(--minecraft-green);"></i>
|
|
<div class="tooltip">LOCKED: Explorer</div>
|
|
</div>
|
|
|
|
<!-- Row 3 -->
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-shield-fill achievement-icon" style="color: gray;"></i>
|
|
<div class="tooltip">LOCKED: Guardian</div>
|
|
</div>
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-hammer-fill achievement-icon" style="color: #ddd;"></i>
|
|
<div class="tooltip">LOCKED: Builder</div>
|
|
</div>
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-bug-fill achievement-icon" style="color: var(--red);"></i>
|
|
<div class="tooltip">LOCKED: Bug Hunter</div>
|
|
</div>
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-compass-3-fill achievement-icon" style="color: gold;"></i>
|
|
<div class="tooltip">LOCKED: Navigator</div>
|
|
</div>
|
|
<div class="achievement-slot locked">
|
|
<i class="ri-vip-crown-fill achievement-icon" style="color: var(--purple);"></i>
|
|
<div class="tooltip">LOCKED: King</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-card">
|
|
<div class="col-card-inner">
|
|
<div class="card-header">Learning Path</div>
|
|
<div class="path-row">
|
|
<div class="path-label">
|
|
<span>Basics</span>
|
|
<span>100%</span>
|
|
</div>
|
|
<div class="path-track"><div class="path-fill" data-width="100%"></div></div>
|
|
</div>
|
|
<div class="path-row">
|
|
<div class="path-label">
|
|
<span>Algorithms</span>
|
|
<span>75%</span>
|
|
</div>
|
|
<div class="path-track"><div class="path-fill" data-width="75%"></div></div>
|
|
</div>
|
|
<div class="path-row">
|
|
<div class="path-label">
|
|
<span>Data Structures</span>
|
|
<span>60%</span>
|
|
</div>
|
|
<div class="path-track"><div class="path-fill" data-width="60%"></div></div>
|
|
</div>
|
|
<div class="path-row">
|
|
<div class="path-label">
|
|
<span>Advanced DP</span>
|
|
<span>40%</span>
|
|
</div>
|
|
<div class="path-track"><div class="path-fill" data-width="40%"></div></div>
|
|
</div>
|
|
<div class="path-row">
|
|
<div class="path-label">
|
|
<span>Contest Prep</span>
|
|
<span>20%</span>
|
|
</div>
|
|
<div class="path-track"><div class="path-fill" data-width="20%"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="right-col">
|
|
<div class="col-card">
|
|
<div class="col-card-inner">
|
|
<div class="card-header">Leaderboard</div>
|
|
<div class="leaderboard-item">
|
|
<div class="rank">1</div>
|
|
<div class="user">Notch <i class="ri-vip-crown-fill" style="color:gold"></i></div>
|
|
<div class="score">99k</div>
|
|
</div>
|
|
<div class="leaderboard-item">
|
|
<div class="rank">2</div>
|
|
<div class="user">Jeb_ <i class="ri-medal-fill" style="color:silver"></i></div>
|
|
<div class="score">85k</div>
|
|
</div>
|
|
<div class="leaderboard-item">
|
|
<div class="rank">3</div>
|
|
<div class="user">Alex <i class="ri-medal-fill" style="color:#cd7f32"></i></div>
|
|
<div class="score">72k</div>
|
|
</div>
|
|
<div class="leaderboard-item">
|
|
<div class="rank">4</div>
|
|
<div class="user">Herobrine</div>
|
|
<div class="score">66k</div>
|
|
</div>
|
|
<div class="leaderboard-item highlight">
|
|
<div class="rank">5</div>
|
|
<div class="user">CodeMaster</div>
|
|
<div class="score">50k</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-card">
|
|
<div class="col-card-inner">
|
|
<div class="card-header">Daily Quests</div>
|
|
<div class="task-item checked">
|
|
<div class="checkbox-custom"></div>
|
|
<div>Login</div>
|
|
<div class="task-xp">10XP</div>
|
|
</div>
|
|
<div class="task-item checked">
|
|
<div class="checkbox-custom"></div>
|
|
<div>Solve 1 Easy</div>
|
|
<div class="task-xp">20XP</div>
|
|
</div>
|
|
<div class="task-item checked">
|
|
<div class="checkbox-custom"></div>
|
|
<div>Review Code</div>
|
|
<div class="task-xp">15XP</div>
|
|
</div>
|
|
<div class="task-item">
|
|
<div class="checkbox-custom"></div>
|
|
<div>Solve 1 Hard</div>
|
|
<div class="task-xp">100XP</div>
|
|
</div>
|
|
<div class="task-item">
|
|
<div class="checkbox-custom"></div>
|
|
<div>Forum Post</div>
|
|
<div class="task-xp">30XP</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-card">
|
|
<div class="col-card-inner" style="display:flex; justify-content:center; align-items:center;">
|
|
<div class="treasure-box" id="chestBtn">
|
|
<div class="chest-glow"></div>
|
|
<i class="ri-treasure-map-line chest-icon"></i>
|
|
<div style="margin-top:10px; font-size: 10px; color: var(--gold);">Daily Reward</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reward Modal -->
|
|
<div class="modal" id="rewardModal">
|
|
<div class="modal-content">
|
|
<div class="modal-inner">
|
|
<h2>CHEST OPENED!</h2>
|
|
<i class="ri-diamond-fill reward-icon" style="color: var(--diamond);"></i>
|
|
<p>You found <span style="color:var(--gold); font-size: 20px;">500 XP</span></p>
|
|
<p style="font-size: 10px; color: #aaa; margin-top: 10px;">Rare Item Found: Diamond Boots</p>
|
|
<button class="close-btn" id="closeModal">CLAIM</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Animate XP Bar
|
|
const xpBar = document.getElementById('mainXP');
|
|
setTimeout(() => {
|
|
xpBar.style.width = xpBar.getAttribute('data-width');
|
|
}, 500);
|
|
|
|
// Animate Learning Paths
|
|
const paths = document.querySelectorAll('.path-fill');
|
|
paths.forEach(path => {
|
|
setTimeout(() => {
|
|
path.style.width = path.getAttribute('data-width');
|
|
}, 800);
|
|
});
|
|
|
|
// Activity Grid Generator
|
|
const activityGrid = document.getElementById('activityGrid');
|
|
for(let i=0; i<30; i++) {
|
|
const cell = document.createElement('div');
|
|
cell.className = 'activity-cell';
|
|
// Random activity level 0-4
|
|
const level = Math.random() > 0.3 ? Math.floor(Math.random() * 5) : 0;
|
|
if(level > 0) cell.setAttribute('data-level', level);
|
|
|
|
// Add tooltip on hover
|
|
cell.title = `Day ${30-i}: ${level*2} submissions`;
|
|
activityGrid.appendChild(cell);
|
|
}
|
|
|
|
// Task Checkbox Logic
|
|
const tasks = document.querySelectorAll('.task-item');
|
|
tasks.forEach(task => {
|
|
task.addEventListener('click', () => {
|
|
task.classList.toggle('checked');
|
|
// Add simple sound effect logic here if audio was allowed
|
|
});
|
|
});
|
|
|
|
// Treasure Chest Logic
|
|
const chestBtn = document.getElementById('chestBtn');
|
|
const modal = document.getElementById('rewardModal');
|
|
const closeBtn = document.getElementById('closeModal');
|
|
|
|
chestBtn.addEventListener('click', () => {
|
|
modal.style.display = 'flex';
|
|
});
|
|
|
|
closeBtn.addEventListener('click', () => {
|
|
modal.style.display = 'none';
|
|
});
|
|
|
|
// Close modal on outside click
|
|
modal.addEventListener('click', (e) => {
|
|
if(e.target === modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |