1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Legitimate Border Patterns — Should NOT Flag</title>
7 <style>
8 body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; color: #111827; }
9 h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
10 h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; color: #6b7280; }
11 .demo { max-width: 36rem; margin-bottom: 1.5rem; }
12 </style>
13</head>
14<body>
15 <h1>Legitimate Border Patterns</h1>
16 <p style="color: #6b7280; margin-bottom: 2rem;">Every border here is a well-established web pattern. None should be flagged.</p>
17
18 <!-- 1. BLOCKQUOTE — the classic border-left usage -->
19 <h2>Blockquotes</h2>
20 <div class="demo">
21 <blockquote style="border-left: 4px solid #d1d5db; padding-left: 1rem; margin: 0; color: #4b5563; font-style: italic;">
22 "Design is not just what it looks like and feels like. Design is how it works."
23 </blockquote>
24 </div>
25
26 <!-- 2. SIDEBAR NAV — active state indicator -->
27 <h2>Sidebar Navigation (Active State)</h2>
28 <div class="demo">
29 <nav style="width: 200px; background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
30 <a href="#" style="display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; border-left: 3px solid transparent;">Dashboard</a>
31 <a href="#" style="display: block; padding: 0.75rem 1rem; color: #1d4ed8; text-decoration: none; border-left: 3px solid #3b82f6; background: #eff6ff; font-weight: 500;">Projects</a>
32 <a href="#" style="display: block; padding: 0.75rem 1rem; color: #6b7280; text-decoration: none; border-left: 3px solid transparent;">Settings</a>
33 </nav>
34 </div>
35
36 <!-- 3. FORM VALIDATION — error indicator on input -->
37 <h2>Form Validation</h2>
38 <div class="demo">
39 <div style="margin-bottom: 1rem;">
40 <label style="display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem;">Email</label>
41 <input type="email" value="not-an-email" style="width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #fca5a5; border-left: 3px solid #ef4444; border-radius: 6px; outline: none; font-size: 0.875rem;">
42 <p style="color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem;">Please enter a valid email address.</p>
43 </div>
44 </div>
45
46 <!-- 4. TIMELINE / STEPPER -->
47 <h2>Timeline</h2>
48 <div class="demo">
49 <div style="border-left: 3px solid #e5e7eb; padding-left: 1.5rem; margin-left: 0.75rem;">
50 <div style="position: relative; padding-bottom: 1.5rem;">
51 <div style="position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; border: 2px solid white;"></div>
52 <p style="font-weight: 500; margin: 0;">Order placed</p>
53 <p style="font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;">March 15, 2026</p>
54 </div>
55 <div style="position: relative; padding-bottom: 1.5rem;">
56 <div style="position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; border: 2px solid white;"></div>
57 <p style="font-weight: 500; margin: 0;">Shipped</p>
58 <p style="font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;">March 16, 2026</p>
59 </div>
60 <div style="position: relative;">
61 <div style="position: absolute; left: -2.05rem; top: 0.125rem; width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; border: 2px solid white;"></div>
62 <p style="font-weight: 500; margin: 0; color: #9ca3af;">Delivered</p>
63 <p style="font-size: 0.75rem; color: #6b7280; margin: 0.125rem 0 0;">Expected March 18</p>
64 </div>
65 </div>
66 </div>
67
68 <!-- 5. CODE BLOCK — diff highlighting -->
69 <h2>Code Diff Highlighting</h2>
70 <div class="demo">
71 <pre style="background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 8px; font-size: 0.8125rem; overflow-x: auto; margin: 0;">
72<code><span style="display: block; border-left: 3px solid #ef4444; padding-left: 0.75rem; background: rgba(239,68,68,0.1);">- const old = getValue();</span>
73<span style="display: block; border-left: 3px solid #22c55e; padding-left: 0.75rem; background: rgba(34,197,94,0.1);">+ const value = getNewValue();</span>
74<span style="display: block; padding-left: calc(3px + 0.75rem);"> return value;</span></code></pre>
75 </div>
76
77 <!-- 6. TAB ACTIVE STATE — bottom border -->
78 <h2>Tab Navigation</h2>
79 <div class="demo">
80 <div style="display: flex; border-bottom: 1px solid #e5e7eb;">
81 <button style="padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #1d4ed8; border-bottom: 2px solid #3b82f6; font-weight: 500; cursor: pointer;">Overview</button>
82 <button style="padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer;">Analytics</button>
83 <button style="padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; color: #6b7280; border-bottom: 2px solid transparent; cursor: pointer;">Settings</button>
84 </div>
85 </div>
86
87 <!-- 7. TABLE CELL BORDERS -->
88 <h2>Data Table</h2>
89 <div class="demo">
90 <table style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
91 <thead>
92 <tr>
93 <th style="text-align: left; padding: 0.5rem; border-bottom: 2px solid #111827;">Name</th>
94 <th style="text-align: right; padding: 0.5rem; border-bottom: 2px solid #111827;">Revenue</th>
95 </tr>
96 </thead>
97 <tbody>
98 <tr><td style="padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">Acme Corp</td><td style="text-align: right; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">$1.2M</td></tr>
99 <tr><td style="padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">Globex</td><td style="text-align: right; padding: 0.5rem; border-bottom: 1px solid #e5e7eb;">$850K</td></tr>
100 </tbody>
101 </table>
102 </div>
103
104 <!-- 8. ALERT BANNER — full-width, not a card -->
105 <h2>Alert Banner</h2>
106 <div class="demo">
107 <div style="border-left: 4px solid #f59e0b; background: #fffbeb; padding: 0.75rem 1rem; font-size: 0.875rem; color: #92400e;">
108 <strong>Warning:</strong> Your trial expires in 3 days. <a href="#" style="color: #d97706;">Upgrade now</a>
109 </div>
110 </div>
111<script src="/js/detect-antipatterns-browser.js"></script>
112</body>
113</html>