designnn 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cli.js +641 -158
  2. package/package.json +1 -1
  3. package/public/app.js +274 -68
  4. package/public/i18n-trends.js +92 -0
  5. package/public/i18n.js +207 -0
  6. package/public/index.html +94 -42
  7. package/public/style.css +448 -230
package/public/i18n.js ADDED
@@ -0,0 +1,207 @@
1
+ // ============================================
2
+ // DESIGNNN i18n — Internationalization Module
3
+ // ============================================
4
+
5
+ const I18N = {
6
+ en: {
7
+ // Header
8
+ tagline: "for Figma AI",
9
+
10
+ // Nav
11
+ navChat: "Chat",
12
+ navExplore: "Explore",
13
+ navMix: "Mix",
14
+ navStats: "Stats",
15
+
16
+ // Chat Tab
17
+ chatTitle: "Chat to Prompt",
18
+ chatDesc: 'Describe what you want to design. DESIGNNN will generate an optimized Figma AI prompt powered by <span class="highlight">{count} design trends</span>.',
19
+ chatPlaceholder: "e.g., SaaS dashboard with analytics charts and dark theme",
20
+ chatGenerate: "Generate",
21
+ chatGenerating: "Generating...",
22
+ chatLoading: "Generating prompt with AI...",
23
+ chatQuickLabel: "Try:",
24
+ chatQuickPrompts: [
25
+ { label: "Fitness Landing", prompt: "Landing page for a fitness app with bold typography" },
26
+ { label: "E-commerce Glass", prompt: "E-commerce product page with glassmorphism style" },
27
+ { label: "Meditation App", prompt: "Mobile onboarding flow for a meditation app" },
28
+ { label: "SaaS Pricing", prompt: "SaaS pricing page with dark theme and neon accents" },
29
+ { label: "Bento Dashboard", prompt: "Dashboard with bento grid layout and data visualization" },
30
+ { label: "Retrofuturism Portfolio", prompt: "Portfolio website with retrofuturism aesthetic" },
31
+ ],
32
+
33
+ // Explore Tab
34
+ exploreTitle: "Explore Trends",
35
+ exploreDesc: 'Browse <span class="highlight" id="trend-count">{count}</span> curated UI/UX design trends. Click any trend to generate a Figma AI prompt.',
36
+ exploreSearchPlaceholder: "Search trends...",
37
+ exploreFilterAll: "All",
38
+ exploreFilterStyle: "Style",
39
+ exploreFilterComponent: "Component",
40
+ exploreFilterPattern: "Pattern",
41
+ exploreFilterLayout: "Layout",
42
+ exploreFilterInteraction: "Interaction",
43
+ exploreShowing: "Showing {shown} of {total} trends",
44
+ exploreNoResults: "No trends found matching your criteria.",
45
+ exploreGenerateBtn: "Generate Prompt",
46
+
47
+ // Mix Tab
48
+ mixTitle: "Trend Mixer",
49
+ mixDesc: "Combine two design trends into something fresh. Cross-pollinate styles for innovative UI.",
50
+ mixTrend1: "Trend 1",
51
+ mixTrend2: "Trend 2",
52
+ mixSelectPlaceholder: "Select a trend...",
53
+ mixContextPlaceholder: "Additional context (optional): e.g., for a music streaming app",
54
+ mixGenerate: "Mix & Generate",
55
+ mixMixing: "Mixing...",
56
+ mixErrorSelect: "Please select two trends to mix.",
57
+ mixErrorSame: "Please select two different trends.",
58
+
59
+ // Stats Tab
60
+ statsTitle: "Database Stats",
61
+ statsDesc: "Overview of the DESIGNNN trend database.",
62
+ statsTotalTrends: "Total Trends",
63
+ statsBuiltin: "Built-in",
64
+ statsAiGenerated: "AI-Generated",
65
+ statsCategories: "Categories",
66
+ statsByCategory: "Trends by Category",
67
+ statsLoading: "Loading stats...",
68
+
69
+ // Results
70
+ resultGenerated: "Generated Prompt",
71
+ resultCopy: "Copy",
72
+ resultCopied: "Copied!",
73
+ resultPasteHint: "Paste into Figma AI (Ctrl+I / Cmd+I)",
74
+ resultWords: "words",
75
+ resultPromptFor: 'Prompt for: "{message}"',
76
+ resultTrend: "Trend: {name}",
77
+ resultMix: "Mix: {name1} + {name2}",
78
+
79
+ // Errors
80
+ errorFailed: "Failed to generate",
81
+ errorLoadTrends: "Failed to load trends",
82
+ errorLoadStats: "Failed to load stats",
83
+
84
+ // Footer
85
+ footerText: "DESIGNNN v{version} — Trend-driven design prompt engine",
86
+ footerMadeBy: "Made by",
87
+ },
88
+
89
+ ja: {
90
+ // Header
91
+ tagline: "for Figma AI",
92
+
93
+ // Nav
94
+ navChat: "チャット",
95
+ navExplore: "トレンド",
96
+ navMix: "ミックス",
97
+ navStats: "統計",
98
+
99
+ // Chat Tab
100
+ chatTitle: "チャットでプロンプト生成",
101
+ chatDesc: '作りたいデザインを自然言語で入力してください。DESIGNNNが<span class="highlight">{count}以上のデザイントレンド</span>を活用し、最適なFigma AIプロンプトを生成します。',
102
+ chatPlaceholder: "例：ダッシュボードUI、ダークテーマ、分析チャート付き",
103
+ chatGenerate: "生成する",
104
+ chatGenerating: "生成中...",
105
+ chatLoading: "AIがプロンプトを生成中...",
106
+ chatQuickLabel: "試してみる：",
107
+ chatQuickPrompts: [
108
+ { label: "フィットネスLP", prompt: "Landing page for a fitness app with bold typography" },
109
+ { label: "ECサイト ガラス風", prompt: "E-commerce product page with glassmorphism style" },
110
+ { label: "瞑想アプリ", prompt: "Mobile onboarding flow for a meditation app" },
111
+ { label: "SaaS料金ページ", prompt: "SaaS pricing page with dark theme and neon accents" },
112
+ { label: "Bentoダッシュボード", prompt: "Dashboard with bento grid layout and data visualization" },
113
+ { label: "レトロフューチャー", prompt: "Portfolio website with retrofuturism aesthetic" },
114
+ ],
115
+
116
+ // Explore Tab
117
+ exploreTitle: "トレンドを探索",
118
+ exploreDesc: '<span class="highlight" id="trend-count">{count}</span>件の厳選されたUI/UXデザイントレンドを閲覧できます。トレンドをクリックしてFigma AIプロンプトを生成しましょう。',
119
+ exploreSearchPlaceholder: "トレンドを検索...",
120
+ exploreFilterAll: "すべて",
121
+ exploreFilterStyle: "スタイル",
122
+ exploreFilterComponent: "コンポーネント",
123
+ exploreFilterPattern: "パターン",
124
+ exploreFilterLayout: "レイアウト",
125
+ exploreFilterInteraction: "インタラクション",
126
+ exploreShowing: "{total}件中 {shown}件を表示",
127
+ exploreNoResults: "条件に一致するトレンドが見つかりませんでした。",
128
+ exploreGenerateBtn: "プロンプト生成",
129
+
130
+ // Mix Tab
131
+ mixTitle: "トレンドミキサー",
132
+ mixDesc: "2つのデザイントレンドを掛け合わせて、新しいスタイルを生み出します。異なるスタイルの融合で革新的なUIを。",
133
+ mixTrend1: "トレンド 1",
134
+ mixTrend2: "トレンド 2",
135
+ mixSelectPlaceholder: "トレンドを選択...",
136
+ mixContextPlaceholder: "追加コンテキスト（任意）：例）音楽ストリーミングアプリ向け",
137
+ mixGenerate: "ミックス＆生成",
138
+ mixMixing: "ミックス中...",
139
+ mixErrorSelect: "ミックスする2つのトレンドを選択してください。",
140
+ mixErrorSame: "異なる2つのトレンドを選択してください。",
141
+
142
+ // Stats Tab
143
+ statsTitle: "データベース統計",
144
+ statsDesc: "DESIGNNNトレンドデータベースの概要です。",
145
+ statsTotalTrends: "トレンド総数",
146
+ statsBuiltin: "ビルトイン",
147
+ statsAiGenerated: "AI生成",
148
+ statsCategories: "カテゴリ数",
149
+ statsByCategory: "カテゴリ別トレンド数",
150
+ statsLoading: "統計を読み込み中...",
151
+
152
+ // Results
153
+ resultGenerated: "生成されたプロンプト",
154
+ resultCopy: "コピー",
155
+ resultCopied: "コピー済み！",
156
+ resultPasteHint: "Figma AIに貼り付け（Ctrl+I / Cmd+I）",
157
+ resultWords: "語",
158
+ resultPromptFor: '「{message}」のプロンプト',
159
+ resultTrend: "トレンド：{name}",
160
+ resultMix: "ミックス：{name1} + {name2}",
161
+
162
+ // Errors
163
+ errorFailed: "生成に失敗しました",
164
+ errorLoadTrends: "トレンドの読み込みに失敗しました",
165
+ errorLoadStats: "統計の読み込みに失敗しました",
166
+
167
+ // Footer
168
+ footerText: "DESIGNNN v{version} — トレンド駆動型デザインプロンプトエンジン",
169
+ footerMadeBy: "開発",
170
+ },
171
+ };
172
+
173
+ // --- Language Detection & State ---
174
+ let currentLang = "en";
175
+
176
+ function detectLanguage() {
177
+ // Check localStorage first
178
+ const saved = localStorage.getItem("designnn-lang");
179
+ if (saved && I18N[saved]) return saved;
180
+
181
+ // Auto-detect from browser
182
+ const browserLang = navigator.language || navigator.userLanguage || "en";
183
+ if (browserLang.startsWith("ja")) return "ja";
184
+ return "en";
185
+ }
186
+
187
+ function setLanguage(lang) {
188
+ currentLang = lang;
189
+ localStorage.setItem("designnn-lang", lang);
190
+ }
191
+
192
+ function t(key, params) {
193
+ let text = I18N[currentLang]?.[key] || I18N.en[key] || key;
194
+ if (params) {
195
+ Object.entries(params).forEach(([k, v]) => {
196
+ text = text.replace(new RegExp(`\\{${k}\\}`, "g"), v);
197
+ });
198
+ }
199
+ return text;
200
+ }
201
+
202
+ // Export for use in app.js
203
+ window.I18N = I18N;
204
+ window.currentLang = currentLang;
205
+ window.detectLanguage = detectLanguage;
206
+ window.setLanguage = setLanguage;
207
+ window.t = t;
package/public/index.html CHANGED
@@ -3,27 +3,50 @@
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>DESIGNNN — Trend-driven Design Prompt Engine</title>
6
+ <title>DESIGNNN — Trend-driven Design Prompt Engine for Figma AI</title>
7
+ <meta name="description" content="Generate high-quality UI/UX design prompts powered by real-time design trend analysis. Built for Figma AI." />
7
8
  <link rel="preconnect" href="https://fonts.googleapis.com" />
