804 行
30 KiB
HTML
804 行
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1920, initial-scale=1.0">
|
|
<title>CSP Learning Platform - Minecraft UI Kit Design Delivery</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
|
|
<style>
|
|
@font-face {
|
|
font-family: 'DelaGothicOne';
|
|
src: url('https://assets-persist.lovart.ai/agent-static-assets/DelaGothicOne-Regular.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'MiSans';
|
|
src: url('https://assets-persist.lovart.ai/agent-static-assets/MiSans-Regular.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'MiSansBold';
|
|
src: url('https://assets-persist.lovart.ai/agent-static-assets/MiSans-Bold.ttf');
|
|
}
|
|
|
|
:root {
|
|
--mc-grass-top: #5cb85c;
|
|
--mc-grass-side: #4cae4c;
|
|
--mc-dirt: #795548;
|
|
--mc-stone: #9e9e9e;
|
|
--mc-stone-dark: #616161;
|
|
--mc-obsidian: #212121;
|
|
--mc-wood: #8d6e63;
|
|
--mc-wood-dark: #5d4037;
|
|
--mc-gold: #ffd700;
|
|
--mc-diamond: #40e0d0;
|
|
--mc-redstone: #f44336;
|
|
--bg-dark: #1a1a1a;
|
|
--text-light: #f5f5f5;
|
|
--text-gray: #bdbdbd;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
width: 1920px;
|
|
background-color: var(--bg-dark);
|
|
background-image:
|
|
linear-gradient(rgba(26, 26, 26, 0.9), rgba(26, 26, 26, 0.9)),
|
|
url('https://a.lovart.ai/artifacts/agent/W1iXxVdg3xIm5fP9.png'); /* Using texture as bg pattern */
|
|
background-size: cover;
|
|
color: var(--text-light);
|
|
font-family: 'MiSans', sans-serif;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
background: var(--mc-obsidian);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--mc-stone);
|
|
border: 2px solid var(--mc-obsidian);
|
|
}
|
|
|
|
/* Typography */
|
|
h1, h2, h3, h4 {
|
|
font-family: 'DelaGothicOne', sans-serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.6;
|
|
color: var(--text-gray);
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Sidebar Navigation */
|
|
.sidebar {
|
|
width: 320px;
|
|
height: 100vh;
|
|
background-color: rgba(33, 33, 33, 0.95);
|
|
border-right: 4px solid var(--mc-stone-dark);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
padding: 40px 0;
|
|
overflow-y: auto;
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.brand {
|
|
padding: 0 30px 40px;
|
|
border-bottom: 2px dashed var(--mc-stone-dark);
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.brand h1 {
|
|
font-size: 24px;
|
|
color: var(--mc-grass-top);
|
|
text-shadow: 2px 2px 0 #000;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.brand span {
|
|
font-size: 12px;
|
|
background: var(--mc-gold);
|
|
color: #000;
|
|
padding: 4px 8px;
|
|
border: 2px solid #000;
|
|
font-weight: bold;
|
|
box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.nav-menu {
|
|
list-style: none;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.nav-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: var(--text-light);
|
|
padding: 12px 20px;
|
|
border: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
font-family: 'DelaGothicOne', sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.nav-link i {
|
|
margin-right: 15px;
|
|
font-size: 18px;
|
|
color: var(--mc-stone);
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
background-color: var(--mc-stone-dark);
|
|
border: 2px solid var(--text-light);
|
|
box-shadow: 4px 4px 0 #000;
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
|
|
.nav-link:hover i, .nav-link.active i {
|
|
color: var(--mc-grass-top);
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
margin-left: 320px;
|
|
width: 1600px;
|
|
padding: 60px 80px;
|
|
}
|
|
|
|
/* Common Components */
|
|
.section-block {
|
|
margin-bottom: 100px;
|
|
scroll-margin-top: 40px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 4px solid var(--mc-stone-dark);
|
|
position: relative;
|
|
}
|
|
|
|
.section-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 0;
|
|
width: 100px;
|
|
height: 4px;
|
|
background: var(--mc-grass-top);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 36px;
|
|
color: var(--text-light);
|
|
margin-right: 20px;
|
|
text-shadow: 3px 3px 0 #000;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-family: 'MiSans', sans-serif;
|
|
color: var(--mc-stone);
|
|
font-size: 18px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.card {
|
|
background: #2d2d2d;
|
|
border: 4px solid #000;
|
|
box-shadow: 8px 8px 0 rgba(0,0,0,0.5);
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px dashed var(--mc-stone-dark);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 20px;
|
|
color: var(--mc-gold);
|
|
}
|
|
|
|
.pixel-img {
|
|
width: 100%;
|
|
height: auto;
|
|
image-rendering: pixelated; /* Crucial for Minecraft style */
|
|
border: 2px solid #000;
|
|
display: block;
|
|
}
|
|
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
}
|
|
|
|
/* Cover Section */
|
|
.hero {
|
|
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://a.lovart.ai/artifacts/agent/BKErUBAJ8x52GYyY.png') center/cover;
|
|
height: 400px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 4px solid #fff;
|
|
box-shadow: 12px 12px 0 #000;
|
|
margin-bottom: 80px;
|
|
text-align: center;
|
|
position: relative;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.hero-content h1 {
|
|
font-size: 64px;
|
|
color: #fff;
|
|
text-shadow: 4px 4px 0 #000, -2px -2px 0 var(--mc-grass-side);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.hero-content p {
|
|
font-size: 24px;
|
|
color: var(--mc-gold);
|
|
font-family: 'DelaGothicOne', sans-serif;
|
|
text-shadow: 2px 2px 0 #000;
|
|
}
|
|
|
|
.meta-tag {
|
|
background: rgba(0,0,0,0.6);
|
|
padding: 10px 20px;
|
|
border: 2px solid var(--mc-stone);
|
|
display: inline-block;
|
|
margin-top: 30px;
|
|
font-family: 'MiSans', monospace;
|
|
}
|
|
|
|
/* Code Block */
|
|
.code-block {
|
|
background: #1e1e1e;
|
|
padding: 20px;
|
|
border: 2px solid var(--mc-stone-dark);
|
|
font-family: 'Consolas', monospace;
|
|
color: #a9b7c6;
|
|
overflow-x: auto;
|
|
margin-top: 20px;
|
|
}
|
|
.code-keyword { color: #cc7832; }
|
|
.code-string { color: #6a8759; }
|
|
.code-attr { color: #9876aa; }
|
|
.code-comment { color: #808080; }
|
|
|
|
/* Color Swatches */
|
|
.color-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.swatch {
|
|
border: 4px solid #000;
|
|
padding: 10px;
|
|
background: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
.swatch-color {
|
|
height: 100px;
|
|
border: 2px solid rgba(255,255,255,0.2);
|
|
margin-bottom: 10px;
|
|
box-shadow: inset 2px 2px 0 rgba(255,255,255,0.2), inset -2px -2px 0 rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.swatch-info {
|
|
font-family: 'MiSans', monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.swatch-name {
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Download Section */
|
|
.download-list {
|
|
background: #2d2d2d;
|
|
border: 4px solid #000;
|
|
padding: 30px;
|
|
}
|
|
|
|
.download-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
border-bottom: 2px solid var(--mc-stone-dark);
|
|
}
|
|
|
|
.download-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.file-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.file-icon {
|
|
font-size: 32px;
|
|
margin-right: 20px;
|
|
color: var(--mc-stone);
|
|
}
|
|
|
|
.file-name {
|
|
font-family: 'MiSansBold';
|
|
font-size: 18px;
|
|
color: #fff;
|
|
}
|
|
|
|
.file-meta {
|
|
font-size: 14px;
|
|
color: var(--text-gray);
|
|
}
|
|
|
|
.btn-download {
|
|
background: var(--mc-grass-top);
|
|
color: #fff;
|
|
padding: 12px 30px;
|
|
text-decoration: none;
|
|
font-family: 'DelaGothicOne', sans-serif;
|
|
border: 4px solid #000;
|
|
border-bottom-width: 8px; /* 3D effect */
|
|
transition: all 0.1s;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.btn-download:hover {
|
|
transform: translateY(2px);
|
|
border-bottom-width: 6px;
|
|
background: var(--mc-grass-side);
|
|
}
|
|
|
|
.btn-download:active {
|
|
transform: translateY(6px);
|
|
border-bottom-width: 2px;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
margin-top: 100px;
|
|
padding-top: 40px;
|
|
border-top: 4px solid var(--mc-stone-dark);
|
|
text-align: center;
|
|
color: var(--mc-stone);
|
|
font-family: 'MiSans', sans-serif;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
/* Custom Badges */
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 10px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
font-family: 'MiSansBold';
|
|
color: #000;
|
|
border: 2px solid #000;
|
|
}
|
|
.status-new { background: var(--mc-diamond); }
|
|
.status-update { background: var(--mc-gold); }
|
|
|
|
/* Animation */
|
|
@keyframes float {
|
|
0% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
100% { transform: translateY(0px); }
|
|
}
|
|
|
|
.floating {
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<nav class="sidebar">
|
|
<div class="brand">
|
|
<h1>CSP LEARN</h1>
|
|
<span>MINECRAFT EDITION</span>
|
|
</div>
|
|
<ul class="nav-menu">
|
|
<li class="nav-item"><a href="#overview" class="nav-link active"><i class="ri-compass-3-fill"></i> Design Overview</a></li>
|
|
<li class="nav-item"><a href="#ui-kit" class="nav-link"><i class="ri-layout-grid-fill"></i> UI Kit Library</a></li>
|
|
<li class="nav-item"><a href="#pages" class="nav-link"><i class="ri-pages-fill"></i> Page Designs</a></li>
|
|
<li class="nav-item"><a href="#responsive" class="nav-link"><i class="ri-smartphone-fill"></i> Responsive</a></li>
|
|
<li class="nav-item"><a href="#development" class="nav-link"><i class="ri-code-s-slash-fill"></i> Dev Guidelines</a></li>
|
|
<li class="nav-item"><a href="#assets" class="nav-link"><i class="ri-image-2-fill"></i> Image Assets</a></li>
|
|
<li class="nav-item"><a href="#downloads" class="nav-link"><i class="ri-download-cloud-2-fill"></i> Downloads</a></li>
|
|
<li class="nav-item"><a href="#appendix" class="nav-link"><i class="ri-palette-fill"></i> Appendix</a></li>
|
|
</ul>
|
|
<div style="margin-top: auto; padding: 20px; text-align: center; color: #666; font-size: 12px;">
|
|
v1.0.2 Build 20231024
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero" id="overview">
|
|
<div class="hero-content">
|
|
<h1>CSP Learning Platform</h1>
|
|
<p>Minecraft Pixel Art Style UI Kit</p>
|
|
<div class="meta-tag">
|
|
DESIGN DELIVERY DOCUMENT • V1.0 • OCTOBER 2023
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Design Overview -->
|
|
<section class="section-block">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Design Concept</h2>
|
|
<span class="status-badge status-new">NEW</span>
|
|
</div>
|
|
<div class="card">
|
|
<div class="grid-2">
|
|
<div>
|
|
<h3 class="card-title" style="margin-bottom: 20px;">The Voxel World Metaphor</h3>
|
|
<p style="margin-bottom: 20px;">The CSP Learning Platform's design is deeply rooted in the "Minecraft" aesthetic, utilizing a voxel/pixel art style to create an immersive and engaging learning environment for programming students. This choice is strategic:</p>
|
|
<ul style="list-style-position: inside; color: var(--text-gray); line-height: 2;">
|
|
<li><strong>Gamification:</strong> Leveraging the familiarity of sandbox games to make coding challenges feel like quests.</li>
|
|
<li><strong>Modularity:</strong> The block-based nature of Minecraft mirrors the modular nature of code and algorithms.</li>
|
|
<li><strong>Creativity:</strong> Encouraging students to "build" their knowledge just as they build structures in-game.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="card-title" style="margin-bottom: 20px;">Visual Language</h3>
|
|
<p>Our visual language relies on distinct 8-bit textures, bold black borders, and high-contrast colors. The interface uses skeuomorphic elements (wooden signs, stone buttons) combined with flat pixel art to ensure usability while maintaining the theme.</p>
|
|
<br>
|
|
<div style="background: #000; padding: 15px; border: 2px solid var(--mc-stone);">
|
|
<p style="color: var(--mc-grass-top); font-family: 'Consolas', monospace;">> System Status: ONLINE</p>
|
|
<p style="color: var(--mc-gold); font-family: 'Consolas', monospace;">> Style Loaded: PIXEL_ART_V2</p>
|
|
<p style="color: var(--mc-diamond); font-family: 'Consolas', monospace;">> Assets: READY</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- UI Kit Components -->
|
|
<section id="ui-kit" class="section-block">
|
|
<div class="section-header">
|
|
<h2 class="section-title">UI Kit Components</h2>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">Basic Components System</span>
|
|
<i class="ri-hammer-fill" style="color: var(--mc-stone);"></i>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/JBNC9ZCu38GlvB5k.png" alt="Basic UI Components" class="pixel-img">
|
|
<p style="margin-top: 15px; font-size: 14px;">Comprehensive system including color palette, typography hierarchy, input fields, and standard buttons with 4 states (Normal, Hover, Pressed, Disabled).</p>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">Button States & Feedback</span>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/iGOQyJelwI6y5cUG.png" alt="Button States" class="pixel-img">
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">Gamification & Progress</span>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/PN1u4ENvUmKjZLbI.png" alt="Gamification Components" class="pixel-img">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">Level System & XP Visualization</span>
|
|
<span class="status-badge status-update">ANIMATED</span>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/nJ3gAEmRoJyLLcY8.png" alt="Level System" class="pixel-img">
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Page Designs -->
|
|
<section id="pages" class="section-block">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Page Designs</h2>
|
|
</div>
|
|
|
|
<!-- Login -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">01. Login & Authentication</span>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/BKErUBAJ8x52GYyY.png" alt="Login Page" class="pixel-img">
|
|
</div>
|
|
|
|
<!-- Problem Library & Editor -->
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">02. Problem Library</span>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/mA9QlaxiEfFrYUdK.png" alt="Problem Library Page" class="pixel-img">
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">03. Code Editor IDE</span>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/IcCJDu9xkFALNuUS.png" alt="Code Editor Page" class="pixel-img">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile & Contest -->
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">04. User Profile Center</span>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/bkXI4WiboPJwwppy.png" alt="Profile Page" class="pixel-img">
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">05. Contest Arena</span>
|
|
</div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/PtblvMgRI6EWZykt.png" alt="Contest Page" class="pixel-img">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Responsive Design -->
|
|
<section id="responsive" class="section-block">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Responsive Behavior</h2>
|
|
</div>
|
|
<div class="card">
|
|
<img src="https://a.lovart.ai/artifacts/agent/nFDbXNrV4vIb0TAf.png" alt="Responsive Design Showcase" class="pixel-img">
|
|
<div style="margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;">
|
|
<div><i class="ri-macbook-line"></i><br>Desktop (>1200px)</div>
|
|
<div><i class="ri-tablet-line"></i><br>Tablet Landscape (1024px)</div>
|
|
<div><i class="ri-tablet-line" style="transform: rotate(90deg);"></i><br>Tablet Portrait (768px)</div>
|
|
<div><i class="ri-smartphone-line"></i><br>Mobile (< 480px)</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Development Guidelines -->
|
|
<section id="development" class="section-block">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Development Guidelines</h2>
|
|
</div>
|
|
<div class="card">
|
|
<img src="https://a.lovart.ai/artifacts/agent/pwGnBU44IlBbAked.png" alt="CSS Naming" class="pixel-img">
|
|
|
|
<h3 style="margin: 30px 0 15px; color: var(--mc-gold);">Core CSS Implementation (SCSS)</h3>
|
|
<div class="code-block">
|
|
<pre><code><span class="code-comment">// Variables & Mixins</span>
|
|
$mc-grass-top: #5cb85c;
|
|
$mc-dirt: #795548;
|
|
$pixel-scale: 4px;
|
|
|
|
<span class="code-keyword">@mixin</span> pixel-border($color: #000) {
|
|
box-shadow:
|
|
-4px 0 0 0 $color,
|
|
4px 0 0 0 $color,
|
|
0 -4px 0 0 $color,
|
|
0 4px 0 0 $color;
|
|
margin: 4px;
|
|
}
|
|
|
|
<span class="code-keyword">.mc-btn</span> {
|
|
<span class="code-attr">background-color</span>: $mc-stone;
|
|
<span class="code-attr">border</span>: none;
|
|
<span class="code-attr">color</span>: #fff;
|
|
<span class="code-attr">padding</span>: 12px 24px;
|
|
<span class="code-attr">font-family</span>: 'Minecraft', monospace;
|
|
<span class="code-keyword">@include</span> pixel-border(#212121);
|
|
|
|
<span class="code-keyword">&:hover</span> {
|
|
<span class="code-attr">background-color</span>: lighten($mc-stone, 10%);
|
|
<span class="code-attr">transform</span>: translateY(-2px);
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Image Resources -->
|
|
<section id="assets" class="section-block">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Asset Library</h2>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">Navigation Icons (32px)</span></div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/QcxFQeeckVCAJQqf.png" alt="Navigation Icons" class="pixel-img">
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">Difficulty & Prog. Icons</span></div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/hJcFuIpo4xGOKOaI.png" alt="Difficulty Icons" class="pixel-img">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">Tiled Textures (256px)</span></div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/W1iXxVdg3xIm5fP9.png" alt="Textures" class="pixel-img">
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">Achievement Badges</span></div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/vwdnD6uAy43JFude.png" alt="Badges" class="pixel-img">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header"><span class="card-title">Blocks, Particles & Effects</span></div>
|
|
<img src="https://a.lovart.ai/artifacts/agent/SucsD8o76CGC5BbY.png" alt="Blocks and Particles" class="pixel-img">
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Download Resources -->
|
|
<section id="downloads" class="section-block">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Download Resources</h2>
|
|
</div>
|
|
|
|
<div class="download-list">
|
|
<div class="download-item">
|
|
<div class="file-info">
|
|
<i class="ri-file-zip-line file-icon"></i>
|
|
<div>
|
|
<div class="file-name">Complete UI Kit - Figma Source</div>
|
|
<div class="file-meta">.fig | 145 MB | Updated Oct 24, 2023</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="btn-download">Download</a>
|
|
</div>
|
|
<div class="download-item">
|
|
<div class="file-info">
|
|
<i class="ri-file-code-line file-icon"></i>
|
|
<div>
|
|
<div class="file-name">Icon Set (SVG + PNG)</div>
|
|
<div class="file-meta">.zip | 24 MB | 120 Icons</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="btn-download">Download</a>
|
|
</div>
|
|
<div class="download-item">
|
|
<div class="file-info">
|
|
<i class="ri-image-line file-icon"></i>
|
|
<div>
|
|
<div class="file-name">Texture Pack High-Res</div>
|
|
<div class="file-meta">.zip | 312 MB | Seamless Patterns</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="btn-download">Download</a>
|
|
</div>
|
|
<div class="download-item">
|
|
<div class="file-info">
|
|
<i class="ri-font-size file-icon"></i>
|
|
<div>
|
|
<div class="file-name">Pixel Fonts Bundle</div>
|
|
<div class="file-meta">.ttf | 2 MB | 4 Font Families</div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="btn-download">Download</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Appendix -->
|
|
<section id="appendix" class="section-block">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Appendix: Color Tokens</h2>
|
|
</div>
|
|
<div class="card">
|
|
<div class="color-grid">
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #5cb85c;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Grass Top</span>
|
|
#5CB85C
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #795548;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Dirt</span>
|
|
#795548
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #9e9e9e;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Stone</span>
|
|
#9E9E9E
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #8d6e63;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Wood</span>
|
|
#8D6E63
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #ffd700;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Gold</span>
|
|
#FFD700
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #40e0d0;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Diamond</span>
|
|
#40E0D0
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #f44336;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Redstone</span>
|
|
#F44336
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background: #212121;"></div>
|
|
<div class="swatch-info">
|
|
<span class="swatch-name">Obsidian</span>
|
|
#212121
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<p>CSP Learning Platform Design System © 2023</p>
|
|
<p>Designed with ❤️ for future coders.</p>
|
|
</footer>
|
|
|
|
</main>
|
|
</body>
|
|
</html> |