marcel/zoraxy
1
0
Fork 0
mirror of https://github.com/tobychui/zoraxy.git synced 2025-05-31 04:37:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated new project hompage (wip)

Browse Source
This commit is contained in:
Toby Chui 2025-03-18 21:43:00 +08:00
parent 0fdfda436b
commit cd15fdf3c1
10 changed files with 1747 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

451
docs/GNU Free Documentation License.txt Normal file
View File

@ -0,0 +1,451 @@
GNU Free Documentation License
Version 1.3, 3 November 2008
Copyright (C) 2000, 2001, 2002, 2007, 2008 Free Software Foundation, Inc.
<https://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
0. PREAMBLE
The purpose of this License is to make a manual, textbook, or other
functional and useful document "free" in the sense of freedom: to
assure everyone the effective freedom to copy and redistribute it,
with or without modifying it, either commercially or noncommercially.
Secondarily, this License preserves for the author and publisher a way
to get credit for their work, while not being considered responsible
for modifications made by others.
This License is a kind of "copyleft", which means that derivative
works of the document must themselves be free in the same sense. It
complements the GNU General Public License, which is a copyleft
license designed for free software.
We have designed this License in order to use it for manuals for free
software, because free software needs free documentation: a free
program should come with manuals providing the same freedoms that the
software does. But this License is not limited to software manuals;
it can be used for any textual work, regardless of subject matter or
whether it is published as a printed book. We recommend this License
principally for works whose purpose is instruction or reference.
1. APPLICABILITY AND DEFINITIONS
This License applies to any manual or other work, in any medium, that
contains a notice placed by the copyright holder saying it can be
distributed under the terms of this License. Such a notice grants a
world-wide, royalty-free license, unlimited in duration, to use that
work under the conditions stated herein. The "Document", below,
refers to any such manual or work. Any member of the public is a
licensee, and is addressed as "you". You accept the license if you
copy, modify or distribute the work in a way requiring permission
under copyright law.
A "Modified Version" of the Document means any work containing the
Document or a portion of it, either copied verbatim, or with
modifications and/or translated into another language.
A "Secondary Section" is a named appendix or a front-matter section of
the Document that deals exclusively with the relationship of the
publishers or authors of the Document to the Document's overall
subject (or to related matters) and contains nothing that could fall
directly within that overall subject. (Thus, if the Document is in
part a textbook of mathematics, a Secondary Section may not explain
any mathematics.) The relationship could be a matter of historical
connection with the subject or with related matters, or of legal,
commercial, philosophical, ethical or political position regarding
them.
The "Invariant Sections" are certain Secondary Sections whose titles
are designated, as being those of Invariant Sections, in the notice
that says that the Document is released under this License. If a
section does not fit the above definition of Secondary then it is not
allowed to be designated as Invariant. The Document may contain zero
Invariant Sections. If the Document does not identify any Invariant
Sections then there are none.
The "Cover Texts" are certain short passages of text that are listed,
as Front-Cover Texts or Back-Cover Texts, in the notice that says that
the Document is released under this License. A Front-Cover Text may
be at most 5 words, and a Back-Cover Text may be at most 25 words.
A "Transparent" copy of the Document means a machine-readable copy,
represented in a format whose specification is available to the
general public, that is suitable for revising the document
straightforwardly with generic text editors or (for images composed of
pixels) generic paint programs or (for drawings) some widely available
drawing editor, and that is suitable for input to text formatters or
for automatic translation to a variety of formats suitable for input
to text formatters. A copy made in an otherwise Transparent file
format whose markup, or absence of markup, has been arranged to thwart
or discourage subsequent modification by readers is not Transparent.
An image format is not Transparent if used for any substantial amount
of text. A copy that is not "Transparent" is called "Opaque".
Examples of suitable formats for Transparent copies include plain
ASCII without markup, Texinfo input format, LaTeX input format, SGML
or XML using a publicly available DTD, and standard-conforming simple
HTML, PostScript or PDF designed for human modification. Examples of
transparent image formats include PNG, XCF and JPG. Opaque formats
include proprietary formats that can be read and edited only by
proprietary word processors, SGML or XML for which the DTD and/or
processing tools are not generally available, and the
machine-generated HTML, PostScript or PDF produced by some word
processors for output purposes only.
The "Title Page" means, for a printed book, the title page itself,
plus such following pages as are needed to hold, legibly, the material
this License requires to appear in the title page. For works in
formats which do not have any title page as such, "Title Page" means
the text near the most prominent appearance of the work's title,
preceding the beginning of the body of the text.
The "publisher" means any person or entity that distributes copies of
the Document to the public.
A section "Entitled XYZ" means a named subunit of the Document whose
title either is precisely XYZ or contains XYZ in parentheses following
text that translates XYZ in another language. (Here XYZ stands for a
specific section name mentioned below, such as "Acknowledgements",
"Dedications", "Endorsements", or "History".) To "Preserve the Title"
of such a section when you modify the Document means that it remains a
section "Entitled XYZ" according to this definition.
The Document may include Warranty Disclaimers next to the notice which
states that this License applies to the Document. These Warranty
Disclaimers are considered to be included by reference in this
License, but only as regards disclaiming warranties: any other
implication that these Warranty Disclaimers may have is void and has
no effect on the meaning of this License.
2. VERBATIM COPYING
You may copy and distribute the Document in any medium, either
commercially or noncommercially, provided that this License, the
copyright notices, and the license notice saying this License applies
to the Document are reproduced in all copies, and that you add no
other conditions whatsoever to those of this License. You may not use
technical measures to obstruct or control the reading or further
copying of the copies you make or distribute. However, you may accept
compensation in exchange for copies. If you distribute a large enough
number of copies you must also follow the conditions in section 3.
You may also lend copies, under the same conditions stated above, and
you may publicly display copies.
3. COPYING IN QUANTITY
If you publish printed copies (or copies in media that commonly have
printed covers) of the Document, numbering more than 100, and the
Document's license notice requires Cover Texts, you must enclose the
copies in covers that carry, clearly and legibly, all these Cover
Texts: Front-Cover Texts on the front cover, and Back-Cover Texts on
the back cover. Both covers must also clearly and legibly identify
you as the publisher of these copies. The front cover must present
the full title with all words of the title equally prominent and
visible. You may add other material on the covers in addition.
Copying with changes limited to the covers, as long as they preserve
the title of the Document and satisfy these conditions, can be treated
as verbatim copying in other respects.
If the required texts for either cover are too voluminous to fit
legibly, you should put the first ones listed (as many as fit
reasonably) on the actual cover, and continue the rest onto adjacent
pages.
If you publish or distribute Opaque copies of the Document numbering
more than 100, you must either include a machine-readable Transparent
copy along with each Opaque copy, or state in or with each Opaque copy
a computer-network location from which the general network-using
public has access to download using public-standard network protocols
a complete Transparent copy of the Document, free of added material.
If you use the latter option, you must take reasonably prudent steps,
when you begin distribution of Opaque copies in quantity, to ensure
that this Transparent copy will remain thus accessible at the stated
location until at least one year after the last time you distribute an
Opaque copy (directly or through your agents or retailers) of that
edition to the public.
It is requested, but not required, that you contact the authors of the
Document well before redistributing any large number of copies, to
give them a chance to provide you with an updated version of the
Document.
4. MODIFICATIONS
You may copy and distribute a Modified Version of the Document under
the conditions of sections 2 and 3 above, provided that you release
the Modified Version under precisely this License, with the Modified
Version filling the role of the Document, thus licensing distribution
and modification of the Modified Version to whoever possesses a copy
of it. In addition, you must do these things in the Modified Version:
A. Use in the Title Page (and on the covers, if any) a title distinct
from that of the Document, and from those of previous versions
(which should, if there were any, be listed in the History section
of the Document). You may use the same title as a previous version
if the original publisher of that version gives permission.
B. List on the Title Page, as authors, one or more persons or entities
responsible for authorship of the modifications in the Modified
Version, together with at least five of the principal authors of the
Document (all of its principal authors, if it has fewer than five),
unless they release you from this requirement.
C. State on the Title page the name of the publisher of the
Modified Version, as the publisher.
D. Preserve all the copyright notices of the Document.
E. Add an appropriate copyright notice for your modifications
adjacent to the other copyright notices.
F. Include, immediately after the copyright notices, a license notice
giving the public permission to use the Modified Version under the
terms of this License, in the form shown in the Addendum below.
G. Preserve in that license notice the full lists of Invariant Sections
and required Cover Texts given in the Document's license notice.
H. Include an unaltered copy of this License.
I. Preserve the section Entitled "History", Preserve its Title, and add
to it an item stating at least the title, year, new authors, and
publisher of the Modified Version as given on the Title Page. If
there is no section Entitled "History" in the Document, create one
stating the title, year, authors, and publisher of the Document as
given on its Title Page, then add an item describing the Modified
Version as stated in the previous sentence.
J. Preserve the network location, if any, given in the Document for
public access to a Transparent copy of the Document, and likewise
the network locations given in the Document for previous versions
it was based on. These may be placed in the "History" section.
You may omit a network location for a work that was published at
least four years before the Document itself, or if the original
publisher of the version it refers to gives permission.
K. For any section Entitled "Acknowledgements" or "Dedications",
Preserve the Title of the section, and preserve in the section all
the substance and tone of each of the contributor acknowledgements
and/or dedications given therein.
L. Preserve all the Invariant Sections of the Document,
unaltered in their text and in their titles. Section numbers
or the equivalent are not considered part of the section titles.
M. Delete any section Entitled "Endorsements". Such a section
may not be included in the Modified Version.
N. Do not retitle any existing section to be Entitled "Endorsements"
or to conflict in title with any Invariant Section.
O. Preserve any Warranty Disclaimers.
If the Modified Version includes new front-matter sections or
appendices that qualify as Secondary Sections and contain no material
copied from the Document, you may at your option designate some or all
of these sections as invariant. To do this, add their titles to the
list of Invariant Sections in the Modified Version's license notice.
These titles must be distinct from any other section titles.
You may add a section Entitled "Endorsements", provided it contains
nothing but endorsements of your Modified Version by various
parties--for example, statements of peer review or that the text has
been approved by an organization as the authoritative definition of a
standard.
You may add a passage of up to five words as a Front-Cover Text, and a
passage of up to 25 words as a Back-Cover Text, to the end of the list
of Cover Texts in the Modified Version. Only one passage of
Front-Cover Text and one of Back-Cover Text may be added by (or
through arrangements made by) any one entity. If the Document already
includes a cover text for the same cover, previously added by you or
by arrangement made by the same entity you are acting on behalf of,
you may not add another; but you may replace the old one, on explicit
permission from the previous publisher that added the old one.
The author(s) and publisher(s) of the Document do not by this License
give permission to use their names for publicity for or to assert or
imply endorsement of any Modified Version.
5. COMBINING DOCUMENTS
You may combine the Document with other documents released under this
License, under the terms defined in section 4 above for modified
versions, provided that you include in the combination all of the
Invariant Sections of all of the original documents, unmodified, and
list them all as Invariant Sections of your combined work in its
license notice, and that you preserve all their Warranty Disclaimers.
The combined work need only contain one copy of this License, and
multiple identical Invariant Sections may be replaced with a single
copy. If there are multiple Invariant Sections with the same name but
different contents, make the title of each such section unique by
adding at the end of it, in parentheses, the name of the original
author or publisher of that section if known, or else a unique number.
Make the same adjustment to the section titles in the list of
Invariant Sections in the license notice of the combined work.
In the combination, you must combine any sections Entitled "History"
in the various original documents, forming one section Entitled
"History"; likewise combine any sections Entitled "Acknowledgements",
and any sections Entitled "Dedications". You must delete all sections
Entitled "Endorsements".
6. COLLECTIONS OF DOCUMENTS
You may make a collection consisting of the Document and other
documents released under this License, and replace the individual
copies of this License in the various documents with a single copy
that is included in the collection, provided that you follow the rules
of this License for verbatim copying of each of the documents in all
other respects.
You may extract a single document from such a collection, and
distribute it individually under this License, provided you insert a
copy of this License into the extracted document, and follow this
License in all other respects regarding verbatim copying of that
document.
7. AGGREGATION WITH INDEPENDENT WORKS
A compilation of the Document or its derivatives with other separate
and independent documents or works, in or on a volume of a storage or
distribution medium, is called an "aggregate" if the copyright
resulting from the compilation is not used to limit the legal rights
of the compilation's users beyond what the individual works permit.
When the Document is included in an aggregate, this License does not
apply to the other works in the aggregate which are not themselves
derivative works of the Document.
If the Cover Text requirement of section 3 is applicable to these
copies of the Document, then if the Document is less than one half of
the entire aggregate, the Document's Cover Texts may be placed on
covers that bracket the Document within the aggregate, or the
electronic equivalent of covers if the Document is in electronic form.
Otherwise they must appear on printed covers that bracket the whole
aggregate.
8. TRANSLATION
Translation is considered a kind of modification, so you may
distribute translations of the Document under the terms of section 4.
Replacing Invariant Sections with translations requires special
permission from their copyright holders, but you may include
translations of some or all Invariant Sections in addition to the
original versions of these Invariant Sections. You may include a
translation of this License, and all the license notices in the
Document, and any Warranty Disclaimers, provided that you also include
the original English version of this License and the original versions
of those notices and disclaimers. In case of a disagreement between
the translation and the original version of this License or a notice
or disclaimer, the original version will prevail.
If a section in the Document is Entitled "Acknowledgements",
"Dedications", or "History", the requirement (section 4) to Preserve
its Title (section 1) will typically require changing the actual
title.
9. TERMINATION
You may not copy, modify, sublicense, or distribute the Document
except as expressly provided under this License. Any attempt
otherwise to copy, modify, sublicense, or distribute it is void, and
will automatically terminate your rights under this License.
However, if you cease all violation of this License, then your license
from a particular copyright holder is reinstated (a) provisionally,
unless and until the copyright holder explicitly and finally
terminates your license, and (b) permanently, if the copyright holder
fails to notify you of the violation by some reasonable means prior to
60 days after the cessation.
Moreover, your license from a particular copyright holder is
reinstated permanently if the copyright holder notifies you of the
violation by some reasonable means, this is the first time you have
received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.
Termination of your rights under this section does not terminate the
licenses of parties who have received copies or rights from you under
this License. If your rights have been terminated and not permanently
reinstated, receipt of a copy of some or all of the same material does
not give you any rights to use it.
10. FUTURE REVISIONS OF THIS LICENSE
The Free Software Foundation may publish new, revised versions of the
GNU Free Documentation License from time to time. Such new versions
will be similar in spirit to the present version, but may differ in
detail to address new problems or concerns. See
https://www.gnu.org/licenses/.
Each version of the License is given a distinguishing version number.
If the Document specifies that a particular numbered version of this
License "or any later version" applies to it, you have the option of
following the terms and conditions either of that specified version or
of any later version that has been published (not as a draft) by the
Free Software Foundation. If the Document does not specify a version
number of this License, you may choose any version ever published (not
as a draft) by the Free Software Foundation. If the Document
specifies that a proxy can decide which future versions of this
License can be used, that proxy's public statement of acceptance of a
version permanently authorizes you to choose that version for the
Document.
11. RELICENSING
"Massive Multiauthor Collaboration Site" (or "MMC Site") means any
World Wide Web server that publishes copyrightable works and also
provides prominent facilities for anybody to edit those works. A
public wiki that anybody can edit is an example of such a server. A
"Massive Multiauthor Collaboration" (or "MMC") contained in the site
means any set of copyrightable works thus published on the MMC site.
"CC-BY-SA" means the Creative Commons Attribution-Share Alike 3.0
license published by Creative Commons Corporation, a not-for-profit
corporation with a principal place of business in San Francisco,
California, as well as future copyleft versions of that license
published by that same organization.
"Incorporate" means to publish or republish a Document, in whole or in
part, as part of another Document.
An MMC is "eligible for relicensing" if it is licensed under this
License, and if all works that were first published under this License
somewhere other than this MMC, and subsequently incorporated in whole or
in part into the MMC, (1) had no cover texts or invariant sections, and
(2) were thus incorporated prior to November 1, 2008.
The operator of an MMC Site may republish an MMC contained in the site
under CC-BY-SA on the same site at any time before August 1, 2009,
provided the MMC is eligible for relicensing.
ADDENDUM: How to use this License for your documents
To use this License in a document you have written, include a copy of
the License in the document and put the following copyright and
license notices just after the title page:
Copyright (c) YEAR YOUR NAME.
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
If you have Invariant Sections, Front-Cover Texts and Back-Cover Texts,
replace the "with...Texts." line with this:
with the Invariant Sections being LIST THEIR TITLES, with the
Front-Cover Texts being LIST, and with the Back-Cover Texts being LIST.
If you have Invariant Sections without Cover Texts, or some other
combination of the three, merge those two alternatives to suit the
situation.
If your document contains nontrivial examples of program code, we
recommend releasing these examples in parallel under your choice of
free software license, such as the GNU General Public License,
to permit their use in free software.

1
docs/dom-i18n.min.js vendored Normal file
View File

@ -0,0 +1 @@
!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return a.domI18n=b()}):"object"==typeof exports?module.exports=b():a.domI18n=b()}(this,function(){"use strict";return function(a){function b(a){return a||(a=window.navigator.languages?window.navigator.languages[0]:window.navigator.language||window.navigator.userLanguage),-1===q.indexOf(a)&&(r&&console.warn(a+" is not available on the list of languages provided"),a=a.indexOf("-")?a.split("-")[0]:a),-1===q.indexOf(a)&&(r&&console.error(a+" is not compatible with any language provided"),a=p),a}function c(a){v=b(a),l()}function d(){u={}}function e(a){var b=a.getAttribute("data-dom-i18n-id");return b&&u&&u[b]}function f(a,b){var c="i18n"+Date.now()+1e3*Math.random();a.setAttribute("data-dom-i18n-id",c),u[c]=b}function g(a){return u&&u[a.getAttribute("data-dom-i18n-id")]}function h(a,b){var c={},d=a.firstElementChild,e=!d&&a[b].split(o);return q.forEach(function(b,f){var g;d?(g=a.children[f],g&&g.cloneNode&&(c[b]=g.cloneNode(!0))):(g=e[f],g&&(c[b]=String(g)))}),c}function i(a){var b,c,d=a.getAttribute(t),i=null!==a.getAttribute(s),k=d?d:"textContent";!i&&e(a)?b=g(a):(b=h(a,k),i||f(a,b)),c=b[v],"string"==typeof c?a[k]=c:"object"==typeof c&&j(a,c)}function j(a,b){k(a),a.appendChild(b)}function k(a){for(;a.lastChild;)a.removeChild(a.lastChild)}function l(){for(var a="string"==typeof n||n instanceof String?m.querySelectorAll(n):n,b=0;b<a.length;++b)i(a[b])}a=a||{};var m=a.rootElement||window.document,n=a.selector||"[data-translatable]",o=a.separator||" // ",p=a.defaultLanguage||"en",q=a.languages||["en"],r=void 0!==a.enableLog?a.enableLog:!0,s="data-no-cache",t="data-translatable-attr",u={},v=b(a.currentLanguage);return l(n),{changeLanguage:c,clearCachedElements:d}}});

