designnn 0.3.0 → 0.4.0

package/public/i18n.js

@@ -0,0 +1,207 @@
+// ============================================
+// DESIGNNN i18n — Internationalization Module
+// ============================================
+
+const I18N = {
+  en: {
+    // Header
+    tagline: "for Figma AI",
+
+    // Nav
+    navChat: "Chat",
+    navExplore: "Explore",
+    navMix: "Mix",
+    navStats: "Stats",
+
+    // Chat Tab
+    chatTitle: "Chat to Prompt",
+    chatDesc: 'Describe what you want to design. DESIGNNN will generate an optimized Figma AI prompt powered by <span class="highlight">{count} design trends</span>.',
+    chatPlaceholder: "e.g., SaaS dashboard with analytics charts and dark theme",
+    chatGenerate: "Generate",
+    chatGenerating: "Generating...",
+    chatLoading: "Generating prompt with AI...",
+    chatQuickLabel: "Try:",
+    chatQuickPrompts: [
+      { label: "Fitness Landing", prompt: "Landing page for a fitness app with bold typography" },
+      { label: "E-commerce Glass", prompt: "E-commerce product page with glassmorphism style" },
+      { label: "Meditation App", prompt: "Mobile onboarding flow for a meditation app" },
+      { label: "SaaS Pricing", prompt: "SaaS pricing page with dark theme and neon accents" },
+      { label: "Bento Dashboard", prompt: "Dashboard with bento grid layout and data visualization" },
+      { label: "Retrofuturism Portfolio", prompt: "Portfolio website with retrofuturism aesthetic" },
+    ],
+
+    // Explore Tab
+    exploreTitle: "Explore Trends",
+    exploreDesc: 'Browse <span class="highlight" id="trend-count">{count}</span> curated UI/UX design trends. Click any trend to generate a Figma AI prompt.',
+    exploreSearchPlaceholder: "Search trends...",
+    exploreFilterAll: "All",
+    exploreFilterStyle: "Style",
+    exploreFilterComponent: "Component",
+    exploreFilterPattern: "Pattern",
+    exploreFilterLayout: "Layout",
+    exploreFilterInteraction: "Interaction",
+    exploreShowing: "Showing {shown} of {total} trends",
+    exploreNoResults: "No trends found matching your criteria.",
+    exploreGenerateBtn: "Generate Prompt",
+
+    // Mix Tab
+    mixTitle: "Trend Mixer",
+    mixDesc: "Combine two design trends into something fresh. Cross-pollinate styles for innovative UI.",
+    mixTrend1: "Trend 1",
+    mixTrend2: "Trend 2",
+    mixSelectPlaceholder: "Select a trend...",
+    mixContextPlaceholder: "Additional context (optional): e.g., for a music streaming app",
+    mixGenerate: "Mix & Generate",
+    mixMixing: "Mixing...",
+    mixErrorSelect: "Please select two trends to mix.",
+    mixErrorSame: "Please select two different trends.",
+
+    // Stats Tab
+    statsTitle: "Database Stats",
+    statsDesc: "Overview of the DESIGNNN trend database.",
+    statsTotalTrends: "Total Trends",
+    statsBuiltin: "Built-in",
+    statsAiGenerated: "AI-Generated",
+    statsCategories: "Categories",
+    statsByCategory: "Trends by Category",
+    statsLoading: "Loading stats...",
+
+    // Results
+    resultGenerated: "Generated Prompt",
+    resultCopy: "Copy",
+    resultCopied: "Copied!",
+    resultPasteHint: "Paste into Figma AI (Ctrl+I / Cmd+I)",
+    resultWords: "words",
+    resultPromptFor: 'Prompt for: "{message}"',
+    resultTrend: "Trend: {name}",
+    resultMix: "Mix: {name1} + {name2}",
+
+    // Errors
+    errorFailed: "Failed to generate",
+    errorLoadTrends: "Failed to load trends",
+    errorLoadStats: "Failed to load stats",
+
+    // Footer
+    footerText: "DESIGNNN v{version} — Trend-driven design prompt engine",
+    footerMadeBy: "Made by",
+  },
+
+  ja: {
+    // Header
+    tagline: "for Figma AI",
+
+    // Nav
+    navChat: "チャット",
+    navExplore: "トレンド",
+    navMix: "ミックス",
+    navStats: "統計",
+
+    // Chat Tab
+    chatTitle: "チャットでプロンプト生成",
+    chatDesc: '作りたいデザインを自然言語で入力してください。DESIGNNNが<span class="highlight">{count}以上のデザイントレンド</span>を活用し、最適なFigma AIプロンプトを生成します。',
+    chatPlaceholder: "例：ダッシュボードUI、ダークテーマ、分析チャート付き",
+    chatGenerate: "生成する",
+    chatGenerating: "生成中...",
+    chatLoading: "AIがプロンプトを生成中...",
+    chatQuickLabel: "試してみる：",
+    chatQuickPrompts: [
+      { label: "フィットネスLP", prompt: "Landing page for a fitness app with bold typography" },
+      { label: "ECサイト ガラス風", prompt: "E-commerce product page with glassmorphism style" },
+      { label: "瞑想アプリ", prompt: "Mobile onboarding flow for a meditation app" },
+      { label: "SaaS料金ページ", prompt: "SaaS pricing page with dark theme and neon accents" },
+      { label: "Bentoダッシュボード", prompt: "Dashboard with bento grid layout and data visualization" },
+      { label: "レトロフューチャー", prompt: "Portfolio website with retrofuturism aesthetic" },
+    ],
+
+    // Explore Tab
+    exploreTitle: "トレンドを探索",
+    exploreDesc: '<span class="highlight" id="trend-count">{count}</span>件の厳選されたUI/UXデザイントレンドを閲覧できます。トレンドをクリックしてFigma AIプロンプトを生成しましょう。',
+    exploreSearchPlaceholder: "トレンドを検索...",
+    exploreFilterAll: "すべて",
+    exploreFilterStyle: "スタイル",
+    exploreFilterComponent: "コンポーネント",
+    exploreFilterPattern: "パターン",
+    exploreFilterLayout: "レイアウト",
+    exploreFilterInteraction: "インタラクション",
+    exploreShowing: "{total}件中 {shown}件を表示",
+    exploreNoResults: "条件に一致するトレンドが見つかりませんでした。",
+    exploreGenerateBtn: "プロンプト生成",
+
+    // Mix Tab
+    mixTitle: "トレンドミキサー",
+    mixDesc: "2つのデザイントレンドを掛け合わせて、新しいスタイルを生み出します。異なるスタイルの融合で革新的なUIを。",
+    mixTrend1: "トレンド 1",
+    mixTrend2: "トレンド 2",
+    mixSelectPlaceholder: "トレンドを選択...",
+    mixContextPlaceholder: "追加コンテキスト（任意）：例）音楽ストリーミングアプリ向け",
+    mixGenerate: "ミックス＆生成",
+    mixMixing: "ミックス中...",
+    mixErrorSelect: "ミックスする2つのトレンドを選択してください。",
+    mixErrorSame: "異なる2つのトレンドを選択してください。",
+
+    // Stats Tab
+    statsTitle: "データベース統計",
+    statsDesc: "DESIGNNNトレンドデータベースの概要です。",
+    statsTotalTrends: "トレンド総数",
+    statsBuiltin: "ビルトイン",
+    statsAiGenerated: "AI生成",
+    statsCategories: "カテゴリ数",
+    statsByCategory: "カテゴリ別トレンド数",
+    statsLoading: "統計を読み込み中...",
+
+    // Results
+    resultGenerated: "生成されたプロンプト",
+    resultCopy: "コピー",
+    resultCopied: "コピー済み！",
+    resultPasteHint: "Figma AIに貼り付け（Ctrl+I / Cmd+I）",
+    resultWords: "語",
+    resultPromptFor: '「{message}」のプロンプト',
+    resultTrend: "トレンド：{name}",
+    resultMix: "ミックス：{name1} + {name2}",
+
+    // Errors
+    errorFailed: "生成に失敗しました",
+    errorLoadTrends: "トレンドの読み込みに失敗しました",
+    errorLoadStats: "統計の読み込みに失敗しました",
+
+    // Footer
+    footerText: "DESIGNNN v{version} — トレンド駆動型デザインプロンプトエンジン",
+    footerMadeBy: "開発",
+  },
+};
+
+// --- Language Detection & State ---
+let currentLang = "en";
+
+function detectLanguage() {
+  // Check localStorage first
+  const saved = localStorage.getItem("designnn-lang");
+  if (saved && I18N[saved]) return saved;
+
+  // Auto-detect from browser
+  const browserLang = navigator.language || navigator.userLanguage || "en";
+  if (browserLang.startsWith("ja")) return "ja";
+  return "en";
+}
+
+function setLanguage(lang) {
+  currentLang = lang;
+  localStorage.setItem("designnn-lang", lang);
+}
+
+function t(key, params) {
+  let text = I18N[currentLang]?.[key] || I18N.en[key] || key;
+  if (params) {
+    Object.entries(params).forEach(([k, v]) => {
+      text = text.replace(new RegExp(`\\{${k}\\}`, "g"), v);
+    });
+  }
+  return text;
+}
+
+// Export for use in app.js
+window.I18N = I18N;
+window.currentLang = currentLang;
+window.detectLanguage = detectLanguage;
+window.setLanguage = setLanguage;
+window.t = t;

