docs: screenshots

Author: me-marcel

.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

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>

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);
     }
 }

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: