From 3237906156cd12b8bdf3e40abda41bc4711a90eb Mon Sep 17 00:00:00 2001
From: Marcel Menk <marcel.menk@ipvx.io>
Date: Sat, 22 Feb 2025 22:45:58 +0100
Subject: [PATCH] docs: screenshots

---
 .github/workflows/deploy.yml |  1 +
 docs/screenshots.md          | 56 ++++++++++++++++++++++++++++++++++++
 docs/stylesheets/extra.css   | 14 +++++++--
 mkdocs.yml                   |  6 ++++
 4 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 docs/screenshots.md

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index d2a6605..49c40a8 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -32,6 +32,7 @@ jobs:
           pip install mkdocs
           pip install mkdocs-material
           pip install mkdocs-macros-plugin
+          pip install mkdocs-glightbox
 
       - name: Build and Deploy MkDocs
         run: mkdocs gh-deploy --force --remote-name origin
\ No newline at end of file
diff --git a/docs/screenshots.md b/docs/screenshots.md
new file mode 100644
index 0000000..4ad2a02
--- /dev/null
+++ b/docs/screenshots.md
@@ -0,0 +1,56 @@
+---
+hide:
+  - navigation
+  - toc
+---
+
+# Screenshots
+Screenshots provide a visual guide to help you understand OBMS features and functionality. This section includes annotated images of key interfaces, workflows, and settings to make navigation easier. Whether you're setting up your system, managing orders, or configuring modules, these screenshots serve as a quick reference to ensure a smooth experience.
+
+## General
+<div class="image-gallery">
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+</div>
+
+## Customer Area
+<div class="image-gallery">
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+</div>
+
+## Admin Area
+<div class="image-gallery">
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+  <div>
+    <img src="https://dummyimage.com/600x400/eee/000?text=Coming+Soon" alt="Image title" loading="lazy" style="width: 100%;" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index ebed393..9cf170a 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -237,8 +237,17 @@
     opacity: 1;
 }
 
+.image-gallery {
+    display: grid; 
+    justify-content: space-between; 
+    gap: .5rem; 
+    grid-template-columns: repeat(3, 1fr); 
+    grid-auto-rows: auto;
+}
+
 @media (max-width: 959px) {
-    .features-list {
+    .features-list,
+    .image-gallery {
         grid-template-columns: repeat(2, 1fr);
     }
 }
@@ -252,7 +261,8 @@
         grid-template-columns: repeat(1, 1fr);
     }
 
-    .features-list {
+    .features-list,
+    .image-gallery {
         grid-template-columns: repeat(1, 1fr);
     }
 }
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 9bc9eea..b85d438 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -25,7 +25,12 @@ theme:
     - content.code.copy
   experimental: true
 copyright: "© 2025 OBMS (Open Business Management Software). All rights reserved."
+markdown_extensions:
+  - attr_list
+  - md_in_html
+  - pymdownx.blocks.caption
 plugins:
+  - glightbox
   - search
   - macros:
       macros_file: "mkdocs_macros.py"
@@ -66,6 +71,7 @@ extra_javascript:
   - js/extra.js
 nav:
   - Home: index.md
+  - Screenshots: screenshots.md
   - Documentation:
     - About: docs/about.md
     - Getting Started: