<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/brain-icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NEAT Educational Platform</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #333;
overflow-x: hidden;
}
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1rem 2rem;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: bold;
color: #667eea;
}
.main-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 2rem;
min-height: calc(100vh - 100px);
}
.panel {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.section-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #4a5568;
border-bottom: 2px solid #667eea;
padding-bottom: 0.5rem;
}
.problem-section {
margin-bottom: 2rem;
}
.topic-selector {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.topic-btn {
padding: 0.5rem 1rem;
border: 2px solid #667eea;
background: transparent;
color: #667eea;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.topic-btn:hover, .topic-btn.active {
background: #667eea;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.difficulty-selector {
margin-bottom: 1.5rem;
}
.difficulty-slider {
width: 100%;
height: 6px;
border-radius: 3px;
background: #e2e8f0;
outline: none;
margin: 1rem 0;
}
.problem-display {
background: #f7fafc;
border-radius: 10px;
padding: 1.5rem;
margin: 1rem 0;
border-left: 4px solid #667eea;
min-height: 100px;
}
.problem-text {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.answer-input {
width: 100%;
padding: 0.75rem;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 1rem;
margin: 1rem 0;
transition: border-color 0.3s ease;
}
.answer-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.btn {
padding: 0.75rem 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
margin: 0.5rem;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.network-container {
height: 400px;
border: 2px solid #e2e8f0;
border-radius: 10px;
margin: 1rem 0;
position: relative;
overflow: hidden;
}
.performance-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.stat-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem;
border-radius: 10px;
text-align: center;
}
.stat-value {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.9;
}
.explanation-panel {
background: #f0f9ff;
border-radius: 10px;
padding: 1.5rem;
margin: 1rem 0;
border-left: 4px solid #0ea5e9;
}
.step-list {
list-style: none;
counter-reset: step-counter;
}
.step-list li {
counter-increment: step-counter;
margin: 0.75rem 0;
padding-left: 2rem;
position: relative;
}
.step-list li:before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
background: #667eea;
color: white;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: bold;
}
.loading {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
font-style: italic;
color: #667eea;
}
.spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid #667eea;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin-right: 1rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.success {
color: #10b981;
background: #f0fdf4;
border-color: #10b981;
}
.error {
color: #ef4444;
background: #fef2f2;
border-color: #ef4444;
}
.hint-panel {
background: #fffbeb;
border: 1px solid #f59e0b;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
}
.hint-panel:before {
content: "💡";
margin-right: 0.5rem;
}
@media (max-width: 768px) {
.main-container {
grid-template-columns: 1fr;
}
.topic-selector {
justify-content: center;
}
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
🧠 NEAT Educational Platform
</div>
<div class="student-info">
<span id="student-name">Guest Student</span>
</div>
</div>
<div class="main-container">
<div class="panel">
<h2 class="section-title">🎯 Mathematical Problem Solver</h2>
<div class="problem-section">
<div class="topic-selector">
<button class="topic-btn active" data-topic="arithmetic">Arithmetic</button>
<button class="topic-btn" data-topic="algebra">Algebra</button>
<button class="topic-btn" data-topic="calculus">Calculus</button>
<button class="topic-btn" data-topic="trigonometry">Trigonometry</button>
<button class="topic-btn" data-topic="statistics">Statistics</button>
<button class="topic-btn" data-topic="discrete_math">Discrete Math</button>
</div>
<div class="difficulty-selector">
<label for="difficulty">Difficulty Level:</label>
<input type="range" id="difficulty" class="difficulty-slider" min="1" max="3" value="2">
<div style="display: flex; justify-content: space-between; font-size: 0.9rem; color: #666;">
<span>Easy</span>
<span>Medium</span>
<span>Hard</span>
</div>
</div>
<button class="btn" id="generate-problem">🎲 Generate New Problem</button>
<div class="problem-display" id="problem-display">
<div class="loading">
<div class="spinner"></div>
Click "Generate New Problem" to get started!
</div>
</div>
<input type="text" class="answer-input" id="answer-input" placeholder="Enter your answer here..." style="display: none;">
<div style="text-align: center;">
<button class="btn" id="submit-answer" style="display: none;">✓ Submit Answer</button>
<button class="btn" id="show-hint" style="display: none;">💡 Show Hint</button>
</div>
<div class="hint-panel" id="hint-panel" style="display: none;"></div>
<div class="explanation-panel" id="explanation-panel" style="display: none;"></div>
</div>
</div>
<div class="panel">
<h2 class="section-title">🧠 Neural Network Visualization</h2>
<div class="performance-stats" id="performance-stats">
<div class="stat-card">
<div class="stat-value" id="accuracy-stat">--</div>
<div class="stat-label">Accuracy</div>
</div>
<div class="stat-card">
<div class="stat-value" id="efficiency-stat">--</div>
<div class="stat-label">Efficiency</div>
</div>
<div class="stat-card">
<div class="stat-value" id="complexity-stat">--</div>
<div class="stat-label">Complexity</div>
</div>
</div>
<div class="network-container" id="network-container">
<div class="loading">
<div class="spinner"></div>
Generate a problem to see the neural network in action!
</div>
</div>
<div style="margin-top: 1rem;">
<h3 style="margin-bottom: 0.5rem;">Network Information:</h3>
<div id="network-info" style="font-size: 0.9rem; color: #666;">
No network loaded yet.
</div>
</div>
<div style="margin-top: 1.5rem;">
<h3 style="margin-bottom: 0.5rem;">How It Works:</h3>
<p style="font-size: 0.9rem; line-height: 1.5; color: #666;">
Each mathematical problem is solved by a specialized neural network that has evolved using NEAT
(NeuroEvolution of Augmenting Topologies). The network structure grows and adapts to handle
different types of mathematical reasoning. Watch how the network activates when solving problems!
</p>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>