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,100 @@
+---
+title: "🌱 ImpactAnalyzer Pro – Sustainability & Social Impact Assessment"
+emoji: "🌱"
+colorFrom: "green"
+colorTo: "red"
+sdk: "static"
+sdk_version: "0.1.0"
+app_file: "index.html"
+pinned: false
+---
+
+# 🌱 ImpactAnalyzer Pro – Sustainability & Social Impact Assessment  
+**Developed by Shift Mind AI Labs**
+
+ImpactAnalyzer Pro is an open-source, privacy-first platform that enables comprehensive, multilingual sustainability and social impact assessments for any idea, project, product, or initiative. The platform guides users through in-depth environmental, social, economic, ethical, lifecycle, and risk analyses—instantly and securely in 80+ languages.
+
+---
+
+## 🚀 Features
+
+- **Comprehensive Impact Analysis:**  
+  Generates full, structured reports covering environmental, social, economic, and ethical impacts.
+- **Custom Project Input:**  
+  Tailor the analysis to your specific idea or initiative—ideal for PBL, research, or innovation.
+- **Modern, Multilingual UI:**  
+  80+ language support (OpenAI API key required; all processing is in-browser).
+- **Practical Recommendations:**  
+  Actionable improvement plans, success metrics, and comparison with best practices.
+- **Privacy-First:**  
+  No login, no cloud storage—API key and content **never** leave your device.
+
+---
+
+## 🛠 How to Use
+
+1. **Open the tool** (local HTML file or Hugging Face Space).
+2. **Select your language** and enter your OpenAI API key.
+3. **Describe your idea, project, or initiative** (see Guide below for tips).
+4. **Click “🌱 Analyze Impact”**.
+5. **Review, copy, and use** the generated full impact analysis report.
+6. **Switch languages or clear cache** as needed for instant multilingual output.
+
+---
+
+## 👩‍🏫 For Teachers
+
+- **Project-Based Learning (PBL):**  
+  Guide students in analyzing the real-world impact of projects, products, or social initiatives.
+- **STEM, Social Studies, Business, Civics:**  
+  Deepen research assignments, innovation proposals, or policy critiques with comprehensive frameworks.
+- **Assessment & Reflection:**  
+  Use generated reports for formative/summative assessment, group work, or peer review.
+- **Cross-Curricular Integration:**  
+  Supports science, geography, business, ethics, and sustainability topics.
+
+---
+
+## 👨‍🎓 For Students
+
+- **Research & Capstone Projects:**  
+  Submit any idea or project for professional-level impact assessment.
+- **Competition Prep:**  
+  Prepare sustainability and social impact sections for hackathons or business competitions.
+- **Skill Building:**  
+  Develop systems thinking, critical analysis, and solution-focused research skills.
+- **Global Learning:**  
+  Instantly translate and share reports for international or ELL classrooms.
+
+---
+
+## 🔐 Data Privacy
+
+- Your OpenAI API key and all project data **never leave your device**.
+- No data is transmitted to Shift Mind AI Labs, Hugging Face, or any third party.
+
+---
+
+## 📄 License
+
+Licensed under the [Apache License 2.0](./LICENSE).
+
+---
+
+## 🧠 About Shift Mind AI Labs
+
+Shift Mind AI Labs develops open-source, ethical AI tools for education, innovation, and social good.
+
+🌐 https://www.shiftmind.io  
+✉️ info@shiftmind.io
+
+---
+
+## 🙌 Contributing
+
+Ideas, feedback, and collaboration welcome!  
+For pilots, research, or partnerships: **info@shiftmind.io**
+
+---
+
+*Empowering every classroom and innovator to measure, understand, and improve real-world impact—instantly, securely, in any language.*

index.html

