admin/Spanish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Conjuga Spanish conjugation app

Browse Source 
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>
This commit is contained in:
Trey t
2026-04-09 20:58:33 -05:00
commit 4b467ec136
95 changed files with 82599 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Conjuga/AppIcons/AppIcon-1024.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 KiB

25
Conjuga/AppIcons/AppIcon.svg Normal file
View File

@@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<defs>
<radialGradient id="glow" cx="50%" cy="45%" r="50%">
<stop offset="0%" stop-color="#F97316" stop-opacity="0.1"/>
<stop offset="55%" stop-color="#F97316" stop-opacity="0"/>
</radialGradient>
<linearGradient id="line" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F97316" stop-opacity="0"/>
<stop offset="50%" stop-color="#F97316" stop-opacity="1"/>
<stop offset="100%" stop-color="#F97316" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="1024" height="1024" fill="#0C0A09"/>
<!-- Glow -->
<rect width="1024" height="1024" fill="url(#glow)"/>
<!-- Formula: habl + o -->
<text x="340" y="430" font-family="'JetBrains Mono','SF Mono','Menlo',monospace" font-size="120" font-weight="700" fill="#F97316">habl</text>
<text x="710" y="430" font-family="'JetBrains Mono','SF Mono','Menlo',monospace" font-size="90" font-weight="700" fill="#44403c">+</text>
<text x="780" y="430" font-family="'JetBrains Mono','SF Mono','Menlo',monospace" font-size="120" font-weight="700" fill="#22D3EE">o</text>
<!-- Result -->
<text x="512" y="620" font-family="'Playfair Display',Georgia,serif" font-size="260" font-weight="900" fill="white" text-anchor="middle" letter-spacing="-10">hablo</text>
<!-- Glow line -->
<rect x="372" y="670" width="280" height="8" rx="4" fill="url(#line)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

474
Conjuga/AppIcons/icon5-variations.html Normal file
View File

