Added more homepage code

This commit is contained in:
Toby Chui 2023-05-24 16:15:39 +08:00
parent 01daf5541a
commit f4f2b55f14
15 changed files with 260 additions and 25 deletions

1
docs/img/icons/gan.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M120-80v-270h120v-160h210v-100H330v-270h300v270H510v100h210v160h120v270H540v-270h120v-100H300v100h120v270H120Zm270-590h180v-150H390v150ZM180-140h180v-150H180v150Zm420 0h180v-150H600v150ZM480-670ZM360-290Zm240 0Z"/></svg>

After

Width:  |  Height:  |  Size: 317 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M356-120H180q-24 0-42-18t-18-42v-176q44-5 75.5-34.5T227-463q0-43-31.5-72.5T120-570v-176q0-24 18-42t42-18h177q11-40 39.5-67t68.5-27q40 0 68.5 27t39.5 67h173q24 0 42 18t18 42v173q40 11 65.5 41.5T897-461q0 40-25.5 67T806-356v176q0 24-18 42t-42 18H570q-5-48-35.5-77.5T463-227q-41 0-71.5 29.5T356-120Zm-176-60h130q25-61 69.888-84 44.888-23 83-23T546-264q45 23 70 84h130v-235h45q20 0 33-13t13-33q0-20-13-33t-33-13h-45v-239H511v-48q0-20-13-33t-33-13q-20 0-33 13t-13 33v48H180v130q48.15 17.817 77.575 59.686Q287-514.445 287-462.777 287-412 257.5-370T180-310v130Zm329-330Z"/></svg>

After

Width:  |  Height:  |  Size: 669 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M345-377h391L609-548 506-413l-68-87-93 123Zm-85 177q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560v-560H260v560ZM140-80q-24 0-42-18t-18-42v-620h60v620h620v60H140Zm120-740v560-560Z"/></svg>

After

Width:  |  Height:  |  Size: 336 B

BIN
docs/img/screenshots/1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

BIN
docs/img/screenshots/2.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
docs/img/screenshots/3.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/img/screenshots/4.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
docs/img/screenshots/5.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

BIN
docs/img/screenshots/6.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
docs/img/screenshots/7.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

BIN
docs/img/screenshots/8.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

BIN
docs/img/screenshots/9.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

View File

@ -51,7 +51,7 @@
</style>
</head>
<body>
<div class="main">
<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>
@ -59,28 +59,16 @@
<a href="#home" class="menu-item active" align="center">
<img src="img/icons/home.svg">
</a>
<a href="#" class="menu-item" align="center">
<a href="#features" class="menu-item" align="center">
<img src="img/icons/awesome.svg">
</a>
<a href="#" class="menu-item" align="center">
<img src="img/icons/proxy.svg">
<a href="#screenshots" class="menu-item" align="center">
<img src="img/icons/screenshots.svg">
</a>
<a href="#" class="menu-item" align="center">
<img src="img/icons/redirect.svg">
<a href="#plugins" class="menu-item" align="center">
<img src="img/icons/plugin.svg">
</a>
<a href="#" class="menu-item" align="center">
<img src="img/icons/blacklist.svg">
</a>
<a href="#" class="menu-item" align="center">
<img src="img/icons/scan.svg">
</a>
<a href="#" class="menu-item" align="center">
<img src="img/icons/stats.svg">
</a>
<a href="#" class="menu-item" align="center">
<img src="img/icons/terminal.svg">
</a>
<a href="#" class="menu-item" align="center">
<a href="#source" class="menu-item" align="center">
<img src="img/icons/code.svg">
</a>
</div>
@ -140,13 +128,209 @@
</div>
</div>
<div class="ui divider" style="margin-top: 0;"></div>
<div class="ui container">
<br>
<h1>What is Zoraxy</h1>
<!-- 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, noobs 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 of the 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. Allow 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>Integrated with Gotty Web SSH terminal, allow 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 insights 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 discovering service, 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>
<div class="ui divider"></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.webp" target="_blank"><img src="img/screenshots/1.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/2.webp" target="_blank"><img src="img/screenshots/2.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/3.webp" target="_blank"><img src="img/screenshots/3.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/4.webp" target="_blank"><img src="img/screenshots/4.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/5.webp" target="_blank"><img src="img/screenshots/5.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/6.webp" target="_blank"><img src="img/screenshots/6.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/7.webp" target="_blank"><img src="img/screenshots/7.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/8.webp" target="_blank"><img src="img/screenshots/8.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/9.webp" target="_blank"><img src="img/screenshots/9.webp" class="ui fluid image screenshot"></a>
</div>
<div class="column">
<a href="img/screenshots/10.webp" target="_blank"><img src="img/screenshots/10.webp" 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">
View the Source
<div class="sub header">If you like this project, please feel free to give us a ⭐ star ⭐.</div>
</div>
</h1>
<br>
<div class="ui two column grid" align="center">
<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>
@ -157,6 +341,35 @@
<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>

View File

@ -20,6 +20,7 @@ body{
min-width: 80px;
background-color: #ffffff;
min-height: 100vh;
padding-top: 1.5em;
}
.iconWrapper{
@ -83,7 +84,7 @@ body{
.herotext{
padding-top: 15em;
padding-left: 5em;
padding-left: 8vw;
min-height: 100vh;
}
@ -103,6 +104,24 @@ body{
display: inline-block;
}
/* features */
#features{
padding-top: 4em;
padding-bottom: 4em;
background-color: white;
}
/* screenshots */
.screenshot{
transition: transform ease-in-out 0.1s;
box-shadow: 3px 3px 5px 0px rgba(51,51,51,0.14);
margin-bottom: 1em;
}
.screenshot:hover {
transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
/* RWD */
@media (max-width:960px) {