<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Test page for wireframe generation with semantic HTML elements">
<title>Wireframe Test Page</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
color: #333;
background: #f0f0f0;
}
/* Header */
header {
background: #2196f3;
color: white;
padding: 1rem 2rem;
}
header h1 { font-size: 1.5rem; }
/* Navigation */
nav {
background: #1976d2;
padding: 0.5rem 2rem;
}
nav ul {
list-style: none;
display: flex;
gap: 1rem;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
display: inline-block;
}
nav a:hover { background: rgba(255,255,255,0.1); }
/* Main layout */
.layout {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
gap: 1rem;
}
main {
flex: 1;
background: white;
padding: 1.5rem;
border-radius: 8px;
}
aside {
width: 280px;
background: white;
padding: 1rem;
border-radius: 8px;
}
/* Sections */
section {
margin-bottom: 2rem;
}
section h2 {
color: #1976d2;
border-bottom: 2px solid #e3f2fd;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
/* Article */
article {
background: #fafafa;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 4px;
border-left: 3px solid #2196f3;
}
article h3 {
margin-bottom: 0.5rem;
color: #333;
}
/* Form elements */
.form-section {
background: #fff3e0;
padding: 1rem;
border-radius: 4px;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.25rem;
font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
/* Buttons */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
.btn:hover { background: #388e3c; }
.btn-secondary {
background: #9e9e9e;
}
.btn-secondary:hover { background: #757575; }
/* Cards grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.card {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 1rem;
}
.card h4 { margin-bottom: 0.5rem; }
.card img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 4px;
background: #e0e0e0;
}
/* Table */
table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
th, td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #ddd;
}
th { background: #f5f5f5; font-weight: 600; }
/* Lists */
.list-section ul,
.list-section ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
.list-section li {
margin-bottom: 0.25rem;
}
/* Footer */
footer {
background: #333;
color: white;
padding: 2rem;
margin-top: 2rem;
}
footer .footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
footer h5 {
margin-bottom: 1rem;
color: #90caf9;
}
footer a {
color: #bdbdbd;
text-decoration: none;
}
footer a:hover { color: white; }
/* Nested structure for depth testing */
.nested-container {
background: #e8f5e9;
padding: 1rem;
border-radius: 4px;
}
.nested-level-1 {
background: #c8e6c9;
padding: 1rem;
margin: 0.5rem;
border-radius: 4px;
}
.nested-level-2 {
background: #a5d6a7;
padding: 1rem;
margin: 0.5rem;
border-radius: 4px;
}
.nested-level-3 {
background: #81c784;
padding: 0.5rem;
margin: 0.5rem;
border-radius: 4px;
}
/* Small elements (should be excluded based on minWidth/minHeight) */
.small-elements {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
}
.small-box {
width: 8px;
height: 8px;
background: #ff5722;
}
/* Hidden elements (should be excluded) */
.hidden-element {
display: none;
}
.invisible-element {
visibility: hidden;
}
.zero-opacity {
opacity: 0;
}
</style>
</head>
<body>
<header>
<h1>Wireframe Test Page</h1>
<p>A comprehensive test page for SVG wireframe generation</p>
</header>
<nav aria-label="Main navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="layout">
<main id="main-content" role="main">
<section id="intro">
<h2>Introduction Section</h2>
<p>This section tests basic text content rendering in the wireframe.</p>
<article>
<h3>Featured Article</h3>
<p>Articles should be identified as semantic elements with appropriate labels.</p>
</article>
<article>
<h3>Second Article</h3>
<p>Multiple articles test element differentiation.</p>
</article>
</section>
<section id="form-section">
<h2>Form Elements</h2>
<div class="form-section">
<form id="test-form" action="/submit" method="POST">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="you@example.com">
</div>
<div class="form-group">
<label for="category">Category</label>
<select id="category" name="category">
<option value="general">General</option>
<option value="support">Support</option>
<option value="sales">Sales</option>
</select>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" placeholder="Your message"></textarea>
</div>
<button type="submit" class="btn">Submit Form</button>
<button type="reset" class="btn btn-secondary">Reset</button>
</form>
</div>
</section>
<section id="cards-section">
<h2>Card Grid</h2>
<div class="card-grid">
<div class="card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect fill='%232196f3' width='200' height='120'/%3E%3Ctext x='100' y='65' text-anchor='middle' fill='white' font-size='14'%3EImage 1%3C/text%3E%3C/svg%3E" alt="Card image 1">
<h4>Card One</h4>
<p>Description for card one.</p>
<a href="#card1" class="btn">Learn More</a>
</div>
<div class="card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect fill='%234caf50' width='200' height='120'/%3E%3Ctext x='100' y='65' text-anchor='middle' fill='white' font-size='14'%3EImage 2%3C/text%3E%3C/svg%3E" alt="Card image 2">
<h4>Card Two</h4>
<p>Description for card two.</p>
<a href="#card2" class="btn">Learn More</a>
</div>
<div class="card">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect fill='%23ff9800' width='200' height='120'/%3E%3Ctext x='100' y='65' text-anchor='middle' fill='white' font-size='14'%3EImage 3%3C/text%3E%3C/svg%3E" alt="Card image 3">
<h4>Card Three</h4>
<p>Description for card three.</p>
<a href="#card3" class="btn">Learn More</a>
</div>
</div>
</section>
<section id="table-section">
<h2>Data Table</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Johnson</td>
<td>Developer</td>
<td>Active</td>
</tr>
<tr>
<td>Bob Smith</td>
<td>Designer</td>
<td>Active</td>
</tr>
<tr>
<td>Carol Williams</td>
<td>Manager</td>
<td>Away</td>
</tr>
</tbody>
</table>
</section>
<section id="nested-section">
<h2>Nested Structure (Depth Testing)</h2>
<div class="nested-container">
<p>Container level</p>
<div class="nested-level-1">
<p>Level 1 nesting</p>
<div class="nested-level-2">
<p>Level 2 nesting</p>
<div class="nested-level-3">
<p>Level 3 nesting - tests maxDepth config</p>
</div>
</div>
</div>
</div>
</section>
<section id="list-section" class="list-section">
<h2>Lists</h2>
<h3>Unordered List</h3>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
</section>
<section id="small-elements-section">
<h2>Small Elements (Exclusion Test)</h2>
<p>These 8x8px boxes should be excluded when minWidth/minHeight is 10:</p>
<div class="small-elements">
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
<div class="small-box"></div>
</div>
</section>
<section id="hidden-section">
<h2>Hidden Elements (Exclusion Test)</h2>
<div class="hidden-element">This should not appear (display: none)</div>
<div class="invisible-element">This should not appear (visibility: hidden)</div>
<div class="zero-opacity">This should not appear (opacity: 0)</div>
<p>Only this paragraph should be visible in the wireframe.</p>
</section>
</main>
<aside>
<h3>Sidebar</h3>
<p>This sidebar tests the aside semantic element.</p>
<h4>Quick Links</h4>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#form-section">Forms</a></li>
<li><a href="#cards-section">Cards</a></li>
<li><a href="#table-section">Table</a></li>
</ul>
<h4>Newsletter</h4>
<form>
<input type="email" placeholder="Your email" style="width: 100%; margin-bottom: 0.5rem; padding: 0.5rem;">
<button type="submit" class="btn" style="width: 100%;">Subscribe</button>
</form>
</aside>
</div>
<footer>
<div class="footer-grid">
<div>
<h5>Company</h5>
<ul style="list-style: none;">
<li><a href="#about">About Us</a></li>
<li><a href="#careers">Careers</a></li>
<li><a href="#press">Press</a></li>
</ul>
</div>
<div>
<h5>Resources</h5>
<ul style="list-style: none;">
<li><a href="#docs">Documentation</a></li>
<li><a href="#api">API Reference</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</div>
<div>
<h5>Legal</h5>
<ul style="list-style: none;">
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#terms">Terms of Service</a></li>
<li><a href="#cookies">Cookie Policy</a></li>
</ul>
</div>
</div>
<p style="text-align: center; margin-top: 2rem; color: #757575;">© 2024 Wireframe Test. All rights reserved.</p>
</footer>
<script>
console.log('[Test Page] wireframe-test.html loaded');
window.testPageType = 'wireframe-test';
</script>
</body>
</html>
