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: "🏛️ GovernanceFramework Pro – Advanced AI Policy & Compliance Management"
+emoji: "🏛️"
+colorFrom: "red"
+colorTo: "yellow"
+sdk: "static"
+sdk_version: "0.1.0"
+app_file: "index.html"
+pinned: false
+---
+
+# 🏛️ GovernanceFramework Pro – Advanced AI Policy & Compliance Management  
+**Developed by Shift Mind AI Labs**
+
+GovernanceFramework Pro is an open-source, privacy-first platform for creating comprehensive, multilingual AI governance frameworks for educational institutions. This platform guides users step-by-step in designing responsible, policy-aligned, and ethical AI adoption—covering mission, structure, ethics, data privacy, compliance, and stakeholder engagement.
+
+---
+
+## 🚀 Features
+
+- **Full Governance Framework Generation:**  
+  Structure and draft all sections of an AI policy for schools or educational organizations.
+- **Custom Scenario Input:**  
+  Tailor every policy detail to your institution’s goals, values, and regulations.
+- **Multilingual UI & Output:**  
+  Supports 80+ languages (OpenAI API required, processed locally).
+- **Compliance Focused:**  
+  Aligned to international standards—GDPR, FERPA, and responsible AI guidelines.
+- **Modern UI:**  
+  Accessible, mobile-ready, color-coded, and RTL/LTR compatible.
+- **Privacy-First:**  
+  No login, no cloud storage—your API key and input never leave your device.
+
+---
+
+## 🛠 How to Use
+
+1. **Open the tool** (local HTML or Hugging Face Space).
+2. **Select your language** and enter your OpenAI API key (never leaves your browser).
+3. **Enter your institution’s name** and answer structured questions for each governance section.
+4. **Click “Generate AI Governance Framework”**.
+5. **Review and copy** your tailored policy framework, ready for editing, review, or direct adoption.
+6. **Switch languages or clear translation cache** as needed.
+
+---
+
+## 👩‍🏫 For Teachers & School Leaders
+
+- **AI Policy Building:**  
+  Use with school teams to collaboratively draft comprehensive, responsible AI adoption policies.
+- **Professional Development:**  
+  Train staff on governance, compliance, and ethical AI integration.
+- **Digital Citizenship:**  
+  Develop classroom-ready policy modules on privacy, equity, and responsible use.
+- **Stakeholder Engagement:**  
+  Involve parents, students, and community members in policy co-creation.
+
+---
+
+## 👨‍🎓 For Students
+
+- **Project-Based Learning:**  
+  Research, critique, or create school AI policy as part of STEM, civics, or digital ethics assignments.
+- **Real-World Application:**  
+  Experience how responsible technology policy is developed and implemented.
+- **Group Work:**  
+  Collaboratively analyze, debate, and draft policies for different scenarios.
+
+---
+
+## 🔐 Data Privacy
+
+- Your API key and all content **never leave your device**.
+- No data is sent 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 creates open-source, ethical AI tools for education, policy, and digital transformation.
+
+🌐 https://www.shiftmind.io  
+✉️ info@shiftmind.io
+
+---
+
+## 🙌 Contributing
+
+Pull requests, policy templates, and pilots welcome!  
+For district, ministry, or research pilots: **info@shiftmind.io**
+
+---
+
+*Empowering every school and learner to build safe, transparent, and equitable AI governance—globally and locally.*

index.html