8
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
10
11
  <link rel="stylesheet" href="/style.css" />
11
12
  </head>
12
13
  <body>
13
14
  <!-- Header -->
14
15
  <header class="header">
15
16
  <div class="header-left">
16
- <h1 class="logo">DESIGNNN</h1>
17
- <span class="tagline">for Figma AI</span>
17
+ <h1 class="logo">DESIGN<span class="logo-accent">NNN</span></h1>
18
+ <span class="tagline" data-i18n="tagline">for Figma AI</span>
19
+ <span class="version-badge" id="version-badge">v0.4.0</span>
18
20
  </div>
19
21
  <nav class="nav">
20
- <button class="nav-btn active" data-tab="chat">Chat</button>
21
- <button class="nav-btn" data-tab="explore">Explore</button>
22
- <button class="nav-btn" data-tab="mix">Mix</button>
22
+ <button class="nav-btn active" data-tab="chat">
23
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
24
+ <span data-i18n="navChat">Chat</span>
25
+ </button>
26
+ <button class="nav-btn" data-tab="explore">
27
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
28
+ <span data-i18n="navExplore">Explore</span>
29
+ </button>
30
+ <button class="nav-btn" data-tab="mix">
31
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>
32
+ <span data-i18n="navMix">Mix</span>
33
+ </button>
34
+ <button class="nav-btn" data-tab="stats">
35
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>
36
+ <span data-i18n="navStats">Stats</span>
37
+ </button>
23
38
  </nav>
