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>
439 lines
12 KiB
HTML
439 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Conjuga — App Icon Options</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Space+Mono:wght@700&family=Instrument+Serif&family=Playfair+Display:wght@900&family=Syne:wght@800&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
background: #0a0a0a;
|
|
color: #fff;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 60px 20px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: 3rem;
|
|
margin-bottom: 8px;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #666;
|
|
font-size: 1rem;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 48px;
|
|
max-width: 1400px;
|
|
width: 100%;
|
|
}
|
|
|
|
.option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.icon-wrap {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 44px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
|
|
position: relative;
|
|
}
|
|
|
|
.label {
|
|
text-align: center;
|
|
}
|
|
|
|
.label h3 {
|
|
font-family: 'DM Serif Display', serif;
|
|
font-size: 1.3rem;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.label p {
|
|
color: #888;
|
|
font-size: 0.85rem;
|
|
max-width: 240px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
ICON 1: "Warm Serif" — Editorial elegance
|
|
Rich amber gradient, classic serif C
|
|
═══════════════════════════════════════ */
|
|
.icon-1 {
|
|
background: linear-gradient(145deg, #F97316, #EA580C, #C2410C);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
.icon-1::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.25) 0%, transparent 50%);
|
|
}
|
|
.icon-1 .letter {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 140px;
|
|
font-weight: 900;
|
|
color: white;
|
|
text-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
line-height: 1;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.icon-1 .accent {
|
|
position: absolute;
|
|
bottom: 28px;
|
|
right: 30px;
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 16px;
|
|
color: rgba(255,255,255,0.7);
|
|
letter-spacing: 1px;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
ICON 2: "Dark Scholar" — Deep navy, gold accent
|
|
Sophisticated, knowledge-focused
|
|
═══════════════════════════════════════ */
|
|
.icon-2 {
|
|
background: linear-gradient(160deg, #1e293b, #0f172a, #020617);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.icon-2::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -40px;
|
|
right: -40px;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(251,191,36,0.3) 0%, transparent 70%);
|
|
}
|
|
.icon-2 .main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
z-index: 1;
|
|
}
|
|
.icon-2 .verb-text {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: 42px;
|
|
color: #FBBF24;
|
|
letter-spacing: 2px;
|
|
}
|
|
.icon-2 .endings {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
.icon-2 .ending {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 11px;
|
|
color: rgba(148,163,184,0.8);
|
|
padding: 3px 7px;
|
|
border: 1px solid rgba(148,163,184,0.2);
|
|
border-radius: 4px;
|
|
}
|
|
.icon-2 .line {
|
|
width: 60px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, #FBBF24, transparent);
|
|
margin: 6px 0;
|
|
}
|
|
.icon-2 .persons {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 9px;
|
|
color: rgba(148,163,184,0.4);
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
ICON 3: "Vibrant Stack" — Stacked verb forms
|
|
Energetic, modern, color-coded
|
|
═══════════════════════════════════════ */
|
|
.icon-3 {
|
|
background: #FAFAF9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
position: relative;
|
|
}
|
|
.icon-3 .row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
}
|
|
.icon-3 .person {
|
|
width: 52px;
|
|
text-align: right;
|
|
color: #a8a29e;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
font-family: system-ui;
|
|
}
|
|
.icon-3 .form {
|
|
padding: 4px 10px;
|
|
border-radius: 6px;
|
|
color: white;
|
|
font-size: 13px;
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
.icon-3 .f-orange { background: #F97316; }
|
|
.icon-3 .f-blue { background: #3B82F6; }
|
|
.icon-3 .f-green { background: #10B981; }
|
|
.icon-3 .f-purple { background: #8B5CF6; }
|
|
.icon-3 .f-rose { background: #F43F5E; }
|
|
.icon-3 .f-amber { background: #F59E0B; }
|
|
.icon-3 .title-badge {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
color: #57534e;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
ICON 4: "Brushstroke" — Organic, painterly
|
|
Spanish-inspired warmth
|
|
═══════════════════════════════════════ */
|
|
.icon-4 {
|
|
background: linear-gradient(155deg, #FEF3C7, #FDE68A, #FCD34D);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.icon-4::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse at 20% 80%, rgba(234,88,12,0.15) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 80% 20%, rgba(220,38,38,0.1) 0%, transparent 50%);
|
|
}
|
|
.icon-4 .c-letter {
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: 120px;
|
|
color: #92400E;
|
|
position: relative;
|
|
z-index: 1;
|
|
line-height: 1;
|
|
}
|
|
.icon-4 .dot {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
z-index: 2;
|
|
}
|
|
.icon-4 .dot-1 { background: #DC2626; top: 30px; right: 40px; }
|
|
.icon-4 .dot-2 { background: #EA580C; bottom: 50px; left: 35px; width: 10px; height: 10px; }
|
|
.icon-4 .dot-3 { background: #92400E; top: 55px; left: 45px; width: 8px; height: 8px; }
|
|
.icon-4 .tilde {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
right: 28px;
|
|
font-family: 'Instrument Serif', serif;
|
|
font-size: 36px;
|
|
color: #B45309;
|
|
z-index: 2;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════
|
|
ICON 5: "Neon Grammar" — Bold, techy, striking
|
|
Dark with electric accents
|
|
═══════════════════════════════════════ */
|
|
.icon-5 {
|
|
background: #0C0A09;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.icon-5::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 50% 50%, rgba(249,115,22,0.08) 0%, transparent 60%);
|
|
}
|
|
.icon-5 .formula {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
z-index: 1;
|
|
margin-bottom: 12px;
|
|
}
|
|
.icon-5 .stem {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #F97316;
|
|
}
|
|
.icon-5 .op {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 20px;
|
|
color: #57534e;
|
|
}
|
|
.icon-5 .ending {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #22D3EE;
|
|
}
|
|
.icon-5 .result {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 44px;
|
|
font-weight: 900;
|
|
color: white;
|
|
z-index: 1;
|
|
letter-spacing: -1px;
|
|
}
|
|
.icon-5 .glow-line {
|
|
width: 100px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #F97316, transparent);
|
|
margin-top: 10px;
|
|
z-index: 1;
|
|
}
|
|
.icon-5 .brand {
|
|
font-family: 'Space Mono', monospace;
|
|
font-size: 8px;
|
|
color: #57534e;
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
margin-top: 8px;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Conjuga</h1>
|
|
<p class="subtitle">Choose your app icon</p>
|
|
|
|
<div class="grid">
|
|
|
|
<!-- ICON 1: Warm Serif -->
|
|
<div class="option">
|
|
<div class="icon-wrap icon-1">
|
|
<span class="letter">C</span>
|
|
<span class="accent">—ar —er —ir</span>
|
|
</div>
|
|
<div class="label">
|
|
<h3>1. Warm Serif</h3>
|
|
<p>Bold serif C on a warm amber gradient. Classic, confident, editorial.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ICON 2: Dark Scholar -->
|
|
<div class="option">
|
|
<div class="icon-wrap icon-2">
|
|
<div class="main">
|
|
<div class="verb-text">hablar</div>
|
|
<div class="line"></div>
|
|
<div class="endings">
|
|
<span class="ending">-o</span>
|
|
<span class="ending">-as</span>
|
|
<span class="ending">-a</span>
|
|
<span class="ending">-amos</span>
|
|
</div>
|
|
<div class="persons">yo · tú · él · nos</div>
|
|
</div>
|
|
</div>
|
|
<div class="label">
|
|
<h3>2. Dark Scholar</h3>
|
|
<p>Deep navy with gold verb and endings. Sophisticated, knowledge-focused.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ICON 3: Vibrant Stack -->
|
|
<div class="option">
|
|
<div class="icon-wrap icon-3">
|
|
<div class="title-badge">Conjuga</div>
|
|
<div class="row"><span class="person">yo</span><span class="form f-orange">hablo</span></div>
|
|
<div class="row"><span class="person">tú</span><span class="form f-blue">hablas</span></div>
|
|
<div class="row"><span class="person">él</span><span class="form f-green">habla</span></div>
|
|
<div class="row"><span class="person">nos.</span><span class="form f-purple">hablamos</span></div>
|
|
<div class="row"><span class="person">vos.</span><span class="form f-rose">habláis</span></div>
|
|
<div class="row"><span class="person">ellos</span><span class="form f-amber">hablan</span></div>
|
|
</div>
|
|
<div class="label">
|
|
<h3>3. Vibrant Stack</h3>
|
|
<p>Color-coded conjugation table on white. Energetic, educational, modern.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ICON 4: Brushstroke -->
|
|
<div class="option">
|
|
<div class="icon-wrap icon-4">
|
|
<span class="c-letter">C</span>
|
|
<div class="dot dot-1"></div>
|
|
<div class="dot dot-2"></div>
|
|
<div class="dot dot-3"></div>
|
|
<span class="tilde">ñ</span>
|
|
</div>
|
|
<div class="label">
|
|
<h3>4. Sunlit Brush</h3>
|
|
<p>Warm yellow with serif C and Spanish accents. Organic, inviting, cultural.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ICON 5: Neon Grammar -->
|
|
<div class="option">
|
|
<div class="icon-wrap icon-5">
|
|
<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-line"></div>
|
|
<div class="brand">conjuga</div>
|
|
</div>
|
|
<div class="label">
|
|
<h3>5. Neon Grammar</h3>
|
|
<p>Dark with stem+ending formula. Technical, striking, shows how conjugation works.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|