Build for f601b88

.gitignore

@@ -0,0 +1,6 @@
+pictures/lab/storage_2024_03_07/.tmp/*
+pictures/radioburzy/2024_leden/.tmp/*
+
+!.gitignore
+!.nojekyll
+!.github

.nojekyll

@@ -0,0 +1 @@
+

CNAME

@@ -0,0 +1 @@
+zap.devvie.cc

assets/script.js

@@ -0,0 +1,96 @@
+var current_image_index = 0;
+var image_paths = [
+    {{image_paths}}
+];
+
+function open_image_viewer(image_path) {
+    current_image_index = image_paths.indexOf(image_path);
+    update_image_viewer();
+    document.querySelector(".image-viewer").style.display = "flex";
+    document.body.style.overflow = "hidden";
+
+    document.addEventListener("keydown", handle_keypress);
+
+    // Add event listener for mouse wheel
+    document.querySelector(".gallery").addEventListener("wheel", function(event) {
+        if (event.deltaY < 0) {
+            // Scrolling up
+            navigate_image(event, -1);
+        } else {
+            // Scrolling down
+            navigate_image(event, 1);
+        }
+    });
+}
+
+function close_image_viewer() {
+    var img = document.getElementById("viewer-image");
+    img.style.transform = "scale(1)";
+    document.querySelector(".image-viewer").style.display = "none";
+    document.body.style.overflow = "auto";
+
+    document.removeEventListener("keydown", handle_keypress);
+    document.querySelector(".gallery").removeEventListener("wheel", handle_wheel);
+}
+
+function navigate_image(event, direction) {
+    var img = document.getElementById("viewer-image");
+    img.style.transform = "scale(1)";
+    event.stopPropagation();
+    current_image_index += direction;
+    if (current_image_index < 0) {
+        current_image_index = image_paths.length - 1;
+    } else if (current_image_index >= image_paths.length) {
+        current_image_index = 0;
+    }
+    update_image_viewer();
+}
+
+function update_image_viewer() {
+    document.getElementById("viewer-image").src = image_paths[current_image_index];
+}
+
+function toggle_dark_mode() {
+    var body = document.body;
+    body.classList.toggle("dark-mode");
+}
+
+function zoom_image(event) {
+    var img = document.getElementById("viewer-image");
+    var bounding_rect = img.getBoundingClientRect();
+
+    var x = (event.clientX - bounding_rect.left) / bounding_rect.width;
+    var y = (event.clientY - bounding_rect.top) / bounding_rect.height;
+
+    img.style.transformOrigin = `${x * 100}% ${y * 100}%`;
+    img.style.transform = img.style.transform === "scale(2)" ? "scale(1)" : "scale(2)";
+
+    event.stopPropagation();
+}
+
+function handle_keypress(event) {
+    if (document.querySelector(".image-viewer").style.display === "flex") {
+        switch(event.key) {
+            case "ArrowLeft":
+                navigate_image(event, -1);
+                break;
+            case "ArrowRight":
+                navigate_image(event, 1);
+                break;
+            case "Escape":
+                close_image_viewer();
+                break;
+        }
+    }
+}
+
+window.addEventListener("scroll", function () {
+    var body = document.body;
+    var scroll_position = window.scrollY;
+
+    if (scroll_position > 0) {
+        body.classList.add("scrolled");
+    } else {
+        body.classList.remove("scrolled");
+    }
+});

assets/style.css

@@ -0,0 +1,180 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+.header-box {
+    background-color: #333;
+    color: white;
+    padding: 15px;
+    text-align: center;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    transition: top 0.3s;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+}
+
+.header-box h1 {
+    margin: 0;
+}
+
+.header-box button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-left: auto;
+    margin-right: 30px;
+}
+
+.github-link {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    margin-top: auto;
+}
+
+.github-link img {
+    width: 40px;
+    margin-right: 5px;
+}
+
+.content {
+    padding: 80px 16px;
+}
+
+body.scrolled .header-box {
+    top: -100px;
+}
+
+.gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+}
+img {
+    max-width: 100%;
+    max-height: 400px;
+    height: auto;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    transition: 0.3s;
+    cursor: pointer;
+}
+img:hover {
+    border: 2px solid #777;
+    transition: transform 0.3s ease-out;
+}
+.image-viewer {
+    z-index: 3;
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    justify-content: center;
+    align-items: center;
+}
+
+.image-viewer img {
+    max-width: 90%;
+    max-height: 90%;
+    cursor: zoom-in; /* add cursor style for zooming in */
+    transition: transform 0.5s ease-out;
+}
+.close-btn {
+    font-size: 40px;
+    color: white;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    z-index: 1;
+}
+.nav-arrows {
+    position: fixed;
+    top: 50%;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 20px;
+    z-index: 1;
+}
+
+.nav-arrow {
+    font-size: 60px;
+    color: white;
+    cursor: pointer;
+    padding: 20px;
+    position: relative;
+}
+
+.nav-arrow-left {
+    margin-left: 20px;
+}
+
+.nav-arrow-right {
+    margin-right: 20px;
+}
+
+.nav-arrow-left:before,
+.nav-arrow-right:before {
+    content: '';
+    position: absolute;
+    top: -20px;
+    right: -20px;
+    bottom: -20px;
+    left: -20px;
+}
+
+.dark-mode-btn {
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    font-size: 18px;
+    padding: 5px;
+    background-color: #333;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+body.dark-mode {
+    background-color: #2a2a2a;
+    color: #fff;
+}
+
+body.dark-mode .header-box {
+    background-color: #111;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+body.dark-mode .header-box h1 {
+    color: #fff;
+}
+
+body.dark-mode * {
+    border-color: #333;
+}
+
+body.dark-mode .content {
+    background-color: #2a2a2a;
+}
+
+.viewed-image {
+    z-index: 2;
+}