BIN
docs/img/logo_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
docs/img/preview-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
docs/img/preview-mobile.psd Normal file
View File

Binary file not shown.

BIN
docs/img/preview-pc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

760
docs/index.html
View File

@ -1,128 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Reverse Proxy, Cluster, Gateway, Go, Homelab, Network Tools" name="keywords">
<meta content="A reverse proxy server and cluster network gateway for noobs" name="description">
<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>Reverse Proxy Server | Zoraxy</title>
<meta name="description" content="A reverse proxy server and cluster network gateway for noobs">
<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="Cluster Proxy Gateway | Zoraxy">
<meta property="og:description" content="A reverse proxy server and cluster network gateway for noobs">
<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="aroz.org">
<meta property="twitter:domain" content="os.aroz.org">
<meta property="twitter:url" content="https://zoraxy.aroz.org/">
<meta name="twitter:title" content="Cluster Proxy Gateway | Zoraxy">
<meta name="twitter:description" content="A reverse proxy server and cluster network gateway for noobs">
<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">
<script src="main.js" defer></script>
<!-- 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/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@100;300;400;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<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">
<!-- Main Stylesheet File -->
<link href="style.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js" integrity="sha512-5cguXwRllb+6bcc2pogwIeQmQPXEzn2ddsqAexIBhh7FO1z5Hkek1J9mrK2+rmZCTU6b6pERxI7acnp1MpAg4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css" integrity="sha512-n//BDM4vMPvyca4bJjZPDh7hlqsQ7hqbP9RH18GF2hTXBY5amBwM2501M0GPiwCU/v9Tor2m13GOTFjk00tkQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
p,a,div,span,h1,h2,h3,h4,h5,h6{
font-family: 'Source Sans Pro', sans-serif !important;
color: #404040;
}
</style>
<!-- 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 class="main section">
<div class="left-menu">
<div class="iconWrapper">
<a href="index.html"><img class="ui fluid image" src="img/icon.png"></a>
</div>
<a href="#home" class="menu-item active" align="center">
<img src="img/icons/home.svg">
</a>
<a href="#features" class="menu-item" align="center">
<img src="img/icons/awesome.svg">
</a>
<a href="#screenshots" class="menu-item" align="center">
<img src="img/icons/screenshots.svg">
</a>
<a href="#plugins" class="menu-item" align="center">
<img src="img/icons/plugin.svg">
</a>
<a href="#source" class="menu-item" align="center">
<img src="img/icons/code.svg">
</a>
</div>
<div class="right-content">
<!-- Hero Banner Section -->
<div class="headbanner"></div>
<div id="home" class="herotext">
<div class="ui basic segment">
<div class="bannerHeaderWrapper">
<h1 class="bannerHeader">Zoraxy</h1>
<div class="ui divider"></div><br>
<p class="bannerSubheader">Beyond Reverse Proxy: Your Ultimate Homelab Network Tool</p>
<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" style="background: transparent !important;">
<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 // 主頁
</a>
<a class="item" href="#about" i18n>
About Zoraxy // 關於 Zoraxy
</a>
<a class="item" href="#features" i18n>
Screenshots // 系統截圖
</a>
<a class="item" href="#techspec" i18n>
Videos // 介紹影片
</a>
<a class="item" href="#download" i18n>
Download // 下載
</a>
<a class="item" href="#learnmore" i18n>
Learn More // 了解更多
</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>
</div>
</a>
</div>
<br><br>
<a class="ui basic big button" style="background-color: white;" href="#features"><i class="ui blue arrow down icon"></i> Learn More</a>
<br><br>
<table class="ui very basic collapsing unstackable celled table">
<thead>
<tr><th colspan="2">Quick Access</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4 class="ui image header">
<i class="ui download icon"></i>
<div class="content">
Download
<div class="sub header">Prebuild Binary
</div>
</div>
</h4></td>
<td>
<a href="https://github.com/tobychui/zoraxy/releases" target="_blank">Open <i class="ui external icon"></i></a>
</td>
</tr>
<tr>
<td>
<h4 class="ui image header">
<i class="ui github icon"></i>
<div class="content">
Github
<div class="sub header">Source Code
</div>
</div>
</h4></td>
<td>
<a href="https://github.com/tobychui/zoraxy" target="_blank">Open <i class="ui external icon"></i></a>
</td>
</tr>
</table>
</div>
<div id="wavesWrapper">
</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
// 簡化自家伺服器部署之事，初學者居家網絡必備良器
</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 // 立即下載</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 // 查看原始碼</span></a>
<div class="scrolldownTips">
<img class="ui tiny image" src="img/scrolldown.webp"><br>
<span i18n>Scroll down to learn more // 向下滑以了解更多 // スクロールダウンして詳細をご覧ください // 下滑了解更多</span>
</div>
</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">
@ -137,250 +125,354 @@
</g>
</svg>
</div>
</div>
<!-- Features -->
<div id="features" class="section">
<div class="ui container">
<div class="ui basic segment">
<h1 class="ui header">
<img class="ui small image" src="img/icons/awesome.svg">
<div class="content">
Features
<div class="sub header">Highlighting a few important features of Zoraxy</div>
</div>
</h1>
<br>
<div class="ui stackable grid featureList">
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/proxy.svg">
<div class="content">
Reverse Proxy
</div>
</h3>
<p>Simple to use noob-friendly reverse proxy server that can be easily set up using a web form and a few toggle switches.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/redirect.svg">
<div class="content">
Redirection
</div>
</h3>
<p>Direct and intuitive redirection rules with basic rewrite options. Suitable for most simple use cases.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/blacklist.svg">
<div class="content">
Geo-IP & Blacklist
</div>
</h3>
<p>Blacklist with GeoIP support. Allows easy setup for regional services.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/gan.svg">
<div class="content">
Global Area Network
</div>
</h3>
<p>ZeroTier controller integrated GAN. Enable unlimited nodes in your network with a few clicks.</p>
</div>
<!-- Row 2-->
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/terminal.svg">
<div class="content">
Web SSH
</div>
</h3>
<p>Integration with Gotty Web SSH terminal allows one-stop management of your nodes inside private LAN via gateway nodes.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/stats.svg">
<div class="content">
Real Time Statistics
</div>
</h3>
<p>Traffic data collection and real-time analytic tools provide you the best insight of visitors data without cookies.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/scan.svg">
<div class="content">
Scanner & Utilities
</div>
</h3>
<p>Build in IP scanner and mDNS discovery service to enable automatic service discovery within LAN.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/code.svg">
<div class="content">
Open Source
</div>
</h3>
<p>Project is open-source under AGPL on Github. Feel free to contribute on missing functions you need! </p>
</div>
</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>
</div>
<div class="ten wide column">
<div class="about-text-wrapper">
<p class="about-title"><b i18n>Reverse Proxy // 反向代理</b></p>
<p><span i18n>Easy setups with dynamic updates // 讓你想不到般簡單易用、迅速設定、動態更新</span></p>
<p i18n>Access your reverse proxy and self-hosted services from any computer with a browser, anytime, anywhere.
// 透過瀏覽器，隨時隨地在任何裝置上存取您的反向代理及自家伺服器服務。
</p>
<div class="ui list">
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Simple setups with web UI
// 透過網頁介面簡單設定即可使用
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Change settings on the fly without restarting
// 即時更改設定，無需重新啟動
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
One of the best reverse proxy manager for beginners
// 可能是最適合初學者的反向代理管理器之一
<!-- Screenshots -->
<div id="screenshots" class="ui container">
<div class="ui basic segment">
<br>
<h1 class="ui header">
<img class="ui small image" src="img/icons/screenshots.svg">
<div class="content">
Screenshots
<div class="sub header">A quick overview of the UI designs</div>
</div>
</h1>
<div class="ui three column stackable grid">
<div class="column">
<a href="img/screenshots/1.png" target="_blank"><img src="img/screenshots/1.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/2.png" target="_blank"><img src="img/screenshots/2.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/3.png" target="_blank"><img src="img/screenshots/3.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/4.png" target="_blank"><img src="img/screenshots/4.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/5.png" target="_blank"><img src="img/screenshots/5.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/6.png" target="_blank"><img src="img/screenshots/6.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/7.png" target="_blank"><img src="img/screenshots/7.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/8.png" target="_blank"><img src="img/screenshots/8.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/9.png" target="_blank"><img src="img/screenshots/9.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/10.png" target="_blank"><img src="img/screenshots/10.png" class="ui fluid image screenshot"></a>
</div>
</div>
</div>
</div>
<!-- Plugin Developments -->
<div id="plugins" class="ui container">
<div class="ui basic segment">
<br>
<h1 class="ui header">
<img class="ui small image" src="img/icons/plugin.svg">
<div class="content">
Plugins
<div class="sub header">Add custom routing rules via simple scripts</div>
</div>
</h1>
<div style="width: 100%; text-align: center;">
<br>
<p>Documentation work in progress</p>
</div>
</div>
</div>
<!-- Source code -->
<div id="source" class="ui container">
<div class="ui basic segment">
<br>
<h1 class="ui header">
<img class="ui small image" src="img/icons/code.svg">
<div class="content">
Source Code
<div class="sub header">Feel free to give us a ⭐ star ⭐.</div>
</div>
</h1>
<br>
<div class="ui two column stackable grid">
<div class="column">
<h3 class="ui header">
<i class="grey github icon"></i>
<div class="content" style="text-align: left;">
<a href="https://github.com/tobychui/zoraxy">
Github
<div class="sub header">https://github.com/tobychui/zoraxy</div>
</a>
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Easily install plugins and edit configurations
// 輕鬆安裝插件並編輯設定
</div>
</div>
</div>
</h3>
</div>
<div class="column">
<h3 class="ui header">
<i class="blue mail icon"></i>
<div class="content" style="text-align: left;">
<a href="mailto:toby@imuslab.com">
Email Contact
<div class="sub header">toby@imuslab.com</div>
</a>
</div>
</h3>
</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 // 即時流量分析</b></p>
<p><span i18n>Dynamic statistic and access control // 動態流量數據、權限與路由設定</span></p>
<p i18n>Provide real time statistical overview, take advantage of the real time traffic and situations to make better decisions.
// 提供即時統計概覽，利用即時流量和情況做出更好的決策。
<br><br>
<div class="ui container">
<p style="color: #3a3a3a">CopyRight Zoraxy Project and its authors © 2021 - <span class="year"></span></p>
</p>
<div class="ui list">
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Real time visitor statistic
// 即時訪客統計概覽
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
Instant network utilitization overview
// 即時網路使用率概覽
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
No-reload access control and settings
// 即時生效存取控制和設定
</div>
</div>
<div class="item">
<i class="caret right icon"></i>
<div class="content" i18n>
One-click setting change with no downtime
// 一鍵設定更改，無需停機
</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 // 系統截圖</h1>
</div>
<div class="ui three column grid">
<div class="column">
<img class="ui fluid image" src="img/screenshots/1.png">
</div>
<div class="column">
<img class="ui fluid image" src="img/screenshots/2.png">
</div>
<div class="column">
<img class="ui fluid image" src="img/screenshots/3.png">
</div>
<div class="column">
<img class="ui fluid image" src="img/screenshots/4.png">
</div>
<div class="column">
<img class="ui fluid image" src="img/screenshots/5.png">
</div>
<div class="column">
<img class="ui fluid image" src="img/screenshots/6.png">
</div>
<!-- <div class="column">
<img class="ui fluid image" src="img/screenshots/7.png">
</div> -->
<div class="column">
<img class="ui fluid image" src="img/screenshots/8.png">
</div>
<div class="column">
<img class="ui fluid image" src="img/screenshots/9.png">
</div>
<div class="column">
<img class="ui fluid image" src="img/screenshots/10.png">
</div>
</div>
<br><br><br>
</div>
</div>
<br>
<!-- Spec -->
<div id="techspec" class="blackbanner">
<br><br>
<div class="centered title">
<h1 i18n>Review 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 // 下載</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 開發板 </span></a>
<a class="item" data-tab="build"><i class="code icon"></i> <span i18n>Build from source // 從原始碼建置 </span> </a>
</div>
<div class="ui bottom attached active tab segment" data-tab="linux">
<p i18n>Install with command line // 使用 CLI 下載並執行發行版本 </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 // 下載發行版本 </p>
<button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_amd64");'><i class="black linux icon"></i> <span i18n>Download x64 // 下載 64位元 執行檔 </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位元 執行檔 </span></button>
</div>
<div class="ui bottom attached tab segment" data-tab="windows">
<p i18n>Install with precompiled binary // 下載發行版本 </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</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）</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 // 下載發行版本</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 檔案中找到。
</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 i18n>After the Zoraxy is started, navigate to http://localhost:8000 to continue account and system setup.
// 當 Zoraxy 執行檔 / 服務啟動後，使用瀏覽器開啟 http://localhost:8000 以繼續帳戶和系統設定。
</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 // 了解更多</h1>
<p i18n>If you like this project, please feel free to give us a ⭐ star ⭐.
// 如果您喜歡這個開源專案，歡迎來給我們一顆 ⭐星星⭐ 喔！!
</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
// 源碼
</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
// 插件開發
</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
// 電子郵件
</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 // 開發者工具</div>
<div class="item"><a href="" target="_blank">Zoraxy Wiki</a></div>
<div class="item"><a href="" 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 // 衍生開源計劃</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 // 相關連接</div>
<div class="item"><a href="" target="_blank" i18n>Getting Started</a></div>
<div class="item"><a href="" target="_blank">Zoraxy Release</a></div>
<div class="item"><a href="" 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>
$(".year").text(new Date().getFullYear() );
$(".menu-item").on("click", function(){
$(".menu-item.active").removeClass("active");
$(this).addClass("active");
});
$(".right-content").on("scroll", function() {
var scrollPos = $(".right-content").scrollTop();
if (scrollPos < 10){
//Reaching the top
$('.menu-item.active').removeClass("active");
$($('.menu-item')[0]).addClass('active');
return;
}else if ($(".right-content")[0].scrollHeight == $(".right-content").scrollTop() + window.innerHeight ){
//Reaching the bottom
$('.menu-item.active').removeClass("active");
$($('.menu-item').get().reverse()[0]).addClass('active');
return
}
$('.menu-item').each(function() {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.offset().top <= (window.innerHeight / 2)) {
$('.menu-item.active').removeClass("active");
currLink.addClass("active");
console.log(currLink.attr("href"));
}
});
});
AOS.init();
$(".year").text(new Date().getFullYear());
</script>
</body>
</html>
</html>