@@ -0,0 +1,474 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conjuga — Icon #5 Variations</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Playfair+Display:wght@700;900&family=JetBrains+Mono:wght@500;700;800&family=DM+Serif+Display&family=Instrument+Serif&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;
}
h1 {
font-family: 'Instrument Serif', serif;
font-size: 2.6rem;
margin-bottom: 6px;
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: 1500px;
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.06);
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: 260px; }
/* ═══════════════════════════════════════
5A: Original refined — tighter, cleaner
═══════════════════════════════════════ */
.icon-5a {
background: #0C0A09;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.icon-5a::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 45%, rgba(249,115,22,0.1) 0%, transparent 55%);
}
.icon-5a .formula {
display: flex;
align-items: baseline;
gap: 4px;
z-index: 1;
margin-bottom: 8px;
}
.icon-5a .stem {
font-family: 'JetBrains Mono', monospace;
font-size: 24px;
font-weight: 700;
color: #F97316;
}
.icon-5a .op {
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
color: #44403c;
}
.icon-5a .ending {
font-family: 'JetBrains Mono', monospace;
font-size: 24px;
font-weight: 700;
color: #22D3EE;
}
.icon-5a .result {
font-family: 'Playfair Display', serif;
font-size: 52px;
font-weight: 900;
color: white;
z-index: 1;
letter-spacing: -2px;
}
.icon-5a .glow {
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, #F97316, transparent);
margin-top: 8px;
z-index: 1;
}
/* ═══════════════════════════════════════
5B: Ember glow — warm radial behind result
═══════════════════════════════════════ */
.icon-5b {
background: #0C0A09;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.icon-5b::before {
content: '';
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(249,115,22,0.2) 0%, rgba(234,88,12,0.08) 40%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon-5b .formula {
display: flex;
align-items: baseline;
gap: 3px;
z-index: 1;
margin-bottom: 4px;
opacity: 0.7;
}
.icon-5b .stem {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
font-weight: 500;
color: #FB923C;
}
.icon-5b .op {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: #57534e;
}
.icon-5b .ending {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
font-weight: 500;
color: #67E8F9;
}
.icon-5b .result {
font-family: 'Playfair Display', serif;
font-size: 58px;
font-weight: 900;
color: white;
z-index: 1;
letter-spacing: -2px;
text-shadow: 0 0 40px rgba(249,115,22,0.3);
}
.icon-5b .brand {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
color: #44403c;
letter-spacing: 5px;
text-transform: uppercase;
margin-top: 10px;
z-index: 1;
}
/* ═══════════════════════════════════════
5C: Split color — stem orange, ending cyan
The result word is split-colored
═══════════════════════════════════════ */
.icon-5c {
background: linear-gradient(170deg, #0f0d0c, #1a1412);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.icon-5c::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #F97316, #22D3EE);
}
.icon-5c .top-line {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, #F97316, #22D3EE);
}
.icon-5c .result {
z-index: 1;
font-family: 'Playfair Display', serif;
font-size: 56px;
font-weight: 900;
letter-spacing: -2px;
line-height: 1;
}
.icon-5c .result .s { color: #FB923C; }
.icon-5c .result .e { color: #22D3EE; }
.icon-5c .formula {
display: flex;
align-items: center;
gap: 6px;
z-index: 1;
margin-top: 10px;
}
.icon-5c .formula span {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
padding: 2px 8px;
border-radius: 4px;
}
.icon-5c .formula .tag-s {
color: #FB923C;
border: 1px solid rgba(249,115,22,0.3);
}
.icon-5c .formula .tag-plus {
color: #57534e;
}
.icon-5c .formula .tag-e {
color: #22D3EE;
border: 1px solid rgba(34,211,238,0.3);
}
/* ═══════════════════════════════════════
5D: Minimal mono — stark, ultra-clean
Just the formula, nothing else
═══════════════════════════════════════ */
.icon-5d {
background: #000;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.icon-5d .content {
display: flex;
align-items: baseline;
gap: 2px;
z-index: 1;
}
.icon-5d .stem {
font-family: 'JetBrains Mono', monospace;
font-size: 38px;
font-weight: 800;
color: #F97316;
}
.icon-5d .ending {
font-family: 'JetBrains Mono', monospace;
font-size: 38px;
font-weight: 800;
color: #22D3EE;
}
.icon-5d .cursor {
width: 3px;
height: 40px;
background: rgba(255,255,255,0.6);
margin-left: 2px;
animation: blink 1.2s step-end infinite;
align-self: center;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ═══════════════════════════════════════
5E: Layered depth — multiple verb forms
stacked with depth, formula on top
═══════════════════════════════════════ */
.icon-5e {
background: #0C0A09;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.icon-5e::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 70%, rgba(249,115,22,0.06) 0%, transparent 60%);
}
.icon-5e .bg-forms {
position: absolute;
z-index: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
opacity: 0.12;
}
.icon-5e .bg-forms span {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: white;
}
.icon-5e .main-formula {
display: flex;
align-items: baseline;
gap: 4px;
z-index: 1;
margin-bottom: 6px;
}
.icon-5e .main-formula .stem {
font-family: 'JetBrains Mono', monospace;
font-size: 26px;
font-weight: 700;
color: #F97316;
}
.icon-5e .main-formula .op {
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
color: #44403c;
}
.icon-5e .main-formula .ending {
font-family: 'JetBrains Mono', monospace;
font-size: 26px;
font-weight: 700;
color: #22D3EE;
}
.icon-5e .result {
font-family: 'Playfair Display', serif;
font-size: 46px;
font-weight: 900;
color: white;
z-index: 1;
letter-spacing: -1px;
}
.icon-5e .other-forms {
display: flex;
gap: 8px;
margin-top: 10px;
z-index: 1;
}
.icon-5e .other-forms span {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: #57534e;
}
.icon-5e .other-forms .active {
color: #FB923C;
}
</style>
</head>
<body>
<h1>Icon #5 — Variations</h1>
<p class="subtitle">Neon Grammar refined five ways</p>
<div class="grid">
<!-- 5A: Original refined -->
<div class="option">
<div class="icon-wrap icon-5a">
<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>
</div>
<div class="label">
<h3>5A. Clean Formula</h3>
<p>Tighter spacing, no brand text. Formula + result, amber glow underneath.</p>
</div>
</div>
<!-- 5B: Ember glow -->
<div class="option">
<div class="icon-wrap icon-5b">
<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="brand">conjuga</div>
</div>
<div class="label">
<h3>5B. Ember Glow</h3>
<p>Warm radial glow behind the result. Formula faded, word glows. Brand text below.</p>
</div>
</div>
<!-- 5C: Split color -->
<div class="option">
<div class="icon-wrap icon-5c">
<div class="top-line"></div>
<div class="result"><span class="s">habl</span><span class="e">o</span></div>
<div class="formula">
<span class="tag-s">stem</span>
<span class="tag-plus">+</span>
<span class="tag-e">ending</span>
</div>
</div>
<div class="label">
<h3>5C. Split Color</h3>
<p>The word itself is two-toned — stem in orange, ending in cyan. Gradient borders top and bottom.</p>
</div>
</div>
<!-- 5D: Minimal mono -->
<div class="option">
<div class="icon-wrap icon-5d">
<div class="content">
<span class="stem">habl</span><span class="ending">o</span>
<div class="cursor"></div>
</div>
</div>
<div class="label">
<h3>5D. Terminal</h3>
<p>Pure black, just the split-colored word with a blinking cursor. Stark, developer-feel.</p>
</div>
</div>
<!-- 5E: Layered depth -->
<div class="option">
<div class="icon-wrap icon-5e">
<div class="bg-forms">
<span>hablamos</span>
<span>habláis</span>
<span>hablan</span>
<span>hablas</span>
<span>habla</span>
</div>
<div class="main-formula">
<span class="stem">habl</span>
<span class="op">+</span>
<span class="ending">o</span>
</div>
<div class="result">hablo</div>
<div class="other-forms">
<span class="active">yo</span>
<span>tú</span>
<span>él</span>
<span>nos</span>
<span>ellos</span>
</div>
</div>
<div class="label">
<h3>5E. Layered Depth</h3>
<p>Ghost conjugations in background, formula + result in front. Shows the full table subtly.</p>
</div>
</div>
</div>
</body>
</html>

438
Conjuga/AppIcons/icons.html Normal file
View File

@@ -0,0 +1,438 @@
<!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>

77
Conjuga/AppIcons/render-5a.html Normal file
View File

@@ -0,0 +1,77 @@
<!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>