fix: Remove inline scripts and improve CSP compliance
- Remove all inline scripts to fix Content Security Policy violations - Create external loading-handler.js for loading screen management - Update deprecated mobile web app meta tags - Remove debug inline scripts that were causing CSP warnings - Improve overall code organization and security compliance
This commit is contained in:
root
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KidsAI Explorer - Think, Learn, Discover!</title>
|
||||
<title>KidsAI Explorer - Think, Learn, and Discover!</title>
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
@@ -15,6 +15,7 @@
|
||||
|
||||
<!-- Meta tags for better mobile experience -->
|
||||
<meta name="theme-color" content="#667eea">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<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">
|
||||
@@ -23,6 +24,9 @@
|
||||
<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">
|
||||
|
||||
<!-- Mobile keyboard handler for better mobile experience -->
|
||||
<script src="mobile-keyboard-handler.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
@@ -38,11 +42,11 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<div class="logo" id="logo-button" role="button" tabindex="0" title="Return to main page">
|
||||
<span class="brain-icon">🧠</span>
|
||||
<h1 data-translate="title">KidsAI Explorer</h1>
|
||||
</div>
|
||||
<p class="tagline" data-translate="tagline">Think, Learn, Discover Together!</p>
|
||||
<p class="tagline" data-translate="tagline">Think, Learn, and Discover!</p>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
@@ -58,24 +62,24 @@
|
||||
<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>
|
||||
<h2 data-translate="welcome-title">Hello, young explorer! 🚀</h2>
|
||||
<p data-translate="welcome-text">Welcome! I'm here to help you explore and understand the world. Let's think together and find answers step by step!</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>
|
||||
<label for="question-input" data-translate="question-label">What would you like to learn about 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?'"
|
||||
placeholder="Ask me a question! For example, '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>
|
||||
<span data-translate="ask-button">Start Exploring!</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,31 +109,31 @@
|
||||
|
||||
<!-- Suggestions Section -->
|
||||
<section class="suggestions-section">
|
||||
<h3 data-translate="suggestions-title">Popular Questions from Other Young Explorers</h3>
|
||||
<h3 data-translate="suggestions-title">Questions from Other Curious Kids</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?">
|
||||
<div class="suggestion-card" data-question-en="Why do we have seasons?" data-question-de="Warum gibt es Jahreszeiten?">
|
||||
<span class="sun-icon">☀️</span>
|
||||
<p data-translate="suggestion-seasons">Why do we have different seasons?</p>
|
||||
<p data-translate="suggestion-seasons">Why do we have seasons?</p>
|
||||
</div>
|
||||
<div class="suggestion-card" data-question-en="How do birds fly?" data-question-de="Wie können Vögel fliegen?">
|
||||
<div class="suggestion-card" data-question-en="How do birds stay in the air?" data-question-de="Wie bleiben Vögel in der Luft?">
|
||||
<span class="bird-icon">🕊️</span>
|
||||
<p data-translate="suggestion-birds">How do birds fly?</p>
|
||||
<p data-translate="suggestion-birds">How do birds stay in the air?</p>
|
||||
</div>
|
||||
<div class="suggestion-card" data-question-en="Why is water wet?" data-question-de="Warum ist Wasser nass?">
|
||||
<div class="suggestion-card" data-question-en="What makes water feel wet?" data-question-de="Warum fühlt sich Wasser nass an?">
|
||||
<span class="water-icon">💧</span>
|
||||
<p data-translate="suggestion-water">Why is water wet?</p>
|
||||
<p data-translate="suggestion-water">What makes water feel 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?">
|
||||
<div class="suggestion-card" data-question-en="Why do people dream?" data-question-de="Warum träumen Menschen?">
|
||||
<span class="moon-icon">🌙</span>
|
||||
<p data-translate="suggestion-dreams">Why do we dream?</p>
|
||||
<p data-translate="suggestion-dreams">Why do people dream?</p>
|
||||
</div>
|
||||
<div class="suggestion-card" data-question-en="How do rainbows form?" data-question-de="Wie entstehen Regenbogen?">
|
||||
<div class="suggestion-card" data-question-en="How are rainbows created?" data-question-de="Wie entstehen Regenbogen?">
|
||||
<span class="rainbow-icon">🌈</span>
|
||||
<p data-translate="suggestion-rainbows">How do rainbows form?</p>
|
||||
<p data-translate="suggestion-rainbows">How are rainbows created?</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -137,11 +141,8 @@
|
||||
|
||||
<!-- 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>
|
||||
<p data-translate="footer-message">Remember: Learning is best when you think for yourself!</p>
|
||||
<!-- Removed safety note as requested -->
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -155,60 +156,11 @@
|
||||
<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>
|
||||
<!-- Loading handler -->
|
||||
<script src="loading-handler.js"></script>
|
||||
|
||||
<script src="translations.js?v=20250630173957"></script>
|
||||
<script src="ai-responses.js?v=20250630173957"></script>
|
||||
<script src="script-new.js?v=20250630173957"></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>
|
||||
|
||||
20
html/kidsai/loading-handler.js
Normal file
20
html/kidsai/loading-handler.js
Normal file
@@ -0,0 +1,20 @@
|
||||
// Loading screen handler
|
||||
console.log('📜 Loading handler script loaded');
|
||||
|
||||
// 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);
|
||||
Reference in New Issue
Block a user