@@ -0,0 +1,1854 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ImpactAnalyzer Pro - Sustainability & Social Impact Assessment</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&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 - Sustainability/Impact theme */
+      --color-primary: #059669;
+      --color-primary-hover: #047857;
+      --color-secondary: #10b981;
+      --color-accent: #34d399;
+      --color-success: #10b981;
+      --color-warning: #f59e0b;
+      --color-error: #ef4444;
+      
+      /* Neutral Colors - Light Mode */
+      --color-background: #f8fafc;
+      --color-surface: #ffffff;
+      --color-surface-elevated: #ffffff;
+      --color-border: #e2e8f0;
+      --color-border-focus: #059669;
+      --color-text-primary: #1e293b;
+      --color-text-secondary: #64748b;
+      --color-text-muted: #94a3b8;
+      
+      /* Typography */
+      --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      
+      /* 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: linear-gradient(135deg, var(--color-background) 0%, #e2e8f0 100%);
+      color: var(--color-text-primary);
+      line-height: 1.6;
+      -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(5, 150, 105, 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(5, 150, 105, 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(5, 150, 105, 0.4);
+    }
+
+    .start-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Cache Management Section */
+    .cache-management {
+      background: rgba(5, 150, 105, 0.05);
+      border: 1px solid rgba(5, 150, 105, 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(16, 185, 129, 0.1);
+      border: 1px solid rgba(16, 185, 129, 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%, #f59e0b 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(245, 158, 11, 0.4);
+    }
+
+    .clear-cache-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Cache Status Indicator */
+    .cache-status {
+      background: rgba(16, 185, 129, 0.1);
+      border: 1px solid rgba(16, 185, 129, 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(5, 150, 105, 0.1);
+      border-color: rgba(5, 150, 105, 0.2);
+      color: var(--color-primary);
+    }
+
+    /* Translation Loading Overlay */
+    .translation-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(5, 150, 105, 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 {
+      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(5, 150, 105, 0.05);
+      border: 1px solid rgba(5, 150, 105, 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(5, 150, 105, 0.1);
+    }
+
+    .mini-clear-cache {
+      background: rgba(245, 158, 11, 0.1);
+      border: 1px solid rgba(245, 158, 11, 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(245, 158, 11, 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(5, 150, 105, 0.05);
+      border: 1px solid rgba(5, 150, 105, 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(5, 150, 105, 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: 'Courier New', monospace;
+    }
+
+    .api-key-compact-input:focus {
+      outline: none;
+      border-color: var(--color-border-focus);
+      box-shadow: 0 0 0 2px rgb(5 150 105 / 0.1);
+    }
+
+    .api-key-compact-input::placeholder {
+      color: var(--color-text-muted);
+      font-size: 0.75rem;
+    }
+
+    /* Main Content */
+    .main-content {
+      padding: 20px 30px 30px;
+    }
+
+    /* Header */
+    .header {
+      text-align: center;
+      margin-bottom: 25px;
+      padding-bottom: 20px;
+      border-bottom: 2px solid var(--color-border);
+    }
+
+    .header 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: 8px;
+    }
+
+    .header .subtitle {
+      font-size: 1.1rem;
+      color: var(--color-text-secondary);
+      font-weight: 500;
+    }
+
+    .header .description {
+      font-size: 1rem;
+      color: var(--color-text-secondary);
+      margin-top: 12px;
+      max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    /* Impact Categories */
+    .impact-categories {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+      margin-bottom: 25px;
+    }
+
+    .category-card {
+      background: rgba(5, 150, 105, 0.05);
+      border: 1px solid rgba(5, 150, 105, 0.1);
+      border-radius: 8px;
+      padding: 15px;
+      text-align: center;
+    }
+
+    .category-card h4 {
+      color: var(--color-primary);
+      font-size: 0.9rem;
+      font-weight: 600;
+      margin-bottom: 6px;
+    }
+
+    .category-card p {
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+    }
+
+    /* Input Section */
+    .input-section {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 25px;
+      transition: all 0.3s ease;
+      box-shadow: var(--shadow-sm);
+    }
+
+    .input-section:hover {
+      border-color: var(--color-primary);
+      box-shadow: 0 8px 25px -8px rgba(5, 150, 105, 0.3);
+    }
+
+    .input-section h3 {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--color-primary);
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .input-section .description {
+      font-size: 0.9rem;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+    }
+
+    /* Form Elements */
+    label {
+      display: block;
+      margin-bottom: 6px;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      font-size: 0.95rem;
+    }
+
+    textarea {
+      width: 100%;
+      padding: 12px 16px;
+      border: 2px solid var(--color-border);
+      border-radius: 8px;
+      font-size: 1rem;
+      font-family: inherit;
+      background: var(--color-surface);
+      transition: all 0.2s ease;
+      resize: vertical;
+      min-height: 150px;
+    }
+
+    textarea:focus {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+    }
+
+    /* Character Counter */
+    .char-counter {
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+      text-align: right;
+      margin-top: 4px;
+    }
+
+    /* Generate Button */
+    .generate-btn {
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+      color: white;
+      padding: 16px 32px;
+      border: none;
+      border-radius: 12px;
+      font-size: 1.1rem;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: block;
+      margin: 25px auto;
+      min-width: 280px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .generate-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 24px -8px rgba(5, 150, 105, 0.4);
+    }
+
+    .generate-btn:active {
+      transform: translateY(0);
+    }
+
+    .generate-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Loading Spinner */
+    .spinner {
+      display: none;
+      width: 20px;
+      height: 20px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      border-radius: 50%;
+      border-top-color: white;
+      animation: spin 1s ease-in-out infinite;
+      margin-right: 8px;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Output Section */
+    .output-section {
+      margin-top: 30px;
+    }
+
+    .output-section h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--color-primary);
+      margin-bottom: 15px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .output-area {
+      background: var(--color-surface);
+      border: 2px solid var(--color-border);
+      border-radius: 12px;
+      padding: 20px;
+      min-height: 300px;
+      transition: all 0.3s ease;
+      position: relative;
+      overflow-x: auto;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      line-height: 1.7;
+    }
+
+    .output-area:empty::before {
+      content: "Your comprehensive impact analysis will appear here...";
+      color: var(--color-text-secondary);
+      font-style: italic;
+      white-space: normal;
+    }
+
+    /* Enhanced output styling */
+    .output-area h3 {
+      color: var(--color-primary);
+      border-bottom: 2px solid var(--color-primary);
+      padding-bottom: 8px;
+      margin: 20px 0 15px 0;
+      font-size: 1.2rem;
+    }
+
+    .output-area h4 {
+      color: var(--color-secondary);
+      margin: 15px 0 10px 0;
+      font-size: 1.1rem;
+    }
+
+    .output-area ul {
+      margin: 10px 0 15px 20px;
+      line-height: 1.7;
+    }
+
+    .output-area li {
+      margin-bottom: 5px;
+    }
+
+    .output-area p {
+      margin: 12px 0;
+      line-height: 1.7;
+    }
+
+    .output-area strong {
+      color: var(--color-primary);
+    }
+
+    /* Error Messages */
+    .error-message {
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid rgba(239, 68, 68, 0.2);
+      color: var(--color-error);
+      padding: 12px 16px;
+      border-radius: 8px;
+      margin: 10px 0;
+      font-size: 0.9rem;
+      display: none;
+    }
+
+    /* Footer */
+    .footer {
+      text-align: center;
+      padding: 20px;
+      background: rgba(5, 150, 105, 0.05);
+      border-top: 1px solid var(--color-border);
+      color: var(--color-text-secondary);
+      font-size: 0.9rem;
+    }
+
+    /* 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;
+      }
+
+      .main-content {
+        padding: 15px 20px 20px;
+      }
+
+      .header h1 {
+        font-size: 2rem;
+      }
+
+      .input-section {
+        padding: 15px;
+      }
+
+      .impact-categories {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      }
+
+      .generate-btn {
+        width: 100%;
+        margin: 20px 0;
+      }
+
+      .output-area {
+        padding: 15px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .language-landing h1 {
+        font-size: 2rem;
+      }
+
+      .header h1 {
+        font-size: 1.8rem;
+      }
+
+      .input-section {
+        padding: 12px;
+      }
+
+      .impact-categories {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    /* 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-btn:focus,
+    .api-key-compact-input:focus,
+    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">ImpactAnalyzer Pro</h1>
+    <p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with comprehensive sustainability and social impact assessment.</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 Impact Analysis</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>
+
+      <div class="main-content">
+        <!-- Header -->
+        <div class="header">
+          <h1 data-translate="app_title">ImpactAnalyzer Pro</h1>
+          <p class="subtitle" data-translate="app_subtitle">Sustainability & Social Impact Assessment Platform</p>
+          <p class="description" data-translate="app_description">Analyze the environmental and social impacts of your ideas, projects, and initiatives with comprehensive AI-powered assessment</p>
+        </div>
+
+        <!-- Impact Categories Overview -->
+        <div class="impact-categories">
+          <div class="category-card">
+            <h4 data-translate="environmental_impact">🌍 Environmental Impact</h4>
+            <p data-translate="environmental_desc">Carbon footprint, resource usage, sustainability</p>
+          </div>
+          <div class="category-card">
+            <h4 data-translate="social_impact">👥 Social Impact</h4>
+            <p data-translate="social_desc">Community benefits, social equity, accessibility</p>
+          </div>
+          <div class="category-card">
+            <h4 data-translate="economic_impact">💰 Economic Impact</h4>
+            <p data-translate="economic_desc">Cost-effectiveness, economic sustainability</p>
+          </div>
+          <div class="category-card">
+            <h4 data-translate="ethical_considerations">⚖️ Ethical Considerations</h4>
+            <p data-translate="ethical_desc">Fairness, transparency, responsibility</p>
+          </div>
+          <div class="category-card">
+            <h4 data-translate="lifecycle_assessment">🔄 Lifecycle Assessment</h4>
+            <p data-translate="lifecycle_desc">Long-term effects, scalability, durability</p>
+          </div>
+          <div class="category-card">
+            <h4 data-translate="risk_analysis">📊 Risk Analysis</h4>
+            <p data-translate="risk_desc">Potential challenges, mitigation strategies</p>
+          </div>
+        </div>
+
+        <!-- Error Message -->
+        <div class="error-message" id="errorMessage"></div>
+
+        <!-- Input Section -->
+        <div class="input-section">
+          <h3 data-translate="idea_input_title">💡 Idea & Project Input</h3>
+          <p class="description" data-translate="idea_input_desc">Describe your idea, project, product, service, or initiative that you want to analyze for environmental and social impact</p>
+          <textarea id="ideaInput" data-translate-placeholder="idea_input_placeholder" required></textarea>
+          <div class="char-counter" id="charCounter">0 characters</div>
+        </div>
+
+        <!-- Generate Button -->
+        <button class="generate-btn" id="compareBtn">
+          <span class="spinner" id="spinner"></span>
+          <span id="buttonText" data-translate="analyze_button">🌱 Analyze Impact</span>
+        </button>
+
+        <!-- Output Section -->
+        <div class="output-section">
+          <h2 data-translate="output_title">📈 Your Impact Analysis Report</h2>
+          <div class="output-area" id="impactOutput"></div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="footer">
+        Created by Shift Mind AI Labs
+      </div>
+    </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 = 'impactanalyzer_translations_';
+    const CACHE_VERSION = '1.0';
+
+    // 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('impactanalyzer_language') || 'en';
+      const savedApiKey = localStorage.getItem('impact_analyzer_api_key') || '';
+      
+      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('impactanalyzer_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);
+        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('impact_analyzer_api_key', 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('impact_analyzer_api_key', this.value);
+      document.getElementById('apiKey').value = this.value;
+    });
+
+    document.getElementById('apiKey').addEventListener('input', function() {
+      currentApiKey = this.value;
+      localStorage.setItem('impact_analyzer_api_key', this.value);
+      document.getElementById('apiKeyLanding').value = this.value;
+    });
+
+    // Character counter
+    const ideaInput = document.getElementById('ideaInput');
+    const charCounter = document.getElementById('charCounter');
+    
+    ideaInput.addEventListener('input', function() {
+      const count = this.value.length;
+      charCounter.textContent = `${count} characters`;
+      
+      if (count > 5000) {
+        charCounter.style.color = 'var(--color-warning)';
+      } else {
+        charCounter.style.color = 'var(--color-text-secondary)';
+      }
+    });
+
+    // 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}%`;
+    });
+
+    // Error handling
+    function showError(message) {
+      const errorDiv = document.getElementById('errorMessage');
+      errorDiv.textContent = message;
+      errorDiv.style.display = 'block';
+      setTimeout(() => {
+        errorDiv.style.display = 'none';
+      }, 5000);
+    }
+
+    // API call function - Updated to use current language
+    async function callAPI(prompt) {
+      const apiKey = document.getElementById('apiKey').value.trim();
+      
+      if (!apiKey) {
+        throw new Error('Please enter your OpenAI API key');
+      }
+
+      const payload = {
+        model: "gpt-4o-mini",
+        messages: [{ role: "user", content: prompt }],
+        max_tokens: 3500,
+        temperature: 0.3
+      };
+
+      const response = await fetch("https://api.openai.com/v1/chat/completions", {
+        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 || "API request failed");
+      }
+
+      const data = await response.json();
+      return data.choices[0].message.content;
+    }
+
+    // Build impact analysis prompt - Updated to use current language dynamically
+    function buildImpactPrompt() {
+      const languageName = languageNames[currentLanguage] || 'English';
+      const idea = document.getElementById('ideaInput').value.trim();
+
+      return `Based on the following idea, project, or initiative:
+
+---------------------
+${idea}
+---------------------
+
+**Important: Generate the entire response in ${languageName}. All content, headings, explanations, and recommendations must be written in ${languageName}.**
+
+Please provide a comprehensive, structured, and detailed analysis of the environmental and social impacts of this idea. The analysis should be professional, thorough, and actionable, formatted as clean text without any formatting symbols like asterisks (*) or hash signs (#).
+
+**Required Analysis Structure:**
+
+1. **Executive Summary**
+   - Brief overview of the idea and its primary impacts
+   - Key findings and overall assessment
+   - Main recommendations for improvement
+
+2. **Environmental Impact Assessment**
+   - **Carbon Footprint & Climate Impact**
+     - Greenhouse gas emissions (direct and indirect)
+     - Energy consumption and renewable energy potential
+     - Climate change mitigation or contribution
+   
+   - **Resource Usage & Conservation**
+     - Raw materials and natural resources required
+     - Water usage and conservation opportunities
+     - Land use and biodiversity considerations
+   
+   - **Waste & Pollution Analysis**
+     - Waste generation and management
+     - Air, water, and soil pollution potential
+     - Circular economy and recycling opportunities
+   
+   - **Sustainability Metrics**
+     - Long-term environmental viability
+     - Ecosystem impact and restoration potential
+     - Environmental compliance and standards
+
+3. **Social Impact Assessment**
+   - **Community Benefits & Engagement**
+     - Direct benefits to local communities
+     - Job creation and economic opportunities
+     - Community participation and empowerment
+   
+   - **Social Equity & Accessibility**
+     - Inclusivity and equal access considerations
+     - Impact on vulnerable or marginalized groups
+     - Affordability and accessibility barriers
+   
+   - **Health & Well-being**
+     - Public health implications
+     - Safety considerations and risk management
+     - Quality of life improvements or concerns
+   
+   - **Cultural & Social Considerations**
+     - Cultural sensitivity and preservation
+     - Social cohesion and community building
+     - Educational and awareness opportunities
+
+4. **Economic Impact & Viability**
+   - **Cost-Benefit Analysis**
+     - Implementation costs vs. long-term benefits
+     - Return on investment for stakeholders
+     - Economic sustainability assessment
+   
+   - **Market & Economic Effects**
+     - Market disruption or innovation potential
+     - Economic development opportunities
+     - Supply chain and economic ecosystem impact
+
+5. **Ethical Considerations & Governance**
+   - **Ethical Framework**
+     - Fairness and justice considerations
+     - Transparency and accountability measures
+     - Stakeholder rights and responsibilities
+   
+   - **Governance & Compliance**
+     - Regulatory compliance requirements
+     - Governance structures and oversight
+     - Risk management and mitigation strategies
+
+6. **Lifecycle Assessment**
+   - **Short-term Impacts (0-2 years)**
+     - Immediate environmental and social effects
+     - Implementation challenges and opportunities
+   
+   - **Medium-term Impacts (2-10 years)**
+     - Scaling effects and broader adoption
+     - Cumulative impact assessment
+   
+   - **Long-term Impacts (10+ years)**
+     - Generational and legacy effects
+     - Systemic change potential
+
+7. **Risk Analysis & Mitigation**
+   - **Potential Negative Impacts**
+     - Environmental risks and unintended consequences
+     - Social risks and community concerns
+     - Economic and financial risks
+   
+   - **Mitigation Strategies**
+     - Preventive measures and safeguards
+     - Monitoring and evaluation systems
+     - Adaptive management approaches
+
+8. **Recommendations & Action Plan**
+   - **Immediate Actions**
+     - Priority improvements for environmental impact
+     - Essential social safeguards and enhancements
+   
+   - **Strategic Improvements**
+     - Long-term sustainability enhancements
+     - Stakeholder engagement strategies
+     - Innovation and optimization opportunities
+   
+   - **Success Metrics & Monitoring**
+     - Key performance indicators (KPIs)
+     - Monitoring and evaluation framework
+     - Reporting and transparency measures
+
+9. **Comparative Analysis**
+   - **Alternative Approaches**
+     - Comparison with existing solutions
+     - Best practices and benchmarking
+   
+   - **Innovation Potential**
+     - Unique value proposition
+     - Scalability and replication potential
+
+10. **Conclusion & Overall Assessment**
+    - **Impact Rating**
+      - Environmental impact score and justification
+      - Social impact score and justification
+      - Overall sustainability rating
+    
+    - **Final Recommendations**
+      - Go/no-go recommendation with conditions
+      - Priority areas for improvement
+      - Next steps and implementation guidance
+
+**Output Requirements:**
+- Use clear, professional language without technical jargon
+- Provide specific, actionable recommendations
+- Include quantitative estimates where possible
+- Ensure the analysis is balanced and objective
+- Format as clean text without any markdown symbols
+- Make the content comprehensive yet accessible
+- Focus on practical implementation guidance
+
+**Tone:** Professional, analytical, and constructive. Provide honest assessment while offering practical solutions for improvement.
+
+Generate the complete analysis as plain text without any formatting symbols.`;
+    }
+
+    // Validation function
+    function validateInputs() {
+      const idea = document.getElementById('ideaInput').value.trim();
+
+      if (!idea) {
+        document.getElementById('ideaInput').focus();
+        throw new Error('Please enter your idea or project description for impact analysis');
+      }
+
+      if (idea.length < 50) {
+        document.getElementById('ideaInput').focus();
+        throw new Error('Please provide at least 50 characters for meaningful impact analysis');
+      }
+    }
+
+    // Generate impact analysis
+    document.getElementById('compareBtn').addEventListener('click', async function() {
+      const button = this;
+      const buttonText = document.getElementById('buttonText');
+      const spinner = document.getElementById('spinner');
+      const outputArea = document.getElementById('impactOutput');
+
+      try {
+        // Validate inputs
+        validateInputs();
+
+        // Update button state
+        button.disabled = true;
+        spinner.style.display = 'inline-block';
+        buttonText.textContent = 'Analyzing Impact...';
+        
+        // Clear previous output
+        outputArea.textContent = '';
+        
+        // Build prompt and call API
+        const prompt = buildImpactPrompt();
+        const result = await callAPI(prompt);
+        
+        // Display result
+        outputArea.textContent = result;
+        
+      } catch (error) {
+        showError(error.message);
+        outputArea.textContent = '';
+      } finally {
+        // Reset button state
+        button.disabled = false;
+        spinner.style.display = 'none';
+        buttonText.textContent = '🌱 Analyze Impact';
+      }
+    });
+
+    // Keyboard shortcut for generation
+    document.addEventListener('keydown', function(e) {
+      if (e.ctrlKey && e.key === 'Enter') {
+        e.preventDefault();
+        document.getElementById('compareBtn').click();
+      }
+    });
+
+    // Initialize app when DOM is loaded
+    document.addEventListener('DOMContentLoaded', function() {
+      initializeApp();
+    });
+  </script>
+</body>
+</html>
+

📘 Teacher & Student Guide ImpactAn.txt

@@ -0,0 +1,73 @@
+📘 Teacher & Student Guide: ImpactAnalyzer Pro
+1. Purpose & Educational Value
+ImpactAnalyzer Pro empowers teachers and students to analyze and improve the real-world impact of any idea or project, using a comprehensive framework covering environmental, social, economic, ethical, and risk dimensions.
+
+2. Step-by-Step Instructions with Input Explanation and Sample
+A. Access & Setup
+Open the tool (local or Hugging Face Space).
+
+Select your preferred language.
+
+Enter your OpenAI API key (private, stored only in your browser).
+
+B. Idea & Project Input
+What to Write:
+Describe the idea, project, product, service, or initiative you want to analyze.
+
+Be clear about its purpose, who it’s for, and how it works.
+
+Mention any specific features, locations, or technologies involved.
+
+Why:
+A detailed description ensures the AI can provide a highly relevant and actionable impact analysis.
+
+Sample Input:
+
+“A student-led campaign to eliminate single-use plastic bottles from our school by installing filtered water stations, encouraging reusable bottles, and launching awareness workshops for students and parents. The project will run for one academic year and aims to reduce plastic waste by 80%.”
+
+C. Generating the Impact Analysis
+Click “🌱 Analyze Impact”.
+
+Wait for the AI to generate a comprehensive report (takes a few moments).
+
+Review the output—organized by Executive Summary, Environmental Impact, Social Impact, Economic Viability, Ethics, Lifecycle, Risk, Recommendations, Comparative Analysis, and Conclusion.
+
+D. Using the Report in Class or Projects
+Reflection & Assessment:
+Use the report to assess feasibility, identify risks, and improve your proposal.
+
+Presentations:
+Copy sections of the report for slide decks, written reports, or business pitches.
+
+Peer Review:
+Share with classmates or colleagues for feedback and comparison.
+
+Revision:
+Use actionable recommendations to revise or optimize your idea before implementation.
+
+3. Classroom Applications & Project Ideas
+Application Type	How to Use in Class
+STEM & Environmental Ed	Analyze science fair, green tech, or sustainability projects
+Social Studies/Civics	Assess policy proposals, social enterprises, or campaigns
+Business/Entrepreneurship	Use for market analysis, business planning, or competitions
+Ethics & PBL	Examine real-world dilemmas and debate trade-offs
+
+4. Best Practices & Tips
+Be specific: The more detail in your input, the richer the analysis.
+
+Iterate: Refine your idea, re-run analysis, and compare changes.
+
+Leverage languages: Use multilingual output for international teams or ELLs.
+
+Discuss limitations: Not all factors can be predicted—use as a starting point for critical discussion.
+
+5. Troubleshooting & Support
+API errors? Check your key and internet connection.
+
+Output too general? Add more detail or clarify your idea in the input.
+
+Translation issues? Clear cache and reload if needed.
+
+Help: info@shiftmind.io | www.shiftmind.io
+
+ImpactAnalyzer Pro helps every learner and educator unlock the true value and risks of their innovations—making sustainability and social impact practical, measurable, and accessible.