|
|
<!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> |