386
docs/index_legacy.html Normal file
View File

@ -0,0 +1,386 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Reverse Proxy, Cluster, Gateway, Go, Homelab, Network Tools" name="keywords">
<meta content="A reverse proxy server and cluster network gateway for noobs" name="description">
<meta name="author" content="tobychui">
<!-- HTML Meta Tags -->
<title>Reverse Proxy Server | Zoraxy</title>
<meta name="description" content="A reverse proxy server and cluster network gateway for noobs">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://zoraxy.aroz.org/">
<meta property="og:type" content="website">
<meta property="og:title" content="Cluster Proxy Gateway | Zoraxy">
<meta property="og:description" content="A reverse proxy server and cluster network gateway for noobs">
<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="aroz.org">
<meta property="twitter:url" content="https://zoraxy.aroz.org/">
<meta name="twitter:title" content="Cluster Proxy Gateway | Zoraxy">
<meta name="twitter:description" content="A reverse proxy server and cluster network gateway for noobs">
<meta name="twitter:image" content="https://zoraxy.aroz.org/img/og.png">
<!-- Favicons -->
<link href="favicon.png" rel="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@100;300;400;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<!-- Main Stylesheet File -->
<link href="style.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js" integrity="sha512-5cguXwRllb+6bcc2pogwIeQmQPXEzn2ddsqAexIBhh7FO1z5Hkek1J9mrK2+rmZCTU6b6pERxI7acnp1MpAg4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css" integrity="sha512-n//BDM4vMPvyca4bJjZPDh7hlqsQ7hqbP9RH18GF2hTXBY5amBwM2501M0GPiwCU/v9Tor2m13GOTFjk00tkQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
p,a,div,span,h1,h2,h3,h4,h5,h6{
font-family: 'Source Sans Pro', sans-serif !important;
color: #404040;
}
</style>
</head>
<body>
<div class="main section">
<div class="left-menu">
<div class="iconWrapper">
<a href="index.html"><img class="ui fluid image" src="img/icon.png"></a>
</div>
<a href="#home" class="menu-item active" align="center">
<img src="img/icons/home.svg">
</a>
<a href="#features" class="menu-item" align="center">
<img src="img/icons/awesome.svg">
</a>
<a href="#screenshots" class="menu-item" align="center">
<img src="img/icons/screenshots.svg">
</a>
<a href="#plugins" class="menu-item" align="center">
<img src="img/icons/plugin.svg">
</a>
<a href="#source" class="menu-item" align="center">
<img src="img/icons/code.svg">
</a>
</div>
<div class="right-content">
<!-- Hero Banner Section -->
<div class="headbanner"></div>
<div id="home" class="herotext">
<div class="ui basic segment">
<div class="bannerHeaderWrapper">
<h1 class="bannerHeader">Zoraxy</h1>
<div class="ui divider"></div><br>
<p class="bannerSubheader">Beyond Reverse Proxy: Your Ultimate Homelab Network Tool</p>
</div>
<br><br>
<a class="ui basic big button" style="background-color: white;" href="#features"><i class="ui blue arrow down icon"></i> Learn More</a>
<br><br>
<table class="ui very basic collapsing unstackable celled table">
<thead>
<tr><th colspan="2">Quick Access</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4 class="ui image header">
<i class="ui download icon"></i>
<div class="content">
Download
<div class="sub header">Prebuild Binary
</div>
</div>
</h4></td>
<td>
<a href="https://github.com/tobychui/zoraxy/releases" target="_blank">Open <i class="ui external icon"></i></a>
</td>
</tr>
<tr>
<td>
<h4 class="ui image header">
<i class="ui github icon"></i>
<div class="content">
Github
<div class="sub header">Source Code
</div>
</div>
</h4></td>
<td>
<a href="https://github.com/tobychui/zoraxy" target="_blank">Open <i class="ui external icon"></i></a>
</td>
</tr>
</table>
</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>
<!-- Features -->
<div id="features" class="section">
<div class="ui container">
<div class="ui basic segment">
<h1 class="ui header">
<img class="ui small image" src="img/icons/awesome.svg">
<div class="content">
Features
<div class="sub header">Highlighting a few important features of Zoraxy</div>
</div>
</h1>
<br>
<div class="ui stackable grid featureList">
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/proxy.svg">
<div class="content">
Reverse Proxy
</div>
</h3>
<p>Simple to use noob-friendly reverse proxy server that can be easily set up using a web form and a few toggle switches.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/redirect.svg">
<div class="content">
Redirection
</div>
</h3>
<p>Direct and intuitive redirection rules with basic rewrite options. Suitable for most simple use cases.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/blacklist.svg">
<div class="content">
Geo-IP & Blacklist
</div>
</h3>
<p>Blacklist with GeoIP support. Allows easy setup for regional services.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/gan.svg">
<div class="content">
Global Area Network
</div>
</h3>
<p>ZeroTier controller integrated GAN. Enable unlimited nodes in your network with a few clicks.</p>
</div>
<!-- Row 2-->
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/terminal.svg">
<div class="content">
Web SSH
</div>
</h3>
<p>Integration with Gotty Web SSH terminal allows one-stop management of your nodes inside private LAN via gateway nodes.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/stats.svg">
<div class="content">
Real Time Statistics
</div>
</h3>
<p>Traffic data collection and real-time analytic tools provide you the best insight of visitors data without cookies.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/scan.svg">
<div class="content">
Scanner & Utilities
</div>
</h3>
<p>Build in IP scanner and mDNS discovery service to enable automatic service discovery within LAN.</p>
</div>
<div class="four wide column featureItem">
<h3 class="ui header featureHeader">
<img class="ui image" src="img/icons/code.svg">
<div class="content">
Open Source
</div>
</h3>
<p>Project is open-source under AGPL on Github. Feel free to contribute on missing functions you need! </p>
</div>
</div>
</div>
</div>
</div>
<!-- Screenshots -->
<div id="screenshots" class="ui container">
<div class="ui basic segment">
<br>
<h1 class="ui header">
<img class="ui small image" src="img/icons/screenshots.svg">
<div class="content">
Screenshots
<div class="sub header">A quick overview of the UI designs</div>
</div>
</h1>
<div class="ui three column stackable grid">
<div class="column">
<a href="img/screenshots/1.png" target="_blank"><img src="img/screenshots/1.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/2.png" target="_blank"><img src="img/screenshots/2.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/3.png" target="_blank"><img src="img/screenshots/3.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/4.png" target="_blank"><img src="img/screenshots/4.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/5.png" target="_blank"><img src="img/screenshots/5.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/6.png" target="_blank"><img src="img/screenshots/6.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/7.png" target="_blank"><img src="img/screenshots/7.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/8.png" target="_blank"><img src="img/screenshots/8.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/9.png" target="_blank"><img src="img/screenshots/9.png" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/10.png" target="_blank"><img src="img/screenshots/10.png" class="ui fluid image screenshot"></a>
</div>
</div>
</div>
</div>
<!-- Plugin Developments -->
<div id="plugins" class="ui container">
<div class="ui basic segment">
<br>
<h1 class="ui header">
<img class="ui small image" src="img/icons/plugin.svg">
<div class="content">
Plugins
<div class="sub header">Add custom routing rules via simple scripts</div>
</div>
</h1>
<div style="width: 100%; text-align: center;">
<br>
<p>Documentation work in progress</p>
</div>
</div>
</div>
<!-- Source code -->
<div id="source" class="ui container">
<div class="ui basic segment">
<br>
<h1 class="ui header">
<img class="ui small image" src="img/icons/code.svg">
<div class="content">
Source Code
<div class="sub header">Feel free to give us a ⭐ star ⭐.</div>
</div>
</h1>
<br>
<div class="ui two column stackable grid">
<div class="column">
<h3 class="ui header">
<i class="grey github icon"></i>
<div class="content" style="text-align: left;">
<a href="https://github.com/tobychui/zoraxy">
Github
<div class="sub header">https://github.com/tobychui/zoraxy</div>
</a>
</div>
</h3>
</div>
<div class="column">
<h3 class="ui header">
<i class="blue mail icon"></i>
<div class="content" style="text-align: left;">
<a href="mailto:toby@imuslab.com">
Email Contact
<div class="sub header">toby@imuslab.com</div>
</a>
</div>
</h3>
</div>
</div>
</div>
</div>
<br><br>
<div class="ui container">
<p style="color: #3a3a3a">CopyRight Zoraxy Project and its authors © 2021 - <span class="year"></span></p>
</div>
<br><br><br>
</div>
</div>
<br>
<script>
$(".year").text(new Date().getFullYear() );
$(".menu-item").on("click", function(){
$(".menu-item.active").removeClass("active");
$(this).addClass("active");
});
$(".right-content").on("scroll", function() {
var scrollPos = $(".right-content").scrollTop();
if (scrollPos < 10){
//Reaching the top
$('.menu-item.active').removeClass("active");
$($('.menu-item')[0]).addClass('active');
return;
}else if ($(".right-content")[0].scrollHeight == $(".right-content").scrollTop() + window.innerHeight ){
//Reaching the bottom
$('.menu-item.active').removeClass("active");
$($('.menu-item').get().reverse()[0]).addClass('active');
return
}
$('.menu-item').each(function() {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.offset().top <= (window.innerHeight / 2)) {
$('.menu-item.active').removeClass("active");
currLink.addClass("active");
console.log(currLink.attr("href"));
}
});
});
</script>
</body>
</html>

