Spaces:

Nuzwa
/

_Course_Master_Pro_

Running

File size: 17,945 Bytes

<!DOCTYPE html>
<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 !important; }
        
        /* 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 &amp; 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>