added all the files

2022-02-03 12:54:19 +11:00
parent c57937aefd
commit d024007655
25 changed files with 481 additions and 0 deletions
--- a/404.html
+++ b/404.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-au">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>HNS AU</title>
+    <meta property="og:image" content="https://hnsau/assets/img/512.png">
+    <meta property="og:type" content="website">
+    <meta name="description" content="Handshake Australia">
+    <meta property="og:title" content="HNS AU">
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/180.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/32.png">
+    <link rel="icon" type="image/png" sizes="180x180" href="assets/img/180.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="assets/img/192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="assets/img/512.png">
+    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
+    <link rel="stylesheet" href="assets/css/404.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="assets/css/vanilla-zoom.min.css">
+</head>
+
+<body><!-- partial:index.partial.html -->
+<p>HTTP: <span>404</span></p>
+<div style="text-align: center;">
+    <div style="display: inline-block; text-align: left;">
+<code><span>this_page</span>.<em>not_found</em> = true;</code>
+<code><span>if</span> (<b>you_spelt_it_wrong</b>){<br><span>try_again()</span>;<br>}</code>
+<code><span>else if</span> (<b>we_screwed_up</b>){<br><em>alert</em>(<i>"We're really sorry about that."</i>);<br><span>window</span>.<em>location</em> = home;<br>}</code>
+
+</div>
+    </div>
+<!-- partial -->
+
+  <script type="text/javascript">
+    function callback(){
+    return function(){
+        alert("We're really sorry about that.");
+        window.location = '/';
+    }
+}
+var a = "world";
+setTimeout(callback(), 4000);
+    
+
+    </script>
+    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
+    <script src="assets/js/vanilla-zoom.js"></script>
+    <script src="assets/js/theme.js"></script>
+    <script src="assets/js/404.js"></script>
+</body>
+
+</html>
--- a/assets/bootstrap/css/bootstrap.min.css
+++ b/assets/bootstrap/css/bootstrap.min.css
--- a/assets/bootstrap/js/bootstrap.min.js
+++ b/assets/bootstrap/js/bootstrap.min.js
--- a/assets/css/404.css
+++ b/assets/css/404.css
@@ -0,0 +1,75 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: #282828;
+  overflow-y: auto;
+}
+
+p {
+  font-family: "Bevan", cursive;
+  font-size: 130px;
+  margin: 10vh 0 0;
+  text-align: center;
+  overflow-y: auto;
+  letter-spacing: 5px;
+  background-color: black;
+  color: transparent;
+  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  background-clip: text;
+}
+
+p span {
+  font-size: 1.2em;
+}
+
+code {
+  color: #bdbdbd;
+  text-align: left;
+  display: block;
+  overflow-y: auto;
+  font-size: 16px;
+  margin: 0 30px 25px;
+}
+
+code span {
+  color: #f0c674;
+}
+
+code i {
+  color: #b5bd68;
+}
+
+code em {
+  color: #b294bb;
+  font-style: unset;
+}
+
+code b {
+  color: #81a2be;
+  font-weight: 500;
+  overflow-y: auto;
+}
+
+a {
+  color: #8abeb7;
+  font-family: monospace;
+  font-size: 20px;
+  text-decoration: underline;
+  overflow-y: auto;
+  margin-top: 10px;
+  display: inline-block;
+}
+
+@media screen and (max-width: 880px) {
+  p {
+    font-size: 14vw;
+    overflow-y: auto;
+  }
+}
+
--- a/assets/css/vanilla-zoom.min.css
+++ b/assets/css/vanilla-zoom.min.css
@@ -0,0 +1,37 @@
+.vanilla-zoom {
+  width: 100%;
+  /*display: flex;*/
+}
+
+.vanilla-zoom .sidebar {
+  /*flex-basis: 30%;*/
+  width: 100%;
+  display: flex;
+  /*flex-direction: column;*/
+}
+
+.vanilla-zoom .sidebar img.small-preview {
+  width: 60px;
+  margin-right: 5px;
+  cursor: pointer;
+  opacity: .5;
+}
+
+.vanilla-zoom .sidebar img.small-preview.active, .vanilla-zoom .sidebar img.small-preview:hover {
+  opacity: 1;
+}
+
+.vanilla-zoom .sidebar img.small-preview:last-child {
+  margin-right: 0;
+}
+
+.vanilla-zoom .zoomed-image {
+  width: 100%;
+  height: 300px;
+  flex: 1;
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: contain;
+  margin-bottom: 5px;
+}
+
--- a/assets/img/16.png
+++ b/assets/img/16.png
--- a/assets/img/180.png
+++ b/assets/img/180.png
--- a/assets/img/192.png
+++ b/assets/img/192.png
--- a/assets/img/32.png
+++ b/assets/img/32.png
--- a/assets/img/512.png
+++ b/assets/img/512.png
--- a/assets/img/Life
+++ b/assets/img/Life
--- a/assets/img/avatars/avatar1.jpg
+++ b/assets/img/avatars/avatar1.jpg
--- a/assets/img/avatars/avatar2.jpg
+++ b/assets/img/avatars/avatar2.jpg
--- a/assets/img/avatars/avatar3.jpg
+++ b/assets/img/avatars/avatar3.jpg
--- a/assets/img/scenery/Handshake.png
+++ b/assets/img/scenery/Handshake.png
--- a/assets/img/scenery/image1.jpg
+++ b/assets/img/scenery/image1.jpg
--- a/assets/img/scenery/image4.jpg
+++ b/assets/img/scenery/image4.jpg
--- a/assets/img/scenery/image5.jpg
+++ b/assets/img/scenery/image5.jpg
--- a/assets/img/scenery/image6.jpg
+++ b/assets/img/scenery/image6.jpg
--- a/assets/img/tech/image4.jpg
+++ b/assets/img/tech/image4.jpg
--- a/assets/js/404.js
+++ b/assets/js/404.js
@@ -0,0 +1,21 @@
+function type(n, t) {
+    var str = document.getElementsByTagName("code")[n].innerHTML.toString();
+    var i = 0;
+    document.getElementsByTagName("code")[n].innerHTML = "";
+
+    setTimeout(function() {
+        var se = setInterval(function() {
+            i++;
+            document.getElementsByTagName("code")[n].innerHTML =
+                str.slice(0, i) + "|";
+            if (i == str.length) {
+                clearInterval(se);
+                document.getElementsByTagName("code")[n].innerHTML = str;
+            }
+        }, 10);
+    }, t);
+}
+
+type(0, 0);
+type(1, 600);
+type(2, 1300);
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -0,0 +1,11 @@
+// Custom theme code
+
+if (document.getElementsByClassName('clean-gallery').length > 0) {
+   baguetteBox.run('.clean-gallery', { animation: 'slideIn' });
+}
+
+if (document.getElementsByClassName('clean-product').length > 0) {
+    window.onload = function() {
+        vanillaZoom.init('#product-preview');
+    };
+}
--- a/assets/js/vanilla-zoom.js
+++ b/assets/js/vanilla-zoom.js
@@ -0,0 +1,92 @@
+(function(window){
+    function define_library() {
+        var vanillaZoom = {};
+        vanillaZoom.init = function(el) {
+
+            var container = document.querySelector(el);
+            if(!container) {
+                console.error('No container element. Please make sure you are using the right markup.');
+                return;
+            }
+
+            var firstSmallImage = container.querySelector('.small-preview');
+            var zoomedImage = container.querySelector('.zoomed-image');
+
+            if(!zoomedImage) {
+                console.error('No zoomed image element. Please make sure you are using the right markup.');
+                return;
+            }
+
+            if(!firstSmallImage) {
+                console.error('No preview images on page. Please make sure you are using the right markup.');
+                return;
+            }
+            else {
+                // Set the source of the zoomed image.
+                zoomedImage.style.backgroundImage = 'url('+ firstSmallImage.src +')';
+                firstSmallImage.classList.add('active');
+            }   
+
+            // Change the selected image to be zoomed when clicking on the previews.
+            container.addEventListener("click", function (event) {
+                var elem = event.target;
+
+                if (elem.classList.contains("small-preview")) {
+                    
+                    var allSmallPreviews = container.querySelectorAll(".small-preview");
+                    
+                    allSmallPreviews.forEach(function (preview) {
+                        preview.classList.remove('active');
+                    })
+                    
+                    elem.classList.add('active');
+                    
+                    var imageSrc = elem.src;
+                    zoomedImage.style.backgroundImage = 'url('+ imageSrc +')';
+                }
+            });
+            
+            // Zoom image on mouse enter.
+            zoomedImage.addEventListener('mouseenter', function(e) {
+                this.style.backgroundSize = "250%"; 
+            }, false);
+
+
+            // Show different parts of image depending on cursor position.
+            zoomedImage.addEventListener('mousemove', function(e) {
+                
+                // getBoundingClientReact gives us various information about the position of the element.
+                var dimentions = this.getBoundingClientRect();
+
+                // Calculate the position of the cursor inside the element (in pixels).
+                var x = e.clientX - dimentions.left;
+                var y = e.clientY - dimentions.top;
+
+                // Calculate the position of the cursor as a percentage of the total width/height of the element.
+                var xpercent = Math.round(100 / (dimentions.width / x));
+                var ypercent = Math.round(100 / (dimentions.height / y));
+
+                // Update the background position of the image.
+                this.style.backgroundPosition = xpercent+'% ' + ypercent+'%';
+            
+            }, false);
+
+
+            // When leaving the container zoom out the image back to normal size.
+            zoomedImage.addEventListener('mouseleave', function(e) {
+                this.style.backgroundSize = "contain"; 
+                this.style.backgroundPosition = "left center"; 
+            }, false);
+
+        }
+        return vanillaZoom;
+    }
+
+    // Add the vanillaZoom object to global scope.
+    if(typeof(vanillaZoom) === 'undefined') {
+        window.vanillaZoom = define_library();
+    }
+    else{
+        console.log("Library already defined.");
+    }
+})(window);
--- a/faq.html
+++ b/faq.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>FAQ - HNSAU</title>
+    <meta property="og:image" content="https://hnsau/assets/img/512.png">
+    <meta property="og:type" content="website">
+    <meta name="description" content="Handshake Australia">
+    <meta property="og:title" content="HNS AU">
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/180.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/32.png">
+    <link rel="icon" type="image/png" sizes="180x180" href="assets/img/180.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="assets/img/192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="assets/img/512.png">
+    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="assets/css/vanilla-zoom.min.css">
+</head>
+
+<body>
+    <nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar">
+        <div class="container"><a class="navbar-brand logo" href="/">HNSAU</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+            <div class="collapse navbar-collapse" id="navcol-1">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="faq">FAQ</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main class="page faq-page">
+        <section class="clean-block clean-faq dark">
+            <div class="container">
+                <div class="block-heading">
+                    <h2 class="text-info">FAQ</h2>
+                    <p>Contact us in Discord if you can't find the answers you need</p>
+                </div>
+                <div class="block-content">
+                    <div class="faq-item">
+                        <h4 class="question">Do I need to pay to renew Handshake domains?</h4>
+                        <div class="answer" style="text-align: center;"><img src="assets/img/Life%20cycle%20of%20a%20name.png" width="75%" style="padding-bottom: 10px;">
+                            <p style="text-align: left;">Every 2 years, the domain owner needs to send a heartbeat or renew transaction. This transaction only cost mining fees (~0.04 hns), and is done automatically for you if you are using Namebase.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="page-footer dark">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-3">
+                    <h5>Get started</h5>
+                    <ul>
+                        <li><a href="/">Home</a></li>
+                        <li><a href="https://learn.namebase.io/starting-from-zero/how-to-access-handshake-sites" target="_blank">Resolving</a></li>
+                    </ul>
+                </div>
+                <div class="col-sm-3">
+                    <h5>Contact</h5>
+                    <ul>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2022 Handshake AU</p>
+        </div>
+    </footer>
+    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
+    <script src="assets/js/vanilla-zoom.js"></script>
+    <script src="assets/js/theme.js"></script>
+</body>
+
+</html>
--- a/index.html
+++ b/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Home - HNSAU</title>
+    <meta property="og:image" content="https://hnsau/assets/img/512.png">
+    <meta property="og:type" content="website">
+    <meta name="description" content="Handshake Australia">
+    <meta property="og:title" content="HNS AU">
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/180.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/32.png">
+    <link rel="icon" type="image/png" sizes="180x180" href="assets/img/180.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="assets/img/192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="assets/img/512.png">
+    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
+    <link rel="stylesheet" href="assets/css/vanilla-zoom.min.css">
+</head>
+
+<body>
+    <nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar">
+        <div class="container"><a class="navbar-brand logo" href="/">HNSAU</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
+            <div class="collapse navbar-collapse" id="navcol-1">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
+                    <li class="nav-item"><a class="nav-link" href="faq">FAQ</a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main class="page landing-page">
+        <section class="clean-block clean-hero" style="background-image:url(&quot;assets/img/tech/image4.jpg&quot;);color:rgba(9, 162, 255, 0.85);">
+            <div class="text">
+                <h2>Handshake Australia</h2>
+                <p>The home of Australians using the decentralized web built on Handshake.</p><a class="btn btn-outline-light btn-lg" role="button" href="https://handshake.org/" target="_blank">Learn More About Handshake</a>
+            </div>
+        </section>
+        <section class="clean-block clean-info dark">
+            <div class="container">
+                <div class="block-heading">
+                    <h2 class="text-info">Info</h2>
+                    <p>Handshake is a naming protocol that’s backwards compatible with the existing DNS system. It does not replace the DNS protocol, but instead decentralizes the root zone file where TLD ownership information is stored by adding a distributed and decentralized blockchain-based system that no one controls and anyone can use. This allows for a root zone that is uncensorable, permissionless, and free of gatekeepers like ICANN.<br></p>
+                </div>
+                <div class="row align-items-center">
+                    <div class="col-md-6"><img class="img-thumbnail" src="assets/img/scenery/Handshake.png"></div>
+                    <div class="col-md-6">
+                        <h3>Stop renting yourname.com.au<br>Own yourname/</h3>
+                        <div class="getting-started-info">
+                            <p>Handshake allows you to own your own top level domain (kinda like .au). So you can stop renting yourname.com.au and really own yourname/.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer class="page-footer dark">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-3">
+                    <h5>Get started</h5>
+                    <ul>
+                        <li><a href="/">Home</a></li>
+                        <li><a href="https://learn.namebase.io/starting-from-zero/how-to-access-handshake-sites" target="_blank">Resolving</a></li>
+                    </ul>
+                </div>
+                <div class="col-sm-3">
+                    <h5>Contact</h5>
+                    <ul>
+                        <li><a href="https://discord.gg/WJ6vpjuQv5" target="_blank">Discord</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2022 Handshake AU</p>
+        </div>
+    </footer>
+    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
+    <script src="assets/js/vanilla-zoom.js"></script>
+    <script src="assets/js/theme.js"></script>
+</body>
+
+</html>