From cfa9b44894a793d4011ed380307e6966db555c75 Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Thu, 15 Sep 2022 08:31:40 +0100
Subject: [PATCH] Base: Add a `backdrop-filter` demo web page

---
 Base/res/html/misc/backdrop-filter.html | 131 ++++++++++++++++++++++++
 Base/res/html/misc/welcome.html         |   1 +
 2 files changed, 132 insertions(+)
 create mode 100644 Base/res/html/misc/backdrop-filter.html
diff --git a/Base/res/html/misc/backdrop-filter.html b/Base/res/html/misc/backdrop-filter.html
new file mode 100644
index 0000000000..f8ef00eea5
--- /dev/null
+++ b/Base/res/html/misc/backdrop-filter.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Backdrop Filter</title>
+    <style>
+        .image-box {
+          background-image: url(old-computer.png);
+          height: 240px;
+          width: 350px;
+          background-size: cover;
+          border: 2px solid black;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 5px;
+        }
+
+
+        .backdrop-box {
+          background-color: rgba(255, 255, 255, 0.1);
+          border-radius: 5px;
+          width: 50%;
+          height: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        code {
+          text-shadow: 1px 1px 2px black;
+          color: white;
+        }
+
+        body {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .blur {
+          backdrop-filter: blur(5px);
+        }
+
+        .invert {
+          backdrop-filter: invert();
+        }
+
+        .grayscale {
+          backdrop-filter: grayscale();
+        }
+
+        .brightness {
+          backdrop-filter: brightness(200%);
+        }
+
+        .contrast {
+          backdrop-filter: contrast(200%);
+        }
+
+        .sepia {
+          backdrop-filter: sepia();
+        }
+
+        .grayscale-invert-blur {
+          backdrop-filter: grayscale() invert() blur(5px);
+        }
+
+        .mixed {
+          backdrop-filter: grayscale(50%) invert(70%);
+        }
+    </style>
+  </head>
+  <body>
+    <div class="image-box">
+      <div class="backdrop-box grayscale-invert-blur">
+      </div>
+    </div>
+    <div class="image-box">
+      <div class="backdrop-box mixed">
+      </div>
+    </div>
+    <div class="image-box">
+      <div class="backdrop-box blur">
+      </div>
+    </div>
+    <div class="image-box">
+      <div class="backdrop-box invert">
+      </div>
+    </div>
+    <div class="image-box">
+      <div class="backdrop-box grayscale">
+      </div>
+    </div>
+    <div class="image-box">
+      <div class="backdrop-box brightness">
+      </div>
+    </div>
+    <div class="image-box">
+      <div class="backdrop-box contrast">
+      </div>
+    </div>
+    <div class="image-box">
+      <div class="backdrop-box sepia">
+      </div>
+    </div>
+  <script>
+    const boxes = document.querySelectorAll(".backdrop-box");
+    const filterMap = {};
+    for (const rule of document.styleSheets[0].cssRules) {
+      filterMap[rule.selectorText] = rule.style.backdropFilter;
+    }
+
+    updateLabels = () => {
+        boxes.forEach(box => {
+            const filter = box.classList[1];
+            const cssText = filterMap['.'+filter];
+            let el = document.getElementById(filter);
+            let newEl = document.createElement('code');
+            let text = document.createTextNode(box.style.backdropFilter || cssText);
+            newEl.appendChild(text);
+            newEl.id = filter;
+            if (!el)
+                box.appendChild(newEl)
+            else
+                box.replaceChild(newEl, el);
+        })
+    }
+
+    updateLabels();
+  </script>
+</html>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 32fd74c1a3..ceabf7b798 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -107,6 +107,7 @@
             <li><h3>Properties</h3></li>
             <li><a href="gradients.html">Gradients</a></li>
             <li><a href="vertical-align.html">vertical-align</a></li>
+            <li><a href="backdrop-filter.html">backdrop-filter</a></li>
             <li><a href="backgrounds.html">Backgrounds</a></li>
             <li><a href="background-repeat-test.html">Background-repeat</a></li>
             <li><a href="box-shadow.html">Box-shadow</a></li>
