ImpactAnalyzer-Pro / index.html
Hma47's picture
Upload 4 files
2d6797f verified
Raw History Blame Contribute Delete
61.2 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>ImpactAnalyzer Pro - Sustainability & Social Impact Assessment</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> /* CSS Reset and Base Styles */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* CSS Custom Properties */ :root { /* Color System - Sustainability/Impact theme */ --color-primary: #059669; --color-primary-hover: #047857; --color-secondary: #10b981; --color-accent: #34d399; --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; /* Neutral Colors - Light Mode */ --color-background: #f8fafc; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-border: #e2e8f0; --color-border-focus: #059669; --color-text-primary: #1e293b; --color-text-secondary: #64748b; --color-text-muted: #94a3b8; /* Typography */ --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Optimized Spacing System */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 0.75rem; --spacing-lg: 1rem; --spacing-xl: 1.25rem; --spacing-2xl: 1.5rem; --spacing-3xl: 2rem; /* Border Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Transitions */ --transition-fast: 150ms ease-in-out; --transition-normal: 250ms ease-in-out; --transition-slow: 350ms ease-in-out; /* Layout */ --container-max-width: 1400px; --content-max-width: 1200px; } /* RTL Support */ [dir="rtl"] { text-align: right; } [dir="rtl"] .app-container { direction: rtl; } [dir="rtl"] .api-key-compact { left: auto; right: var(--spacing-lg); } [dir="rtl"] .language-switcher { right: auto; left: var(--spacing-lg); } /* Dark Mode Support */ @media (prefers-color-scheme: dark) { :root { --color-background: #0f172a; --color-surface: #1e293b; --color-surface-elevated: #334155; --color-border: #334155; --color-text-primary: #f1f5f9; --color-text-secondary: #cbd5e1; --color-text-muted: #94a3b8; } } /* Base Styles */ html { font-size: 16px; line-height: 1.5; scroll-behavior: smooth; } body { font-family: var(--font-family-primary); background: linear-gradient(135deg, var(--color-background) 0%, #e2e8f0 100%); color: var(--color-text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; transition: all 0.3s ease; padding: 15px; } /* Progress Bar */ .progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: var(--color-primary); transition: width 0.3s ease; z-index: 1000; } /* Language Selection Landing */ .language-landing { display: block; max-width: 600px; margin: 50px auto; background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 40px; text-align: center; } .language-landing h1 { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 15px; } .language-landing p { font-size: 1.1rem; color: var(--color-text-secondary); margin-bottom: 30px; } .language-selector { margin-bottom: 25px; } .language-selector label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--color-text-primary); font-size: 1.1rem; } .language-selector select { width: 100%; padding: 15px 20px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); font-size: 1.1rem; font-family: inherit; background: var(--color-surface); transition: all 0.2s ease; margin-bottom: 20px; } .language-selector select:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1); } .api-key-landing { margin-bottom: 25px; } .api-key-landing label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--color-text-primary); font-size: 1.1rem; } .api-key-landing input { width: 100%; padding: 15px 20px; border: 2px solid var(--color-border); border-radius: var(--radius-lg); font-size: 1.1rem; background: var(--color-surface); transition: all 0.2s ease; font-family: 'Courier New', monospace; } .api-key-landing input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1); } .start-btn { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: white; padding: 18px 40px; border: none; border-radius: var(--radius-lg); font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; width: 100%; } .start-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(5, 150, 105, 0.4); } .start-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } /* Cache Management Section */ .cache-management { background: rgba(5, 150, 105, 0.05); border: 1px solid rgba(5, 150, 105, 0.1); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 25px; text-align: center; } .cache-management h3 { color: var(--color-primary); margin-bottom: 15px; font-size: 1.1rem; font-weight: 600; } .cache-status-display { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--color-success); padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 15px; font-size: 0.9rem; font-weight: 500; } .cache-status-display.no-cache { background: rgba(100, 116, 139, 0.1); border-color: rgba(100, 116, 139, 0.2); color: var(--color-text-secondary); } .clear-cache-btn { background: linear-gradient(135deg, var(--color-warning) 0%, #f59e0b 100%); color: white; padding: 12px 24px; border: none; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .clear-cache-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 12px -4px rgba(245, 158, 11, 0.4); } .clear-cache-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Cache Status Indicator */ .cache-status { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--color-success); padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 15px; font-size: 0.85rem; text-align: center; font-weight: 500; display: none; } .cache-status.cached { display: block; } .cache-status.translating { background: rgba(5, 150, 105, 0.1); border-color: rgba(5, 150, 105, 0.2); color: var(--color-primary); } /* Translation Loading Overlay */ .translation-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 150, 105, 0.9); display: none; justify-content: center; align-items: center; z-index: 10000; color: white; text-align: center; } .translation-content { background: rgba(255, 255, 255, 0.1); padding: 40px; border-radius: var(--radius-xl); backdrop-filter: blur(10px); } .translation-spinner { width: 50px; height: 50px; border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; margin: 0 auto 20px; } /* Main Application (Hidden Initially) */ .main-app { display: none; } /* Layout Components */ .app-container { max-width: var(--container-max-width); margin: 0 auto; background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; position: relative; } /* Language Switcher in Main App */ .language-switcher { position: absolute; top: var(--spacing-lg); right: var(--spacing-lg); display: flex; gap: 10px; align-items: center; z-index: 10; } .language-switch-btn { background: rgba(5, 150, 105, 0.05); border: 1px solid rgba(5, 150, 105, 0.1); border-radius: var(--radius-md); padding: 8px 12px; font-size: 12px; cursor: pointer; transition: all 0.2s ease; color: var(--color-primary); font-weight: 500; } .language-switch-btn:hover { background: rgba(5, 150, 105, 0.1); } .mini-clear-cache { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.2); color: var(--color-warning); padding: 6px 10px; border-radius: var(--radius-sm); font-size: 11px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; } .mini-clear-cache:hover { background: rgba(245, 158, 11, 0.2); } /* Compact API Key in Top-Left */ .api-key-compact { position: absolute; top: var(--spacing-lg); left: var(--spacing-lg); z-index: 10; background: rgba(5, 150, 105, 0.05); border: 1px solid rgba(5, 150, 105, 0.1); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); transition: all var(--transition-normal); max-width: 280px; } .api-key-compact:hover { background: rgba(5, 150, 105, 0.08); } .api-key-compact-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); margin-bottom: var(--spacing-xs); text-transform: uppercase; letter-spacing: 0.05em; } .api-key-compact-input { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.875rem; background: var(--color-surface); color: var(--color-text-primary); transition: all var(--transition-fast); font-family: 'Courier New', monospace; } .api-key-compact-input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 2px rgb(5 150 105 / 0.1); } .api-key-compact-input::placeholder { color: var(--color-text-muted); font-size: 0.75rem; } /* Main Content */ .main-content { padding: 20px 30px 30px; } /* Header */ .header { text-align: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--color-border); } .header h1 { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; } .header .subtitle { font-size: 1.1rem; color: var(--color-text-secondary); font-weight: 500; } .header .description { font-size: 1rem; color: var(--color-text-secondary); margin-top: 12px; max-width: 700px; margin-left: auto; margin-right: auto; } /* Impact Categories */ .impact-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; } .category-card { background: rgba(5, 150, 105, 0.05); border: 1px solid rgba(5, 150, 105, 0.1); border-radius: 8px; padding: 15px; text-align: center; } .category-card h4 { color: var(--color-primary); font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; } .category-card p { font-size: 0.8rem; color: var(--color-text-secondary); } /* Input Section */ .input-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 20px; margin-bottom: 25px; transition: all 0.3s ease; box-shadow: var(--shadow-sm); } .input-section:hover { border-color: var(--color-primary); box-shadow: 0 8px 25px -8px rgba(5, 150, 105, 0.3); } .input-section h3 { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .input-section .description { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 12px; } /* Form Elements */ label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--color-text-primary); font-size: 0.95rem; } textarea { width: 100%; padding: 12px 16px; border: 2px solid var(--color-border); border-radius: 8px; font-size: 1rem; font-family: inherit; background: var(--color-surface); transition: all 0.2s ease; resize: vertical; min-height: 150px; } textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1); } /* Character Counter */ .char-counter { font-size: 0.8rem; color: var(--color-text-secondary); text-align: right; margin-top: 4px; } /* Generate Button */ .generate-btn { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color: white; padding: 16px 32px; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; display: block; margin: 25px auto; min-width: 280px; position: relative; overflow: hidden; } .generate-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(5, 150, 105, 0.4); } .generate-btn:active { transform: translateY(0); } .generate-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } /* Loading Spinner */ .spinner { display: none; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite; margin-right: 8px; } @keyframes spin { to { transform: rotate(360deg); } } /* Output Section */ .output-section { margin-top: 30px; } .output-section h2 { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); margin-bottom: 15px; display: flex; align-items: center; gap: 8px; } .output-area { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 12px; padding: 20px; min-height: 300px; transition: all 0.3s ease; position: relative; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; line-height: 1.7; } .output-area:empty::before { content: "Your comprehensive impact analysis will appear here..."; color: var(--color-text-secondary); font-style: italic; white-space: normal; } /* Enhanced output styling */ .output-area h3 { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 8px; margin: 20px 0 15px 0; font-size: 1.2rem; } .output-area h4 { color: var(--color-secondary); margin: 15px 0 10px 0; font-size: 1.1rem; } .output-area ul { margin: 10px 0 15px 20px; line-height: 1.7; } .output-area li { margin-bottom: 5px; } .output-area p { margin: 12px 0; line-height: 1.7; } .output-area strong { color: var(--color-primary); } /* Error Messages */ .error-message { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--color-error); padding: 12px 16px; border-radius: 8px; margin: 10px 0; font-size: 0.9rem; display: none; } /* Footer */ .footer { text-align: center; padding: 20px; background: rgba(5, 150, 105, 0.05); border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 0.9rem; } /* Hidden sections */ .hidden { display: none !important; } /* Responsive Design */ @media (max-width: 768px) { body { padding: 10px; } .language-landing { margin: 20px auto; padding: 30px 20px; } .api-key-compact { position: static; margin-bottom: var(--spacing-xl); max-width: none; } .language-switcher { position: relative; top: auto; right: auto; margin-bottom: var(--spacing-xl); justify-content: center; } .main-content { padding: 15px 20px 20px; } .header h1 { font-size: 2rem; } .input-section { padding: 15px; } .impact-categories { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .generate-btn { width: 100%; margin: 20px 0; } .output-area { padding: 15px; } } @media (max-width: 480px) { .language-landing h1 { font-size: 2rem; } .header h1 { font-size: 1.8rem; } .input-section { padding: 12px; } .impact-categories { grid-template-columns: 1fr 1fr; } } /* Accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus styles for keyboard navigation */ .generate-btn:focus, .api-key-compact-input:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } </style> </head> <body> <!-- Progress Bar --> <div class="progress-bar" id="progressBar"></div> <!-- Translation Loading Overlay --> <div class="translation-overlay" id="translationOverlay"> <div class="translation-content"> <div class="translation-spinner"></div> <h2 id="translationTitle">Translating Interface...</h2> <p id="translationMessage">Please wait while we translate the interface to your selected language.</p> </div> </div> <!-- Language Selection Landing Page --> <div class="language-landing" id="languageLanding"> <h1 data-translate="app_title">ImpactAnalyzer Pro</h1> <p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with comprehensive sustainability and social impact assessment.</p> <!-- Cache Status Indicator --> <div class="cache-status" id="cacheStatus"> 💾 Translations cached - instant loading! </div> <!-- Cache Management Section --> <div class="cache-management" id="cacheManagement"> <h3 data-translate="cache_management_title">🗂️ Translation Cache Management</h3> <div class="cache-status-display" id="cacheStatusDisplay"> <span data-translate="cache_status_checking">Checking cache status...</span> </div> <button class="clear-cache-btn" id="clearCacheBtn" data-translate="clear_cache_button"> 🗑️ Clear All Cached Translations </button> </div> <div class="language-selector"> <label for="languageSelect" data-translate="select_language">🌐 Select Language</label> <select id="languageSelect"> <option value="en">🇺🇸 English</option> <option value="es">🇪🇸 Español (Spanish)</option> <option value="fr">🇫🇷 Français (French)</option> <option value="de">🇩🇪 Deutsch (German)</option> <option value="zh">🇨🇳 中文 (Chinese)</option> <option value="ja">🇯🇵 日本語 (Japanese)</option> <option value="ko">🇰🇷 한국어 (Korean)</option> <option value="pt">🇵🇹 Português (Portuguese)</option> <option value="it">🇮🇹 Italiano (Italian)</option> <option value="ar">🇸🇦 العربية (Arabic)</option> <option value="ru">🇷🇺 Русский (Russian)</option> <option value="hi">🇮🇳 हिन्दी (Hindi)</option> <option value="bn">🇧🇩 বাংলা (Bengali)</option> <option value="ur">🇵🇰 اردو (Urdu)</option> <option value="tr">🇹🇷 Türkçe (Turkish)</option> <option value="pl">🇵🇱 Polski (Polish)</option> <option value="nl">🇳🇱 Nederlands (Dutch)</option> <option value="sv">🇸🇪 Svenska (Swedish)</option> <option value="da">🇩🇰 Dansk (Danish)</option> <option value="no">🇳🇴 Norsk (Norwegian)</option> <option value="fi">🇫🇮 Suomi (Finnish)</option> <option value="is">🇮🇸 Íslenska (Icelandic)</option> <option value="cs">🇨🇿 Čeština (Czech)</option> <option value="sk">🇸🇰 Slovenčina (Slovak)</option> <option value="hu">🇭🇺 Magyar (Hungarian)</option> <option value="ro">🇷🇴 Română (Romanian)</option> <option value="bg">🇧🇬 Български (Bulgarian)</option> <option value="hr">🇭🇷 Hrvatski (Croatian)</option> <option value="sr">🇷🇸 Српски (Serbian)</option> <option value="sl">🇸🇮 Slovenščina (Slovenian)</option> <option value="mk">🇲🇰 Македонски (Macedonian)</option> <option value="sq">🇦🇱 Shqip (Albanian)</option> <option value="lv">🇱🇻 Latviešu (Latvian)</option> <option value="lt">🇱🇹 Lietuvių (Lithuanian)</option> <option value="et">🇪🇪 Eesti (Estonian)</option> <option value="mt">🇲🇹 Malti (Maltese)</option> <option value="ga">🇮🇪 Gaeilge (Irish)</option> <option value="cy">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cymraeg (Welsh)</option> <option value="eu">🏴󠁥󠁳󠁰󠁶󠁿 Euskera (Basque)</option> <option value="ca">🏴󠁥󠁳󠁣󠁴󠁿 Català (Catalan)</option> <option value="gl">🏴󠁥󠁳󠁧󠁡󠁿 Galego (Galician)</option> <option value="el">🇬🇷 Ελληνικά (Greek)</option> <option value="he">🇮🇱 עברית (Hebrew)</option> <option value="fa">🇮🇷 فارسی (Persian)</option> <option value="ps">🇦🇫 پښتو (Pashto)</option> <option value="ku">🏴󠁩󠁱󠁫󠁲󠁿 کوردی (Kurdish)</option> <option value="az">🇦🇿 Azərbaycan (Azerbaijani)</option> <option value="kk">🇰🇿 Қазақша (Kazakh)</option> <option value="ky">🇰🇬 Кыргызча (Kyrgyz)</option> <option value="uz">🇺🇿 O'zbek (Uzbek)</option> <option value="tk">🇹🇲 Türkmen (Turkmen)</option> <option value="tg">🇹🇯 Тоҷикӣ (Tajik)</option> <option value="mn">🇲🇳 Монгол (Mongolian)</option> <option value="ka">🇬🇪 ქართული (Georgian)</option> <option value="hy">🇦🇲 Հայերեն (Armenian)</option> <option value="th">🇹🇭 ไทย (Thai)</option> <option value="vi">🇻🇳 Tiếng Việt (Vietnamese)</option> <option value="lo">🇱🇦 ລາວ (Lao)</option> <option value="km">🇰🇭 ខ្មែរ (Khmer)</option> <option value="my">🇲🇲 မြန်မာ (Myanmar)</option> <option value="si">🇱🇰 සිංහල (Sinhala)</option> <option value="ta">🇱🇰 தமிழ் (Tamil)</option> <option value="te">🇮🇳 తెలుగు (Telugu)</option> <option value="kn">🇮🇳 ಕನ್ನಡ (Kannada)</option> <option value="ml">🇮🇳 മലയാളം (Malayalam)</option> <option value="gu">🇮🇳 ગુજરાતી (Gujarati)</option> <option value="pa">🇮🇳 ਪੰਜਾਬੀ (Punjabi)</option> <option value="or">🇮🇳 ଓଡ଼ିଆ (Odia)</option> <option value="as">🇮🇳 অসমীয়া (Assamese)</option> <option value="ne">🇳🇵 नेपाली (Nepali)</option> <option value="dz">🇧🇹 རྫོང་ཁ (Dzongkha)</option> <option value="bo">🏔️ བོད་ཡིག (Tibetan)</option> <option value="id">🇮🇩 Bahasa Indonesia</option> <option value="ms">🇲🇾 Bahasa Melayu (Malay)</option> <option value="tl">🇵🇭 Filipino (Tagalog)</option> <option value="ceb">🇵🇭 Cebuano</option> <option value="haw">🏝️ ʻŌlelo Hawaiʻi (Hawaiian)</option> <option value="mi">🇳🇿 Te Reo Māori (Maori)</option> <option value="sm">🇼🇸 Gagana Samoa (Samoan)</option> <option value="to">🇹🇴 Lea Fakatonga (Tongan)</option> <option value="fj">🇫🇯 Na Vosa Vakaviti (Fijian)</option> <option value="mg">🇲🇬 Malagasy</option> <option value="sw">🇰🇪 Kiswahili (Swahili)</option> <option value="zu">🇿🇦 isiZulu (Zulu)</option> <option value="xh">🇿🇦 isiXhosa (Xhosa)</option> <option value="af">🇿🇦 Afrikaans</option> <option value="st">🇱🇸 Sesotho (Southern Sotho)</option> <option value="tn">🇧🇼 Setswana (Tswana)</option> <option value="ss">🇸🇿 siSwati (Swati)</option> <option value="ve">🇿🇦 Tshivenḓa (Venda)</option> <option value="ts">🇿🇦 Xitsonga (Tsonga)</option> <option value="nr">🇿🇦 isiNdebele (Southern Ndebele)</option> <option value="am">🇪🇹 አማርኛ (Amharic)</option> <option value="ti">🇪🇷 ትግርኛ (Tigrinya)</option> <option value="om">🇪🇹 Afaan Oromoo (Oromo)</option> <option value="so">🇸🇴 Soomaali (Somali)</option> <option value="ha">🇳🇬 Hausa</option> <option value="yo">🇳🇬 Yorùbá (Yoruba)</option> <option value="ig">🇳🇬 Igbo</option> <option value="ff">🇸🇳 Fulfulde (Fulani)</option> <option value="wo">🇸🇳 Wolof</option> <option value="bm">🇲🇱 Bamanankan (Bambara)</option> <option value="rn">🇧🇮 Kirundi (Rundi)</option> <option value="rw">🇷🇼 Kinyarwanda (Rwanda)</option> <option value="lg">🇺🇬 Luganda</option> <option value="ny">🇲🇼 Chichewa (Nyanja)</option> <option value="sn">🇿🇼 chiShona (Shona)</option> <option value="nd">🇿🇼 isiNdebele (Northern Ndebele)</option> </select> </div> <div class="api-key-landing"> <label for="apiKeyLanding" data-translate="api_key_label">🔑 OpenAI API Key</label> <input type="password" id="apiKeyLanding" placeholder="Enter your OpenAI API key" data-translate-placeholder="api_key_placeholder"> </div> <button class="start-btn" id="startBtn" data-translate="start_button">🌱 Start Impact Analysis</button> </div> <!-- Main Application --> <div class="main-app" id="mainApp"> <div class="app-container"> <!-- Language Switcher --> <div class="language-switcher" id="languageSwitcher"> <div class="language-switch-btn" onclick="showLanguageLanding()"> <span data-translate="change_language">🌐 Change Language</span> </div> <div class="mini-clear-cache" onclick="clearAllTranslationCache()" title="Clear translation cache"> <span data-translate="clear_cache_mini">🗑️ Clear Cache</span> </div> </div> <!-- Compact API Key in Top-Left --> <div class="api-key-compact"> <label for="apiKey" class="api-key-compact-label" data-translate="api_key_short">API Key</label> <input type="password" id="apiKey" class="api-key-compact-input" data-translate-placeholder="api_key_placeholder" autocomplete="off" > </div> <div class="main-content"> <!-- Header --> <div class="header"> <h1 data-translate="app_title">ImpactAnalyzer Pro</h1> <p class="subtitle" data-translate="app_subtitle">Sustainability & Social Impact Assessment Platform</p> <p class="description" data-translate="app_description">Analyze the environmental and social impacts of your ideas, projects, and initiatives with comprehensive AI-powered assessment</p> </div> <!-- Impact Categories Overview --> <div class="impact-categories"> <div class="category-card"> <h4 data-translate="environmental_impact">🌍 Environmental Impact</h4> <p data-translate="environmental_desc">Carbon footprint, resource usage, sustainability</p> </div> <div class="category-card"> <h4 data-translate="social_impact">👥 Social Impact</h4> <p data-translate="social_desc">Community benefits, social equity, accessibility</p> </div> <div class="category-card"> <h4 data-translate="economic_impact">💰 Economic Impact</h4> <p data-translate="economic_desc">Cost-effectiveness, economic sustainability</p> </div> <div class="category-card"> <h4 data-translate="ethical_considerations">⚖️ Ethical Considerations</h4> <p data-translate="ethical_desc">Fairness, transparency, responsibility</p> </div> <div class="category-card"> <h4 data-translate="lifecycle_assessment">🔄 Lifecycle Assessment</h4> <p data-translate="lifecycle_desc">Long-term effects, scalability, durability</p> </div> <div class="category-card"> <h4 data-translate="risk_analysis">📊 Risk Analysis</h4> <p data-translate="risk_desc">Potential challenges, mitigation strategies</p> </div> </div> <!-- Error Message --> <div class="error-message" id="errorMessage"></div> <!-- Input Section --> <div class="input-section"> <h3 data-translate="idea_input_title">💡 Idea & Project Input</h3> <p class="description" data-translate="idea_input_desc">Describe your idea, project, product, service, or initiative that you want to analyze for environmental and social impact</p> <textarea id="ideaInput" data-translate-placeholder="idea_input_placeholder" required></textarea> <div class="char-counter" id="charCounter">0 characters</div> </div> <!-- Generate Button --> <button class="generate-btn" id="compareBtn"> <span class="spinner" id="spinner"></span> <span id="buttonText" data-translate="analyze_button">🌱 Analyze Impact</span> </button> <!-- Output Section --> <div class="output-section"> <h2 data-translate="output_title">📈 Your Impact Analysis Report</h2> <div class="output-area" id="impactOutput"></div> </div> </div> <!-- Footer --> <div class="footer"> Created by Shift Mind AI Labs </div> </div> </div> <script> // RTL languages list const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'ku']; // Current language and API key let currentLanguage = 'en'; let currentApiKey = ''; // Language names mapping const languageNames = { en: 'English', es: 'Spanish', fr: 'French', de: 'German', zh: 'Chinese', ja: 'Japanese', ko: 'Korean', pt: 'Portuguese', it: 'Italian', ar: 'Arabic', ru: 'Russian', hi: 'Hindi', bn: 'Bengali', ur: 'Urdu', tr: 'Turkish', pl: 'Polish', nl: 'Dutch', sv: 'Swedish', da: 'Danish', no: 'Norwegian', fi: 'Finnish', is: 'Icelandic', cs: 'Czech', sk: 'Slovak', hu: 'Hungarian', ro: 'Romanian', bg: 'Bulgarian', hr: 'Croatian', sr: 'Serbian', sl: 'Slovenian', mk: 'Macedonian', sq: 'Albanian', lv: 'Latvian', lt: 'Lithuanian', et: 'Estonian', mt: 'Maltese', ga: 'Irish', cy: 'Welsh', eu: 'Basque', ca: 'Catalan', gl: 'Galician', el: 'Greek', he: 'Hebrew', fa: 'Persian', ps: 'Pashto', ku: 'Kurdish', az: 'Azerbaijani', kk: 'Kazakh', ky: 'Kyrgyz', uz: 'Uzbek', tk: 'Turkmen', tg: 'Tajik', mn: 'Mongolian', ka: 'Georgian', hy: 'Armenian', th: 'Thai', vi: 'Vietnamese', lo: 'Lao', km: 'Khmer', my: 'Myanmar', si: 'Sinhala', ta: 'Tamil', te: 'Telugu', kn: 'Kannada', ml: 'Malayalam', gu: 'Gujarati', pa: 'Punjabi', or: 'Odia', as: 'Assamese', ne: 'Nepali', dz: 'Dzongkha', bo: 'Tibetan', id: 'Indonesian', ms: 'Malay', tl: 'Filipino', ceb: 'Cebuano', haw: 'Hawaiian', mi: 'Maori', sm: 'Samoan', to: 'Tongan', fj: 'Fijian', mg: 'Malagasy', sw: 'Swahili', zu: 'Zulu', xh: 'Xhosa', af: 'Afrikaans', st: 'Southern Sotho', tn: 'Tswana', ss: 'Swati', ve: 'Venda', ts: 'Tsonga', nr: 'Southern Ndebele', am: 'Amharic', ti: 'Tigrinya', om: 'Oromo', so: 'Somali', ha: 'Hausa', yo: 'Yoruba', ig: 'Igbo', ff: 'Fulani', wo: 'Wolof', bm: 'Bambara', rn: 'Rundi', rw: 'Rwanda', lg: 'Luganda', ny: 'Chichewa', sn: 'Shona', nd: 'Northern Ndebele' }; // Translation cache management const CACHE_PREFIX = 'impactanalyzer_translations_'; const CACHE_VERSION = '1.0'; // Check if translations are cached for a language function isLanguageCached(language) { const cacheKey = CACHE_PREFIX + language; const cached = localStorage.getItem(cacheKey); return cached !== null; } // Save translations to cache function saveTranslationsToCache(language, translations) { const cacheKey = CACHE_PREFIX + language; const cacheData = { version: CACHE_VERSION, timestamp: Date.now(), translations: translations }; localStorage.setItem(cacheKey, JSON.stringify(cacheData)); console.log(`Translations cached for ${language}`); } // Load translations from cache function loadTranslationsFromCache(language) { const cacheKey = CACHE_PREFIX + language; const cached = localStorage.getItem(cacheKey); if (cached) { try { const cacheData = JSON.parse(cached); if (cacheData.version === CACHE_VERSION) { console.log(`Translations loaded from cache for ${language}`); return cacheData.translations; } } catch (error) { console.error('Error parsing cached translations:', error); } } return null; } // Get all cached languages function getCachedLanguages() { const cachedLanguages = []; for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); if (key && key.startsWith(CACHE_PREFIX)) { const language = key.replace(CACHE_PREFIX, ''); cachedLanguages.push(language); } } return cachedLanguages; } // Clear all translation cache function clearAllTranslationCache() { const cachedLanguages = getCachedLanguages(); if (cachedLanguages.length === 0) { alert('No cached translations to clear.'); return; } const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', '); const confirmMessage = `Are you sure you want to clear all cached translations?\n\nCached languages: ${languageList}\n\nThis will require re-downloading translations when switching languages.`; if (confirm(confirmMessage)) { // Clear all translation caches cachedLanguages.forEach(language => { const cacheKey = CACHE_PREFIX + language; localStorage.removeItem(cacheKey); }); // Update cache status updateCacheStatus(currentLanguage); updateCacheStatusDisplay(); alert(`Cache cleared successfully!\n\n${cachedLanguages.length} language(s) removed from cache.`); // Ask if user wants to reload current language translations if (currentLanguage !== 'en' && cachedLanguages.includes(currentLanguage)) { if (confirm('Would you like to reload the current language translations?')) { applyLanguage(currentLanguage); } } } } // Update cache status indicator function updateCacheStatus(language) { const cacheStatus = document.getElementById('cacheStatus'); const isCached = isLanguageCached(language); if (language === 'en') { cacheStatus.classList.remove('cached', 'translating'); return; } if (isCached) { cacheStatus.textContent = '💾 Translations cached - instant loading!'; cacheStatus.classList.add('cached'); cacheStatus.classList.remove('translating'); } else { cacheStatus.textContent = '🔄 First time translation - will be cached for future use'; cacheStatus.classList.add('translating'); cacheStatus.classList.remove('cached'); } } // Update cache status display in management section function updateCacheStatusDisplay() { const cacheStatusDisplay = document.getElementById('cacheStatusDisplay'); const clearCacheBtn = document.getElementById('clearCacheBtn'); const cachedLanguages = getCachedLanguages(); if (cachedLanguages.length === 0) { cacheStatusDisplay.textContent = '📭 No cached translations'; cacheStatusDisplay.className = 'cache-status-display no-cache'; clearCacheBtn.disabled = true; } else { const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', '); cacheStatusDisplay.textContent = `💾 ${cachedLanguages.length} language(s) cached: ${languageList}`; cacheStatusDisplay.className = 'cache-status-display'; clearCacheBtn.disabled = false; } } // Initialize the application function initializeApp() { // Load saved language and API key const savedLanguage = localStorage.getItem('impactanalyzer_language') || 'en'; const savedApiKey = localStorage.getItem('impact_analyzer_api_key') || ''; currentLanguage = savedLanguage; currentApiKey = savedApiKey; // Set language selector document.getElementById('languageSelect').value = currentLanguage; document.getElementById('apiKeyLanding').value = currentApiKey; // Apply direction for current language applyDirection(currentLanguage); // Update cache status updateCacheStatus(currentLanguage); updateCacheStatusDisplay(); // Show appropriate screen if (currentApiKey && currentLanguage) { showMainApp(); } else { showLanguageLanding(); } } // Apply language direction function applyDirection(language) { currentLanguage = language; // Set document language and direction document.documentElement.lang = language; document.documentElement.dir = rtlLanguages.includes(language) ? 'rtl' : 'ltr'; // Save language preference localStorage.setItem('impactanalyzer_language', language); // Update cache status updateCacheStatus(language); } // API call function for translation async function translateText(text, targetLanguage) { if (!currentApiKey) { throw new Error('API key is required for translation'); } const languageName = languageNames[targetLanguage] || 'English'; const prompt = `Translate the following text to ${languageName}. Provide ONLY the exact translation without any explanations, additional information, or formatting: "${text}"`; const payload = { model: "gpt-4o-mini", messages: [{ role: "user", content: prompt }], max_tokens: 500, temperature: 0.1 }; const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${currentApiKey}` }, body: JSON.stringify(payload) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error?.message || "Translation API request failed"); } const data = await response.json(); return data.choices[0].message.content.trim(); } // Apply cached translations to UI function applyCachedTranslations(translations) { // Apply text translations Object.keys(translations.texts).forEach(originalText => { const translation = translations.texts[originalText]; const elements = document.querySelectorAll(`[data-translate]`); elements.forEach(element => { const originalElementText = element.getAttribute('data-original-text') || element.textContent; if (originalElementText === originalText) { element.textContent = translation; } }); }); // Apply placeholder translations Object.keys(translations.placeholders).forEach(originalPlaceholder => { const translation = translations.placeholders[originalPlaceholder]; const elements = document.querySelectorAll(`[data-translate-placeholder]`); elements.forEach(element => { const originalElementPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder; if (originalElementPlaceholder === originalPlaceholder) { element.placeholder = translation; } }); }); } // Translate all UI elements async function translateInterface(targetLanguage) { if (targetLanguage === 'en') { // No translation needed for English return; } // Check if translations are cached const cachedTranslations = loadTranslationsFromCache(targetLanguage); if (cachedTranslations) { // Use cached translations console.log('Using cached translations for', targetLanguage); applyCachedTranslations(cachedTranslations); return; } // Need to translate via API showTranslationOverlay(); try { // Get all elements with data-translate attribute const elements = document.querySelectorAll('[data-translate]'); const placeholderElements = document.querySelectorAll('[data-translate-placeholder]'); // Collect all texts to translate const textsToTranslate = []; const placeholdersToTranslate = []; const elementMap = new Map(); elements.forEach(element => { const originalText = element.getAttribute('data-original-text') || element.textContent; if (!element.getAttribute('data-original-text')) { element.setAttribute('data-original-text', originalText); } textsToTranslate.push(originalText); elementMap.set(originalText, element); }); placeholderElements.forEach(element => { const originalPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder; if (!element.getAttribute('data-original-placeholder')) { element.setAttribute('data-original-placeholder', originalPlaceholder); } placeholdersToTranslate.push(originalPlaceholder); elementMap.set(originalPlaceholder, element); }); // Prepare cache structure const translationsCache = { texts: {}, placeholders: {} }; // Translate texts in batches const batchSize = 10; const allTexts = [...textsToTranslate, ...placeholdersToTranslate]; for (let i = 0; i < allTexts.length; i += batchSize) { const batch = allTexts.slice(i, i + batchSize); // Update progress updateTranslationProgress(i, allTexts.length); // Translate batch const translations = await Promise.all( batch.map(text => translateText(text, targetLanguage)) ); // Apply translations and cache them batch.forEach((originalText, index) => { const element = elementMap.get(originalText); const translation = translations[index]; if (element.hasAttribute('data-translate')) { element.textContent = translation; translationsCache.texts[originalText] = translation; } else if (element.hasAttribute('data-translate-placeholder')) { element.placeholder = translation; translationsCache.placeholders[originalText] = translation; } }); } // Save translations to cache saveTranslationsToCache(targetLanguage, translationsCache); // Update cache status updateCacheStatus(targetLanguage); updateCacheStatusDisplay(); } catch (error) { console.error('Translation error:', error); showError('Translation failed: ' + error.message); } finally { hideTranslationOverlay(); } } // Show translation overlay function showTranslationOverlay() { document.getElementById('translationOverlay').style.display = 'flex'; } // Hide translation overlay function hideTranslationOverlay() { document.getElementById('translationOverlay').style.display = 'none'; } // Update translation progress function updateTranslationProgress(current, total) { const percentage = Math.round((current / total) * 100); document.getElementById('translationMessage').textContent = `Translating interface... ${percentage}% complete (will be cached for future use)`; } // Apply language with API translation or cache async function applyLanguage(language) { applyDirection(language); if (language !== 'en') { await translateInterface(language); } } // Show language landing page function showLanguageLanding() { document.getElementById('languageLanding').style.display = 'block'; document.getElementById('mainApp').style.display = 'none'; } // Show main application function showMainApp() { document.getElementById('languageLanding').style.display = 'none'; document.getElementById('mainApp').style.display = 'block'; // Set API key in main app document.getElementById('apiKey').value = currentApiKey; } // Start button click handler document.getElementById('startBtn').addEventListener('click', async function() { const selectedLanguage = document.getElementById('languageSelect').value; const apiKey = document.getElementById('apiKeyLanding').value.trim(); if (!apiKey) { alert('Please enter your OpenAI API key'); return; } currentLanguage = selectedLanguage; currentApiKey = apiKey; // Save API key localStorage.setItem('impact_analyzer_api_key', apiKey); // Apply language with translation (cached or API) await applyLanguage(selectedLanguage); // Show main app showMainApp(); }); // Language selector change handler document.getElementById('languageSelect').addEventListener('change', async function() { const selectedLanguage = this.value; updateCacheStatus(selectedLanguage); if (currentApiKey) { await applyLanguage(selectedLanguage); } else { applyDirection(selectedLanguage); } }); // Clear cache button handler document.getElementById('clearCacheBtn').addEventListener('click', clearAllTranslationCache); // API key sync between landing and main app document.getElementById('apiKeyLanding').addEventListener('input', function() { currentApiKey = this.value; localStorage.setItem('impact_analyzer_api_key', this.value); document.getElementById('apiKey').value = this.value; }); document.getElementById('apiKey').addEventListener('input', function() { currentApiKey = this.value; localStorage.setItem('impact_analyzer_api_key', this.value); document.getElementById('apiKeyLanding').value = this.value; }); // Character counter const ideaInput = document.getElementById('ideaInput'); const charCounter = document.getElementById('charCounter'); ideaInput.addEventListener('input', function() { const count = this.value.length; charCounter.textContent = `${count} characters`; if (count > 5000) { charCounter.style.color = 'var(--color-warning)'; } else { charCounter.style.color = 'var(--color-text-secondary)'; } }); // Scroll-based progress bar window.addEventListener('scroll', () => { const { scrollTop, scrollHeight } = document.documentElement; const scrolled = (scrollTop / (scrollHeight - window.innerHeight)) * 100; document.getElementById('progressBar').style.width = `${scrolled}%`; }); // Error handling function showError(message) { const errorDiv = document.getElementById('errorMessage'); errorDiv.textContent = message; errorDiv.style.display = 'block'; setTimeout(() => { errorDiv.style.display = 'none'; }, 5000); } // API call function - Updated to use current language async function callAPI(prompt) { const apiKey = document.getElementById('apiKey').value.trim(); if (!apiKey) { throw new Error('Please enter your OpenAI API key'); } const payload = { model: "gpt-4o-mini", messages: [{ role: "user", content: prompt }], max_tokens: 3500, temperature: 0.3 }; const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${apiKey}` }, body: JSON.stringify(payload) }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error?.message || "API request failed"); } const data = await response.json(); return data.choices[0].message.content; } // Build impact analysis prompt - Updated to use current language dynamically function buildImpactPrompt() { const languageName = languageNames[currentLanguage] || 'English'; const idea = document.getElementById('ideaInput').value.trim(); return `Based on the following idea, project, or initiative: --------------------- ${idea} --------------------- **Important: Generate the entire response in ${languageName}. All content, headings, explanations, and recommendations must be written in ${languageName}.** Please provide a comprehensive, structured, and detailed analysis of the environmental and social impacts of this idea. The analysis should be professional, thorough, and actionable, formatted as clean text without any formatting symbols like asterisks (*) or hash signs (#). **Required Analysis Structure:** 1. **Executive Summary** - Brief overview of the idea and its primary impacts - Key findings and overall assessment - Main recommendations for improvement 2. **Environmental Impact Assessment** - **Carbon Footprint & Climate Impact** - Greenhouse gas emissions (direct and indirect) - Energy consumption and renewable energy potential - Climate change mitigation or contribution - **Resource Usage & Conservation** - Raw materials and natural resources required - Water usage and conservation opportunities - Land use and biodiversity considerations - **Waste & Pollution Analysis** - Waste generation and management - Air, water, and soil pollution potential - Circular economy and recycling opportunities - **Sustainability Metrics** - Long-term environmental viability - Ecosystem impact and restoration potential - Environmental compliance and standards 3. **Social Impact Assessment** - **Community Benefits & Engagement** - Direct benefits to local communities - Job creation and economic opportunities - Community participation and empowerment - **Social Equity & Accessibility** - Inclusivity and equal access considerations - Impact on vulnerable or marginalized groups - Affordability and accessibility barriers - **Health & Well-being** - Public health implications - Safety considerations and risk management - Quality of life improvements or concerns - **Cultural & Social Considerations** - Cultural sensitivity and preservation - Social cohesion and community building - Educational and awareness opportunities 4. **Economic Impact & Viability** - **Cost-Benefit Analysis** - Implementation costs vs. long-term benefits - Return on investment for stakeholders - Economic sustainability assessment - **Market & Economic Effects** - Market disruption or innovation potential - Economic development opportunities - Supply chain and economic ecosystem impact 5. **Ethical Considerations & Governance** - **Ethical Framework** - Fairness and justice considerations - Transparency and accountability measures - Stakeholder rights and responsibilities - **Governance & Compliance** - Regulatory compliance requirements - Governance structures and oversight - Risk management and mitigation strategies 6. **Lifecycle Assessment** - **Short-term Impacts (0-2 years)** - Immediate environmental and social effects - Implementation challenges and opportunities - **Medium-term Impacts (2-10 years)** - Scaling effects and broader adoption - Cumulative impact assessment - **Long-term Impacts (10+ years)** - Generational and legacy effects - Systemic change potential 7. **Risk Analysis & Mitigation** - **Potential Negative Impacts** - Environmental risks and unintended consequences - Social risks and community concerns - Economic and financial risks - **Mitigation Strategies** - Preventive measures and safeguards - Monitoring and evaluation systems - Adaptive management approaches 8. **Recommendations & Action Plan** - **Immediate Actions** - Priority improvements for environmental impact - Essential social safeguards and enhancements - **Strategic Improvements** - Long-term sustainability enhancements - Stakeholder engagement strategies - Innovation and optimization opportunities - **Success Metrics & Monitoring** - Key performance indicators (KPIs) - Monitoring and evaluation framework - Reporting and transparency measures 9. **Comparative Analysis** - **Alternative Approaches** - Comparison with existing solutions - Best practices and benchmarking - **Innovation Potential** - Unique value proposition - Scalability and replication potential 10. **Conclusion & Overall Assessment** - **Impact Rating** - Environmental impact score and justification - Social impact score and justification - Overall sustainability rating - **Final Recommendations** - Go/no-go recommendation with conditions - Priority areas for improvement - Next steps and implementation guidance **Output Requirements:** - Use clear, professional language without technical jargon - Provide specific, actionable recommendations - Include quantitative estimates where possible - Ensure the analysis is balanced and objective - Format as clean text without any markdown symbols - Make the content comprehensive yet accessible - Focus on practical implementation guidance **Tone:** Professional, analytical, and constructive. Provide honest assessment while offering practical solutions for improvement. Generate the complete analysis as plain text without any formatting symbols.`; } // Validation function function validateInputs() { const idea = document.getElementById('ideaInput').value.trim(); if (!idea) { document.getElementById('ideaInput').focus(); throw new Error('Please enter your idea or project description for impact analysis'); } if (idea.length < 50) { document.getElementById('ideaInput').focus(); throw new Error('Please provide at least 50 characters for meaningful impact analysis'); } } // Generate impact analysis document.getElementById('compareBtn').addEventListener('click', async function() { const button = this; const buttonText = document.getElementById('buttonText'); const spinner = document.getElementById('spinner'); const outputArea = document.getElementById('impactOutput'); try { // Validate inputs validateInputs(); // Update button state button.disabled = true; spinner.style.display = 'inline-block'; buttonText.textContent = 'Analyzing Impact...'; // Clear previous output outputArea.textContent = ''; // Build prompt and call API const prompt = buildImpactPrompt(); const result = await callAPI(prompt); // Display result outputArea.textContent = result; } catch (error) { showError(error.message); outputArea.textContent = ''; } finally { // Reset button state button.disabled = false; spinner.style.display = 'none'; buttonText.textContent = '🌱 Analyze Impact'; } }); // Keyboard shortcut for generation document.addEventListener('keydown', function(e) { if (e.ctrlKey && e.key === 'Enter') { e.preventDefault(); document.getElementById('compareBtn').click(); } }); // Initialize app when DOM is loaded document.addEventListener('DOMContentLoaded', function() { initializeApp(); }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ImpactAnalyzer Pro - Sustainability & Social Impact Assessment</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* CSS Reset and Base Styles */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CSS Custom Properties */
:root {
/* Color System - Sustainability/Impact theme */
--color-primary: #059669;
--color-primary-hover: #047857;
--color-secondary: #10b981;
--color-accent: #34d399;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* Neutral Colors - Light Mode */
--color-background: #f8fafc;
--color-surface: #ffffff;
--color-surface-elevated: #ffffff;
--color-border: #e2e8f0;
--color-border-focus: #059669;
--color-text-primary: #1e293b;
--color-text-secondary: #64748b;
--color-text-muted: #94a3b8;
/* Typography */
--font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Optimized Spacing System */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 0.75rem;
--spacing-lg: 1rem;
--spacing-xl: 1.25rem;
--spacing-2xl: 1.5rem;
--spacing-3xl: 2rem;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-normal: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
/* Layout */
--container-max-width: 1400px;
--content-max-width: 1200px;
}
/* RTL Support */
[dir="rtl"] {
text-align: right;
}
[dir="rtl"] .app-container {
direction: rtl;
}
[dir="rtl"] .api-key-compact {
left: auto;
right: var(--spacing-lg);
}
[dir="rtl"] .language-switcher {
right: auto;
left: var(--spacing-lg);
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
--color-background: #0f172a;
--color-surface: #1e293b;
--color-surface-elevated: #334155;
--color-border: #334155;
--color-text-primary: #f1f5f9;