1// Responsive Design skill demos
 2export default {
 3  id: 'responsive-design',
 4  tabs: [
 5    {
 6      id: 'touch',
 7      label: 'Touch Targets',
 8      caption: 'Tiny targets vs accessible touch areas',
 9      hasToggle: false, // Static comparison
10      before: `
11        <div class="resp-demo resp-touch-demo">
12          <div class="resp-touch-row">
13            <span class="resp-label">Too Small</span>
14            <div class="resp-touch-targets resp-touch-bad">
15              <button>×</button>
16              <button>−</button>
17              <button>+</button>
18            </div>
19          </div>
20          <div class="resp-touch-row">
21            <span class="resp-label">Accessible</span>
22            <div class="resp-touch-targets resp-touch-good">
23              <button>×</button>
24              <button>−</button>
25              <button>+</button>
26            </div>
27          </div>
28        </div>
29      `
30    },
31    {
32      id: 'fluid',
33      label: 'Fluid Layout',
34      caption: 'Fixed breakage vs fluid adaptation',
35      hasToggle: false, // Static comparison
36      before: `
37        <div class="resp-demo resp-fluid-demo">
38          <div class="resp-fluid-container">
39            <div class="resp-fluid-fixed">
40              <span>Fixed 400px</span>
41              <div class="resp-fluid-bar" style="width: 400px; max-width: 100%;"></div>
42            </div>
43            <div class="resp-fluid-adaptive">
44              <span>Fluid 80%</span>
45              <div class="resp-fluid-bar" style="width: 80%;"></div>
46            </div>
47          </div>
48        </div>
49      `
50    },
51    {
52      id: 'adapt',
53      label: 'Adaptive Content',
54      caption: 'Same layout vs optimized for context',
55      hasToggle: false, // Static comparison
56      before: `
57        <div class="resp-demo resp-adapt-demo">
58          <div class="resp-device resp-device-mobile">
59            <div class="resp-device-screen">
60              <div class="resp-block resp-header"></div>
61              <div class="resp-block resp-content"></div>
62            </div>
63            <span>Mobile</span>
64          </div>
65          <div class="resp-device resp-device-tablet">
66            <div class="resp-device-screen">
67              <div class="resp-block resp-header"></div>
68              <div class="resp-block-row">
69                <div class="resp-block resp-content"></div>
70                <div class="resp-block resp-content"></div>
71              </div>
72            </div>
73            <span>Tablet</span>
74          </div>
75          <div class="resp-device resp-device-desktop">
76            <div class="resp-device-screen">
77              <div class="resp-block-row">
78                <div class="resp-block resp-sidebar"></div>
79                <div class="resp-block resp-content"></div>
80              </div>
81            </div>
82            <span>Desktop</span>
83          </div>
84        </div>
85      `
86    }
87  ]
88};
89
90
91