<!DOCTYPE html>

<head>

<title>Ella's Child Care & Development LLC | Hurst, TX</title>

<style>

html {

scroll-behavior: smooth;

}

body {

font-family: 'Poppins', sans-serif;

}

.font-brand {

font-family: 'Baloo 2', cursive;

}

.bg-confetti {

background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}

</style>

</head>

<header class="bg-amber-400 text-white pt-8 pb-20 text-center relative overflow-hidden bg-confetti">

<h1 class="text-5xl md:text-7xl font-brand text-rose-500 drop-shadow-lg">Ella's Child Care & Development LLC</h1>

<p class="text-2xl md:text-3xl font-semibold mt-2 text-sky-600">A Texas Rising Star Center Located in Hurst, TX</p>

<p class="mt-6 text-lg text-gray-800 max-w-2xl mx-auto">Where little minds blossom and bright futures begin! We provide a safe, nurturing, and fun learning environment for your child.</p>

<a href="#contact" id="enroll-today-btn" class="mt-8 inline-block bg-rose-500 text-white font-bold py-3 px-8 rounded-full text-lg shadow-xl hover:bg-rose-600 transition-transform transform hover:scale-105">Enroll Today!</a>

</div>

</header>

<main>

<div id="tabs-container" class="border-b border-gray-200 bg-white sticky top-0 z-10 shadow-md">

Welcome

</button>

Programs

</button>

Why Us

</button>

AI Tools

</button>

Contact

</button>

</nav>

</div>

<div id="tab-content">

<div id="about-content" class="tab-panel">

<h2 class="text-4xl font-brand text-sky-600 mb-6">Welcome to Our Family!</h2>

<p class="mb-4">At Ella's Child Care & Development, we believe every child is a unique individual with boundless potential. Located conveniently in Hurst, Texas, our center is proud to be recognized as a <strong class="text-amber-500">Texas Rising Star</strong> provider, a mark of our commitment to high-quality early childhood education.</p>

<p>Our philosophy is simple: create a playful, loving, and stimulating environment where children feel safe to explore, learn, and grow at their own pace. We're more than just a daycare; we're a community dedicated to your child's happiness and development.</p>

</div>

</div>

</section>

<h2 class="text-4xl font-brand text-rose-500 mb-12">Our Simple Enrollment Process</h2>

<div class="flex items-start space-x-4">

<div>

<h3 class="font-bold text-lg text-rose-600">Schedule a Tour</h3>

<p class="text-gray-600 mt-1 text-sm">Come visit us! See our center, meet our staff, and ask any questions you have.</p>

</div>

<div class="flex items-start space-x-4">

<div>

<h3 class="font-bold text-lg text-sky-600">Complete Application</h3>

<p class="text-gray-600 mt-1 text-sm">Fill out the enrollment packet and pay the application fee to secure your child's spot.</p>

</div>

<div class="flex items-start space-x-4">

<div>

<h3 class="font-bold text-lg text-amber-600">Plan a Start Date</h3>

<p class="text-gray-600 mt-1 text-sm">We'll work with you to find the perfect start date for your child and family.</p>

</div>

<div class="flex items-start space-x-4">

<div>

<h3 class="font-bold text-lg text-teal-600">Begin the Journey</h3>

<p class="text-gray-600 mt-1 text-sm">Your child will begin their journey in the most nurturing and loving home-based daycare in the Metroplex!</p>

</div>

</section>

</div>

<div id="programs-content" class="tab-panel hidden">

<h2 class="text-4xl font-brand text-rose-500 mb-12">Our Playful Programs</h2>

<h3 class="text-2xl font-bold text-sky-600 mb-2">Infants</h3>

<p class="text-gray-600">(6 weeks - 12 months)</p>

<p class="mt-4 text-gray-700">A warm, nurturing space for our littlest learners to grow and explore their senses safely.</p>

</div>

<h3 class="text-2xl font-bold text-teal-600 mb-2">Toddlers</h3>

<p class="text-gray-600">(1 - 3 years)</p>

<p class="mt-4 text-gray-700">Adventures await! We encourage curiosity through play, music, art, and early learning concepts.</p>

</div>

<h3 class="text-2xl font-bold text-amber-600 mb-2">Preschool</h3>

<p class="text-gray-600">(3 - 5 years)</p>

<p class="mt-4 text-gray-700">Building kindergarten readiness with a structured curriculum focused on fun and discovery.</p>

