1// Adapt command demo - shows desktop-only design becoming responsive
2export default {
3 id: 'adapt',
4 caption: 'Fixed layout → Responsive across devices',
5
6 before: `
7 <div style="width: 100%; max-width: 280px; display: flex; gap: 12px; align-items: flex-end;">
8 <div style="text-align: center;">
9 <div style="width: 48px; height: 80px; background: #f5f5f5; border: 2px solid #ddd; border-radius: 6px; padding: 4px; box-sizing: border-box;">
10 <div style="height: 100%; display: flex; flex-direction: column; gap: 2px; overflow: hidden;">
11 <div style="height: 16px; background: #ccc; border-radius: 2px;"></div>
12 <div style="height: 8px; background: #e0e0e0; border-radius: 1px; width: 80%;"></div>
13 <div style="height: 8px; background: #e0e0e0; border-radius: 1px; font-size: 6px; color: #999; overflow: hidden;">Text too small...</div>
14 </div>
15 </div>
16 <div style="font-size: 9px; color: #999; margin-top: 4px;">Mobile</div>
17 <div style="font-size: 8px; color: #cc0000;">Broken ✗</div>
18 </div>
19 <div style="text-align: center;">
20 <div style="width: 100px; height: 70px; background: #f5f5f5; border: 2px solid #ddd; border-radius: 4px; padding: 6px; box-sizing: border-box;">
21 <div style="display: flex; gap: 4px; height: 100%;">
22 <div style="width: 25%; background: #ccc; border-radius: 2px;"></div>
23 <div style="flex: 1; display: flex; flex-direction: column; gap: 2px;">
24 <div style="height: 12px; background: #e0e0e0; border-radius: 2px;"></div>
25 <div style="flex: 1; background: #eee; border-radius: 2px;"></div>
26 </div>
27 </div>
28 </div>
29 <div style="font-size: 9px; color: #999; margin-top: 4px;">Desktop</div>
30 <div style="font-size: 8px; color: #22c55e;">Works ✓</div>
31 </div>
32 </div>
33 `,
34
35 after: `
36 <div style="width: 100%; max-width: 280px; display: flex; gap: 12px; align-items: flex-end;">
37 <div style="text-align: center;">
38 <div style="width: 48px; height: 80px; background: var(--color-paper); border: 2px solid var(--color-mist); border-radius: 6px; padding: 4px; box-sizing: border-box;">
39 <div style="height: 100%; display: flex; flex-direction: column; gap: 3px;">
40 <div style="height: 12px; background: var(--color-ink); border-radius: 2px;"></div>
41 <div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
42 <div style="height: 14px; background: var(--color-accent); border-radius: 2px;"></div>
43 </div>
44 </div>
45 <div style="font-size: 9px; color: var(--color-ash); margin-top: 4px;">Mobile</div>
46 <div style="font-size: 8px; color: #22c55e;">Stacked ✓</div>
47 </div>
48 <div style="text-align: center;">
49 <div style="width: 72px; height: 56px; background: var(--color-paper); border: 2px solid var(--color-mist); border-radius: 4px; padding: 4px; box-sizing: border-box;">
50 <div style="height: 100%; display: flex; flex-direction: column; gap: 2px;">
51 <div style="height: 10px; background: var(--color-ink); border-radius: 2px;"></div>
52 <div style="flex: 1; display: flex; gap: 2px;">
53 <div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
54 <div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
55 </div>
56 </div>
57 </div>
58 <div style="font-size: 9px; color: var(--color-ash); margin-top: 4px;">Tablet</div>
59 <div style="font-size: 8px; color: #22c55e;">2-col ✓</div>
60 </div>
61 <div style="text-align: center;">
62 <div style="width: 100px; height: 64px; background: var(--color-paper); border: 2px solid var(--color-mist); border-radius: 4px; padding: 4px; box-sizing: border-box;">
63 <div style="display: flex; gap: 3px; height: 100%;">
64 <div style="width: 20%; background: var(--color-charcoal); border-radius: 2px;"></div>
65 <div style="flex: 1; display: flex; flex-direction: column; gap: 2px;">
66 <div style="height: 10px; background: var(--color-ink); border-radius: 2px;"></div>
67 <div style="flex: 1; display: flex; gap: 2px;">
68 <div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
69 <div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
70 <div style="flex: 1; background: var(--color-mist); border-radius: 2px;"></div>
71 </div>
72 </div>
73 </div>
74 </div>
75 <div style="font-size: 9px; color: var(--color-ash); margin-top: 4px;">Desktop</div>
76 <div style="font-size: 8px; color: #22c55e;">Sidebar ✓</div>
77 </div>
78 </div>
79 `
80};