| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Prompt Generator for Kids Activity Hub Pro</title> |
| <style> |
| body { |
| font-family: sans-serif, Arial, Helvetica; |
| background-color: #ffffff; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| margin: 0; |
| color: #333; |
| } |
| |
| .container { |
| max-width: 450px; |
| width: 100%; |
| padding: 30px; |
| background-color: #f9f9f9; |
| border-radius: 15px; |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); |
| border-top: 5px solid #8A2BE2; |
| } |
| |
| h1 { |
| color: #8A2BE2; |
| font-size: 2em; |
| text-align: center; |
| margin-top: 0; |
| margin-bottom: 30px; |
| } |
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
| |
| label { |
| display: block; |
| margin-bottom: 8px; |
| font-weight: bold; |
| color: #6A1B9A; |
| } |
| |
| select, |
| input[type="text"] { |
| width: 100%; |
| padding: 15px; |
| border: 1px solid #D1C4E9; |
| border-radius: 8px; |
| font-size: 1em; |
| box-sizing: border-box; |
| background-color: #ffffff; |
| } |
| |
| #prompt-display { |
| width: 100%; |
| padding: 20px; |
| margin-top: 20px; |
| border: 1px solid #ddd; |
| border-radius: 8px; |
| font-size: 1em; |
| background-color: #F3E5F5; |
| color: #6A1B9A; |
| min-height: 80px; |
| box-sizing: border-box; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| } |
| |
| button { |
| width: 100%; |
| padding: 20px; |
| border: 1px solid #D1C4E9; |
| border-radius: 8px; |
| background-color: #F3E5F5; |
| color: #8A2BE2; |
| font-size: 1.5em; |
| font-weight: bold; |
| cursor: pointer; |
| transition: background-color 0.3s, color 0.3s; |
| margin-top: 10px; |
| } |
| |
| button:hover { |
| background-color: #8A2BE2; |
| color: #ffffff; |
| } |
| |
| |
| #custom-lang-group { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| <h1>Kids Activity Hub pro</h1> |
|
|
| <form id="prompt-form"> |
| <div class="form-group"> |
| <label for="class-select">Select Class</label> |
| <select id="class-select"> |
| <option value="Playgroup">Playgroup</option> |
| <option value="Nursery">Nursery</option> |
| <option value="KG / Prep">KG / Prep</option> |
| <option value="Grade 1">Grade 1</option> |
| <option value="Grade 2">Grade 2</option> |
| <option value="Grade 3">Grade 3</option> |
| <option value="Grade 4">Grade 4</option> |
| <option value="Grade 5">Grade 5</option> |
| </select> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="subject-select">Select Subject</label> |
| <select id="subject-select"> |
| <option value="English">English</option> |
| <option value="Urdu">Urdu</option> |
| <option value="Mathematics">Mathematics</option> |
| <option value="Science">Science</option> |
| <option value="Social Studies">Social Studies</option> |
| <option value="Islamiat">Islamiat</option> |
| <option value="Art / Drawing">Art / Drawing</option> |
| </select> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="type-select">Select Type</label> |
| <select id="type-select"> |
| <option value="General Classroom Activity">General Classroom Activity</option> |
| <option value="Printable Worksheet">Printable Worksheet</option> |
| <option value="Coloring Sheet">Coloring Sheet</option> |
| <option value="Tracing Sheet">Tracing Sheet</option> |
| <option value="Drawing Practice">Drawing Practice</option> |
| <option value="Story">Story</option> |
| <option value="Classroom Game">Classroom Game</option> |
| <option value="Poem">Poem</option> |
| </select> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="language-select">Select Language</label> |
| <select id="language-select"> |
| <option value="English">English</option> |
| <option value="Urdu">Urdu</option> |
| <option value="Bilingual (Urdu and English)">Bilingual</option> |
| <option value="Custom">Custom</option> |
| </select> |
| </div> |
| |
| <div class="form-group" id="custom-lang-group"> |
| <label for="custom-lang-input">Enter Custom Language</label> |
| <input type="text" id="custom-lang-input" placeholder="e.g., Sindhi, Pashto"> |
| </div> |
| <div class="form-group"> |
| <label for="topic-input">Enter Topic (Optional)</label> |
| <input type="text" id="topic-input" placeholder="e.g., Addition, My Family, Plants"> |
| </div> |
| |
| <div id="prompt-display-container" class="form-group"> |
| <label>Generated Prompt</label> |
| <div id="prompt-display">Your generated prompt will appear here...</div> |
| </div> |
|
|
| <button type="button" id="generate-btn">Copy Prompt & Paste</button> |
| </form> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| const classSelect = document.getElementById('class-select'); |
| const subjectSelect = document.getElementById('subject-select'); |
| const typeSelect = document.getElementById('type-select'); |
| const topicInput = document.getElementById('topic-input'); |
| const generateBtn = document.getElementById('generate-btn'); |
| const promptDisplay = document.getElementById('prompt-display'); |
| const gptUrl = 'https://chatgpt.com/g/g-68b48c55bce881919e4e15321b97dc87-kids-activity-hub-pro'; |
| |
| |
| const languageSelect = document.getElementById('language-select'); |
| const customLangGroup = document.getElementById('custom-lang-group'); |
| const customLangInput = document.getElementById('custom-lang-input'); |
| |
| |
| function generatePromptText() { |
| const classVal = classSelect.value; |
| const subjectVal = subjectSelect.value; |
| const typeVal = typeSelect.value; |
| const topicVal = topicInput.value.trim(); |
| let langVal = languageSelect.value; |
| |
| |
| if (langVal === 'Custom') { |
| langVal = customLangInput.value.trim() || 'the specified custom language'; |
| } |
| |
| let prompt = `Generate a "${typeVal}" for ${classVal} for the subject of ${subjectVal}.`; |
| |
| if (topicVal) { |
| prompt += ` The specific topic is "${topicVal}".`; |
| } |
| |
| |
| prompt += ` The activity should be in ${langVal}.`; |
| |
| return prompt; |
| } |
| |
| |
| languageSelect.addEventListener('change', () => { |
| if (languageSelect.value === 'Custom') { |
| customLangGroup.style.display = 'block'; |
| } else { |
| customLangGroup.style.display = 'none'; |
| } |
| }); |
| |
| |
| const allInputs = [classSelect, subjectSelect, typeSelect, topicInput, languageSelect, customLangInput]; |
| allInputs.forEach(input => { |
| input.addEventListener('change', () => { |
| promptDisplay.textContent = generatePromptText(); |
| }); |
| input.addEventListener('keyup', () => { |
| promptDisplay.textContent = generatePromptText(); |
| }); |
| }); |
| |
| |
| promptDisplay.textContent = generatePromptText(); |
| |
| |
| |
| generateBtn.addEventListener('click', () => { |
| const promptText = generatePromptText(); |
| |
| navigator.clipboard.writeText(promptText).then(() => { |
| const originalText = generateBtn.textContent; |
| generateBtn.textContent = 'Copied!'; |
| setTimeout(() => { |
| generateBtn.textContent = originalText; |
| }, 2000); |
| |
| window.open(gptUrl, '_blank'); |
| |
| }).catch(err => { |
| console.error('Failed to copy text: ', err); |
| alert('Failed to copy prompt. Please copy it manually.'); |
| }); |
| }); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
