Hugging Face's logo

Spaces:
Nuzwa
/
_Course_Master_Pro_
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +149 -5
index.html CHANGED
@@ -1,10 +1,95 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
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
- <link rel="stylesheet" href="style.css" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <main class="app" role="application" aria-labelledby="title">
@@ -116,6 +201,65 @@
116
  </section>
117
  </main>
118
 
119
- <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120
  </body>
121
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
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">
 
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>