<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Wireframe with Silicon Integration</title>

    <!-- External Stylesheets -->
    <link rel="stylesheet" href="css/table-wrapper.css" />
    <link rel="stylesheet" href="css/footer.css" />
    <link rel="stylesheet" href="css/desktop-menu.css" />
    <link rel="stylesheet" href="css/main-layout.css" />
    <link rel="stylesheet" href="css/search-field.css" />
    <link rel="stylesheet" href="css/ad-row.css" />
    <link rel="stylesheet" href="css/images.css" />
    <link rel="stylesheet" href="css/refine-search-toggle.css" />
    <link rel="stylesheet" href="css/nav.css" />

    <!-- Old Inline Styles -->
    <style>
        /* Inline styles from silicon.html */
        .auto-style1 {
            background-color: #FFFF66;
        }

        .btn-primary {
            background-image: linear-gradient(-20deg, #d16603 0%, #CA5A00 100%);
            color: white !important;
            border: none;
            padding: 10px 20px;
        }

        .btn-primary:hover {
            background-color: #381d03;
        }

        .form-control-sm {
            min-height: 36px !important;
            padding: .25rem .5rem !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            border-radius: 5px !important;
            background: white !important;
            border-color: #ddd !important;
        }

        input::placeholder {
            font-size: 14px !important;
            font-weight: 600 !important;
        }

        .form-label {
            font-size: 14px;
            color: black;
        }

        .table-custom tbody td {
            font-size: .8125rem;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <!-- Wrapper for the Page -->
    <div class="page-wrapper">
        <!-- Header Section -->
        <header class="header-bar">
            <div class="nav">
                <button class="hamburger" aria-label="Open Menu">&#9776;</button>
                <picture class="logo">
                    <source media="(min-width: 769px)" srcset="img/uwlogo2025.webp" />
                    <source media="(max-width: 768px)" srcset="img/uwiphone.jpg" />
                    <img src="img/uwiphone.jpg" alt="UniversityWafer, Inc. Logo" />
                </picture>
                <div class="shopping-cart" style="margin-left: auto;">Shopping Cart 🛒</div>
            </div>
        </header>

        <!-- Ads Section -->
        <section class="ads">
            <p>Ads Section</p>
        </section>

        <!-- Search Section -->
        <section>
            <form class="search-form" role="search">
                <!-- Accordion Sections for Search Filters -->
                <div class="accordion-section">
                    <div class="accordion-header">Diameter <span class="selected-value">100mm</span></div>
                    <div class="accordion-content">
                        <label for="diameter">Select Diameter</label>
                        <select id="diameter" name="diameter">
                            <option value="all">All</option>
                            <option value="100mm" selected>100mm</option>
                            <option value="150mm">150mm</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="go-button">Go</button>
            </form>
        </section>

        <!-- Table Wrapper from silicon.html -->
        <div class="table-wrapper">
            <div class="table-scroll">
                <table class="table-custom">
                    <thead>
                        <tr>
                            <th>ID/Stock</th>
                            <th>Diameter</th>
                            <th>Type</th>
                            <th>Dopant</th>
                            <th>Orientation</th>
                            <th>Resistivity</th>
                            <th>Thickness</th>
                            <th>Polish</th>
                            <th>Grade</th>
                            <th>Lead Time</th>
                            <th>Quantity</th>
                            <th>1 Unit</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2218</td>
                            <td>25.4mm</td>
                            <td>PB</td>
                            <td>-</td>
                            <td>&lt;100&gt;</td>
                            <td>ANY</td>
                            <td>400um</td>
                            <td>SSP</td>
                            <td>Test</td>
                            <td>In Stock</td>
                            <td>166</td>
                            <td>$32.75</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            console.log('Page Loaded with Integrated Content.');
        });
    </script>
</body>

</html>
@charset "UTF-8";
/* CSS Document */

