Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>coachproai • CourseMaster Pro</title> | |
| <style> | |
| :root{ | |
| --primary-color-start:#4F46E5; | |
| --primary-color-end:#8B5CF6; | |
| --background-color:#f8f9fc; | |
| --container-bg:#ffffff; | |
| --text-color:#1f2937; | |
| --label-color:#374151; | |
| --border-color:#d1d5db; | |
| --shadow-color:rgba(0,0,0,0.08); | |
| } | |
| *{box-sizing:border-box} | |
| body{ | |
| margin:0; | |
| font-family:system-ui,sans-serif; | |
| background:var(--background-color); | |
| color:var(--text-color); | |
| padding:24px; | |
| display:flex; | |
| justify-content:center; | |
| font-size:1.05rem; | |
| line-height:1.5; | |
| } | |
| .app{ | |
| width:100%; | |
| max-width:600px; | |
| background:var(--container-bg); | |
| padding:36px; | |
| border-radius:18px; | |
| box-shadow:0 6px 20px var(--shadow-color); | |
| position:relative; | |
| border:1px solid var(--border-color); | |
| } | |
| .app::before{ | |
| content:""; | |
| position:absolute; | |
| inset:-2px -2px auto -2px; | |
| height:8px; | |
| border-top-left-radius:20px; | |
| border-top-right-radius:20px; | |
| background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end)); | |
| } | |
| h1{ | |
| margin:0 0 20px; | |
| font-size:2.3em; | |
| background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end)); | |
| -webkit-background-clip:text; | |
| background-clip:text; | |
| color:transparent; | |
| font-weight:800; | |
| text-align:center; | |
| } | |
| .subtitle{text-align:center;color:#6b7280;font-size:1rem;margin-bottom:22px} | |
| .label{color:var(--label-color);font-weight:600;margin-bottom:8px;display:block;font-size:1rem} | |
| .input, select, textarea{ | |
| width:100%;padding:14px;border:1px solid var(--border-color);border-radius:12px; | |
| background:#fff;color:var(--text-color);font-size:1rem; | |
| transition:box-shadow .15s ease, border-color .15s ease; | |
| } | |
| .input:focus,select:focus,textarea:focus{ | |
| outline:none;border-color:var(--primary-color-start); | |
| box-shadow:0 0 0 4px rgba(79,70,229,.15); | |
| } | |
| .group{margin-bottom:22px} | |
| .toggles{display:flex;flex-wrap:wrap;gap:10px} | |
| .toggle{ | |
| border:1px solid var(--border-color); | |
| background:#f9fafb; | |
| color:var(--text-color); | |
| padding:10px 14px; | |
| border-radius:12px; | |
| cursor:pointer; | |
| font-weight:600; | |
| .font-size:1rem; | |
| transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease; | |
| } | |
| /* Hover effect for ALL options */ | |
| .toggle:hover{ | |
| transform:translateY(-1px); | |
| border-color:var(--primary-color-start); | |
| box-shadow:0 0 0 4px rgba(79,70,229,.12); | |
| background:#ffffff; | |
| } | |
| /* Selected option looks "hovered" permanently */ | |
| .toggle[aria-pressed="true"]{ | |
| color:#fff; | |
| border-color:transparent; | |
| background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end)); | |
| box-shadow:0 0 0 5px rgba(79,70,229,.18); | |
| } | |
| /* Extra feedback when hovering a selected option */ | |
| .toggle[aria-pressed="true"]:hover{ | |
| box-shadow:0 0 0 7px rgba(79,70,229,.22); | |
| transform:translateY(-1px) scale(1.01); | |
| } | |
| .out{ | |
| background:#f9fafb;border:1px dashed var(--border-color);padding:16px; | |
| border-radius:14px;min-height:130px;white-space:pre-wrap;font-size:1rem; | |
| } | |
| .cta-row{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap} | |
| .btn{ | |
| flex:1;display:inline-flex;align-items:center;justify-content:center; | |
| font-weight:700;font-size:1.1rem;border:none;color:#fff;padding:14px 18px; | |
| border-radius:14px;cursor:pointer; | |
| background:linear-gradient(90deg,var(--primary-color-start),var(--primary-color-end)); | |
| transition:filter .15s ease, box-shadow .15s ease, transform .05s ease; | |
| } | |
| .btn:hover{filter:brightness(0.98)} | |
| .btn:focus{outline:none;box-shadow:0 0 0 4px rgba(79,70,229,.15)} | |
| .btn.hidden{display:none} | |
| .hint{margin-top:10px;color:#6b7280;font-size:1rem;min-height:1.4em} | |
| .footer{text-align:center;color:#9ca3af;font-size:.9rem;margin-top:22px} | |
| @media (max-width:480px){ | |
| body{padding:16px;font-size:1rem} | |
| .app{padding:24px;border-radius:14px;max-width:100%} | |
| h1{font-size:1.9em} | |
| .btn{width:100%} | |
| .cta-row{flex-direction:column} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="app" role="application" aria-labelledby="title"> | |
| <h1 id="title">CourseMaster Pro</h1> | |
| <p class="subtitle">Powered by <strong>coachproai</strong></p> | |
| <section class="top-input"> | |
| <label class="label" for="topic">Topic</label> | |
| <input id="topic" class="input" type="text" placeholder="e.g., Personal Branding on Social Media" /> | |
| </section> | |
| <section class="options" aria-label="Options"> | |
| <div class="group" role="group" aria-label="Audience"> | |
| <span class="label">Audience</span> | |
| <div class="toggles" data-name="audience"> | |
| <button class="toggle" type="button" aria-pressed="false">Students</button> | |
| <button class="toggle" type="button" aria-pressed="false">Freelancers</button> | |
| <button class="toggle" type="button" aria-pressed="false">Professionals</button> | |
| </div> | |
| </div> | |
| <div class="group" role="group" aria-label="Level"> | |
| <span class="label">Level</span> | |
| <div class="toggles" data-name="level"> | |
| <button class="toggle" type="button" aria-pressed="false">Beginner</button> | |
| <button class="toggle" type="button" aria-pressed="false">Intermediate</button> | |
| <button class="toggle" type="button" aria-pressed="false">Advanced</button> | |
| </div> | |
| </div> | |
| <div class="group" role="group" aria-label="Delivery"> | |
| <span class="label">Delivery</span> | |
| <div class="toggles" data-name="delivery"> | |
| <button class="toggle" type="button" aria-pressed="false">Live</button> | |
| <button class="toggle" type="button" aria-pressed="false">Recorded</button> | |
| <button class="toggle" type="button" aria-pressed="false">Hybrid</button> | |
| <button class="toggle" type="button" aria-pressed="false">Offline</button> | |
| </div> | |
| </div> | |
| <div class="group" role="group" aria-label="Language"> | |
| <span class="label">Language</span> | |
| <div class="toggles" data-name="language"> | |
| <button class="toggle" type="button" aria-pressed="false">Auto</button> | |
| <button class="toggle" type="button" aria-pressed="false">Urdu</button> | |
| <button class="toggle" type="button" aria-pressed="false">English</button> | |
| <button class="toggle" type="button" aria-pressed="false">Mixed</button> | |
| </div> | |
| </div> | |
| <div class="group" role="group" aria-label="Tone"> | |
| <span class="label">Tone</span> | |
| <div class="toggles" data-name="tone"> | |
| <button class="toggle" type="button" aria-pressed="false">Professional</button> | |
| <button class="toggle" type="button" aria-pressed="false">Motivational</button> | |
| </div> | |
| </div> | |
| <div class="group" role="group" aria-label="Depth"> | |
| <span class="label">Depth</span> | |
| <div class="toggles" data-name="depth"> | |
| <button class="toggle" type="button" aria-pressed="false">Basic</button> | |
| <button class="toggle" type="button" aria-pressed="false">Standard</button> | |
| <button class="toggle" type="button" aria-pressed="false">Comprehensive</button> | |
| </div> | |
| </div> | |
| <div class="group"> | |
| <label for="duration" class="label">Duration</label> | |
| <input id="duration" class="input" type="text" placeholder="e.g., 8 weeks" /> | |
| <label for="localization" class="label">Localization</label> | |
| <select id="localization" class="input"> | |
| <option>Auto</option><option>Pakistan</option><option>GCC</option><option>Global</option> | |
| </select> | |
| <label for="export" class="label">Export</label> | |
| <select id="export" class="input"> | |
| <option>PDF</option><option>DOCX</option><option>HTML</option> | |
| </select> | |
| </div> | |
| <div class="group" role="group" aria-label="Add-ons"> | |
| <span class="label">Add-ons</span> | |
| <div class="toggles multi" data-name="addons"> | |
| <button class="toggle" type="button" aria-pressed="false">Include Video Support</button> | |
| <button class="toggle" type="button" aria-pressed="false">Bloom Mapping</button> | |
| <button class="toggle" type="button" aria-pressed="false">Assessments</button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="notes"> | |
| <label class="label" for="notes">Notes</label> | |
| <textarea id="notes" class="textarea" rows="6" placeholder="Special requirements, target platform, constraints, tools, etc."></textarea> | |
| </section> | |
| <section class="response"> | |
| <span class="label">Prompt Preview</span> | |
| <pre id="out" class="out" role="status" aria-live="polite"></pre> | |
| <div class="cta-row"> | |
| <button id="copy" class="btn cta hidden" type="button">Generate Prompt</button> | |
| <button id="copyOpen" class="btn cta hidden" type="button">Copy & Paste Now</button> | |
| </div> | |
| <div class="hint" id="hint" aria-live="polite"></div> | |
| </section> | |
| <div class="footer">© coachproai</div> | |
| </main> | |
| <script> | |
| const GPT_URL='https://chat.openai.com/g/g-6864ab7c8c188191b8641483747e63c2-coursemaster-pro'; | |
| const $=s=>document.querySelector(s); | |
| const $$=(s,root=document)=>Array.from(root.querySelectorAll(s)); | |
| // Toggle handling with instant preview update | |
| $$(".toggles").forEach(group=>{ | |
| group.addEventListener("click",e=>{ | |
| if(!e.target.classList.contains("toggle"))return; | |
| const btn=e.target; | |
| const isMulti=group.classList.contains("multi"); | |
| if(!isMulti){ $$(".toggle",group).forEach(b=>b.setAttribute("aria-pressed","false")); } | |
| btn.setAttribute("aria-pressed", btn.getAttribute("aria-pressed")==="true" ? "false" : "true"); | |
| buildPrompt(); | |
| }); | |
| group.addEventListener("keydown",e=>{ | |
| if(!e.target.classList.contains("toggle"))return; | |
| if(e.key===" "||e.key==="Enter"){ e.preventDefault(); e.target.click(); } | |
| }); | |
| }); | |
| function buildPrompt(){ | |
| const topic=$("#topic").value.trim(); | |
| const duration=$("#duration").value.trim(); | |
| const notes=$("#notes").value.trim(); | |
| let p=`Create a course plan for "${topic||"<<<Add Topic>>>"}".`; | |
| $$(".toggles").forEach(g=>{ | |
| const name=g.dataset.name; | |
| const sel=$$(".toggle[aria-pressed='true']",g).map(b=>b.textContent.trim()); | |
| if(sel.length>0) p+=`\n- ${name}: ${sel.join(", ")}`; | |
| }); | |
| if(duration) p+=`\n- Duration: ${duration}`; | |
| const loc=$("#localization").value; if(loc!=="Auto") p+=`\n- Localization: ${loc}`; | |
| const exp=$("#export").value; if(exp) p+=`\n- Export Format: ${exp}`; | |
| if(notes) p+=`\n- Notes: ${notes}`; | |
| $("#out").textContent=p; | |
| $("#copy").classList.remove("hidden"); | |
| $("#copyOpen").classList.remove("hidden"); | |
| $("#hint").textContent="Prompt ready!"; | |
| } | |
| ["#topic","#duration","#notes"].forEach(s=>$(s).addEventListener("input",buildPrompt)); | |
| $("#copy").addEventListener("click",async()=>{ | |
| const t=$("#out").textContent.trim(); | |
| if(!t) return; | |
| await navigator.clipboard.writeText(t); | |
| $("#hint").textContent="Copied!"; | |
| }); | |
| $("#copyOpen").addEventListener("click",async()=>{ | |
| const t=$("#out").textContent.trim(); | |
| if(!t) return; | |
| await navigator.clipboard.writeText(t); | |
| const win=window.open(`${GPT_URL}?q=${encodeURIComponent(t)}`,"_blank"); | |
| if(!win){ $("#hint").textContent="Copied! • Please allow pop-ups."; } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |