<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo SPA</title>
</head>
<body>
<nav class="navbar">
<div class="logo">Demo SPA</div>
<div class="nav-links">
<a class="nav-link active" data-page="home">Home</a>
<a class="nav-link" data-page="about">About</a>
<a class="nav-link" data-page="contact">Contact</a>
</div>
</nav>
<div class="container">
<!-- Home Page -->
<div id="home" class="page active">
<h1>Welcome to Demo SPA</h1>
<p>This is a simple Single Page Application for testing the Web viewer extension with MCP Server
integration.</p>
<div class="feature-grid">
<div class="card feature">
<div class="icon">🚀</div>
<h3>Fast</h3>
<p>Instant page transitions</p>
</div>
<div class="card feature">
<div class="icon">🎨</div>
<h3>Beautiful</h3>
<p>Modern design</p>
</div>
<div class="card feature">
<div class="icon">🤖</div>
<h3>AI Ready</h3>
<p>MCP integration</p>
</div>
</div>
</div>
<!-- About Page -->
<div id="about" class="page">
<h1>About</h1>
<div class="card">
<h3>Web viewer Extension</h3>
<p>This extension allows you to view Single Page Applications directly in VS Code. It also provides an
MCP Server that enables AI agents to interact with the SPA.</p>
</div>
<div class="card">
<h3>Features</h3>
<ul>
<li>View SPA in VS Code tab</li>
<li>MCP Server for AI integration</li>
<li>Navigate, click, and input commands</li>
<li>Get SPA state and DOM</li>
</ul>
</div>
</div>
<!-- Contact Page -->
<div id="contact" class="page">
<h1>Contact</h1>
<div class="card">
<form id="contact-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" placeholder="Enter your message"></textarea>
</div>
<button type="submit" id="submit-btn">Send Message</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
<script type="module" src="./main.ts"></script>
</body>
</html>
