Upload 4 files

Apache License.txt

@@ -0,0 +1,17 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   Copyright 2025 Shift Mind AI Labs
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,90 @@
+---
+title: "🧠 AI Cognitive Strategy Generator – Enhanced Learning & Critical Thinking"
+emoji: "🧠"
+colorFrom: "red"
+colorTo: "purple"
+sdk: "static"
+sdk_version: "0.1.0"
+app_file: "index.html"
+pinned: false
+---
+
+# 🧠 AI Cognitive Strategy Generator – Enhanced Learning & Critical Thinking  
+**Developed by Shift Mind AI Labs**
+
+The AI Cognitive Strategy Generator is an open-source, browser-based tool designed to help students, educators, and lifelong learners create tailored strategies for cognitive growth, critical thinking, and AI-empowered learning. With real-time multilingual support, personalized prompts, and robust privacy, it enables the next generation of cognitive skill development in any classroom or self-guided context.
+
+---
+
+## 🚀 Features
+
+- **Multilingual Support:** Instantly switch between 80+ languages for full interface translation.
+- **Personalized AI Strategies:** Input any learning topic or cognitive challenge—generate detailed strategies, cognitive enhancers, and mitigation steps for AI’s potential negative impacts.
+- **Structured, Dual Output:** Every response gives both “Critical Thinking Strategies” (enhancers) and “Mitigation Strategies” (safeguards).
+- **Fully Client-Side & Private:** All processing, prompts, API keys, and translations are stored only in your browser—never sent to Shift Mind or third parties.
+- **Progress & Accessibility:** Responsive UI, progress bar, and accessibility features for keyboard navigation and screen readers.
+- **Translation Caching:** Translations are cached for instant switching and offline speed.
+
+---
+
+## 🛠 How to Use
+
+1. **Open the tool** in your browser (no installation or login needed).
+2. **Choose your language** and enter your OpenAI API key (needed for generation and translation).
+3. **Describe your learning challenge or topic**—for example, “Building better focus for math problem-solving,” or “Helping students avoid over-reliance on AI for writing.”
+4. **Click “Generate Strategies”** to instantly receive:
+   - A set of AI-powered **critical thinking strategies** and confidence boosters tailored to your prompt.
+   - Actionable steps to **mitigate negative AI impacts** on cognitive skills.
+5. **Copy, use, or adapt** the generated strategies for lesson plans, study routines, or professional development.
+
+---
+
+## 👩‍🏫 For Teachers: How It Supports You
+
+- **Lesson Planning:** Instantly generate strategies to enhance cognitive skills in any subject, lesson, or PBL context.
+- **AI Readiness:** Design classroom policies and scaffolds to prevent “AI shortcuts” from weakening core skills.
+- **Differentiation:** Customize strategies for advanced, struggling, or multilingual learners—switch languages in one click.
+- **Professional Growth:** Use for PD, workshops, or staff training on AI in education.
+
+---
+
+## 👨‍🎓 For Students: Benefits & Learning Outcomes
+
+- **Self-Improvement:** Build your own strategies for learning, focus, memory, and critical thinking.
+- **AI Literacy:** Understand both the benefits and limits of using AI in schoolwork.
+- **Confidence & Independence:** Learn how to use AI wisely without losing your unique thinking strengths.
+- **Accessible Anywhere:** No login, account, or personal data needed.
+
+---
+
+## 🔐 Data Privacy Notice
+
+- Your OpenAI API key and all input/output data are stored only on your device (browser local storage).
+- No user data is transmitted to Shift Mind AI Labs, Hugging Face, or any third party.
+- All AI requests go directly from your browser to OpenAI using your key.
+
+---
+
+## 📄 License
+
+Licensed under the [Apache License 2.0](./LICENSE).
+
+---
+
+## 🧠 About Shift Mind AI Labs
+
+Shift Mind AI Labs creates ethical, open-source AI tools for global education, cognitive growth, and responsible technology use.
+
+🌐 https://www.shiftmind.io  
+✉️ info@shiftmind.io
+
+---
+
+## 🙌 Contributing
+
+Feedback, pull requests, and partnerships are welcome!  
+For educational pilots, custom integrations, or research: **info@shiftmind.io**
+
+---
+
+*Empowering minds for the future—one cognitive strategy at a time.*

index.html

