Hugging Face's logo

Spaces:
Nuzwa
/
_Course_Master_Pro_
Running

App Files Community
Nuzwa commited on
Commit
d9cc661
·
verified ·
1 Parent(s): 3ca2cf4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +305 -140
index.html CHANGED
@@ -3,162 +3,261 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>CourseMaster Prompt Builder</title>
7
-
8
  <style>
9
- body {
10
- font-family: Arial, sans-serif;
11
- margin: 0;
12
- padding: 20px;
13
- background: #f7f9fc;
14
- color: #333;
 
 
 
15
  }
16
- h1 {
17
- text-align: center;
18
- margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
19
  }
20
- .app {
21
- max-width: 900px;
22
- margin: auto;
23
- background: #fff;
24
- padding: 20px;
25
- border-radius: 12px;
26
- box-shadow: 0 4px 10px rgba(0,0,0,0.08);
 
 
 
27
  }
28
- .label {
29
- font-weight: bold;
30
- margin-bottom: 5px;
31
- display: block;
 
 
 
 
32
  }
33
- .input, select, textarea {
34
- width: 100%;
35
- padding: 8px;
36
- margin-top: 6px;
37
- margin-bottom: 16px;
38
- border: 1px solid #ccc;
39
- border-radius: 6px;
 
 
 
40
  }
41
- .group {
42
- margin-bottom: 20px;
 
 
 
43
  }
44
- .toggles {
45
- display: flex;
46
- flex-wrap: wrap;
47
- gap: 8px;
 
 
48
  }
49
- .toggle {
50
- padding: 6px 12px;
51
- border: 1px solid #666;
52
- border-radius: 6px;
53
- background: #f2f2f2;
54
- cursor: pointer;
 
 
 
55
  }
56
- .toggle[aria-pressed="true"] {
57
- background: #4f46e5;
58
- color: #fff;
59
- border-color: #4f46e5;
60
  }
61
- .textarea {
62
- width: 100%;
63
- resize: vertical;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  }
65
- .btn {
66
- background: #4f46e5;
67
- color: #fff;
68
- border: none;
69
- padding: 10px 18px;
70
- border-radius: 6px;
71
- cursor: pointer;
72
- margin-top: 10px;
73
  }
74
- .btn.hidden {
75
- display: none;
 
 
 
76
  }
