diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100755
index 0000000..867c373
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,60 @@
+:root {
+ --color-background: 0,0,0;
+ --color-contrast: 255,255,255;
+}
+
+html,
+body {
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgb(var(--color-background));
+ color: rgba(var(--color-contrast));
+ font-family: "Courier New", Courier, monospace;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+#play {
+ display: inline-block;
+ background-color: rgb(var(--color-contrast));
+ color: rgba(var(--color-background));
+ padding: 20px;
+ font-size: 18px;
+}
+
+footer {
+ position: fixed;
+ box-sizing: border-box;
+ padding: 0 20px;
+ left: 0;
+ bottom: 0;
+}
+
+@media (pointer: fine) {
+ #play:not(.unsupported) {
+ cursor: pointer;
+ }
+}
+
+@media (hover: hover) {
+ #play:not(.unsupported) {
+ transition: 100ms background-color,100ms color;
+ cursor: pointer;
+ }
+
+ #play:not(.unsupported):hover {
+ background-color: rgba(var(--color-contrast),.15);
+ color: rgb(var(--color-contrast));
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+}
\ No newline at end of file
diff --git a/assets/js/modules/WindowManager.mjs b/assets/js/modules/WindowManager.mjs
new file mode 100755
index 0000000..c6b22ab
--- /dev/null
+++ b/assets/js/modules/WindowManager.mjs
@@ -0,0 +1,40 @@
+import { default as Monkeydo } from "./monkeydo/Monkeydo.mjs";
+
+export default class WindowManager {
+ constructor() {
+ const self = this;
+
+ this.channels = {
+ lyrics: new BroadcastChannel("lyrics"),
+ credits: new BroadcastChannel("credits"),
+ art: new BroadcastChannel("art")
+ };
+
+ const methods = {
+ self: self,
+ pushText: (target,text) => {
+ const channels = self.channels[target];
+ for(const channel of channels) {
+ channel.postMessage(["PUSH_TEXT",text]);
+ }
+ }
+ }
+
+ this.player = new Monkeydo(methods);
+ }
+
+ spawnPlayer(type) {
+ if(!type in this.channels) {
+ throw new Error(`Inavlid player type "${type}"`);
+ }
+
+ // TODO
+ //const player = new PlayerWindow(type);
+ }
+
+ play() {
+ this.spawnPlayer("lyrics");
+ this.spawnPlayer("credits");
+ this.spawnPlayer("art");
+ }
+}
\ No newline at end of file
diff --git a/assets/js/script.mjs b/assets/js/script.mjs
new file mode 100755
index 0000000..7ab4a51
--- /dev/null
+++ b/assets/js/script.mjs
@@ -0,0 +1,16 @@
+import { default as Player } from "./modules/WindowManager.mjs";
+
+const play = document.getElementById("play");
+const message = document.getElementById("message");
+
+try {
+ if(typeof BroadcastChannel !== "function") {
+ throw new Error("BroadcastChannel API is not supported");
+ }
+ const player = new Player();
+ play.addEventListener("click",() => player.play());
+} catch(error) {
+ play.classList.add("unsupported");
+ play.innerText = "Your browser can not play this demo";
+ message.innerText = error;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..fa3ddba
--- /dev/null
+++ b/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ Still Alive
+
+
+
+
+ Still Alive
+
+
+
+
+
+
\ No newline at end of file
diff --git a/player.html b/player.html
new file mode 100755
index 0000000..4737595
--- /dev/null
+++ b/player.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file