accessibility-console/demo/static_preview.html

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

<head>
    <meta charset="UTF-8">
    <title>Accessibility Console Preview</title>
</head>

<body>
    <h1>Accessibility Console Preview</h1>
    <p>This is a static preview of how the error console looks.</p>
    <p>Click the "Accessibility: 2 Errors" button in the bottom right.</p>

    <!-- Hardcoded output from HtmlReporter for demonstration -->
    <div id='yaknet-a11y-console-toggle' onclick='document.getElementById("yaknet-a11y-console").style.display="block"'
        style='position:fixed; bottom:10px; right:10px; background:#ff9900; color:white; padding:8px 15px; border-radius:4px; cursor:pointer; font-family:sans-serif; z-index:99999; font-weight:bold; font-size:14px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border: 1px solid #cc7a00;'>
        ⚠️ Accessibility: 2 Errors
    </div>

    <div id='yaknet-a11y-console'
        style='display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:100000; font-family:Verdana, sans-serif;'>
        <div
            style='width:90%; max-width:1200px; margin:50px auto; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.5); overflow:hidden; border-radius:4px;'>

            <div
                style='background:#f7f7f7; color:#333; padding:15px 20px; border-bottom:1px solid #ccc; font-size:18px; font-weight:bold; display:flex; justify-content:space-between; align-items:center;'>
                <span>
                    <span
                        style='background:#d9534f; color:white; padding:2px 6px; border-radius:3px; font-size:14px; vertical-align:middle; margin-right:10px;'>FATAL
                        ERROR</span>
                    Accessibility Violations Detected
                </span>
                <button onclick='document.getElementById("yaknet-a11y-console").style.display="none"'
                    style='border:none; background:none; font-size:24px; cursor:pointer; color:#999; line-height:1;'>&times;</button>
            </div>

            <div style='max-height:80vh; overflow-y:auto; padding:0;'>
                <table style='width:100%; border-collapse:collapse; font-size:14px;'>
                    <thead style='background:#eeeff0; color:#333; text-align:left;'>
                        <tr>
                            <th style='padding:12px 15px; border-bottom:2px solid #ddd; width: 50px;'>#</th>
                            <th style='padding:12px 15px; border-bottom:2px solid #ddd;'>Violation / Message</th>
                            <th style='padding:12px 15px; border-bottom:2px solid #ddd;'>Source File</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style='border-bottom:1px solid #eee; background:#fff;'>
                            <td style='padding:12px 15px; vertical-align:top; color:#999;'>1</td>
                            <td style='padding:12px 15px; vertical-align:top;'>
                                <div style='color:#cc0000; font-weight:bold; margin-bottom:5px; font-size:15px;'>Image
                                    is missing alt attribute.</div>
                                <div style='font-size:12px; color:#555; margin-bottom:8px;'>Rule:
                                    <code>img-alt-text</code></div>

                                <div
                                    style='background:#f1f1f1; padding:8px; border-left:3px solid #ccc; font-family:monospace; font-size:12px; margin-bottom:8px; color:#333; overflow-x:auto;'>
                                    &lt;img src="logo.png" /&gt;
                                </div>
                                <div style='font-size:13px; color:#222;'>
                                    <span style='color:#28a745; font-weight:bold;'>Fix:</span> Add an alt="" attribute
                                    describing the image, or alt="" if decorative.
                                </div>
                            </td>
                            <td
                                style='padding:12px 15px; vertical-align:top; font-family:monospace; font-size:13px; color:#333;'>
                                <div style='margin-bottom:5px;'>
                                    C:\Users\User\Project\views\header.php<strong>:42</strong>
                                </div>
                            </td>
                        </tr>
                        <tr style='border-bottom:1px solid #eee; background:#f9f9f9;'>
                            <td style='padding:12px 15px; vertical-align:top; color:#999;'>2</td>
                            <td style='padding:12px 15px; vertical-align:top;'>
                                <div style='color:#cc0000; font-weight:bold; margin-bottom:5px; font-size:15px;'>Form
                                    field &lt;input&gt; missing label.</div>
                                <div style='font-size:12px; color:#555; margin-bottom:8px;'>Rule:
                                    <code>form-label</code></div>

                                <div
                                    style='background:#f1f1f1; padding:8px; border-left:3px solid #ccc; font-family:monospace; font-size:12px; margin-bottom:8px; color:#333; overflow-x:auto;'>
                                    &lt;input type="text" name="username" /&gt;
                                </div>
                                <div style='font-size:13px; color:#222;'>
                                    <span style='color:#28a745; font-weight:bold;'>Fix:</span> Associate a &lt;label&gt;
                                    via "for" attribute, wrap in &lt;label&gt;, or use "aria-label".
                                </div>
                            </td>
                            <td
                                style='padding:12px 15px; vertical-align:top; font-family:monospace; font-size:13px; color:#333;'>
                                <div style='margin-bottom:5px;'>
                                    C:\Users\User\Project\views\login.php<strong>:15</strong>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>