website/responsive-test.html at main · PivotPHP/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PivotPHP - Responsive Test</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .device-info {
            background: #7C3AED;
            color: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
        }
        .breakpoint-indicator {
            display: none;
            font-size: 18px;
            font-weight: bold;
        }
        .test-grid {
            display: grid;
            gap: 20px;
            margin: 20px 0;
        }
        .test-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border: 2px solid #e9ecef;
        }
        iframe {
            width: 100%;
            border: 2px solid #ddd;
            border-radius: 8px;
            background: white;
        }

        /* Breakpoint indicators */
        @media (max-width: 480px) {
            .mobile { display: block; }
            .test-grid { grid-template-columns: 1fr; }
            iframe { height: 600px; }
        }

        @media (min-width: 481px) and (max-width: 768px) {
            .tablet-small { display: block; }
            .test-grid { grid-template-columns: 1fr; }
            iframe { height: 700px; }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .tablet { display: block; }
            .test-grid { grid-template-columns: repeat(2, 1fr); }
            iframe { height: 800px; }
        }

        @media (min-width: 1025px) {
            .desktop { display: block; }
            .test-grid { grid-template-columns: repeat(3, 1fr); }
            iframe { height: 900px; }
        }

        .device-frames {
            display: grid;
            gap: 30px;
            margin: 30px 0;
        }

        .device-frame {
            text-align: center;
        }

        .device-frame h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .frame-wrapper {
            display: inline-block;
            padding: 20px;
            background: #f0f0f0;
            border-radius: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .viewport-info {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <div class="device-info">
            <h1>PivotPHP Responsive Test</h1>
            <p>Current viewport: <span id="viewport-size"></span></p>
            <div class="breakpoint-indicator mobile">📱 Mobile View (≤480px)</div>
            <div class="breakpoint-indicator tablet-small">📱 Large Mobile/Small Tablet (481px-768px)</div>
            <div class="breakpoint-indicator tablet">💻 Tablet View (769px-1024px)</div>
            <div class="breakpoint-indicator desktop">🖥️ Desktop View (≥1025px)</div>
        </div>

        <h2>Test Different Pages</h2>
        <div class="test-grid">
            <div class="test-card">
                <h3>Home Page</h3>
                <p>Test the main landing page with hero section and features</p>
                <a href="/" target="_blank">Open Home →</a>
            </div>
            <div class="test-card">
                <h3>Documentation</h3>
                <p>Test the documentation layout with sidebar</p>
                <a href="/docs/" target="_blank">Open Docs →</a>
            </div>
            <div class="test-card">
                <h3>Benchmarks</h3>
                <p>Test the benchmarks page with charts</p>
                <a href="/docs/benchmarks/" target="_blank">Open Benchmarks →</a>
            </div>
        </div>

        <h2>Device Previews</h2>
        <div class="device-frames">
            <div class="device-frame">
                <h3>Mobile (iPhone SE)</h3>
                <div class="frame-wrapper" style="width: 375px;">
                    <iframe src="/" style="width: 375px; height: 667px;"></iframe>
                </div>
                <div class="viewport-info">375 × 667px</div>
            </div>

            <div class="device-frame">
                <h3>Tablet (iPad)</h3>
                <div class="frame-wrapper" style="width: 768px;">
                    <iframe src="/" style="width: 768px; height: 1024px;"></iframe>
                </div>
                <div class="viewport-info">768 × 1024px</div>
            </div>
        </div>
    </div>

    <script>
        function updateViewportSize() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            document.getElementById('viewport-size').textContent = `${width} × ${height}px`;
        }

        updateViewportSize();
        window.addEventListener('resize', updateViewportSize);
    </script>
</body>
</html>