Build for c8b59aa

9551-Dev · Mar 11, 2024 · 2f3b8c3 · 2f3b8c3
commit 2f3b8c3
Show file tree

Hide file tree

Showing 157 changed files with 3,491 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+pictures/lab/storage_2024_03_07/.tmp/*
+pictures/radioburza/leden_2024/.tmp/*
+
+!.gitignore
+!.nojekyll
+!.github
diff --git a/.nojekyll b/.nojekyll
@@ -0,0 +1 @@
+
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+zap.devvie.cc
diff --git a/assets/index_template.html b/assets/index_template.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{header}}</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            padding: 0;
+            background-color: #222;
+            color: #ddd;
+        }
+        h1 {
+            margin-bottom: 10px;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+            margin: 0;
+        }
+        li {
+            margin-bottom: 5px;
+            padding: 10px;
+            background-color: #333;
+            border-radius: 5px;
+        }
+        a {
+            text-decoration: none;
+            color: #007bff;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+
+        button {
+            background-color: transparent;
+            color: #007bff;
+            border: 1px solid #007bff;
+            padding: 5px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+
+        button:hover {
+            background-color: #007bff;
+            color: #fff;
+        }
+
+
+    </style>
+</head>
+<body>
+    <h1>{{title}}</h1>
+    <ul>
+        {{directory_list}}
+    </ul>
+    {{comment_start}}<button onclick="location.href='..';">.. (zap.devvie.cc{{parent}})</button>{{comment_end}}
+</body>
+</html>
diff --git a/assets/script.js b/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");
+    }
+});
diff --git a/assets/style.css b/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;
+}
diff --git a/assets/template.html b/assets/template.html
@@ -0,0 +1,46 @@
+<!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">
+
+    <meta content="{{embed_title}}" property="og:title" />
+    <meta content="{{embed_description}}" property="og:description" />
+    <meta content="{{embed_url}}" property="og:url" />
+    <meta content="{{embed_image}}" property="og:image" />
+    <meta content="{{embed_color}}" data-react-helmet="true" name="theme-color" />
+
+    <title>{{title}}</title>
+    <link rel="stylesheet" href="{{css_path}}">
+</head>
+<body class="dark-mode">
+    <div class="header-box">
+        <h1>{{title}}</h1>
+        <button class="dark-mode-btn" onclick="toggle_dark_mode()">Toggle Light 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>