233 lines
5.8 KiB
HTML
233 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Terminal Theme — Full Mockup</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;
|
|
background: #282a36;
|
|
background-image: radial-gradient(circle, rgba(98,114,164,0.55) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
min-height: 100vh;
|
|
color: #f8f8f2;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* Controls */
|
|
.controls {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
z-index: 100;
|
|
}
|
|
.ctrl-btn {
|
|
height: 44px;
|
|
padding: 0 16px;
|
|
background: rgba(40,42,54,0.92);
|
|
border: 1px solid #44475a;
|
|
border-radius: 8px;
|
|
color: #f8f8f2;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all 0.2s;
|
|
min-width: 118px;
|
|
justify-content: center;
|
|
}
|
|
.ctrl-btn:hover {
|
|
border-color: #bd93f9;
|
|
color: #bd93f9;
|
|
background: rgba(189,147,249,0.08);
|
|
}
|
|
.ctrl-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
padding: 0;
|
|
min-width: unset;
|
|
justify-content: center;
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
.ctrl-icon:hover { border-color: #44475a; color: #f8f8f2; background: rgba(40,42,54,0.92); }
|
|
.chevron { opacity: 0.6; font-size: 10px; }
|
|
|
|
/* Main */
|
|
.main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 5rem 2rem 2rem;
|
|
}
|
|
|
|
/* Title */
|
|
.title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
background: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
.title-cursor {
|
|
-webkit-text-fill-color: #bd93f9;
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
|
|
/* Description */
|
|
.description {
|
|
color: #6272a4;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Grid */
|
|
.grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
max-width: 860px;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
width: 260px;
|
|
padding: 1.5rem;
|
|
background: #313244;
|
|
border: 1px solid #44475a;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.45);
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
}
|
|
.card:hover {
|
|
border-color: #bd93f9;
|
|
box-shadow:
|
|
0 0 0 1px rgba(189,147,249,0.25),
|
|
0 8px 28px rgba(189,147,249,0.15),
|
|
0 4px 12px rgba(0,0,0,0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
.card.pin { background: #383a4a; }
|
|
.card h2 {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: #f8f8f2;
|
|
margin-bottom: 0.5rem;
|
|
transition: color 0.2s;
|
|
}
|
|
.card:hover h2 { color: #bd93f9; }
|
|
.card p {
|
|
font-size: 0.85rem;
|
|
color: #6272a4;
|
|
line-height: 1.6;
|
|
}
|
|
.card:hover p { color: #cdd6f4; }
|
|
|
|
/* Beian */
|
|
.beian {
|
|
margin: 2rem 0 1.5rem;
|
|
color: #6272a4;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
.beian a { color: #6272a4; text-decoration: none; transition: color 0.2s; }
|
|
.beian a:hover { color: #bd93f9; }
|
|
|
|
/* Annotation layer */
|
|
.annotation {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(30,32,43,0.97);
|
|
border-top: 1px solid #44475a;
|
|
padding: 14px 24px;
|
|
font-size: 12px;
|
|
color: #6272a4;
|
|
display: flex;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
font-family: ui-monospace, monospace;
|
|
z-index: 200;
|
|
}
|
|
.ann-item { display: flex; align-items: center; gap: 8px; }
|
|
.swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="controls">
|
|
<button class="ctrl-btn">Terminal <span class="chevron">▾</span></button>
|
|
<button class="ctrl-btn ctrl-icon">☽</button>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<h1 class="title">IoT Learning<span class="title-cursor"> ▌</span></h1>
|
|
<p class="description">// your gateway to embedded systems & IoT resources</p>
|
|
|
|
<div class="grid">
|
|
<a class="card pin" href="#">
|
|
<h2>OJ Platform</h2>
|
|
<p>Online judge — submit and test your code against real problems</p>
|
|
</a>
|
|
<a class="card" href="#">
|
|
<h2>Code Runner</h2>
|
|
<p>Instant code execution in-browser for quick experiments</p>
|
|
</a>
|
|
<a class="card" href="#">
|
|
<h2>Reference Books</h2>
|
|
<p>Curated textbooks and documentation for IoT & embedded dev</p>
|
|
</a>
|
|
<a class="card" href="#">
|
|
<h2>Video Lectures</h2>
|
|
<p>Course recordings and tutorials from the lab</p>
|
|
</a>
|
|
<a class="card" href="#">
|
|
<h2>Arduino Docs</h2>
|
|
<p>Official Arduino reference and community guides</p>
|
|
</a>
|
|
<a class="card" href="#">
|
|
<h2>Forum</h2>
|
|
<p>Ask questions, share projects with classmates</p>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="beian">
|
|
<a href="#">备案号 12345678</a> · <a href="#">粤ICP备XXXXXXXX号</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color annotations at bottom -->
|
|
<div class="annotation">
|
|
<div class="ann-item"><span class="swatch" style="background:#282a36;border:1px solid #44475a"></span> bg #282a36</div>
|
|
<div class="ann-item"><span class="swatch" style="background:#313244"></span> card #313244</div>
|
|
<div class="ann-item"><span class="swatch" style="background:#44475a"></span> border #44475a</div>
|
|
<div class="ann-item"><span class="swatch" style="background:#bd93f9"></span> accent #bd93f9</div>
|
|
<div class="ann-item"><span class="swatch" style="background:#ff79c6"></span> pink #ff79c6</div>
|
|
<div class="ann-item"><span class="swatch" style="background:#6272a4"></span> muted #6272a4</div>
|
|
<div class="ann-item"><span class="swatch" style="background:#f8f8f2"></span> fg #f8f8f2</div>
|
|
<div class="ann-item" style="margin-left:auto">hover a card to preview interaction →</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|