diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css new file mode 100644 index 0000000..de0ac3e --- /dev/null +++ b/demo/assets/css/style.css @@ -0,0 +1,147 @@ +/* Global */ + +:root { + --theme-color: #212121; + --theme-padding: 8vh; + --transition-speed: 300ms; +} + +* { + font-family: "Roboto Mono","sans-serif"; + margin: 0; +} + +*::selection { + background: var(--theme-color); + color: white; +} + +.flexCenter { + display: flex; + justify-content: center; + align-items: center; +} + +/* main */ + +main { + width: 100vw; + height: 100vh; + display: flex; + overflow: hidden; +} + +main .block { + width: 50%; + height: 100%; +} + +main .block:first-child { + transform: translate(-50vw); +} + +main .block:last-child { + transform: translate(50vw); +} + +main.active .block { + transform: translate(0); +} + +main .block > div { + width: calc(100% - var(--theme-padding) * 2); + height: calc(100% - var(--theme-padding) * 2); +} + +/* main > #pattern */ + +main #pattern { + background: white; +} + +main #pattern .birdplane { + --size: 10vw; + --rotation: -45deg; + position: absolute; + top: 25vh; + left: 0%; + width: 0; + height: 0; + border-left: calc(var(--size) * 2) solid transparent; + border-right: calc(var(--size)) solid transparent; + border-top: calc(var(--size) / 2) solid var(--theme-color); + transform-origin: 100% 0%; + transform: rotate(var(--rotation)); + opacity: .13; + animation: wingLeft 3s infinite alternate ease; +} + +main #pattern .birdplane:last-of-type { + transform: rotate(calc(var(--rotation) * 1.9)) scaleY(-1); + animation: wingRight 3s infinite alternate ease; +} + +@keyframes wingLeft { + to { + transform: rotate(calc(var(--rotation) + 2deg)); + } +} + +@keyframes wingRight { + to { + transform: rotate(calc(var(--rotation) * 1.95)) scaleY(-1); + } +} + +/* main > #controls */ + +main #controls { + background: var(--theme-color); +} + +main #controls #text { + color: white; + text-align: center; +} + +main #controls #text *::selection { + background: white; + color: var(--theme-color); +} + +main #controls #text h1 { + font-size: 9vh; + text-transform: uppercase; +} + +main #controls #text h2 { + font-size: 5vh; + font-weight: normal; +} + +main #controls #text h2:last-of-type { + width: 70%; + font-size: 3vh; + margin-left: auto; + margin-right: auto; +} + +main #controls #pick { + margin-top: auto; +} + +@media screen and (max-width: 1000px) { + main { + flex-wrap: wrap; + } + + main .block { + width: 100%; + height: 50%; + } + + main #pattern .birdplane { + --size: 22vw; + top: 20vw; + } +} \ No newline at end of file diff --git a/demo/assets/fonts/RobotoMono-Bold.ttf b/demo/assets/fonts/RobotoMono-Bold.ttf new file mode 100644 index 0000000..900fce6 Binary files /dev/null and b/demo/assets/fonts/RobotoMono-Bold.ttf differ diff --git a/demo/assets/fonts/RobotoMono-Bold.woff2 b/demo/assets/fonts/RobotoMono-Bold.woff2 new file mode 100644 index 0000000..3884344 Binary files /dev/null and b/demo/assets/fonts/RobotoMono-Bold.woff2 differ diff --git a/demo/assets/fonts/RobotoMono-Regular.ttf b/demo/assets/fonts/RobotoMono-Regular.ttf new file mode 100644 index 0000000..7c4ce36 Binary files /dev/null and b/demo/assets/fonts/RobotoMono-Regular.ttf differ diff --git a/demo/assets/fonts/RobotoMono-Regular.woff2 b/demo/assets/fonts/RobotoMono-Regular.woff2 new file mode 100644 index 0000000..1f715de Binary files /dev/null and b/demo/assets/fonts/RobotoMono-Regular.woff2 differ diff --git a/demo/assets/js/modules/NiceColor.mjs b/demo/assets/js/modules/NiceColor.mjs new file mode 100644 index 0000000..cf6f18b --- /dev/null +++ b/demo/assets/js/modules/NiceColor.mjs @@ -0,0 +1,53 @@ +export class NiceColor { + + constructor() { + this.hex = [ + null, // R + null, // G + null // B + ], + this.selected = this.randomDec(3) + } + + // 8-bit + randomHex() { + return [...Array(2)].map(() => Math.floor(Math.random() * 16).toString(16)).join(''); + } + + randomDec(ceil) { + return Math.floor(Math.random() * ceil) + 0; + } + + // Generate a 32-bit hexadecimal RGB string + generate() { + let binary = this.randomDec(2); + + this.hex[this.selected] = this.randomHex(); + + this.hex.forEach((value,index) => { + // Continue if index is our special value + if(this.hex[index] !== null) { + return; + } + + // Assign index and ignore if(binary) next run + if(binary) { + this.hex[index] = "16"; + binary = 0; + return; + } + + // Assign index and enter if(binary) next run + binary = 1; + this.hex[index] = "ff"; + }) + } + + // Generate and return HEX-color (#RRGGBB) + get() { + this.generate(); + + return "#" + this.hex.join(""); + } + +} diff --git a/demo/assets/js/script.js b/demo/assets/js/script.js new file mode 100644 index 0000000..c5e188a --- /dev/null +++ b/demo/assets/js/script.js @@ -0,0 +1,49 @@ +import { NiceColor } from "./modules/NiceColor.mjs"; + +class Main { + + static element = document.getElementsByTagName("main")[0]; + + static setTheme(hexcolor) { + if(hexcolor) { + hexcolor = "#" + hexcolor; + } + const themeColor = new NiceColor(); + const color = hexcolor || themeColor.get(); // Generate a color if hexcolor is strict falsey + + // Update parent theme-color and readyState if we can + try { + parent.hook_setTheme(color); + parent.hook_ready(); + } catch { + // Looks like we're not contained + } + + document.documentElement.style.setProperty("--theme-color",color); // Set CSS :root variable + document.getElementById("themeColor").innerText = color; + } + + static getParentTheme() { + const searchParams = new URLSearchParams(window.location.search); + + Main.element.classList.add("active"); + + if(searchParams.has("color")) { + return searchParams.get("color"); + } + + return false; + } + + static init() { + Main.setTheme(Main.getParentTheme()); + + // Let me do something before I'm closed by the parent (1000ms) + window.hook_close = () => { + Main.element.classList.remove("active"); + } + } + +} + +Main.init(); \ No newline at end of file diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..b854b4e --- /dev/null +++ b/demo/index.html @@ -0,0 +1,31 @@ + + + + + + + + + Document + + +
+
+
+
+
+
+
+
+
+
+

your nice color is

+

#212121

+

refresh the page to generate a new one

+
+
+
+
+ + + \ No newline at end of file diff --git a/demo/index.zip b/demo/index.zip new file mode 100644 index 0000000..6544b29 Binary files /dev/null and b/demo/index.zip differ