Hugging Face's logo

Spaces:
Hma47
/
IdeaForge-BrainStorm
Running

App Files Community
Hma47 commited on
Commit
d6b41e2
·
verified ·
1 Parent(s): f0b55bd

Upload 4 files

Browse files
Files changed (4) hide show
  1. Apache License.txt +17 -0
  2. Index.html +1715 -0
  3. README.md +100 -0
  4. 📘 Teacher & Student Guide IdeaForg.txt +42 -0
Apache License.txt ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ Apache License
2
+ Version 2.0, January 2004
3
+ http://www.apache.org/licenses/
4
+
5
+ Copyright 2025 Shift Mind AI Labs
6
+
7
+ Licensed under the Apache License, Version 2.0 (the "License");
8
+ you may not use this file except in compliance with the License.
9
+ You may obtain a copy of the License at
10
+
11
+ http://www.apache.org/licenses/LICENSE-2.0
12
+
13
+ Unless required by applicable law or agreed to in writing, software
14
+ distributed under the License is distributed on an "AS IS" BASIS,
15
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
+ See the License for the specific language governing permissions and
17
+ limitations under the License.
Index.html ADDED
@@ -0,0 +1,1715 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IdeaForge Pro - Advanced Brainstorming Intelligence</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+
11
+ <style>
12
+ /* CSS Reset and Base Styles */
13
+ *, *::before, *::after {
14
+ box-sizing: border-box;
15
+ margin: 0;
16
+ padding: 0;
17
+ }
18
+
19
+ /* CSS Custom Properties */
20
+ :root {
21
+ /* Color System - Innovation/Brainstorming theme */
22
+ --color-primary: #6366f1;
23
+ --color-primary-hover: #5b21b6;
24
+ --color-secondary: #8b5cf6;
25
+ --color-accent: #06b6d4;
26
+ --color-success: #10b981;
27
+ --color-warning: #f59e0b;
28
+ --color-error: #ef4444;
29
+
30
+ /* Neutral Colors - Light Mode */
31
+ --color-background: #f8fafc;
32
+ --color-surface: #ffffff;
33
+ --color-surface-elevated: #ffffff;
34
+ --color-border: #e2e8f0;
35
+ --color-border-focus: #6366f1;
36
+ --color-text-primary: #1e293b;
37
+ --color-text-secondary: #64748b;
38
+ --color-text-muted: #94a3b8;
39
+
40
+ /* Typography */
41
+ --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
42
+
43
+ /* Optimized Spacing System */
44
+ --spacing-xs: 0.25rem;
45
+ --spacing-sm: 0.5rem;
46
+ --spacing-md: 0.75rem;
47
+ --spacing-lg: 1rem;
48
+ --spacing-xl: 1.25rem;
49
+ --spacing-2xl: 1.5rem;
50
+ --spacing-3xl: 2rem;
51
+
52
+ /* Border Radius */
53
+ --radius-sm: 0.375rem;
54
+ --radius-md: 0.5rem;
55
+ --radius-lg: 0.75rem;
56
+ --radius-xl: 1rem;
57
+
58
+ /* Shadows */
59
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
60
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
61
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
62
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
63
+
64
+ /* Transitions */
65
+ --transition-fast: 150ms ease-in-out;
66
+ --transition-normal: 250ms ease-in-out;
67
+ --transition-slow: 350ms ease-in-out;
68
+
69
+ /* Layout */
70
+ --container-max-width: 1400px;
71
+ --content-max-width: 1200px;
72
+ }
73
+
74
+ /* RTL Support */
75
+ [dir="rtl"] {
76
+ text-align: right;
77
+ }
78
+
79
+ [dir="rtl"] .app-container {
80
+ direction: rtl;
81
+ }
82
+
83
+ [dir="rtl"] .api-key-compact {
84
+ left: auto;
85
+ right: var(--spacing-lg);
86
+ }
87
+
88
+ [dir="rtl"] .language-switcher {
89
+ right: auto;
90
+ left: var(--spacing-lg);
91
+ }
92
+
93
+ /* Dark Mode Support */
94
+ @media (prefers-color-scheme: dark) {
95
+ :root {
96
+ --color-background: #0f172a;
97
+ --color-surface: #1e293b;
98
+ --color-surface-elevated: #334155;
99
+ --color-border: #334155;
100
+ --color-text-primary: #f1f5f9;
101
+ --color-text-secondary: #cbd5e1;
102
+ --color-text-muted: #94a3b8;
103
+ }
104
+ }
105
+
106
+ /* Base Styles */
107
+ html {
108
+ font-size: 16px;
109
+ line-height: 1.5;
110
+ scroll-behavior: smooth;
111
+ }
112
+
113
+ body {
114
+ font-family: var(--font-family-primary);
115
+ background: linear-gradient(135deg, var(--color-background) 0%, #e2e8f0 100%);
116
+ color: var(--color-text-primary);
117
+ line-height: 1.6;
118
+ -webkit-font-smoothing: antialiased;
119
+ -moz-osx-font-smoothing: grayscale;
120
+ min-height: 100vh;
121
+ transition: all 0.3s ease;
122
+ padding: 15px;
123
+ }
124
+
125
+ /* Progress Bar */
126
+ .progress-bar {
127
+ position: fixed;
128
+ top: 0;
129
+ left: 0;
130
+ height: 4px;
131
+ background: var(--color-primary);
132
+ transition: width 0.3s ease;
133
+ z-index: 1000;
134
+ }
135
+
136
+ /* Language Selection Landing */
137
+ .language-landing {
138
+ display: block;
139
+ max-width: 600px;
140
+ margin: 50px auto;
141
+ background: var(--color-surface);
142
+ border-radius: var(--radius-xl);
143
+ box-shadow: var(--shadow-lg);
144
+ padding: 40px;
145
+ text-align: center;
146
+ }
147
+
148
+ .language-landing h1 {
149
+ font-size: 2.5rem;
150
+ font-weight: 800;
151
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
152
+ -webkit-background-clip: text;
153
+ -webkit-text-fill-color: transparent;
154
+ background-clip: text;
155
+ margin-bottom: 15px;
156
+ }
157
+
158
+ .language-landing p {
159
+ font-size: 1.1rem;
160
+ color: var(--color-text-secondary);
161
+ margin-bottom: 30px;
162
+ }
163
+
164
+ .language-selector {
165
+ margin-bottom: 25px;
166
+ }
167
+
168
+ .language-selector label {
169
+ display: block;
170
+ margin-bottom: 10px;
171
+ font-weight: 600;
172
+ color: var(--color-text-primary);
173
+ font-size: 1.1rem;
174
+ }
175
+
176
+ .language-selector select {
177
+ width: 100%;
178
+ padding: 15px 20px;
179
+ border: 2px solid var(--color-border);
180
+ border-radius: var(--radius-lg);
181
+ font-size: 1.1rem;
182
+ font-family: inherit;
183
+ background: var(--color-surface);
184
+ transition: all 0.2s ease;
185
+ margin-bottom: 20px;
186
+ }
187
+
188
+ .language-selector select:focus {
189
+ outline: none;
190
+ border-color: var(--color-border-focus);
191
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
192
+ }
193
+
194
+ .api-key-landing {
195
+ margin-bottom: 25px;
196
+ }
197
+
198
+ .api-key-landing label {
199
+ display: block;
200
+ margin-bottom: 10px;
201
+ font-weight: 600;
202
+ color: var(--color-text-primary);
203
+ font-size: 1.1rem;
204
+ }
205
+
206
+ .api-key-landing input {
207
+ width: 100%;
208
+ padding: 15px 20px;
209
+ border: 2px solid var(--color-border);
210
+ border-radius: var(--radius-lg);
211
+ font-size: 1.1rem;
212
+ background: var(--color-surface);
213
+ transition: all 0.2s ease;
214
+ font-family: 'Courier New', monospace;
215
+ }
216
+
217
+ .api-key-landing input:focus {
218
+ outline: none;
219
+ border-color: var(--color-border-focus);
220
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
221
+ }
222
+
223
+ .start-btn {
224
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
225
+ color: white;
226
+ padding: 18px 40px;
227
+ border: none;
228
+ border-radius: var(--radius-lg);
229
+ font-size: 1.2rem;
230
+ font-weight: 700;
231
+ cursor: pointer;
232
+ transition: all 0.3s ease;
233
+ width: 100%;
234
+ }
235
+
236
+ .start-btn:hover {
237
+ transform: translateY(-2px);
238
+ box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.4);
239
+ }
240
+
241
+ .start-btn:disabled {
242
+ opacity: 0.7;
243
+ cursor: not-allowed;
244
+ transform: none;
245
+ }
246
+
247
+ /* Cache Management Section */
248
+ .cache-management {
249
+ background: rgba(99, 102, 241, 0.05);
250
+ border: 1px solid rgba(99, 102, 241, 0.1);
251
+ border-radius: var(--radius-lg);
252
+ padding: 20px;
253
+ margin-bottom: 25px;
254
+ text-align: center;
255
+ }
256
+
257
+ .cache-management h3 {
258
+ color: var(--color-primary);
259
+ margin-bottom: 15px;
260
+ font-size: 1.1rem;
261
+ font-weight: 600;
262
+ }
263
+
264
+ .cache-status-display {
265
+ background: rgba(16, 185, 129, 0.1);
266
+ border: 1px solid rgba(16, 185, 129, 0.2);
267
+ color: var(--color-success);
268
+ padding: 12px 16px;
269
+ border-radius: var(--radius-md);
270
+ margin-bottom: 15px;
271
+ font-size: 0.9rem;
272
+ font-weight: 500;
273
+ }
274
+
275
+ .cache-status-display.no-cache {
276
+ background: rgba(100, 116, 139, 0.1);
277
+ border-color: rgba(100, 116, 139, 0.2);
278
+ color: var(--color-text-secondary);
279
+ }
280
+
281
+ .clear-cache-btn {
282
+ background: linear-gradient(135deg, var(--color-warning) 0%, #f59e0b 100%);
283
+ color: white;
284
+ padding: 12px 24px;
285
+ border: none;
286
+ border-radius: var(--radius-md);
287
+ font-size: 0.9rem;
288
+ font-weight: 600;
289
+ cursor: pointer;
290
+ transition: all 0.3s ease;
291
+ }
292
+
293
+ .clear-cache-btn:hover {
294
+ transform: translateY(-1px);
295
+ box-shadow: 0 6px 12px -4px rgba(245, 158, 11, 0.4);
296
+ }
297
+
298
+ .clear-cache-btn:disabled {
299
+ opacity: 0.5;
300
+ cursor: not-allowed;
301
+ transform: none;
302
+ }
303
+
304
+ /* Cache Status Indicator */
305
+ .cache-status {
306
+ background: rgba(16, 185, 129, 0.1);
307
+ border: 1px solid rgba(16, 185, 129, 0.2);
308
+ color: var(--color-success);
309
+ padding: 8px 12px;
310
+ border-radius: var(--radius-sm);
311
+ margin-bottom: 15px;
312
+ font-size: 0.85rem;
313
+ text-align: center;
314
+ font-weight: 500;
315
+ display: none;
316
+ }
317
+
318
+ .cache-status.cached {
319
+ display: block;
320
+ }
321
+
322
+ .cache-status.translating {
323
+ background: rgba(99, 102, 241, 0.1);
324
+ border-color: rgba(99, 102, 241, 0.2);
325
+ color: var(--color-primary);
326
+ }
327
+
328
+ /* Translation Loading Overlay */
329
+ .translation-overlay {
330
+ position: fixed;
331
+ top: 0;
332
+ left: 0;
333
+ width: 100%;
334
+ height: 100%;
335
+ background: rgba(99, 102, 241, 0.9);
336
+ display: none;
337
+ justify-content: center;
338
+ align-items: center;
339
+ z-index: 10000;
340
+ color: white;
341
+ text-align: center;
342
+ }
343
+
344
+ .translation-content {
345
+ background: rgba(255, 255, 255, 0.1);
346
+ padding: 40px;
347
+ border-radius: var(--radius-xl);
348
+ backdrop-filter: blur(10px);
349
+ }
350
+
351
+ .translation-spinner {
352
+ width: 50px;
353
+ height: 50px;
354
+ border: 4px solid rgba(255, 255, 255, 0.3);
355
+ border-radius: 50%;
356
+ border-top-color: white;
357
+ animation: spin 1s ease-in-out infinite;
358
+ margin: 0 auto 20px;
359
+ }
360
+
361
+ /* Main Application (Hidden Initially) */
362
+ .main-app {
363
+ display: none;
364
+ }
365
+
366
+ /* Layout Components */
367
+ .app-container {
368
+ max-width: var(--container-max-width);
369
+ margin: 0 auto;
370
+ background: var(--color-surface);
371
+ border-radius: 16px;
372
+ box-shadow: var(--shadow-lg);
373
+ overflow: hidden;
374
+ position: relative;
375
+ }
376
+
377
+ /* Language Switcher in Main App */
378
+ .language-switcher {
379
+ position: absolute;
380
+ top: var(--spacing-lg);
381
+ right: var(--spacing-lg);
382
+ display: flex;
383
+ gap: 10px;
384
+ align-items: center;
385
+ z-index: 10;
386
+ }
387
+
388
+ .language-switch-btn {
389
+ background: rgba(99, 102, 241, 0.05);
390
+ border: 1px solid rgba(99, 102, 241, 0.1);
391
+ border-radius: var(--radius-md);
392
+ padding: 8px 12px;
393
+ font-size: 12px;
394
+ cursor: pointer;
395
+ transition: all 0.2s ease;
396
+ color: var(--color-primary);
397
+ font-weight: 500;
398
+ }
399
+
400
+ .language-switch-btn:hover {
401
+ background: rgba(99, 102, 241, 0.1);
402
+ }
403
+
404
+ .mini-clear-cache {
405
+ background: rgba(245, 158, 11, 0.1);
406
+ border: 1px solid rgba(245, 158, 11, 0.2);
407
+ color: var(--color-warning);
408
+ padding: 6px 10px;
409
+ border-radius: var(--radius-sm);
410
+ font-size: 11px;
411
+ cursor: pointer;
412
+ transition: all 0.2s ease;
413
+ font-weight: 500;
414
+ }
415
+
416
+ .mini-clear-cache:hover {
417
+ background: rgba(245, 158, 11, 0.2);
418
+ }
419
+
420
+ /* Compact API Key in Top-Left */
421
+ .api-key-compact {
422
+ position: absolute;
423
+ top: var(--spacing-lg);
424
+ left: var(--spacing-lg);
425
+ z-index: 10;
426
+ background: rgba(99, 102, 241, 0.05);
427
+ border: 1px solid rgba(99, 102, 241, 0.1);
428
+ border-radius: var(--radius-lg);
429
+ padding: var(--spacing-md) var(--spacing-lg);
430
+ transition: all var(--transition-normal);
431
+ max-width: 280px;
432
+ }
433
+
434
+ .api-key-compact:hover {
435
+ background: rgba(99, 102, 241, 0.08);
436
+ }
437
+
438
+ .api-key-compact-label {
439
+ display: block;
440
+ font-size: 0.75rem;
441
+ font-weight: 600;
442
+ color: var(--color-primary);
443
+ margin-bottom: var(--spacing-xs);
444
+ text-transform: uppercase;
445
+ letter-spacing: 0.05em;
446
+ }
447
+
448
+ .api-key-compact-input {
449
+ width: 100%;
450
+ padding: var(--spacing-sm) var(--spacing-md);
451
+ border: 1px solid var(--color-border);
452
+ border-radius: var(--radius-sm);
453
+ font-size: 0.875rem;
454
+ background: var(--color-surface);
455
+ color: var(--color-text-primary);
456
+ transition: all var(--transition-fast);
457
+ font-family: 'Courier New', monospace;
458
+ }
459
+
460
+ .api-key-compact-input:focus {
461
+ outline: none;
462
+ border-color: var(--color-border-focus);
463
+ box-shadow: 0 0 0 2px rgb(99 102 241 / 0.1);
464
+ }
465
+
466
+ .api-key-compact-input::placeholder {
467
+ color: var(--color-text-muted);
468
+ font-size: 0.75rem;
469
+ }
470
+
471
+ /* Main Content */
472
+ .main-content {
473
+ padding: 20px 30px 30px;
474
+ }
475
+
476
+ /* Header */
477
+ .header {
478
+ text-align: center;
479
+ margin-bottom: 25px;
480
+ padding-bottom: 20px;
481
+ border-bottom: 2px solid var(--color-border);
482
+ }
483
+
484
+ .header h1 {
485
+ font-size: 2.5rem;
486
+ font-weight: 800;
487
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
488
+ -webkit-background-clip: text;
489
+ -webkit-text-fill-color: transparent;
490
+ background-clip: text;
491
+ margin-bottom: 8px;
492
+ }
493
+
494
+ .header .subtitle {
495
+ font-size: 1.1rem;
496
+ color: var(--color-text-secondary);
497
+ font-weight: 500;
498
+ }
499
+
500
+ .header .description {
501
+ font-size: 1rem;
502
+ color: var(--color-text-secondary);
503
+ margin-top: 12px;
504
+ max-width: 700px;
505
+ margin-left: auto;
506
+ margin-right: auto;
507
+ }
508
+
509
+ /* Input Sections */
510
+ .input-section {
511
+ background: var(--color-surface);
512
+ border: 1px solid var(--color-border);
513
+ border-radius: 12px;
514
+ padding: 20px;
515
+ margin-bottom: 15px;
516
+ transition: all 0.3s ease;
517
+ box-shadow: var(--shadow-sm);
518
+ }
519
+
520
+ .input-section:hover {
521
+ border-color: var(--color-primary);
522
+ box-shadow: 0 8px 25px -8px rgba(99, 102, 241, 0.3);
523
+ }
524
+
525
+ .input-section h3 {
526
+ font-size: 1.1rem;
527
+ font-weight: 700;
528
+ color: var(--color-primary);
529
+ margin-bottom: 8px;
530
+ display: flex;
531
+ align-items: center;
532
+ gap: 8px;
533
+ }
534
+
535
+ .input-section .description {
536
+ font-size: 0.9rem;
537
+ color: var(--color-text-secondary);
538
+ margin-bottom: 12px;
539
+ }
540
+
541
+ /* Form Elements */
542
+ label {
543
+ display: block;
544
+ margin-bottom: 6px;
545
+ font-weight: 600;
546
+ color: var(--color-text-primary);
547
+ font-size: 0.95rem;
548
+ }
549
+
550
+ input[type="text"],
551
+ select,
552
+ textarea {
553
+ width: 100%;
554
+ padding: 12px 16px;
555
+ border: 2px solid var(--color-border);
556
+ border-radius: 8px;
557
+ font-size: 1rem;
558
+ font-family: inherit;
559
+ background: var(--color-surface);
560
+ transition: all 0.2s ease;
561
+ resize: vertical;
562
+ }
563
+
564
+ input[type="text"]:focus,
565
+ select:focus,
566
+ textarea:focus {
567
+ outline: none;
568
+ border-color: var(--color-primary);
569
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
570
+ }
571
+
572
+ select {
573
+ cursor: pointer;
574
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
575
+ background-position: right 12px center;
576
+ background-repeat: no-repeat;
577
+ background-size: 16px;
578
+ padding-right: 40px;
579
+ appearance: none;
580
+ }
581
+
582
+ textarea {
583
+ min-height: 100px;
584
+ font-family: inherit;
585
+ }
586
+
587
+ /* Generate Button */
588
+ .generate-btn {
589
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
590
+ color: white;
591
+ padding: 16px 32px;
592
+ border: none;
593
+ border-radius: 12px;
594
+ font-size: 1.1rem;
595
+ font-weight: 700;
596
+ cursor: pointer;
597
+ transition: all 0.3s ease;
598
+ display: block;
599
+ margin: 25px auto;
600
+ min-width: 200px;
601
+ position: relative;
602
+ overflow: hidden;
603
+ }
604
+
605
+ .generate-btn:hover {
606
+ transform: translateY(-2px);
607
+ box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.4);
608
+ }
609
+
610
+ .generate-btn:active {
611
+ transform: translateY(0);
612
+ }
613
+
614
+ .generate-btn:disabled {
615
+ opacity: 0.7;
616
+ cursor: not-allowed;
617
+ transform: none;
618
+ }
619
+
620
+ /* Loading Spinner */
621
+ .spinner {
622
+ display: none;
623
+ width: 20px;
624
+ height: 20px;
625
+ border: 2px solid rgba(255, 255, 255, 0.3);
626
+ border-radius: 50%;
627
+ border-top-color: white;
628
+ animation: spin 1s ease-in-out infinite;
629
+ margin-right: 8px;
630
+ }
631
+
632
+ @keyframes spin {
633
+ to { transform: rotate(360deg); }
634
+ }
635
+
636
+ /* Output Section */
637
+ .output-section {
638
+ margin-top: 30px;
639
+ }
640
+
641
+ .output-section h2 {
642
+ font-size: 1.5rem;
643
+ font-weight: 700;
644
+ color: var(--color-primary);
645
+ margin-bottom: 15px;
646
+ display: flex;
647
+ align-items: center;
648
+ gap: 8px;
649
+ }
650
+
651
+ .output-area {
652
+ background: var(--color-surface);
653
+ border: 2px solid var(--color-border);
654
+ border-radius: 12px;
655
+ padding: 20px;
656
+ min-height: 200px;
657
+ font-family: 'Inter', sans-serif;
658
+ font-size: 1rem;
659
+ line-height: 1.7;
660
+ white-space: pre-wrap;
661
+ word-wrap: break-word;
662
+ transition: all 0.3s ease;
663
+ position: relative;
664
+ }
665
+
666
+ .output-area:focus {
667
+ outline: none;
668
+ border-color: var(--color-primary);
669
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
670
+ }
671
+
672
+ .output-area:empty::before {
673
+ content: "Your comprehensive brainstorming analysis will appear here...";
674
+ color: var(--color-text-secondary);
675
+ font-style: italic;
676
+ }
677
+
678
+ /* Error Messages */
679
+ .error-message {
680
+ background: rgba(239, 68, 68, 0.1);
681
+ border: 1px solid rgba(239, 68, 68, 0.2);
682
+ color: var(--color-error);
683
+ padding: 12px 16px;
684
+ border-radius: 8px;
685
+ margin: 10px 0;
686
+ font-size: 0.9rem;
687
+ display: none;
688
+ }
689
+
690
+ /* Footer */
691
+ .footer {
692
+ text-align: center;
693
+ padding: 20px;
694
+ background: rgba(99, 102, 241, 0.05);
695
+ border-top: 1px solid var(--color-border);
696
+ color: var(--color-text-secondary);
697
+ font-size: 0.9rem;
698
+ }
699
+
700
+ /* Hidden sections */
701
+ .hidden {
702
+ display: none !important;
703
+ }
704
+
705
+ /* Responsive Design */
706
+ @media (max-width: 768px) {
707
+ body {
708
+ padding: 10px;
709
+ }
710
+
711
+ .language-landing {
712
+ margin: 20px auto;
713
+ padding: 30px 20px;
714
+ }
715
+
716
+ .api-key-compact {
717
+ position: static;
718
+ margin-bottom: var(--spacing-xl);
719
+ max-width: none;
720
+ }
721
+
722
+ .language-switcher {
723
+ position: relative;
724
+ top: auto;
725
+ right: auto;
726
+ margin-bottom: var(--spacing-xl);
727
+ justify-content: center;
728
+ }
729
+
730
+ .main-content {
731
+ padding: 15px 20px 20px;
732
+ }
733
+
734
+ .header h1 {
735
+ font-size: 2rem;
736
+ }
737
+
738
+ .input-section {
739
+ padding: 15px;
740
+ }
741
+
742
+ .generate-btn {
743
+ width: 100%;
744
+ margin: 20px 0;
745
+ }
746
+ }
747
+
748
+ @media (max-width: 480px) {
749
+ .language-landing h1 {
750
+ font-size: 2rem;
751
+ }
752
+
753
+ .header h1 {
754
+ font-size: 1.8rem;
755
+ }
756
+
757
+ .input-section {
758
+ padding: 12px;
759
+ }
760
+ }
761
+
762
+ /* Accessibility */
763
+ .sr-only {
764
+ position: absolute;
765
+ width: 1px;
766
+ height: 1px;
767
+ padding: 0;
768
+ margin: -1px;
769
+ overflow: hidden;
770
+ clip: rect(0, 0, 0, 0);
771
+ white-space: nowrap;
772
+ border: 0;
773
+ }
774
+
775
+ /* Focus styles for keyboard navigation */
776
+ .generate-btn:focus,
777
+ .api-key-compact-input:focus,
778
+ input[type="text"]:focus,
779
+ textarea:focus {
780
+ outline: 2px solid var(--color-primary);
781
+ outline-offset: 2px;
782
+ }
783
+
784
+ /* Reduced motion support */
785
+ @media (prefers-reduced-motion: reduce) {
786
+ *,
787
+ *::before,
788
+ *::after {
789
+ animation-duration: 0.01ms !important;
790
+ animation-iteration-count: 1 !important;
791
+ transition-duration: 0.01ms !important;
792
+ scroll-behavior: auto !important;
793
+ }
794
+ }
795
+ </style>
796
+ </head>
797
+
798
+ <body>
799
+ <!-- Progress Bar -->
800
+ <div class="progress-bar" id="progressBar"></div>
801
+
802
+ <!-- Translation Loading Overlay -->
803
+ <div class="translation-overlay" id="translationOverlay">
804
+ <div class="translation-content">
805
+ <div class="translation-spinner"></div>
806
+ <h2 id="translationTitle">Translating Interface...</h2>
807
+ <p id="translationMessage">Please wait while we translate the interface to your selected language.</p>
808
+ </div>
809
+ </div>
810
+
811
+ <!-- Language Selection Landing Page -->
812
+ <div class="language-landing" id="languageLanding">
813
+ <h1 data-translate="app_title">IdeaForge Pro</h1>
814
+ <p data-translate="welcome_message">Welcome! Please select your preferred language and enter your API key to get started with advanced brainstorming intelligence and idea generation.</p>
815
+
816
+ <!-- Cache Status Indicator -->
817
+ <div class="cache-status" id="cacheStatus">
818
+ 💾 Translations cached - instant loading!
819
+ </div>
820
+
821
+ <!-- Cache Management Section -->
822
+ <div class="cache-management" id="cacheManagement">
823
+ <h3 data-translate="cache_management_title">🗂️ Translation Cache Management</h3>
824
+ <div class="cache-status-display" id="cacheStatusDisplay">
825
+ <span data-translate="cache_status_checking">Checking cache status...</span>
826
+ </div>
827
+ <button class="clear-cache-btn" id="clearCacheBtn" data-translate="clear_cache_button">
828
+ 🗑️ Clear All Cached Translations
829
+ </button>
830
+ </div>
831
+
832
+ <div class="language-selector">
833
+ <label for="languageSelect" data-translate="select_language">🌐 Select Language</label>
834
+ <select id="languageSelect">
835
+ <option value="en">🇺🇸 English</option>
836
+ <option value="es">🇪🇸 Español (Spanish)</option>
837
+ <option value="fr">🇫🇷 Français (French)</option>
838
+ <option value="de">🇩🇪 Deutsch (German)</option>
839
+ <option value="zh">🇨🇳 中文 (Chinese)</option>
840
+ <option value="ja">🇯🇵 日本語 (Japanese)</option>
841
+ <option value="ko">🇰🇷 한국어 (Korean)</option>
842
+ <option value="pt">🇵🇹 Português (Portuguese)</option>
843
+ <option value="it">🇮🇹 Italiano (Italian)</option>
844
+ <option value="ar">🇸🇦 العربية (Arabic)</option>
845
+ <option value="ru">🇷🇺 Русский (Russian)</option>
846
+ <option value="hi">🇮🇳 हिन्दी (Hindi)</option>
847
+ <option value="bn">🇧🇩 বাংলা (Bengali)</option>
848
+ <option value="ur">🇵🇰 اردو (Urdu)</option>
849
+ <option value="tr">🇹🇷 Türkçe (Turkish)</option>
850
+ <option value="pl">🇵🇱 Polski (Polish)</option>
851
+ <option value="nl">🇳🇱 Nederlands (Dutch)</option>
852
+ <option value="sv">🇸🇪 Svenska (Swedish)</option>
853
+ <option value="da">🇩🇰 Dansk (Danish)</option>
854
+ <option value="no">🇳🇴 Norsk (Norwegian)</option>
855
+ <option value="fi">🇫🇮 Suomi (Finnish)</option>
856
+ <option value="is">🇮🇸 Íslenska (Icelandic)</option>
857
+ <option value="cs">🇨🇿 Čeština (Czech)</option>
858
+ <option value="sk">🇸🇰 Slovenčina (Slovak)</option>
859
+ <option value="hu">🇭🇺 Magyar (Hungarian)</option>
860
+ <option value="ro">🇷🇴 Română (Romanian)</option>
861
+ <option value="bg">🇧🇬 Български (Bulgarian)</option>
862
+ <option value="hr">🇭🇷 Hrvatski (Croatian)</option>
863
+ <option value="sr">🇷🇸 Српски (Serbian)</option>
864
+ <option value="sl">🇸🇮 Slovenščina (Slovenian)</option>
865
+ <option value="mk">🇲🇰 Македонски (Macedonian)</option>
866
+ <option value="sq">🇦🇱 Shqip (Albanian)</option>
867
+ <option value="lv">🇱🇻 Latviešu (Latvian)</option>
868
+ <option value="lt">🇱🇹 Lietuvių (Lithuanian)</option>
869
+ <option value="et">🇪🇪 Eesti (Estonian)</option>
870
+ <option value="mt">🇲🇹 Malti (Maltese)</option>
871
+ <option value="ga">🇮🇪 Gaeilge (Irish)</option>
872
+ <option value="cy">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cymraeg (Welsh)</option>
873
+ <option value="eu">🏴󠁥󠁳󠁰󠁶󠁿 Euskera (Basque)</option>
874
+ <option value="ca">🏴󠁥󠁳󠁣󠁴󠁿 Català (Catalan)</option>
875
+ <option value="gl">🏴󠁥󠁳󠁧󠁡󠁿 Galego (Galician)</option>
876
+ <option value="el">🇬🇷 Ελληνικά (Greek)</option>
877
+ <option value="he">🇮🇱 עברית (Hebrew)</option>
878
+ <option value="fa">🇮🇷 فارسی (Persian)</option>
879
+ <option value="ps">🇦🇫 پښتو (Pashto)</option>
880
+ <option value="ku">🏴󠁩󠁱󠁫󠁲󠁿 کوردی (Kurdish)</option>
881
+ <option value="az">🇦🇿 Azərbaycan (Azerbaijani)</option>
882
+ <option value="kk">🇰🇿 Қазақша (Kazakh)</option>
883
+ <option value="ky">🇰🇬 Кыргызча (Kyrgyz)</option>
884
+ <option value="uz">🇺🇿 O'zbek (Uzbek)</option>
885
+ <option value="tk">🇹🇲 Türkmen (Turkmen)</option>
886
+ <option value="tg">🇹🇯 Тоҷикӣ (Tajik)</option>
887
+ <option value="mn">🇲🇳 Монгол (Mongolian)</option>
888
+ <option value="ka">🇬🇪 ქართული (Georgian)</option>
889
+ <option value="hy">🇦🇲 Հայերեն (Armenian)</option>
890
+ <option value="th">🇹🇭 ไทย (Thai)</option>
891
+ <option value="vi">🇻🇳 Tiếng Việt (Vietnamese)</option>
892
+ <option value="lo">🇱🇦 ລາວ (Lao)</option>
893
+ <option value="km">🇰🇭 ខ្មែរ (Khmer)</option>
894
+ <option value="my">🇲🇲 မြန်မာ (Myanmar)</option>
895
+ <option value="si">🇱🇰 සිංහල (Sinhala)</option>
896
+ <option value="ta">🇱🇰 தமிழ் (Tamil)</option>
897
+ <option value="te">🇮🇳 తెలుగు (Telugu)</option>
898
+ <option value="kn">🇮🇳 ಕನ್ನಡ (Kannada)</option>
899
+ <option value="ml">🇮🇳 മലയാളം (Malayalam)</option>
900
+ <option value="gu">🇮🇳 ગુજરાતી (Gujarati)</option>
901
+ <option value="pa">🇮🇳 ਪੰਜਾਬੀ (Punjabi)</option>
902
+ <option value="or">🇮🇳 ଓଡ଼ିଆ (Odia)</option>
903
+ <option value="as">🇮🇳 অসমীয়া (Assamese)</option>
904
+ <option value="ne">🇳🇵 नेपाली (Nepali)</option>
905
+ <option value="dz">🇧🇹 རྫོང་ཁ (Dzongkha)</option>
906
+ <option value="bo">🏔️ བོད་ཡིག (Tibetan)</option>
907
+ <option value="id">🇮🇩 Bahasa Indonesia</option>
908
+ <option value="ms">🇲🇾 Bahasa Melayu (Malay)</option>
909
+ <option value="tl">🇵🇭 Filipino (Tagalog)</option>
910
+ <option value="ceb">🇵🇭 Cebuano</option>
911
+ <option value="haw">🏝️ ʻŌlelo Hawaiʻi (Hawaiian)</option>
912
+ <option value="mi">🇳🇿 Te Reo Māori (Maori)</option>
913
+ <option value="sm">🇼🇸 Gagana Samoa (Samoan)</option>
914
+ <option value="to">🇹🇴 Lea Fakatonga (Tongan)</option>
915
+ <option value="fj">🇫🇯 Na Vosa Vakaviti (Fijian)</option>
916
+ <option value="mg">🇲🇬 Malagasy</option>
917
+ <option value="sw">🇰🇪 Kiswahili (Swahili)</option>
918
+ <option value="zu">🇿🇦 isiZulu (Zulu)</option>
919
+ <option value="xh">🇿🇦 isiXhosa (Xhosa)</option>
920
+ <option value="af">🇿🇦 Afrikaans</option>
921
+ <option value="st">🇱🇸 Sesotho (Southern Sotho)</option>
922
+ <option value="tn">🇧🇼 Setswana (Tswana)</option>
923
+ <option value="ss">🇸🇿 siSwati (Swati)</option>
924
+ <option value="ve">🇿🇦 Tshivenḓa (Venda)</option>
925
+ <option value="ts">🇿🇦 Xitsonga (Tsonga)</option>
926
+ <option value="nr">🇿🇦 isiNdebele (Southern Ndebele)</option>
927
+ <option value="am">🇪🇹 አማርኛ (Amharic)</option>
928
+ <option value="ti">🇪🇷 ትግርኛ (Tigrinya)</option>
929
+ <option value="om">🇪🇹 Afaan Oromoo (Oromo)</option>
930
+ <option value="so">🇸🇴 Soomaali (Somali)</option>
931
+ <option value="ha">🇳🇬 Hausa</option>
932
+ <option value="yo">🇳🇬 Yorùbá (Yoruba)</option>
933
+ <option value="ig">🇳🇬 Igbo</option>
934
+ <option value="ff">🇸🇳 Fulfulde (Fulani)</option>
935
+ <option value="wo">🇸🇳 Wolof</option>
936
+ <option value="bm">🇲🇱 Bamanankan (Bambara)</option>
937
+ <option value="rn">🇧🇮 Kirundi (Rundi)</option>
938
+ <option value="rw">🇷🇼 Kinyarwanda (Rwanda)</option>
939
+ <option value="lg">🇺🇬 Luganda</option>
940
+ <option value="ny">🇲🇼 Chichewa (Nyanja)</option>
941
+ <option value="sn">🇿🇼 chiShona (Shona)</option>
942
+ <option value="nd">🇿🇼 isiNdebele (Northern Ndebele)</option>
943
+ </select>
944
+ </div>
945
+
946
+ <div class="api-key-landing">
947
+ <label for="apiKeyLanding" data-translate="api_key_label">🔑 OpenAI API Key</label>
948
+ <input type="password" id="apiKeyLanding" placeholder="Enter your OpenAI API key" data-translate-placeholder="api_key_placeholder">
949
+ </div>
950
+
951
+ <button class="start-btn" id="startBtn" data-translate="start_button">🚀 Start Brainstorming Intelligence</button>
952
+ </div>
953
+
954
+ <!-- Main Application -->
955
+ <div class="main-app" id="mainApp">
956
+ <div class="app-container">
957
+ <!-- Language Switcher -->
958
+ <div class="language-switcher" id="languageSwitcher">
959
+ <div class="language-switch-btn" onclick="showLanguageLanding()">
960
+ <span data-translate="change_language">🌐 Change Language</span>
961
+ </div>
962
+ <div class="mini-clear-cache" onclick="clearAllTranslationCache()" title="Clear translation cache">
963
+ <span data-translate="clear_cache_mini">🗑️ Clear Cache</span>
964
+ </div>
965
+ </div>
966
+
967
+ <!-- Compact API Key in Top-Left -->
968
+ <div class="api-key-compact">
969
+ <label for="apiKey" class="api-key-compact-label" data-translate="api_key_short">API Key</label>
970
+ <input
971
+ type="password"
972
+ id="apiKey"
973
+ class="api-key-compact-input"
974
+ data-translate-placeholder="api_key_placeholder"
975
+ autocomplete="off"
976
+ >
977
+ </div>
978
+
979
+ <div class="main-content">
980
+ <!-- Header -->
981
+ <div class="header">
982
+ <h1 data-translate="app_title">IdeaForge Pro</h1>
983
+ <p class="subtitle" data-translate="app_subtitle">Advanced Brainstorming Intelligence Platform</p>
984
+ <p class="description" data-translate="app_description">Transform your creative thinking with AI-powered brainstorming, idea organization, and strategic analysis tools</p>
985
+ </div>
986
+
987
+ <!-- Error Message -->
988
+ <div class="error-message" id="errorMessage"></div>
989
+
990
+ <!-- Brainstorming Input Sections -->
991
+ <div class="input-section">
992
+ <h3 data-translate="problem_definition_title">🎯 Problem Definition</h3>
993
+ <p class="description" data-translate="problem_definition_desc">Clearly describe the problem or challenge you're facing</p>
994
+ <textarea id="problemDefinition" rows="4" data-translate-placeholder="problem_definition_placeholder" required></textarea>
995
+ </div>
996
+
997
+ <div class="input-section">
998
+ <h3 data-translate="idea_generation_title">⏱️ Idea Generation Timeline</h3>
999
+ <p class="description" data-translate="idea_generation_desc">Set a time limit for the ideation phase</p>
1000
+ <input type="text" id="ideaGeneration" data-translate-placeholder="idea_generation_placeholder" required>
1001
+ </div>
1002
+
1003
+ <div class="input-section">
1004
+ <h3 data-translate="additional_ideas_title">💡 Additional Ideas</h3>
1005
+ <p class="description" data-translate="additional_ideas_desc">Add any additional ideas that come to mind</p>
1006
+ <textarea id="ideaCapture" rows="4" data-translate-placeholder="additional_ideas_placeholder" required></textarea>
1007
+ </div>
1008
+
1009
+ <div class="input-section">
1010
+ <h3 data-translate="idea_organization_title">📊 Idea Organization Strategy</h3>
1011
+ <p class="description" data-translate="idea_organization_desc">Share your initial thoughts on grouping or categorizing ideas</p>
1012
+ <textarea id="ideaOrganization" rows="4" data-translate-placeholder="idea_organization_placeholder" required></textarea>
1013
+ </div>
1014
+
1015
+ <div class="input-section">
1016
+ <h3 data-translate="critical_analysis_title">🔍 Critical Analysis Focus</h3>
1017
+ <p class="description" data-translate="critical_analysis_desc">Select one idea to analyze critically and deeply</p>
1018
+ <textarea id="criticalAnalysis" rows="2" data-translate-placeholder="critical_analysis_placeholder" required></textarea>
1019
+ </div>
1020
+
1021
+ <div class="input-section">
1022
+ <h3 data-translate="idea_refinement_title">🔧 Idea Refinement Input</h3>
1023
+ <p class="description" data-translate="idea_refinement_desc">Provide responses to help refine and improve ideas</p>
1024
+ <textarea id="ideaRefinement" rows="4" data-translate-placeholder="idea_refinement_placeholder" required></textarea>
1025
+ </div>
1026
+
1027
+ <div class="input-section">
1028
+ <h3 data-translate="prioritization_title">⭐ Prioritization Criteria</h3>
1029
+ <p class="description" data-translate="prioritization_desc">Define criteria for evaluating and ranking ideas</p>
1030
+ <textarea id="prioritization" rows="3" data-translate-placeholder="prioritization_placeholder" required></textarea>
1031
+ </div>
1032
+
1033
+ <!-- Generate Button -->
1034
+ <button class="generate-btn" id="generateBrainstormingBtn">
1035
+ <span class="spinner" id="spinner"></span>
1036
+ <span id="buttonText" data-translate="generate_button">🚀 Generate Comprehensive Brainstorming Analysis</span>
1037
+ </button>
1038
+
1039
+ <!-- Output Section -->
1040
+ <div class="output-section">
1041
+ <h2 data-translate="output_title">📋 Brainstorming Analysis Results</h2>
1042
+ <div class="output-area" id="brainstormingOutput" contenteditable="true"></div>
1043
+ </div>
1044
+ </div>
1045
+
1046
+ <!-- Footer -->
1047
+ <div class="footer">
1048
+ Created by Shift Mind AI Labs
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+
1053
+ <script>
1054
+ // RTL languages list
1055
+ const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'ku'];
1056
+
1057
+ // Current language and API key
1058
+ let currentLanguage = 'en';
1059
+ let currentApiKey = '';
1060
+
1061
+ // Language names mapping
1062
+ const languageNames = {
1063
+ en: 'English', es: 'Spanish', fr: 'French', de: 'German', zh: 'Chinese',
1064
+ ja: 'Japanese', ko: 'Korean', pt: 'Portuguese', it: 'Italian', ar: 'Arabic',
1065
+ ru: 'Russian', hi: 'Hindi', bn: 'Bengali', ur: 'Urdu', tr: 'Turkish',
1066
+ pl: 'Polish', nl: 'Dutch', sv: 'Swedish', da: 'Danish', no: 'Norwegian',
1067
+ fi: 'Finnish', is: 'Icelandic', cs: 'Czech', sk: 'Slovak', hu: 'Hungarian',
1068
+ ro: 'Romanian', bg: 'Bulgarian', hr: 'Croatian', sr: 'Serbian', sl: 'Slovenian',
1069
+ mk: 'Macedonian', sq: 'Albanian', lv: 'Latvian', lt: 'Lithuanian', et: 'Estonian',
1070
+ mt: 'Maltese', ga: 'Irish', cy: 'Welsh', eu: 'Basque', ca: 'Catalan',
1071
+ gl: 'Galician', el: 'Greek', he: 'Hebrew', fa: 'Persian', ps: 'Pashto',
1072
+ ku: 'Kurdish', az: 'Azerbaijani', kk: 'Kazakh', ky: 'Kyrgyz', uz: 'Uzbek',
1073
+ tk: 'Turkmen', tg: 'Tajik', mn: 'Mongolian', ka: 'Georgian', hy: 'Armenian',
1074
+ th: 'Thai', vi: 'Vietnamese', lo: 'Lao', km: 'Khmer', my: 'Myanmar',
1075
+ si: 'Sinhala', ta: 'Tamil', te: 'Telugu', kn: 'Kannada', ml: 'Malayalam',
1076
+ gu: 'Gujarati', pa: 'Punjabi', or: 'Odia', as: 'Assamese', ne: 'Nepali',
1077
+ dz: 'Dzongkha', bo: 'Tibetan', id: 'Indonesian', ms: 'Malay', tl: 'Filipino',
1078
+ ceb: 'Cebuano', haw: 'Hawaiian', mi: 'Maori', sm: 'Samoan', to: 'Tongan',
1079
+ fj: 'Fijian', mg: 'Malagasy', sw: 'Swahili', zu: 'Zulu', xh: 'Xhosa',
1080
+ af: 'Afrikaans', st: 'Southern Sotho', tn: 'Tswana', ss: 'Swati', ve: 'Venda',
1081
+ ts: 'Tsonga', nr: 'Southern Ndebele', am: 'Amharic', ti: 'Tigrinya', om: 'Oromo',
1082
+ so: 'Somali', ha: 'Hausa', yo: 'Yoruba', ig: 'Igbo', ff: 'Fulani',
1083
+ wo: 'Wolof', bm: 'Bambara', rn: 'Rundi', rw: 'Rwanda', lg: 'Luganda',
1084
+ ny: 'Chichewa', sn: 'Shona', nd: 'Northern Ndebele'
1085
+ };
1086
+
1087
+ // Translation cache management
1088
+ const CACHE_PREFIX = 'ideaforge_translations_';
1089
+ const CACHE_VERSION = '1.0';
1090
+
1091
+ // Check if translations are cached for a language
1092
+ function isLanguageCached(language) {
1093
+ const cacheKey = CACHE_PREFIX + language;
1094
+ const cached = localStorage.getItem(cacheKey);
1095
+ return cached !== null;
1096
+ }
1097
+
1098
+ // Save translations to cache
1099
+ function saveTranslationsToCache(language, translations) {
1100
+ const cacheKey = CACHE_PREFIX + language;
1101
+ const cacheData = {
1102
+ version: CACHE_VERSION,
1103
+ timestamp: Date.now(),
1104
+ translations: translations
1105
+ };
1106
+ localStorage.setItem(cacheKey, JSON.stringify(cacheData));
1107
+ console.log(`Translations cached for ${language}`);
1108
+ }
1109
+
1110
+ // Load translations from cache
1111
+ function loadTranslationsFromCache(language) {
1112
+ const cacheKey = CACHE_PREFIX + language;
1113
+ const cached = localStorage.getItem(cacheKey);
1114
+
1115
+ if (cached) {
1116
+ try {
1117
+ const cacheData = JSON.parse(cached);
1118
+ if (cacheData.version === CACHE_VERSION) {
1119
+ console.log(`Translations loaded from cache for ${language}`);
1120
+ return cacheData.translations;
1121
+ }
1122
+ } catch (error) {
1123
+ console.error('Error parsing cached translations:', error);
1124
+ }
1125
+ }
1126
+ return null;
1127
+ }
1128
+
1129
+ // Get all cached languages
1130
+ function getCachedLanguages() {
1131
+ const cachedLanguages = [];
1132
+ for (let i = 0; i < localStorage.length; i++) {
1133
+ const key = localStorage.key(i);
1134
+ if (key && key.startsWith(CACHE_PREFIX)) {
1135
+ const language = key.replace(CACHE_PREFIX, '');
1136
+ cachedLanguages.push(language);
1137
+ }
1138
+ }
1139
+ return cachedLanguages;
1140
+ }
1141
+
1142
+ // Clear all translation cache
1143
+ function clearAllTranslationCache() {
1144
+ const cachedLanguages = getCachedLanguages();
1145
+
1146
+ if (cachedLanguages.length === 0) {
1147
+ alert('No cached translations to clear.');
1148
+ return;
1149
+ }
1150
+
1151
+ const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', ');
1152
+ 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.`;
1153
+
1154
+ if (confirm(confirmMessage)) {
1155
+ // Clear all translation caches
1156
+ cachedLanguages.forEach(language => {
1157
+ const cacheKey = CACHE_PREFIX + language;
1158
+ localStorage.removeItem(cacheKey);
1159
+ });
1160
+
1161
+ // Update cache status
1162
+ updateCacheStatus(currentLanguage);
1163
+ updateCacheStatusDisplay();
1164
+
1165
+ alert(`Cache cleared successfully!\n\n${cachedLanguages.length} language(s) removed from cache.`);
1166
+
1167
+ // Ask if user wants to reload current language translations
1168
+ if (currentLanguage !== 'en' && cachedLanguages.includes(currentLanguage)) {
1169
+ if (confirm('Would you like to reload the current language translations?')) {
1170
+ applyLanguage(currentLanguage);
1171
+ }
1172
+ }
1173
+ }
1174
+ }
1175
+
1176
+ // Update cache status indicator
1177
+ function updateCacheStatus(language) {
1178
+ const cacheStatus = document.getElementById('cacheStatus');
1179
+ const isCached = isLanguageCached(language);
1180
+
1181
+ if (language === 'en') {
1182
+ cacheStatus.classList.remove('cached', 'translating');
1183
+ return;
1184
+ }
1185
+
1186
+ if (isCached) {
1187
+ cacheStatus.textContent = '💾 Translations cached - instant loading!';
1188
+ cacheStatus.classList.add('cached');
1189
+ cacheStatus.classList.remove('translating');
1190
+ } else {
1191
+ cacheStatus.textContent = '🔄 First time translation - will be cached for future use';
1192
+ cacheStatus.classList.add('translating');
1193
+ cacheStatus.classList.remove('cached');
1194
+ }
1195
+ }
1196
+
1197
+ // Update cache status display in management section
1198
+ function updateCacheStatusDisplay() {
1199
+ const cacheStatusDisplay = document.getElementById('cacheStatusDisplay');
1200
+ const clearCacheBtn = document.getElementById('clearCacheBtn');
1201
+ const cachedLanguages = getCachedLanguages();
1202
+
1203
+ if (cachedLanguages.length === 0) {
1204
+ cacheStatusDisplay.textContent = '📭 No cached translations';
1205
+ cacheStatusDisplay.className = 'cache-status-display no-cache';
1206
+ clearCacheBtn.disabled = true;
1207
+ } else {
1208
+ const languageList = cachedLanguages.map(lang => languageNames[lang] || lang).join(', ');
1209
+ cacheStatusDisplay.textContent = `💾 ${cachedLanguages.length} language(s) cached: ${languageList}`;
1210
+ cacheStatusDisplay.className = 'cache-status-display';
1211
+ clearCacheBtn.disabled = false;
1212
+ }
1213
+ }
1214
+
1215
+ // Initialize the application
1216
+ function initializeApp() {
1217
+ // Load saved language and API key
1218
+ const savedLanguage = localStorage.getItem('ideaforge_language') || 'en';
1219
+ const savedApiKey = localStorage.getItem('ideaforge_api_key') || '';
1220
+
1221
+ currentLanguage = savedLanguage;
1222
+ currentApiKey = savedApiKey;
1223
+
1224
+ // Set language selector
1225
+ document.getElementById('languageSelect').value = currentLanguage;
1226
+ document.getElementById('apiKeyLanding').value = currentApiKey;
1227
+
1228
+ // Apply direction for current language
1229
+ applyDirection(currentLanguage);
1230
+
1231
+ // Update cache status
1232
+ updateCacheStatus(currentLanguage);
1233
+ updateCacheStatusDisplay();
1234
+
1235
+ // Show appropriate screen
1236
+ if (currentApiKey && currentLanguage) {
1237
+ showMainApp();
1238
+ } else {
1239
+ showLanguageLanding();
1240
+ }
1241
+ }
1242
+
1243
+ // Apply language direction
1244
+ function applyDirection(language) {
1245
+ currentLanguage = language;
1246
+
1247
+ // Set document language and direction
1248
+ document.documentElement.lang = language;
1249
+ document.documentElement.dir = rtlLanguages.includes(language) ? 'rtl' : 'ltr';
1250
+
1251
+ // Save language preference
1252
+ localStorage.setItem('ideaforge_language', language);
1253
+
1254
+ // Update cache status
1255
+ updateCacheStatus(language);
1256
+ }
1257
+
1258
+ // API call function for translation
1259
+ async function translateText(text, targetLanguage) {
1260
+ if (!currentApiKey) {
1261
+ throw new Error('API key is required for translation');
1262
+ }
1263
+
1264
+ const languageName = languageNames[targetLanguage] || 'English';
1265
+
1266
+ const prompt = `Translate the following text to ${languageName}. Provide ONLY the exact translation without any explanations, additional information, or formatting:
1267
+
1268
+ "${text}"`;
1269
+
1270
+ const payload = {
1271
+ model: "gpt-4o-mini",
1272
+ messages: [{ role: "user", content: prompt }],
1273
+ max_tokens: 500,
1274
+ temperature: 0.1
1275
+ };
1276
+
1277
+ const response = await fetch("https://api.openai.com/v1/chat/completions", {
1278
+ method: "POST",
1279
+ headers: {
1280
+ "Content-Type": "application/json",
1281
+ "Authorization": `Bearer ${currentApiKey}`
1282
+ },
1283
+ body: JSON.stringify(payload)
1284
+ });
1285
+
1286
+ if (!response.ok) {
1287
+ const errorData = await response.json();
1288
+ throw new Error(errorData.error?.message || "Translation API request failed");
1289
+ }
1290
+
1291
+ const data = await response.json();
1292
+ return data.choices[0].message.content.trim();
1293
+ }
1294
+
1295
+ // Apply cached translations to UI
1296
+ function applyCachedTranslations(translations) {
1297
+ // Apply text translations
1298
+ Object.keys(translations.texts).forEach(originalText => {
1299
+ const translation = translations.texts[originalText];
1300
+ const elements = document.querySelectorAll(`[data-translate]`);
1301
+
1302
+ elements.forEach(element => {
1303
+ const originalElementText = element.getAttribute('data-original-text') || element.textContent;
1304
+ if (originalElementText === originalText) {
1305
+ element.textContent = translation;
1306
+ }
1307
+ });
1308
+ });
1309
+
1310
+ // Apply placeholder translations
1311
+ Object.keys(translations.placeholders).forEach(originalPlaceholder => {
1312
+ const translation = translations.placeholders[originalPlaceholder];
1313
+ const elements = document.querySelectorAll(`[data-translate-placeholder]`);
1314
+
1315
+ elements.forEach(element => {
1316
+ const originalElementPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder;
1317
+ if (originalElementPlaceholder === originalPlaceholder) {
1318
+ element.placeholder = translation;
1319
+ }
1320
+ });
1321
+ });
1322
+ }
1323
+
1324
+ // Translate all UI elements
1325
+ async function translateInterface(targetLanguage) {
1326
+ if (targetLanguage === 'en') {
1327
+ // No translation needed for English
1328
+ return;
1329
+ }
1330
+
1331
+ // Check if translations are cached
1332
+ const cachedTranslations = loadTranslationsFromCache(targetLanguage);
1333
+ if (cachedTranslations) {
1334
+ // Use cached translations
1335
+ console.log('Using cached translations for', targetLanguage);
1336
+ applyCachedTranslations(cachedTranslations);
1337
+ return;
1338
+ }
1339
+
1340
+ // Need to translate via API
1341
+ showTranslationOverlay();
1342
+
1343
+ try {
1344
+ // Get all elements with data-translate attribute
1345
+ const elements = document.querySelectorAll('[data-translate]');
1346
+ const placeholderElements = document.querySelectorAll('[data-translate-placeholder]');
1347
+
1348
+ // Collect all texts to translate
1349
+ const textsToTranslate = [];
1350
+ const placeholdersToTranslate = [];
1351
+ const elementMap = new Map();
1352
+
1353
+ elements.forEach(element => {
1354
+ const originalText = element.getAttribute('data-original-text') || element.textContent;
1355
+ if (!element.getAttribute('data-original-text')) {
1356
+ element.setAttribute('data-original-text', originalText);
1357
+ }
1358
+ textsToTranslate.push(originalText);
1359
+ elementMap.set(originalText, element);
1360
+ });
1361
+
1362
+ placeholderElements.forEach(element => {
1363
+ const originalPlaceholder = element.getAttribute('data-original-placeholder') || element.placeholder;
1364
+ if (!element.getAttribute('data-original-placeholder')) {
1365
+ element.setAttribute('data-original-placeholder', originalPlaceholder);
1366
+ }
1367
+ placeholdersToTranslate.push(originalPlaceholder);
1368
+ elementMap.set(originalPlaceholder, element);
1369
+ });
1370
+
1371
+ // Prepare cache structure
1372
+ const translationsCache = {
1373
+ texts: {},
1374
+ placeholders: {}
1375
+ };
1376
+
1377
+ // Translate texts in batches
1378
+ const batchSize = 10;
1379
+ const allTexts = [...textsToTranslate, ...placeholdersToTranslate];
1380
+
1381
+ for (let i = 0; i < allTexts.length; i += batchSize) {
1382
+ const batch = allTexts.slice(i, i + batchSize);
1383
+
1384
+ // Update progress
1385
+ updateTranslationProgress(i, allTexts.length);
1386
+
1387
+ // Translate batch
1388
+ const translations = await Promise.all(
1389
+ batch.map(text => translateText(text, targetLanguage))
1390
+ );
1391
+
1392
+ // Apply translations and cache them
1393
+ batch.forEach((originalText, index) => {
1394
+ const element = elementMap.get(originalText);
1395
+ const translation = translations[index];
1396
+
1397
+ if (element.hasAttribute('data-translate')) {
1398
+ element.textContent = translation;
1399
+ translationsCache.texts[originalText] = translation;
1400
+ } else if (element.hasAttribute('data-translate-placeholder')) {
1401
+ element.placeholder = translation;
1402
+ translationsCache.placeholders[originalText] = translation;
1403
+ }
1404
+ });
1405
+ }
1406
+
1407
+ // Save translations to cache
1408
+ saveTranslationsToCache(targetLanguage, translationsCache);
1409
+
1410
+ // Update cache status
1411
+ updateCacheStatus(targetLanguage);
1412
+ updateCacheStatusDisplay();
1413
+
1414
+ } catch (error) {
1415
+ console.error('Translation error:', error);
1416
+ showError('Translation failed: ' + error.message);
1417
+ } finally {
1418
+ hideTranslationOverlay();
1419
+ }
1420
+ }
1421
+
1422
+ // Show translation overlay
1423
+ function showTranslationOverlay() {
1424
+ document.getElementById('translationOverlay').style.display = 'flex';
1425
+ }
1426
+
1427
+ // Hide translation overlay
1428
+ function hideTranslationOverlay() {
1429
+ document.getElementById('translationOverlay').style.display = 'none';
1430
+ }
1431
+
1432
+ // Update translation progress
1433
+ function updateTranslationProgress(current, total) {
1434
+ const percentage = Math.round((current / total) * 100);
1435
+ document.getElementById('translationMessage').textContent =
1436
+ `Translating interface... ${percentage}% complete (will be cached for future use)`;
1437
+ }
1438
+
1439
+ // Apply language with API translation or cache
1440
+ async function applyLanguage(language) {
1441
+ applyDirection(language);
1442
+
1443
+ if (language !== 'en') {
1444
+ await translateInterface(language);
1445
+ }
1446
+ }
1447
+
1448
+ // Show language landing page
1449
+ function showLanguageLanding() {
1450
+ document.getElementById('languageLanding').style.display = 'block';
1451
+ document.getElementById('mainApp').style.display = 'none';
1452
+ }
1453
+
1454
+ // Show main application
1455
+ function showMainApp() {
1456
+ document.getElementById('languageLanding').style.display = 'none';
1457
+ document.getElementById('mainApp').style.display = 'block';
1458
+
1459
+ // Set API key in main app
1460
+ document.getElementById('apiKey').value = currentApiKey;
1461
+ }
1462
+
1463
+ // Start button click handler
1464
+ document.getElementById('startBtn').addEventListener('click', async function() {
1465
+ const selectedLanguage = document.getElementById('languageSelect').value;
1466
+ const apiKey = document.getElementById('apiKeyLanding').value.trim();
1467
+
1468
+ if (!apiKey) {
1469
+ alert('Please enter your OpenAI API key');
1470
+ return;
1471
+ }
1472
+
1473
+ currentLanguage = selectedLanguage;
1474
+ currentApiKey = apiKey;
1475
+
1476
+ // Save API key
1477
+ localStorage.setItem('ideaforge_api_key', apiKey);
1478
+
1479
+ // Apply language with translation (cached or API)
1480
+ await applyLanguage(selectedLanguage);
1481
+
1482
+ // Show main app
1483
+ showMainApp();
1484
+ });
1485
+
1486
+ // Language selector change handler
1487
+ document.getElementById('languageSelect').addEventListener('change', async function() {
1488
+ const selectedLanguage = this.value;
1489
+ updateCacheStatus(selectedLanguage);
1490
+
1491
+ if (currentApiKey) {
1492
+ await applyLanguage(selectedLanguage);
1493
+ } else {
1494
+ applyDirection(selectedLanguage);
1495
+ }
1496
+ });
1497
+
1498
+ // Clear cache button handler
1499
+ document.getElementById('clearCacheBtn').addEventListener('click', clearAllTranslationCache);
1500
+
1501
+ // API key sync between landing and main app
1502
+ document.getElementById('apiKeyLanding').addEventListener('input', function() {
1503
+ currentApiKey = this.value;
1504
+ localStorage.setItem('ideaforge_api_key', this.value);
1505
+ document.getElementById('apiKey').value = this.value;
1506
+ });
1507
+
1508
+ document.getElementById('apiKey').addEventListener('input', function() {
1509
+ currentApiKey = this.value;
1510
+ localStorage.setItem('ideaforge_api_key', this.value);
1511
+ document.getElementById('apiKeyLanding').value = this.value;
1512
+ });
1513
+
1514
+ // Scroll-based progress bar
1515
+ window.addEventListener('scroll', () => {
1516
+ const { scrollTop, scrollHeight } = document.documentElement;
1517
+ const scrolled = (scrollTop / (scrollHeight - window.innerHeight)) * 100;
1518
+ document.getElementById('progressBar').style.width = `${scrolled}%`;
1519
+ });
1520
+
1521
+ // Error handling
1522
+ function showError(message) {
1523
+ const errorDiv = document.getElementById('errorMessage');
1524
+ errorDiv.textContent = message;
1525
+ errorDiv.style.display = 'block';
1526
+ setTimeout(() => {
1527
+ errorDiv.style.display = 'none';
1528
+ }, 5000);
1529
+ }
1530
+
1531
+ // API call function - Updated to use current language
1532
+ async function callAPI(prompt) {
1533
+ const apiKey = document.getElementById('apiKey').value.trim();
1534
+
1535
+ if (!apiKey) {
1536
+ throw new Error('Please enter your OpenAI API key');
1537
+ }
1538
+
1539
+ const payload = {
1540
+ model: "gpt-4o-mini",
1541
+ messages: [{ role: "user", content: prompt }],
1542
+ max_tokens: 3000,
1543
+ temperature: 0.7
1544
+ };
1545
+
1546
+ const response = await fetch("https://api.openai.com/v1/chat/completions", {
1547
+ method: "POST",
1548
+ headers: {
1549
+ "Content-Type": "application/json",
1550
+ "Authorization": `Bearer ${apiKey}`
1551
+ },
1552
+ body: JSON.stringify(payload)
1553
+ });
1554
+
1555
+ if (!response.ok) {
1556
+ const errorData = await response.json();
1557
+ throw new Error(errorData.error?.message || "API request failed");
1558
+ }
1559
+
1560
+ const data = await response.json();
1561
+ return data.choices[0].message.content;
1562
+ }
1563
+
1564
+ // Build comprehensive brainstorming prompt - Updated to use current language dynamically
1565
+ function buildBrainstormingPrompt() {
1566
+ const languageName = languageNames[currentLanguage] || 'English';
1567
+ const problemDefinition = document.getElementById('problemDefinition').value.trim();
1568
+ const ideaGeneration = document.getElementById('ideaGeneration').value.trim();
1569
+ const ideaCapture = document.getElementById('ideaCapture').value.trim();
1570
+ const ideaOrganization = document.getElementById('ideaOrganization').value.trim();
1571
+ const criticalAnalysis = document.getElementById('criticalAnalysis').value.trim();
1572
+ const ideaRefinement = document.getElementById('ideaRefinement').value.trim();
1573
+ const prioritization = document.getElementById('prioritization').value.trim();
1574
+
1575
+ return `
1576
+ You are an expert educational strategist and innovation consultant tasked with generating a comprehensive brainstorming analysis in ${languageName} based on the inputs provided below. Your final output must be organized into clear sections, each featuring detailed insights and actionable recommendations:
1577
+
1578
+ **Important: Generate the entire response in ${languageName}. All content, headings, explanations, and recommendations must be written in ${languageName}.**
1579
+
1580
+ 1. **Problem Definition & Goal Articulation**
1581
+ - Rephrase and clarify the problem statement provided by the user
1582
+ - Articulate specific, measurable goals and objectives to address it
1583
+ - Identify key stakeholders and success metrics
1584
+ User Input: ${problemDefinition}
1585
+
1586
+ 2. **Structured Idea Generation (Time-Boxed: ${ideaGeneration})**
1587
+ - Produce a rapid-fire list of 15-20 innovative ideas related to the defined problem
1588
+ - Use various brainstorming techniques (SCAMPER, Six Thinking Hats, etc.)
1589
+ - Include both conventional and unconventional approaches
1590
+ - Ensure ideas span different categories: immediate solutions, long-term strategies, and creative alternatives
1591
+
1592
+ 3. **Comprehensive Idea Capture & Compilation**
1593
+ - Compile all ideas generated (both AI-generated and user-contributed) into a cohesive, numbered list
1594
+ - Add brief descriptions for each idea to ensure clarity
1595
+ - User Additional Ideas: ${ideaCapture}
1596
+
1597
+ 4. **Strategic Idea Organization & Categorization**
1598
+ - Categorize the ideas into 3-5 logical groupings based on themes, implementation timeline, or approach
1599
+ - Create a visual representation framework (mind map structure described in text)
1600
+ - Identify patterns and connections between ideas
1601
+ - User Thoughts on Grouping: ${ideaOrganization}
1602
+
1603
+ 5. **Deep Critical Analysis & Probing Questions**
1604
+ - For the selected idea: "${criticalAnalysis}"
1605
+ - Apply the "5 Whys" technique to uncover root causes
1606
+ - Generate 8-10 probing questions covering feasibility, resources, risks, and implementation
1607
+ - Identify potential obstacles and mitigation strategies
1608
+ - Analyze strengths, weaknesses, opportunities, and threats (SWOT)
1609
+
1610
+ 6. **Idea Refinement & Enhancement**
1611
+ - Based on the user's refinement input: "${ideaRefinement}"
1612
+ - Present 3-5 refined versions of the selected idea
1613
+ - Suggest possibilities for combining related concepts
1614
+ - Propose hybrid solutions that merge multiple approaches
1615
+ - Include implementation considerations and resource requirements
1616
+
1617
+ 7. **Strategic Prioritization & Ranking**
1618
+ - Utilize the user's criteria: "${prioritization}"
1619
+ - Create a prioritization matrix ranking top 10 ideas
1620
+ - Provide detailed rationale for rankings
1621
+ - Identify quick wins vs. long-term strategic initiatives
1622
+ - Recommend the top 3 ideas for immediate development with justification
1623
+
1624
+ 8. **Comprehensive Wrap-Up & Next Steps**
1625
+ - Provide an executive summary of the brainstorming session
1626
+ - Recommend the most effective visual presentation format for outcomes
1627
+ - Suggest specific next steps for implementation
1628
+ - Include a timeline for moving forward with priority ideas
1629
+ - Propose methods for testing and validating selected concepts
1630
+
1631
+ **Formatting Requirements:**
1632
+ - Use clear headers and subheaders for each section
1633
+ - Include bullet points and numbered lists for easy scanning
1634
+ - Provide actionable recommendations throughout
1635
+ - Ensure professional tone suitable for business or educational contexts
1636
+ - Make the output comprehensive yet accessible
1637
+
1638
+ Ensure that all sections are seamlessly integrated into one final output that is clear, professional, and immediately actionable for the user.
1639
+ `;
1640
+ }
1641
+
1642
+ // Validation function
1643
+ function validateInputs() {
1644
+ const requiredFields = [
1645
+ 'problemDefinition',
1646
+ 'ideaGeneration',
1647
+ 'ideaCapture',
1648
+ 'ideaOrganization',
1649
+ 'criticalAnalysis',
1650
+ 'ideaRefinement',
1651
+ 'prioritization'
1652
+ ];
1653
+
1654
+ for (const fieldId of requiredFields) {
1655
+ const field = document.getElementById(fieldId);
1656
+ if (!field.value.trim()) {
1657
+ field.focus();
1658
+ throw new Error(`Please fill in the ${field.previousElementSibling.textContent.replace(/[🎯⏱️💡📊🔍🔧⭐]/g, '').trim()} field`);
1659
+ }
1660
+ }
1661
+ }
1662
+
1663
+ // Generate brainstorming analysis
1664
+ document.getElementById('generateBrainstormingBtn').addEventListener('click', async function() {
1665
+ const button = this;
1666
+ const buttonText = document.getElementById('buttonText');
1667
+ const spinner = document.getElementById('spinner');
1668
+ const outputArea = document.getElementById('brainstormingOutput');
1669
+
1670
+ try {
1671
+ // Validate inputs
1672
+ validateInputs();
1673
+
1674
+ // Update button state
1675
+ button.disabled = true;
1676
+ spinner.style.display = 'inline-block';
1677
+ buttonText.textContent = 'Generating Analysis...';
1678
+
1679
+ // Clear previous output
1680
+ outputArea.textContent = '';
1681
+
1682
+ // Build prompt and call API
1683
+ const prompt = buildBrainstormingPrompt();
1684
+ const result = await callAPI(prompt);
1685
+
1686
+ // Display result
1687
+ outputArea.textContent = result;
1688
+
1689
+ } catch (error) {
1690
+ showError(error.message);
1691
+ outputArea.textContent = '';
1692
+ } finally {
1693
+ // Reset button state
1694
+ button.disabled = false;
1695
+ spinner.style.display = 'none';
1696
+ buttonText.textContent = '🚀 Generate Comprehensive Brainstorming Analysis';
1697
+ }
1698
+ });
1699
+
1700
+ // Keyboard shortcut for generation
1701
+ document.addEventListener('keydown', function(e) {
1702
+ if (e.ctrlKey && e.key === 'Enter') {
1703
+ e.preventDefault();
1704
+ document.getElementById('generateBrainstormingBtn').click();
1705
+ }
1706
+ });
1707
+
1708
+ // Initialize app when DOM is loaded
1709
+ document.addEventListener('DOMContentLoaded', function() {
1710
+ initializeApp();
1711
+ });
1712
+ </script>
1713
+ </body>
1714
+ </html>
1715
+
README.md ADDED
@@ -0,0 +1,100 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: "💡 IdeaForge Pro – Advanced Brainstorming Intelligence"
3
+ emoji: "💡"
4
+ colorFrom: "green"
5
+ colorTo: "blue"
6
+ sdk: "static"
7
+ sdk_version: "0.1.0"
8
+ app_file: "Index.html"
9
+ pinned: false
10
+ ---
11
+
12
+ # 💡 IdeaForge Pro – Advanced Brainstorming Intelligence
13
+ **Developed by Shift Mind AI Labs**
14
+
15
+ IdeaForge Pro is an open-source, privacy-first platform for professional, multilingual brainstorming and idea development.
16
+ Empower creative thinking, problem-solving, and critical analysis in any classroom, project, or professional context—instantly and securely.
17
+
18
+ ---
19
+
20
+ ## 🚀 Features
21
+
22
+ - **Structured Brainstorming Workflow:**
23
+ Step-by-step prompts for problem definition, idea capture, organization, deep analysis, refinement, and prioritization.
24
+ - **AI-Enhanced Output:**
25
+ Generates comprehensive, multi-section analysis with actionable recommendations in 80+ languages.
26
+ - **Critical & Creative Thinking:**
27
+ Combines classic and advanced brainstorming, organization, and evaluation techniques.
28
+ - **Modern, Accessible UI:**
29
+ Multilingual, RTL/LTR support, color-coded cards, responsive and accessible.
30
+ - **Data Privacy:**
31
+ All content and keys **never leave your browser**—full local processing.
32
+
33
+ ---
34
+
35
+ ## 🛠 How to Use
36
+
37
+ 1. **Open the tool** in your browser (local HTML or Hugging Face Space).
38
+ 2. **Select your language** and enter your OpenAI API key (never leaves your device).
39
+ 3. **Complete each brainstorming section** (see guide for tips and samples).
40
+ 4. **Click “Generate Comprehensive Brainstorming Analysis”**.
41
+ 5. **Review, copy, and use** the output for projects, reports, lessons, or innovation sessions.
42
+
43
+ ---
44
+
45
+ ## 👩‍🏫 For Teachers
46
+
47
+ - **Class Project Launch:**
48
+ Guide student groups through problem-solving and creative ideation.
49
+ - **Critical Thinking Skills:**
50
+ Teach the full cycle of innovation from problem framing to prioritization.
51
+ - **Cross-Disciplinary Use:**
52
+ Suitable for STEM, humanities, entrepreneurship, design, and more.
53
+ - **Formative Assessment:**
54
+ Use outputs for peer review, reflection, and project portfolios.
55
+
56
+ ---
57
+
58
+ ## 👨‍🎓 For Students
59
+
60
+ - **Individual & Team Projects:**
61
+ Tackle complex challenges step by step, using structured inputs.
62
+ - **Innovation Competitions:**
63
+ Prepare comprehensive, competitive submissions with AI guidance.
64
+ - **Skill Building:**
65
+ Develop organization, analysis, and strategic evaluation skills.
66
+ - **Multilingual Learning:**
67
+ Switch UI/output to your language—ideal for global and bilingual settings.
68
+
69
+ ---
70
+
71
+ ## 🔐 Data Privacy
72
+
73
+ - Your OpenAI API key and all content **never leave your device**.
74
+ - No data is transmitted to Shift Mind AI Labs, Hugging Face, or third parties.
75
+
76
+ ---
77
+
78
+ ## 📄 License
79
+
80
+ Licensed under the [Apache License 2.0](./LICENSE).
81
+
82
+ ---
83
+
84
+ ## 🧠 About Shift Mind AI Labs
85
+
86
+ Shift Mind AI Labs creates open-source, ethical AI tools for education, innovation, and digital transformation.
87
+
88
+ 🌐 https://www.shiftmind.io
89
+ ✉️ info@shiftmind.io
90
+
91
+ ---
92
+
93
+ ## 🙌 Contributing
94
+
95
+ Feedback, ideas, and collaboration welcome!
96
+ For pilots, research, or partnerships: **info@shiftmind.io**
97
+
98
+ ---
99
+
100
+ *Ignite every learner and team with structured, ethical, and creative brainstorming—anytime, anywhere, in any language.*
📘 Teacher & Student Guide IdeaForg.txt ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ 📘 Teacher & Student Guide: IdeaForge Pro
2
+ Purpose & Classroom Impact
3
+ IdeaForge Pro supports educators and students in structured, creative, and critical brainstorming. It’s ideal for problem-solving in any subject—enabling deep thinking, collaboration, and practical project planning.
4
+
5
+ Step-by-Step Guide to Each Section
6
+ Section Explanation for Teachers & Students Sample Input
7
+ 1. Problem Definition Describe the challenge or problem you want to solve. Be clear and concise. Framing the right question is the key to effective brainstorming. “How can our school reduce plastic waste in the cafeteria?”
8
+ 2. Idea Generation Timeline Set a time limit for how long you’ll generate ideas (e.g., 10 minutes, 1 lesson, 2 days). This helps focus energy and creativity. “15 minutes” or “One class period”
9
+ 3. Additional Ideas List any ideas you already have before starting the full brainstorm. There are no bad ideas—add everything that comes to mind. “Ban single-use bottles, start a recycling contest, give rewards for reusable lunchboxes.”
10
+ 4. Idea Organization Strategy How will you group, categorize, or organize your ideas? (e.g., by type, timeline, feasibility, theme, etc.) “I will group ideas into quick wins, long-term projects, and awareness campaigns.”
11
+ 5. Critical Analysis Focus Pick one idea from your list that you want to examine deeply—think about why it might work or fail, what’s needed, and possible impacts. “Ban single-use plastic bottles in the school.”
12
+ 6. Idea Refinement Input How would you improve, combine, or reframe your chosen idea? Note feedback, challenges, or ways to make it stronger. “Maybe allow exceptions for medical needs; combine the ban with education sessions.”
13
+ 7. Prioritization Criteria List the standards you’ll use to pick the best ideas. Consider cost, impact, ease, time, resources, and alignment with your goals. “Low cost, high impact, easy to implement, community support.”
14
+
15
+ Using the Tool: Tips for Success
16
+ Brainstorm in Groups: Assign roles—scribe, leader, timekeeper, presenter—for collaborative work.
17
+
18
+ Think Broadly: Encourage both realistic and “wild” ideas—creativity leads to innovation.
19
+
20
+ Critical Thinking: Don’t just list ideas—analyze, question, and refine them.
21
+
22
+ Use Output as a Project Plan: The generated report is ready to share or build on for project-based learning.
23
+
24
+ Multilingual Option: Use the language selector for ELLs or global teams.
25
+
26
+ Classroom & Project Applications
27
+ STEM Challenges: Tackle real-world engineering or science problems.
28
+
29
+ Entrepreneurship: Develop business or social innovation pitches.
30
+
31
+ Literature/Social Studies: Analyze historical or fictional problems—generate solutions as the protagonist.
32
+
33
+ School Improvement: Plan school-wide initiatives with broad student input.
34
+
35
+ Troubleshooting & Support
36
+ If output is generic, give more detail in your input for each section.
37
+
38
+ API errors? Double-check your OpenAI key and internet connection.
39
+
40
+ For technical help: info@shiftmind.io | www.shiftmind.io
41
+
42
+ IdeaForge Pro transforms classrooms and teams into innovation labs—turning ideas into impact through structure, creativity, and deep analysis.