From 6bbb6926da499af292962ec395c299f0de1236be Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Tue, 26 Nov 2024 16:35:10 +0100 Subject: [PATCH] wip: 2024-11-26T08:29:42+0100 (1732606182) --- public/assets/css/pages/playground/index.css | 69 ++++++++++++++++++ .../playground/super-secret-settings.css | 52 +++++++++++++ public/assets/js/pages/playground/index.js | 16 ++++ .../pages/playground/super-secret-settings.js | 37 ++++++++++ public/assets/media/playground/a.gif | Bin 0 -> 57 bytes public/assets/media/playground/coffee.gif | Bin 0 -> 169 bytes public/assets/media/playground/d.gif | Bin 0 -> 60 bytes public/assets/media/playground/g.gif | Bin 0 -> 60 bytes public/assets/media/playground/l.gif | Bin 0 -> 61 bytes public/assets/media/playground/n.gif | Bin 0 -> 59 bytes public/assets/media/playground/o.gif | Bin 0 -> 58 bytes public/assets/media/playground/p.gif | Bin 0 -> 59 bytes public/assets/media/playground/playground.png | Bin 0 -> 129 bytes public/assets/media/playground/r.gif | Bin 0 -> 59 bytes public/assets/media/playground/u.gif | Bin 0 -> 60 bytes public/assets/media/playground/y.gif | Bin 0 -> 60 bytes public/playground/index.php | 20 +++++ public/playground/super-secret-settings.php | 11 +++ 18 files changed, 205 insertions(+) create mode 100644 public/assets/css/pages/playground/index.css create mode 100644 public/assets/css/pages/playground/super-secret-settings.css create mode 100644 public/assets/js/pages/playground/index.js create mode 100644 public/assets/js/pages/playground/super-secret-settings.js create mode 100644 public/assets/media/playground/a.gif create mode 100644 public/assets/media/playground/coffee.gif create mode 100644 public/assets/media/playground/d.gif create mode 100644 public/assets/media/playground/g.gif create mode 100644 public/assets/media/playground/l.gif create mode 100644 public/assets/media/playground/n.gif create mode 100644 public/assets/media/playground/o.gif create mode 100644 public/assets/media/playground/p.gif create mode 100644 public/assets/media/playground/playground.png create mode 100644 public/assets/media/playground/r.gif create mode 100644 public/assets/media/playground/u.gif create mode 100644 public/assets/media/playground/y.gif create mode 100644 public/playground/index.php create mode 100644 public/playground/super-secret-settings.php diff --git a/public/assets/css/pages/playground/index.css b/public/assets/css/pages/playground/index.css new file mode 100644 index 0000000..1857915 --- /dev/null +++ b/public/assets/css/pages/playground/index.css @@ -0,0 +1,69 @@ +:root { + --primer-color-accent: 255, 255, 255; + --color-accent: rgb(var(--primer-color-accent)); +} + +body { + background-color: #06c; + background-image: + linear-gradient(rgba(255,255,255,0.2) 2px, transparent 2px), + linear-gradient(90deg, rgba(255,255,255,0.2) 2px, transparent 1px), + linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) + ; + background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; + background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; +} + +header { + background-color: transparent; +} + +img { + image-rendering: pixelated; +} + +/* # Sections */ + +/* ## Title */ + +section.title { + gap: var(--padding); + display: grid; + align-items: center; + justify-items: center; + grid-template-columns: repeat(10, 1fr); + min-height: 30vh; +} + +section.title img { + --outline-width: 5px; + --outline-color: black; + + width: 100%; + transform: translateY(-10px); + animation: bouncy 1s infinite alternate ease-in-out; + filter: + drop-shadow(0 10px 0 blue) + drop-shadow(0 vaR(--outline-width) 0 var(--outline-color)) + drop-shadow(0 calc(var(--outline-width) * -1) 0 var(--outline-color)) + drop-shadow(vaR(--outline-width) 0 0 var(--outline-color)) + drop-shadow(calc(var(--outline-width) * -1) 0 0 var(--outline-color)) + ; +} + +@keyframes bouncy { + 25% { transform: translateY(10px); } + 100% { transform: translateY(10px); } +} + +/* ## Coffee */ + +section.coffee { + display: grid; + grid-template-columns: 100px 1fr; +} + +section.coffee img { + height: 100%; +} \ No newline at end of file diff --git a/public/assets/css/pages/playground/super-secret-settings.css b/public/assets/css/pages/playground/super-secret-settings.css new file mode 100644 index 0000000..46e35a0 --- /dev/null +++ b/public/assets/css/pages/playground/super-secret-settings.css @@ -0,0 +1,52 @@ +/* # Sections */ + +super-secret-settings { + position: fixed; + top: 5px; + left: 5px; + width: 400px; + fill: white; + color: white; + z-index: 1000; + border: solid 1px white; + background-color: rgb(0, 102, 204); + box-shadow: + 0 0 0 5px black, + 0 0 40px 10px rgba(0, 0, 0, .4); +} + +/* ## Header */ + +super-secret-settings section.header { + display: grid; + align-items: center; + border-bottom: solid 1px white; + grid-template-columns: 1fr repeat(2, var(--running-size)); + height: var(--running-size); + cursor: grab; +} + +super-secret-settings section.header:active { + cursor: grabbing; +} + +super-secret-settings section.header p { + pointer-events: none; + padding: 0 var(--padding); +} + +super-secret-settings section.header svg { + width: calc(var(--padding) * 1.5); + margin: auto; +} + +super-secret-settings section.header button { + height: 100%; + border-left: solid 1px var(--border-color); +} + +/* ## Body */ + +super-secret-settings section.body { + padding: var(--padding); +} \ No newline at end of file diff --git a/public/assets/js/pages/playground/index.js b/public/assets/js/pages/playground/index.js new file mode 100644 index 0000000..107e687 --- /dev/null +++ b/public/assets/js/pages/playground/index.js @@ -0,0 +1,16 @@ +import { Elevent } from "/assets/js/modules/npm/Elevent.mjs"; + +new Elevent("click", document.querySelector("section.sss button"), () => { + const SSS_TAG_NAME = "super-secret-settings"; + + let sssElement = document.querySelector(SSS_TAG_NAME); + + // Create SSS element if one does not exist + if (!sssElement) { + sssElement = document.createElement(SSS_TAG_NAME); + document.body.appendChild(sssElement); + } + + // Navigate SSS element to playground page + new vegvisir.Navigation("/playground/super-secret-settings").navigate(sssElement); +}); \ No newline at end of file diff --git a/public/assets/js/pages/playground/super-secret-settings.js b/public/assets/js/pages/playground/super-secret-settings.js new file mode 100644 index 0000000..6823edb --- /dev/null +++ b/public/assets/js/pages/playground/super-secret-settings.js @@ -0,0 +1,37 @@ +import { Elevent } from "/assets/js/modules/npm/Elevent.mjs"; + +const sssElement = document.querySelector("super-secret-settings"); +sssElement._size = sssElement.getBoundingClientRect(); + +const borderWidth = 5; +const clampRight = (window.innerWidth - sssElement._size.width) - (borderWidth * 3); +const clampBottom = (window.innerHeight - sssElement._size.height) - (borderWidth * 3); + +const moveWindow = new Elevent("mousemove", null, (event) => { + const y = Math.max(borderWidth, Math.min(clampBottom, (event.clientY - 40))); + const x = Math.max(borderWidth, Math.min(clampRight, event.clientX - (sssElement._size.width / 2))); + + sssElement.style.transform = `translate(${x}px, ${y}px)`; +}) + +new Elevent("mousedown", sssElement.querySelector(".header"), (event) => { + event.stopPropagation(); + + if (event.target !== sssElement.querySelector(".header")) { + return; + } + + // Prevent element selection while dragging + document.body.style.userSelect = "none"; + + // Bind mousemove on body + moveWindow.bind(document.body); + + // Unbind mousemove and restore state + new Elevent("mouseup", document.body, () => { + document.body.style.userSelect = null; + moveWindow.remove(document.body); + }); +}); + +new Elevent("click", sssElement.querySelector(".header button"), () => sssElement.remove()); \ No newline at end of file diff --git a/public/assets/media/playground/a.gif b/public/assets/media/playground/a.gif new file mode 100644 index 0000000000000000000000000000000000000000..b929bf1f8892643f6b511018b2cd0335cfcc3455 GIT binary patch literal 57 zcmZ?wbhEHbWMklBC}3bv{K>+|z`)3$!vF*zvBv-Z|AW|Iz{J(kFR^gW{YR0T7#OSp DD|rll literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/coffee.gif b/public/assets/media/playground/coffee.gif new file mode 100644 index 0000000000000000000000000000000000000000..5823f477ae2ec1de161d5418db94def492acdf62 GIT binary patch literal 169 zcmZ?wbhEHb+|z`)3$!vF*zvBv-Z|AW|Iz{J}kyIi1h?StYDquoi2 G4AuZmE)4bn literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/g.gif b/public/assets/media/playground/g.gif new file mode 100644 index 0000000000000000000000000000000000000000..5016a2f50b593128b019f9636ac4d4eedf313f96 GIT binary patch literal 60 zcmZ?wbhEHbWMklBC}3bv{K>+|z`)3$!vF*zvBv-Z|AW|Iz{K0qFCl%5cUn`Q+w34l G25SIES`0t{ literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/l.gif b/public/assets/media/playground/l.gif new file mode 100644 index 0000000000000000000000000000000000000000..8e93bd3a88db33ab98f4464e1c50e477cfe3f9b8 GIT binary patch literal 61 zcmZ?wbhEHbWMklBC}3bv{K>+|z`)3$!vF*zvBv-Z|AW|Iz{JPWl(=&GZ<(fGv$Rd; HSQ)GVTEGp0 literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/n.gif b/public/assets/media/playground/n.gif new file mode 100644 index 0000000000000000000000000000000000000000..322a3ea0d0ab5eae053ed9f14ab47c06e8c4f751 GIT binary patch literal 59 zcmZ?wbhEHbWMklBC}3bv{K>+|z`)3$!vF*zvBv-Z|AW|Iz{JziFR`%Z_M>7pzhDLi FYXCwy3~K-Y literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/o.gif b/public/assets/media/playground/o.gif new file mode 100644 index 0000000000000000000000000000000000000000..ac16e074457bbe309f038e9eb5e33d4f7579b5e9 GIT binary patch literal 58 zcmZ?wbhEHbWMklBC}3bv{K>+|z`)3$!vF*zvBv-Z|AW|Iz{K6sFR`%Z_M_sJO-u~d E067N?@Bjb+ literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/p.gif b/public/assets/media/playground/p.gif new file mode 100644 index 0000000000000000000000000000000000000000..ff186e94880e682583bb05fdabd6e9a145a3db5e GIT binary patch literal 59 zcmZ?wbhEHbWMklBC}3bv{K>+|z`)3$!vF*zvBv-Z|AW|Iz{JziFR^gW{b`Xx0p;8b F)&N0@3}yfT literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/playground.png b/public/assets/media/playground/playground.png new file mode 100644 index 0000000000000000000000000000000000000000..ce3783cba57d8be39d7f399eb634f2bc1291cf5f GIT binary patch literal 129 zcmeAS@N?(olHy`uVBq!ia0vp^en8B{2qYMcBtlOCDW;MjzhDN2vdL#HfIKTt7srr_ zTfWB@@*Xe{U^%FN^6z5p1a1xw!A5>Dmrm8&&C7aL+}N5W$T5Gjn`PBsUkRJtw%UiI a3%AEBuL)WkRIla^GTYPD&t;ucLK6TYktS&X literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/r.gif b/public/assets/media/playground/r.gif new file mode 100644 index 0000000000000000000000000000000000000000..609666eeb4d0573c470c75a3d44b2b6164920eed GIT binary patch literal 59 zcmZ?wbhEHbWMklBC}3bv{K>+|z`)3$!vF*zvBv-Z|AW|Iz{JziFR`#@b+|z`)3$!vF*zvBv-Z|AW|Iz{JZUl(u5}sRz-Qx8B&K H#b6BpQT`4| literal 0 HcmV?d00001 diff --git a/public/assets/media/playground/y.gif b/public/assets/media/playground/y.gif new file mode 100644 index 0000000000000000000000000000000000000000..511e62642b40edee35b5061da691620c513446e5 GIT binary patch literal 60 zcmZ?wbhEHbWMklBC}3bv{K>+|z`)3$!vF*zvBv-Z|AW|Iz{JZUl(u5}saZLKp}RL| HGgt!vN9+vL literal 0 HcmV?d00001 diff --git a/public/playground/index.php b/public/playground/index.php new file mode 100644 index 0000000..06fbd62 --- /dev/null +++ b/public/playground/index.php @@ -0,0 +1,20 @@ + +
+ + + $char): ?> + " style="animation-delay:ms"> + + +
+
+ +
+
+ "> +
+

How much coffee is enough coffee?

+

Woah, I 've had 4 cups of coffee today (counting from and to midnight). That's about the average amount for me (from the last 30 days)

+
+
+ \ No newline at end of file diff --git a/public/playground/super-secret-settings.php b/public/playground/super-secret-settings.php new file mode 100644 index 0000000..43f1e32 --- /dev/null +++ b/public/playground/super-secret-settings.php @@ -0,0 +1,11 @@ + +
+

Super Secret Settings

+ + +
+
+

Do you have what it takes to click this button?

+ +
+ \ No newline at end of file