<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camp Half-Blood: Conversations</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main UI Grid Layout Wrapper -->
<div id="app-wrapper">
<!-- Left Sidebar: Character Affinities & Profiles -->
<div id="stats-sidebar">
<h3 class="sidebar-title">Demigod Bonds</h3>
<div class="stat-card">
<div class="stat-header">
<span>Percy Jackson</span>
<span id="affinity-percy">0 XP</span>
</div>
<div class="progress-bar"><div id="bar-percy" class="progress-fill"></div></div>
</div>
<div class="stat-card">
<div class="stat-header">
<span>Annabeth Chase</span>
<span id="affinity-annabeth">0 XP</span>
</div>
<div class="progress-bar"><div id="bar-annabeth" class="progress-fill"></div></div>
</div>
<div class="stat-card">
<div class="stat-header">
<span>Clarisse La Rue</span>
<span id="affinity-clarisse">0 XP</span>
</div>
<div class="progress-bar"><div id="bar-clarisse" class="progress-fill"></div></div>
</div>
<div class="stat-card">
<div class="stat-header">
<span>Nico di Angelo</span>
<span id="affinity-nico">0 XP</span>
</div>
<div class="progress-bar"><div id="bar-nico" class="progress-fill"></div></div>
</div>
</div>
<!-- Right Main: Chat Interface Module Layout -->
<div id="chat-container">
<!-- Extended Tab Row Selection Engine Components Mapping Event Bounds -->
<div class="tabs-row">
<button id="tab-percy" class="tab-btn active">Percy</button>
<button id="tab-annabeth" class="tab-btn">Annabeth</button>
<button id="tab-clarisse" class="tab-btn">Clarisse</button>
<button id="tab-nico" class="tab-btn">Nico</button>
</div>
<!-- Dynamic Dialogue Grid Context Frame Window View -->
<div id="chat-display-area"></div>
<!-- Interactive Typing Status Indicator Node -->
<div id="typing-indicator"></div>
<!-- Operational Form Control Entry Field Bar Row -->
<div class="input-row">
<input type="text" id="user-msg-input" placeholder="Type a message..." maxlength="80" autocomplete="off">
<button id="send-msg-btn">Send</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
you can chat with charcters from percy jackson
i made it into a website
i learned i can not deside from pygame to website