root/kidsai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: KidsAI Explorer with complete functionality

Browse Source 
- 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
This commit is contained in:
root
2025-07-13 16:59:42 +02:00
commit 500bd192d5
2450 changed files with 202563 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
mobile-test.html Normal file
View File

@@ -0,0 +1,203 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KidsAI Mobile Test</title>
<link rel="stylesheet" href="style.css">
<!-- Mobile keyboard handler -->
<script src="mobile-keyboard-handler.js"></script>
<style>
/* Add mobile simulator styling for testing */
@media (max-width: 768px) {
body::before {
content: "MOBILE VIEW ACTIVE";
position: fixed;
top: 0;
left: 0;
right: 0;
background: #48bb78;
color: white;
text-align: center;
padding: 5px;
font-size: 12px;
z-index: 10000;
}
.container {
margin-top: 25px;
}
}
.debug-info {
position: fixed;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.8);
color: white;
padding: 10px;
border-radius: 5px;
font-size: 12px;
z-index: 10001;
}
</style>
</head>
<body>
<div class="debug-info">
Screen: <span id="screen-size"></span><br>
Viewport: <span id="viewport-size"></span>
</div>
<div class="container">
<!-- Header -->
<header class="header">
<div class="header-top">
<div class="language-switcher">
<button class="lang-btn active">
<span class="flag-icon">🇺🇸</span> English
</button>
<button class="lang-btn">
<span class="flag-icon">🇩🇪</span> Deutsch
</button>
</div>
</div>
<div class="logo">
<span class="brain-icon">🧠</span>
<h1>KidsAI Explorer</h1>
</div>
<p class="tagline">Think, Learn, Discover Together!</p>
</header>
<!-- Main Content -->
<main class="main-content">
<!-- Welcome Section -->
<section class="welcome-section">
<h2>Hi there, young explorer! 🚀</h2>
<p>Testing mobile responsiveness! This should look great on all screen sizes.</p>
</section>
<!-- Question Input Section -->
<section class="question-section">
<div class="input-container">
<label for="question-input">What would you like to explore today?</label>
<div class="input-wrapper">
<textarea id="question-input" placeholder="Ask me anything!" rows="3"></textarea>
<button class="ask-btn">
<span class="rocket-icon">🚀</span>
<span>Let's Explore!</span>
</button>
</div>
</div>
</section>
<!-- Thinking Process Section (with conversation container test) -->
<section class="thinking-section chat-mode">
<div class="thinking-header">
<h3><span class="lightbulb-icon">💡</span> Mobile Conversation Test</h3>
</div>
<div class="thinking-steps">
<div class="conversation-container">
<div class="chat-message ai-message visible">
<div class="message-header">
<span class="ai-avatar">🤖</span>
<span class="ai-label">AI Teacher</span>
</div>
<div class="message-content">
<p>This is a test message to see how the conversation container looks on mobile. It should be scrollable and properly sized.</p>
</div>
</div>
<div class="chat-message user-message visible">
<div class="message-content">
<p>This is a user message. On mobile, it should take up most of the width and be easy to read.</p>
</div>
</div>
<div class="chat-message ai-message visible">
<div class="message-header">
<span class="ai-avatar">🤖</span>
<span class="ai-label">AI Teacher</span>
</div>
<div class="message-content">
<p>Here's another message to test scrolling. The container should maintain its height and allow smooth scrolling on mobile devices.</p>
</div>
</div>
<!-- More messages to test scrolling -->
<div class="chat-message user-message visible">
<div class="message-content">
<p>Testing more content...</p>
</div>
</div>
<div class="chat-message ai-message visible">
<div class="message-header">
<span class="ai-avatar">🤖</span>
<span class="ai-label">AI Teacher</span>
</div>
<div class="message-content">
<p>And even more content to ensure we can scroll properly on mobile devices.</p>
</div>
</div>
<div class="chat-input-container visible">
<div class="input-area">
<textarea class="chat-textarea" placeholder="Type your thoughts here..."></textarea>
<button class="reply-btn">
<span class="rocket-icon">🚀</span>
Send
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Action Buttons Test -->
<section class="welcome-section">
<h2>Button Test</h2>
<div class="action-buttons">
<button class="action-btn research">
<span class="research-icon">🔍</span>
Research Ideas
</button>
<button class="action-btn experiment">
<span class="experiment-icon">🧪</span>
Try Experiments
</button>
<button class="action-btn discuss">
<span class="discuss-icon">💬</span>
Discuss Together
</button>
</div>
</section>
<!-- Answer Reveal Test -->
<section class="answer-reveal-section">
<div class="reveal-prompt">
<h4>Ready to see the answer?</h4>
<p>You've done great thinking! Now let's see what the experts say.</p>
</div>
<button class="reveal-answer-btn">
<span class="btn-icon">🎉</span>
Reveal Answer
</button>
</section>
</main>
</div>
<script>
// Debug script to show screen dimensions
function updateDebugInfo() {
document.getElementById('screen-size').textContent =
`${window.screen.width}x${window.screen.height}`;
document.getElementById('viewport-size').textContent =
`${window.innerWidth}x${window.innerHeight}`;
}
updateDebugInfo();
window.addEventListener('resize', updateDebugInfo);
window.addEventListener('orientationchange', updateDebugInfo);
</script>
</body>
</html>