Added a FearLights widget

cheerlights · Oct 31, 2024 · 1fe48e6 · 1fe48e6
1 parent e2f7cae
commit 1fe48e6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -21,10 +21,15 @@ This widget displays a particle effect inspired by the current CheerLights color
 
 > [Particle CheerLights Widget](https://widgets.cheerlights.com/particle.html)
 
-## Logo
+## CheerLights Logo
 This widget displays the CheerLights logo with a background color that changes to the current CheerLights color.
 
-> [Logo CheerLights Widget](https://widgets.cheerlights.com/logo.html)
+> [CheerLights Logo CheerLights Widget](https://widgets.cheerlights.com/logo.html)
+
+## FearLights Logo
+This widget displays the FearLights logo with a background color that changes to the current CheerLights color. This is a Halloween-themed widget.
+
+> [FearLights Logo CheerLights Widget](https://widgets.cheerlights.com/fearlights.html)
 
 ## Embed CheerLights Widgets on a Home Assistant Dashboard
 

diff --git a/assets/images/FearLights-Logo-Transparent.png b/assets/images/FearLights-Logo-Transparent.png
diff --git a/fearlights.html b/fearlights.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="assets/images/CheerLights-Icon.png">
+
+    <title>CheerLights JavaScript Widget - FearLights</title>
+    <meta name="description" content="A widget that displays the FearLights logo with a background color that changes to the current CheerLights color using the CheerLights JavaScript library." />
+
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+        }
+
+        #center-logo {
+            max-width: 90%;
+            max-height: 90vh;
+            object-fit: contain;
+        }
+    </style>
+
+  </head>
+
+  <body>
+    <img src="/assets/images/FearLights-Logo-Transparent.png" alt="FearLights Logo" id="center-logo">
+
+    <script src="https://cdn.jsdelivr.net/gh/cheerlights/[email protected]/cheerlights.js"></script>
+
+    <script>
+        CheerLights.getColor(setBodyBackgroundColor);
+
+        const REFRESH_INTERVAL = 5000;
+        const CHEERLIGHTS_URL = 'https://cheerlights.com/halloween/';
+
+        setInterval(() => CheerLights.getColor(setBodyBackgroundColor), REFRESH_INTERVAL);
+
+        function setBodyBackgroundColor(color) {
+            if (!color || !color.htmlName) {
+                console.error('Invalid color data received');
+                return;
+            }
+            document.body.style.backgroundColor = color.htmlName;
+            document.body.title = `Current CheerLights color: ${color.htmlName}`;
+        }
+
+        document.body.addEventListener('click', () => {
+            window.open(CHEERLIGHTS_URL, '_blank');
+        });
+    </script>
+
+  </body>
+</html>
diff --git a/logo.html b/logo.html
@@ -7,7 +7,7 @@
     <link rel="icon" type="image/png" href="assets/images/CheerLights-Icon.png">
 
     <title>CheerLights JavaScript Widget - Logo</title>
-    <meta name="description" content="A widget that displays the CheerLights logo using the CheerLights JavaScript library." />
+    <meta name="description" content="A widget that displays the CheerLights logo with a background color that changes to the current CheerLights color using the CheerLights JavaScript library." />
 
     <style>
         body {