Spaces:

Nuzhatwa
/

_Kids_Activity_Hub_Pro_

Running

App Files Files Community

Nuzhatwa commited on Sep 19, 2025

Commit

02f39af

verified ·

1 Parent(s): 42a5cb0

Create index.html

Browse files

Files changed (1) hide show

index.html +218 -0

index.html ADDED Viewed

	@@ -0,0 +1,218 @@

+<!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; /* Approx 32px */
+            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; /* Reduced for better aesthetics */
+            border: 1px solid #D1C4E9;
+            border-radius: 8px;
+            font-size: 1em; /* Approx 16px */
+            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; /* Approx 24px */
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+            margin-top: 10px;
+        }
+        button:hover {
+            background-color: #8A2BE2;
+            color: #ffffff;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Prompt Generator</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>
+                </select>
+            </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">Generate Prompt & Copy</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://chat.openai.com/g/g-Y2Wh1aI8k-kids-activity-hub-pro';
+            // Function to generate the prompt text
+            function generatePromptText() {
+                const classVal = classSelect.value;
+                const subjectVal = subjectSelect.value;
+                const typeVal = typeSelect.value;
+                const topicVal = topicInput.value.trim();
+                let prompt = `Generate a "${typeVal}" for ${classVal} for the subject of ${subjectVal}.`;
+                if (topicVal) {
+                    prompt += ` The specific topic is "${topicVal}".`;
+                }
+                return prompt;
+            }
+            // Update display whenever a value changes
+            const allInputs = [classSelect, subjectSelect, typeSelect, topicInput];
+            allInputs.forEach(input => {
+                input.addEventListener('change', () => {
+                    promptDisplay.textContent = generatePromptText();
+                });
+                input.addEventListener('keyup', () => {
+                    promptDisplay.textContent = generatePromptText();
+                });
+            });
+            // Initial prompt generation on page load
+            promptDisplay.textContent = generatePromptText();
+            // Button click event
+            generateBtn.addEventListener('click', () => {
+                const promptText = generatePromptText();
+                // Copy to clipboard
+                navigator.clipboard.writeText(promptText).then(() => {
+                    // Success feedback
+                    const originalText = generateBtn.textContent;
+                    generateBtn.textContent = 'Copied!';
+                    setTimeout(() => {
+                        generateBtn.textContent = originalText;
+                    }, 2000);
+                    // Open the GPT link in a new tab
+                    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>