Spaces:

Hma47
/

Code-Explainer

Running

App Files Files Community

Hma47 commited on Aug 6, 2025

Commit

234c063

verified ·

1 Parent(s): a0aa850

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -1929

index.html DELETED Viewed

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