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
204 lines
8.3 KiB
HTML
204 lines
8.3 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 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>
|