77
- .btn:hover {
78
- background: #3730a3;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  }
80
- .out {
81
- background: #f0f0f0;
82
- padding: 12px;
83
- border-radius: 8px;
84
- min-height: 80px;
85
- white-space: pre-wrap;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  }
87
- .cta-row {
88
- margin-top: 10px;
89
- display: flex;
90
- gap: 10px;
 
 
91
  }
92
  </style>
93
  </head>
94
  <body>
95
  <main class="app" role="application" aria-labelledby="title">
96
  <h1 id="title">CourseMaster Prompt Builder</h1>
 
97
 
 
98
  <section class="top-input">
99
- <label for="topic">Topic</label>
100
- <input id="topic" class="input" type="text" placeholder="e.g., Personal Branding on Social Media" />
101
  </section>
102
 
 
103
  <section class="options" aria-label="Options">
104
  <div class="group" role="group" aria-label="Audience">
105
  <span class="label">Audience</span>
106
  <div class="toggles" data-name="audience">
107
- <button class="toggle" aria-pressed="false">Students</button>
108
- <button class="toggle" aria-pressed="false">Freelancers</button>
109
- <button class="toggle" aria-pressed="false">Professionals</button>
110
  </div>
111
  </div>
112
 
113
  <div class="group" role="group" aria-label="Level">
114
  <span class="label">Level</span>
115
  <div class="toggles" data-name="level">
116
- <button class="toggle" aria-pressed="false">Beginner</button>
117
- <button class="toggle" aria-pressed="false">Intermediate</button>
118
- <button class="toggle" aria-pressed="false">Advanced</button>
119
  </div>
120
  </div>
121
 
122
  <div class="group" role="group" aria-label="Delivery">
123
  <span class="label">Delivery</span>
124
  <div class="toggles" data-name="delivery">
125
- <button class="toggle" aria-pressed="false">Live</button>
126
- <button class="toggle" aria-pressed="false">Recorded</button>
127
- <button class="toggle" aria-pressed="false">Hybrid</button>
128
- <button class="toggle" aria-pressed="false">Offline</button>
129
  </div>
130
  </div>
131
 
132
  <div class="group" role="group" aria-label="Language">
133
  <span class="label">Language</span>
134
  <div class="toggles" data-name="language">
135
- <button class="toggle" aria-pressed="false">Auto</button>
136
- <button class="toggle" aria-pressed="false">Urdu</button>
137
- <button class="toggle" aria-pressed="false">English</button>
138
- <button class="toggle" aria-pressed="false">Mixed</button>
139
  </div>
140
  </div>
141
 
142
  <div class="group" role="group" aria-label="Tone">
143
  <span class="label">Tone</span>
144
  <div class="toggles" data-name="tone">
145
- <button class="toggle" aria-pressed="false">Professional</button>
146
- <button class="toggle" aria-pressed="false">Motivational</button>
147
  </div>
148
  </div>
149
 
150
  <div class="group" role="group" aria-label="Depth">
151
  <span class="label">Depth</span>
152
  <div class="toggles" data-name="depth">
153
- <button class="toggle" aria-pressed="false">Basic</button>
154
- <button class="toggle" aria-pressed="false">Standard</button>
155
- <button class="toggle" aria-pressed="false">Comprehensive</button>
156
  </div>
157
  </div>
158
 
159
- <div class="group cols-3">
160
  <label for="duration" class="label">Duration</label>
161
  <input id="duration" class="input" type="text" placeholder="e.g., 8 weeks" />
 
162
  <label for="localization" class="label">Localization</label>
163
  <select id="localization" class="input">
164
  <option>Auto</option>
@@ -166,6 +265,7 @@
166
  <option>GCC</option>
167
  <option>Global</option>
168
  </select>
 
169
  <label for="export" class="label">Export</label>
170
  <select id="export" class="input">
171
  <option>PDF</option>
@@ -177,89 +277,154 @@
177
  <div class="group" role="group" aria-label="Add-ons">
178
  <span class="label">Add-ons</span>
179
  <div class="toggles multi" data-name="addons">
180
- <button class="toggle" aria-pressed="false" data-key="video">Include Video Support</button>
181
- <button class="toggle" aria-pressed="false" data-key="bloom">Bloom Mapping</button>
182
- <button class="toggle" aria-pressed="false" data-key="assess">Assessments</button>
183
  </div>
184
  </div>
185
  </section>
186
 
 
187
  <section class="notes">
188
- <label for="notes">Notes</label>
189
- <textarea id="notes" class="textarea" rows="6" placeholder="Special requirements, target platform, constraints, tools, etc."></textarea>
190
- <button id="build" class="btn start" type="button">Build Prompt</button>
191
  </section>
192
 
 
193
  <section class="response">
194
- <div class="label">Prompt Preview</div>
195
  <pre id="out" class="out" role="status" aria-live="polite"></pre>
196
  <div class="cta-row">
197
- <button id="copy" class="btn cta hidden" type="button">Copy Prompt</button>
198
- <button id="copyOpen" class="btn cta hidden" type="button">Copy &amp; Paste Now</button>
199
  </div>
200
- <div class="hint" id="hint" aria-live="polite"></div>
201
  </section>
 
 
202
  </main>
203
 
204
  <script>
205
- // Handle toggle buttons
206
- document.querySelectorAll(".toggles").forEach(group => {
 
 
 
 
 
 
207
  group.addEventListener("click", e => {
208
- if (e.target.classList.contains("toggle")) {
209
- const multi = group.classList.contains("multi");
210
- if (!multi) {
211
- group.querySelectorAll(".toggle").forEach(btn => btn.setAttribute("aria-pressed", "false"));
212
- }
213
- e.target.setAttribute("aria-pressed", e.target.getAttribute("aria-pressed") === "true" ? "false" : "true");
 
 
 
 
 
 
 
 
214
  }
215
  });
216
  });
217
 
218
- // Build prompt
219
- document.getElementById("build").addEventListener("click", () => {
220
- const topic = document.getElementById("topic").value.trim();
221
- const duration = document.getElementById("duration").value.trim();
222
- const notes = document.getElementById("notes").value.trim();
223
 
224
- let prompt = `Create a course plan for "${topic}".`;
225
 
226
- document.querySelectorAll(".toggles").forEach(group => {
227
  const name = group.dataset.name;
228
- const selected = [...group.querySelectorAll(".toggle[aria-pressed='true']")].map(b => b.textContent);
229
- if (selected.length > 0) {
230
- prompt += `\n- ${name}: ${selected.join(", ")}`;
231
- }
232
  });
233
 
234
  if (duration) prompt += `\n- Duration: ${duration}`;
235
- const loc = document.getElementById("localization").value;
236
  if (loc && loc !== "Auto") prompt += `\n- Localization: ${loc}`;
237
- const exp = document.getElementById("export").value;
238
  if (exp) prompt += `\n- Export Format: ${exp}`;
239
  if (notes) prompt += `\n- Notes: ${notes}`;
240
 
241
- document.getElementById("out").textContent = prompt;
242
- document.getElementById("copy").classList.remove("hidden");
243
- document.getElementById("copyOpen").classList.remove("hidden");
244
- document.getElementById("hint").textContent = "Prompt ready!";
245
- });
246
 
247
- // Copy prompt
248
- document.getElementById("copy").addEventListener("click", () => {
249
- const prompt = document.getElementById("out").textContent;
250
- navigator.clipboard.writeText(prompt).then(() => {
251
- document.getElementById("hint").textContent = "Copied!";
 
 
252
  });
253
  });
 
 
 
254
 
255
- // Copy & Open in Custom GPT
256
- document.getElementById("copyOpen").addEventListener("click", () => {
257
- const prompt = document.getElementById("out").textContent;
258
- const gptURL = "https://chatgpt.com/g/g-6864ab7c8c188191b8641483747e63c2-coursemaster-pro";
259
- navigator.clipboard.writeText(prompt).then(() => {
260
- window.open(`${gptURL}?q=${encodeURIComponent(prompt)}`, "_blank");
261
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
262
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
263
  </script>
264
  </body>
265
  </html>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>coachproai • CourseMaster Prompt Builder</title>
 
7
  <style>
8
+ :root{
9
+ --primary-color-start:#4F46E5; /* indigo */
10
+ --primary-color-end:#8B5CF6; /* violet */
11
+ --background-color:#f8f9fc;
12
+ --container-bg:#ffffff;
13
+ --text-color:#1f2937; /* gray-800 */
14
+ --label-color:#374151; /* gray-700 */
15
+ --border-color:#d1d5db; /* gray-300 */
16
+ --shadow-color:rgba(0,0,0,0.08);
17
  }
18
+
19
+ *{box-sizing:border-box}
20
+ html,body{height:100%}
21
+ body{
22
+ margin:0;
23
+ font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
24
+ background:var(--background-color);
25
+ color:var(--text-color);
26
+ padding:20px;
27
+ display:flex;
28
+ align-items:flex-start;
29
+ justify-content:center;
30
  }
31
+
32
+ .app{
33
+ width:100%;
34
+ max-width:450px;
35
+ background:var(--container-bg);
36
+ padding:30px;
37
+ border-radius:15px;
38
+ box-shadow:0 4px 15px var(--shadow-color);
39
+ position:relative;
40
+ border:1px solid var(--border-color);
41
  }
42
+ .app::before{
43
+ content:"";
44
+ position:absolute;
45
+ inset:-2px -2px auto -2px;
46
+ height:6px;
47
+ border-top-left-radius:16px;
48
+ border-top-right-radius:16px;
49
+ background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
50
  }
51
+
52
+ h1{
53
+ margin:0 0 16px 0;
54
+ font-size:2em; /* ~2em */
55
+ background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
56
+ -webkit-background-clip:text;
57
+ background-clip:text;
58
+ color:transparent;
59
+ font-weight:800;
60
+ text-align:center;
61
  }
62
+ .subtitle{
63
+ text-align:center;
64
+ color:#6b7280;
65
+ font-size:.9rem;
66
+ margin-bottom:18px;
67
  }
68
+
69
+ .label{
70
+ color:var(--label-color);
71
+ font-weight:600;
72
+ margin-bottom:6px;
73
+ display:block;
74
  }
75
+
76
+ .input, select, textarea{
77
+ width:100%;
78
+ padding:12px 12px;
79
+ border:1px solid var(--border-color);
80
+ border-radius:10px;
81
+ background:#fff;
82
+ color:var(--text-color);
83
+ transition:box-shadow .15s ease, border-color .15s ease;
84
  }
85
+ .input:focus, select:focus, textarea:focus{
86
+ outline:none;
87
+ border-color:var(--primary-color-start);
88
+ box-shadow:0 0 0 4px rgba(79,70,229,.15);
89
  }
90
+
91
+ .group{margin-bottom:18px}
92
+
93
+ .toggles{
94
+ display:flex;
95
+ flex-wrap:wrap;
96
+ gap:8px;
97
+ }
98
+ .toggle{
99
+ border:1px solid var(--border-color);
100
+ background:#f9fafb;
101
+ color:var(--text-color);
102
+ padding:8px 12px;
103
+ border-radius:10px;
104
+ cursor:pointer;
105
+ transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
106
+ font-weight:600;
107
  }
108
+ .toggle:focus{
109
+ outline:none;
110
+ box-shadow:0 0 0 4px rgba(79,70,229,.15);
 
 
 
 
 
111
  }
112
+ .toggle[aria-pressed="true"],
113
+ .toggle.selected{
114
+ color:#fff;
115
+ border-color:transparent;
116
+ background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
117
  }
118
+ .toggle:active{transform:translateY(1px)}
119
+
120
+ .textarea{resize:vertical}
121
+
122
+ .btn{
123
+ display:inline-flex;
124
+ align-items:center;
125
+ justify-content:center;
126
+ gap:8px;
127
+ font-weight:700; /* bold 1.1–1.5em */
128
+ font-size:1.05rem;
129
+ border:none;
130
+ color:#fff;
131
+ padding:12px 16px;
132
+ border-radius:12px;
133
+ background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end));
134
+ cursor:pointer;
135
+ transition:filter .15s ease, transform .05s ease, box-shadow .15s ease;
136
  }
137
+ .btn:hover{filter:brightness(0.98)}
138
+ .btn:active{transform:translateY(1px)}
139
+ .btn:focus{
140
+ outline:none;
141
+ box-shadow:0 0 0 4px rgba(79,70,229,.15);
142
+ }
143
+ .btn.secondary{
144
+ background:#f3f4f6;
145
+ color:#111827;
146
+ border:1px solid var(--border-color);
147
+ }
148
+
149
+ .btn.hidden{display:none}
150
+
151
+ .out{
152
+ background:#f9fafb;
153
+ border:1px dashed var(--border-color);
154
+ padding:14px;
155
+ border-radius:12px;
156
+ min-height:110px;
157
+ white-space:pre-wrap;
158
+ }
159
+
160
+ .cta-row{
161
+ margin-top:12px;
162
+ display:flex;
163
+ gap:10px;
164
+ flex-wrap:wrap;
165
+ }
166
+
167
+ .hint{
168
+ margin-top:8px;
169
+ color:#6b7280;
170
+ font-size:.9rem;
171
+ min-height:1.2em;
172
+ }
173
+
174
+ .footer{
175
+ margin-top:18px;
176
+ text-align:center;
177
+ color:#9ca3af;
178
+ font-size:.8rem;
179
  }
180
+
181
+ @media (max-width:420px){
182
+ body{padding:14px}
183
+ .app{padding:22px}
184
+ .btn{width:100%}
185
+ .cta-row{flex-direction:column}
186
  }
187
  </style>
188
  </head>
189
  <body>
190
  <main class="app" role="application" aria-labelledby="title">
191
  <h1 id="title">CourseMaster Prompt Builder</h1>
192
+ <p class="subtitle" aria-hidden="true">Powered by <strong>coachproai</strong> • Build, copy, and paste into your GPT</p>
193
 
194
+ <!-- Short input -->
195
  <section class="top-input">
196
+ <label class="label" for="topic">Topic</label>
197
+ <input id="topic" class="input" type="text" placeholder="e.g., Personal Branding on Social Media" autocomplete="off" />
198
  </section>
199
 
200
+ <!-- Options -->
201
  <section class="options" aria-label="Options">
202
  <div class="group" role="group" aria-label="Audience">
203
  <span class="label">Audience</span>
204
  <div class="toggles" data-name="audience">
205
+ <button class="toggle" type="button" aria-pressed="false">Students</button>
206
+ <button class="toggle" type="button" aria-pressed="false">Freelancers</button>
207
+ <button class="toggle" type="button" aria-pressed="false">Professionals</button>
208
  </div>
209
  </div>
210
 
211
  <div class="group" role="group" aria-label="Level">
212
  <span class="label">Level</span>
213
  <div class="toggles" data-name="level">
214
+ <button class="toggle" type="button" aria-pressed="false">Beginner</button>
215
+ <button class="toggle" type="button" aria-pressed="false">Intermediate</button>
216
+ <button class="toggle" type="button" aria-pressed="false">Advanced</button>
217
  </div>
218
  </div>
219
 
220
  <div class="group" role="group" aria-label="Delivery">
221
  <span class="label">Delivery</span>
222
  <div class="toggles" data-name="delivery">
223
+ <button class="toggle" type="button" aria-pressed="false">Live</button>
224
+ <button class="toggle" type="button" aria-pressed="false">Recorded</button>
225
+ <button class="toggle" type="button" aria-pressed="false">Hybrid</button>
226
+ <button class="toggle" type="button" aria-pressed="false">Offline</button>
227
  </div>
228
  </div>
229
 
230
  <div class="group" role="group" aria-label="Language">
231
  <span class="label">Language</span>
232
  <div class="toggles" data-name="language">
233
+ <button class="toggle" type="button" aria-pressed="false">Auto</button>
234
+ <button class="toggle" type="button" aria-pressed="false">Urdu</button>
235
+ <button class="toggle" type="button" aria-pressed="false">English</button>
236
+ <button class="toggle" type="button" aria-pressed="false">Mixed</button>
237
  </div>
238
  </div>
239
 
240
  <div class="group" role="group" aria-label="Tone">
241
  <span class="label">Tone</span>
242
  <div class="toggles" data-name="tone">
243
+ <button class="toggle" type="button" aria-pressed="false">Professional</button>
244
+ <button class="toggle" type="button" aria-pressed="false">Motivational</button>
245
  </div>
246
  </div>
247
 
248
  <div class="group" role="group" aria-label="Depth">
249
  <span class="label">Depth</span>
250
  <div class="toggles" data-name="depth">
251
+ <button class="toggle" type="button" aria-pressed="false">Basic</button>
252
+ <button class="toggle" type="button" aria-pressed="false">Standard</button>
253
+ <button class="toggle" type="button" aria-pressed="false">Comprehensive</button>
254
  </div>
255
  </div>
256
 
257
+ <div class="group cols-3" aria-label="Meta">
258
  <label for="duration" class="label">Duration</label>
259
  <input id="duration" class="input" type="text" placeholder="e.g., 8 weeks" />
260
+
261
  <label for="localization" class="label">Localization</label>
262
  <select id="localization" class="input">
263
  <option>Auto</option>
 
265
  <option>GCC</option>
266
  <option>Global</option>
267
  </select>
268
+
269
  <label for="export" class="label">Export</label>
270
  <select id="export" class="input">
271
  <option>PDF</option>
 
277
  <div class="group" role="group" aria-label="Add-ons">
278
  <span class="label">Add-ons</span>
279
  <div class="toggles multi" data-name="addons">
280
+ <button class="toggle" type="button" aria-pressed="false" data-key="video">Include Video Support</button>
281
+ <button class="toggle" type="button" aria-pressed="false" data-key="bloom">Bloom Mapping</button>
282
+ <button class="toggle" type="button" aria-pressed="false" data-key="assess">Assessments</button>
283
  </div>
284
  </div>
285
  </section>
286
 
287
+ <!-- Long textarea + primary action -->
288
  <section class="notes">
289
+ <label class="label" for="notes">Notes</label>
290
+ <textarea id="notes" class="textarea" rows="6" placeholder="Special requirements, target platform, constraints, tools, etc. (Tip: Press Ctrl/Cmd+Enter to Build)"></textarea>
291
+ <button id="build" class="btn start" type="button" aria-label="Build Prompt">Build Prompt</button>
292
  </section>
293
 
294
+ <!-- Response / Preview -->
295
  <section class="response">
296
+ <span class="label">Prompt Preview</span>
297
  <pre id="out" class="out" role="status" aria-live="polite"></pre>
298
  <div class="cta-row">
299
+ <button id="copy" class="btn cta hidden" type="button" aria-label="Copy Prompt">Generate Prompt</button>
300
+ <button id="copyOpen" class="btn cta hidden" type="button" aria-label="Copy and Open in GPT">Copy &amp; Paste Now</button>
301
  </div>
302
+ <div class="hint" id="hint" aria-live="polite" aria-atomic="true"></div>
303
  </section>
304
+
305
+ <div class="footer" aria-hidden="true">© coachproai</div>
306
  </main>
307
 
308
  <script>
309
+ // ===== PurpleUI Prompt Builder (English-only code) =====
310
+ const GPT_URL = 'https://chat.openai.com/g/g-6864ab7c8c188191b8641483747e63c2-coursemaster-pro';
311
+
312
+ const $ = (sel, root=document) => root.querySelector(sel);
313
+ const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));
314
+
315
+ // Toggle buttons (single vs multi)
316
+ $$(".toggles").forEach(group => {
317
  group.addEventListener("click", e => {
318
+ if (!e.target.classList.contains("toggle")) return;
319
+ const btn = e.target;
320
+ const isMulti = group.classList.contains("multi");
321
+ if (!isMulti){
322
+ $$(".toggle", group).forEach(b => b.setAttribute("aria-pressed","false"));
323
+ }
324
+ btn.setAttribute("aria-pressed", btn.getAttribute("aria-pressed")==="true" ? "false" : "true");
325
+ });
326
+ // Keyboard support: Space/Enter toggles
327
+ group.addEventListener("keydown", e => {
328
+ if (!e.target.classList.contains("toggle")) return;
329
+ if (e.key === " " || e.key === "Enter"){
330
+ e.preventDefault();
331
+ e.target.click();
332
  }
333
  });
334
  });
335
 
336
+ // Assemble prompt text
337
+ function buildPrompt(){
338
+ const topic = $("#topic").value.trim();
339
+ const duration = $("#duration").value.trim();
340
+ const notes = $("#notes").value.trim();
341
 
342
+ let prompt = `Create a course plan for "${topic || "<<<Add Topic>>>" }".`;
343
 
344
+ $$(".toggles").forEach(group => {
345
  const name = group.dataset.name;
346
+ const selected = $$(".toggle[aria-pressed='true']", group).map(b => b.textContent.trim());
347
+ if (selected.length > 0) prompt += `\n- ${name}: ${selected.join(", ")}`;
 
 
348
  });
349
 
350
  if (duration) prompt += `\n- Duration: ${duration}`;
351
+ const loc = $("#localization").value;
352
  if (loc && loc !== "Auto") prompt += `\n- Localization: ${loc}`;
353
+ const exp = $("#export").value;
354
  if (exp) prompt += `\n- Export Format: ${exp}`;
355
  if (notes) prompt += `\n- Notes: ${notes}`;
356
 
357
+ $("#out").textContent = prompt;
358
+ $("#copy").classList.remove("hidden");
359
+ $("#copyOpen").classList.remove("hidden");
360
+ $("#hint").textContent = "Prompt ready!";
361
+ }
362
 
363
+ // Primary action
364
+ $("#build").addEventListener("click", buildPrompt);
365
+
366
+ // Enter-to-start: when in short inputs, Enter triggers build; in textarea use Ctrl/Cmd+Enter
367
+ ["#topic","#duration"].forEach(sel=>{
368
+ $(sel).addEventListener("keydown", e=>{
369
+ if(e.key==="Enter"){ e.preventDefault(); buildPrompt(); }
370
  });
371
  });
372
+ $("#notes").addEventListener("keydown", e=>{
373
+ if ((e.ctrlKey || e.metaKey) && e.key === "Enter"){ e.preventDefault(); buildPrompt(); }
374
+ });
375
 
376
+ // Copy helpers with feedback + fallback
377
+ async function copyText(text){
378
+ try{
379
+ await navigator.clipboard.writeText(text);
380
+ return true;
381
+ }catch{
382
+ // Fallback
383
+ const ta=document.createElement("textarea");
384
+ ta.value=text;
385
+ document.body.appendChild(ta);
386
+ ta.select();
387
+ try{ document.execCommand("copy"); }catch{}
388
+ document.body.removeChild(ta);
389
+ return true;
390
+ }
391
+ }
392
+
393
+ // CTA: Copy Prompt (Generate Prompt)
394
+ $("#copy").addEventListener("click", async () => {
395
+ const prompt = $("#out").textContent;
396
+ if (!prompt.trim()){ $("#hint").textContent = "Nothing to copy yet."; return; }
397
+ await copyText(prompt);
398
+ $("#hint").textContent = "Copied!";
399
+ const btn = $("#copy");
400
+ const prev = btn.textContent;
401
+ btn.textContent = "Copied!";
402
+ setTimeout(()=>btn.textContent=prev, 1200);
403
  });
404
+
405
+ // CTA: Copy & Open in GPT
406
+ $("#copyOpen").addEventListener("click", async () => {
407
+ const prompt = $("#out").textContent;
408
+ if (!prompt.trim()){ $("#hint").textContent = "Build a prompt first."; return; }
409
+ await copyText(prompt);
410
+ const url = `${GPT_URL}?q=${encodeURIComponent(prompt)}`;
411
+ const win = window.open(url, "_blank");
412
+ const btn = $("#copyOpen");
413
+ const prev = btn.textContent;
414
+ if (win){ btn.textContent = "Copied! • Opening GPT…"; }
415
+ else { btn.textContent = "Copied! • Please allow pop-ups"; }
416
+ setTimeout(()=>btn.textContent=prev, 1800);
417
+ });
418
+
419
+ // Accessibility: announce when buttons become visible after first build
420
+ const outObserver = new MutationObserver(()=> {
421
+ $("#copy").setAttribute("aria-hidden", $("#copy").classList.contains("hidden") ? "true":"false");
422
+ $("#copyOpen").setAttribute("aria-hidden", $("#copyOpen").classList.contains("hidden") ? "true":"false");
423
+ });
424
+ outObserver.observe($("#out"), {childList:true, subtree:true});
425
+
426
+ // Focus first field on load for quick typing
427
+ window.addEventListener("DOMContentLoaded", ()=> $("#topic").focus());
428
  </script>
429
  </body>
430
  </html>