assets/template.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{title}}</title>
+    <link rel="stylesheet" href="{{css_path}}">
+</head>
+<body>
+    <div class="header-box">
+        <h1>{{title}}</h1>
+        <button class="dark-mode-btn" onclick="toggle_dark_mode()">Toggle Dark Mode</button>
+    </div>
+    <div class="content">
+        <div class="gallery">
+{{image_tags}}
+        </div>
+
+        <div class="image-viewer" onclick="close_image_viewer()">
+            <span class="close-btn" onclick="close_image_viewer()">&times;</span>
+            <img id="viewer-image" class="viewed-image" src="" alt="Viewer Image" onclick="zoom_image(event)">
+            <div class="nav-arrows">
+                <div class="nav-arrow nav-arrow-left" onclick="navigate_image(event, -1)">&#8249;</div>
+                <div class="nav-arrow nav-arrow-right" onclick="navigate_image(event, 1)">&#8250;</div>
+            </div>
+        </div>
+    </div>
+
+    <script src="{{js_path}}"></script>
+</body>
+
+<div class="github-link">
+    <a href="https://github.com/9551-Dev">
+    <img src="https://github.com/9551-Dev.png" alt="github icon">
+    </a>
+</div>
+
+</html>

config/lab/storage_2024_03_07.ini

@@ -0,0 +1,14 @@
+[Settings]
+title = The state of my box storage taken at 2024.03.07
+image_folder = pictures/lab/storage_2024_03_07
+
+[Core]
+template_path = assets/template.html
+css_path = assets/style.css
+js_path = assets/script.js
+
+[Output]
+output_folder = docs/lab/storage_2024_03_07
+images_directory_name = images
+core_directory_name = core
+output_file_name = index.html

config/radioburzy/2024_leden.ini

@@ -0,0 +1,14 @@
+[Settings]
+title = Radioburza Leden 2024
+image_folder = pictures/radioburzy/2024_leden
+
+[Core]
+template_path = assets/template.html
+css_path = assets/style.css
+js_path = assets/script.js
+
+[Output]
+output_folder = docs/radioburzy/2024_leden
+images_directory_name = images
+core_directory_name = core
+output_file_name = index.html

docs/CNAME

@@ -0,0 +1 @@
+zap.devvie.cc