</div>

</section>

</div>

<div id="why-us-content" class="tab-panel hidden">

<h2 class="text-4xl font-brand text-sky-600 text-center mb-12">Why Families Love Ella's</h2>

<h3 class="font-bold text-xl text-rose-600">Texas Rising Star</h3>

<p class="text-gray-600 mt-2">Exceeding state standards for quality child care.</p>

</div>

<h3 class="font-bold text-xl text-sky-600">Loving Staff</h3>

<p class="text-gray-600 mt-2">Experienced, certified, and passionate caregivers.</p>

</div>

<h3 class="font-bold text-xl text-amber-600">Play-Based Learning</h3>

<p class="text-gray-600 mt-2">Children learn best when they are having fun!</p>

</div>

<h3 class="font-bold text-xl text-teal-600">Nutritious Meals</h3>

<p class="text-gray-600 mt-2">Healthy and tasty meals and snacks included.</p>

</div>

</section>

</div>

<div id="ai-tools-content" class="tab-panel hidden">

<div class="text-center">

<h2 class="text-4xl font-brand text-rose-500 mb-4">✨ AI-Powered Activity Planner</h2>

<p class="max-w-3xl mx-auto text-gray-700 text-lg mb-10">Stuck for ideas on a rainy day? Tell us your child's age and interests, and our AI assistant will suggest fun, educational activities you can do at home!</p>

<div>

<label for="childAge" class="block text-left text-sm font-medium text-gray-700">Child's Age (years)</label>

</div>

<div>

<label for="childInterests" class="block text-left text-sm font-medium text-gray-700">Interests</label>

</div>

<span id="buttonText">✨ Get Creative Ideas</span>

</button>

</div>

</div>

<hr class="border-gray-300 border-dashed"/>

<div class="text-center">

<h2 class="text-4xl font-brand text-teal-600 mb-4">✨ AI Story Weaver</h2>

<p class="max-w-3xl mx-auto text-gray-700 text-lg mb-10">Create a magical, personalized bedtime story for your little one. Just enter their name, a friend, and choose a theme!</p>

<div>

<label for="storyChildName" class="block text-left text-sm font-medium text-gray-700">Child's Name</label>

</div>

<div>

<label for="storyFriendName" class="block text-left text-sm font-medium text-gray-700">Friend's Name (optional)</label>

</div>

<label for="storyTheme" class="block text-left text-sm font-medium text-gray-700">Choose a Theme</label>

<option>A Magical Forest Adventure</option>

<option>An Exciting Space Mission</option>

<option>An Underwater Sea Discovery</option>

<option>A Funny Day at the Dinosaur Park</option>

<option>The Mystery of the Missing Toy</option>

</select>

</div>

<span id="storyButtonText">✨ Weave a Story</span>

</button>

</div>

</div>

</section>

</div>

<div id="contact-content" class="tab-panel hidden">

<h2 class="text-4xl font-brand text-center mb-10">Get in Touch!</h2>

<div class="space-y-10">

<div>

✨ Ask Our AI Assistant

</h3>

<p class="mb-4 text-gray-600">Have a quick question? Get an instant answer from our helpful AI assistant, Ella-Bot!</p>

<label for="parentQuestion" class="block text-sm font-medium text-gray-700">Your Question</label>

<span id="aiButtonText">Get Instant Answer</span>

</button>

</div>

<div>

<h3 class="text-2xl font-bold text-teal-600 mb-4">Visit or Call Us</h3>

<p class="flex items-start"><span class="text-teal-500 mt-1 mr-3">📍</span><span>123 Sunshine Lane<br>Hurst, TX 76053</span></p>

<p class="flex items-center"><span class="text-teal-500 mr-3">✉️</span><a href="mailto:info@ellaschildcare.com" class="hover:text-teal-600">info@ellaschildcare.com</a></p>

<p class="flex items-center"><span class="text-teal-500 mr-3">🕒</span><span>Monday - Friday: 6:30 AM - 6:00 PM</span></p>

</div>

<form>

<h3 class="text-2xl font-bold text-teal-600 mb-4">Or Send Us a Message</h3>

<p class="mb-4 text-gray-600">For enrollment questions or detailed inquiries, please fill out the form below.</p>

<div><label for="email" class="block text-sm font-medium text-gray-700">Email Address</label><input type="email" id="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"></div>

