Hugging Face's logo

Spaces:
PrinzPesia
/
ips-panel-simulator
Running

App Files Community
PrinzPesia commited on
Commit
d799f96
·
verified ·
1 Parent(s): 0a6581b

Es soll sich eine IPS Panel Simulator haben, also von der alle mögliche Technische verhalten - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +488 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ips Panel Simulator
3
- emoji: 🏃
4
- colorFrom: blue
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ips-panel-simulator
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,488 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>IPS Panel Simulator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .panel {
11
+ background: linear-gradient(135deg, #1a202c, #2d3748);
12
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
13
+ border-radius: 15px;
14
+ overflow: hidden;
15
+ position: relative;
16
+ transition: all 0.3s ease;
17
+ }
18
+
19
+ .pixel {
20
+ position: absolute;
21
+ border-radius: 2px;
22
+ transition: all 0.1s ease;
23
+ }
24
+
25
+ .glow-effect {
26
+ box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.7);
27
+ }
28
+
29
+ .dead-pixel {
30
+ background-color: black !important;
31
+ }
32
+
33
+ .stuck-pixel {
34
+ background-color: white !important;
35
+ }
36
+
37
+ @keyframes flicker {
38
+ 0% { opacity: 1; }
39
+ 50% { opacity: 0.5; }
40
+ 100% { opacity: 1; }
41
+ }
42
+
43
+ .flickering {
44
+ animation: flicker 0.1s infinite;
45
+ }
46
+
47
+ @keyframes imageRetention {
48
+ 0% { opacity: 0.1; }
49
+ 50% { opacity: 0.3; }
50
+ 100% { opacity: 0.1; }
51
+ }
52
+
53
+ .image-retention {
54
+ animation: imageRetention 2s infinite;
55
+ }
56
+
57
+ .backlight-bleed {
58
+ position: absolute;
59
+ border-radius: 50%;
60
+ filter: blur(20px);
61
+ opacity: 0.3;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
66
+ <div class="container mx-auto px-4 py-8">
67
+ <h1 class="text-4xl font-bold text-center mb-8 text-blue-400">IPS Panel Simulator</h1>
68
+
69
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
70
+ <!-- Main Panel Display -->
71
+ <div class="lg:col-span-2">
72
+ <div class="panel relative" style="width: 100%; aspect-ratio: 16/9;" id="displayPanel">
73
+ <!-- Pixels will be generated here by JavaScript -->
74
+ </div>
75
+
76
+ <div class="mt-4 flex flex-wrap gap-4 justify-center">
77
+ <button id="testPatternBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
78
+ <i class="fas fa-image mr-2"></i> Test Pattern
79
+ </button>
80
+ <button id="colorWashBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
81
+ <i class="fas fa-palette mr-2"></i> Color Wash
82
+ </button>
83
+ <button id="grayScaleBtn" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition">
84
+ <i class="fas fa-sliders-h mr-2"></i> Gray Scale
85
+ </button>
86
+ <button id="resetBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition">
87
+ <i class="fas fa-redo mr-2"></i> Reset
88
+ </button>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Control Panel -->
93
+ <div class="bg-gray-800 rounded-xl p-6">
94
+ <h2 class="text-2xl font-semibold mb-4 text-blue-300">Panel Controls</h2>
95
+
96
+ <div class="space-y-6">
97
+ <!-- Brightness Control -->
98
+ <div>
99
+ <label class="block text-sm font-medium mb-2">Brightness</label>
100
+ <input type="range" id="brightnessSlider" min="0" max="100" value="80" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
101
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
102
+ <span>0%</span>
103
+ <span id="brightnessValue">80%</span>
104
+ <span>100%</span>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Contrast Control -->
109
+ <div>
110
+ <label class="block text-sm font-medium mb-2">Contrast</label>
111
+ <input type="range" id="contrastSlider" min="0" max="100" value="50" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
112
+ <div class="flex justify-between text-xs text-gray-400 mt-1">
113
+ <span>0%</span>
114
+ <span id="contrastValue">50%</span>
115
+ <span>100%</span>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Defect Simulation -->
120
+ <div>
121
+ <label class="block text-sm font-medium mb-2">Defect Simulation</label>
122
+ <div class="grid grid-cols-2 gap-2">
123
+ <button id="deadPixelBtn" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm transition">
124
+ Dead Pixel
125
+ </button>
126
+ <button id="stuckPixelBtn" class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded text-sm transition">
127
+ Stuck Pixel
128
+ </button>
129
+ <button id="backlightBleedBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm transition">
130
+ Backlight Bleed
131
+ </button>
132
+ <button id="imageRetentionBtn" class="bg-pink-600 hover:bg-pink-700 text-white px-3 py-1 rounded text-sm transition">
133
+ Image Retention
134
+ </button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Viewing Angle -->
139
+ <div>
140
+ <label class="block text-sm font-medium mb-2">Viewing Angle</label>
141
+ <div class="flex space-x-2">
142
+ <button id="angle0Btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm transition">
143
+ <i class="fas fa-eye mr-1"></i> 0°
144
+ </button>
145
+ <button id="angle30Btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm transition">
146
+ <i class="fas fa-eye mr-1"></i> 30°
147
+ </button>
148
+ <button id="angle45Btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm transition">
149
+ <i class="fas fa-eye mr-1"></i> 45°
150
+ </button>
151
+ <button id="angle60Btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded text-sm transition">
152
+ <i class="fas fa-eye mr-1"></i> 60°
153
+ </button>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Response Time -->
158
+ <div>
159
+ <label class="block text-sm font-medium mb-2">Response Time</label>
160
+ <div class="flex space-x-2">
161
+ <button id="fastResponseBtn" class="bg-green-700 hover:bg-green-600 text-white px-3 py-1 rounded text-sm transition">
162
+ Fast (1ms)
163
+ </button>
164
+ <button id="mediumResponseBtn" class="bg-yellow-700 hover:bg-yellow-600 text-white px-3 py-1 rounded text-sm transition">
165
+ Medium (5ms)
166
+ </button>
167
+ <button id="slowResponseBtn" class="bg-red-700 hover:bg-red-600 text-white px-3 py-1 rounded text-sm transition">
168
+ Slow (10ms)
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Color Gamut -->
174
+ <div>
175
+ <label class="block text-sm font-medium mb-2">Color Gamut</label>
176
+ <div class="flex space-x-2">
177
+ <button id="srgbBtn" class="bg-blue-700 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm transition">
178
+ sRGB
179
+ </button>
180
+ <button id="adobeRgbBtn" class="bg-purple-700 hover:bg-purple-600 text-white px-3 py-1 rounded text-sm transition">
181
+ Adobe RGB
182
+ </button>
183
+ <button id="dciP3Btn" class="bg-pink-700 hover:bg-pink-600 text-white px-3 py-1 rounded text-sm transition">
184
+ DCI-P3
185
+ </button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Technical Specifications -->
193
+ <div class="mt-12 bg-gray-800 rounded-xl p-6">
194
+ <h2 class="text-2xl font-semibold mb-4 text-blue-300">Technical Specifications</h2>
195
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
196
+ <div class="bg-gray-700 p-4 rounded-lg">
197
+ <h3 class="text-lg font-medium mb-2 text-blue-200">Display Characteristics</h3>
198
+ <ul class="space-y-1 text-sm">
199
+ <li><span class="font-medium">Panel Type:</span> IPS (In-Plane Switching)</li>
200
+ <li><span class="font-medium">Resolution:</span> 1920x1080 (Full HD)</li>
201
+ <li><span class="font-medium">Refresh Rate:</span> 60Hz (variable)</li>
202
+ <li><span class="font-medium">Response Time:</span> 5ms (GTG)</li>
203
+ <li><span class="font-medium">Viewing Angles:</span> 178°/178°</li>
204
+ </ul>
205
+ </div>
206
+ <div class="bg-gray-700 p-4 rounded-lg">
207
+ <h3 class="text-lg font-medium mb-2 text-blue-200">Color Performance</h3>
208
+ <ul class="space-y-1 text-sm">
209
+ <li><span class="font-medium">Color Gamut:</span> 100% sRGB</li>
210
+ <li><span class="font-medium">Color Depth:</span> 8-bit (16.7M colors)</li>
211
+ <li><span class="font-medium">Contrast Ratio:</span> 1000:1</li>
212
+ <li><span class="font-medium">Brightness:</span> 300 cd/m²</li>
213
+ <li><span class="font-medium">HDR:</span> HDR10 compatible</li>
214
+ </ul>
215
+ </div>
216
+ <div class="bg-gray-700 p-4 rounded-lg">
217
+ <h3 class="text-lg font-medium mb-2 text-blue-200">Connectivity</h3>
218
+ <ul class="space-y-1 text-sm">
219
+ <li><span class="font-medium">Inputs:</span> 2x HDMI 2.0, 1x DisplayPort 1.4</li>
220
+ <li><span class="font-medium">USB Hub:</span> 4x USB 3.0</li>
221
+ <li><span class="font-medium">Audio:</span> 3.5mm headphone jack</li>
222
+ <li><span class="font-medium">Power:</span> 100-240V AC</li>
223
+ <li><span class="font-medium">Consumption:</span> 30W typical</li>
224
+ </ul>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <script>
231
+ document.addEventListener('DOMContentLoaded', function() {
232
+ const panel = document.getElementById('displayPanel');
233
+ const panelWidth = panel.clientWidth;
234
+ const panelHeight = panel.clientHeight;
235
+
236
+ // Create a grid of pixels (simplified for performance)
237
+ const pixelSize = 5; // Size of each "pixel"
238
+ const cols = Math.floor(panelWidth / pixelSize);
239
+ const rows = Math.floor(panelHeight / pixelSize);
240
+
241
+ let pixels = [];
242
+
243
+ function createPixelGrid() {
244
+ panel.innerHTML = '';
245
+ pixels = [];
246
+
247
+ for (let y = 0; y < rows; y++) {
248
+ for (let x = 0; x < cols; x++) {
249
+ const pixel = document.createElement('div');
250
+ pixel.className = 'pixel';
251
+ pixel.style.width = `${pixelSize}px`;
252
+ pixel.style.height = `${pixelSize}px`;
253
+ pixel.style.left = `${x * pixelSize}px`;
254
+ pixel.style.top = `${y * pixelSize}px`;
255
+ pixel.style.backgroundColor = '#1a202c';
256
+
257
+ panel.appendChild(pixel);
258
+ pixels.push(pixel);
259
+ }
260
+ }
261
+ }
262
+
263
+ createPixelGrid();
264
+
265
+ // Test Pattern
266
+ document.getElementById('testPatternBtn').addEventListener('click', function() {
267
+ const testColors = [
268
+ '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF',
269
+ '#FFFFFF', '#000000', '#808080', '#FFA500', '#800080', '#008000'
270
+ ];
271
+
272
+ const blockWidth = cols / 6;
273
+ const blockHeight = rows / 2;
274
+
275
+ pixels.forEach((pixel, index) => {
276
+ const x = index % cols;
277
+ const y = Math.floor(index / cols);
278
+
279
+ const blockX = Math.floor(x / blockWidth);
280
+ const blockY = Math.floor(y / blockHeight);
281
+
282
+ const colorIndex = blockX + blockY * 6;
283
+ if (colorIndex < testColors.length) {
284
+ pixel.style.backgroundColor = testColors[colorIndex];
285
+ }
286
+ });
287
+ });
288
+
289
+ // Color Wash
290
+ document.getElementById('colorWashBtn').addEventListener('click', function() {
291
+ let hue = 0;
292
+
293
+ const colorWashInterval = setInterval(() => {
294
+ hue = (hue + 1) % 360;
295
+ const color = `hsl(${hue}, 100%, 50%)`;
296
+
297
+ pixels.forEach(pixel => {
298
+ pixel.style.backgroundColor = color;
299
+ });
300
+ }, 50);
301
+
302
+ // Stop after 5 seconds
303
+ setTimeout(() => {
304
+ clearInterval(colorWashInterval);
305
+ }, 5000);
306
+ });
307
+
308
+ // Gray Scale
309
+ document.getElementById('grayScaleBtn').addEventListener('click', function() {
310
+ const steps = 16;
311
+ const blockWidth = cols / steps;
312
+
313
+ pixels.forEach((pixel, index) => {
314
+ const x = index % cols;
315
+ const step = Math.floor(x / blockWidth);
316
+ const grayValue = Math.floor(255 * (step / (steps - 1)));
317
+ pixel.style.backgroundColor = `rgb(${grayValue}, ${grayValue}, ${grayValue})`;
318
+ });
319
+ });
320
+
321
+ // Reset
322
+ document.getElementById('resetBtn').addEventListener('click', function() {
323
+ createPixelGrid();
324
+ panel.style.filter = 'none';
325
+ panel.querySelectorAll('.backlight-bleed').forEach(el => el.remove());
326
+ });
327
+
328
+ // Brightness Control
329
+ const brightnessSlider = document.getElementById('brightnessSlider');
330
+ const brightnessValue = document.getElementById('brightnessValue');
331
+
332
+ brightnessSlider.addEventListener('input', function() {
333
+ const value = this.value;
334
+ brightnessValue.textContent = `${value}%`;
335
+ panel.style.filter = `brightness(${value / 100}) contrast(${document.getElementById('contrastSlider').value / 100})`;
336
+ });
337
+
338
+ // Contrast Control
339
+ const contrastSlider = document.getElementById('contrastSlider');
340
+ const contrastValue = document.getElementById('contrastValue');
341
+
342
+ contrastSlider.addEventListener('input', function() {
343
+ const value = this.value;
344
+ contrastValue.textContent = `${value}%`;
345
+ panel.style.filter = `brightness(${brightnessSlider.value / 100}) contrast(${value / 100})`;
346
+ });
347
+
348
+ // Dead Pixel
349
+ document.getElementById('deadPixelBtn').addEventListener('click', function() {
350
+ const randomPixel = pixels[Math.floor(Math.random() * pixels.length)];
351
+ randomPixel.classList.add('dead-pixel');
352
+ });
353
+
354
+ // Stuck Pixel
355
+ document.getElementById('stuckPixelBtn').addEventListener('click', function() {
356
+ const randomPixel = pixels[Math.floor(Math.random() * pixels.length)];
357
+ randomPixel.classList.add('stuck-pixel');
358
+ });
359
+
360
+ // Backlight Bleed
361
+ document.getElementById('backlightBleedBtn').addEventListener('click', function() {
362
+ // Create 4 corner bleeds
363
+ const colors = ['#ffffff', '#00ffff', '#ff00ff', '#ffff00'];
364
+
365
+ for (let i = 0; i < 4; i++) {
366
+ const bleed = document.createElement('div');
367
+ bleed.className = 'backlight-bleed';
368
+ bleed.style.backgroundColor = colors[i];
369
+
370
+ const size = 50 + Math.random() * 100;
371
+ bleed.style.width = `${size}px`;
372
+ bleed.style.height = `${size}px`;
373
+
374
+ if (i === 0) {
375
+ // Top-left
376
+ bleed.style.top = '0';
377
+ bleed.style.left = '0';
378
+ } else if (i === 1) {
379
+ // Top-right
380
+ bleed.style.top = '0';
381
+ bleed.style.right = '0';
382
+ } else if (i === 2) {
383
+ // Bottom-left
384
+ bleed.style.bottom = '0';
385
+ bleed.style.left = '0';
386
+ } else {
387
+ // Bottom-right
388
+ bleed.style.bottom = '0';
389
+ bleed.style.right = '0';
390
+ }
391
+
392
+ panel.appendChild(bleed);
393
+ }
394
+ });
395
+
396
+ // Image Retention
397
+ document.getElementById('imageRetentionBtn').addEventListener('click', function() {
398
+ // Create a semi-transparent copy of the current display
399
+ const retention = document.createElement('div');
400
+ retention.className = 'image-retention absolute inset-0';
401
+ retention.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'' + panelWidth + '\' height=\'' + panelHeight + '\'><rect width=\'100%\' height=\'100%\' fill=\'black\'/></svg>")';
402
+ retention.style.backgroundSize = 'cover';
403
+
404
+ // Capture current pixel colors
405
+ const canvas = document.createElement('canvas');
406
+ canvas.width = panelWidth;
407
+ canvas.height = panelHeight;
408
+ const ctx = canvas.getContext('2d');
409
+
410
+ // Create a simplified representation (for performance)
411
+ const blockSize = 10;
412
+ for (let y = 0; y < rows; y += blockSize) {
413
+ for (let x = 0; x < cols; x += blockSize) {
414
+ const pixelIndex = y * cols + x;
415
+ if (pixelIndex < pixels.length) {
416
+ const pixel = pixels[pixelIndex];
417
+ const color = window.getComputedStyle(pixel).backgroundColor;
418
+ ctx.fillStyle = color;
419
+ ctx.fillRect(x, y, blockSize, blockSize);
420
+ }
421
+ }
422
+ }
423
+
424
+ retention.style.backgroundImage = `url(${canvas.toDataURL()})`;
425
+ panel.appendChild(retention);
426
+
427
+ // Remove after some time
428
+ setTimeout(() => {
429
+ retention.remove();
430
+ }, 10000);
431
+ });
432
+
433
+ // Viewing Angles
434
+ document.getElementById('angle0Btn').addEventListener('click', function() {
435
+ panel.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
436
+ panel.style.filter = 'brightness(1) contrast(1)';
437
+ });
438
+
439
+ document.getElementById('angle30Btn').addEventListener('click', function() {
440
+ panel.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(30deg)';
441
+ panel.style.filter = 'brightness(0.9) contrast(0.9)';
442
+ });
443
+
444
+ document.getElementById('angle45Btn').addEventListener('click', function() {
445
+ panel.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(45deg)';
446
+ panel.style.filter = 'brightness(0.8) contrast(0.8)';
447
+ });
448
+
449
+ document.getElementById('angle60Btn').addEventListener('click', function() {
450
+ panel.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(60deg)';
451
+ panel.style.filter = 'brightness(0.7) contrast(0.7) saturate(0.8)';
452
+ });
453
+
454
+ // Response Time
455
+ document.getElementById('fastResponseBtn').addEventListener('click', function() {
456
+ pixels.forEach(pixel => {
457
+ pixel.style.transition = 'all 0.001s ease';
458
+ });
459
+ });
460
+
461
+ document.getElementById('mediumResponseBtn').addEventListener('click', function() {
462
+ pixels.forEach(pixel => {
463
+ pixel.style.transition = 'all 0.005s ease';
464
+ });
465
+ });
466
+
467
+ document.getElementById('slowResponseBtn').addEventListener('click', function() {
468
+ pixels.forEach(pixel => {
469
+ pixel.style.transition = 'all 0.01s ease';
470
+ });
471
+ });
472
+
473
+ // Color Gamut
474
+ document.getElementById('srgbBtn').addEventListener('click', function() {
475
+ panel.style.filter = 'brightness(1) contrast(1)';
476
+ });
477
+
478
+ document.getElementById('adobeRgbBtn').addEventListener('click', function() {
479
+ panel.style.filter = 'brightness(1) contrast(1) saturate(1.2)';
480
+ });
481
+
482
+ document.getElementById('dciP3Btn').addEventListener('click', function() {
483
+ panel.style.filter = 'brightness(1) contrast(1) saturate(1.5)';
484
+ });
485
+ });
486
+ </script>
487
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PrinzPesia/ips-panel-simulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
488
+ </html>