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> | |
| /* EduTeach Pro Style Guide Colors */ | |
| :root { | |
| --primary-purple: #8A2BE2; /* Primary Purple */ | |
| --accent-purple: #F3E5F5; /* Accent Purple - For result/input background */ | |
| --text-color-main: #6A1B9A; /* Dark Text Color */ | |
| --main-bg: #ffffff; /* Main Background */ | |
| --container-bg: #f9f9f9; /* Container Background */ | |
| --button-border: #D1C4E9; /* Button Border */ | |
| --input-border: #ddd; /* Input/Display Field Border */ | |
| --heading-color: #8A2BE2; | |
| --font-family: 'Arial', 'Helvetica', sans-serif; | |
| } | |
| /* Reset and Base Styles */ | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| font-family: var(--font-family); | |
| background: var(--main-bg); | |
| color: #333; /* Default dark text */ | |
| padding: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| font-size: 1em; | |
| line-height: 1.6; | |
| } | |
| /* Container Styling */ | |
| .app { | |
| width: 100%; | |
| max-width: 450px; /* Max Width: 450px */ | |
| background-color: var(--container-bg); | |
| padding: 30px; /* Padding: 30px */ | |
| border-radius: 15px; /* Border Radius: 15px */ | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow */ | |
| position: relative; | |
| border: 1px solid var(--button-border); | |
| } | |
| /* Top Border Styling */ | |
| .app::before { | |
| content: ""; | |
| position: absolute; | |
| inset: -5px -2px auto -2px; /* Top Border 5px */ | |
| height: 5px; | |
| border-top-left-radius: 15px; | |
| border-top-right-radius: 15px; | |
| background: var(--primary-purple); /* Primary Purple Color */ | |
| } | |
| /* Heading Styling */ | |
| h1 { | |
| margin: 0 0 15px; | |
| font-size: 2em; /* 32px */ | |
| color: var(--heading-color); | |
| font-weight: bold; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .subtitle { | |
| text-align: center; | |
| color: #6a6a6a; | |
| font-size: 0.9em; | |
| margin-bottom: 25px; | |
| } | |
| /* Section/Group Styling (mimicking EduTeach Pro sections) */ | |
| .group, .top-input, .notes, .response { | |
| margin-bottom: 25px; | |
| padding: 15px; | |
| border-radius: 10px; | |
| background-color: var(--main-bg); | |
| border: 1px solid var(--button-border); | |
| } | |
| .group:last-of-type { margin-bottom: 0; } | |
| /* Label Styling */ | |
| .label { | |
| color: var(--text-color-main); /* Dark Purple */ | |
| font-weight: bold; | |
| margin-bottom: 8px; | |
| display: block; | |
| font-size: 1.1em; | |
| } | |
| /* Input/Textarea/Select Styling */ | |
| .input, select, textarea { | |
| width: 100%; | |
| padding: 15px; | |
| border: 1px solid var(--input-border); | |
| border-radius: 8px; | |
| background: #fff; | |
| color: #333; | |
| font-size: 1.1em; | |
| transition: box-shadow 0.15s ease, border-color 0.15s ease; | |
| resize: vertical; | |
| } | |
| .input:focus, select:focus, textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-purple); | |
| box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2); | |
| } | |
| /* Toggle/Button Group Styling */ | |
| .toggles { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .toggle { | |
| /* Button Default State */ | |
| flex-grow: 1; | |
| border: 2px solid var(--button-border); | |
| background: transparent; | |
| color: var(--primary-purple); | |
| padding: 12px 14px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| font-size: 1em; | |
| transition: transform 0.05s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease; | |
| text-align: center; | |
| min-width: 100px; | |
| } | |
| /* Hover effect for ALL options */ | |
| .toggle:hover { | |
| background-color: var(--accent-purple); | |
| border-color: var(--primary-purple); | |
| transform: none; /* Removed translate/scale for a simpler look */ | |
| box-shadow: none; | |
| } | |
| /* Selected option looks like the EduTeach Pro selected state */ | |
| .toggle[aria-pressed="true"] { | |
| color: #ffffff; | |
| border-color: var(--primary-purple); | |
| background-color: var(--primary-purple); | |
| box-shadow: 0 2px 5px rgba(138, 43, 226, 0.3); | |
| } | |
| /* Hover on selected option */ | |
| .toggle[aria-pressed="true"]:hover { | |
| filter: brightness(1.1); | |
| } | |
| /* Prompt Output Box Styling */ | |
| .out { | |
| background: var(--accent-purple); | |
| border: 1px solid var(--primary-purple); | |
| padding: 15px; | |
| border-radius: 8px; | |
| min-height: 100px; | |
| white-space: pre-wrap; | |
| font-size: 1em; | |
| color: var(--text-color-main); | |
| font-family: monospace; | |
| overflow: auto; | |
| } | |
| /* CTA Buttons Row */ | |
| .cta-row { | |
| margin-top: 15px; | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| /* Full Width CTA Button Styling (Generate & Copy) */ | |
| .btn { | |
| flex: 1; | |
| width: 100%; /* Ensure full width on small screens */ | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| font-size: 1.5em; /* 24px */ | |
| border: 3px solid var(--primary-purple); /* Primary Purple Outline */ | |
| color: var(--primary-purple); | |
| background-color: transparent; /* Light background */ | |
| padding: 15px 18px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background-color 0.3s, color 0.3s; | |
| text-transform: uppercase; | |
| } | |
| .btn:hover { | |
| background-color: var(--primary-purple); /* Hover background */ | |
| color: var(--main-bg); /* Hover text color */ | |
| } | |
| .btn.hidden { display: none ; } | |
| /* Hint/Footer */ | |
| .hint { margin-top: 10px; color: var(--text-color-main); font-size: 1em; min-height: 1.4em; text-align: center; } | |
| .footer { text-align: center; color: #9ca3af; font-size: 0.9em; margin-top: 22px; } | |
| /* Mobile Adjustments */ | |
| @media (max-width: 480px) { | |
| .app { padding: 20px; border-radius: 12px; } | |
| h1 { font-size: 1.7em; } | |
| .btn { font-size: 1.2em; padding: 12px 15px; width: 100%; } | |
| .toggles { gap: 6px; } | |
| .toggle { min-width: 80px; padding: 10px 8px; font-size: 0.9em; } | |
| } | |
| </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" style="margin-top: 15px;">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" style="margin-top: 15px;">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="Add-ons"> | |
| <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="input" rows="4" 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">Please select options and enter Topic/Duration...</pre> | |
| <div class="cta-row"> | |
| <button id="generate" class="btn cta" 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)); | |
| // Get elements | |
| const outElement = $("#out"); | |
| const generateButton = $("#generate"); | |
| const copyOpenButton = $("#copyOpen"); | |
| // Toggle handling | |
| $$(".toggles").forEach(group=>{ | |
| group.addEventListener("click",e=>{ | |
| if(!e.target.classList.contains("toggle"))return; | |
| const btn=e.target; | |
| const isMulti=!group.dataset.name.includes("Add-ons"); // Single selection logic | |
| if(isMulti && btn.getAttribute("aria-pressed") !== "true"){ | |
| $$(".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(); } | |
| }); | |
| }); | |
| let currentPrompt = ""; | |
| // Function to build and display the prompt (without typewriter for brevity) | |
| 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 && loc!=="Auto") p+=`\n- Localization: ${loc}`; | |
| const exp=$("#export").value; | |
| if(exp) p+=`\n- Export Format: ${exp}`; | |
| if(notes) p+=`\n- Notes: ${notes}`; | |
| currentPrompt = p.trim(); | |
| outElement.textContent = currentPrompt; | |
| // Show/Hide CTA buttons based on valid topic | |
| if (topic) { | |
| generateButton.classList.add("hidden"); | |
| copyOpenButton.classList.remove("hidden"); | |
| $("#hint").textContent="Prompt ready! Click 'Copy & Paste Now'"; | |
| } else { | |
| generateButton.classList.remove("hidden"); | |
| copyOpenButton.classList.add("hidden"); | |
| $("#hint").textContent="Enter a Topic and select options."; | |
| } | |
| } | |
| // Event listeners for input changes | |
| $$(".input, .textarea, select").forEach(s=>s.addEventListener("input",buildPrompt)); | |
| // Initial build to show placeholder | |
| buildPrompt(); | |
| // Generate button (in this case, it just runs buildPrompt again) | |
| generateButton.addEventListener("click", () => { | |
| buildPrompt(); | |
| if (currentPrompt && currentPrompt.includes("Topic>>>")) { | |
| $("#hint").textContent = "Please enter a valid Topic!"; | |
| } | |
| }); | |
| // Copy and Open functionality | |
| copyOpenButton.addEventListener("click",async()=>{ | |
| const t = currentPrompt; | |
| if(!t || t.includes("Topic>>>")) { | |
| $("#hint").textContent = "Please enter a valid Topic!"; | |
| return; | |
| } | |
| try { | |
| await navigator.clipboard.writeText(t); | |
| $("#hint").textContent="Copied! Opening Custom GPT..."; | |
| // Open GPT link | |
| const win = window.open(`${GPT_URL}?q=${encodeURIComponent(t)}`, "_blank"); | |
| if(!win){ $("#hint").textContent="Copied! • Please allow pop-ups."; } | |
| } catch (err) { | |
| $("#hint").textContent="Could not copy. Please copy the text manually and click again."; | |
| } | |
| }); | |
| // Initial check for topic and setting up buttons | |
| if (!$("#topic").value.trim()) { | |
| copyOpenButton.classList.add("hidden"); | |
| generateButton.textContent = "Generate Prompt"; | |
| generateButton.classList.remove("hidden"); | |
| } | |
| </script> | |
| </body> | |
| </html> |