1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Icon-Tile-Stack — Should Flag vs Should Pass</title>
6 <style>
7 /* ─── Layout convention: two-column fixture ─────────────────────────
8 Left column = patterns the rule SHOULD flag.
9 Right column = legitimate patterns the rule should NOT flag.
10 Each test case is annotated with a unique <h3> text so the test
11 can match snippets back to expectations.
12 ──────────────────────────────────────────────────────────────── */
13 body { font-family: system-ui, sans-serif; margin: 0; padding: 24px; }
14 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 960px; margin: 0 auto; }
15 .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
16 .case { margin-bottom: 24px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
17 .case h3 { font-size: 18px; margin: 0 0 4px; color: #0f172a; }
18 .case p { font-size: 14px; margin: 0; color: #64748b; }
19
20 /* ── FLAG cases ── */
21
22 /* 1: pastel-gradient icon-tile (the canonical massive-icons.html shape) */
23 .icon-pastel {
24 width: 80px; height: 80px;
25 border-radius: 20px;
26 background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
27 display: flex; align-items: center; justify-content: center;
28 margin-bottom: 16px;
29 }
30
31 /* 2: solid-color icon-tile, white svg inside (no gradient) */
32 .icon-solid {
33 width: 64px; height: 64px;
34 border-radius: 16px;
35 background: #3b82f6;
36 display: flex; align-items: center; justify-content: center;
37 margin-bottom: 16px;
38 }
39
40 /* 3: white-bg outlined icon-tile (no chromatic background at all) */
41 .icon-white {
42 width: 72px; height: 72px;
43 border-radius: 18px;
44 background: #ffffff;
45 border: 1px solid #e2e8f0;
46 display: flex; align-items: center; justify-content: center;
47 margin-bottom: 16px;
48 }
49
50 /* 4: larger square (still inside the 32–128 range) */
51 .icon-large {
52 width: 96px; height: 96px;
53 border-radius: 24px;
54 background: #f1f5f9;
55 display: flex; align-items: center; justify-content: center;
56 margin-bottom: 16px;
57 }
58
59 /* 5: inline emoji icon — tile contains an emoji/symbol character directly,
60 not an <svg> or <i> child. This is the "card-icon" pattern from many
61 generated demos. */
62 .icon-emoji {
63 width: 48px; height: 48px;
64 border-radius: 12px;
65 background: linear-gradient(135deg, #8b5cf6, #a855f7);
66 display: flex; align-items: center; justify-content: center;
67 font-size: 24px;
68 margin-bottom: 16px;
69 }
70
71 /* ── PASS cases ── */
72
73 /* a: round avatar above name (border-radius: 50% — circle, not rounded square) */
74 .avatar-round {
75 width: 64px; height: 64px;
76 border-radius: 50%;
77 background: #f59e0b;
78 display: flex; align-items: center; justify-content: center;
79 margin-bottom: 16px;
80 }
81
82 /* b: wide thumbnail above article title (16:9, much wider than tall) */
83 .thumb-wide {
84 width: 200px; height: 112px;
85 border-radius: 8px;
86 background: #cbd5e1;
87 margin-bottom: 16px;
88 }
89
90 /* c: inline icon next to heading (icon and h3 on the same row, NOT stacked) */
91 .inline-row { display: flex; align-items: center; gap: 12px; }
92 .inline-row .icon-inline {
93 width: 80px; height: 80px;
94 border-radius: 20px;
95 background: #ddd6fe;
96 display: flex; align-items: center; justify-content: center;
97 flex-shrink: 0;
98 }
99
100 /* d: nothing above the heading at all */
101 .no-icon h3 { margin-top: 0; }
102
103 /* e: icon-tile that's too small (under 32px) — out of size range */
104 .icon-tiny {
105 width: 24px; height: 24px;
106 border-radius: 6px;
107 background: #93c5fd;
108 display: flex; align-items: center; justify-content: center;
109 margin-bottom: 16px;
110 }
111
112 /* f: oversized image card / hero image (over 128px) — out of size range */
113 .img-huge {
114 width: 200px; height: 200px;
115 border-radius: 16px;
116 background: #cbd5e1;
117 margin-bottom: 16px;
118 }
119 </style>
120</head>
121<body>
122 <div class="grid">
123
124 <!-- ════════════════════════════════════════════════════════════════
125 LEFT COLUMN: should flag
126 ═══════════════════════════════════════════════════════════════ -->
127 <div class="col" data-col="flag">
128 <h2>Should flag</h2>
129
130 <div class="case">
131 <div class="icon-pastel">
132 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.5">
133 <polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
134 </svg>
135 </div>
136 <h3>Lightning Fast</h3>
137 <p>Built for speed and performance from the ground up.</p>
138 </div>
139
140 <div class="case">
141 <div class="icon-solid">
142 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="1.5">
143 <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
144 </svg>
145 </div>
146 <h3>Secure Storage</h3>
147 <p>Enterprise-grade security for your peace of mind.</p>
148 </div>
149
150 <div class="case">
151 <div class="icon-white">
152 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0f172a" stroke-width="1.5">
153 <circle cx="12" cy="12" r="10"/>
154 <path d="M12 6v6l4 2"/>
155 </svg>
156 </div>
157 <h3>Easy Setup</h3>
158 <p>Get started in minutes with zero configuration.</p>
159 </div>
160
161 <div class="case">
162 <div class="icon-large">
163 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#0f172a" stroke-width="1.5">
164 <line x1="18" y1="20" x2="18" y2="10"/>
165 <line x1="12" y1="20" x2="12" y2="4"/>
166 <line x1="6" y1="20" x2="6" y2="14"/>
167 </svg>
168 </div>
169 <h3>Powerful Analytics</h3>
170 <p>Insights that drive smarter business decisions.</p>
171 </div>
172
173 <div class="case">
174 <div class="icon-emoji">⚡</div>
175 <h3>Emoji Inline Icon</h3>
176 <p>The tile contains an emoji directly, no SVG child.</p>
177 </div>
178 </div>
179
180 <!-- ════════════════════════════════════════════════════════════════
181 RIGHT COLUMN: should pass
182 ═══════════════════════════════════════════════════════════════ -->
183 <div class="col" data-col="pass">
184 <h2>Should pass</h2>
185
186 <!-- a: round avatar (circle, not rounded square) -->
187 <div class="case">
188 <div class="avatar-round">
189 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
190 <circle cx="12" cy="8" r="4"/>
191 <path d="M4 22v-2a8 8 0 0116 0v2"/>
192 </svg>
193 </div>
194 <h3>Sarah Chen</h3>
195 <p>Product designer based in Berlin.</p>
196 </div>
197
198 <!-- b: wide 16:9 thumbnail (aspect ratio out of range) -->
199 <div class="case">
200 <div class="thumb-wide"></div>
201 <h3>Article Headline</h3>
202 <p>A summary of an interesting article.</p>
203 </div>
204
205 <!-- c: side-by-side icon and heading (not stacked vertically) -->
206 <div class="case">
207 <div class="inline-row">
208 <div class="icon-inline">
209 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="1.5">
210 <circle cx="12" cy="12" r="10"/>
211 </svg>
212 </div>
213 <div>
214 <h3>Inline Side By Side</h3>
215 <p>Icon sits next to the heading, not above it.</p>
216 </div>
217 </div>
218 </div>
219
220 <!-- d: no icon above the heading at all -->
221 <div class="case no-icon">
222 <h3>Plain Heading No Icon</h3>
223 <p>Just a heading with body text, nothing above.</p>
224 </div>
225
226 <!-- e: icon-tile too small (24px — under 32px floor) -->
227 <div class="case">
228 <div class="icon-tiny">
229 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1e40af" stroke-width="2">
230 <circle cx="12" cy="12" r="10"/>
231 </svg>
232 </div>
233 <h3>Tiny Icon Above Me</h3>
234 <p>The icon container is smaller than 32px.</p>
235 </div>
236
237 <!-- f: huge image / hero (200px — over 128px ceiling) -->
238 <div class="case">
239 <div class="img-huge"></div>
240 <h3>Huge Hero Image</h3>
241 <p>The container is larger than the size cap.</p>
242 </div>
243 </div>
244 </div>
245 <script src="/js/detect-antipatterns-browser.js"></script>
246</body>
247</html>