From 094d3e0e1370f2f8b3619ba6cea8b33ac83dceed Mon Sep 17 00:00:00 2001
From: LLLL Colonq <llll@colonq>
Date: Fri, 12 Jan 2024 14:54:22 -0500
Subject: Update frontend

---
 fig-frontend/client/src/components/backdrop.ts | 41 ++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 fig-frontend/client/src/components/backdrop.ts

(limited to 'fig-frontend/client/src/components/backdrop.ts')

diff --git a/fig-frontend/client/src/components/backdrop.ts b/fig-frontend/client/src/components/backdrop.ts
new file mode 100644
index 0000000..d35d205
--- /dev/null
+++ b/fig-frontend/client/src/components/backdrop.ts
@@ -0,0 +1,41 @@
+import { html, css, LitElement, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import * as Config from "../config";
+
+import blueprint from "../assets/blueprint.jpg";
+
+@customElement("fig-backdrop")
+export class Backdrop extends LitElement {
+  static styles = css`
+#backdrop {
+  z-index: -2;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-image: url("${unsafeCSS(new URL(blueprint, Config.SCRIPT_URL))}");
+}
+#blur {
+  z-index: -1;
+  backdrop-filter: blur(3px);
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-size: 100px 100px;
+  background-position: -20px -20px;
+  background-image:
+      linear-gradient(to right, lightgrey 1px, transparent 1px),
+      linear-gradient(to bottom, lightgrey 1px, transparent 1px);
+}
+`;
+  render() {
+    return html`
+<div id="backdrop"></div>
+<div id="blur"></div>
+`;
+  }
+}
-- 
cgit v1.2.3