@@ -0,0 +1,1929 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Cognitive Strategy Generator - Enhanced Learning & Critical Thinking</title>
+  <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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  
+  <style>
+    /* CSS Reset and Base Styles */
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* CSS Custom Properties */
+    :root {
+      /* Color System - Cognitive/Learning theme */
+      --color-primary: #2563eb;
+      --color-primary-hover: #1d4ed8;
+      --color-secondary: #7c3aed;
+      --color-accent: #a855f7;
+      --color-success: #059669;
+      --color-warning: #d97706;
+      --color-error: #dc2626;
+      
+      /* Neutral Colors - Light Mode */
+      --color-background: #f8fafc;
+      --color-surface: #ffffff;
+      --color-surface-elevated: #ffffff;
+      --color-border: #e2e8f0;
+      --color-border-focus: #3b82f6;
+      --color-text-primary: #1e293b;
+      --color-text-secondary: #64748b;
+      --color-text-muted: #94a3b8;
+      
+      /* Typography */
+      --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
+      
+      /* Optimized Spacing System */
+      --spacing-xs: 0.25rem;
+      --spacing-sm: 0.5rem;
+      --spacing-md: 0.75rem;
+      --spacing-lg: 1rem;
+      --spacing-xl: 1.25rem;
+      --spacing-2xl: 1.5rem;
+      --spacing-3xl: 2rem;
+      
+      /* Border Radius */
+      --radius-sm: 0.375rem;
+      --radius-md: 0.5rem;
+      --radius-lg: 0.75rem;
+      --radius-xl: 1rem;
+      
+      /* Shadows */
+      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+      
+      /* Transitions */
+      --transition-fast: 150ms ease-in-out;
+      --transition-normal: 250ms ease-in-out;
+      --transition-slow: 350ms ease-in-out;
+      
+      /* Layout */
+      --container-max-width: 1400px;
+      --content-max-width: 1200px;
+    }
+
+    /* RTL Support */
+    [dir="rtl"] {
+      text-align: right;
+    }
+
+    [dir="rtl"] .app-container {
+      direction: rtl;
+    }
+
+    [dir="rtl"] .api-key-compact {
+      left: auto;
+      right: var(--spacing-lg);
+    }
+
+    [dir="rtl"] .language-switcher {
+      right: auto;
+      left: var(--spacing-lg);
+    }
+
+    /* Dark Mode Support */
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --color-background: #0f172a;
+        --color-surface: #1e293b;
+        --color-surface-elevated: #334155;
+        --color-border: #334155;
+        --color-text-primary: #f1f5f9;
+        --color-text-secondary: #cbd5e1;
+        --color-text-muted: #94a3b8;
+      }
+    }
+
+    /* Base Styles */
+    html {
+      font-size: 16px;
+      line-height: 1.5;
+      scroll-behavior: smooth;
+    }
+
+    body {
+      font-family: var(--font-family-primary);
+      background-color: var(--color-background);
+      color: var(--color-text-primary);
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      min-height: 100vh;
+      transition: all 0.3s ease;
+      padding: 15px;
+    }
+
+    /* Progress Bar */
+    .progress-bar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 4px;
+      background: var(--color-primary);
+      transition: width 0.3s ease;
+      z-index: 1000;
+    }
+
+    /* Language Selection Landing */
+    .language-landing {
+      display: block;
+      max-width: 600px;
+      margin: 50px auto;
+      background: var(--color-surface);
+      border-radius: var(--radius-xl);
+      box-shadow: var(--shadow-lg);
+      padding: 40px;
+      text-align: center;
+    }
+
+    .language-landing h1 {
+      font-size: 2.5rem;
+      font-weight: 800;
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin-bottom: 15px;
+    }
+
+    .language-landing p {
+      font-size: 1.1rem;
+      color: var(--color-text-secondary);
+      margin-bottom: 30px;
+    }
+
+    .language-selector {
+      margin-bottom: 25px;
+    }
+
+    .language-selector label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      font-size: 1.1rem;
+    }
+
+    .language-selector select {
+      width: 100%;
+      padding: 15px 20px;
+      border: 2px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      font-size: 1.1rem;
+      font-family: inherit;
+      background: var(--color-surface);
+      transition: all 0.2s ease;
+      margin-bottom: 20px;
+    }
+
+    .language-selector select:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .api-key-landing {
+      margin-bottom: 25px;
+    }
+
+    .api-key-landing label {
+      display: block;
+      margin-bottom: 10px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      font-size: 1.1rem;
+    }
+
+    .api-key-landing input {
+      width: 100%;
+      padding: 15px 20px;
+      border: 2px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      font-size: 1.1rem;
+      background: var(--color-surface);
+      transition: all 0.2s ease;
+      font-family: 'Courier New', monospace;
+    }
+
+    .api-key-landing input:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    .start-btn {
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+      color: white;
+      padding: 18px 40px;
+      border: none;
+      border-radius: var(--radius-lg);
+      font-size: 1.2rem;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      width: 100%;
+    }
+
+    .start-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.4);
+    }
+
+    .start-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Cache Management Section */
+    .cache-management {
+      background: rgba(37, 99, 235, 0.05);
+      border: 1px solid rgba(37, 99, 235, 0.1);
+      border-radius: var(--radius-lg);
+      padding: 20px;
+      margin-bottom: 25px;
+      text-align: center;
+    }
+
+    .cache-management h3 {
+      color: var(--color-primary);
+      margin-bottom: 15px;
+      font-size: 1.1rem;
+      font-weight: 600;
+    }
+
+    .cache-status-display {
+      background: rgba(5, 150, 105, 0.1);
+      border: 1px solid rgba(5, 150, 105, 0.2);
+      color: var(--color-success);
+      padding: 12px 16px;
+      border-radius: var(--radius-md);
+      margin-bottom: 15px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    }
+
+    .cache-status-display.no-cache {
+      background: rgba(100, 116, 139, 0.1);
+      border-color: rgba(100, 116, 139, 0.2);
+      color: var(--color-text-secondary);
+    }
+
+    .clear-cache-btn {
+      background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%);
+      color: white;
+      padding: 12px 24px;
+      border: none;
+      border-radius: var(--radius-md);
+      font-size: 0.9rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+    }
+
+    .clear-cache-btn:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 6px 12px -4px rgba(217, 119, 6, 0.4);
+    }
+
+    .clear-cache-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Cache Status Indicator */
+    .cache-status {
+      background: rgba(5, 150, 105, 0.1);
+      border: 1px solid rgba(5, 150, 105, 0.2);
+      color: var(--color-success);
+      padding: 8px 12px;
+      border-radius: var(--radius-sm);
+      margin-bottom: 15px;
+      font-size: 0.85rem;
+      text-align: center;
+      font-weight: 500;
+      display: none;
+    }
+
+    .cache-status.cached {
+      display: block;
+    }
+
+    .cache-status.translating {
+      background: rgba(37, 99, 235, 0.1);
+      border-color: rgba(37, 99, 235, 0.2);
+      color: var(--color-primary);
+    }
+
+    /* Translation Loading Overlay */
+    .translation-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(37, 99, 235, 0.9);
+      display: none;
+      justify-content: center;
+      align-items: center;
+      z-index: 10000;
+      color: white;
+      text-align: center;
+    }
+
+    .translation-content {
+      background: rgba(255, 255, 255, 0.1);
+      padding: 40px;
+      border-radius: var(--radius-xl);
+      backdrop-filter: blur(10px);
+    }
+
+    .translation-spinner {
+      width: 50px;
+      height: 50px;
+      border: 4px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      border-top-color: white;
+      animation: spin 1s ease-in-out infinite;
+      margin: 0 auto 20px;
+    }
+
+    /* Main Application (Hidden Initially) */
+    .main-app {
+      display: none;
+    }
+
+    /* Layout Components */
+    .app-container {
+      min-height: 100vh;
+      max-width: var(--container-max-width);
+      margin: 0 auto;
+      background: var(--color-surface);
+      border-radius: 16px;
+      box-shadow: var(--shadow-lg);
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* Language Switcher in Main App */
+    .language-switcher {
+      position: absolute;
+      top: var(--spacing-lg);
+      right: var(--spacing-lg);
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      z-index: 10;
+    }
+
+    .language-switch-btn {
+      background: rgba(37, 99, 235, 0.05);
+      border: 1px solid rgba(37, 99, 235, 0.1);
+      border-radius: var(--radius-md);
+      padding: 8px 12px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      color: var(--color-primary);
+      font-weight: 500;
+    }
+
+    .language-switch-btn:hover {
+      background: rgba(37, 99, 235, 0.1);
+    }
+
+    .mini-clear-cache {
+      background: rgba(217, 119, 6, 0.1);
+      border: 1px solid rgba(217, 119, 6, 0.2);
+      color: var(--color-warning);
+      padding: 6px 10px;
+      border-radius: var(--radius-sm);
+      font-size: 11px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-weight: 500;
+    }
+
+    .mini-clear-cache:hover {
+      background: rgba(217, 119, 6, 0.2);
+    }
+
+    /* Compact API Key in Top-Left */
+    .api-key-compact {
+      position: absolute;
+      top: var(--spacing-lg);
+      left: var(--spacing-lg);
+      z-index: 10;
+      background: rgba(37, 99, 235, 0.05);
+      border: 1px solid rgba(37, 99, 235, 0.1);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-md) var(--spacing-lg);
+      transition: all var(--transition-normal);
+      max-width: 280px;
+    }
+
+    .api-key-compact:hover {
+      background: rgba(37, 99, 235, 0.08);
+    }
+
+    .api-key-compact-label {
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--color-primary);
+      margin-bottom: var(--spacing-xs);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .api-key-compact-input {
+      width: 100%;
+      padding: var(--spacing-sm) var(--spacing-md);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-sm);
+      font-size: 0.875rem;
+      background: var(--color-surface);
+      color: var(--color-text-primary);
+      transition: all var(--transition-fast);
+      font-family: var(--font-family-mono);
+    }
+
+    .api-key-compact-input:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 2px rgb(59 130 246 / 0.1);
+    }
+
+    .api-key-compact-input::placeholder {
+      color: var(--color-text-muted);
+      font-size: 0.75rem;
+    }
+
+    /* Main Content */
+    .app-main {
+      max-width: var(--content-max-width);
+      margin: 0 auto;
+      padding: 20px 30px 30px;
+      padding-top: 80px;
+    }
+
+    .app-header {
+      text-align: center;
+      margin-bottom: var(--spacing-xl);
+    }
+
+    .app-title {
+      font-size: 2.25rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      margin-bottom: var(--spacing-md);
+      line-height: 1.2;
+    }
+
+    .app-subtitle {
+      font-size: 1rem;
+      color: var(--color-text-secondary);
+      max-width: 600px;
+      margin: 0 auto;
+      line-height: 1.4;
+    }
+
+    /* Input Section */
+    .input-section {
+      margin-bottom: var(--spacing-xl);
+    }
+
+    .input-label {
+      display: block;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      margin-bottom: var(--spacing-md);
+      font-size: 1rem;
+    }
+
+    .input-container {
+      position: relative;
+    }
+
+    .prompt-textarea {
+      width: 100%;
+      min-height: 120px;
+      padding: var(--spacing-lg);
+      border: 2px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      font-size: 1rem;
+      font-family: var(--font-family-primary);
+      background: var(--color-surface);
+      color: var(--color-text-primary);
+      resize: vertical;
+      transition: all var(--transition-fast);
+      line-height: 1.5;
+    }
+
+    .prompt-textarea:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
+    }
+
+    .prompt-textarea::placeholder {
+      color: var(--color-text-muted);
+    }
+
+    .character-counter {
+      position: absolute;
+      bottom: var(--spacing-sm);
+      right: var(--spacing-md);
+      font-size: 0.75rem;
+      color: var(--color-text-muted);
+      background: var(--color-surface);
+      padding: var(--spacing-xs) var(--spacing-sm);
+      border-radius: var(--radius-sm);
+    }
+
+    /* Action Section */
+    .action-section {
+      text-align: center;
+      margin-bottom: var(--spacing-xl);
+    }
+
+    .generate-button {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      padding: var(--spacing-md) var(--spacing-xl);
+      font-size: 1rem;
+      font-weight: 600;
+      color: white;
+      background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+      border: none;
+      border-radius: var(--radius-lg);
+      cursor: pointer;
+      transition: all var(--transition-normal);
+      box-shadow: var(--shadow-md);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .generate-button:hover:not(:disabled) {
+      transform: translateY(-1px);
+      box-shadow: var(--shadow-lg);
+    }
+
+    .generate-button:active {
+      transform: translateY(0);
+    }
+
+    .generate-button:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    .button-text {
+      transition: opacity var(--transition-fast);
+    }
+
+    .loading-spinner {
+      display: none;
+      width: 18px;
+      height: 18px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-top: 2px solid white;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    /* Output Section */
+    .output-section {
+      margin-bottom: var(--spacing-lg);
+    }
+
+    .output-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-lg);
+    }
+
+    .output-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--color-text-primary);
+    }
+
+    .copy-button {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+      padding: var(--spacing-sm) var(--spacing-md);
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--color-primary);
+      background: transparent;
+      border: 1px solid var(--color-primary);
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    .copy-button:hover {
+      background: var(--color-primary);
+      color: white;
+    }
+
+    .output-container {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-lg);
+      box-shadow: var(--shadow-sm);
+      transition: all var(--transition-normal);
+    }
+
+    .output-container:hover {
+      box-shadow: var(--shadow-md);
+    }
+
+    .output-content {
+      font-family: var(--font-family-primary);
+      line-height: 1.6;
+      color: var(--color-text-primary);
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    .output-content h1,
+    .output-content h2,
+    .output-content h3 {
+      color: var(--color-text-primary);
+      margin-top: var(--spacing-lg);
+      margin-bottom: var(--spacing-md);
+      font-weight: 600;
+    }
+
+    .output-content h1 {
+      font-size: 1.375rem;
+      border-bottom: 2px solid var(--color-border);
+      padding-bottom: var(--spacing-sm);
+    }
+
+    .output-content h2 {
+      font-size: 1.125rem;
+      color: var(--color-primary);
+    }
+
+    .output-content h3 {
+      font-size: 1rem;
+    }
+
+    .output-content p {
+      margin-bottom: var(--spacing-md);
+    }
+
+    .output-content ul,
+    .output-content ol {
+      margin-left: var(--spacing-lg);
+      margin-bottom: var(--spacing-md);
+    }
+
+    .output-content li {
+      margin-bottom: var(--spacing-xs);
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: var(--spacing-2xl);
+      color: var(--color-text-muted);
+    }
+
+    .empty-state-icon {
+      font-size: 2.5rem;
+      margin-bottom: var(--spacing-md);
+      opacity: 0.5;
+    }
+
+    .empty-state-text {
+      font-size: 1rem;
+    }
+
+    /* Error Handling */
+    .error-message {
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      color: #dc2626;
+      padding: var(--spacing-md);
+      border-radius: var(--radius-md);
+      margin-bottom: var(--spacing-md);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+    }
+
+    .error-icon {
+      font-size: 1.125rem;
+    }
+
+    .error-dismiss {
+      margin-left: auto;
+      background: none;
+      border: none;
+      color: #dc2626;
+      cursor: pointer;
+      font-size: 1.125rem;
+      padding: var(--spacing-xs);
+    }
+
+    /* Footer */
+    .app-footer {
+      text-align: center;
+      padding: var(--spacing-lg) 0;
+      color: var(--color-text-muted);
+      font-size: 0.875rem;
+      border-top: 1px solid var(--color-border);
+      margin-top: var(--spacing-xl);
+    }
+
+    /* Hidden sections */
+    .hidden {
+      display: none !important;
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      body {
+        padding: 10px;
+      }
+
+      .language-landing {
+        margin: 20px auto;
+        padding: 30px 20px;
+      }
+
+      .api-key-compact {
+        position: static;
+        margin-bottom: var(--spacing-xl);
+        max-width: none;
+      }
+
+      .language-switcher {
+        position: relative;
+        top: auto;
+        right: auto;
+        margin-bottom: var(--spacing-xl);
+        justify-content: center;
+      }
+
+      .app-main {
+        padding: 15px 20px 20px;
+        padding-top: 20px;
+      }
+
+      .app-title {
+        font-size: 1.875rem;
+      }
+
+      .app-subtitle {
+        font-size: 0.875rem;
+      }
+
+      .prompt-textarea {
+        min-height: 100px;
+        padding: var(--spacing-md);
+      }
+
+      .generate-button {
+        width: 100%;
+        justify-content: center;
+      }
+
+      .output-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-md);
+      }
+
+      .empty-state {
+        padding: var(--spacing-xl);
+      }
+
+      .empty-state-icon {
+        font-size: 2rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .language-landing h1 {
+        font-size: 2rem;
+      }
+
+      .app-title {
+        font-size: 1.5rem;
+      }
+    }
+
+    /* Accessibility */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Focus styles for keyboard navigation */
+    .generate-button:focus,
+    .copy-button:focus,
+    .api-key-compact-input:focus,
+    .prompt-textarea:focus {
+      outline: 2px solid var(--color-primary);
+      outline-offset: 2px;
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      *,
+      *::before,
+      *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <!-- Progress Bar -->
+  <div class="progress-bar" id="progressBar"></div>
+
+  <!-- Translation Loading Overlay -->
+  <div class="translation-overlay" id="translationOverlay">
+    <div class="translation-content">
+      <div class="translation-spinner"></div>
+      <h2 id="translationTitle">Translating Interface...</h2>
+      <p id="translationMessage">Please wait while we translate the interface to your selected language.</p>
+    </div>
+  </div>
+
+  <!-- Language Selection Landing Page -->
+  <div class="language-landing" id="languageLanding">
+    <h1 data-translate="app_title">AI Cognitive Strategy Generator</h1>
+    <p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with enhanced learning and critical thinking strategy generation.</p>
+    
+    <!-- Cache Status Indicator -->
+    <div class="cache-status" id="cacheStatus">
+      💾 Translations cached - instant loading!
+    </div>
+
+    <!-- Cache Management Section -->
+    <div class="cache-management" id="cacheManagement">
+      <h3 data-translate="cache_management_title">🗂️ Translation Cache Management</h3>
+      <div class="cache-status-display" id="cacheStatusDisplay">
+        <span data-translate="cache_status_checking">Checking cache status...</span>
+      </div>
+      <button class="clear-cache-btn" id="clearCacheBtn" data-translate="clear_cache_button">
+        🗑️ Clear All Cached Translations
+      </button>
+    </div>
+    
+    <div class="language-selector">
+      <label for="languageSelect" data-translate="select_language">🌐 Select Language</label>
+      <select id="languageSelect">
+        <option value="en">🇺🇸 English</option>
+        <option value="es">🇪🇸 Español (Spanish)</option>
+        <option value="fr">🇫🇷 Français (French)</option>
+        <option value="de">🇩🇪 Deutsch (German)</option>
+        <option value="zh">🇨🇳 中文 (Chinese)</option>
+        <option value="ja">🇯🇵 日本語 (Japanese)</option>
+        <option value="ko">🇰🇷 한국어 (Korean)</option>
+        <option value="pt">🇵🇹 Português (Portuguese)</option>
+        <option value="it">🇮🇹 Italiano (Italian)</option>
+        <option value="ar">🇸🇦 العربية (Arabic)</option>
+        <option value="ru">🇷🇺 Русский (Russian)</option>
+        <option value="hi">🇮🇳 हिन्दी (Hindi)</option>
+        <option value="bn">🇧🇩 বাংলা (Bengali)</option>
+        <option value="ur">🇵🇰 اردو (Urdu)</option>
+        <option value="tr">🇹🇷 Türkçe (Turkish)</option>
+        <option value="pl">🇵🇱 Polski (Polish)</option>
+        <option value="nl">🇳🇱 Nederlands (Dutch)</option>
+        <option value="sv">🇸🇪 Svenska (Swedish)</option>
+        <option value="da">🇩🇰 Dansk (Danish)</option>
+        <option value="no">🇳🇴 Norsk (Norwegian)</option>
+        <option value="fi">🇫🇮 Suomi (Finnish)</option>
+        <option value="is">🇮🇸 Íslenska (Icelandic)</option>
+        <option value="cs">🇨🇿 Čeština (Czech)</option>
+        <option value="sk">🇸🇰 Slovenčina (Slovak)</option>
+        <option value="hu">🇭🇺 Magyar (Hungarian)</option>
+        <option value="ro">����🇴 Română (Romanian)</option>
+        <option value="bg">🇧🇬 Български (Bulgarian)</option>
+        <option value="hr">🇭🇷 Hrvatski (Croatian)</option>
+        <option value="sr">🇷🇸 Српски (Serbian)</option>
+        <option value="sl">🇸🇮 Slovenščina (Slovenian)</option>
+        <option value="mk">🇲🇰 Македонски (Macedonian)</option>
+        <option value="sq">🇦🇱 Shqip (Albanian)</option>
+        <option value="lv">🇱🇻 Latviešu (Latvian)</option>
+        <option value="lt">🇱🇹 Lietuvių (Lithuanian)</option>
+        <option value="et">🇪🇪 Eesti (Estonian)</option>
+        <option value="mt">🇲🇹 Malti (Maltese)</option>
+        <option value="ga">🇮🇪 Gaeilge (Irish)</option>
+        <option value="cy">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cymraeg (Welsh)</option>
+        <option value="eu">🏴󠁥󠁳󠁰󠁶󠁿 Euskera (Basque)</option>
+        <option value="ca">🏴󠁥󠁳󠁣󠁴󠁿 Català (Catalan)</option>
+        <option value="gl">🏴󠁥󠁳󠁧󠁡󠁿 Galego (Galician)</option>
+        <option value="el">🇬🇷 Ελληνικά (Greek)</option>
+        <option value="he">🇮🇱 עברית (Hebrew)</option>
+        <option value="fa">🇮🇷 فارسی (Persian)</option>
+        <option value="ps">🇦🇫 پښتو (Pashto)</option>
+        <option value="ku">🏴󠁩󠁱󠁫󠁲󠁿 کوردی (Kurdish)</option>
+        <option value="az">🇦🇿 Azərbaycan (Azerbaijani)</option>
+        <option value="kk">🇰🇿 Қазақша (Kazakh)</option>
+        <option value="ky">🇰🇬 Кыргызча (Kyrgyz)</option>
+        <option value="uz">🇺🇿 O'zbek (Uzbek)</option>
+        <option value="tk">🇹🇲 Türkmen (Turkmen)</option>
+        <option value="tg">🇹🇯 Тоҷикӣ (Tajik)</option>
+        <option value="mn">🇲🇳 Монгол (Mongolian)</option>
+        <option value="ka">🇬🇪 ქართული (Georgian)</option>
+        <option value="hy">🇦🇲 Հայերեն (Armenian)</option>
+        <option value="th">🇹🇭 ไทย (Thai)</option>
+        <option value="vi">🇻🇳 Tiếng Việt (Vietnamese)</option>
+        <option value="lo">🇱🇦 ລາວ (Lao)</option>
+        <option value="km">🇰🇭 ខ្មែរ (Khmer)</option>
+        <option value="my">🇲🇲 မြန်မာ (Myanmar)</option>
+        <option value="si">🇱🇰 සිංහල (Sinhala)</option>
+        <option value="ta">🇱🇰 தமிழ் (Tamil)</option>
+        <option value="te">🇮🇳 తెలుగు (Telugu)</option>
+        <option value="kn">🇮🇳 ಕನ್ನಡ (Kannada)</option>
+        <option value="ml">🇮🇳 മലയാളം (Malayalam)</option>
+        <option value="gu">🇮🇳 ગુજરાતી (Gujarati)</option>
+        <option value="pa">🇮🇳 ਪੰਜਾਬੀ (Punjabi)</option>
+        <option value="or">🇮🇳 ଓଡ଼ିଆ (Odia)</option>
+        <option value="as">🇮🇳 অসমীয়া (Assamese)</option>
+        <option value="ne">🇳🇵 नेपाली (Nepali)</option>
+        <option value="dz">🇧🇹 རྫོང་ཁ (Dzongkha)</option>
+        <option value="bo">🏔️ བོད་ཡིག (Tibetan)</option>
+        <option value="id">🇮🇩 Bahasa Indonesia</option>
+        <option value="ms">🇲🇾 Bahasa Melayu (Malay)</option>
+        <option value="tl">🇵🇭 Filipino (Tagalog)</option>
+        <option value="ceb">🇵🇭 Cebuano</option>
+        <option value="haw">🏝️ ʻŌlelo Hawaiʻi (Hawaiian)</option>
+        <option value="mi">🇳🇿 Te Reo Māori (Maori)</option>
+        <option value="sm">🇼🇸 Gagana Samoa (Samoan)</option>
+        <option value="to">🇹🇴 Lea Fakatonga (Tongan)</option>
+        <option value="fj">🇫🇯 Na Vosa Vakaviti (Fijian)</option>
+        <option value="mg">🇲🇬 Malagasy</option>
+        <option value="sw">🇰🇪 Kiswahili (Swahili)</option>
+        <option value="zu">🇿🇦 isiZulu (Zulu)</option>
+        <option value="xh">🇿🇦 isiXhosa (Xhosa)</option>
+        <option value="af">🇿🇦 Afrikaans</option>
+        <option value="st">🇱🇸 Sesotho (Southern Sotho)</option>
+        <option value="tn">🇧🇼 Setswana (Tswana)</option>
+        <option value="ss">🇸🇿 siSwati (Swati)</option>
+        <option value="ve">🇿🇦 Tshivenḓa (Venda)</option>
+        <option value="ts">🇿🇦 Xitsonga (Tsonga)</option>
+        <option value="nr">🇿🇦 isiNdebele (Southern Ndebele)</option>
+        <option value="am">🇪🇹 አማርኛ (Amharic)</option>
+        <option value="ti">🇪🇷 ትግርኛ (Tigrinya)</option>
+        <option value="om">🇪🇹 Afaan Oromoo (Oromo)</option>
+        <option value="so">🇸🇴 Soomaali (Somali)</option>
+        <option value="ha">🇳🇬 Hausa</option>
+        <option value="yo">🇳🇬 Yorùbá (Yoruba)</option>
+        <option value="ig">🇳🇬 Igbo</option>
+        <option value="ff">🇸🇳 Fulfulde (Fulani)</option>
+        <option value="wo">🇸🇳 Wolof</option>
+        <option value="bm">🇲🇱 Bamanankan (Bambara)</option>
+        <option value="rn">🇧🇮 Kirundi (Rundi)</option>
+        <option value="rw">🇷🇼 Kinyarwanda (Rwanda)</option>
+        <option value="lg">🇺🇬 Luganda</option>
+        <option value="ny">🇲🇼 Chichewa (Nyanja)</option>
+        <option value="sn">🇿🇼 chiShona (Shona)</option>
+        <option value="nd">🇿🇼 isiNdebele (Northern Ndebele)</option>
+      </select>
+    </div>
+
+    <div class="api-key-landing">
+      <label for="apiKeyLanding" data-translate="api_key_label">🔑 OpenAI API Key</label>
+      <input type="password" id="apiKeyLanding" placeholder="Enter your OpenAI API key" data-translate-placeholder="api_key_placeholder">
+    </div>
+
+    <button class="start-btn" id="startBtn" data-translate="start_button">🚀 Start AI Cognitive Strategy Generator</button>
+  </div>
+
+  <!-- Main Application -->
+  <div class="main-app" id="mainApp">
+    <div class="app-container">
+      <!-- Language Switcher -->
+      <div class="language-switcher" id="languageSwitcher">
+        <div class="language-switch-btn" onclick="showLanguageLanding()">
+          <span data-translate="change_language">🌐 Change Language</span>
+        </div>
+        <div class="mini-clear-cache" onclick="clearAllTranslationCache()" title="Clear translation cache">
+          <span data-translate="clear_cache_mini">🗑️ Clear Cache</span>
+        </div>
+      </div>
+
+      <!-- Compact API Key in Top-Left -->
+      <div class="api-key-compact">
+        <label for="apiKey" class="api-key-compact-label" data-translate="api_key_short">API Key</label>
+        <input 
+          type="password" 
+          id="apiKey" 
+          class="api-key-compact-input" 
+          data-translate-placeholder="api_key_placeholder"
+          autocomplete="off"
+        >
+      </div>
+
+      <main class="app-main">
+        <header class="app-header">
+          <h1 class="app-title" data-translate="app_title">AI Cognitive Strategy Generator</h1>
+          <p class="app-subtitle" data-translate="app_subtitle">
+            Generate tailored strategies to enhance cognitive abilities and boost confidence, 
+            plus learn how to mitigate potential negative impacts of generative AI on cognitive skills.
+          </p>
+        </header>
+
+        <section class="input-section">
+          <label for="userPrompt" class="input-label" data-translate="input_label">Enter Your Prompt</label>
+          <div class="input-container">
+            <textarea 
+              id="userPrompt" 
+              class="prompt-textarea" 
+              data-translate-placeholder="input_placeholder"
+              required
+              maxlength="2000"
+            ></textarea>
+            <div class="character-counter" id="characterCounter">0 / 2000</div>
+          </div>
+        </section>
+
+        <section class="action-section">
+          <button id="generateBtn" class="generate-button">
+            <span class="button-text" data-translate="generate_button">Generate Strategies</span>
+            <div class="loading-spinner" id="loadingSpinner"></div>
+          </button>
+        </section>
+
+        <section class="output-section">
+          <div class="output-header">
+            <h2 class="output-title" data-translate="output_title">Enhanced Strategy Output</h2>
+            <button id="copyBtn" class="copy-button" style="display: none;">
+              <span>📋</span>
+              <span data-translate="copy_button">Copy to Clipboard</span>
+            </button>
+          </div>
+          
+          <div class="output-container">
+            <div id="outputArea" class="output-content">
+              <div class="empty-state">
+                <div class="empty-state-icon">🧠</div>
+                <div class="empty-state-text" data-translate="empty_state">Your AI-generated cognitive strategies will appear here</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <footer class="app-footer">
+          <p>Created By <strong>Shift Mind AI Labs</strong></p>
+        </footer>
+      </main>
+    </div>
+  </div>
+
+  <script>
+    // RTL languages list
+    const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'ku'];
+
+    // Current language and API key
+    let currentLanguage = 'en';
+    let currentApiKey = '';
+
+    // Language names mapping
+    const languageNames = {
+      en: 'English', es: 'Spanish', fr: 'French', de: 'German', zh: 'Chinese',
+      ja: 'Japanese', ko: 'Korean', pt: 'Portuguese', it: 'Italian', ar: 'Arabic',
+      ru: 'Russian', hi: 'Hindi', bn: 'Bengali', ur: 'Urdu', tr: 'Turkish',
+      pl: 'Polish', nl: 'Dutch', sv: 'Swedish', da: 'Danish', no: 'Norwegian',
+      fi: 'Finnish', is: 'Icelandic', cs: 'Czech', sk: 'Slovak', hu: 'Hungarian',
+      ro: 'Romanian', bg: 'Bulgarian', hr: 'Croatian', sr: 'Serbian', sl: 'Slovenian',
+      mk: 'Macedonian', sq: 'Albanian', lv: 'Latvian', lt: 'Lithuanian', et: 'Estonian',
+      mt: 'Maltese', ga: 'Irish', cy: 'Welsh', eu: 'Basque', ca: 'Catalan',
+      gl: 'Galician', el: 'Greek', he: 'Hebrew', fa: 'Persian', ps: 'Pashto',
+      ku: 'Kurdish', az: 'Azerbaijani', kk: 'Kazakh', ky: 'Kyrgyz', uz: 'Uzbek',
+      tk: 'Turkmen', tg: 'Tajik', mn: 'Mongolian', ka: 'Georgian', hy: 'Armenian',
+      th: 'Thai', vi: 'Vietnamese', lo: 'Lao', km: 'Khmer', my: 'Myanmar',
+      si: 'Sinhala', ta: 'Tamil', te: 'Telugu', kn: 'Kannada', ml: 'Malayalam',
+      gu: 'Gujarati', pa: 'Punjabi', or: 'Odia', as: 'Assamese', ne: 'Nepali',
+      dz: 'Dzongkha', bo: 'Tibetan', id: 'Indonesian', ms: 'Malay', tl: 'Filipino',
+      ceb: 'Cebuano', haw: 'Hawaiian', mi: 'Maori', sm: 'Samoan', to: 'Tongan',
+      fj: 'Fijian', mg: 'Malagasy', sw: 'Swahili', zu: 'Zulu', xh: 'Xhosa',
+      af: 'Afrikaans', st: 'Southern Sotho', tn: 'Tswana', ss: 'Swati', ve: 'Venda',
+      ts: 'Tsonga', nr: 'Southern Ndebele', am: 'Amharic', ti: 'Tigrinya', om: 'Oromo',
+      so: 'Somali', ha: 'Hausa', yo: 'Yoruba', ig: 'Igbo', ff: 'Fulani',
+      wo: 'Wolof', bm: 'Bambara', rn: 'Rundi', rw: 'Rwanda', lg: 'Luganda',
+      ny: 'Chichewa', sn: 'Shona', nd: 'Northern Ndebele'
+    };
+
+    // Translation cache management
+    const CACHE_PREFIX = 'aicognitive_translations_';
+    const CACHE_VERSION = '1.0';
+
+    // App Configuration
+    const AppConfig = {
+      API_BASE_URL: 'https://api.openai.com/v1/chat/completions',
+      MODEL: 'gpt-4o-mini',
+      MAX_TOKENS: 3000,
+      TEMPERATURE: 0.7,
+      MAX_PROMPT_LENGTH: 2000
+    };
+
+    // App State Management
+    const AppState = {
+      apiKey: '',
+      isLoading: false,
+      currentPrompt: '',
+      lastResult: '',
+
+      setApiKey(key) {
+        this.apiKey = key;
+        this.saveToLocalStorage();
+      },
+
+      setLoading(loading) {
+        this.isLoading = loading;
+        UIController.updateLoadingState(loading);
+      },
+
+      saveToLocalStorage() {
+        try {
+          localStorage.setItem('aiCognitiveStrategy_apiKey', this.apiKey);
+        } catch (e) {
+          console.warn('Could not save to localStorage:', e);
+        }
+      },
+
+      loadFromLocalStorage() {
+        try {
+          this.apiKey = localStorage.getItem('aiCognitiveStrategy_apiKey') || '';
+        } catch (e) {
+          console.warn('Could not load from localStorage:', e);
+        }
+      }
+    };
+
+    // Check if translations are cached for a language
+    function isLanguageCached(language) {
+      const cacheKey = CACHE_PREFIX + language;
+      const cached = localStorage.getItem(cacheKey);
+      return cached !== null;
+    }
+
+    // Save translations to cache
+    function saveTranslationsToCache(language, translations) {
+      const cacheKey = CACHE_PREFIX + language;
+      const cacheData = {
+        version: CACHE_VERSION,
+        timestamp: Date.now(),
+        translations: translations
+      };
+      localStorage.setItem(cacheKey, JSON.stringify(cacheData));
+      console.log(`Translations cached for ${language}`);
+    }
+
+    // Load translations from cache
+    function loadTranslationsFromCache(language) {
+      const cacheKey = CACHE_PREFIX + language;
+      const cached = localStorage.getItem(cacheKey);
+      
+      if (cached) {
+        try {
+          const cacheData = JSON.parse(cached);
+          if (cacheData.version === CACHE_VERSION) {
+            console.log(`Translations loaded from cache for ${language}`);
+            return cacheData.translations;
+          }
+        } catch (error) {
+          console.error('Error parsing cached translations:', error);
+        }
+      }
+      return null;
+    }
+
+    // Get all cached languages
+    function getCachedLanguages() {
+      const cachedLanguages = [];
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(CACHE_PREFIX)) {
+          const language = key.replace(CACHE_PREFIX, '');
+          cachedLanguages.push(language);
+        }
+      }
+      return cachedLanguages;
+    }
+
+    // Clear all translation cache
+    function clearAllTranslationCache() {
+      const cachedLanguages = getCachedLanguages();
+      
+      if (cachedLanguages.length === 0) {
+        alert('No cached translations to clear.');
+        return;
+      }
+
+      const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', ');
+      const confirmMessage = `Are you sure you want to clear all cached translations?\n\nCached languages: ${languageList}\n\nThis will require re-downloading translations when switching languages.`;
+      
+      if (confirm(confirmMessage)) {
+        // Clear all translation caches
+        cachedLanguages.forEach(language => {
+          const cacheKey = CACHE_PREFIX + language;
+          localStorage.removeItem(cacheKey);
+        });
+        
+        // Update cache status
+        updateCacheStatus(currentLanguage);
+        updateCacheStatusDisplay();
+        
+        alert(`Cache cleared successfully!\n\n${cachedLanguages.length} language(s) removed from cache.`);
+        
+        // Ask if user wants to reload current language translations
+        if (currentLanguage !== 'en' && cachedLanguages.includes(currentLanguage)) {
+          if (confirm('Would you like to reload the current language translations?')) {
+            applyLanguage(currentLanguage);
+          }
+        }
+      }
+    }
+
+    // Update cache status indicator
+    function updateCacheStatus(language) {
+      const cacheStatus = document.getElementById('cacheStatus');
+      const isCached = isLanguageCached(language);
+      
+      if (language === 'en') {
+        cacheStatus.classList.remove('cached', 'translating');
+        return;
+      }
+      
+      if (isCached) {
+        cacheStatus.textContent = '💾 Translations cached - instant loading!';
+        cacheStatus.classList.add('cached');
+        cacheStatus.classList.remove('translating');
+      } else {
+        cacheStatus.textContent = '🔄 First time translation - will be cached for future use';
+        cacheStatus.classList.add('translating');
+        cacheStatus.classList.remove('cached');
+      }
+    }
+
+    // Update cache status display in management section
+    function updateCacheStatusDisplay() {
+      const cacheStatusDisplay = document.getElementById('cacheStatusDisplay');
+      const clearCacheBtn = document.getElementById('clearCacheBtn');
+      const cachedLanguages = getCachedLanguages();
+      
+      if (cachedLanguages.length === 0) {
+        cacheStatusDisplay.textContent = '📭 No cached translations';
+        cacheStatusDisplay.className = 'cache-status-display no-cache';
+        clearCacheBtn.disabled = true;
+      } else {
+        const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', ');
+        cacheStatusDisplay.textContent = `💾 ${cachedLanguages.length} language(s) cached: ${languageList}`;
+        cacheStatusDisplay.className = 'cache-status-display';
+        clearCacheBtn.disabled = false;
+      }
+    }
+
+    // Initialize the application
+    function initializeApp() {
+      // Load saved language and API key
+      const savedLanguage = localStorage.getItem('aicognitive_language') || 'en';
+      const savedApiKey = localStorage.getItem('aiCognitiveStrategy_apiKey') || '';
+      
+      currentLanguage = savedLanguage;
+      currentApiKey = savedApiKey;
+      
+      // Set language selector
+      document.getElementById('languageSelect').value = currentLanguage;
+      document.getElementById('apiKeyLanding').value = currentApiKey;
+      
+      // Apply direction for current language
+      applyDirection(currentLanguage);
+      
+      // Update cache status
+      updateCacheStatus(currentLanguage);
+      updateCacheStatusDisplay();
+      
+      // Show appropriate screen
+      if (currentApiKey && currentLanguage) {
+        showMainApp();
+      } else {
+        showLanguageLanding();
+      }
+    }
+
+    // Apply language direction
+    function applyDirection(language) {
+      currentLanguage = language;
+      
+      // Set document language and direction
+      document.documentElement.lang = language;
+      document.documentElement.dir = rtlLanguages.includes(language) ? 'rtl' : 'ltr';
+      
+      // Save language preference
+      localStorage.setItem('aicognitive_language', language);
+      
+      // Update cache status
+      updateCacheStatus(language);
+    }
+
+    // API call function for translation
+    async function translateText(text, targetLanguage) {
+      if (!currentApiKey) {
+        throw new Error('API key is required for translation');
+      }
+
+      const languageName = languageNames[targetLanguage] || 'English';
+      
+      const prompt = `Translate the following text to ${languageName}. Provide ONLY the exact translation without any explanations, additional information, or formatting:
+
+"${text}"`;
+
+      const payload = {
+        model: "gpt-4o-mini",
+        messages: [{ role: "user", content: prompt }],
+        max_tokens: 500,
+        temperature: 0.1
+      };
+
+      const response = await fetch("https://api.openai.com/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${currentApiKey}`
+        },
+        body: JSON.stringify(payload)
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error?.message || "Translation API request failed");
+      }
+
+      const data = await response.json();
+      return data.choices[0].message.content.trim();
+    }
+
+    // Apply cached translations to UI
+    function applyCachedTranslations(translations) {
+      // Apply text translations
+      Object.keys(translations.texts).forEach(originalText => {
+        const translation = translations.texts[originalText];
+        const elements = document.querySelectorAll(`[data-translate]`);
+        
+        elements.forEach(element => {
+          const originalElementText = element.getAttribute('data-original-text') || element.textContent;
+          if (originalElementText === originalText) {
+            element.textContent = translation;
+          }
+        });
+      });
+
+      // Apply placeholder translations
+      Object.keys(translations.placeholders).forEach(originalPlaceholder => {
+        const translation = translations.placeholders[originalPlaceholder];
+        const elements = document.querySelectorAll(`[data-translate-placeholder]`);
+        
+        elements.forEach(element => {
+          const originalElementPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder;
+          if (originalElementPlaceholder === originalPlaceholder) {
+            element.placeholder = translation;
+          }
+        });
+      });
+    }
+
+    // Translate all UI elements
+    async function translateInterface(targetLanguage) {
+      if (targetLanguage === 'en') {
+        // No translation needed for English
+        return;
+      }
+
+      // Check if translations are cached
+      const cachedTranslations = loadTranslationsFromCache(targetLanguage);
+      if (cachedTranslations) {
+        // Use cached translations
+        console.log('Using cached translations for', targetLanguage);
+        applyCachedTranslations(cachedTranslations);
+        return;
+      }
+
+      // Need to translate via API
+      showTranslationOverlay();
+
+      try {
+        // Get all elements with data-translate attribute
+        const elements = document.querySelectorAll('[data-translate]');
+        const placeholderElements = document.querySelectorAll('[data-translate-placeholder]');
+        
+        // Collect all texts to translate
+        const textsToTranslate = [];
+        const placeholdersToTranslate = [];
+        const elementMap = new Map();
+        
+        elements.forEach(element => {
+          const originalText = element.getAttribute('data-original-text') || element.textContent;
+          if (!element.getAttribute('data-original-text')) {
+            element.setAttribute('data-original-text', originalText);
+          }
+          textsToTranslate.push(originalText);
+          elementMap.set(originalText, element);
+        });
+
+        placeholderElements.forEach(element => {
+          const originalPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder;
+          if (!element.getAttribute('data-original-placeholder')) {
+            element.setAttribute('data-original-placeholder', originalPlaceholder);
+          }
+          placeholdersToTranslate.push(originalPlaceholder);
+          elementMap.set(originalPlaceholder, element);
+        });
+
+        // Prepare cache structure
+        const translationsCache = {
+          texts: {},
+          placeholders: {}
+        };
+
+        // Translate texts in batches
+        const batchSize = 10;
+        const allTexts = [...textsToTranslate, ...placeholdersToTranslate];
+        
+        for (let i = 0; i < allTexts.length; i += batchSize) {
+          const batch = allTexts.slice(i, i + batchSize);
+          
+          // Update progress
+          updateTranslationProgress(i, allTexts.length);
+          
+          // Translate batch
+          const translations = await Promise.all(
+            batch.map(text => translateText(text, targetLanguage))
+          );
+          
+          // Apply translations and cache them
+          batch.forEach((originalText, index) => {
+            const element = elementMap.get(originalText);
+            const translation = translations[index];
+            
+            if (element.hasAttribute('data-translate')) {
+              element.textContent = translation;
+              translationsCache.texts[originalText] = translation;
+            } else if (element.hasAttribute('data-translate-placeholder')) {
+              element.placeholder = translation;
+              translationsCache.placeholders[originalText] = translation;
+            }
+          });
+        }
+
+        // Save translations to cache
+        saveTranslationsToCache(targetLanguage, translationsCache);
+        
+        // Update cache status
+        updateCacheStatus(targetLanguage);
+        updateCacheStatusDisplay();
+
+      } catch (error) {
+        console.error('Translation error:', error);
+        UIController.showError('Translation failed: ' + error.message);
+      } finally {
+        hideTranslationOverlay();
+      }
+    }
+
+    // Show translation overlay
+    function showTranslationOverlay() {
+      document.getElementById('translationOverlay').style.display = 'flex';
+    }
+
+    // Hide translation overlay
+    function hideTranslationOverlay() {
+      document.getElementById('translationOverlay').style.display = 'none';
+    }
+
+    // Update translation progress
+    function updateTranslationProgress(current, total) {
+      const percentage = Math.round((current / total) * 100);
+      document.getElementById('translationMessage').textContent = 
+        `Translating interface... ${percentage}% complete (will be cached for future use)`;
+    }
+
+    // Apply language with API translation or cache
+    async function applyLanguage(language) {
+      applyDirection(language);
+      
+      if (language !== 'en') {
+        await translateInterface(language);
+      }
+    }
+
+    // Show language landing page
+    function showLanguageLanding() {
+      document.getElementById('languageLanding').style.display = 'block';
+      document.getElementById('mainApp').style.display = 'none';
+    }
+
+    // Show main application
+    function showMainApp() {
+      document.getElementById('languageLanding').style.display = 'none';
+      document.getElementById('mainApp').style.display = 'block';
+      
+      // Set API key in main app
+      document.getElementById('apiKey').value = currentApiKey;
+    }
+
+    // Start button click handler
+    document.getElementById('startBtn').addEventListener('click', async function() {
+      const selectedLanguage = document.getElementById('languageSelect').value;
+      const apiKey = document.getElementById('apiKeyLanding').value.trim();
+      
+      if (!apiKey) {
+        alert('Please enter your OpenAI API key');
+        return;
+      }
+      
+      currentLanguage = selectedLanguage;
+      currentApiKey = apiKey;
+      
+      // Save API key
+      localStorage.setItem('aiCognitiveStrategy_apiKey', apiKey);
+      
+      // Apply language with translation (cached or API)
+      await applyLanguage(selectedLanguage);
+      
+      // Show main app
+      showMainApp();
+    });
+
+    // Language selector change handler
+    document.getElementById('languageSelect').addEventListener('change', async function() {
+      const selectedLanguage = this.value;
+      updateCacheStatus(selectedLanguage);
+      
+      if (currentApiKey) {
+        await applyLanguage(selectedLanguage);
+      } else {
+        applyDirection(selectedLanguage);
+      }
+    });
+
+    // Clear cache button handler
+    document.getElementById('clearCacheBtn').addEventListener('click', clearAllTranslationCache);
+
+    // API key sync between landing and main app
+    document.getElementById('apiKeyLanding').addEventListener('input', function() {
+      currentApiKey = this.value;
+      localStorage.setItem('aiCognitiveStrategy_apiKey', this.value);
+      document.getElementById('apiKey').value = this.value;
+    });
+
+    document.getElementById('apiKey').addEventListener('input', function() {
+      currentApiKey = this.value;
+      localStorage.setItem('aiCognitiveStrategy_apiKey', this.value);
+      document.getElementById('apiKeyLanding').value = this.value;
+    });
+
+    // Scroll-based progress bar
+    window.addEventListener('scroll', () => {
+      const { scrollTop, scrollHeight } = document.documentElement;
+      const scrolled = (scrollTop / (scrollHeight - window.innerHeight)) * 100;
+      document.getElementById('progressBar').style.width = `${scrolled}%`;
+    });
+
+    // API Service Module
+    const APIService = {
+      async callOpenAI(prompt, apiKey) {
+        const payload = {
+          model: AppConfig.MODEL,
+          messages: [{ role: 'user', content: prompt }],
+          max_tokens: AppConfig.MAX_TOKENS,
+          temperature: AppConfig.TEMPERATURE
+        };
+
+        const response = await fetch(AppConfig.API_BASE_URL, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`
+          },
+          body: JSON.stringify(payload)
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error?.message || `HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        return data.choices[0].message.content;
+      }
+    };
+
+    // Prompt Builder Module
+    const PromptBuilder = {
+      buildCompositePrompt(userPrompt) {
+        const languageName = languageNames[currentLanguage] || 'English';
+        
+        return `**Important: Generate the entire response in ${languageName}. All content, headings, explanations, and strategy elements must be written in ${languageName}.**
+
+You are a professional educational strategist and cognitive scientist specializing in AI integration in learning. Based on the prompt provided below, generate two distinct sections in your response:
+
+Section 1: Critical Thinking Strategies  
+- Describe innovative ways in which AI can enhance cognitive abilities and boost learner confidence.  
+- Provide actionable recommendations and examples.
+
+Section 2: Mitigation Strategies  
+- Suggest methods to minimize the negative impacts of generative AI on cognitive skills.  
+- Provide practical recommendations and safeguards to protect cognitive development.
+
+Your response must be tailored to the prompt and presented in a clear, structured format with appropriate headings in ${languageName}.
+
+Prompt:
+<<<BEGIN PROMPT>>>
+${userPrompt}
+<<<END PROMPT>>>
+
+Output only the final enhanced prompt in ${languageName}.
+        `.trim();
+      }
+    };
+
+    // UI Controller Module
+    const UIController = {
+      elements: {},
+
+      init() {
+        this.elements = {
+          apiKeyInput: document.getElementById('apiKey'),
+          promptTextarea: document.getElementById('userPrompt'),
+          generateBtn: document.getElementById('generateBtn'),
+          loadingSpinner: document.getElementById('loadingSpinner'),
+          buttonText: document.querySelector('.button-text'),
+          outputArea: document.getElementById('outputArea'),
+          copyBtn: document.getElementById('copyBtn'),
+          characterCounter: document.getElementById('characterCounter')
+        };
+
+        this.setupEventListeners();
+        this.updateCharacterCounter();
+      },
+
+      setupEventListeners() {
+        this.elements.apiKeyInput.addEventListener('input', (e) => {
+          AppState.setApiKey(e.target.value.trim());
+        });
+
+        this.elements.promptTextarea.addEventListener('input', () => {
+          this.updateCharacterCounter();
+        });
+
+        this.elements.generateBtn.addEventListener('click', () => {
+          App.handleSubmit();
+        });
+
+        this.elements.copyBtn.addEventListener('click', () => {
+          this.copyToClipboard();
+        });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+          if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            e.preventDefault();
+            App.handleSubmit();
+          }
+        });
+      },
+
+      updateCharacterCounter() {
+        const length = this.elements.promptTextarea.value.length;
+        const maxLength = AppConfig.MAX_PROMPT_LENGTH;
+        this.elements.characterCounter.textContent = `${length} / ${maxLength}`;
+        
+        if (length > maxLength * 0.9) {
+          this.elements.characterCounter.style.color = 'var(--color-warning)';
+        } else {
+          this.elements.characterCounter.style.color = 'var(--color-text-muted)';
+        }
+      },
+
+      updateLoadingState(isLoading) {
+        if (isLoading) {
+          this.elements.generateBtn.disabled = true;
+          this.elements.buttonText.style.opacity = '0';
+          this.elements.loadingSpinner.style.display = 'block';
+        } else {
+          this.elements.generateBtn.disabled = false;
+          this.elements.buttonText.style.opacity = '1';
+          this.elements.loadingSpinner.style.display = 'none';
+        }
+      },
+
+      displayResults(content) {
+        this.elements.outputArea.innerHTML = this.formatOutput(content);
+        this.elements.copyBtn.style.display = 'inline-flex';
+        AppState.lastResult = content;
+        
+        // Announce to screen readers
+        this.announceToScreenReader('Strategy generation completed. Results are now available.');
+      },
+
+      formatOutput(content) {
+        // Basic markdown-like formatting
+        return content
+          .replace(/^# (.*$)/gm, '<h1>$1</h1>')
+          .replace(/^## (.*$)/gm, '<h2>$1</h2>')
+          .replace(/^### (.*$)/gm, '<h3>$1</h3>')
+          .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+          .replace(/\*(.*?)\*/g, '<em>$1</em>')
+          .replace(/\n\n/g, '</p><p>')
+          .replace(/^(.*)$/gm, '<p>$1</p>')
+          .replace(/<p><\/p>/g, '')
+          .replace(/<p>(<h[1-6]>.*?<\/h[1-6]>)<\/p>/g, '$1');
+      },
+
+      showError(message) {
+        const errorHtml = `
+          <div class="error-message">
+            <span class="error-icon">⚠️</span>
+            <span class="error-text">${message}</span>
+            <button class="error-dismiss" onclick="this.parentElement.remove()">×</button>
+          </div>
+        `;
+        
+        this.elements.outputArea.innerHTML = errorHtml + this.elements.outputArea.innerHTML;
+        this.announceToScreenReader(`Error: ${message}`);
+      },
+
+      async copyToClipboard() {
+        try {
+          await navigator.clipboard.writeText(AppState.lastResult);
+          
+          // Visual feedback
+          const originalText = this.elements.copyBtn.innerHTML;
+          this.elements.copyBtn.innerHTML = '<span>✅</span> Copied!';
+          
+          setTimeout(() => {
+            this.elements.copyBtn.innerHTML = originalText;
+          }, 2000);
+          
+          this.announceToScreenReader('Content copied to clipboard');
+        } catch (err) {
+          console.error('Failed to copy:', err);
+          this.announceToScreenReader('Failed to copy content');
+        }
+      },
+
+      announceToScreenReader(message) {
+        const announcement = document.createElement('div');
+        announcement.setAttribute('aria-live', 'polite');
+        announcement.setAttribute('aria-atomic', 'true');
+        announcement.className = 'sr-only';
+        announcement.textContent = message;
+        document.body.appendChild(announcement);
+        
+        setTimeout(() => {
+          document.body.removeChild(announcement);
+        }, 1000);
+      }
+    };
+
+    // Error Handler Module
+    const ErrorHandler = {
+      handleError(error) {
+        console.error('Application error:', error);
+        
+        let userMessage = 'An unexpected error occurred. Please try again.';
+        
+        if (error.message.includes('API key')) {
+          userMessage = 'Invalid API key. Please check your OpenAI API key and try again.';
+        } else if (error.message.includes('network') || error.message.includes('fetch')) {
+          userMessage = 'Network error. Please check your internet connection and try again.';
+        } else if (error.message.includes('rate limit')) {
+          userMessage = 'Rate limit exceeded. Please wait a moment before trying again.';
+        } else if (error.message.includes('quota')) {
+          userMessage = 'API quota exceeded. Please check your OpenAI account usage.';
+        }
+        
+        UIController.showError(userMessage);
+      }
+    };
+
+    // Input Validator Module
+    const InputValidator = {
+      validateApiKey(apiKey) {
+        if (!apiKey || apiKey.length < 10) {
+          throw new Error('Please enter a valid OpenAI API key.');
+        }
+        
+        if (!apiKey.startsWith('sk-')) {
+          throw new Error('OpenAI API key should start with "sk-".');
+        }
+        
+        return true;
+      },
+
+      validatePrompt(prompt) {
+        if (!prompt || prompt.trim().length === 0) {
+          throw new Error('Please enter a prompt before generating strategies.');
+        }
+        
+        if (prompt.length > AppConfig.MAX_PROMPT_LENGTH) {
+          throw new Error(`Prompt is too long. Maximum ${AppConfig.MAX_PROMPT_LENGTH} characters allowed.`);
+        }
+        
+        return true;
+      }
+    };
+
+    // Main App Module
+    const App = {
+      init() {
+        AppState.loadFromLocalStorage();
+        UIController.init();
+        
+        // Load saved API key
+        if (AppState.apiKey) {
+          UIController.elements.apiKeyInput.value = AppState.apiKey;
+        }
+        
+        console.log('AI Cognitive Strategy Generator initialized');
+      },
+
+      async handleSubmit() {
+        if (AppState.isLoading) return;
+        
+        try {
+          const apiKey = UIController.elements.apiKeyInput.value.trim();
+          const userPrompt = UIController.elements.promptTextarea.value.trim();
+          
+          // Validate inputs
+          InputValidator.validateApiKey(apiKey);
+          InputValidator.validatePrompt(userPrompt);
+          
+          // Update state
+          AppState.setApiKey(apiKey);
+          AppState.currentPrompt = userPrompt;
+          AppState.setLoading(true);
+          
+          // Build composite prompt
+          const compositePrompt = PromptBuilder.buildCompositePrompt(userPrompt);
+          console.log('Composite Prompt:', compositePrompt);
+          
+          // Call API
+          const result = await APIService.callOpenAI(compositePrompt, apiKey);
+          
+          // Display results
+          UIController.displayResults(result);
+          
+        } catch (error) {
+          ErrorHandler.handleError(error);
+        } finally {
+          AppState.setLoading(false);
+        }
+      }
+    };
+
+    // Initialize app when DOM is loaded
+    document.addEventListener('DOMContentLoaded', function() {
+      initializeApp();
+      App.init();
+    });
+  </script>
+</body>
+</html>
+

📘 Educator & Student Guide.txt

@@ -0,0 +1,156 @@
+📘 Educator & Student Guide
+AI Cognitive Strategy Generator – Enhanced Learning & Critical Thinking
+Shift Mind AI Labs | www.shiftmind.io | info@shiftmind.io
+
+🧭 Overview
+This tool helps students, educators, and lifelong learners generate cognitive learning strategies and AI-aware mitigation techniques. It is designed to foster:
+
+Metacognition & critical thinking
+
+Personalized learning support
+
+Responsible AI use in education
+
+Multilingual inclusivity
+
+Privacy-first AI exploration
+
+🎯 Learning Objectives
+By the end of using this tool, learners will be able to:
+
+Design personal strategies to strengthen memory, focus, and cognitive performance.
+
+Reflect on AI’s role in learning and how to balance its strengths and risks.
+
+Apply mitigation strategies to avoid over-reliance on AI tools.
+
+Co-create learning routines that are intentional, strategic, and ethical.
+
+🛠️ Tool Setup
+✅ Requirements
+A modern browser (Chrome, Edge, Firefox, Safari)
+
+An OpenAI API key (for real-time AI generation)
+
+Internet connection
+
+🔐 Privacy Assurance
+The tool is 100% client-side.
+
+No login, registration, or data collection.
+
+API keys and input/output never leave your device.
+
+👩‍🏫 For Educators: How to Integrate It
+A. Professional Development
+Use the tool in PD workshops to:
+
+Reflect on how AI affects student cognitive development.
+
+Design classroom safeguards to ensure AI enhances—not replaces—thinking.
+
+Create support plans for digital literacy and AI competency frameworks.
+
+B. Curriculum Integration
+Subject	Integration Strategy Example
+English/ELA	Generate cognitive strategies for improving analysis skills
+Science	Develop plans to enhance hypothesis-building & curiosity
+Math	Support metacognitive routines for word problems
+History/Civics	Explore AI bias & strategy generation for source evaluation
+Tech & AI Lit	Reflect on AI use cases, cognitive impacts, and mitigation
+
+C. Lesson Ideas
+✅ Lesson 1: “Thinking About Thinking”
+Ask students to input their biggest learning struggle.
+
+Use the tool to generate strategies.
+
+Have students compare and discuss results in groups.
+
+Extension: Design posters or infographics summarizing strategies.
+
+✅ Lesson 2: “AI & My Brain”
+Students input a common AI tool they use (e.g., ChatGPT for essays).
+
+Explore mitigation strategies from the tool.
+
+Lead a class discussion: “How can we use AI without weakening our minds?”
+
+✅ Lesson 3: “Build a Cognitive Toolkit”
+Across the semester, students use the tool weekly.
+
+They compile a personal “Cognitive Strategy Portfolio.”
+
+Assess through reflection journals and application to real tasks.
+
+👨‍🎓 For Students: How to Use It
+1. Enter Your API Key
+You need your personal OpenAI API key. Ask your teacher or get one here.
+
+💡 Your key is stored only in your browser and never leaves your device.
+
+2. Choose Your Language
+Select from 80+ languages using the dropdown menu. This will localize all content, including prompts and AI output.
+
+3. Describe Your Learning Challenge
+In the prompt box, write something like:
+
+“I lose focus when I study history.”
+
+“I rely too much on AI to write my essays.”
+
+“I want to improve how I ask good questions.”
+
+“I want to become a better independent thinker.”
+
+💡 Be specific for best results.
+
+4. Click ‘Generate Strategies’
+The tool will produce two sections:
+
+✅ A. Critical Thinking Strategies
+Real, personalized steps to improve how you think, learn, and grow. Includes self-questioning, planning, memory techniques, and more.
+
+✅ B. Mitigation Strategies
+Ways to avoid over-reliance on AI, confirmation bias, and other risks of cognitive outsourcing. Helps you remain the driver of your own thinking.
+
+5. Apply the Output
+Use the ideas to:
+
+Improve study habits
+
+Plan how to use AI ethically
+
+Create better routines for homework or test prep
+
+Track your growth over time
+
+6. Optional Enhancements
+Create a Cognitive Journal: Log weekly prompts and strategies.
+
+Share with a study group or teacher for feedback.
+
+Build a Cognitive Learning Portfolio (great for IB, project-based, or SEL-aligned programs).
+
+🧠 Why This Tool Matters
+Feature	Cognitive Impact
+Personalized Strategy Generator	Increases ownership and metacognitive skill
+AI-Aware Mitigation Design	Builds ethical, independent learners
+Multilingual UI	Inclusive for diverse classrooms
+No-Login Privacy	Ensures safe experimentation for minors and educators
+Fully Local Execution	Ideal for schools, workshops, and digital minimalists
+
+🆘 Support & Troubleshooting
+Make sure your OpenAI API key is valid.
+
+If translation isn’t working, refresh and try again (your language will reload).
+
+Contact: info@shiftmind.io
+
+Visit: www.shiftmind.io
+
+🎓 Summary
+The AI Cognitive Strategy Generator empowers users to think about their thinking, use AI responsibly, and grow as learners, creators, and citizens in an AI-driven world.
+
+“AI can be your thinking partner—but you must stay in the driver’s seat.”
+— Shift Mind AI Labs