Feat: fontawesome + dynamic bg color

janisBirdsson · Jan 12, 2025 · 6c95807 · 6c95807
1 parent f2df1bd
commit 6c95807
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 0 deletions.
diff --git a/fontawesome/brands.min.js b/fontawesome/brands.min.js
diff --git a/fontawesome/fontawesome.min.js b/fontawesome/fontawesome.min.js
diff --git a/fontawesome/solid.min.js b/fontawesome/solid.min.js
diff --git a/index.html b/index.html
@@ -6,10 +6,22 @@
     <meta name="author" content="Unplugged">
     <meta name="description" content="Display a The Endless Forest pictogram">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"/>
     <link href="css/style.css" rel="stylesheet">
+
+    <script defer src="./fontawesome/brands.min.js"></script>
+    <script defer src="./fontawesome/solid.min.js"></script>
+    <script defer src="./fontawesome/fontawesome.min.js"></script>
 </head>
 <body>
+    <i class="fa-solid fa-gear fa-spin"></i>
+
+    <div class="pickr-container"></div>
     <p>Hello, world!</p>
+
+    <i class="fa-brands fa-github-square"></i>
+
+    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
     <script src="js/script.js"></script>
 </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,63 @@
+const url = new URL(window.location.href);
+let params = new URLSearchParams(document.location.search);
+let background = params.get("background");
+
+window.onload = (event) => {
+    document.body.style.backgroundColor = background;
+};
+
+
+const pickr = Pickr.create({
+    el: '.pickr-container',
+    theme: 'monolith',
+    lockOpacity: true,
+    default: background,
+
+    swatches: [
+        'rgba(244, 67, 54, 1)',
+        'rgba(233, 30, 99, 1)',
+        'rgba(156, 39, 176, 1)',
+        'rgba(103, 58, 183, 1)',
+        'rgba(63, 81, 181, 1)',
+        'rgba(33, 150, 243, 1)',
+        'rgba(3, 169, 244, 1)',
+        'rgba(0, 188, 212, 1)',
+        'rgba(0, 150, 136, 1)',
+        'rgba(76, 175, 80, 1)',
+        'rgba(139, 195, 74, 1)',
+        'rgba(205, 220, 57, 1)',
+        'rgba(255, 235, 59, 1)',
+        'rgba(255, 193, 7, 1)'
+    ],
+
+    components: {
+
+        // Main components
+        preview: true,
+        opacity: false,
+        hue: true,
+
+        // Input / output Options
+        interaction: {
+            hex: true,
+            rgba: true,
+            hsla: true,
+            hsva: true,
+            cmyk: true,
+            input: true,
+            clear: true,
+            save: true
+        }
+    }
+});
+
+pickr.on('save', color => {
+	pickr.addSwatch(color.toRGBA(0).toString());
+});
+
+
+pickr.on('change', color => {
+    document.body.style.backgroundColor = color.toRGBA(0).toString();;
+    url.searchParams.set('background', color.toHEXA(0).toString());
+    history.pushState({}, "", url);
+})