package/public/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Generate high-quality UI/UX design prompts powered by real-time design trend analysis. Built for Figma AI." />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <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" />
+  <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" />
   <link rel="stylesheet" href="/style.css" />
 </head>
 <body>
@@ -15,28 +15,31 @@
   <header class="header">
     <div class="header-left">
       <h1 class="logo">DESIGN<span class="logo-accent">NNN</span></h1>
-      <span class="tagline">for Figma AI</span>
-      <span class="version-badge" id="version-badge">v0.3.0</span>
+      <span class="tagline" data-i18n="tagline">for Figma AI</span>
+      <span class="version-badge" id="version-badge">v0.4.0</span>
     </div>
     <nav class="nav">
       <button class="nav-btn active" data-tab="chat">
         <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>
-        Chat
+        <span data-i18n="navChat">Chat</span>
       </button>
       <button class="nav-btn" data-tab="explore">
         <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>
-        Explore
+        <span data-i18n="navExplore">Explore</span>
       </button>
       <button class="nav-btn" data-tab="mix">
         <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>
-        Mix
+        <span data-i18n="navMix">Mix</span>
       </button>
       <button class="nav-btn" data-tab="stats">
         <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>
-        Stats
+        <span data-i18n="navStats">Stats</span>
       </button>
     </nav>
     <div class="header-right">
