651 行
22 KiB
HTML
651 行
22 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 Edition</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&family=VT323&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--grass-top: #7CB342;
|
|
--dirt-side: #795548;
|
|
--wood-frame: #5D4037;
|
|
--wood-bg: #A1887F;
|
|
--plank-light: #D7CCC8;
|
|
--gold-btn: #FFB300;
|
|
--gold-shadow: #BFA002;
|
|
--btn-shadow: #33691E;
|
|
--text-main: #3E2723;
|
|
--diamond-blue: #00B0D6;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
width: 1920px;
|
|
margin: 0 auto;
|
|
background-color: #1a1a1a;
|
|
font-family: 'VT323', monospace;
|
|
color: white;
|
|
overflow-x: hidden;
|
|
background-image:
|
|
linear-gradient(45deg, #1f1f1f 25%, transparent 25%),
|
|
linear-gradient(-45deg, #1f1f1f 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, #1f1f1f 75%),
|
|
linear-gradient(-45deg, transparent 75%, #1f1f1f 75%);
|
|
background-size: 40px 40px;
|
|
background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.pixel-text {
|
|
font-family: 'Press Start 2P', cursive;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.container {
|
|
width: 1400px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
height: 400px;
|
|
background-color: var(--grass-top);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 20px solid var(--dirt-side);
|
|
box-shadow: inset 0 -10px 0 rgba(0,0,0,0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Minecraft Grass Pattern via CSS */
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.1) 2px, transparent 2px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.1) 2px, transparent 2px);
|
|
background-size: 32px 32px;
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-content {
|
|
text-align: center;
|
|
text-shadow: 4px 4px 0px rgba(0,0,0,0.5);
|
|
z-index: 3;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
color: white;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 24px;
|
|
color: #FFEB3B;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero-desc {
|
|
font-size: 28px; /* VT323 is smaller visually */
|
|
margin-bottom: 30px;
|
|
color: #E0E0E0;
|
|
}
|
|
|
|
.features-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24px;
|
|
margin-bottom: 40px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.feature-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.feature-item i {
|
|
color: #FFEB3B;
|
|
}
|
|
|
|
/* 3D Pixel Button */
|
|
.btn-pixel {
|
|
display: inline-block;
|
|
padding: 20px 40px;
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: transform 0.1s;
|
|
border: 4px solid rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.btn-green {
|
|
background-color: #558B2F;
|
|
box-shadow:
|
|
inset 4px 4px 0 rgba(255,255,255,0.3),
|
|
inset -4px -4px 0 rgba(0,0,0,0.3),
|
|
4px 4px 0 #1B5E20;
|
|
}
|
|
|
|
.btn-green:active {
|
|
transform: translate(4px, 4px);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-gold {
|
|
background-color: var(--gold-btn);
|
|
color: #3E2723;
|
|
box-shadow:
|
|
inset 4px 4px 0 rgba(255,255,255,0.4),
|
|
inset -4px -4px 0 rgba(0,0,0,0.2),
|
|
4px 4px 0 var(--gold-shadow);
|
|
}
|
|
|
|
.btn-gold:active {
|
|
transform: translate(4px, 4px);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Showcase Section */
|
|
.showcase {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 40px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.card {
|
|
background-color: #C69C6D; /* Plank color */
|
|
border: 4px solid #3E2723;
|
|
padding: 8px;
|
|
position: relative;
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27);
|
|
cursor: pointer;
|
|
box-shadow:
|
|
8px 8px 0 rgba(0,0,0,0.5),
|
|
inset 4px 4px 0 rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-10px) rotateX(5deg);
|
|
}
|
|
|
|
.card:last-child {
|
|
grid-column: span 2;
|
|
width: 60%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.card-inner {
|
|
border: 2px solid #795548;
|
|
background: #EFEBE9;
|
|
padding: 20px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-img-wrapper {
|
|
width: 100%;
|
|
height: 300px;
|
|
overflow: hidden;
|
|
border: 4px solid #3E2723;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.card-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.card-content {
|
|
color: var(--text-main);
|
|
flex: 1;
|
|
}
|
|
|
|
.card-title {
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 20px;
|
|
margin-bottom: 12px;
|
|
color: #3E2723;
|
|
}
|
|
|
|
.card-desc {
|
|
font-size: 22px;
|
|
line-height: 1.4;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.card-features {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tag {
|
|
background: #8D6E63;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
font-size: 18px;
|
|
border: 2px solid #5D4037;
|
|
}
|
|
|
|
.card-actions {
|
|
margin-top: auto;
|
|
text-align: right;
|
|
}
|
|
|
|
.btn-view {
|
|
background: #795548;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
border: 2px solid #3E2723;
|
|
box-shadow: 2px 2px 0 #3E2723;
|
|
}
|
|
|
|
.btn-view:hover {
|
|
background: #8D6E63;
|
|
}
|
|
|
|
/* Download Section */
|
|
.download-section {
|
|
background: rgba(0,0,0,0.8);
|
|
border: 4px solid #795548;
|
|
padding: 40px;
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
position: relative;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.file-list {
|
|
margin: 20px auto;
|
|
display: inline-block;
|
|
text-align: left;
|
|
font-size: 20px;
|
|
color: #ccc;
|
|
background: rgba(255,255,255,0.05);
|
|
padding: 20px;
|
|
border: 2px dashed #795548;
|
|
}
|
|
|
|
.file-list div {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Floating Orbs Animation */
|
|
.orb {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #99ff33;
|
|
border: 2px solid #66cc00;
|
|
box-shadow: 0 0 5px #99ff33;
|
|
animation: float 4s infinite ease-in-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0px) rotate(0deg); opacity: 0; }
|
|
50% { opacity: 1; }
|
|
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: #000;
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
border-top: 4px solid #795548;
|
|
font-size: 18px;
|
|
color: #888;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.9);
|
|
z-index: 1000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background: #C69C6D;
|
|
border: 4px solid white;
|
|
padding: 40px;
|
|
width: 600px;
|
|
text-align: center;
|
|
color: #3E2723;
|
|
box-shadow: 0 0 0 4px #000;
|
|
position: relative;
|
|
}
|
|
|
|
.modal-title {
|
|
font-family: 'Press Start 2P', cursive;
|
|
margin-bottom: 20px;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: #d32f2f;
|
|
color: white;
|
|
border: 2px solid #000;
|
|
width: 30px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
line-height: 26px;
|
|
}
|
|
|
|
/* Particle decoration on hero */
|
|
.hero-particle {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: rgba(255,255,255,0.1);
|
|
animation: pixelFloat 10s infinite linear;
|
|
}
|
|
|
|
@keyframes pixelFloat {
|
|
0% { transform: translateY(100vh); }
|
|
100% { transform: translateY(-100px); }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Hero Section -->
|
|
<header class="hero">
|
|
<!-- Floating particles -->
|
|
<div class="hero-particle" style="left: 10%; animation-delay: 0s; width: 20px; height: 20px;"></div>
|
|
<div class="hero-particle" style="left: 80%; animation-delay: 2s; width: 30px; height: 30px;"></div>
|
|
<div class="hero-particle" style="left: 40%; animation-delay: 5s; width: 15px; height: 15px;"></div>
|
|
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">
|
|
<i class="ri-box-3-fill" style="vertical-align: middle; color: #5D4037;"></i>
|
|
CSP Learning Platform
|
|
</h1>
|
|
<div class="hero-subtitle">Minecraft Pixel Art Style Edition</div>
|
|
<p class="hero-desc">Complete HTML package with 5 fully functional pages</p>
|
|
|
|
<div class="features-list">
|
|
<div class="feature-item"><i class="ri-check-line"></i> Pure HTML/CSS/JS</div>
|
|
<div class="feature-item"><i class="ri-wifi-off-line"></i> Offline Ready</div>
|
|
<div class="feature-item"><i class="ri-device-line"></i> Responsive Design</div>
|
|
<div class="feature-item"><i class="ri-grid-fill"></i> Pixel Perfect</div>
|
|
</div>
|
|
|
|
<a href="#showcase" class="btn-pixel btn-green" id="startBtn">Start Exploring</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container" id="showcase">
|
|
<div class="showcase">
|
|
|
|
<div class="grid-container">
|
|
<!-- Card 1: Login -->
|
|
<div class="card" onclick="window.location.href='#'">
|
|
<div class="card-inner">
|
|
<div class="card-img-wrapper">
|
|
<img src="https://a.lovart.ai/artifacts/agent/4jJnMhBDygFtkHFr.png" alt="Login Page" class="card-img">
|
|
</div>
|
|
<div class="card-content">
|
|
<h3 class="card-title">Login Page</h3>
|
|
<p class="card-desc">Minecraft-themed authentication with form validation.</p>
|
|
<div class="card-features">
|
|
<span class="tag">Tab Switching</span>
|
|
<span class="tag">Password Strength</span>
|
|
<span class="tag">Mock Login</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="btn-view">View Page <i class="ri-arrow-right-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Problem Library -->
|
|
<div class="card" onclick="window.location.href='#'">
|
|
<div class="card-inner">
|
|
<div class="card-img-wrapper">
|
|
<img src="https://a.lovart.ai/artifacts/agent/j6E654EFXn3NxJb4.png" alt="Problem Library" class="card-img">
|
|
</div>
|
|
<div class="card-content">
|
|
<h3 class="card-title">Problem Library</h3>
|
|
<p class="card-desc">Browse 1,556 problems with advanced filtering and search.</p>
|
|
<div class="card-features">
|
|
<span class="tag">Sidebar Menu</span>
|
|
<span class="tag">Search & Filter</span>
|
|
<span class="tag">Pagination</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="btn-view">View Page <i class="ri-arrow-right-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Code Editor -->
|
|
<div class="card" onclick="window.location.href='#'">
|
|
<div class="card-inner">
|
|
<div class="card-img-wrapper">
|
|
<img src="https://a.lovart.ai/artifacts/agent/OWMy8aA6hD9v2JYA.png" alt="Code Editor" class="card-img">
|
|
</div>
|
|
<div class="card-content">
|
|
<h3 class="card-title">Code Editor</h3>
|
|
<p class="card-desc">Split-panel editor with syntax highlighting and output.</p>
|
|
<div class="card-features">
|
|
<span class="tag">Multi-language</span>
|
|
<span class="tag">Theme Toggle</span>
|
|
<span class="tag">Test Runner</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="btn-view">View Page <i class="ri-arrow-right-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Profile Center -->
|
|
<div class="card" onclick="window.location.href='#'">
|
|
<div class="card-inner">
|
|
<div class="card-img-wrapper">
|
|
<img src="https://a.lovart.ai/artifacts/agent/zDDM5HzNib6if6te.png" alt="Profile Center" class="card-img">
|
|
</div>
|
|
<div class="card-content">
|
|
<h3 class="card-title">Profile Center</h3>
|
|
<p class="card-desc">User dashboard with achievements, stats, and history.</p>
|
|
<div class="card-features">
|
|
<span class="tag">XP System</span>
|
|
<span class="tag">Badges</span>
|
|
<span class="tag">Leaderboard</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="btn-view">View Page <i class="ri-arrow-right-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 5: Contest Page (Wide) -->
|
|
<div class="card" onclick="window.location.href='#'">
|
|
<div class="card-inner" style="flex-direction: row; gap: 20px;">
|
|
<div class="card-img-wrapper" style="width: 50%; height: 250px; margin-bottom: 0;">
|
|
<img src="https://a.lovart.ai/artifacts/agent/KTP6hqvX7SCjbsuf.png" alt="Contest Page" class="card-img">
|
|
</div>
|
|
<div class="card-content" style="width: 50%;">
|
|
<h3 class="card-title">Contest Page</h3>
|
|
<p class="card-desc">Live contests with real-time leaderboard and arena mode.</p>
|
|
<div class="card-features">
|
|
<span class="tag">Countdown Timer</span>
|
|
<span class="tag">Live Updates</span>
|
|
<span class="tag">Rankings</span>
|
|
</div>
|
|
<div class="card-actions" style="margin-top: 20px;">
|
|
<button class="btn-view">View Page <i class="ri-arrow-right-line"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Download Section -->
|
|
<div class="download-section">
|
|
<h2 class="pixel-text" style="color: white; margin-bottom: 20px; font-size: 28px;">Ready to Craft Your Code?</h2>
|
|
<div class="file-list">
|
|
<div><i class="ri-file-zip-line"></i> csp-platform-v1.0.zip (12.5 MB)</div>
|
|
<div><i class="ri-file-list-line"></i> README.txt (2 KB)</div>
|
|
<div><i class="ri-folder-line"></i> /assets (images, css, js)</div>
|
|
</div>
|
|
<div style="margin-top: 20px;">
|
|
<button class="btn-pixel btn-gold" id="downloadBtn">
|
|
<i class="ri-download-cloud-2-line"></i> Download Package
|
|
</button>
|
|
</div>
|
|
<p style="margin-top: 20px; color: #aaa; font-size: 18px;">Installation: Simply unzip and open index.html in any browser.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p>Crafted with <i class="ri-heart-fill" style="color: #d32f2f;"></i> by HTML Generator | Version 1.19.2</p>
|
|
<p style="margin-top: 10px; font-size: 14px; opacity: 0.6;">Mock GitHub Link: github.com/user/csp-minecraft</p>
|
|
</footer>
|
|
|
|
<!-- Download Modal -->
|
|
<div class="modal" id="downloadModal">
|
|
<div class="modal-content">
|
|
<button class="modal-close" onclick="closeModal()">X</button>
|
|
<h3 class="modal-title">Generating World...</h3>
|
|
<p style="font-size: 20px; margin-bottom: 20px;">Your download is being prepared!</p>
|
|
<div style="background: #3E2723; padding: 10px; margin-top: 20px; position: relative; height: 30px;">
|
|
<div style="background: #76FF03; width: 0%; height: 100%; transition: width 2s;" id="progressBar"></div>
|
|
</div>
|
|
<p id="progressText" style="margin-top: 10px;">0%</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Smooth scroll
|
|
document.getElementById('startBtn').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
// Download Modal Logic
|
|
const modal = document.getElementById('downloadModal');
|
|
const downloadBtn = document.getElementById('downloadBtn');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressText = document.getElementById('progressText');
|
|
|
|
downloadBtn.addEventListener('click', () => {
|
|
modal.style.display = 'flex';
|
|
progressBar.style.width = '0%';
|
|
progressText.innerText = '0%';
|
|
|
|
setTimeout(() => {
|
|
progressBar.style.width = '100%';
|
|
let progress = 0;
|
|
const interval = setInterval(() => {
|
|
progress += 5;
|
|
progressText.innerText = progress + '%';
|
|
if (progress >= 100) {
|
|
clearInterval(interval);
|
|
setTimeout(() => {
|
|
progressText.innerText = 'Download Complete!';
|
|
// Normally trigger download here
|
|
setTimeout(closeModal, 1500);
|
|
}, 500);
|
|
}
|
|
}, 100);
|
|
}, 500);
|
|
});
|
|
|
|
function closeModal() {
|
|
modal.style.display = 'none';
|
|
}
|
|
|
|
// XP Orbs Generation
|
|
function createOrb() {
|
|
const orb = document.createElement('div');
|
|
orb.className = 'orb';
|
|
|
|
// Random position
|
|
const x = Math.random() * window.innerWidth;
|
|
orb.style.left = x + 'px';
|
|
orb.style.bottom = '-20px'; // Start from bottom
|
|
|
|
// Random size variation
|
|
const size = 5 + Math.random() * 10;
|
|
orb.style.width = size + 'px';
|
|
orb.style.height = size + 'px';
|
|
|
|
document.body.appendChild(orb);
|
|
|
|
// Remove after animation
|
|
setTimeout(() => {
|
|
orb.remove();
|
|
}, 4000);
|
|
}
|
|
|
|
setInterval(createOrb, 800);
|
|
|
|
</script>
|
|
</body>
|
|
</html> |