24
- <a href="https://github.com/abe430/designnn" target="_blank" class="github-link">
25
- <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
26
- </a>
39
+ <div class="header-right">
40
+ <button class="lang-toggle" id="lang-toggle" title="Switch language">
41
+ <span class="lang-label" id="lang-label">EN</span>
42
+ </button>
43
+ <a href="https://www.npmjs.com/package/designnn" target="_blank" class="header-link" title="npm">
44
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0h-2.666V8.667h2.666v5.331zm12 0h-1.333v-4h-1.333v4h-1.334v-4h-1.333v4h-2.666V8.667h8v5.331z"/></svg>
45
+ </a>
46
+ <a href="https://github.com/abe430/designnn" target="_blank" class="header-link" title="GitHub">
47
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
48
+ </a>
49
+ </div>
27
50
  </header>
28
51
 
29
52
  <!-- Main Content -->
@@ -31,20 +54,22 @@
31
54
  <!-- Chat Tab -->
32
55
  <section class="tab-content active" id="tab-chat">
33
56
  <div class="tab-hero">
34
- <h2>Chat to Prompt</h2>
35
- <p>Describe what you want to design. DESIGNNN will generate an optimized Figma AI prompt.</p>
57
+ <h2 data-i18n="chatTitle">Chat to Prompt</h2>
58
+ <p data-i18n-html="chatDesc">Describe what you want to design. DESIGNNN will generate an optimized Figma AI prompt powered by <span class="highlight">65+ design trends</span>.</p>
36
59
  </div>