+      <button class="lang-toggle" id="lang-toggle" title="Switch language">
+        <span class="lang-label" id="lang-label">EN</span>
+      </button>
       <a href="https://www.npmjs.com/package/designnn" target="_blank" class="header-link" title="npm">
         <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>
       </a>
@@ -51,28 +54,22 @@
     <!-- Chat Tab -->
     <section class="tab-content active" id="tab-chat">
       <div class="tab-hero">
-        <h2>Chat to Prompt</h2>
-        <p>Describe what you want to design. DESIGNNN will generate an optimized Figma AI prompt powered by <span class="highlight">65+ design trends</span>.</p>
+        <h2 data-i18n="chatTitle">Chat to Prompt</h2>
+        <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>
       </div>
       <div class="chat-container">
         <div class="input-group">
           <div class="input-wrapper">
             <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>
-            <input type="text" id="chat-input" placeholder="e.g., SaaS dashboard with analytics charts and dark theme" autocomplete="off" />
+            <input type="text" id="chat-input" data-i18n-placeholder="chatPlaceholder" placeholder="e.g., SaaS dashboard with analytics charts and dark theme" autocomplete="off" />
           </div>
           <button id="chat-submit" class="btn-primary">
             <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>
-            Generate
+            <span data-i18n="chatGenerate">Generate</span>
           </button>
         </div>
-        <div class="quick-prompts">
-          <span class="quick-label">Try:</span>
-          <button class="quick-btn" data-prompt="Landing page for a fitness app with bold typography">Fitness Landing</button>
-          <button class="quick-btn" data-prompt="E-commerce product page with glassmorphism style">E-commerce Glass</button>
-          <button class="quick-btn" data-prompt="Mobile onboarding flow for a meditation app">Meditation App</button>
-          <button class="quick-btn" data-prompt="SaaS pricing page with dark theme and neon accents">SaaS Pricing</button>
-          <button class="quick-btn" data-prompt="Dashboard with bento grid layout and data visualization">Bento Dashboard</button>
-          <button class="quick-btn" data-prompt="Portfolio website with retrofuturism aesthetic">Retrofuturism Portfolio</button>
+        <div class="quick-prompts" id="quick-prompts">
+          <span class="quick-label" data-i18n="chatQuickLabel">Try:</span>
         </div>
         <div id="chat-result" class="result-area hidden"></div>
       </div>
@@ -81,22 +78,22 @@
     <!-- Explore Tab -->
     <section class="tab-content" id="tab-explore">
       <div class="tab-hero">
-        <h2>Explore Trends</h2>
-        <p>Browse <span class="highlight" id="trend-count">65+</span> curated UI/UX design trends. Click any trend to generate a Figma AI prompt.</p>
+        <h2 data-i18n="exploreTitle">Explore Trends</h2>
+        <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>
       </div>
       <div class="explore-container">
         <div class="explore-toolbar">
-          <div class="filter-bar">
-            <button class="filter-btn active" data-category="all">All</button>
-            <button class="filter-btn" data-category="style">Style</button>
-            <button class="filter-btn" data-category="component">Component</button>
-            <button class="filter-btn" data-category="pattern">Pattern</button>
-            <button class="filter-btn" data-category="layout">Layout</button>
-            <button class="filter-btn" data-category="interaction">Interaction</button>
+          <div class="filter-bar" id="filter-bar">
+            <button class="filter-btn active" data-category="all" data-i18n="exploreFilterAll">All</button>
+            <button class="filter-btn" data-category="style" data-i18n="exploreFilterStyle">Style</button>
+            <button class="filter-btn" data-category="component" data-i18n="exploreFilterComponent">Component</button>
+            <button class="filter-btn" data-category="pattern" data-i18n="exploreFilterPattern">Pattern</button>
+            <button class="filter-btn" data-category="layout" data-i18n="exploreFilterLayout">Layout</button>
+            <button class="filter-btn" data-category="interaction" data-i18n="exploreFilterInteraction">Interaction</button>
           </div>
           <div class="search-bar">
             <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>