410
docs/main.css Normal file
View File

@ -0,0 +1,410 @@
/* Global */
p,a,div,span,h1,h2,h3,h4,h5,h6{
font-family: 'Source Sans Pro', sans-serif;
}
body.en *:not(i){
font-family: 'Source Sans Pro', 'Noto Sans TC',sans-serif !important;
}
body.zh *:not(i){
font-family: 'Noto Sans TC',sans-serif !important;
}
body.jp *:not(i){
font-family: "Noto Sans JP", sans-serif !important;
}
body.zh-cn *:not(i){
font-family: 'Noto Sans SC',sans-serif !important;
}
.centered.title{
padding: 2em;
margin-bottom: 2em;
text-align: center;
}
.centered.title h1{
font-weight: 300 !important;
}
#backToTopBtn{
position: fixed;
bottom: 1em;
right: 1em;
display:none;
z-index: 999;
border: 1px solid white;
background: #8debff;
}
#backToTopBtn:hover{
opacity: 0.8;
}
#backToTopBtn i{
color: white;
}
/* Main Menu */
#mainmenu{
padding-top: 0.4em;
padding-bottom: 0.4em;
border-radius: 0;
margin-bottom: 0;
margin-top: 0;
}
#slideshowBanner .ui.basic.white.button{
color: white;
box-shadow: 0 0 0 1px rgb(231, 231, 231) inset;
border-radius: 0.4em;
background: none !important;
}
#slideshowBanner .ui.basic.white.button:hover{
background-color: rgba(255, 255, 255, 0.3) !important;
}
#slideshowBanner .ui.basic.white.button:active{
background: rgba(255, 255, 255, 0.5) !important;
}
#rwdmenubtn{
display:none;
position: absolute;
}
#mainmenu .ui.secondary.inverted.menu .link.item:not(.disabled), .ui.secondary.inverted.menu a.item:not(.disabled){
font-size: 1.1em;
font-weight: 500;
border-bottom: 1px solid transparent;
transition: border-bottom ease-in-out 0.1s;
color: white !important;
border-radius: 0;
}
#mainmenu #mainmenu .ui.secondary.inverted.menu .link.item:not(.disabled), .ui.secondary.inverted.menu a.item:not(.disabled):hover{
background-color: transparent;
border-bottom: 1px solid #82adfc;
color: #82adfc !important;
}
/* Image Sldiers */
#slideshowBanner{
background: rgb(108,172,255);
background: linear-gradient(48deg, rgba(108,172,255,1) 8%, rgba(141,235,255,1) 65%);
position: relative;
height: 80vh;
}
.slideshow {
width: 100%;
overflow: hidden;
border-radius: 0;
max-height: 500px;
}
.slideshow .slides {
display: flex;
transition: transform 1s ease-in-out;
opacity: 0.6;
filter: blur(2px);
pointer-events: none;
user-select: none;
}
.slideshow .slide {
min-width: 100%;
box-sizing: border-box;
}
.slideshow .slide img {
width: 100%;
display: block;
}
.slideshow .dots{
text-align: center;
position: absolute;
bottom: 15px;
width: 100%;
}
.slideshow .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
background-color: #bebebe;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.6s ease;
}
.dot.active {
background-color: #ffffff;
}
#slideshowBanner .title{
display: inline-block;
width: 100%;
max-width: 500px;
text-align: left;
position: absolute;
top: 50%;
left: 10%;
transform: translateX(0%) translateY(-50%);
color: white;
}
#slideshowBanner .title .scrolldownTips{
display: none;
}
#slideshowBanner .title h1{
font-size: 4em;
font-weight: 600;
margin-bottom: 0;
}
#slideshowBanner .title p{
font-size: 1.2em;
}
/* About ArozOS */
.about-text-wrapper{
margin-top: 3em;
}
.about-text-wrapper p, .about-text-wrapper .list .item{
font-weight: 300;
}
.about-title{
font-size: 2.4em;
font-weight: 300;
margin-bottom: 0em;
}
.about-title b{
font-weight: 800;
}
.about-text-wrapper .ui.list .item{
margin-bottom: 0.6em;
}
.about-text-wrapper .ui.list .item .icon{
padding-top: 0.15em;
}
/* Features */
#features{
margin-bottom: 3em;
}
/* Tech Spec */
#techspec .centered.title{
color: white;
}
#techspec p {
color: white;
}
#techspec .videoScrollBar{
overflow-x: scroll;
display: block;
white-space: nowrap;
scrollbar-color: #dee6f7 #5888f0;
padding-top: 2em;
padding-bottom: 3em;
}
.introvideo{
display: inline-block !important;
}
.blackbanner{
width: 100%;
background: rgb(85,131,238);
background: linear-gradient(48deg, rgba(85,131,238,1) 21%, rgba(108,172,255,1) 73%);
min-height: 300px;
}
/* Download */
.downloadButton {
margin-top: 0.4em !important;
}
.downloadTabWrapper{
width: 100%;
overflow-x: hidden;
}
#download .ui.black.message{
word-break: break-all;
}
/* Learn More */
#learnmore .linkicons{
text-align: center;
width: 100%;
}
#learnmore .linkicons .divider{
margin-left: 1em;
margin-right: 1em;
}
#learnmore .linkicons .externallink{
margin-bottom: 0.6em;
transition: opacity 0.1s ease-in-out;
}
#learnmore .linkicons .externallink i{
/* color: #1b1c1d; */
font-weight: 300;
font-size: 1.5em;
}
#learnmore .linkicons .externallink:hover{
opacity: 0.8;
}
#learnmore .linkicons .externallink .content{
color: #1b1c1d;
font-weight: 500;
font-size: 0.6em;
}
/* Footer */
#footer{
background: rgb(85,131,238);
background: linear-gradient(48deg, rgba(85,131,238,1) 21%, rgba(108,172,255,1) 73%);
color: rgb(255, 255, 255);
}
#footer a {
color: rgb(209, 224, 255);
}
#footer .bottom-attach .divider{
color: rgb(212, 212, 212);
}
#footer .ui.list .title{
margin-bottom: 0.6em;
}
/* RWD Rules */
@media (max-width:960px) {
/* Main menu */
#mainmenu{
display:none;
z-index: 99;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#rwdmenubtn{
display: block;
position: absolute;
top: 0.4em;
right: 0.4em;
z-index: 100;
}
/* Slideshows */
.slideshow {
min-height: 100vh;
}
.slideshow .slide{
height: 100% !important;
min-width: none;
}
.slideshow .slide img{
height: 100%;
width: auto;
}
#slideshowBanner .title .scrolldownTips{
margin-top: 2em;
display: block;
}
#slideshowBanner .title .scrolldownTips img{
left: 50%;
transform: translateX(-50%);
}
#download .stackable.tabular.menu .active.item{
background-color: rgb(243, 243, 243);
border-width: 0;
border-radius: 0.4em !important;
}
}
/*
Waves CSS
*/
#wavesWrapper{
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
.waves {
position:relative;
width: 100%;
height:15vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:100px;
max-height:150px;
}
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -8s;
animation-duration: 28s;
}
.parallax > use:nth-child(2) {
animation-delay: -12s;
animation-duration: 40s;
}
.parallax > use:nth-child(3) {
animation-delay: -16s;
animation-duration: 52s;
}
.parallax > use:nth-child(4) {
animation-delay: -20s;
animation-duration: 80s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px,0,0);
}
100% {
transform: translate3d(85px,0,0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height:40px;
min-height:40px;
}
}

