500bd192d5
- Complete KidsAI Explorer application - Multi-language support (English/German) - AI-powered educational guidance using OpenAI - Interactive chat interface for children - Proper placeholder translation fixes - Mobile-responsive design - Educational framework for critical thinking
215 lines
10 KiB
HTML
215 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KidsAI Explorer - Think, Learn, Discover!</title>
|
|
|
|
<!-- Favicons -->
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
<!-- Meta tags for better mobile experience -->
|
|
<meta name="theme-color" content="#667eea">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="fallback.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-top">
|
|
<div class="language-switcher">
|
|
<button id="lang-en" class="lang-btn active" data-lang="en">
|
|
<span class="flag-icon">🇺🇸</span> English
|
|
</button>
|
|
<button id="lang-de" class="lang-btn" data-lang="de">
|
|
<span class="flag-icon">🇩🇪</span> Deutsch
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="logo">
|
|
<span class="brain-icon">🧠</span>
|
|
<h1 data-translate="title">KidsAI Explorer</h1>
|
|
</div>
|
|
<p class="tagline" data-translate="tagline">Think, Learn, Discover Together!</p>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Welcome Section -->
|
|
<section class="welcome-section">
|
|
<div class="mascot">
|
|
<div class="robot-face">
|
|
<div class="eyes">
|
|
<div class="eye left-eye"></div>
|
|
<div class="eye right-eye"></div>
|
|
</div>
|
|
<div class="mouth"></div>
|
|
</div>
|
|
</div>
|
|
<h2 data-translate="welcome-title">Hi there, young explorer! 🚀</h2>
|
|
<p data-translate="welcome-text">I'm here to help you become a super smart problem solver! Instead of giving you answers, I'll help you think like a detective and find solutions yourself!</p>
|
|
</section>
|
|
|
|
<!-- Question Input Section -->
|
|
<section class="question-section">
|
|
<div class="input-container">
|
|
<label for="question-input" data-translate="question-label">What would you like to explore today?</label>
|
|
<div class="input-wrapper">
|
|
<textarea
|
|
id="question-input"
|
|
data-translate-placeholder="question-placeholder"
|
|
placeholder="Ask me anything! Like 'Why is the sky blue?' or 'How do plants grow?'"
|
|
rows="3"
|
|
></textarea>
|
|
<button id="ask-button" class="ask-btn">
|
|
<span class="rocket-icon">🚀</span>
|
|
<span data-translate="ask-button">Let's Explore!</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Thinking Process Section -->
|
|
<section id="thinking-section" class="thinking-section hidden">
|
|
<div class="thinking-header">
|
|
<h3><span class="lightbulb-icon">💡</span> <span data-translate="thinking-title">Let's Think Step by Step!</span></h3>
|
|
</div>
|
|
<div id="thinking-steps" class="thinking-steps"></div>
|
|
<div class="action-buttons hidden" id="action-buttons">
|
|
<button id="research-btn" class="action-btn research">
|
|
<span class="research-icon">🔍</span>
|
|
<span data-translate="research-btn">Research Ideas</span>
|
|
</button>
|
|
<button id="experiment-btn" class="action-btn experiment">
|
|
<span class="experiment-icon">🧪</span>
|
|
<span data-translate="experiment-btn">Try Experiments</span>
|
|
</button>
|
|
<button id="discuss-btn" class="action-btn discuss">
|
|
<span class="discuss-icon">💬</span>
|
|
<span data-translate="discuss-btn">Discuss with Others</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Suggestions Section -->
|
|
<section class="suggestions-section">
|
|
<h3 data-translate="suggestions-title">Popular Questions from Other Young Explorers</h3>
|
|
<div class="suggestions-grid">
|
|
<div class="suggestion-card" data-question-en="Why do we have different seasons?" data-question-de="Warum gibt es verschiedene Jahreszeiten?">
|
|
<span class="sun-icon">☀️</span>
|
|
<p data-translate="suggestion-seasons">Why do we have different seasons?</p>
|
|
</div>
|
|
<div class="suggestion-card" data-question-en="How do birds fly?" data-question-de="Wie können Vögel fliegen?">
|
|
<span class="bird-icon">🕊️</span>
|
|
<p data-translate="suggestion-birds">How do birds fly?</p>
|
|
</div>
|
|
<div class="suggestion-card" data-question-en="Why is water wet?" data-question-de="Warum ist Wasser nass?">
|
|
<span class="water-icon">💧</span>
|
|
<p data-translate="suggestion-water">Why is water wet?</p>
|
|
</div>
|
|
<div class="suggestion-card" data-question-en="How do computers work?" data-question-de="Wie funktionieren Computer?">
|
|
<span class="computer-icon">💻</span>
|
|
<p data-translate="suggestion-computers">How do computers work?</p>
|
|
</div>
|
|
<div class="suggestion-card" data-question-en="Why do we dream?" data-question-de="Warum träumen wir?">
|
|
<span class="moon-icon">🌙</span>
|
|
<p data-translate="suggestion-dreams">Why do we dream?</p>
|
|
</div>
|
|
<div class="suggestion-card" data-question-en="How do rainbows form?" data-question-de="Wie entstehen Regenbogen?">
|
|
<span class="rainbow-icon">🌈</span>
|
|
<p data-translate="suggestion-rainbows">How do rainbows form?</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<p data-translate="footer-message">Remember: The best learning happens when you think for yourself! 🌟</p>
|
|
<div class="safety-note">
|
|
<span class="shield-icon">🛡️</span>
|
|
<small data-translate="safety-note">Always ask a grown-up before researching online!</small>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Loading Animation -->
|
|
<div id="loading" class="loading-overlay hidden">
|
|
<div class="loading-spinner">
|
|
<div class="gear gear1"></div>
|
|
<div class="gear gear2"></div>
|
|
<div class="gear gear3"></div>
|
|
</div>
|
|
<p data-translate="loading-text">Thinking of the best way to help you explore...</p>
|
|
</div>
|
|
|
|
<!-- Immediate script to hide loading -->
|
|
<script>
|
|
// Hide loading immediately when this script runs
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const loading = document.getElementById('loading');
|
|
if (loading) {
|
|
loading.style.display = 'none';
|
|
loading.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Emergency fallback
|
|
setTimeout(function() {
|
|
const loading = document.getElementById('loading');
|
|
if (loading) {
|
|
loading.style.display = 'none';
|
|
loading.classList.add('hidden');
|
|
}
|
|
}, 100);
|
|
</script>
|
|
|
|
<script src="translations.js?v=20250629181500"></script>
|
|
<script src="ai-responses.js?v=20250629181500"></script>
|
|
<script src="script-new.js?v=20250629181500"></script>
|
|
|
|
<!-- Inline debugging script -->
|
|
<script>
|
|
console.log('🔧 Inline debug script loaded');
|
|
|
|
window.addEventListener('load', () => {
|
|
console.log('🔧 Window loaded, checking elements...');
|
|
const questionInput = document.getElementById('question-input');
|
|
const askButton = document.getElementById('ask-button');
|
|
const suggestionCards = document.querySelectorAll('.suggestion-card');
|
|
|
|
console.log('🔧 questionInput:', questionInput);
|
|
console.log('🔧 askButton:', askButton);
|
|
console.log('🔧 suggestionCards:', suggestionCards.length);
|
|
console.log('🔧 window.kidsAI:', window.kidsAI);
|
|
|
|
// Test button click directly
|
|
if (askButton) {
|
|
askButton.addEventListener('click', () => {
|
|
console.log('🔧 BUTTON CLICKED DIRECTLY!');
|
|
});
|
|
}
|
|
|
|
// Test suggestion card clicks
|
|
suggestionCards.forEach((card, index) => {
|
|
card.addEventListener('click', () => {
|
|
console.log('🔧 SUGGESTION CARD ' + index + ' CLICKED!');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|