Spaces:

Hma47
/

AI-Cognitive-Strategy-Generator

Running

App Files Files Community

AI-Cognitive-Strategy-Generator / index.html

Hma47

Upload 4 files

7635e01 verified 8 months ago

raw

history blame contribute delete

63 kB

	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Cognitive Strategy Generator - Enhanced Learning & Critical Thinking</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

	<style>
	/* CSS Reset and Base Styles */
	, ::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	/* CSS Custom Properties */
	:root {
	/* Color System - Cognitive/Learning theme */
	--color-primary: #2563eb;
	--color-primary-hover: #1d4ed8;
	--color-secondary: #7c3aed;
	--color-accent: #a855f7;
	--color-success: #059669;
	--color-warning: #d97706;
	--color-error: #dc2626;

	/* Neutral Colors - Light Mode */
	--color-background: #f8fafc;
	--color-surface: #ffffff;
	--color-surface-elevated: #ffffff;
	--color-border: #e2e8f0;
	--color-border-focus: #3b82f6;
	--color-text-primary: #1e293b;
	--color-text-secondary: #64748b;
	--color-text-muted: #94a3b8;

	/* Typography */
	--font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

	/* Optimized Spacing System */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 0.75rem;
	--spacing-lg: 1rem;
	--spacing-xl: 1.25rem;
	--spacing-2xl: 1.5rem;
	--spacing-3xl: 2rem;

	/* Border Radius */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	/* Transitions */
	--transition-fast: 150ms ease-in-out;
	--transition-normal: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;

	/* Layout */
	--container-max-width: 1400px;
	--content-max-width: 1200px;
	}

	/* RTL Support */
	[dir="rtl"] {
	text-align: right;
	}

	[dir="rtl"] .app-container {
	direction: rtl;
	}

	[dir="rtl"] .api-key-compact {
	left: auto;
	right: var(--spacing-lg);
	}

	[dir="rtl"] .language-switcher {
	right: auto;
	left: var(--spacing-lg);
	}

	/* Dark Mode Support */
	@media (prefers-color-scheme: dark) {
	:root {
	--color-background: #0f172a;
	--color-surface: #1e293b;
	--color-surface-elevated: #334155;
	--color-border: #334155;
	--color-text-primary: #f1f5f9;
	--color-text-secondary: #cbd5e1;
	--color-text-muted: #94a3b8;
	}
	}

	/* Base Styles */
	html {
	font-size: 16px;
	line-height: 1.5;
	scroll-behavior: smooth;
	}

	body {
	font-family: var(--font-family-primary);
	background-color: var(--color-background);
	color: var(--color-text-primary);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	transition: all 0.3s ease;
	padding: 15px;
	}

	/* Progress Bar */
	.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 4px;
	background: var(--color-primary);
	transition: width 0.3s ease;
	z-index: 1000;
	}

	/* Language Selection Landing */
	.language-landing {
	display: block;
	max-width: 600px;
	margin: 50px auto;
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	padding: 40px;
	text-align: center;
	}

	.language-landing h1 {
	font-size: 2.5rem;
	font-weight: 800;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 15px;
	}

	.language-landing p {
	font-size: 1.1rem;
	color: var(--color-text-secondary);
	margin-bottom: 30px;
	}

	.language-selector {
	margin-bottom: 25px;
	}

	.language-selector label {
	display: block;
	margin-bottom: 10px;
	font-weight: 600;
	color: var(--color-text-primary);
	font-size: 1.1rem;
	}

	.language-selector select {
	width: 100%;
	padding: 15px 20px;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	font-size: 1.1rem;
	font-family: inherit;
	background: var(--color-surface);
	transition: all 0.2s ease;
	margin-bottom: 20px;
	}

	.language-selector select:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}

	.api-key-landing {
	margin-bottom: 25px;
	}

	.api-key-landing label {
	display: block;
	margin-bottom: 10px;
	font-weight: 600;
	color: var(--color-text-primary);
	font-size: 1.1rem;
	}

	.api-key-landing input {
	width: 100%;
	padding: 15px 20px;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	font-size: 1.1rem;
	background: var(--color-surface);
	transition: all 0.2s ease;
	font-family: 'Courier New', monospace;
	}

	.api-key-landing input:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}

	.start-btn {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
	color: white;
	padding: 18px 40px;
	border: none;
	border-radius: var(--radius-lg);
	font-size: 1.2rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	}

	.start-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.4);
	}

	.start-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
	}

	/* Cache Management Section */
	.cache-management {
	background: rgba(37, 99, 235, 0.05);
	border: 1px solid rgba(37, 99, 235, 0.1);
	border-radius: var(--radius-lg);
	padding: 20px;
	margin-bottom: 25px;
	text-align: center;
	}

	.cache-management h3 {
	color: var(--color-primary);
	margin-bottom: 15px;
	font-size: 1.1rem;
	font-weight: 600;
	}

	.cache-status-display {
	background: rgba(5, 150, 105, 0.1);
	border: 1px solid rgba(5, 150, 105, 0.2);
	color: var(--color-success);
	padding: 12px 16px;
	border-radius: var(--radius-md);
	margin-bottom: 15px;
	font-size: 0.9rem;
	font-weight: 500;
	}

	.cache-status-display.no-cache {
	background: rgba(100, 116, 139, 0.1);
	border-color: rgba(100, 116, 139, 0.2);
	color: var(--color-text-secondary);
	}

	.clear-cache-btn {
	background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%);
	color: white;
	padding: 12px 24px;
	border: none;
	border-radius: var(--radius-md);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.clear-cache-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 12px -4px rgba(217, 119, 6, 0.4);
	}

	.clear-cache-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	}

	/* Cache Status Indicator */
	.cache-status {
	background: rgba(5, 150, 105, 0.1);
	border: 1px solid rgba(5, 150, 105, 0.2);
	color: var(--color-success);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	margin-bottom: 15px;
	font-size: 0.85rem;
	text-align: center;
	font-weight: 500;
	display: none;
	}

	.cache-status.cached {
	display: block;
	}

	.cache-status.translating {
	background: rgba(37, 99, 235, 0.1);
	border-color: rgba(37, 99, 235, 0.2);
	color: var(--color-primary);
	}

	/* Translation Loading Overlay */
	.translation-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(37, 99, 235, 0.9);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	color: white;
	text-align: center;
	}

	.translation-content {
	background: rgba(255, 255, 255, 0.1);
	padding: 40px;
	border-radius: var(--radius-xl);
	backdrop-filter: blur(10px);
	}

	.translation-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: white;
	animation: spin 1s ease-in-out infinite;
	margin: 0 auto 20px;
	}

	/* Main Application (Hidden Initially) */
	.main-app {
	display: none;
	}

	/* Layout Components */
	.app-container {
	min-height: 100vh;
	max-width: var(--container-max-width);
	margin: 0 auto;
	background: var(--color-surface);
	border-radius: 16px;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	position: relative;
	}

	/* Language Switcher in Main App */
	.language-switcher {
	position: absolute;
	top: var(--spacing-lg);
	right: var(--spacing-lg);
	display: flex;
	gap: 10px;
	align-items: center;
	z-index: 10;
	}

	.language-switch-btn {
	background: rgba(37, 99, 235, 0.05);
	border: 1px solid rgba(37, 99, 235, 0.1);
	border-radius: var(--radius-md);
	padding: 8px 12px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--color-primary);
	font-weight: 500;
	}

	.language-switch-btn:hover {
	background: rgba(37, 99, 235, 0.1);
	}

	.mini-clear-cache {
	background: rgba(217, 119, 6, 0.1);
	border: 1px solid rgba(217, 119, 6, 0.2);
	color: var(--color-warning);
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	font-size: 11px;
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 500;
	}

	.mini-clear-cache:hover {
	background: rgba(217, 119, 6, 0.2);
	}

	/* Compact API Key in Top-Left */
	.api-key-compact {
	position: absolute;
	top: var(--spacing-lg);
	left: var(--spacing-lg);
	z-index: 10;
	background: rgba(37, 99, 235, 0.05);
	border: 1px solid rgba(37, 99, 235, 0.1);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md) var(--spacing-lg);
	transition: all var(--transition-normal);
	max-width: 280px;
	}

	.api-key-compact:hover {
	background: rgba(37, 99, 235, 0.08);
	}

	.api-key-compact-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: var(--spacing-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}

	.api-key-compact-input {
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	background: var(--color-surface);
	color: var(--color-text-primary);
	transition: all var(--transition-fast);
	font-family: var(--font-family-mono);
	}

	.api-key-compact-input:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 2px rgb(59 130 246 / 0.1);
	}

	.api-key-compact-input::placeholder {
	color: var(--color-text-muted);
	font-size: 0.75rem;
	}

	/* Main Content */
	.app-main {
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 20px 30px 30px;
	padding-top: 80px;
	}

	.app-header {
	text-align: center;
	margin-bottom: var(--spacing-xl);
	}

	.app-title {
	font-size: 2.25rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: var(--spacing-md);
	line-height: 1.2;
	}

	.app-subtitle {
	font-size: 1rem;
	color: var(--color-text-secondary);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.4;
	}

	/* Input Section */
	.input-section {
	margin-bottom: var(--spacing-xl);
	}

	.input-label {
	display: block;
	font-weight: 600;
	color: var(--color-text-primary);
	margin-bottom: var(--spacing-md);
	font-size: 1rem;
	}

	.input-container {
	position: relative;
	}

	.prompt-textarea {
	width: 100%;
	min-height: 120px;
	padding: var(--spacing-lg);
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	font-size: 1rem;
	font-family: var(--font-family-primary);
	background: var(--color-surface);
	color: var(--color-text-primary);
	resize: vertical;
	transition: all var(--transition-fast);
	line-height: 1.5;
	}

	.prompt-textarea:focus {
	outline: none;
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
	}

	.prompt-textarea::placeholder {
	color: var(--color-text-muted);
	}

	.character-counter {
	position: absolute;
	bottom: var(--spacing-sm);
	right: var(--spacing-md);
	font-size: 0.75rem;
	color: var(--color-text-muted);
	background: var(--color-surface);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	}

	/* Action Section */
	.action-section {
	text-align: center;
	margin-bottom: var(--spacing-xl);
	}

	.generate-button {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) var(--spacing-xl);
	font-size: 1rem;
	font-weight: 600;
	color: white;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-normal);
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
	}

	.generate-button:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
	}

	.generate-button:active {
	transform: translateY(0);
	}

	.generate-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
	}

	.button-text {
	transition: opacity var(--transition-fast);
	}

	.loading-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top: 2px solid white;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	/* Output Section */
	.output-section {
	margin-bottom: var(--spacing-lg);
	}

	.output-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-lg);
	}

	.output-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-text-primary);
	}

	.copy-button {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-primary);
	background: transparent;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-fast);
	}

	.copy-button:hover {
	background: var(--color-primary);
	color: white;
	}

	.output-container {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-normal);
	}

	.output-container:hover {
	box-shadow: var(--shadow-md);
	}

	.output-content {
	font-family: var(--font-family-primary);
	line-height: 1.6;
	color: var(--color-text-primary);
	white-space: pre-wrap;
	word-wrap: break-word;
	}

	.output-content h1,
	.output-content h2,
	.output-content h3 {
	color: var(--color-text-primary);
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	font-weight: 600;
	}

	.output-content h1 {
	font-size: 1.375rem;
	border-bottom: 2px solid var(--color-border);
	padding-bottom: var(--spacing-sm);
	}

	.output-content h2 {
	font-size: 1.125rem;
	color: var(--color-primary);
	}

	.output-content h3 {
	font-size: 1rem;
	}

	.output-content p {
	margin-bottom: var(--spacing-md);
	}

	.output-content ul,
	.output-content ol {
	margin-left: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
	}

	.output-content li {
	margin-bottom: var(--spacing-xs);
	}

	.empty-state {
	text-align: center;
	padding: var(--spacing-2xl);
	color: var(--color-text-muted);
	}

	.empty-state-icon {
	font-size: 2.5rem;
	margin-bottom: var(--spacing-md);
	opacity: 0.5;
	}

	.empty-state-text {
	font-size: 1rem;
	}

	/* Error Handling */
	.error-message {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	}

	.error-icon {
	font-size: 1.125rem;
	}

	.error-dismiss {
	margin-left: auto;
	background: none;
	border: none;
	color: #dc2626;
	cursor: pointer;
	font-size: 1.125rem;
	padding: var(--spacing-xs);
	}

	/* Footer */
	.app-footer {
	text-align: center;
	padding: var(--spacing-lg) 0;
	color: var(--color-text-muted);
	font-size: 0.875rem;
	border-top: 1px solid var(--color-border);
	margin-top: var(--spacing-xl);
	}

	/* Hidden sections */
	.hidden {
	display: none !important;
	}

	/* Responsive Design */
	@media (max-width: 768px) {
	body {
	padding: 10px;
	}

	.language-landing {
	margin: 20px auto;
	padding: 30px 20px;
	}

	.api-key-compact {
	position: static;
	margin-bottom: var(--spacing-xl);
	max-width: none;
	}

	.language-switcher {
	position: relative;
	top: auto;
	right: auto;
	margin-bottom: var(--spacing-xl);
	justify-content: center;
	}

	.app-main {
	padding: 15px 20px 20px;
	padding-top: 20px;
	}

	.app-title {
	font-size: 1.875rem;
	}

	.app-subtitle {
	font-size: 0.875rem;
	}

	.prompt-textarea {
	min-height: 100px;
	padding: var(--spacing-md);
	}

	.generate-button {
	width: 100%;
	justify-content: center;
	}

	.output-header {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-md);
	}

	.empty-state {
	padding: var(--spacing-xl);
	}

	.empty-state-icon {
	font-size: 2rem;
	}
	}

	@media (max-width: 480px) {
	.language-landing h1 {
	font-size: 2rem;
	}

	.app-title {
	font-size: 1.5rem;
	}
	}

	/* Accessibility */
	.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	}

	/* Focus styles for keyboard navigation */
	.generate-button:focus,
	.copy-button:focus,
	.api-key-compact-input:focus,
	.prompt-textarea:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	}

	/* Reduced motion support */
	@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
	}
	}
	</style>
	</head>

	<body>
	<!-- Progress Bar -->
	<div class="progress-bar" id="progressBar"></div>

	<!-- Translation Loading Overlay -->
	<div class="translation-overlay" id="translationOverlay">
	<div class="translation-content">
	<div class="translation-spinner"></div>
	<h2 id="translationTitle">Translating Interface...</h2>
	<p id="translationMessage">Please wait while we translate the interface to your selected language.</p>
	</div>
	</div>

	<!-- Language Selection Landing Page -->
	<div class="language-landing" id="languageLanding">
	<h1 data-translate="app_title">AI Cognitive Strategy Generator</h1>
	<p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with enhanced learning and critical thinking strategy generation.</p>

	<!-- Cache Status Indicator -->
	<div class="cache-status" id="cacheStatus">
	💾 Translations cached - instant loading!
	</div>

	<!-- Cache Management Section -->
	<div class="cache-management" id="cacheManagement">
	<h3 data-translate="cache_management_title">🗂️ Translation Cache Management</h3>
	<div class="cache-status-display" id="cacheStatusDisplay">
	<span data-translate="cache_status_checking">Checking cache status...</span>
	</div>
	<button class="clear-cache-btn" id="clearCacheBtn" data-translate="clear_cache_button">
	🗑️ Clear All Cached Translations
	</button>
	</div>

	<div class="language-selector">
	<label for="languageSelect" data-translate="select_language">🌐 Select Language</label>
	<select id="languageSelect">
	<option value="en">🇺🇸 English</option>
	<option value="es">🇪🇸 Español (Spanish)</option>
	<option value="fr">🇫🇷 Français (French)</option>
	<option value="de">🇩🇪 Deutsch (German)</option>
	<option value="zh">🇨🇳 中文 (Chinese)</option>
	<option value="ja">🇯🇵 日本語 (Japanese)</option>
	<option value="ko">🇰🇷 한국어 (Korean)</option>
	<option value="pt">🇵🇹 Português (Portuguese)</option>
	<option value="it">🇮🇹 Italiano (Italian)</option>
	<option value="ar">🇸🇦 العربية (Arabic)</option>
	<option value="ru">🇷🇺 Русский (Russian)</option>
	<option value="hi">🇮🇳 हिन्दी (Hindi)</option>
	<option value="bn">🇧🇩 বাংলা (Bengali)</option>
	<option value="ur">🇵🇰 اردو (Urdu)</option>
	<option value="tr">🇹🇷 Türkçe (Turkish)</option>
	<option value="pl">🇵🇱 Polski (Polish)</option>
	<option value="nl">🇳🇱 Nederlands (Dutch)</option>
	<option value="sv">🇸🇪 Svenska (Swedish)</option>
	<option value="da">🇩🇰 Dansk (Danish)</option>
	<option value="no">🇳🇴 Norsk (Norwegian)</option>
	<option value="fi">🇫🇮 Suomi (Finnish)</option>
	<option value="is">🇮🇸 Íslenska (Icelandic)</option>
	<option value="cs">🇨🇿 Čeština (Czech)</option>
	<option value="sk">🇸🇰 Slovenčina (Slovak)</option>
	<option value="hu">🇭🇺 Magyar (Hungarian)</option>
	<option value="ro">🇷🇴 Română (Romanian)</option>
	<option value="bg">🇧🇬 Български (Bulgarian)</option>
	<option value="hr">🇭🇷 Hrvatski (Croatian)</option>
	<option value="sr">🇷🇸 Српски (Serbian)</option>
	<option value="sl">🇸🇮 Slovenščina (Slovenian)</option>
	<option value="mk">🇲🇰 Македонски (Macedonian)</option>
	<option value="sq">🇦🇱 Shqip (Albanian)</option>
	<option value="lv">🇱🇻 Latviešu (Latvian)</option>
	<option value="lt">🇱🇹 Lietuvių (Lithuanian)</option>
	<option value="et">🇪🇪 Eesti (Estonian)</option>
	<option value="mt">🇲🇹 Malti (Maltese)</option>
	<option value="ga">🇮🇪 Gaeilge (Irish)</option>
	<option value="cy">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cymraeg (Welsh)</option>
	<option value="eu">🏴󠁥󠁳󠁰󠁶󠁿 Euskera (Basque)</option>
	<option value="ca">🏴󠁥󠁳󠁣󠁴󠁿 Català (Catalan)</option>
	<option value="gl">🏴󠁥󠁳󠁧󠁡󠁿 Galego (Galician)</option>
	<option value="el">🇬🇷 Ελληνικά (Greek)</option>
	<option value="he">🇮🇱 עברית (Hebrew)</option>
	<option value="fa">🇮🇷 فارسی (Persian)</option>
	<option value="ps">🇦🇫 پښتو (Pashto)</option>
	<option value="ku">🏴󠁩󠁱󠁫󠁲󠁿 کوردی (Kurdish)</option>
	<option value="az">🇦🇿 Azərbaycan (Azerbaijani)</option>
	<option value="kk">🇰🇿 Қазақша (Kazakh)</option>
	<option value="ky">🇰🇬 Кыргызча (Kyrgyz)</option>
	<option value="uz">🇺🇿 O'zbek (Uzbek)</option>
	<option value="tk">🇹🇲 Türkmen (Turkmen)</option>
	<option value="tg">🇹🇯 Тоҷикӣ (Tajik)</option>
	<option value="mn">🇲🇳 Монгол (Mongolian)</option>
	<option value="ka">🇬🇪 ქართული (Georgian)</option>
	<option value="hy">🇦🇲 Հայերեն (Armenian)</option>
	<option value="th">🇹🇭 ไทย (Thai)</option>
	<option value="vi">🇻🇳 Tiếng Việt (Vietnamese)</option>
	<option value="lo">🇱🇦 ລາວ (Lao)</option>
	<option value="km">🇰🇭 ខ្មែរ (Khmer)</option>
	<option value="my">🇲🇲 မြန်မာ (Myanmar)</option>
	<option value="si">🇱🇰 සිංහල (Sinhala)</option>
	<option value="ta">🇱🇰 தமிழ் (Tamil)</option>
	<option value="te">🇮🇳 తెలుగు (Telugu)</option>
	<option value="kn">🇮🇳 ಕನ್ನಡ (Kannada)</option>
	<option value="ml">🇮🇳 മലയാളം (Malayalam)</option>
	<option value="gu">🇮🇳 ગુજરાતી (Gujarati)</option>
	<option value="pa">🇮🇳 ਪੰਜਾਬੀ (Punjabi)</option>
	<option value="or">🇮🇳 ଓଡ଼ିଆ (Odia)</option>
	<option value="as">🇮🇳 অসমীয়া (Assamese)</option>
	<option value="ne">🇳🇵 नेपाली (Nepali)</option>
	<option value="dz">🇧🇹 རྫོང་ཁ (Dzongkha)</option>
	<option value="bo">🏔️ བོད་ཡིག (Tibetan)</option>
	<option value="id">🇮🇩 Bahasa Indonesia</option>
	<option value="ms">🇲🇾 Bahasa Melayu (Malay)</option>
	<option value="tl">🇵🇭 Filipino (Tagalog)</option>
	<option value="ceb">🇵🇭 Cebuano</option>
	<option value="haw">🏝️ ʻŌlelo Hawaiʻi (Hawaiian)</option>
	<option value="mi">🇳🇿 Te Reo Māori (Maori)</option>
	<option value="sm">🇼🇸 Gagana Samoa (Samoan)</option>
	<option value="to">🇹🇴 Lea Fakatonga (Tongan)</option>
	<option value="fj">🇫🇯 Na Vosa Vakaviti (Fijian)</option>
	<option value="mg">🇲🇬 Malagasy</option>
	<option value="sw">🇰🇪 Kiswahili (Swahili)</option>
	<option value="zu">🇿🇦 isiZulu (Zulu)</option>
	<option value="xh">🇿🇦 isiXhosa (Xhosa)</option>
	<option value="af">🇿🇦 Afrikaans</option>
	<option value="st">🇱🇸 Sesotho (Southern Sotho)</option>
	<option value="tn">🇧🇼 Setswana (Tswana)</option>
	<option value="ss">🇸🇿 siSwati (Swati)</option>
	<option value="ve">🇿🇦 Tshivenḓa (Venda)</option>
	<option value="ts">🇿🇦 Xitsonga (Tsonga)</option>
	<option value="nr">🇿🇦 isiNdebele (Southern Ndebele)</option>
	<option value="am">🇪🇹 አማርኛ (Amharic)</option>
	<option value="ti">🇪🇷 ትግርኛ (Tigrinya)</option>
	<option value="om">🇪🇹 Afaan Oromoo (Oromo)</option>
	<option value="so">🇸🇴 Soomaali (Somali)</option>
	<option value="ha">🇳🇬 Hausa</option>
	<option value="yo">🇳🇬 Yorùbá (Yoruba)</option>
	<option value="ig">🇳🇬 Igbo</option>
	<option value="ff">🇸🇳 Fulfulde (Fulani)</option>
	<option value="wo">🇸🇳 Wolof</option>
	<option value="bm">🇲🇱 Bamanankan (Bambara)</option>
	<option value="rn">🇧🇮 Kirundi (Rundi)</option>
	<option value="rw">🇷🇼 Kinyarwanda (Rwanda)</option>
	<option value="lg">🇺🇬 Luganda</option>
	<option value="ny">🇲🇼 Chichewa (Nyanja)</option>
	<option value="sn">🇿🇼 chiShona (Shona)</option>
	<option value="nd">🇿🇼 isiNdebele (Northern Ndebele)</option>
	</select>
	</div>

	<div class="api-key-landing">
	<label for="apiKeyLanding" data-translate="api_key_label">🔑 OpenAI API Key</label>
	<input type="password" id="apiKeyLanding" placeholder="Enter your OpenAI API key" data-translate-placeholder="api_key_placeholder">
	</div>

	<button class="start-btn" id="startBtn" data-translate="start_button">🚀 Start AI Cognitive Strategy Generator</button>
	</div>

	<!-- Main Application -->
	<div class="main-app" id="mainApp">
	<div class="app-container">
	<!-- Language Switcher -->
	<div class="language-switcher" id="languageSwitcher">
	<div class="language-switch-btn" onclick="showLanguageLanding()">
	<span data-translate="change_language">🌐 Change Language</span>
	</div>
	<div class="mini-clear-cache" onclick="clearAllTranslationCache()" title="Clear translation cache">
	<span data-translate="clear_cache_mini">🗑️ Clear Cache</span>
	</div>
	</div>

	<!-- Compact API Key in Top-Left -->
	<div class="api-key-compact">
	<label for="apiKey" class="api-key-compact-label" data-translate="api_key_short">API Key</label>
	<input
	type="password"
	id="apiKey"
	class="api-key-compact-input"
	data-translate-placeholder="api_key_placeholder"
	autocomplete="off"
	>
	</div>

	<main class="app-main">
	<header class="app-header">
	<h1 class="app-title" data-translate="app_title">AI Cognitive Strategy Generator</h1>
	<p class="app-subtitle" data-translate="app_subtitle">
	Generate tailored strategies to enhance cognitive abilities and boost confidence,
	plus learn how to mitigate potential negative impacts of generative AI on cognitive skills.
	</p>
	</header>

	<section class="input-section">
	<label for="userPrompt" class="input-label" data-translate="input_label">Enter Your Prompt</label>
	<div class="input-container">
	<textarea
	id="userPrompt"
	class="prompt-textarea"
	data-translate-placeholder="input_placeholder"
	required
	maxlength="2000"
	></textarea>
	<div class="character-counter" id="characterCounter">0 / 2000</div>
	</div>
	</section>

	<section class="action-section">
	<button id="generateBtn" class="generate-button">
	<span class="button-text" data-translate="generate_button">Generate Strategies</span>
	<div class="loading-spinner" id="loadingSpinner"></div>
	</button>
	</section>

	<section class="output-section">
	<div class="output-header">
	<h2 class="output-title" data-translate="output_title">Enhanced Strategy Output</h2>
	<button id="copyBtn" class="copy-button" style="display: none;">
	<span>📋</span>
	<span data-translate="copy_button">Copy to Clipboard</span>
	</button>
	</div>

	<div class="output-container">
	<div id="outputArea" class="output-content">
	<div class="empty-state">
	<div class="empty-state-icon">🧠</div>
	<div class="empty-state-text" data-translate="empty_state">Your AI-generated cognitive strategies will appear here</div>
	</div>
	</div>
	</div>
	</section>

	<footer class="app-footer">
	<p>Created By <strong>Shift Mind AI Labs</strong></p>
	</footer>
	</main>
	</div>
	</div>

	<script>
	// RTL languages list
	const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'ku'];

	// Current language and API key
	let currentLanguage = 'en';
	let currentApiKey = '';

	// Language names mapping
	const languageNames = {
	en: 'English', es: 'Spanish', fr: 'French', de: 'German', zh: 'Chinese',
	ja: 'Japanese', ko: 'Korean', pt: 'Portuguese', it: 'Italian', ar: 'Arabic',
	ru: 'Russian', hi: 'Hindi', bn: 'Bengali', ur: 'Urdu', tr: 'Turkish',
	pl: 'Polish', nl: 'Dutch', sv: 'Swedish', da: 'Danish', no: 'Norwegian',
	fi: 'Finnish', is: 'Icelandic', cs: 'Czech', sk: 'Slovak', hu: 'Hungarian',
	ro: 'Romanian', bg: 'Bulgarian', hr: 'Croatian', sr: 'Serbian', sl: 'Slovenian',
	mk: 'Macedonian', sq: 'Albanian', lv: 'Latvian', lt: 'Lithuanian', et: 'Estonian',
	mt: 'Maltese', ga: 'Irish', cy: 'Welsh', eu: 'Basque', ca: 'Catalan',
	gl: 'Galician', el: 'Greek', he: 'Hebrew', fa: 'Persian', ps: 'Pashto',
	ku: 'Kurdish', az: 'Azerbaijani', kk: 'Kazakh', ky: 'Kyrgyz', uz: 'Uzbek',
	tk: 'Turkmen', tg: 'Tajik', mn: 'Mongolian', ka: 'Georgian', hy: 'Armenian',
	th: 'Thai', vi: 'Vietnamese', lo: 'Lao', km: 'Khmer', my: 'Myanmar',
	si: 'Sinhala', ta: 'Tamil', te: 'Telugu', kn: 'Kannada', ml: 'Malayalam',
	gu: 'Gujarati', pa: 'Punjabi', or: 'Odia', as: 'Assamese', ne: 'Nepali',
	dz: 'Dzongkha', bo: 'Tibetan', id: 'Indonesian', ms: 'Malay', tl: 'Filipino',
	ceb: 'Cebuano', haw: 'Hawaiian', mi: 'Maori', sm: 'Samoan', to: 'Tongan',
	fj: 'Fijian', mg: 'Malagasy', sw: 'Swahili', zu: 'Zulu', xh: 'Xhosa',
	af: 'Afrikaans', st: 'Southern Sotho', tn: 'Tswana', ss: 'Swati', ve: 'Venda',
	ts: 'Tsonga', nr: 'Southern Ndebele', am: 'Amharic', ti: 'Tigrinya', om: 'Oromo',
	so: 'Somali', ha: 'Hausa', yo: 'Yoruba', ig: 'Igbo', ff: 'Fulani',
	wo: 'Wolof', bm: 'Bambara', rn: 'Rundi', rw: 'Rwanda', lg: 'Luganda',
	ny: 'Chichewa', sn: 'Shona', nd: 'Northern Ndebele'
	};

	// Translation cache management
	const CACHE_PREFIX = 'aicognitive_translations_';
	const CACHE_VERSION = '1.0';

	// App Configuration
	const AppConfig = {
	API_BASE_URL: 'https://api.openai.com/v1/chat/completions',
	MODEL: 'gpt-4o-mini',
	MAX_TOKENS: 3000,
	TEMPERATURE: 0.7,
	MAX_PROMPT_LENGTH: 2000
	};

	// App State Management
	const AppState = {
	apiKey: '',
	isLoading: false,
	currentPrompt: '',
	lastResult: '',

	setApiKey(key) {
	this.apiKey = key;
	this.saveToLocalStorage();
	},

	setLoading(loading) {
	this.isLoading = loading;
	UIController.updateLoadingState(loading);
	},

	saveToLocalStorage() {
	try {
	localStorage.setItem('aiCognitiveStrategy_apiKey', this.apiKey);
	} catch (e) {
	console.warn('Could not save to localStorage:', e);
	}
	},

	loadFromLocalStorage() {
	try {
	this.apiKey = localStorage.getItem('aiCognitiveStrategy_apiKey') \|\| '';
	} catch (e) {
	console.warn('Could not load from localStorage:', e);
	}
	}
	};

	// Check if translations are cached for a language
	function isLanguageCached(language) {
	const cacheKey = CACHE_PREFIX + language;
	const cached = localStorage.getItem(cacheKey);
	return cached !== null;
	}

	// Save translations to cache
	function saveTranslationsToCache(language, translations) {
	const cacheKey = CACHE_PREFIX + language;
	const cacheData = {
	version: CACHE_VERSION,
	timestamp: Date.now(),
	translations: translations
	};
	localStorage.setItem(cacheKey, JSON.stringify(cacheData));
	console.log(`Translations cached for ${language}`);
	}

	// Load translations from cache
	function loadTranslationsFromCache(language) {
	const cacheKey = CACHE_PREFIX + language;
	const cached = localStorage.getItem(cacheKey);

	if (cached) {
	try {
	const cacheData = JSON.parse(cached);
	if (cacheData.version === CACHE_VERSION) {
	console.log(`Translations loaded from cache for ${language}`);
	return cacheData.translations;
	}
	} catch (error) {
	console.error('Error parsing cached translations:', error);
	}
	}
	return null;
	}

	// Get all cached languages
	function getCachedLanguages() {
	const cachedLanguages = [];
	for (let i = 0; i < localStorage.length; i++) {
	const key = localStorage.key(i);
	if (key && key.startsWith(CACHE_PREFIX)) {
	const language = key.replace(CACHE_PREFIX, '');
	cachedLanguages.push(language);
	}
	}
	return cachedLanguages;
	}

	// Clear all translation cache
	function clearAllTranslationCache() {
	const cachedLanguages = getCachedLanguages();

	if (cachedLanguages.length === 0) {
	alert('No cached translations to clear.');
	return;
	}

	const languageList = cachedLanguages.map(lang => languageNames[lang] \|\| lang).join(', ');
	const confirmMessage = `Are you sure you want to clear all cached translations?\n\nCached languages: ${languageList}\n\nThis will require re-downloading translations when switching languages.`;

	if (confirm(confirmMessage)) {
	// Clear all translation caches
	cachedLanguages.forEach(language => {
	const cacheKey = CACHE_PREFIX + language;
	localStorage.removeItem(cacheKey);
	});

	// Update cache status
	updateCacheStatus(currentLanguage);
	updateCacheStatusDisplay();

	alert(`Cache cleared successfully!\n\n${cachedLanguages.length} language(s) removed from cache.`);

	// Ask if user wants to reload current language translations
	if (currentLanguage !== 'en' && cachedLanguages.includes(currentLanguage)) {
	if (confirm('Would you like to reload the current language translations?')) {
	applyLanguage(currentLanguage);
	}
	}
	}
	}

	// Update cache status indicator
	function updateCacheStatus(language) {
	const cacheStatus = document.getElementById('cacheStatus');
	const isCached = isLanguageCached(language);

	if (language === 'en') {
	cacheStatus.classList.remove('cached', 'translating');
	return;
	}

	if (isCached) {
	cacheStatus.textContent = '💾 Translations cached - instant loading!';
	cacheStatus.classList.add('cached');
	cacheStatus.classList.remove('translating');
	} else {
	cacheStatus.textContent = '🔄 First time translation - will be cached for future use';
	cacheStatus.classList.add('translating');
	cacheStatus.classList.remove('cached');
	}
	}

	// Update cache status display in management section
	function updateCacheStatusDisplay() {
	const cacheStatusDisplay = document.getElementById('cacheStatusDisplay');
	const clearCacheBtn = document.getElementById('clearCacheBtn');
	const cachedLanguages = getCachedLanguages();

	if (cachedLanguages.length === 0) {
	cacheStatusDisplay.textContent = '📭 No cached translations';
	cacheStatusDisplay.className = 'cache-status-display no-cache';
	clearCacheBtn.disabled = true;
	} else {
	const languageList = cachedLanguages.map(lang => languageNames[lang] \|\| lang).join(', ');
	cacheStatusDisplay.textContent = `💾 ${cachedLanguages.length} language(s) cached: ${languageList}`;
	cacheStatusDisplay.className = 'cache-status-display';
	clearCacheBtn.disabled = false;
	}
	}

	// Initialize the application
	function initializeApp() {
	// Load saved language and API key
	const savedLanguage = localStorage.getItem('aicognitive_language') \|\| 'en';
	const savedApiKey = localStorage.getItem('aiCognitiveStrategy_apiKey') \|\| '';

	currentLanguage = savedLanguage;
	currentApiKey = savedApiKey;

	// Set language selector
	document.getElementById('languageSelect').value = currentLanguage;
	document.getElementById('apiKeyLanding').value = currentApiKey;

	// Apply direction for current language
	applyDirection(currentLanguage);

	// Update cache status
	updateCacheStatus(currentLanguage);
	updateCacheStatusDisplay();

	// Show appropriate screen
	if (currentApiKey && currentLanguage) {
	showMainApp();
	} else {
	showLanguageLanding();
	}
	}

	// Apply language direction
	function applyDirection(language) {
	currentLanguage = language;

	// Set document language and direction
	document.documentElement.lang = language;
	document.documentElement.dir = rtlLanguages.includes(language) ? 'rtl' : 'ltr';

	// Save language preference
	localStorage.setItem('aicognitive_language', language);

	// Update cache status
	updateCacheStatus(language);
	}

	// API call function for translation
	async function translateText(text, targetLanguage) {
	if (!currentApiKey) {
	throw new Error('API key is required for translation');
	}

	const languageName = languageNames[targetLanguage] \|\| 'English';

	const prompt = `Translate the following text to ${languageName}. Provide ONLY the exact translation without any explanations, additional information, or formatting:

	"${text}"`;

	const payload = {
	model: "gpt-4o-mini",
	messages: [{ role: "user", content: prompt }],
	max_tokens: 500,
	temperature: 0.1
	};

	const response = await fetch("https://api.openai.com/v1/chat/completions", {
	method: "POST",
	headers: {
	"Content-Type": "application/json",
	"Authorization": `Bearer ${currentApiKey}`
	},
	body: JSON.stringify(payload)
	});

	if (!response.ok) {
	const errorData = await response.json();
	throw new Error(errorData.error?.message \|\| "Translation API request failed");
	}

	const data = await response.json();
	return data.choices[0].message.content.trim();
	}

	// Apply cached translations to UI
	function applyCachedTranslations(translations) {
	// Apply text translations
	Object.keys(translations.texts).forEach(originalText => {
	const translation = translations.texts[originalText];
	const elements = document.querySelectorAll(`[data-translate]`);

	elements.forEach(element => {
	const originalElementText = element.getAttribute('data-original-text') \|\| element.textContent;
	if (originalElementText === originalText) {
	element.textContent = translation;
	}
	});
	});

	// Apply placeholder translations
	Object.keys(translations.placeholders).forEach(originalPlaceholder => {
	const translation = translations.placeholders[originalPlaceholder];
	const elements = document.querySelectorAll(`[data-translate-placeholder]`);

	elements.forEach(element => {
	const originalElementPlaceholder = element.getAttribute('data-original-placeholder') \|\| element.placeholder;
	if (originalElementPlaceholder === originalPlaceholder) {
	element.placeholder = translation;
	}
	});
	});
	}

	// Translate all UI elements
	async function translateInterface(targetLanguage) {
	if (targetLanguage === 'en') {
	// No translation needed for English
	return;
	}

	// Check if translations are cached
	const cachedTranslations = loadTranslationsFromCache(targetLanguage);
	if (cachedTranslations) {
	// Use cached translations
	console.log('Using cached translations for', targetLanguage);
	applyCachedTranslations(cachedTranslations);
	return;
	}

	// Need to translate via API
	showTranslationOverlay();

	try {
	// Get all elements with data-translate attribute
	const elements = document.querySelectorAll('[data-translate]');
	const placeholderElements = document.querySelectorAll('[data-translate-placeholder]');

	// Collect all texts to translate
	const textsToTranslate = [];
	const placeholdersToTranslate = [];
	const elementMap = new Map();

	elements.forEach(element => {
	const originalText = element.getAttribute('data-original-text') \|\| element.textContent;
	if (!element.getAttribute('data-original-text')) {
	element.setAttribute('data-original-text', originalText);
	}
	textsToTranslate.push(originalText);
	elementMap.set(originalText, element);
	});

	placeholderElements.forEach(element => {
	const originalPlaceholder = element.getAttribute('data-original-placeholder') \|\| element.placeholder;
	if (!element.getAttribute('data-original-placeholder')) {
	element.setAttribute('data-original-placeholder', originalPlaceholder);
	}
	placeholdersToTranslate.push(originalPlaceholder);
	elementMap.set(originalPlaceholder, element);
	});

	// Prepare cache structure
	const translationsCache = {
	texts: {},
	placeholders: {}
	};

	// Translate texts in batches
	const batchSize = 10;
	const allTexts = [...textsToTranslate, ...placeholdersToTranslate];

	for (let i = 0; i < allTexts.length; i += batchSize) {
	const batch = allTexts.slice(i, i + batchSize);

	// Update progress
	updateTranslationProgress(i, allTexts.length);

	// Translate batch
	const translations = await Promise.all(
	batch.map(text => translateText(text, targetLanguage))
	);

	// Apply translations and cache them
	batch.forEach((originalText, index) => {
	const element = elementMap.get(originalText);
	const translation = translations[index];

	if (element.hasAttribute('data-translate')) {
	element.textContent = translation;
	translationsCache.texts[originalText] = translation;
	} else if (element.hasAttribute('data-translate-placeholder')) {
	element.placeholder = translation;
	translationsCache.placeholders[originalText] = translation;
	}
	});
	}

	// Save translations to cache
	saveTranslationsToCache(targetLanguage, translationsCache);

	// Update cache status
	updateCacheStatus(targetLanguage);
	updateCacheStatusDisplay();

	} catch (error) {
	console.error('Translation error:', error);
	UIController.showError('Translation failed: ' + error.message);
	} finally {
	hideTranslationOverlay();
	}
	}

	// Show translation overlay
	function showTranslationOverlay() {
	document.getElementById('translationOverlay').style.display = 'flex';
	}

	// Hide translation overlay
	function hideTranslationOverlay() {
	document.getElementById('translationOverlay').style.display = 'none';
	}

	// Update translation progress
	function updateTranslationProgress(current, total) {
	const percentage = Math.round((current / total) * 100);
	document.getElementById('translationMessage').textContent =
	`Translating interface... ${percentage}% complete (will be cached for future use)`;
	}

	// Apply language with API translation or cache
	async function applyLanguage(language) {
	applyDirection(language);

	if (language !== 'en') {
	await translateInterface(language);
	}
	}

	// Show language landing page
	function showLanguageLanding() {
	document.getElementById('languageLanding').style.display = 'block';
	document.getElementById('mainApp').style.display = 'none';
	}

	// Show main application
	function showMainApp() {
	document.getElementById('languageLanding').style.display = 'none';
	document.getElementById('mainApp').style.display = 'block';

	// Set API key in main app
	document.getElementById('apiKey').value = currentApiKey;
	}

	// Start button click handler
	document.getElementById('startBtn').addEventListener('click', async function() {
	const selectedLanguage = document.getElementById('languageSelect').value;
	const apiKey = document.getElementById('apiKeyLanding').value.trim();

	if (!apiKey) {
	alert('Please enter your OpenAI API key');
	return;
	}

	currentLanguage = selectedLanguage;
	currentApiKey = apiKey;

	// Save API key
	localStorage.setItem('aiCognitiveStrategy_apiKey', apiKey);

	// Apply language with translation (cached or API)
	await applyLanguage(selectedLanguage);

	// Show main app
	showMainApp();
	});

	// Language selector change handler
	document.getElementById('languageSelect').addEventListener('change', async function() {
	const selectedLanguage = this.value;
	updateCacheStatus(selectedLanguage);

	if (currentApiKey) {
	await applyLanguage(selectedLanguage);
	} else {
	applyDirection(selectedLanguage);
	}
	});

	// Clear cache button handler
	document.getElementById('clearCacheBtn').addEventListener('click', clearAllTranslationCache);

	// API key sync between landing and main app
	document.getElementById('apiKeyLanding').addEventListener('input', function() {
	currentApiKey = this.value;
	localStorage.setItem('aiCognitiveStrategy_apiKey', this.value);
	document.getElementById('apiKey').value = this.value;
	});

	document.getElementById('apiKey').addEventListener('input', function() {
	currentApiKey = this.value;
	localStorage.setItem('aiCognitiveStrategy_apiKey', this.value);
	document.getElementById('apiKeyLanding').value = this.value;
	});

	// Scroll-based progress bar
	window.addEventListener('scroll', () => {
	const { scrollTop, scrollHeight } = document.documentElement;
	const scrolled = (scrollTop / (scrollHeight - window.innerHeight)) * 100;
	document.getElementById('progressBar').style.width = `${scrolled}%`;
	});

	// API Service Module
	const APIService = {
	async callOpenAI(prompt, apiKey) {
	const payload = {
	model: AppConfig.MODEL,
	messages: [{ role: 'user', content: prompt }],
	max_tokens: AppConfig.MAX_TOKENS,
	temperature: AppConfig.TEMPERATURE
	};

	const response = await fetch(AppConfig.API_BASE_URL, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	'Authorization': `Bearer ${apiKey}`
	},
	body: JSON.stringify(payload)
	});

	if (!response.ok) {
	const errorData = await response.json();
	throw new Error(errorData.error?.message \|\| `HTTP ${response.status}: ${response.statusText}`);
	}

	const data = await response.json();
	return data.choices[0].message.content;
	}
	};

	// Prompt Builder Module
	const PromptBuilder = {
	buildCompositePrompt(userPrompt) {
	const languageName = languageNames[currentLanguage] \|\| 'English';

	return `Important: Generate the entire response in ${languageName}. All content, headings, explanations, and strategy elements must be written in ${languageName}.

	You are a professional educational strategist and cognitive scientist specializing in AI integration in learning. Based on the prompt provided below, generate two distinct sections in your response:

	Section 1: Critical Thinking Strategies
	- Describe innovative ways in which AI can enhance cognitive abilities and boost learner confidence.
	- Provide actionable recommendations and examples.

	Section 2: Mitigation Strategies
	- Suggest methods to minimize the negative impacts of generative AI on cognitive skills.
	- Provide practical recommendations and safeguards to protect cognitive development.

	Your response must be tailored to the prompt and presented in a clear, structured format with appropriate headings in ${languageName}.

	Prompt:
	<<<BEGIN PROMPT>>>
	${userPrompt}
	<<<END PROMPT>>>

	Output only the final enhanced prompt in ${languageName}.
	`.trim();
	}
	};

	// UI Controller Module
	const UIController = {
	elements: {},

	init() {
	this.elements = {
	apiKeyInput: document.getElementById('apiKey'),
	promptTextarea: document.getElementById('userPrompt'),
	generateBtn: document.getElementById('generateBtn'),
	loadingSpinner: document.getElementById('loadingSpinner'),
	buttonText: document.querySelector('.button-text'),
	outputArea: document.getElementById('outputArea'),
	copyBtn: document.getElementById('copyBtn'),
	characterCounter: document.getElementById('characterCounter')
	};

	this.setupEventListeners();
	this.updateCharacterCounter();
	},

	setupEventListeners() {
	this.elements.apiKeyInput.addEventListener('input', (e) => {
	AppState.setApiKey(e.target.value.trim());
	});

	this.elements.promptTextarea.addEventListener('input', () => {
	this.updateCharacterCounter();
	});

	this.elements.generateBtn.addEventListener('click', () => {
	App.handleSubmit();
	});

	this.elements.copyBtn.addEventListener('click', () => {
	this.copyToClipboard();
	});

	// Keyboard shortcuts
	document.addEventListener('keydown', (e) => {
	if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter') {
	e.preventDefault();
	App.handleSubmit();
	}
	});
	},

	updateCharacterCounter() {
	const length = this.elements.promptTextarea.value.length;
	const maxLength = AppConfig.MAX_PROMPT_LENGTH;
	this.elements.characterCounter.textContent = `${length} / ${maxLength}`;

	if (length > maxLength * 0.9) {
	this.elements.characterCounter.style.color = 'var(--color-warning)';
	} else {
	this.elements.characterCounter.style.color = 'var(--color-text-muted)';
	}
	},

	updateLoadingState(isLoading) {
	if (isLoading) {
	this.elements.generateBtn.disabled = true;
	this.elements.buttonText.style.opacity = '0';
	this.elements.loadingSpinner.style.display = 'block';
	} else {
	this.elements.generateBtn.disabled = false;
	this.elements.buttonText.style.opacity = '1';
	this.elements.loadingSpinner.style.display = 'none';
	}
	},

	displayResults(content) {
	this.elements.outputArea.innerHTML = this.formatOutput(content);
	this.elements.copyBtn.style.display = 'inline-flex';
	AppState.lastResult = content;

	// Announce to screen readers
	this.announceToScreenReader('Strategy generation completed. Results are now available.');
	},

	formatOutput(content) {
	// Basic markdown-like formatting
	return content
	.replace(/^# (.*$)/gm, '<h1>$1</h1>')
	.replace(/^## (.*$)/gm, '<h2>$1</h2>')
	.replace(/^### (.*$)/gm, '<h3>$1</h3>')
	.replace(/\\(.?)\\*/g, '<strong>$1</strong>')
	.replace(/\(.?)\*/g, '<em>$1</em>')
	.replace(/\n\n/g, '</p><p>')
	.replace(/^(.*)$/gm, '<p>$1</p>')
	.replace(/<p><\/p>/g, '')
	.replace(/<p>(<h[1-6]>.*?<\/h[1-6]>)<\/p>/g, '$1');
	},

	showError(message) {
	const errorHtml = `
	<div class="error-message">
	<span class="error-icon">⚠️</span>
	<span class="error-text">${message}</span>
	<button class="error-dismiss" onclick="this.parentElement.remove()">×</button>
	</div>
	`;

	this.elements.outputArea.innerHTML = errorHtml + this.elements.outputArea.innerHTML;
	this.announceToScreenReader(`Error: ${message}`);
	},

	async copyToClipboard() {
	try {
	await navigator.clipboard.writeText(AppState.lastResult);

	// Visual feedback
	const originalText = this.elements.copyBtn.innerHTML;
	this.elements.copyBtn.innerHTML = '<span>✅</span> Copied!';

	setTimeout(() => {
	this.elements.copyBtn.innerHTML = originalText;
	}, 2000);

	this.announceToScreenReader('Content copied to clipboard');
	} catch (err) {
	console.error('Failed to copy:', err);
	this.announceToScreenReader('Failed to copy content');
	}
	},

	announceToScreenReader(message) {
	const announcement = document.createElement('div');
	announcement.setAttribute('aria-live', 'polite');
	announcement.setAttribute('aria-atomic', 'true');
	announcement.className = 'sr-only';
	announcement.textContent = message;
	document.body.appendChild(announcement);

	setTimeout(() => {
	document.body.removeChild(announcement);
	}, 1000);
	}
	};

	// Error Handler Module
	const ErrorHandler = {
	handleError(error) {
	console.error('Application error:', error);

	let userMessage = 'An unexpected error occurred. Please try again.';

	if (error.message.includes('API key')) {
	userMessage = 'Invalid API key. Please check your OpenAI API key and try again.';
	} else if (error.message.includes('network') \|\| error.message.includes('fetch')) {
	userMessage = 'Network error. Please check your internet connection and try again.';
	} else if (error.message.includes('rate limit')) {
	userMessage = 'Rate limit exceeded. Please wait a moment before trying again.';
	} else if (error.message.includes('quota')) {
	userMessage = 'API quota exceeded. Please check your OpenAI account usage.';
	}

	UIController.showError(userMessage);
	}
	};

	// Input Validator Module
	const InputValidator = {
	validateApiKey(apiKey) {
	if (!apiKey \|\| apiKey.length < 10) {
	throw new Error('Please enter a valid OpenAI API key.');
	}

	if (!apiKey.startsWith('sk-')) {
	throw new Error('OpenAI API key should start with "sk-".');
	}

	return true;
	},

	validatePrompt(prompt) {
	if (!prompt \|\| prompt.trim().length === 0) {
	throw new Error('Please enter a prompt before generating strategies.');
	}

	if (prompt.length > AppConfig.MAX_PROMPT_LENGTH) {
	throw new Error(`Prompt is too long. Maximum ${AppConfig.MAX_PROMPT_LENGTH} characters allowed.`);
	}

	return true;
	}
	};

	// Main App Module
	const App = {
	init() {
	AppState.loadFromLocalStorage();
	UIController.init();

	// Load saved API key
	if (AppState.apiKey) {
	UIController.elements.apiKeyInput.value = AppState.apiKey;
	}

	console.log('AI Cognitive Strategy Generator initialized');
	},

	async handleSubmit() {
	if (AppState.isLoading) return;

	try {
	const apiKey = UIController.elements.apiKeyInput.value.trim();
	const userPrompt = UIController.elements.promptTextarea.value.trim();

	// Validate inputs
	InputValidator.validateApiKey(apiKey);
	InputValidator.validatePrompt(userPrompt);

	// Update state
	AppState.setApiKey(apiKey);
	AppState.currentPrompt = userPrompt;
	AppState.setLoading(true);

	// Build composite prompt
	const compositePrompt = PromptBuilder.buildCompositePrompt(userPrompt);
	console.log('Composite Prompt:', compositePrompt);

	// Call API
	const result = await APIService.callOpenAI(compositePrompt, apiKey);

	// Display results
	UIController.displayResults(result);

	} catch (error) {
	ErrorHandler.handleError(error);
	} finally {
	AppState.setLoading(false);
	}
	}
	};

	// Initialize app when DOM is loaded
	document.addEventListener('DOMContentLoaded', function() {
	initializeApp();
	App.init();
	});
	</script>
	</body>
	</html>