From 35fb9361b2113f4ebc7179b9421f5f3b8a98a6c7 Mon Sep 17 00:00:00 2001 From: Nathan Reiner Date: Thu, 28 May 2026 18:37:11 +0200 Subject: add timeline --- src/web/badge/index.css | 5 ----- src/web/badge/index.html | 3 --- src/web/badge/index.js | 1 - src/web/badge/root.zig | 8 ------- src/web/component/image/index.css | 0 src/web/component/image/index.html | 2 ++ src/web/component/image/index.js | 1 + src/web/component/image/root.zig | 8 +++++++ src/web/component/root.zig | 6 +++++ src/web/component/timeline/index.css | 9 ++++++++ src/web/component/timeline/index.html | 2 ++ src/web/component/timeline/index.js | 42 +++++++++++++++++++++++++++++++++++ src/web/component/timeline/root.zig | 8 +++++++ src/web/index.css | 7 ++++++ src/web/index.html | 3 +-- 15 files changed, 86 insertions(+), 19 deletions(-) delete mode 100644 src/web/badge/index.css delete mode 100644 src/web/badge/index.html delete mode 100644 src/web/badge/index.js delete mode 100644 src/web/badge/root.zig create mode 100644 src/web/component/image/index.css create mode 100644 src/web/component/image/index.html create mode 100644 src/web/component/image/index.js create mode 100644 src/web/component/image/root.zig create mode 100644 src/web/component/root.zig create mode 100644 src/web/component/timeline/index.css create mode 100644 src/web/component/timeline/index.html create mode 100644 src/web/component/timeline/index.js create mode 100644 src/web/component/timeline/root.zig (limited to 'src/web') diff --git a/src/web/badge/index.css b/src/web/badge/index.css deleted file mode 100644 index 3f237d6..0000000 --- a/src/web/badge/index.css +++ /dev/null @@ -1,5 +0,0 @@ -#container { - background: red; - padding: 5px; - border-radius: 5px; -} diff --git a/src/web/badge/index.html b/src/web/badge/index.html deleted file mode 100644 index dcb38e1..0000000 --- a/src/web/badge/index.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/src/web/badge/index.js b/src/web/badge/index.js deleted file mode 100644 index 60fbac5..0000000 --- a/src/web/badge/index.js +++ /dev/null @@ -1 +0,0 @@ -Z.by_id('sdf') diff --git a/src/web/badge/root.zig b/src/web/badge/root.zig deleted file mode 100644 index 5e8ea25..0000000 --- a/src/web/badge/root.zig +++ /dev/null @@ -1,8 +0,0 @@ -const z = @import("z"); - -pub const component: z.Component = .{ - .name = .badge, - .body = @embedFile("index.html"), - .style = @embedFile("index.css"), - .script = @embedFile("index.js"), -}; diff --git a/src/web/component/image/index.css b/src/web/component/image/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/web/component/image/index.html b/src/web/component/image/index.html new file mode 100644 index 0000000..918c5df --- /dev/null +++ b/src/web/component/image/index.html @@ -0,0 +1,2 @@ +
+
diff --git a/src/web/component/image/index.js b/src/web/component/image/index.js new file mode 100644 index 0000000..d88023d --- /dev/null +++ b/src/web/component/image/index.js @@ -0,0 +1 @@ +console.log(Z.by_selector('div')); diff --git a/src/web/component/image/root.zig b/src/web/component/image/root.zig new file mode 100644 index 0000000..7c8ec77 --- /dev/null +++ b/src/web/component/image/root.zig @@ -0,0 +1,8 @@ +const z = @import("z"); + +pub const component: z.Component = .{ + .name = .image, + .body = @embedFile("index.html"), + .style = @embedFile("index.css"), + .script = @embedFile("index.js"), +}; diff --git a/src/web/component/root.zig b/src/web/component/root.zig new file mode 100644 index 0000000..226f3f7 --- /dev/null +++ b/src/web/component/root.zig @@ -0,0 +1,6 @@ +const z = @import("z"); + +pub const components: []const z.Component = &.{ + @import("image/root.zig").component, + @import("timeline/root.zig").component, +}; diff --git a/src/web/component/timeline/index.css b/src/web/component/timeline/index.css new file mode 100644 index 0000000..4060deb --- /dev/null +++ b/src/web/component/timeline/index.css @@ -0,0 +1,9 @@ +#container { + width: 100%; + display: inline-grid; + gap: 0px; +} + +#container.tiling .image { + aspect-ratio: 1 / 1 !important; +} diff --git a/src/web/component/timeline/index.html b/src/web/component/timeline/index.html new file mode 100644 index 0000000..41d4617 --- /dev/null +++ b/src/web/component/timeline/index.html @@ -0,0 +1,2 @@ +
+
diff --git a/src/web/component/timeline/index.js b/src/web/component/timeline/index.js new file mode 100644 index 0000000..0bbbcc2 --- /dev/null +++ b/src/web/component/timeline/index.js @@ -0,0 +1,42 @@ +const container = Z.by_id('container'); + +function getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} + +for (let i = 0; i < 100; ++i) { + container.appendChild(Z.native('div', { + className: 'image', + style: { + background: getRandomColor(), + aspectRatio: '1 / ' + (Math.random() + 0.5), + }, + })); +} + +const set_number_of_rows = (n) => { + container.style.gridTemplateColumns = '1fr '.repeat(n); + + container.classList.toggle('tiling', n != 1); +}; + +let zoom_state = 5; +set_number_of_rows(zoom_state); + + +Z.document.onwheel = (event) => { + if (!event.ctrlKey) { + return; + } + + event.preventDefault(); + + zoom_state += event.wheelDeltaY / 120; + zoom_state = Math.max(zoom_state, 1); + set_number_of_rows(zoom_state); +} diff --git a/src/web/component/timeline/root.zig b/src/web/component/timeline/root.zig new file mode 100644 index 0000000..9faa40e --- /dev/null +++ b/src/web/component/timeline/root.zig @@ -0,0 +1,8 @@ +const z = @import("z"); + +pub const component: z.Component = .{ + .name = .timeline, + .body = @embedFile("index.html"), + .style = @embedFile("index.css"), + .script = @embedFile("index.js"), +}; diff --git a/src/web/index.css b/src/web/index.css index a93ea47..b5647b1 100644 --- a/src/web/index.css +++ b/src/web/index.css @@ -1,4 +1,11 @@ body { padding: 0; margin: 0; + width: 100vw; + height: 100vh; +} + +#timeline { + display: block; + height: 100%; } diff --git a/src/web/index.html b/src/web/index.html index 3bf9953..d2bc6fe 100644 --- a/src/web/index.html +++ b/src/web/index.html @@ -1,3 +1,2 @@ - - Hello Z! + -- cgit v1.2.3-70-g09d2