Nuzwa/_Course_Master_Pro_
0
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>coachproai • CourseMaster Pro</title>7 <style>8 /* EduTeach Pro Style Guide Colors */9 :root {10 --primary-purple: #8A2BE2; /* Primary Purple */11 --accent-purple: #F3E5F5; /* Accent Purple - For result/input background */12 --text-color-main: #6A1B9A; /* Dark Text Color */13 --main-bg: #ffffff; /* Main Background */14 --container-bg: #f9f9f9; /* Container Background */15 --button-border: #D1C4E9; /* Button Border */16 --input-border: #ddd; /* Input/Display Field Border */17 --heading-color: #8A2BE2;18 --font-family: 'Arial', 'Helvetica', sans-serif;19 }20 21 /* Reset and Base Styles */22 * { box-sizing: border-box; }23 body {24 margin: 0;25 font-family: var(--font-family);26 background: var(--main-bg);27 color: #333; /* Default dark text */28 padding: 20px;29 display: flex;30 justify-content: center;31 align-items: center;32 min-height: 100vh;33 font-size: 1em;34 line-height: 1.6;35 }36 37 /* Container Styling */38 .app {39 width: 100%;40 max-width: 450px; /* Max Width: 450px */41 background-color: var(--container-bg);42 padding: 30px; /* Padding: 30px */43 border-radius: 15px; /* Border Radius: 15px */44 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow */45 position: relative;46 border: 1px solid var(--button-border);47 }48 49 /* Top Border Styling */50 .app::before {51 content: "";52 position: absolute;53 inset: -5px -2px auto -2px; /* Top Border 5px */54 height: 5px;55 border-top-left-radius: 15px;56 border-top-right-radius: 15px;57 background: var(--primary-purple); /* Primary Purple Color */58 }59 60 /* Heading Styling */61 h1 {62 margin: 0 0 15px;63 font-size: 2em; /* 32px */64 color: var(--heading-color);65 font-weight: bold;66 text-align: center;67 text-transform: uppercase;68 }69 70 .subtitle {71 text-align: center;72 color: #6a6a6a;73 font-size: 0.9em;74 margin-bottom: 25px;75 }76 77 /* Section/Group Styling (mimicking EduTeach Pro sections) */78 .group, .top-input, .notes, .response {79 margin-bottom: 25px;80 padding: 15px;81 border-radius: 10px;82 background-color: var(--main-bg);83 border: 1px solid var(--button-border);84 }85 86 .group:last-of-type { margin-bottom: 0; }87 88 89 /* Label Styling */90 .label {91 color: var(--text-color-main); /* Dark Purple */92 font-weight: bold;93 margin-bottom: 8px;94 display: block;95 font-size: 1.1em;96 }97 98 /* Input/Textarea/Select Styling */99 .input, select, textarea {100 width: 100%;101 padding: 15px;102 border: 1px solid var(--input-border);103 border-radius: 8px;104 background: #fff;105 color: #333;106 font-size: 1.1em;107 transition: box-shadow 0.15s ease, border-color 0.15s ease;108 resize: vertical;109 }110 .input:focus, select:focus, textarea:focus {111 outline: none;112 border-color: var(--primary-purple);113 box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);114 }115 116 /* Toggle/Button Group Styling */117 .toggles {118 display: flex;119 flex-wrap: wrap;120 gap: 8px;121 }122 .toggle {123 /* Button Default State */124 flex-grow: 1;125 border: 2px solid var(--button-border);126 background: transparent;127 color: var(--primary-purple);128 padding: 12px 14px;129 border-radius: 8px;130 cursor: pointer;131 font-weight: bold;132 font-size: 1em;133 transition: transform 0.05s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;134 text-align: center;135 min-width: 100px;136 }137 138 /* Hover effect for ALL options */139 .toggle:hover {140 background-color: var(--accent-purple);141 border-color: var(--primary-purple);142 transform: none; /* Removed translate/scale for a simpler look */143 box-shadow: none;144 }145 146 /* Selected option looks like the EduTeach Pro selected state */147 .toggle[aria-pressed="true"] {148 color: #ffffff;149 border-color: var(--primary-purple);150 background-color: var(--primary-purple);151 box-shadow: 0 2px 5px rgba(138, 43, 226, 0.3);152 }153 /* Hover on selected option */154 .toggle[aria-pressed="true"]:hover {155 filter: brightness(1.1);156 }157 158 /* Prompt Output Box Styling */159 .out {160 background: var(--accent-purple);161 border: 1px solid var(--primary-purple);162 padding: 15px;163 border-radius: 8px;164 min-height: 100px;165 white-space: pre-wrap;166 font-size: 1em;167 color: var(--text-color-main);168 font-family: monospace;169 overflow: auto;170 }171 172 /* CTA Buttons Row */173 .cta-row {174 margin-top: 15px;175 display: flex;176 gap: 10px;177 flex-wrap: wrap;178 }179 180 /* Full Width CTA Button Styling (Generate & Copy) */181 .btn {182 flex: 1;183 width: 100%; /* Ensure full width on small screens */184 display: inline-flex;185 align-items: center;186 justify-content: center;187 font-weight: bold;188 font-size: 1.5em; /* 24px */189 border: 3px solid var(--primary-purple); /* Primary Purple Outline */190 color: var(--primary-purple);191 background-color: transparent; /* Light background */192 padding: 15px 18px;193 border-radius: 8px;194 cursor: pointer;195 transition: background-color 0.3s, color 0.3s;196 text-transform: uppercase;197 }198 199 .btn:hover {200 background-color: var(--primary-purple); /* Hover background */201 color: var(--main-bg); /* Hover text color */202 }203 204 .btn.hidden { display: none !important; }205 206 /* Hint/Footer */207 .hint { margin-top: 10px; color: var(--text-color-main); font-size: 1em; min-height: 1.4em; text-align: center; }208 .footer { text-align: center; color: #9ca3af; font-size: 0.9em; margin-top: 22px; }209 210 /* Mobile Adjustments */211 @media (max-width: 480px) {212 .app { padding: 20px; border-radius: 12px; }213 h1 { font-size: 1.7em; }214 .btn { font-size: 1.2em; padding: 12px 15px; width: 100%; }215 .toggles { gap: 6px; }216 .toggle { min-width: 80px; padding: 10px 8px; font-size: 0.9em; }217 }218 </style>219</head>220<body>221 <main class="app" role="application" aria-labelledby="title">222 <h1 id="title">CourseMaster Pro</h1>223 <p class="subtitle">Powered by <strong>coachproai</strong></p>224 225 <section class="top-input">226 <label class="label" for="topic">Topic</label>227 <input id="topic" class="input" type="text" placeholder="e.g., Personal Branding on Social Media" />228 </section>229 230 <section class="options" aria-label="Options">231 <div class="group" role="group" aria-label="Audience">232 <span class="label">Audience</span>233 <div class="toggles" data-name="Audience">234 <button class="toggle" type="button" aria-pressed="false">Students</button>235 <button class="toggle" type="button" aria-pressed="false">Freelancers</button>236 <button class="toggle" type="button" aria-pressed="false">Professionals</button>237 </div>238 </div>239 240 <div class="group" role="group" aria-label="Level">241 <span class="label">Level</span>242 <div class="toggles" data-name="Level">243 <button class="toggle" type="button" aria-pressed="false">Beginner</button>244 <button class="toggle" type="button" aria-pressed="false">Intermediate</button>245 <button class="toggle" type="button" aria-pressed="false">Advanced</button>246 </div>247 </div>248 249 <div class="group" role="group" aria-label="Delivery">250 <span class="label">Delivery</span>251 <div class="toggles" data-name="Delivery">252 <button class="toggle" type="button" aria-pressed="false">Live</button>253 <button class="toggle" type="button" aria-pressed="false">Recorded</button>254 <button class="toggle" type="button" aria-pressed="false">Hybrid</button>255 <button class="toggle" type="button" aria-pressed="false">Offline</button>256 </div>257 </div>258 259 <div class="group" role="group" aria-label="Language">260 <span class="label">Language</span>261 <div class="toggles" data-name="Language">262 <button class="toggle" type="button" aria-pressed="false">Auto</button>263 <button class="toggle" type="button" aria-pressed="false">Urdu</button>264 <button class="toggle" type="button" aria-pressed="false">English</button>265 <button class="toggle" type="button" aria-pressed="false">Mixed</button>266 </div>267 </div>268 269 <div class="group" role="group" aria-label="Tone">270 <span class="label">Tone</span>271 <div class="toggles" data-name="Tone">272 <button class="toggle" type="button" aria-pressed="false">Professional</button>273 <button class="toggle" type="button" aria-pressed="false">Motivational</button>274 </div>275 </div>276 277 <div class="group" role="group" aria-label="Depth">278 <span class="label">Depth</span>279 <div class="toggles" data-name="Depth">280 <button class="toggle" type="button" aria-pressed="false">Basic</button>281 <button class="toggle" type="button" aria-pressed="false">Standard</button>282 <button class="toggle" type="button" aria-pressed="false">Comprehensive</button>283 </div>284 </div>285 286 <div class="group">287 <label for="duration" class="label">Duration</label>288 <input id="duration" class="input" type="text" placeholder="e.g., 8 weeks" />289 <label for="localization" class="label" style="margin-top: 15px;">Localization</label>290 <select id="localization" class="input">291 <option>Auto</option><option>Pakistan</option><option>GCC</option><option>Global</option>292 </select>293 <label for="export" class="label" style="margin-top: 15px;">Export</label>294 <select id="export" class="input">295 <option>PDF</option><option>DOCX</option><option>HTML</option>296 </select>297 </div>298 299 <div class="group" role="group" aria-label="Add-ons">300 <span class="label">Add-ons</span>301 <div class="toggles multi" data-name="Add-ons">302 <button class="toggle" type="button" aria-pressed="false">Include Video Support</button>303 <button class="toggle" type="button" aria-pressed="false">Bloom Mapping</button>304 <button class="toggle" type="button" aria-pressed="false">Assessments</button>305 </div>306 </div>307 </section>308 309 <section class="notes">310 <label class="label" for="notes">Notes</label>311 <textarea id="notes" class="input" rows="4" placeholder="Special requirements, target platform, constraints, tools, etc."></textarea>312 </section>313 314 <section class="response">315 <span class="label">Prompt Preview</span>316 <pre id="out" class="out" role="status" aria-live="polite">Please select options and enter Topic/Duration...</pre>317 <div class="cta-row">318 <button id="generate" class="btn cta" type="button">Generate Prompt</button>319 <button id="copyOpen" class="btn cta hidden" type="button">Copy & Paste Now</button>320 </div>321 <div class="hint" id="hint" aria-live="polite"></div>322 </section>323 324 <div class="footer">© coachproai</div>325 </main>326 327 <script>328 const GPT_URL='https://chat.openai.com/g/g-6864ab7c8c188191b8641483747e63c2-coursemaster-pro';329 const $=s=>document.querySelector(s);330 const $$=(s,root=document)=>Array.from(root.querySelectorAll(s));331 332 // Get elements333 const outElement = $("#out");334 const generateButton = $("#generate");335 const copyOpenButton = $("#copyOpen");336 337 // Toggle handling338 $$(".toggles").forEach(group=>{339 group.addEventListener("click",e=>{340 if(!e.target.classList.contains("toggle"))return;341 const btn=e.target;342 const isMulti=!group.dataset.name.includes("Add-ons"); // Single selection logic343 344 if(isMulti && btn.getAttribute("aria-pressed") !== "true"){ 345 $$(".toggle",group).forEach(b=>b.setAttribute("aria-pressed","false")); 346 }347 348 btn.setAttribute("aria-pressed", btn.getAttribute("aria-pressed")==="true" ? "false" : "true");349 350 buildPrompt();351 });352 group.addEventListener("keydown",e=>{353 if(!e.target.classList.contains("toggle"))return;354 if(e.key===" "||e.key==="Enter"){ e.preventDefault(); e.target.click(); }355 });356 });357 358 let currentPrompt = "";359 360 // Function to build and display the prompt (without typewriter for brevity)361 function buildPrompt(){362 const topic=$("#topic").value.trim();363 const duration=$("#duration").value.trim();364 const notes=$("#notes").value.trim();365 366 let p=`Create a course plan for "${topic||"<<<Add Topic>>>"}".`;367 368 $$(".toggles").forEach(g=>{369 const name=g.dataset.name;370 const sel=$$(".toggle[aria-pressed='true']",g).map(b=>b.textContent.trim());371 if(sel.length>0) p+=`\n- ${name}: ${sel.join(", ")}`;372 });373 374 if(duration) p+=`\n- Duration: ${duration}`;375 376 const loc=$("#localization").value; 377 if(loc && loc!=="Auto") p+=`\n- Localization: ${loc}`;378 379 const exp=$("#export").value; 380 if(exp) p+=`\n- Export Format: ${exp}`;381 382 if(notes) p+=`\n- Notes: ${notes}`;383 384 currentPrompt = p.trim();385 outElement.textContent = currentPrompt;386 387 // Show/Hide CTA buttons based on valid topic388 if (topic) {389 generateButton.classList.add("hidden");390 copyOpenButton.classList.remove("hidden");391 $("#hint").textContent="Prompt ready! Click 'Copy & Paste Now'";392 } else {393 generateButton.classList.remove("hidden");394 copyOpenButton.classList.add("hidden");395 $("#hint").textContent="Enter a Topic and select options.";396 }397 }398 399 // Event listeners for input changes400 $$(".input, .textarea, select").forEach(s=>s.addEventListener("input",buildPrompt));401 402 // Initial build to show placeholder403 buildPrompt(); 404 405 // Generate button (in this case, it just runs buildPrompt again)406 generateButton.addEventListener("click", () => {407 buildPrompt();408 if (currentPrompt && currentPrompt.includes("Topic>>>")) {409 $("#hint").textContent = "Please enter a valid Topic!";410 }411 });412 413 // Copy and Open functionality414 copyOpenButton.addEventListener("click",async()=>{415 const t = currentPrompt;416 if(!t || t.includes("Topic>>>")) {417 $("#hint").textContent = "Please enter a valid Topic!";418 return;419 }420 421 try {422 await navigator.clipboard.writeText(t);423 $("#hint").textContent="Copied! Opening Custom GPT...";424 425 // Open GPT link426 const win = window.open(`${GPT_URL}?q=${encodeURIComponent(t)}`, "_blank");427 if(!win){ $("#hint").textContent="Copied! • Please allow pop-ups."; }428 } catch (err) {429 $("#hint").textContent="Could not copy. Please copy the text manually and click again.";430 }431 });432 433 // Initial check for topic and setting up buttons434 if (!$("#topic").value.trim()) {435 copyOpenButton.classList.add("hidden");436 generateButton.textContent = "Generate Prompt";437 generateButton.classList.remove("hidden");438 }439 </script>440</body>441</html>