zoraxy/docs/index.html
2025-03-30 12:34:37 +08:00

599 lines
31 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Reverse Proxy, Open Source, Aroz, Go, OS, NAS, Cloud" name="keywords">
<meta content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox" name="description">
<meta name="author" content="tobychui">
<!-- HTML Meta Tags -->
<title>Homelab Gateway | Zoraxy</title>
<meta name="description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://zoraxy.aroz.org/">
<meta property="og:type" content="website">
<meta property="og:title" content="Hello Zoraxy">
<meta property="og:description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">
<meta property="og:image" content="https://zoraxy.aroz.org/img/og.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="os.aroz.org">
<meta property="twitter:url" content="https://zoraxy.aroz.org/">
<meta name="twitter:title" content="Hello Zoraxy">
<meta name="twitter:description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">
<meta name="twitter:image" content="https://zoraxy.aroz.org/img/og.png">
<!-- JavaScript Libs-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="dom-i18n.min.js"></script>
<link href="main.css" rel="stylesheet">
<!-- Css stuffs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.3/semantic.min.js" integrity="sha512-gnoBksrDbaMnlE0rhhkcx3iwzvgBGz6mOEj4/Y5ZY09n55dYddx6+WYc72A55qEesV8VX2iMomteIwobeGK1BQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.3/semantic.min.css" integrity="sha512-3quBdRGJyLy79hzhDDcBzANW+mVqPctrGCfIPosHQtMKb3rKsCxfyslzwlz2wj1dT8A7UX+sEvDjaUv+WExQrA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Favicons -->
<link href="favicon.png" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap" rel="stylesheet">
<!-- AOS.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div id="backToTopBtn" class="ui big icon button" onclick="backToTop();">
<i class="ui arrow up icon"></i>
</div>
<button id="rwdmenubtn" class="ui black big icon button"><i class="ui bars icon"></i></button>
<div id="mainmenu" class="ui segment">
<div class="ui container">
<div class="ui small stackable secondary menu">
<div class="item">
<img class="ui tiny image" src="img/logo.png">
</div>
<a class="item" href="#mainmenu" i18n>
Home // 主頁 // Startseite
</a>
<a class="item" href="#about" i18n>
About Zoraxy // 關於 Zoraxy // Über Zoraxy
</a>
<a class="item" href="#features" i18n>
Screenshots // 系統截圖 // Bildschirmfotos
</a>
<a class="item" href="#techspec" i18n>
Videos // 介紹影片 // Videos
</a>
<a class="item" href="#download" i18n>
Download // 下載 // Herunterladen
</a>
<a class="item" href="#learnmore" i18n>
Learn More // 了解更多 // Mehr erfahren
</a>
<a class="right floated item">
<div class="ui small selection dropdown">
<input type="hidden" id="language">
<div class="default text" style="color: #6cacff;"><i class="language icon"></i> Default</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="en">English</div>
<div class="item" data-value="zh">中文(正體)</div>
<div class="item" data-value="de">Deutsch</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="messageBanner">
<div class="ui text container">
<p i18n>This site is currently under development. Some information might not be ready.
// 本網站目前仍在開發中,部分資訊可能尚未準備好。
// Diese Seite ist in Entwicklung. Einige Informationen sind möglicherweise nicht verfügbar.
</p>
</div>
</div>
<div id="slideshowBanner">
<div class="title">
<h1 i18n>Zoraxy</h1>
<div class="ui divider" style="border-top: 1px solid rgba(255,255,255,0.5); "></div>
<p i18n>The ultimate homelab networking toolbox for self-hosted services
// 簡化自家伺服器部署之事,初學者居家網絡必備良器
// Das ultimative Homelab-Netzwerk-Toolbox für selbstgehostete Dienste
</p>
<a href="https://github.com/tobychui/zoraxy/releases" class="ui basic white button" target="_blank"><i style="color:white;" class="ui download icon"></i><span i18n>Download // 立即下載 // Herunterladen </span></a>
<a href="https://github.com/tobychui/zoraxy" class="ui basic white button" target="_blank"><i style="color: white;" class="ui code icon"></i><span i18n>Source Code // 查看原始碼 // Quellcode</span></a>
</div>
<div id="wavesWrapper">
<!-- CSS waves-->
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
</div>
<br><br><br><br>
<!-- About ArozOS-->
<div id="about" class="ui text container">
<div class="ui stackable grid" data-aos="fade-up">
<div class="six wide column" align="right">
<img class="ui medium image" src="img/preview-pc.png">
</div>
<div class="ten wide column">
<div class="about-text-wrapper">
<p class="about-title"><b i18n>Reverse Proxy // 反向代理 // Reverse-Proxy</b></p>
<p><span i18n>Easy setups with dynamic updates // 讓你想不到般簡單易用、迅速設定、動態更新 // Einfache Einrichtung mit dynamischen Updates</span></p>
<p i18n>Access your reverse proxy and self-hosted services from any computer with a browser, anytime, anywhere.
// 透過瀏覽器,隨時隨地在任何裝置上存取您的反向代理及自家伺服器服務。
// Greifen Sie jederzeit und überall von jedem Gerät aus auf Ihren Reverse-Proxy und selbst gehostete
</p>
<div class="ui list">
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Simple setups with web UI
// 透過網頁介面簡單設定即可使用
// Einfache Einrichtung mit Web-UI
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Change settings on the fly without restarting
// 即時更改設定,無需重新啟動
// Einstellungen ohne Neustart ändern
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
One of the best reverse proxy manager for beginners
// 可能是最適合初學者的反向代理管理器之一
// Einer der besten Reverse-Proxy-Manager für Anfänger
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Easily install plugins and edit configurations
// 輕鬆安裝插件並編輯設定
// Plugins einfach installieren und Konfigurationen bearbeiten
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui stackable grid" data-aos="fade-up">
<div class="six wide column" align="right">
<img class="ui medium image" src="img/preview-mobile.png">
</div>
<div class="ten wide column">
<div class="about-text-wrapper">
<p class="about-title"><b i18n>Real-time Analytics // 即時流量分析 // Echtzeit-Analysen</b></p>
<p><span i18n>Dynamic statistic and access control // 動態流量數據、權限與路由設定 // Dynamische Statistik und Zugriffskontrolle</span></p>
<p i18n>Provide real time statistical overview, take advantage of the real time traffic and situations to make better decisions.
// 提供即時統計概覽,利用即時流量和情況做出更好的決策。
// Bietet eine Echtzeit-Übersicht über die Statistiken, um bessere Entscheidungen zu treffen.
</p>
<div class="ui list">
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Real time visitor statistic
// 即時訪客統計概覽
// Echtzeit-Besucherstatistik
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Instant network utilitization overview
// 即時網路使用率概覽
// Sofortige Netzwerkübersicht
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
No-reload access control and settings
// 即時生效存取控制和設定
// Zugriffskontrolle und Einstellungen ohne Neustart
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
One-click setting change with no downtime
// 一鍵設定更改,無需停機
// Einstellungsänderung mit einem Klick ohne Ausfallzeiten
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br><br><br>
<!-- Features -->
<div class="ui divider"></div>
<div id="features" class="ui container">
<div class="centered title">
<h1 i18n>Screenshots
// 系統截圖
// Bildschirmfotos
</h1>
</div>
<div class="ui three column stackable grid">
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/1.png">
</div>
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/2.png">
</div>
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/3.png">
</div>
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/4.png">
</div>
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/5.png">
</div>
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/6.png">
</div>
<!-- <div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/7.png">
</div> -->
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/8.png">
</div>
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/9.png">
</div>
<div class="column">
<img class="ui fluid image screenshot" src="img/screenshots/10.png">
</div>
</div>
<br><br><br>
</div>
<!-- Spec -->
<div id="techspec" class="blackbanner">
<br><br>
<div class="centered title">
<h1 style="font-weight: 600;" i18n>
Review Videos
// 介紹影片
// Videos
</h1>
</div>
<div>
<div class="videoScrollBar">
<div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/5-lps8DC6_Y?si=rkfePn9kiYKCvYUZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
<div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/49xQYLpmedE?si=fgba2iK55s1760Xr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
<div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/I_F97he5F2A?si=qKEXwDcjkX1nPejq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
<div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/FNU08-ufByM?si=I2hq9vsapeXB2Oqb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
</div>
</div>
<br><br><br>
</div>
<!-- Download -->
<div id="download" class="ui text container">
<br><br>
<div class="centered title">
<h1 i18n>
Download
// 下載
// Herunterladen
</h1>
</div>
<div class="downloadTabWrapper">
<div class="ui top attached fluid stackable tabular menu">
<a class="active item" data-tab="linux"><i class="grey linux icon"></i> Linux</a>
<a class="item" data-tab="windows"><i class="blue windows icon"></i> Windows</a>
<a class="item" data-tab="rpi"><i class="red raspberry pi icon"></i><span i18n>SBCs // ARM 開發板 // SBCs</span></a>
<a class="item" data-tab="build"><i class="code icon"></i> <span i18n>Build from source // 從原始碼建置 // Aus dem Quellcode erstellen</span> </a>
</div>
<div class="ui bottom attached active tab segment" data-tab="linux">
<p i18n>
Install with command line
// 使用 CLI 下載並執行發行版本
// Installieren Sie mit der Befehlszeile
</p>
<div class="ui black message">
<code>
wget https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_amd64<br>
chmod +x ./zoraxy_linux_amd64<br>
sudo ./zoraxy_linux_amd64
</code>
</div>
<br>
<p i18n>
Install with precompiled binary
// 下載發行版本
// Installieren Sie mit vorkompilierten Binärdateien
</p>
<button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_amd64");'>
<i class="black linux icon"></i>
<span i18n>Download x64
// 下載 64位元 執行檔
// Herunterladen x64
</span>
</button>
<span style="font-size: 1.2em; font-weight: 600; margin-right: 0.4em">OR</span>
<button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_386");'>
<i class="black linux icon"></i>
<span i18n>Download x32
// 下載 32位元 執行檔
// Herunterladen x32
</span>
</button>
</div>
<div class="ui bottom attached tab segment" data-tab="windows">
<p i18n>
Install with precompiled binary
// 下載發行版本
// Installieren Sie mit vorkompilierten Binärdateien
</p>
<button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_windows_amd64.exe");'>
<i class="blue windows icon"></i>
<span i18n>
Download Zoraxy for Windows
// 下載 Windows 版 Zoraxy
// Zoraxy für Windows herunterladen
</span>
</button>
<br><br>
</div>
<div class="ui bottom attached tab segment" data-tab="rpi">
<p i18n>Install with command line (armv6-7, arm64, x86)
// 使用 CLI 下載並執行 armv6-7, arm64, x86
// Installieren Sie mit der Befehlszeile (armv6-7, arm64, x86)
</p>
<div class="ui black message">
<code>
# Check your CPU architecture<br>
uname -m <br>
<br>
# For arm64 (aarch64) CPU<br>
wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_arm64<br>
<br>
# For armv6 (armv6l) / armv7 (armv7l) CPU<br>
wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_arm<br>
<br>
# For RISC-V (riscv64) CPU<br>
wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_riscv64<br>
<br>
chmod +x ./zoraxy<br>
sudo ./zoraxy <br>
</code>
</div>
<br>
<p i18n>Install with precompiled binary
// 下載發行版本
// Installieren Sie mit vorkompilierten Binärdateien
</p>
<button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_arm");'><i class="black download icon"></i> <span i18n></span>arm (v6, v7)</button>
<button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_arm64");'><i class="black download icon"></i> <span i18n></span>arm64</button>
<button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_riscv64");'><i class="grey download icon"></i> <span i18n></span>riscv64</button>
</div>
<div class="ui bottom attached tab segment" data-tab="build">
<p i18n>Require Go (Golang) compiler. Details build from source instruction can be found on Zoraxy Github README file.
// 需要 Go (Go 語言)編譯器。建置詳情可以在 Zoraxy Github README 檔案中找到。
// Erfordert den Go (Golang) Compiler. Detaillierte Anweisungen zum Erstellen aus dem Quellcode finden Sie in der Zoraxy Github README-Datei.
</p>
<div class="ui black message">
<code>
git clone https://github.com/tobychui/zoraxy<br>
cd ./zoraxy/src/<br>
go mod tidy<br>
go build<br>
sudo ./zoraxy <br>
</code>
</div>
</div>
</div>
<p>
<span i18n>After Zoraxy is started, navigate to
// 當 Zoraxy 執行檔 / 服務啟動後,使用瀏覽器開啟
// Nachdem Zoraxy gestartet wurde, navigieren Sie zu
</span>
<a href="http://localhost:8000" target="_blank">http://localhost:8000</a>
<span i18n>to continue account and system setup.
// 以繼續帳戶和系統設定。
// um die Konto- und Systemeinrichtung fortzusetzen.
</span>
</p>
<br><br>
</div>
<!-- Learn More -->
<div class="ui divider"></div>
<div id="learnmore" class="ui text container">
<div class="centered title" style="margin-bottom: 0px;">
<h1 i18n>Learn More
// 了解更多
// Mehr erfahren
</h1>
<p i18n>If you like this project, please feel free to give us a ⭐ star ⭐.
// 如果您喜歡這個開源專案,歡迎來給我們一顆 ⭐星星⭐ 喔!!
// Wenn Ihnen dieses Projekt gefällt, geben Sie uns bitte einen ⭐ Stern ⭐.
</p>
</div>
<div class="ui basic segment linkicons">
<div class="ui big breadcrumb">
<a class="section externallink" href="https://github.com/tobychui/zoraxy" target="_blank">
<div class="ui icon header">
<i class="black github icon"></i>
<div class="content" i18n>
Github
// 源碼
// Quellcode
</div>
</div>
</a>
<i class="divider"> </i>
<a class="section externallink" href="" target="_blank">
<div class="ui icon header">
<i class="green code icon"></i>
<div class="content" i18n>
Plugin Devs
// 插件開發
// Plugin-Entwickler
</div>
</div>
</a>
<i class=" divider"> </i>
<a class="section externallink" href="mailto:toby@imuslab.com" target="_blank">
<div class="ui icon header">
<i class="yellow mail icon"></i>
<div class="content" i18n>
Email
// 電子郵件
// E-Mail
</div>
</div>
</a>
<i class=" divider"> </i>
<a class="section externallink" href="https://t.me/ArOZBeta" target="_blank">
<div class="ui icon header">
<i class="blue telegram icon"></i>
<div class="content">
Telegram
</div>
</div>
</a>
</div>
</div>
<br><br><br><br>
</div>
<!-- Footer -->
<div id="footer">
<div class="ui container">
<br><br>
<div class="ui stackable grid" style="height: 100%;">
<div class="six wide column" style="height: 100%;">
<a href="https://zoraxy.aroz.org"><img src="img/logo_white.png" class="ui small image"></a>
<p><span style="font-weight: 300;">The Zoraxy Project</span><br>
© Toby Chui</p>
<div class="bottom-attach">
<br><br>
<div class="ui breadcrumb" style="margin-top: 0.4em;">
<div class="section" i18n><a style="color: white;" href="https://zoraxy.aroz.org" target="_blank">zoraxy.aroz.org</a></div>
<div class="divider"> / </div>
<div class="section">2018 - <span class="year">now</span></div>
</div>
</div>
</div>
<div class="three wide column">
<div class="ui list">
<div class="item title" i18n>Developer Tools
// 開發者工具
// Entwicklerwerkzeuge
</div>
<div class="item"><a href="https://github.com/tobychui/zoraxy/wiki" target="_blank">Zoraxy Wiki</a></div>
<div class="item"><a href="https://github.com/tobychui/zoraxy" target="_blank">Source Code</a></div>
<div class="item"><a href="" target="_blank">Offical Plugin List</a></div>
<div class="item"><a href="" target="_blank">Plugin Development Guide</a></div>
</div>
</div>
<div class="three wide column">
<div class="ui list">
<div class="item title" i18n>Project Spin-offs
// 衍生開源計劃
// Projekt-Ableger
</div>
<div class="item"><a href="https://os.aroz.org" target="_blank">ArozOS</a></div>
</div>
</div>
<div class="three wide column">
<div class="ui list">
<div class="item title" i18n>Related Links
// 相關連接
// Verwandte Links
</div>
<div class="item"><a href="https://github.com/tobychui/zoraxy/wiki/Getting-Started" target="_blank" i18n>Getting Started</a></div>
<div class="item"><a href="https://github.com/tobychui/zoraxy/releases" target="_blank">Zoraxy Release</a></div>
<div class="item"><a href="https://hub.docker.com/r/zoraxydocker/zoraxy" target="_blank">Zoraxy Docker</a></div>
<div class="item"><a href="https://imuslab.com" target="_blank">imuslab</a></div>
</div>
</div>
</div>
</div>
<br><br><br><br>
</div>
<script>
AOS.init();
$(".year").text(new Date().getFullYear());
// Function to open the modal with the clicked image using jQuery
function openModal(src) {
// Remove the old modal if it exists
$('#imageModal').remove();
const modal = $('<div style="display:none;">', { id: 'imageModal' }).css({
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: '1000'
});
const img = $('<img>', { src: src }).css({
maxWidth: '80%',
maxHeight: '80%',
boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)'
});
modal.append(img);
$("body").css("overflow", "hidden");
modal.on('click', function() {
modal.remove();
$("body").css("overflow", "auto");
});
$('body').append(modal);
}
// Add click event listener to all screenshot images using jQuery
$('.screenshot').on('click', function() {
openModal($(this).attr('src'));
});
</script>
<!-- Locales -->
<script src="main.js" defer></script>
</body>
</html>