Added demo webpage

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;
+	}
+}

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("");
+	}
+
+}

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();

demo/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="assets/css/style.css">
+
+	<title>Document</title>
+</head>
+<body>
+	<main>
+		<div id="pattern" class="block flexCenter">
+			<div class="flexCenter">
+				<div class="birdplane"></div>
+				<div class="birdplane"></div>
+			</div>
+		</div>
+		<div id="controls" class="block flexCenter">
+			<div class="flexCenter">
+				<div id="text">
+					<h2>your nice color is</h2>
+					<h1 id="themeColor">#212121</h1>
+					<h2>refresh the page to generate a new one</h2>
+				</div>
+			</div>
+		</div>
+	</main>
+	<script type="module" src="assets/js/script.js"></script>
+</body>
+</html>