4b467ec136
Includes SwiftData dual-store architecture (local reference + CloudKit user data), JSON-based data seeding, 20 tense guides, 20 grammar notes, SRS review system, course vocabulary, and widget support. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
78 lines
1.7 KiB
HTML
78 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700;800&family=Playfair+Display:wght@900&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; }
|
|
body {
|
|
width: 1024px;
|
|
height: 1024px;
|
|
overflow: hidden;
|
|
background: #0C0A09;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
body::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 50% 45%, rgba(249,115,22,0.10) 0%, transparent 55%);
|
|
}
|
|
.formula {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
z-index: 1;
|
|
margin-bottom: 20px;
|
|
}
|
|
.stem {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 100px;
|
|
font-weight: 700;
|
|
color: #F97316;
|
|
}
|
|
.op {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 72px;
|
|
color: #44403c;
|
|
}
|
|
.ending {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 100px;
|
|
font-weight: 700;
|
|
color: #22D3EE;
|
|
}
|
|
.result {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 220px;
|
|
font-weight: 900;
|
|
color: white;
|
|
z-index: 1;
|
|
letter-spacing: -8px;
|
|
line-height: 1;
|
|
}
|
|
.glow {
|
|
width: 340px;
|
|
height: 6px;
|
|
background: linear-gradient(90deg, transparent, #F97316, transparent);
|
|
margin-top: 24px;
|
|
z-index: 1;
|
|
border-radius: 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="formula">
|
|
<span class="stem">habl</span>
|
|
<span class="op">+</span>
|
|
<span class="ending">o</span>
|
|
</div>
|
|
<div class="result">hablo</div>
|
|
<div class="glow"></div>
|
|
</body>
|
|
</html>
|