From 0e0c52aabb1c13c11ce983131ad7575743ba4179 Mon Sep 17 00:00:00 2001
From: Victor Westerlund <victor@vlw.se>
Date: Sun, 8 Jun 2025 00:08:04 +0200
Subject: [PATCH] wip: 2025-06-08T00:08:04+0200 (1749334084)

---
 .../css/pages/work/deltaco/asyncapp.css       | 77 +++++++++++++++++++
 .../assets/js/pages/work/deltaco/asyncapp.js  | 11 +++
 public/assets/media/icons/desktop.svg         |  1 +
 public/assets/media/icons/mobile.svg          |  1 +
 public/work/deltaco/asyncapp.php              | 24 +++++-
 5 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/css/pages/work/deltaco/asyncapp.css
 create mode 100644 public/assets/js/pages/work/deltaco/asyncapp.js
 create mode 100644 public/assets/media/icons/desktop.svg
 create mode 100644 public/assets/media/icons/mobile.svg

diff --git a/public/assets/css/pages/work/deltaco/asyncapp.css b/public/assets/css/pages/work/deltaco/asyncapp.css
new file mode 100644
index 0000000..43fc9bd
--- /dev/null
+++ b/public/assets/css/pages/work/deltaco/asyncapp.css
@@ -0,0 +1,77 @@
+/* # Overrides */
+
+:root {
+	--primer-color-accent: 3, 255, 219;
+
+	--color-accent: rgb(var(--primer-color-accent));
+}
+
+vv-shell {
+	gap: var(--padding);
+	width: 100%;
+	display: flex;
+	max-width: 1200px;
+	overflow-x: initial;
+	flex-direction: column;
+}
+
+/* # Overlay */
+
+div.overlay {
+	gap: var(--padding);
+	fill: var(--color-accent);
+	bottom: var(--padding);
+	border: solid 2px rgba(255, 255, 255, .1);
+	display: grid;
+	padding: var(--padding);
+	position: fixed;
+	align-self: center;
+	border-radius: 12px;
+	background-color: rgba(0, 0, 0, .8);
+	grid-template-columns: repeat(2, 1fr);
+	-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);
+}
+
+div.overlay button {
+	--size: 60px;
+
+	transition: 300ms background-color;
+	width: var(--size);
+	height: var(--size);
+	border: solid 2px rgba(var(--primer-color-accent), .2);
+	padding: calc(var(--padding) / 2);
+	border-radius: 6px;
+}
+
+div.overlay button.active {
+	fill: black;
+	pointer-events: none;
+	background-color: var(--color-accent);
+}
+
+div.overlay button svg {
+	width: 100%;
+	height: 100%;
+}
+
+/* # Sections */
+
+section.preview {
+	width: 100%;
+	height: 700px;
+	border: solid 4px var(--color-accent);
+	padding: calc(var(--padding) / 2);
+	overflow: hidden scroll;
+	align-self: center;
+	border-radius: 10px;
+}
+
+section.preview.mobile {
+	width: 350px;
+}
+
+section.preview img {
+	width: 100%;
+	border-radius: 4px;
+}
\ No newline at end of file
diff --git a/public/assets/js/pages/work/deltaco/asyncapp.js b/public/assets/js/pages/work/deltaco/asyncapp.js
new file mode 100644
index 0000000..85b0400
--- /dev/null
+++ b/public/assets/js/pages/work/deltaco/asyncapp.js
@@ -0,0 +1,11 @@
+const viewToggleButtonElements = document.querySelectorAll("button.view");
+
+viewToggleButtonElements.forEach(element => {
+	element.addEventListener("click", () => {
+		// Toggle active state between buttons
+		viewToggleButtonElements.forEach(element => element.classList.toggle("active"));
+
+		// Toggle "mobile" mode on preview window
+		document.querySelector("section.preview").classList.toggle("mobile");
+	});
+});
\ No newline at end of file
diff --git a/public/assets/media/icons/desktop.svg b/public/assets/media/icons/desktop.svg
new file mode 100644
index 0000000..f7f1abc
--- /dev/null
+++ b/public/assets/media/icons/desktop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 119.3 85.4" class="desktop"><path d="m7 .2 13.3.1c3 0 5.7-.2 8.5-.3h9A967 967 0 0 0 74 .4a681.6 681.6 0 0 1 29.5.4l6.5-.1a11 11 0 0 1 5.9 1.2c1.7 1 2.6 2.3 2.8 4a533.6 533.6 0 0 1 .2 26 866 866 0 0 0 .1 34c-.1 1.6-.7 3-1.8 4.2a9.9 9.9 0 0 1-5.2 2.8 28.5 28.5 0 0 1-13.4.5A1665.4 1665.4 0 0 0 50 68.5a430 430 0 0 0-35-1H9.1c-2 0-3.7-.2-5.3-.6a4 4 0 0 1-3.1-3 15 15 0 0 1-.7-5.4l.2-7.7c0-3 .2-5.5.3-7.4.2-2 .8-19.1 1-21l.8-5.9a107.7 107.7 0 0 0 1-12.8A4.3 4.3 0 0 1 7.2.2c12.1-1-5.1 18.3-4 4a4.3 4.3 0 0 1 3.5-4h1.4c3.6.5 3.9 4 3.7 6.2l-.6 5A212.8 212.8 0 0 0 9.7 23c-.1 1.9-.8 19-1 20.8l-.3 7.3a25 25 0 0 1-1 7.1c-.5 1.7.1 2.7 2 3a109.5 109.5 0 0 0 12 1c2.3.2 5 .3 7.8.3a1634.7 1634.7 0 0 1 21 .3c4 .2 8.1.3 12.1.6a970.1 970.1 0 0 0 36.5 1.3c3 0 5.7-.3 8.4-.7 2.6-.4 4-1.6 4-3.5a217.4 217.4 0 0 0 .4-15.9 737.5 737.5 0 0 0-.2-19.3l.1-8.2c0-3.3.4-6 1-7.8.5-1.9-.3-2.9-2.6-3.1a904 904 0 0 0-13.8-1 444.8 444.8 0 0 0-22-.2 1922.9 1922.9 0 0 0-26.3.4 28420.7 28420.7 0 0 0-18.8.3 246.4 246.4 0 0 1-22 .5C3 6.1 3.9.8 6.8.3L7 .2zm9 73.6 3.5.2 7 .3 8 .3a1233.6 1233.6 0 0 0 25 1.3 334.6 334.6 0 0 1 21.7 1.8A438.6 438.6 0 0 1 94.6 79c2 0 3.1.2 3.4.3a3.1 3.1 0 0 1 2.1 3.2 3.1 3.1 0 0 1-2.5 2.8c-4.6 1-4.8-5.8-.9-6.2a3.1 3.1 0 0 1 3.2 2 3.1 3.1 0 0 1-1 3.7 3.1 3.1 0 0 1-2 .6h-.5l-2.7-.5a176.2 176.2 0 0 0-34.4-3.5 891.5 891.5 0 0 0-33-.4 239.3 239.3 0 0 1-11.8-.7 3.4 3.4 0 0 1-1-5.5 3.4 3.4 0 0 1 2.1-1h.4z" style="display:block;overflow:hidden"/></svg>
\ No newline at end of file
diff --git a/public/assets/media/icons/mobile.svg b/public/assets/media/icons/mobile.svg
new file mode 100644
index 0000000..59a702f
--- /dev/null
+++ b/public/assets/media/icons/mobile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 71.3 119.2" class="mobile"><g style="display:block;overflow:hidden"><path d="m.2 7 .1 13.3c0 3-.2 5.7-.3 8.5v9A967 967 0 0 1 .4 74a681.6 681.6 0 0 0 .4 29.5L.7 110a11 11 0 0 0 1.2 5.9c1 1.7 2.3 2.6 4 2.8a533.6 533.6 0 0 0 26 .2 866 866 0 0 1 23.4 0h4c2 .1 3.2 0 4.8-.2 1.5-.2 2.5-1.2 3.7-2.3 1.3-1 2-3.2 2.6-5.6.6-2.4.8-5.3.8-7 0-1.7.4-5.6 0-8.8-.3-3.1.2-3.3-.3-7.5-.4-4.2.3-8.5 0-13A3453.2 3453.2 0 0 0 68.4 50a430 430 0 0 1-1-35V9.1c0-2-.2-3.7-.6-5.3a4 4 0 0 0-3-3.1 15 15 0 0 0-5.4-.7l-7.7.2c-3 0-5.5.2-7.4.3-2 .2-19.1.8-21 1l-5.9.8a107.7 107.7 0 0 1-12.8 1A4.3 4.3 0 0 0 .2 7.2c-1 12.1 18.3-5.1 4-4a4.3 4.3 0 0 0-4 3.5v1.4c.5 3.6 4 3.9 6.2 3.7l5-.6A212.8 212.8 0 0 1 23 9.7c1.9-.1 19-.8 20.8-1l7.3-.3c3-.1 5.4-.4 7.1-1 1.7-.5 2.7.1 3 2a109.5 109.5 0 0 1 1 12c.2 2.3.3 5 .3 7.8a1634.7 1634.7 0 0 0 .3 21c.2 4 .3 8.1.6 12.1a970.1 970.1 0 0 1 1.3 36.5c0 3-.3 5.7-.7 8.4-.4 2.6-1.6 4-3.5 4a217.4 217.4 0 0 1-15.9.4 737.5 737.5 0 0 1-19.3-.2l-8.2.1c-3.3 0-6 .4-7.8 1-1.9.5-2.9-.3-3.1-2.6a904 904 0 0 1-1-13.8 444.8 444.8 0 0 1-.2-22 1922.9 1922.9 0 0 1 .4-26.3A28420.7 28420.7 0 0 1 5.8 29a246.4 246.4 0 0 0 .5-22c-.2-4-5.5-3.2-6-.3L.2 7z"/><path d="m442.5 406.6.1-3.6v-7c0-2.4 0-5 .2-8l.2-11.7.4-13.5c.2-4.2.4-8.3.8-12.2a1546.7 1546.7 0 0 0 2.8-27l.9-1 1.3-.7a9.4 9.4 0 0 1 3.7-1 10.3 10.3 0 0 1 3.5.5c.5.2.9.4 1.2.7.4.2.6.5.8.9 2 4.4-10.7 5.9-11.6 2v-1l.7-1 1.2-.9 1.7-.7a10.8 10.8 0 0 1 5.5-.1l1.4.5.9.8.3 1v.5l-.8 2.8a107.8 107.8 0 0 0-2.7 13.3 183.8 183.8 0 0 0-.9 35.1 341 341 0 0 0 1.1 19.6 127.9 127.9 0 0 1 0 11.1c0 .3-.2.6-.4.8a4 4 0 0 1-.7.8l-1 .7a8.8 8.8 0 0 1-2.8 1 12 12 0 0 1-4.4 0c-.5 0-.9-.2-1.3-.4l-1-.5a3 3 0 0 1-.7-.7 978 978 0 0 0-.4-1.2z" style="stroke-width:.363732" transform="matrix(0 .265 .265 0 -64.2 -103.9)"/></g></svg>
\ No newline at end of file
diff --git a/public/work/deltaco/asyncapp.php b/public/work/deltaco/asyncapp.php
index 3deb03c..75995d9 100644
--- a/public/work/deltaco/asyncapp.php
+++ b/public/work/deltaco/asyncapp.php
@@ -1 +1,23 @@
-<?= VV::include("public/work/wip") ?>
\ No newline at end of file
+<?php
+
+	use VLW\Database\Models\Work\Work;
+
+	require_once VV::root("src/Database/Models/Work/Work.php");
+
+	$asyncapp = new Work("deltaco/asyncapp");
+
+?>
+<style><?= VV::css("public/assets/css/pages/work/deltaco/asyncapp") ?></style>
+<section class="preview">
+	<img src="https://blob.vlw.se/asyncapp/test.mobile.png">
+</section>
+<section>
+	<h1><?= $asyncapp->title() ?></h1>
+	<p><?= $asyncapp->summary() ?></p>
+</section>
+
+<div class="overlay">
+	<button class="view desktop active"><?= VV::embed("public/assets/media/icons/desktop.svg") ?></button>
+	<button class="view mobile"><?= VV::embed("public/assets/media/icons/mobile.svg") ?></button>
+</div>
+<script><?= VV::js("public/assets/js/pages/work/deltaco/asyncapp") ?></script>
\ No newline at end of file