Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>CourseMaster Prompt Builder</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <main class="app" role="application" aria-labelledby="title"> | |
| <h1 id="title">CourseMaster Prompt Builder</h1> | |
| <section class="top-input"> | |
| <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" aria-pressed="false">Students</button> | |
| <button class="toggle" aria-pressed="false">Freelancers</button> | |
| <button class="toggle" 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" aria-pressed="false">Beginner</button> | |
| <button class="toggle" aria-pressed="false">Intermediate</button> | |
| <button class="toggle" 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" aria-pressed="false">Live</button> | |
| <button class="toggle" aria-pressed="false">Recorded</button> | |
| <button class="toggle" aria-pressed="false">Hybrid</button> | |
| <button class="toggle" 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" aria-pressed="false">Auto</button> | |
| <button class="toggle" aria-pressed="false">Urdu</button> | |
| <button class="toggle" aria-pressed="false">English</button> | |
| <button class="toggle" 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" aria-pressed="false">Professional</button> | |
| <button class="toggle" 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" aria-pressed="false">Basic</button> | |
| <button class="toggle" aria-pressed="false">Standard</button> | |
| <button class="toggle" aria-pressed="false">Comprehensive</button> | |
| </div> | |
| </div> | |
| <div class="group cols-3"> | |
| <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" aria-pressed="false" data-key="video">Include Video Support</button> | |
| <button class="toggle" aria-pressed="false" data-key="bloom">Bloom Mapping</button> | |
| <button class="toggle" aria-pressed="false" data-key="assess">Assessments</button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="notes"> | |
| <label for="notes">Notes</label> | |
| <textarea id="notes" class="textarea" rows="6" placeholder="Special requirements, target platform, constraints, tools, etc."></textarea> | |
| <button id="build" class="btn start" type="button">Build Prompt</button> | |
| </section> | |
| <section class="response"> | |
| <div class="label">Prompt Preview</div> | |
| <pre id="out" class="out" role="status" aria-live="polite"></pre> | |
| <div class="cta-row"> | |
| <button id="copy" class="btn cta hidden" type="button">Copy Prompt</button> | |
| <button id="copyOpen" class="btn cta hidden" type="button">Copy & Paste in GPT</button> | |
| </div> | |
| <div class="hint" id="hint" aria-live="polite"></div> | |
| </section> | |
| </main> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |