mirror of
https://codeberg.org/vlw/vlw.se.git
synced 2025-09-13 21:13:40 +02:00
wip: 2025-06-08T00:08:04+0200 (1749334084)
This commit is contained in:
parent
17bd93dca9
commit
0e0c52aabb
GPG key ID:
D0AD730E1057DFC6
5 changed files with 113 additions and 1 deletions
77
public/assets/css/pages/work/deltaco/asyncapp.css
Normal file
77
public/assets/css/pages/work/deltaco/asyncapp.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
11
public/assets/js/pages/work/deltaco/asyncapp.js
Normal file
11
public/assets/js/pages/work/deltaco/asyncapp.js
Normal file
|
|
@ -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");
|
||||||
|
});
|
||||||
|
});
|
||||||
1
public/assets/media/icons/desktop.svg
Normal file
1
public/assets/media/icons/desktop.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
1
public/assets/media/icons/mobile.svg
Normal file
1
public/assets/media/icons/mobile.svg
Normal file
|
|
@ -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>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1 +1,23 @@
|
||||||
<?= VV::include("public/work/wip") ?>
|
<?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>
|
||||||
Loading…
Add table
Reference in a new issue