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

fix: Remove inline scripts and improve CSP compliance

Browse Source 
- 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
2025-07-02 15:04:49 +02:00
parent 121caad8db
commit fd87592a73
2 changed files with 47 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
html/kidsai/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 --> <!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="favicon.svg"> <link rel="icon" type="image/svg+xml" href="favicon.svg">
@@ -15,6 +15,7 @@
<!-- Meta tags for better mobile experience --> <!-- Meta tags for better mobile experience -->
<meta name="theme-color" content="#667eea"> <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-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="KidsAI Explorer"> <meta name="apple-mobile-web-app-title" content="KidsAI Explorer">
@@ -23,6 +24,9 @@
<link rel="stylesheet" href="fallback.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 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"> <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> </head>
<body> <body>
<div class="container"> <div class="container">
@@ -38,11 +42,11 @@
</button> </button>
</div> </div>
</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> <span class="brain-icon">🧠</span>
<h1 data-translate="title">KidsAI Explorer</h1> <h1 data-translate="title">KidsAI Explorer</h1>
</div> </div>
<p class="tagline" data-translate="tagline">Think, Learn, Discover Together!</p> <p class="tagline" data-translate="tagline">Think, Learn, and Discover!</p>
</header> </header>
<!-- Main Content --> <!-- Main Content -->
@@ -58,24 +62,24 @@
<div class="mouth"></div> <div class="mouth"></div>
</div> </div>
</div> </div>
<h2 data-translate="welcome-title">Hi there, young explorer! 🚀</h2> <h2 data-translate="welcome-title">Hello, 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> <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> </section>
<!-- Question Input Section --> <!-- Question Input Section -->
<section class="question-section"> <section class="question-section">
<div class="input-container"> <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"> <div class="input-wrapper">
<textarea <textarea
id="question-input" id="question-input"
data-translate-placeholder="question-placeholder" 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" rows="3"
></textarea> ></textarea>
<button id="ask-button" class="ask-btn"> <button id="ask-button" class="ask-btn">
<span class="rocket-icon">🚀</span> <span class="rocket-icon">🚀</span>
<span data-translate="ask-button">Let's Explore!</span> <span data-translate="ask-button">Start Exploring!</span>
</button> </button>
</div> </div>
</div> </div>
@@ -105,31 +109,31 @@
<!-- Suggestions Section --> <!-- Suggestions Section -->
<section class="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="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> <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>
<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> <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>
<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> <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>
<div class="suggestion-card" data-question-en="How do computers work?" data-question-de="Wie funktionieren Computer?"> <div class="suggestion-card" data-question-en="How do computers work?" data-question-de="Wie funktionieren Computer?">
<span class="computer-icon">💻</span> <span class="computer-icon">💻</span>
<p data-translate="suggestion-computers">How do computers work?</p> <p data-translate="suggestion-computers">How do computers work?</p>
</div> </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> <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>
<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> <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>
</div> </div>
</section> </section>
@@ -137,11 +141,8 @@
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<p data-translate="footer-message">Remember: The best learning happens when you think for yourself! 🌟</p> <p data-translate="footer-message">Remember: Learning is best when you think for yourself!</p>
<div class="safety-note"> <!-- Removed safety note as requested -->
<span class="shield-icon">🛡️</span>
<small data-translate="safety-note">Always ask a grown-up before researching online!</small>
</div>
</footer> </footer>
</div> </div>
@@ -155,60 +156,11 @@
<p data-translate="loading-text">Thinking of the best way to help you explore...</p> <p data-translate="loading-text">Thinking of the best way to help you explore...</p>
</div> </div>
<!-- Immediate script to hide loading --> <!-- Loading handler -->
<script> <script src="loading-handler.js"></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=20250630173957"></script> <script src="translations.js?v=20250630173957"></script>
<script src="ai-responses.js?v=20250630173957"></script> <script src="ai-responses.js?v=20250630173957"></script>
<script src="script-new.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> </body>
</html> </html>

20
html/kidsai/loading-handler.js Normal file
View 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);