-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest_page.html
More file actions
200 lines (178 loc) · 7.17 KB
/
Copy pathtest_page.html
File metadata and controls
200 lines (178 loc) · 7.17 KB
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AuraDark Testing Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #ffffff;
--text-color: #1e293b;
--card-bg: #f8fafc;
--border-color: #e2e8f0;
--accent-color: #4f46e5;
}
html.dark {
--bg-color: #0f172a;
--text-color: #f1f5f9;
--card-bg: #1e293b;
--border-color: #334155;
--accent-color: #818cf8;
}
body {
font-family: 'Outfit', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 0;
min-height: 100vh;
transition: background-color 0.3s ease, color 0.3s ease;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--border-color);
padding-bottom: 20px;
margin-bottom: 30px;
}
h1 {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.theme-toggle-btn {
background-color: var(--accent-color);
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
transition: opacity 0.2s ease;
}
.theme-toggle-btn:hover {
opacity: 0.9;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 40px;
}
.card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
}
.card h2 {
font-size: 18px;
margin-top: 0;
color: var(--accent-color);
}
.card p {
font-size: 14px;
line-height: 1.6;
color: var(--text-color);
opacity: 0.9;
}
/* Media element tests */
.media-test {
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
}
.test-img {
width: 100%;
max-height: 200px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border-color);
}
/* Stylesheet background image container */
.bg-image-container {
width: 100%;
height: 150px;
border-radius: 8px;
border: 1px solid var(--border-color);
/* Use a colorful vector pattern background to test stylesheet background scanning */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%236366f1' fill-opacity='0.15'%3E%3Cpath fill-rule='evenodd' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zM11 65c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 0c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zM34 39c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0 25c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm0-50c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm28-2c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM12 28c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 25c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4z'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
color: var(--text-color);
}
footer.page-footer {
text-align: center;
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
font-size: 12px;
opacity: 0.7;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>AuraDark Test Bench</h1>
<button class="theme-toggle-btn" id="btn-toggle-page-theme">Toggle Site Theme</button>
</header>
<div class="grid">
<!-- Card 1: Text readability -->
<div class="card">
<h2>Readability & Typography</h2>
<p>This is a text container styled to test readability. When AuraDark is enabled, standard dark modes should invert this page's bright white background to dark charcoal, while converting this dark text to light gray or white.</p>
<p>In <strong>E-Paper</strong> mode, this page should render a warm e-paper color background (#f5f2eb) with dark charcoal text and e-ink grayscale filters, mirroring an e-ink screen.</p>
</div>
<!-- Card 2: Image preservation -->
<div class="card media-test">
<h2>Media Re-Inversion</h2>
<!-- Test image with rich positive colors -->
<img class="test-img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff007f;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2300f2fe;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='200' fill='url(%23grad)' /%3E%3Ccircle cx='200' cy='100' r='50' fill='%23fff' fill-opacity='0.3' /%3E%3Ctext x='50%25' y='55%25' font-family='sans-serif' font-size='20' font-weight='bold' fill='%23fff' text-anchor='middle'%3EMedia Elements%3C/text%3E%3C/svg%3E" alt="Colorful test card">
<p>Images should retain their correct colors. If re-inversion works, the gradient above should look pink/blue (as designed), not green/orange.</p>
</div>
<!-- Card 3: Stylesheet background image -->
<div class="card">
<h2>Stylesheet CSS Backgrounds</h2>
<div class="bg-image-container">
Pattern Container (CSS Background)
</div>
<p>The container above has a background pattern loaded via external CSS styles. AuraDark should detect it dynamically using MutationObservers and re-invert it to keep pattern colors natural.</p>
</div>
<!-- Card 4: Smart Preservation testing -->
<div class="card">
<h2>Smart Dark Mode Preservation</h2>
<p>Click the <strong>Toggle Site Theme</strong> button in the header. This will switch this page to its native dark theme.</p>
<p>When the page is in its native dark theme, AuraDark should automatically detect it and <strong>preserve</strong> it (no inversion applied), while still allowing you to adjust brightness, contrast, sepia, and grayscale filters.</p>
</div>
</div>
<footer class="page-footer">
AuraDark Testing Suite • Open this file locally in Brave or Chrome with developer mode loaded.
</footer>
</div>
<script>
const toggleBtn = document.getElementById('btn-toggle-page-theme');
// Toggle dark class on html element
toggleBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
</script>
</body>
</html>