</div>

<div class="mt-4"><label for="message" class="block text-sm font-medium text-gray-700">Message</label><textarea id="message" rows="5" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500"></textarea></div>

<div class="mt-6"><button type="submit" class="w-full bg-rose-500 text-white font-bold py-3 px-6 rounded-lg shadow-md hover:bg-rose-600 transition-colors">Send Message</button></div>

</form>

</div>

</section>

</div>

</main>

<footer class="bg-gray-800 text-white py-8">

<p class="font-brand text-xl">Ella's Child Care & Development LLC</p>

<p class="text-sm text-gray-500 mt-1">Proudly serving families in Hurst, TX.</p>

</div>

</footer>

document.addEventListener('DOMContentLoaded', () => {

// --- AI Activity Planner Script ---

const generateActivityButton = document.getElementById('generateActivity');

const activityResultDiv = document.getElementById('activityResult');

const childAgeInput = document.getElementById('childAge');

const childInterestsInput = document.getElementById('childInterests');

const loadingSpinner = document.getElementById('loadingSpinner');

const buttonText = document.getElementById('buttonText');

if (generateActivityButton) {

generateActivityButton.addEventListener('click', () => {

handleAIGeneration(

childAgeInput.value && childInterestsInput.value,

`Generate some fun and educational activity ideas for a ${childAgeInput.value}-year-old child who is interested in ${childInterestsInput.value}.`,

"You are a creative and experienced early childhood educator. Your goal is to provide fun, simple, and educational activity ideas for parents to do with their children at home. The activities should be safe and use common household items. Format the response as a friendly message followed by a bulleted list of 3-5 activity ideas. Each idea must have a title enclosed in double asterisks (e.g., **Dinosaur Dig**).",

activityResultDiv,

generateActivityButton,

buttonText,

loadingSpinner,

'Please enter both age and interests to get ideas.'

);

});

}

// --- AI Story Weaver Script ---

const generateStoryButton = document.getElementById('generateStory');

const storyResultDiv = document.getElementById('storyResult');

const storyChildNameInput = document.getElementById('storyChildName');

const storyFriendNameInput = document.getElementById('storyFriendName');

const storyThemeSelect = document.getElementById('storyTheme');

const storyLoadingSpinner = document.getElementById('storyLoadingSpinner');

const storyButtonText = document.getElementById('storyButtonText');

if (generateStoryButton) {

generateStoryButton.addEventListener('click', () => {

const childName = storyChildNameInput.value;

const friendName = storyFriendNameInput.value;

const theme = storyThemeSelect.value;

let prompt = `Write a short story for a child named ${childName}`;

if(friendName) {

prompt += ` and their friend ${friendName}`;

}

prompt += ` about ${theme}.`;

handleAIGeneration(

childName,

prompt,

"You are a magnificent storyteller for young children. Your task is to write a short, enchanting, and positive story (around 150-200 words) based on the details provided. The story should be easy to read aloud, full of wonder, and have a happy, gentle ending. Make the child the hero of the story.",

storyResultDiv,

generateStoryButton,

storyButtonText,

storyLoadingSpinner,

"Please enter your child's name to create a story."

);

});

}

// --- AI Parent Assistant Script ---

const askAIButton = document.getElementById('askAI');

const aiResultDiv = document.getElementById('aiResult');

const parentQuestionInput = document.getElementById('parentQuestion');

const aiLoadingSpinner = document.getElementById('aiLoadingSpinner');

const aiButtonText = document.getElementById('aiButtonText');

if (askAIButton) {

askAIButton.addEventListener('click', () => {

const systemPrompt = "You are a friendly and helpful AI assistant for Ella's Child Care & Development in Hurst, TX. Your name is 'Ella-Bot'. Your purpose is to answer parents' questions about the center. Use the information from the website: we are a Texas Rising Star center, we serve infants (6 weeks - 12 months), toddlers (1-3 years), and preschoolers (3-5 years). We focus on play-based learning and provide nutritious meals. Our hours are 6:30 AM to 6:00 PM, Monday to Friday. Answer questions clearly and concisely. If a question is about enrollment specifics, pricing, or sensitive personal information, politely advise the user to contact the center directly by phone or by using the contact form for a personalized response. If the question is unrelated to childcare, politely state that you can only answer questions about Ella's Child Care.";

handleAIGeneration(

parentQuestionInput.value,

systemPrompt,

aiResultDiv,

askAIButton,

aiButtonText,

aiLoadingSpinner,

'Please enter a question.'

);

});

}

// --- Generic AI Handler Function ---

async function handleAIGeneration(condition, userQuery, systemPrompt, resultDiv, button, buttonTextEl, spinner, validationErrorMsg) {

if (!condition) {

resultDiv.innerHTML = `<p class="text-red-500 text-center font-semibold">${validationErrorMsg}</p>`;

resultDiv.classList.remove('hidden');

return;

}

spinner.classList.remove('hidden');

const originalButtonText = buttonTextEl.textContent;

buttonTextEl.textContent = 'Thinking...';

button.disabled = true;

resultDiv.classList.add('hidden');

resultDiv.innerHTML = '';

const apiKey = ""; // This will be automatically provided by the environment.

const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;

const payload = {

contents: [{ parts: [{ text: userQuery }] }],

systemInstruction: { parts: [{ text: systemPrompt }] },

};

try {

let response;

let retries = 3;

let delay = 1000;

for (let i = 0; i < retries; i++) {

try {

response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });

if (response.ok) break;

if (response.status === 429 || response.status >= 500) { await new Promise(res => setTimeout(res, delay)); delay *= 2; }

else { throw new Error(`API call failed with status: ${response.status}`); }

} catch (error) {

if (i === retries - 1) throw error;

await new Promise(res => setTimeout(res, delay));

delay *= 2;

}

const result = await response.json();

const candidate = result.candidates?.[0];

if (candidate && candidate.content?.parts?.[0]?.text) {

const text = candidate.content.parts[0].text;

let htmlContent = text.replace(/\*\*(.*?)\*\*/g, '<strong class="text-teal-700">$1</strong>').replace(/^\* (.*$)/gm, '<li class="ml-5 list-disc">$1</li>').replace(/^\d+\. (.*$)/gm, '<li class="ml-5 list-decimal">$1</li>').replace(/(\r\n|\n)/g, '<br>');

htmlContent = htmlContent.replace(/<br>(<li)/g, '$1').replace(/(<\/li>)<br>/g, '$1');

resultDiv.innerHTML = htmlContent;

} else {

resultDiv.innerHTML = '<p class="text-red-500 text-center font-semibold">Sorry, I couldn\'t generate a response right now. Please try again later.</p>';

}

} catch (error) {

console.error('Error processing API response:', error);

resultDiv.innerHTML = `<p class="text-red-500 text-center font-semibold">An error occurred while generating a response. Please check the console and try again.</p>`;

} finally {

spinner.classList.add('hidden');

buttonTextEl.textContent = originalButtonText;

button.disabled = false;

resultDiv.classList.remove('hidden');

}

// --- Tab Navigation Script ---

const tabs = document.querySelectorAll('.tab-btn');

const tabPanels = document.querySelectorAll('.tab-panel');

const enrollButton = document.getElementById('enroll-today-btn');

tabs.forEach(tab => {

tab.addEventListener('click', () => {

tabs.forEach(t => {

t.classList.remove('border-rose-500', 'text-rose-600');

t.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');

});

tabPanels.forEach(panel => panel.classList.add('hidden'));

tab.classList.add('border-rose-500', 'text-rose-600');

tab.classList.remove('border-transparent', 'text-gray-500');

const targetPanelId = tab.dataset.tabTarget;

const targetPanel = document.getElementById(targetPanelId + '-content');

if (targetPanel) {

targetPanel.classList.remove('hidden');

window.scrollTo(0, 0); // Scroll to top of page on tab change

}

});

// Renaming the 'ai-planner' tab target to 'ai-tools' for clarity

const aiToolsButton = document.querySelector('button[data-tab-target="ai-planner"]');

if(aiToolsButton) {

aiToolsButton.dataset.tabTarget = 'ai-tools';

}

const aiToolsPanel = document.getElementById('ai-planner-content');

if(aiToolsPanel) {

aiToolsPanel.id = 'ai-tools-content';

}

enrollButton.addEventListener('click', (e) => {

e.preventDefault();

const contactTabButton = document.querySelector('button[data-tab-target="contact"]');

if (contactTabButton) {

contactTabButton.click();

const tabsContainer = document.getElementById('tabs-container');

tabsContainer.scrollIntoView();

}

});

</script>

</body>

</html>