<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart CO₂ Safety System</title>

<link rel="stylesheet" href="style.css">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>

<button class="menu-btn" onclick="toggleSidebar()">☰</button>
<button class="theme-btn" onclick="toggleTheme()">🌙</button>

<div class="container">

<aside id="sidebar" class="sidebar">
<h2>CO₂ System</h2>
<nav>
<a onclick="showSection('dashboard')">3D Dashboard</a>
<a onclick="showSection('overview')">Overview</a>
<a onclick="showSection('deployment')">Deployment</a>
<a onclick="showSection('chatbot')">AI Assistant</a>
<a onclick="showSection('report')">Generate Report</a>
</nav>
</aside>

<main class="content">

<!-- 3D DASHBOARD -->
<section id="dashboard">
<h1>3D CO₂ Visualization</h1>
<div id="threeContainer"></div>
<h2 id="co2Value">CO₂: 0</h2>
<h3 id="fanStatus">Fan: OFF</h3>
</section>

<!-- OVERVIEW -->
<section id="overview" class="hidden">
<h1>Project Overview</h1>
<p>
This embedded system monitors CO₂ concentration inside enclosed vehicles
and activates ventilation automatically or via trained voice commands.
</p>
</section>

<!-- DEPLOYMENT -->
<section id="deployment" class="hidden">
<h1>Deployment Guide</h1>
<ol>
<li>Create GitHub Repository</li>
<li>Upload index.html, style.css, script.js</li>
<li>Go to Settings → Pages</li>
<li>Select Branch: main</li>
<li>Save → Your site goes live</li>
</ol>
</section>

<!-- AI CHATBOT -->
<section id="chatbot" class="hidden">
<h1>AI Project Assistant</h1>
<div class="chatbox" id="chatbox"></div>
<input type="text" id="userInput" placeholder="Ask about the project...">
<button onclick="sendMessage()">Send</button>
</section>

<!-- REPORT GENERATOR -->
<section id="report" class="hidden">
<h1>Auto Generate Project PDF</h1>
<button onclick="generatePDF()">Download Project Report</button>
</section>

</main>
</div>

<script src="script.js"></script>
</body>
</html