@@ -0,0 +1,1912 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GovernanceFramework Pro - Advanced AI Policy & Compliance</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 - Governance/Policy theme */
+      --color-primary: #6366f1;
+      --color-primary-hover: #5b21b6;
+      --color-secondary: #8b5cf6;
+      --color-accent: #a855f7;
+      --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: #6366f1;
+      --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(99, 102, 241, 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(99, 102, 241, 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(99, 102, 241, 0.4);
+    }
+
+    .start-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+
+    /* Cache Management Section */
+    .cache-management {
+      background: rgba(99, 102, 241, 0.05);
+      border: 1px solid rgba(99, 102, 241, 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(99, 102, 241, 0.1);
+      border-color: rgba(99, 102, 241, 0.2);
+      color: var(--color-primary);
+    }
+
+    /* Translation Loading Overlay */
+    .translation-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(99, 102, 241, 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(99, 102, 241, 0.05);
+      border: 1px solid rgba(99, 102, 241, 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(99, 102, 241, 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(99, 102, 241, 0.05);
+      border: 1px solid rgba(99, 102, 241, 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(99, 102, 241, 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(99 102 241 / 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;
+    }
+
+    /* School Name Input */
+    .school-name {
+      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);
+    }
+
+    .school-name:hover {
+      border-color: var(--color-primary);
+      box-shadow: 0 8px 25px -8px rgba(99, 102, 241, 0.3);
+    }
+
+    .school-name label {
+      font-weight: 600;
+      color: var(--color-text-primary);
+      margin-bottom: 8px;
+      display: block;
+    }
+
+    .school-name input {
+      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;
+    }
+
+    .school-name input:focus {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    /* Section Styling */
+    .section {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 12px;
+      padding: 25px;
+      margin-bottom: 25px;
+      transition: all 0.3s ease;
+      box-shadow: var(--shadow-sm);
+    }
+
+    .section:hover {
+      border-color: var(--color-primary);
+      box-shadow: 0 8px 25px -8px rgba(99, 102, 241, 0.3);
+    }
+
+    .section h2 {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: var(--color-primary);
+      margin-bottom: 20px;
+      padding-bottom: 10px;
+      border-bottom: 2px solid var(--color-primary);
+    }
+
+    .section h3 {
+      font-size: 1.4rem;
+      font-weight: 600;
+      color: var(--color-text-primary);
+      margin: 25px 0 15px 0;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    /* Questions Grid Layout - 3 columns */
+    .questions-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      gap: 20px;
+      margin: 20px 0;
+    }
+
+    .question {
+      background: rgba(99, 102, 241, 0.02);
+      border: 1px solid rgba(99, 102, 241, 0.1);
+      border-left: 4px solid var(--color-primary);
+      border-radius: 8px;
+      padding: 20px;
+      transition: all 0.3s ease;
+    }
+
+    .question:hover {
+      background: rgba(99, 102, 241, 0.05);
+      border-color: var(--color-primary);
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .question p {
+      margin: 0 0 15px 0;
+      font-weight: 500;
+      color: var(--color-text-primary);
+      font-size: 0.95rem;
+      line-height: 1.6;
+    }
+
+    .question input[type="text"] {
+      width: 100%;
+      padding: 12px 16px;
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      background: var(--color-surface);
+      transition: all 0.2s ease;
+      font-family: inherit;
+    }
+
+    .question input[type="text"]:focus {
+      outline: none;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    /* Generate Button */
+    .generate-btn {
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+      color: white;
+      padding: 18px 40px;
+      border: none;
+      border-radius: 12px;
+      font-size: 1.2rem;
+      font-weight: 700;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: block;
+      margin: 40px auto;
+      min-width: 320px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .generate-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 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); }
+    }
+
+    /* Status Indicator */
+    #statusIndicator {
+      text-align: center;
+      font-weight: 600;
+      font-size: 1.1rem;
+      margin: 20px 0;
+      color: var(--color-primary);
+      padding: 15px;
+      background: rgba(99, 102, 241, 0.05);
+      border-radius: 8px;
+      border: 1px solid rgba(99, 102, 241, 0.1);
+    }
+
+    /* Output Section */
+    #output {
+      background: var(--color-surface);
+      border: 2px solid var(--color-border);
+      border-radius: 12px;
+      padding: 30px;
+      margin-top: 30px;
+      box-shadow: var(--shadow-sm);
+      font-family: 'Georgia', serif;
+      line-height: 1.8;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    #output:empty {
+      display: none;
+    }
+
+    #output strong {
+      color: var(--color-primary);
+      font-weight: 700;
+    }
+
+    /* 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(99, 102, 241, 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: 1200px) {
+      .questions-grid {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      }
+    }
+
+    @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;
+      }
+
+      .questions-grid {
+        grid-template-columns: 1fr;
+        gap: 15px;
+      }
+
+      .section {
+        padding: 20px 15px;
+      }
+
+      .generate-btn {
+        width: 100%;
+        margin: 30px 0;
+        padding: 16px 32px;
+        font-size: 1.1rem;
+      }
+
+      #output {
+        padding: 20px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .language-landing h1 {
+        font-size: 2rem;
+      }
+
+      .header h1 {
+        font-size: 1.8rem;
+      }
+
+      .section h2 {
+        font-size: 1.5rem;
+      }
+
+      .section h3 {
+        font-size: 1.2rem;
+      }
+
+      .question {
+        padding: 15px;
+      }
+    }
+
+    /* 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,
+    .question input[type="text"]: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">GovernanceFramework Pro</h1>
+    <p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with advanced AI governance framework creation for educational institutions.</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 Governance Framework Creation</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">GovernanceFramework Pro</h1>
+          <p class="subtitle" data-translate="app_subtitle">Advanced AI Policy & Compliance Management</p>
+          <p class="description" data-translate="app_description">Create comprehensive AI governance frameworks tailored to your educational institution's specific needs and regulatory requirements</p>
+        </div>
+
+        <!-- School Name Input Section -->
+        <div class="school-name">
+          <label for="schoolName" data-translate="school_name_label">🏫 Enter the Name of Your Educational Institution:</label>
+          <input type="text" id="schoolName" data-translate-placeholder="school_name_placeholder" required>
+        </div>
+
+        <!-- Error Message -->
+        <div class="error-message" id="errorMessage"></div>
+
+        <!-- Form Start -->
+        <form id="governanceForm" novalidate>
+          <!-- 1. Introduction -->
+          <div class="section">
+            <h2 data-translate="section_1_title">1. Introduction</h2>
+            <h3 data-translate="section_1_1_title">1.1 Purpose</h3>
+            <div class="questions-grid">
+              <div class="question">
+                <p data-translate="question_1"><strong>Q1.</strong> What is the primary goal for AI integration in the school?<br>
+                A. Enhancing learning experiences with AI-powered tools<br>
+                B. Automating administrative processes (e.g., grading, scheduling)<br>
+                C. Supporting students with disabilities through assistive AI<br>
+                D. Preparing students for future careers in AI-related fields</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_2"><strong>Q2.</strong> How will AI align with the school's broader educational mission?<br>
+                A. Supporting personalized and adaptive learning<br>
+                B. Promoting digital literacy and ethical AI usage<br>
+                C. Reducing teacher workload to improve efficiency<br>
+                D. Ensuring equity by providing AI access to all students</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_3"><strong>Q3.</strong> What does "success" look like for AI integration?<br>
+                A. Improved student engagement and participation<br>
+                B. Teachers spending less time on repetitive tasks<br>
+                C. AI adoption in all classrooms with positive feedback<br>
+                D. Ethical AI use with clear policies on data privacy</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_4"><strong>Q4.</strong> How will AI tools be chosen?<br>
+                A. Based on compliance with educational standards<br>
+                B. Preference for AI tools with proven effectiveness in schools<br>
+                C. AI tools must integrate with the school's existing LMS<br>
+                D. Priority given to free/open-source AI tools with no vendor lock-in</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_5"><strong>Q5.</strong> How will AI support teachers rather than replace them?<br>
+                A. AI as a support tool for teachers, not a decision-maker<br>
+                B. AI-generated content must be teacher-reviewed<br>
+                C. AI cannot fully automate grading or assessments<br>
+                D. AI must only be used in formative (not summative) assessments</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_6"><strong>Q6.</strong> How will AI enhance student engagement?<br>
+                A. AI-powered chatbots for 24/7 learning support<br>
+                B. Gamification with AI-driven adaptive learning tools<br>
+                C. AI-powered visualizations to simplify complex concepts<br>
+                D. AI-generated personalized feedback and study recommendations</p>
+                <input type="text" required>
+              </div>
+            </div>
+            
+            <h3 data-translate="section_1_2_title">1.2 Scope</h3>
+            <div class="questions-grid">
+              <div class="question">
+                <p data-translate="question_7"><strong>Q7.</strong> How will AI ensure equal opportunities for all students?<br>
+                A. AI tools must be accessible for students with disabilities<br>
+                B. AI should support non-native language speakers<br>
+                C. AI-driven learning analytics must not reinforce biases<br>
+                D. Students must have equal access to AI tools, regardless of background</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_8"><strong>Q8.</strong> What AI literacy skills should students acquire?<br>
+                A. Understanding AI bias and ethical implications<br>
+                B. Recognizing limitations of AI-generated information<br>
+                C. Basic proficiency in using AI-driven research tools<br>
+                D. Digital responsibility in interacting with AI systems</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_9"><strong>Q9.</strong> Which AI-powered tools will be implemented?<br>
+                A. AI-assisted grading and feedback systems<br>
+                B. AI-powered chatbots for student inquiries<br>
+                C. AI-driven personalized learning platforms<br>
+                D. AI-enhanced text-to-speech or translation tools</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_10"><strong>Q10.</strong> How will AI be integrated into lesson planning?<br>
+                A. AI-generated lesson suggestions for teachers<br>
+                B. AI-assisted research tools for curriculum design<br>
+                C. AI-powered student feedback loops for lesson adjustments<br>
+                D. AI-enhanced content curation for interactive learning</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_11"><strong>Q11.</strong> What are the limits on AI-driven assessments?<br>
+                A. AI can assist but not finalize student grades<br>
+                B. AI grading must be reviewed by teachers<br>
+                C. AI can suggest, but not determine, student placements<br>
+                D. AI-driven feedback should be supplemented with teacher insights</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_12"><strong>Q12.</strong> What are the key benefits of AI APIs in education?<br>
+                A. AI customization while maintaining control over student data<br>
+                B. Ability to integrate AI functionalities into existing LMS systems<br>
+                C. Improved accessibility through AI-enhanced content adaptations<br>
+                D. Increased efficiency in administrative tasks (e.g., attendance tracking)</p>
+                <input type="text" required>
+              </div>
+            </div>
+          </div>
+
+          <!-- 2. Governance Structure -->
+          <div class="section">
+            <h2 data-translate="section_2_title">2. Governance Structure</h2>
+            <h3 data-translate="section_2_1_title">2.1 AI Governance Board</h3>
+            <div class="questions-grid">
+              <div class="question">
+                <p data-translate="question_13"><strong>Q13.</strong> Who should be part of the AI Governance Board?<br>
+                A. School leadership (e.g., principal, administrators)<br>
+                B. IT specialists with cybersecurity expertise<br>
+                C. Teachers representing various subjects/departments<br>
+                D. Student representatives, ensuring student perspectives<br>
+                E. Parent or community stakeholders for broader insight</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_14"><strong>Q14.</strong> Which committees or groups need to be created for comprehensive AI oversight?<br>
+                A. AI Ethics & Compliance Committee<br>
+                B. Data Security & Privacy Team<br>
+                C. AI Pedagogy & Innovation Workgroup<br>
+                D. Professional Development & Training Board<br>
+                E. AI Incident Response Team (optional, for large-scale deployments)</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_15"><strong>Q15.</strong> How will teachers be involved in AI decision-making?<br>
+                A. AI implementation committees including teacher input<br>
+                B. Pilot programs before full AI adoption<br>
+                C. Regular teacher surveys on AI tool effectiveness<br>
+                D. AI adoption based on teacher classroom needs</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_16"><strong>Q16.</strong> What guidelines will ensure AI enhances critical thinking?<br>
+                A. AI outputs must be reviewed for accuracy<br>
+                B. Students must verify AI-generated content using credible sources<br>
+                C. AI recommendations should not replace independent thinking<br>
+                D. AI should support inquiry-based learning, not dictate answers</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_17"><strong>Q17.</strong> How will AI-generated content be monitored?<br>
+                A. AI must not produce unsupervised educational materials<br>
+                B. Teachers must approve AI-generated quizzes and assignments<br>
+                C. AI content must be fact-checked before use<br>
+                D. AI-generated resources should be clearly labeled for students</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_18"><strong>Q18.</strong> How will API-based AI tools be managed?<br>
+                A. Only pre-approved API providers will be used<br>
+                B. API integrations must comply with privacy and security regulations<br>
+                C. AI-generated recommendations must be transparent and explainable<br>
+                D. Regular security audits for API-connected AI services</p>
+                <input type="text" required>
+              </div>
+            </div>
+
+            <h3 data-translate="section_2_2_title">2.2 AI Ethics & Compliance Committee</h3>
+            <div class="questions-grid">
+              <div class="question">
+                <p data-translate="question_19"><strong>Q19.</strong> What ethical considerations will be enforced for AI use?<br>
+                A. AI tools must be free from bias and discrimination<br>
+                B. AI should not collect unnecessary student data<br>
+                C. AI decisions must always allow human override<br>
+                D. AI tools must provide explanations for their recommendations</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_20"><strong>Q20.</strong> How will bias in AI tools be minimized?<br>
+                A. Periodic fairness audits of AI algorithms<br>
+                B. AI training data must be diverse and inclusive<br>
+                C. AI-generated decisions must be manually reviewed for bias<br>
+                D. Schools must use only reputable AI vendors with ethical AI policies</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_21"><strong>Q21.</strong> How will students be protected from AI misinformation?<br>
+                A. AI-generated content must be reviewed by educators<br>
+                B. Critical thinking training for students in AI-related topics<br>
+                C. AI tools must be programmed to avoid generating unreliable sources<br>
+                D. AI-based assessments must include alternative verification methods</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_22"><strong>Q22.</strong> How will parental concerns about AI be addressed?<br>
+                A. AI policy transparency through parent meetings<br>
+                B. AI opt-out options for parents concerned about data use<br>
+                C. AI literacy sessions for parents to understand school AI policies<br>
+                D. Regular updates on AI effectiveness and safety measures</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_23"><strong>Q23.</strong> How will compliance with data privacy laws be ensured?<br>
+                A. AI tools must align with GDPR, FERPA, or equivalent laws<br>
+                B. AI tools must include data anonymization features<br>
+                C. Student data should not be stored indefinitely by AI vendors<br>
+                D. Parental consent must be obtained before AI data collection</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_24"><strong>Q24.</strong> How will AI-related ethical concerns be reported?<br>
+                A. A dedicated AI ethics committee will review complaints<br>
+                B. Students and teachers can report concerns anonymously<br>
+                C. AI-related concerns must be addressed within a set timeframe<br>
+                D. External AI ethics audits will be conducted annually</p>
+                <input type="text" required>
+              </div>
+            </div>
+          </div>
+
+          <!-- 3. Ethical Oversight -->
+          <div class="section">
+            <h2 data-translate="section_3_title">3. Ethical Oversight</h2>
+            <h3 data-translate="section_3_1_title">3.1 AI Ethics Principles</h3>
+            <div class="questions-grid">
+              <div class="question">
+                <p data-translate="question_25"><strong>Q25.</strong> What disciplinary measures will be taken for AI misuse?<br>
+                A. Suspension of AI tools violating school policies<br>
+                B. Investigation of AI-related ethical violations<br>
+                C. Teacher intervention for student misuse of AI tools<br>
+                D. Vendor accountability for unethical AI behavior</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_26"><strong>Q26.</strong> How will students be trained in responsible AI use?<br>
+                A. AI literacy modules will be included in digital citizenship courses<br>
+                B. Teachers will provide guidance on responsible AI interactions<br>
+                C. AI will be used as a case study in ethics discussions<br>
+                D. AI tools will have built-in warnings about over-reliance</p>
+                <input type="text" required>
+              </div>
+              <div class="question">
+                <p data-translate="question_27"><strong>Q27.</strong> What student data will AI tools process?<br>
+                A. Anonymized performance and behavioral data<br>
+                B. AI-driven insights on student learning patterns<br>
+                C. Limited personal data (e.g., name and grade level)<br>
+                D. Only metadata for improving AI functionality</p>
+                <input type="text" required>
+              </div>
+            </div>
+          </div>
+
+          <!-- Generate Button -->
+          <button type="submit" class="generate-btn" id="generateBtn">
+            <span class="spinner" id="spinner"></span>
+            <span id="buttonText" data-translate="generate_button">🚀 Generate AI Governance Framework</span>
+          </button>
+        </form>
+
+        <!-- Status Indicator & Output Area -->
+        <div id="statusIndicator"></div>
+        <div id="output"></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 = 'governance_framework_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('governance_framework_language') || 'en';
+      const savedApiKey = localStorage.getItem('governance_framework_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('governance_framework_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('governance_framework_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('governance_framework_api_key', this.value);
+      document.getElementById('apiKey').value = this.value;
+    });
+
+    document.getElementById('apiKey').addEventListener('input', function() {
+      currentApiKey = this.value;
+      localStorage.setItem('governance_framework_api_key', 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}%`;
+    });
+
+    // 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: 12000,
+        temperature: 0.2
+      };
+
+      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;
+    }
+
+    // Handle Form Submission - Updated to use current language dynamically
+    document.getElementById('governanceForm').addEventListener('submit', async (event) => {
+      event.preventDefault();
+
+      const statusIndicator = document.getElementById('statusIndicator');
+      const outputDiv = document.getElementById('output');
+      const button = document.getElementById('generateBtn');
+      const buttonText = document.getElementById('buttonText');
+      const spinner = document.getElementById('spinner');
+
+      try {
+        // Validate school name
+        const schoolName = document.getElementById('schoolName').value.trim();
+        if (!schoolName) {
+          throw new Error("Please enter the school name.");
+        }
+
+        // Update button state
+        button.disabled = true;
+        spinner.style.display = 'inline-block';
+        buttonText.textContent = 'Generating Framework...';
+        statusIndicator.textContent = "Generating AI Governance Framework...";
+        outputDiv.innerHTML = "";
+
+        // Collect all answer inputs
+        const answers = Array.from(document.querySelectorAll('#governanceForm input[type="text"]'))
+          .map((input, index) => ({ number: index + 1, text: input.value.trim() }));
+        
+        // Create responses block
+        const responsesBlock = answers.map(answer => `Q${answer.number}: ${answer.text}`).join('\n');
+
+        // Get current language name
+        const languageName = languageNames[currentLanguage] || 'English';
+
+        // Build the prompt with dynamic language
+        const prompt = `Create a comprehensive AI Governance Framework document for ${schoolName}, ensuring it aligns with the specific user responses outlined in ${responsesBlock}. This document should include an introduction to AI governance principles, a detailed analysis of stakeholder roles and responsibilities, a framework for ethical AI usage, compliance guidelines, and mechanisms for accountability and transparency. Conclude with recommendations for ongoing evaluation and adaptation of the framework to meet evolving needs and challenges.
+
+**Important: Generate the entire response in ${languageName}. All content, headings, explanations, and recommendations must be written in ${languageName}.**`;
+
+        // Call API
+        const result = await callAPI(prompt);
+        
+        // Convert Markdown **bold** to <strong> for HTML display
+        let content = result.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        
+        // Convert newlines to <br> for HTML display
+        content = content.replace(/\n/g, '<br>');
+
+        outputDiv.innerHTML = content;
+        statusIndicator.textContent = "Framework generated successfully!";
+        
+      } catch (error) {
+        console.error('Error:', error);
+        showError(error.message);
+        outputDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
+        statusIndicator.textContent = "Error generating framework";
+      } finally {
+        // Reset button state
+        button.disabled = false;
+        spinner.style.display = 'none';
+        buttonText.textContent = '🚀 Generate AI Governance Framework';
+      }
+    });
+
+    // Initialize app when DOM is loaded
+    document.addEventListener('DOMContentLoaded', function() {
+      initializeApp();
+    });
+  </script>
+</body>
+</html>
+

📘 Teacher & Student Guide Governan.txt

@@ -0,0 +1,59 @@
+📘 Teacher & Student Guide: GovernanceFramework Pro
+1. Purpose & Educational Value
+GovernanceFramework Pro enables educators, school leaders, and students to co-create robust AI governance frameworks—addressing policy, ethics, compliance, privacy, and stakeholder voices. It is ideal for building digital citizenship, responsible AI practice, and real-world policy literacy.
+
+2. How Teachers Can Use the Tool
+A. Staff & Policy Committees
+Use during school/district AI policy meetings or professional development.
+
+Guide teams through each section—mission, governance board, ethics, compliance, parental engagement.
+
+Export output as a draft for board approval, audit, or legal review.
+
+B. Classroom Integration
+Assign as a capstone in digital citizenship, STEM, or civics courses.
+
+Scaffold group projects—each group drafts or critiques a section (e.g., ethics, board composition).
+
+Analyze current school policies and propose AI updates using the tool as a model.
+
+C. Parent & Community Engagement
+Share drafts with parents for input, transparency, and community trust.
+
+Use multilingual output for accessible communication with diverse families.
+
+3. How Students Can Use the Tool
+A. Project-Based Learning
+Take on the role of policy makers—create governance frameworks for simulated or real school scenarios.
+
+Practice collaboration: Assign roles (principal, teacher, student, parent, IT, etc.).
+
+Research and discuss best practices, then input answers into the tool for immediate draft policy.
+
+B. Critical Analysis
+Analyze the sample questions and policy outputs—identify strengths, gaps, or ethical dilemmas.
+
+Debate different approaches to data privacy, ethics, or stakeholder inclusion.
+
+C. Multilingual/Global Projects
+Translate policy drafts to other languages—compare global governance strategies.
+
+Research local/regional AI laws and discuss how policies must adapt.
+
+4. Best Practices & Tips
+Be specific and realistic: Use local context and actual school values for best results.
+
+Encourage debate: Use outputs as starting points for classroom or staff discussion.
+
+Iterate and adapt: Update frameworks as technology, laws, or community needs change.
+
+Maintain privacy: All data and keys remain on device—safe for school settings.
+
+5. Troubleshooting & Support
+If output is generic, provide more detailed or specific answers to each question.
+
+If translation fails, check your API key or clear cache and reload.
+
+For technical or policy questions: info@shiftmind.io | www.shiftmind.io
+
+GovernanceFramework Pro empowers every school, educator, and learner to build safe, ethical, and future-ready AI governance—together.