37
60
  <div class="chat-container">
38
61
  <div class="input-group">
39
- <input type="text" id="chat-input" placeholder="e.g., SaaS dashboard with analytics charts and dark theme" autocomplete="off" />
40
- <button id="chat-submit" class="btn-primary">Generate</button>
62
+ <div class="input-wrapper">
63
+ <svg class="input-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
64
+ <input type="text" id="chat-input" data-i18n-placeholder="chatPlaceholder" placeholder="e.g., SaaS dashboard with analytics charts and dark theme" autocomplete="off" />
65
+ </div>
66
+ <button id="chat-submit" class="btn-primary">
67
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
68
+ <span data-i18n="chatGenerate">Generate</span>
69
+ </button>
41
70
  </div>
42
- <div class="quick-prompts">
43
- <span class="quick-label">Try:</span>
44
- <button class="quick-btn" data-prompt="Landing page for a fitness app with bold typography">Fitness Landing</button>
45
- <button class="quick-btn" data-prompt="E-commerce product page with glassmorphism style">E-commerce Glass</button>
46
- <button class="quick-btn" data-prompt="Mobile onboarding flow for a meditation app">Meditation Onboarding</button>
47
- <button class="quick-btn" data-prompt="SaaS pricing page with dark theme and neon accents">SaaS Pricing</button>
71
+ <div class="quick-prompts" id="quick-prompts">
72
+ <span class="quick-label" data-i18n="chatQuickLabel">Try:</span>
48
73
  </div>
49
74
  <div id="chat-result" class="result-area hidden"></div>
50
75
  </div>
@@ -53,18 +78,25 @@
53
78
  <!-- Explore Tab -->
54
79
  <section class="tab-content" id="tab-explore">
55
80
  <div class="tab-hero">
56
- <h2>Explore Trends</h2>
57
- <p>Browse 18+ curated UI/UX design trends. Click any trend to generate a Figma AI prompt.</p>
81
+ <h2 data-i18n="exploreTitle">Explore Trends</h2>
82
+ <p data-i18n-html="exploreDesc">Browse <span class="highlight" id="trend-count">65+</span> curated UI/UX design trends. Click any trend to generate a Figma AI prompt.</p>
58
83
  </div>
59
84
  <div class="explore-container">
60
- <div class="filter-bar">
61
- <button class="filter-btn active" data-category="all">All</button>
62
- <button class="filter-btn" data-category="style">Style</button>
63
- <button class="filter-btn" data-category="component">Component</button>
64
- <button class="filter-btn" data-category="pattern">Pattern</button>
65
- <button class="filter-btn" data-category="layout">Layout</button>
66
- <button class="filter-btn" data-category="interaction">Interaction</button>
85
+ <div class="explore-toolbar">
86
+ <div class="filter-bar" id="filter-bar">
87
+ <button class="filter-btn active" data-category="all" data-i18n="exploreFilterAll">All</button>
88
+ <button class="filter-btn" data-category="style" data-i18n="exploreFilterStyle">Style</button>
89
+ <button class="filter-btn" data-category="component" data-i18n="exploreFilterComponent">Component</button>
90
+ <button class="filter-btn" data-category="pattern" data-i18n="exploreFilterPattern">Pattern</button>
91
+ <button class="filter-btn" data-category="layout" data-i18n="exploreFilterLayout">Layout</button>
92
+ <button class="filter-btn" data-category="interaction" data-i18n="exploreFilterInteraction">Interaction</button>
93
+ </div>
94
+ <div class="search-bar">
95
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
96
+ <input type="text" id="explore-search" data-i18n-placeholder="exploreSearchPlaceholder" placeholder="Search trends..." />
97
+ </div>
67
98
  </div>