-            <input type="text" id="explore-search" placeholder="Search trends..." />
+            <input type="text" id="explore-search" data-i18n-placeholder="exploreSearchPlaceholder" placeholder="Search trends..." />
           </div>
         </div>
         <div class="trends-count" id="trends-count-label"></div>
@@ -108,15 +105,15 @@
     <!-- Mix Tab -->
     <section class="tab-content" id="tab-mix">
       <div class="tab-hero">
-        <h2>Trend Mixer</h2>
-        <p>Combine two design trends into something fresh. Cross-pollinate styles for innovative UI.</p>
+        <h2 data-i18n="mixTitle">Trend Mixer</h2>
+        <p data-i18n="mixDesc">Combine two design trends into something fresh. Cross-pollinate styles for innovative UI.</p>
       </div>
       <div class="mix-container">
         <div class="mix-selectors">
           <div class="mix-slot">
-            <div class="slot-label">Trend 1</div>
+            <div class="slot-label" data-i18n="mixTrend1">Trend 1</div>
             <select id="mix-select-1" class="mix-select">
-              <option value="">Select a trend...</option>
+              <option value="" data-i18n="mixSelectPlaceholder">Select a trend...</option>
             </select>
           </div>
           <div class="mix-icon">
@@ -125,18 +122,18 @@
             </div>
           </div>
           <div class="mix-slot">
-            <div class="slot-label">Trend 2</div>
+            <div class="slot-label" data-i18n="mixTrend2">Trend 2</div>
             <select id="mix-select-2" class="mix-select">
-              <option value="">Select a trend...</option>
+              <option value="" data-i18n="mixSelectPlaceholder">Select a trend...</option>
             </select>
           </div>
         </div>
         <div class="context-group">
-          <input type="text" id="mix-context" placeholder="Additional context (optional): e.g., for a music streaming app" />
+          <input type="text" id="mix-context" data-i18n-placeholder="mixContextPlaceholder" placeholder="Additional context (optional): e.g., for a music streaming app" />
         </div>
         <button id="mix-submit" class="btn-primary btn-mix">
           <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>
-          Mix &amp; Generate
+          <span data-i18n="mixGenerate">Mix &amp; Generate</span>
         </button>
         <div id="mix-result" class="result-area hidden"></div>
       </div>
@@ -145,11 +142,11 @@
     <!-- Stats Tab -->
     <section class="tab-content" id="tab-stats">
       <div class="tab-hero">
-        <h2>Database Stats</h2>
-        <p>Overview of the DESIGNNN trend database.</p>
+        <h2 data-i18n="statsTitle">Database Stats</h2>
+        <p data-i18n="statsDesc">Overview of the DESIGNNN trend database.</p>
       </div>
       <div class="stats-container" id="stats-container">
-        <div class="stats-loading">Loading stats...</div>
+        <div class="stats-loading" data-i18n="statsLoading">Loading stats...</div>
       </div>
     </section>
   </main>
@@ -157,11 +154,13 @@
   <!-- Footer -->
   <footer class="footer">
     <div class="footer-content">
-      <p>DESIGNNN v0.3.0 — Trend-driven design prompt engine</p>
-      <p class="footer-sub">Made by <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>
+      <p id="footer-text">DESIGNNN v0.4.0 — Trend-driven design prompt engine</p>
+      <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>
     </div>
   </footer>
 
+  <script src="/i18n.js"></script>
+  <script src="/i18n-trends.js"></script>
   <script src="/app.js"></script>
 </body>
 </html>

package/public/style.css

@@ -1,5 +1,5 @@
 /* ============================================
-   DESIGNNN Web UI v0.3.0
+   DESIGNNN Web UI v0.4.0
    Brand: Black base × Neon Yellow (#CCFF00)
    Font: Inter (body), JetBrains Mono (code)
    ============================================ */
@@ -153,6 +153,34 @@ body {
   gap: 12px;
 }
 
+.lang-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--accent);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  transition: all var(--transition);
+}
+
+.lang-toggle:hover {
+  border-color: var(--accent);
+  background: var(--accent-dim);
+  box-shadow: var(--shadow-accent);
+}
+
+.lang-label {
+  pointer-events: none;
+}
+
 .header-link {
   color: var(--text-dim);
   transition: color var(--transition);