From 131d5c7f046f534a6d3e881bb3520ebcea1f5285 Mon Sep 17 00:00:00 2001
From: Vasiliy Petrov <cofob@riseup.net>
Date: Sat, 21 May 2022 19:46:00 +0000
Subject: [PATCH] Upgrade
---
index.html | 197 +++++++++++++++++++++++++++++------------------------
script.js | 63 ++++++++---------
style.css | 13 ++++
3 files changed, 152 insertions(+), 121 deletions(-)
create mode 100644 style.css
diff --git a/index.html b/index.html
index 19a41ad..98a3d4e 100755
--- a/index.html
+++ b/index.html
@@ -1,117 +1,125 @@
<!DOCTYPE html>
-<html>
+<html class="has-navbar-fixed-top">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DisWall</title>
<link rel="stylesheet" href="/bulma.min.css">
+ <link rel="stylesheet" href="/style.css">
<script type="text/javascript" src="script.js"></script>
- <style>
-.delete {
- position: absolute;
- top: 1.0rem;
- right: 1.25rem;
-}
-.icon > svg > path {
- fill: #ffffff;
-}
-.control > span.icon > svg > path {
- fill: #666666;
-}
- </style>
</head>
-<body onload="onLoad();" style="margin-top: 6em; margin-bottom: 6em; margin-left: auto; margin-right: auto; max-width: 900px;">
+<body>
<div class="navbar is-fixed-top has-shadow is-light">
- <a class="navbar-item" href="/">DisWall</a>
- <div class="navbar-end">
- <a class="navbar-item" href="#how-it-works">How it works</a>
- <a class="navbar-item" href="#how-to-use">How to use</a>
- <a class="navbar-item" href="#privacy">Privacy</a>
- <a class="navbar-item" href="#plans">Plans</a>
- <div class="navbar-item">
- <div class="field is-grouped">
- <p class="control">
- <a class="button is-primary" onclick="registerOpen();">
- <span class="icon">
- <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"></path></svg>
- </span>
- <span>Register</span>
- </a>
- </p>
+ <div class="navbar-brand">
+ <a class="navbar-item" href="/">DisWall</a>
+
+ <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </a>
+ </div>
+
+ <div class="navbar-menu" id="navbar-menu">
+ <div class="navbar-end">
+ <a class="navbar-item" href="#how-it-works">How it works</a>
+ <a class="navbar-item" href="#how-to-use">How to use</a>
+ <a class="navbar-item" href="#privacy">Privacy</a>
+ <a class="navbar-item" href="#plans">Plans</a>
+ <div class="navbar-item">
+ <div class="field is-grouped">
+ <p class="control">
+ <a class="button is-primary active-trigger" data-target="register_dialog">
+ <span class="icon">
+ <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M23 12L20.6 9.2L20.9 5.5L17.3 4.7L15.4 1.5L12 3L8.6 1.5L6.7 4.7L3.1 5.5L3.4 9.2L1 12L3.4 14.8L3.1 18.5L6.7 19.3L8.6 22.5L12 21L15.4 22.5L17.3 19.3L20.9 18.5L20.6 14.8L23 12M18.7 16.9L16 17.5L14.6 19.9L12 18.8L9.4 19.9L8 17.5L5.3 16.9L5.5 14.1L3.7 12L5.5 9.9L5.3 7.1L8 6.5L9.4 4.1L12 5.2L14.6 4.1L16 6.5L18.7 7.1L18.5 9.9L20.3 12L18.5 14.1L18.7 16.9M16.6 7.6L18 9L10 17L6 13L7.4 11.6L10 14.2L16.6 7.6Z"></path></svg>
+ </span>
+ <span>Register</span>
+ </a>
+ </p>
+ </div>
</div>
</div>
</div>
</div>
- <div class="content mt-6">
- <div class="notification is-danger is-hidden" id="notification_error">
- <button class="delete" id="error_close"></button>
- <p>Registration is unsuccessfull, something went wrong. Please, try again later.</p>
- </div>
-
- <div class="notification is-success is-hidden" id="notification_success">
- <button class="delete" id="success_close"></button>
- <p>Registration is successfull. You will get an e-mail from us very soon.</p>
- </div>
-
- <div class="notification is-success is-hidden" id="notification_confirmed">
- <button class="delete" id="confirmed_close"></button>
- <p>E-Mail confirmed. You can start using Diswall on your servers.</p>
- </div>
+ <div class="container is-max-desktop">
+ <section class="section">
+ <div class="content">
+ <div class="notification is-success is-hidden" id="notification_confirmed">
+ <button class="delete hidden-trigger" data-target="notification_confirmed"></button>
+ <p>E-Mail confirmed. You can start using Diswall on your servers.</p>
+ </div>
- <p class="title">Real-time distributed firewall</p>
- <p class="subtitle">Be part of a worldwide distributed defense system for FREE</p>
- <div class="block">
- <ul>
- <li>World's first real-time anti-scan/bot system</li>
- <li>Hide your server from Shodan, ZoomEye, Censys etc</li>
- <li>Reduce parasite traffic by 90% — accelerate your site</li>
- <li>The analytics doesn't contain any garbage traffic</li>
- </ul>
- </div>
+ <p class="title">Real-time distributed firewall</p>
+ <p class="subtitle">Be part of a worldwide distributed defense system for FREE</p>
+ <div class="block">
+ <ul>
+ <li>World's first real-time anti-scan/bot system</li>
+ <li>Hide your server from Shodan, ZoomEye, Censys etc</li>
+ <li>Reduce parasite traffic by 90% — accelerate your site</li>
+ <li>The analytics doesn't contain any garbage traffic</li>
+ </ul>
+ </div>
- <h1 class="title pt-6" id="how-it-works">How it works</h1>
- <div class="block">
- We collect bad IPs using many honey-pots and deliver them to the block list on your server with DisWall.
- </div>
+ <h1 class="title pt-6" id="how-it-works">How it works</h1>
+ <div class="block">
+ We collect bad IPs using many honey-pots and deliver them to the block list on your server with DisWall.
+ </div>
- <h1 class="title pt-6" id="how-to-use">How to use</h1>
- <div class="block">
- <ul>
- <li>Download DisWall binary from <a href="https://github.com/dis-works/diswall-rs/releases/latest">GitHub releases</a></li>
- <li>Run <code>./diswall --install</code></li>
- <li>Check generated settings as installer says</li>
- <li>Start the service</li>
- <li>Look so cool in site statistics</li>
- </ul>
- </div>
+ <h1 class="title pt-6" id="how-to-use">How to use</h1>
+ <div class="block">
+ <ul>
+ <li>Download DisWall binary from <a href="https://github.com/dis-works/diswall-rs/releases/latest">GitHub releases</a></li>
+ <li>Run <code>./diswall --install</code></li>
+ <li>Check generated settings as installer says</li>
+ <li>Start the service</li>
+ <li>Look so cool in site statistics</li>
+ </ul>
+ </div>
- <h1 class="title pt-6" id="privacy">Privacy</h1>
- <div class="block">
- <ul>
- <li>Open-source. You can build your service without us</li>
- <li>We do not collect telemetry just bad IPs</li>
- <li>We do nothing on your server just add bad IPs to block-list</li>
- </ul>
- </div>
+ <h1 class="title pt-6" id="privacy">Privacy</h1>
+ <div class="block">
+ <ul>
+ <li>Open-source. You can build your service without us</li>
+ <li>We do not collect telemetry just bad IPs</li>
+ <li>We do nothing on your server just add bad IPs to block-list</li>
+ </ul>
+ </div>
- <h1 class="title pt-6" id="plans">Plans</h1>
- <div class="block">
- <ul>
- <li>Forever FREE Anti scan subscription if you share your bad IPs with us</li>
- <li>$5 month per 100 servers</li>
- <li>$150 for application block list (bots trying web-vulnerabilities)</li>
- <li>Enterprise — ask us</li>
- </ul>
- </div>
+ <h1 class="title pt-6" id="plans">Plans</h1>
+ <div class="block">
+ <ul>
+ <li>Forever FREE Anti scan subscription if you share your bad IPs with us</li>
+ <li>$5 month per 100 servers</li>
+ <li>$150 for application block list (bots trying web-vulnerabilities)</li>
+ <li>Enterprise — ask us</li>
+ </ul>
+ </div>
+ </div>
+ </section>
</div>
<div id="register_dialog" class="modal">
- <div class="modal-background"></div>
+ <div class="modal-background active-trigger" data-target="register_dialog"></div>
<div class="modal-content">
<div class="box" id="register_dialog_box">
- <button class="delete" aria-label="close" onclick="registerCancel();"></button>
+ <div class="field pb-3">
+ <button class="delete active-trigger pb-3" data-target="register_dialog" aria-label="close"></button>
+ </div>
+
+ <div class="field">
+ <div class="notification is-danger is-hidden" id="notification_error">
+ <button class="delete hidden-trigger" data-target="notification_error"></button>
+ <p>Registration is unsuccessfull, something went wrong. Please, try again later.</p>
+ </div>
+ </div>
+ <div class="field">
+ <div class="notification is-success is-hidden" id="notification_success">
+ <button class="delete hidden-trigger" data-target="notification_success"></button>
+ <p>Registration is successfull. You will get an e-mail from us very soon.</p>
+ </div>
+ </div>
<div class="field">
<label class="label">Desired login:</label>
@@ -136,10 +144,19 @@
<p class="help mb-3">We will send you an e-mail confirmation link and generated password.</p>
<div class="buttons is-grouped is-centered">
<button class="button is-primary" id="register_ok_button" onclick="register();">Ok</button>
- <button class="button is-primary is-light" id="register_cancel_button" onclick="registerCancel();">Cancel</button>
+ <button class="button is-primary is-light active-trigger" data-target="register_dialog">Cancel</button>
</div>
</div>
</div>
</div>
+
+ <footer class="footer">
+ <div class="content has-text-centered">
+ <p>
+ <a href="https://github.com/dis-works/diswall-rs">Source code</a> is licensed under
+ <a href="https://github.com/dis-works/diswall-rs/blob/main/LICENSE">GPLv3</a>.
+ </p>
+ </div>
+ </footer>
</body>
</html>
diff --git a/script.js b/script.js
index 34fd17c..93c03a2 100755
--- a/script.js
+++ b/script.js
@@ -4,16 +4,31 @@ function onLoad() {
if (window.location.href.includes("?email_confirmed")) {
confirmOk();
}
-}
-function registerOpen() {
- var dialog = document.getElementById("register_dialog");
- dialog.className = "modal is-active";
-}
+ document.querySelectorAll('.navbar-burger').forEach( el => {
+ el.addEventListener('click', () => {
+ const target = el.dataset.target;
+ const $target = document.getElementById(target);
+ el.classList.toggle('is-active');
+ $target.classList.toggle('is-active');
+ });
+ });
-function registerCancel() {
- var dialog = document.getElementById("register_dialog");
- dialog.className = "modal";
+ document.querySelectorAll('.active-trigger').forEach( el => {
+ el.addEventListener('click', () => {
+ const target = el.dataset.target;
+ const $target = document.getElementById(target);
+ $target.classList.toggle('is-active');
+ });
+ });
+
+ document.querySelectorAll('.hidden-trigger').forEach( el => {
+ el.addEventListener('click', () => {
+ const target = el.dataset.target;
+ const $target = document.getElementById(target);
+ $target.classList.toggle('is-hidden');
+ });
+ });
}
function register() {
@@ -37,36 +52,22 @@ function register() {
xhr.open("POST", serverApiUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ action: "register", username: register_login, email: register_email }));
- registerCancel();
}
function registerOk() {
- var dialog1 = document.getElementById("notification_success");
- dialog1.className = "notification is-success";
- var dialog2 = document.getElementById("notification_error");
- dialog2.className = "notification is-hidden";
- var button = document.getElementById("success_close");
- button.onclick = function() {
- dialog1.className = "notification is-success is-hidden";
- }
+ document.getElementById("notification_success").classList.remove("is-hidden");
+ document.getElementById("notification_error").classList.add("is-hidden");
}
function registerError() {
- var dialog1 = document.getElementById("notification_error");
- dialog1.className = "notification is-error";
- var dialog2 = document.getElementById("notification_success");
- dialog2.className = "notification is-hidden";
- var button = document.getElementById("error_close");
- button.onclick = function() {
- dialog1.className = "notification is-error is-hidden";
- }
+ document.getElementById("notification_error").classList.remove("is-hidden");
+ document.getElementById("notification_success").classList.add("is-hidden");
}
function confirmOk() {
- var dialog = document.getElementById("notification_confirmed");
- dialog.className = "notification is-success";
- var button = document.getElementById("confirmed_close");
- button.onclick = function() {
- dialog.className = "notification is-success is-hidden";
- }
+ document.getElementById("notification_confirmed").classList.remove("is-hidden");
+ if (window.history.replaceState)
+ window.history.replaceState({}, null, '/');
}
+
+window.addEventListener("load", onLoad);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..cdd3733
--- /dev/null
+++ b/style.css
@@ -0,0 +1,13 @@
+.delete {
+ position: absolute;
+ top: 1.0rem;
+ right: 1.25rem;
+}
+
+.icon > svg > path {
+ fill: #ffffff;
+}
+
+.control > span.icon > svg > path {
+ fill: #666666;
+}
--
2.32.1