99
+ <div class="trends-count" id="trends-count-label"></div>
68
100
  <div id="trends-grid" class="trends-grid"></div>
69
101
  <div id="explore-result" class="result-area hidden"></div>
70
102
  </div>
@@ -73,42 +105,62 @@
73
105
  <!-- Mix Tab -->
74
106
  <section class="tab-content" id="tab-mix">
75
107
  <div class="tab-hero">
76
- <h2>Trend Mixer</h2>
77
- <p>Combine two design trends into something fresh. Cross-pollinate styles for innovative UI.</p>
108
+ <h2 data-i18n="mixTitle">Trend Mixer</h2>
109
+ <p data-i18n="mixDesc">Combine two design trends into something fresh. Cross-pollinate styles for innovative UI.</p>
78
110
  </div>
79
111
  <div class="mix-container">
80
112
  <div class="mix-selectors">
81
- <div class="mix-slot" id="mix-slot-1">
82
- <div class="slot-label">Trend 1</div>
113
+ <div class="mix-slot">
114
+ <div class="slot-label" data-i18n="mixTrend1">Trend 1</div>
83
115
  <select id="mix-select-1" class="mix-select">
84
- <option value="">Select a trend...</option>
116
+ <option value="" data-i18n="mixSelectPlaceholder">Select a trend...</option>
85
117
  </select>
86
118
  </div>
87
119
  <div class="mix-icon">
88
- <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v1.59L18 8z"/><circle cx="12" cy="12" r="3"/><path d="M6 16h1v2c0 2.76 2.24 5 5 5s5-2.24 5-5v-1.59"/></svg>
89
- <span>MIX</span>
120
+ <div class="mix-icon-circle">
121
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
122
+ </div>
90
123
  </div>
91
- <div class="mix-slot" id="mix-slot-2">
92
- <div class="slot-label">Trend 2</div>
124
+ <div class="mix-slot">
125
+ <div class="slot-label" data-i18n="mixTrend2">Trend 2</div>
93
126
  <select id="mix-select-2" class="mix-select">
94
- <option value="">Select a trend...</option>
127
+ <option value="" data-i18n="mixSelectPlaceholder">Select a trend...</option>
95
128
  </select>
96
129
  </div>
97
130
  </div>
98
131
  <div class="context-group">
99
- <input type="text" id="mix-context" placeholder="Additional context (optional): e.g., for a music streaming app" />
132
+ <input type="text" id="mix-context" data-i18n-placeholder="mixContextPlaceholder" placeholder="Additional context (optional): e.g., for a music streaming app" />
100
133
  </div>
101
- <button id="mix-submit" class="btn-primary btn-mix">Mix & Generate</button>
134
+ <button id="mix-submit" class="btn-primary btn-mix">
135
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>
136
+ <span data-i18n="mixGenerate">Mix &amp; Generate</span>
137
+ </button>
102
138
  <div id="mix-result" class="result-area hidden"></div>
103
139
  </div>
104
140
  </section>
141
+
142
+ <!-- Stats Tab -->
143
+ <section class="tab-content" id="tab-stats">
144
+ <div class="tab-hero">
145
+ <h2 data-i18n="statsTitle">Database Stats</h2>
146
+ <p data-i18n="statsDesc">Overview of the DESIGNNN trend database.</p>
147
+ </div>
148
+ <div class="stats-container" id="stats-container">
149
+ <div class="stats-loading" data-i18n="statsLoading">Loading stats...</div>
150
+ </div>
151
+ </section>
105
152
  </main>
106
153
 
107
154
  <!-- Footer -->
108
155
  <footer class="footer">
109
- <p>DESIGNNN v0.1.0 — Made with energy by <a href="https://github.com/abe430" target="_blank">concepter</a></p>
156
+ <div class="footer-content">
157
+ <p id="footer-text">DESIGNNN v0.4.0 — Trend-driven design prompt engine</p>
158
+ <p class="footer-sub"><span data-i18n="footerMadeBy">Made by</span> <a href="https://github.com/abe430" target="_blank">concepter</a> &middot; <a href="https://www.npmjs.com/package/designnn" target="_blank">npm</a> &middot; <a href="https://github.com/abe430/designnn" target="_blank">GitHub</a></p>
159
+ </div>
110
160
  </footer>
111
161
 
162
+ <script src="/i18n.js"></script>
163
+ <script src="/i18n-trends.js"></script>
112
164
  <script src="/app.js"></script>
113
165
  </body>
114
166
  </html>