73
docs/main.js Normal file
View File

@ -0,0 +1,73 @@
/*
Localization
To add more locales, add to the html file with // (translated text)
after each DOM elements with attr i18n
And then add the language ISO key to the list below.
*/
let languages = ['en', 'zh', 'jp', 'zh-cn'];
//Bind language change dropdown events
$(".dropdown").dropdown();
$("#language").on("change",function(){
let newLang = $("#language").parent().dropdown("get value");
i18n.changeLanguage(newLang);
$("body").attr("class", newLang);
});
//Initialize the i18n dom library
var i18n = domI18n({
selector: '[i18n]',
separator: ' // ',
languages: languages,
defaultLanguage: 'en'
});
i18n.changeLanguage('en');
/* Main Menu */
$("#rwdmenubtn").on("click", function(){
$("#mainmenu").slideToggle("fast");
})
//Handle resize
$(window).on("resize", function(){
if (window.innerWidth > 960){
$("#mainmenu").show();
}else{
$("#mainmenu").hide();
}
})
/*
Download
*/
$('.menu .item').tab();
//Download webpack and binary at the same time
function handleDownload(releasename){
let binaryURL = "https://github.com/tobychui/zoraxy/releases/latest/download/" + releasename;
window.open(binaryURL);
}
/* RWD */
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY || window.pageYOffset;
var windowHeight = window.innerHeight;
var hiddenDiv = document.querySelector('#backToTopBtn');
if (scrollPosition > windowHeight / 2) {
hiddenDiv.style.display = 'block';
} else {
hiddenDiv.style.display = 'none';
}
});
function backToTop(){
$('html, body').animate({scrollTop : 0},800, function(){
window.location.hash = "";
});
}