modify margins, prepare for js, and add help message

Amolith created

Change summary

_includes/meta_tags/base.html |   1 
_includes/post/about.html     |   1 
_sass/_default.scss           |  28 ++++++++-
about.html                    |   1 
app.js                        | 108 +++++++++++++++++++++++++++++++++++++
index.html                    |  35 +++++++++--
jquery-3.3.1.min.js           |   1 
7 files changed, 162 insertions(+), 13 deletions(-)

Detailed changes

_includes/meta_tags/base.html 🔗

@@ -1,6 +1,7 @@
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="flattr:id" content="nlx3og">
 <title>{% if page.title %} {{ page.title }} {% else %} {{ site.title }} {% endif %}</title>
 <meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 {% if page.tags %}<meta name="keywords" content="{{ page.tags | join: ', ' }}">{% endif %}

_includes/post/about.html 🔗

@@ -5,5 +5,6 @@
         on <strong>{{ page.date | date: "%d %B %Y" }}</strong>
     </div>
     <div class="explore__label">All content on this website is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC-BY 4.0</a> license.</div>
+    <div class="explore__label"><i>(unless otherwise stated)</i></div>
 </div>
 

_sass/_default.scss 🔗

@@ -219,6 +219,26 @@ div.crypto-card p {
     color: #fff;
     border: 2px solid #fff;
 }
+.donate {
+    border-radius: 8px;
+    border: 0px;
+    color: #323234;
+    background-color: white;
+    padding: 5px 20px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    cursor: pointer;
+    border: 2px solid #fff;
+}
+.donate:hover {
+    background-color: #323234;
+    color: #FFFFFF;
+}
 .contact-card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
     background: #4f4f4fff;
@@ -353,7 +373,7 @@ strong {
 }
 
 .post-title {
-    margin-bottom: 110px;
+    margin-bottom: 100px;
     font-family: 'Overpass';
 }
 
@@ -410,7 +430,7 @@ strong {
     text-align: center;
     font-family: 'Inconsolata';
     color: $cloudy;
-    margin-top: 140px;
+    margin-top: 80px;
 }
 
 .explore__divider {
@@ -457,14 +477,14 @@ strong {
 /* =Post page */
 .about {
     color: $cloudy;
-    margin-top: 70px;
+    margin-top: 50px;
     text-align: center;
     line-height: 24px;
 }
 
 .about__divider {
     font-size: 20px;
-    margin-bottom: 50px;
+    margin-bottom: 10px;
     letter-spacing: 9.09px;
 }
 

about.html 🔗

@@ -12,9 +12,15 @@ permalink: /about/
         <hr/>
         <h1>Finance</h1>
         <p>At the moment, all the sites I host are running on <a href="https://netcup.eu" target="_blank">netcup GmbH</a>'s <a href="https://www.netcup.eu/vserver/vps.php" target="_blank">500 G8</a> VPS. I pay <b>$6.10/mo</b> in lump sums of <b>$36.60</b> every six months. The domain <a href="https://nixnet.xyz" target="_blank">nixnet.xyz</a> is registered with <a href="http://gandi.net" target="_blank">gandi.net</a> and it renews at <b>$13.63/yr</b>. I use Gandi because they have WHOIS privacy by default, every domain comes with two inboxes and unlimited aliases for both. One is <a href="mailto:amolith@nixnet.xyz">amolith@nixnet.xyz</a> and the other uses my real name rather than my pseudonym.</p>
-        <p>At the moment, I only accept fiat currencies on <a href="https://liberapay.com/Amolith/" target="_blank">Liberapay</a> (so far) and how much I make from it is below.</p>
         </h1>

app.js 🔗

@@ -0,0 +1,108 @@
+
+$(function(){
+
+    var model = {
+        // renomear
+        dat: [
+        ],
+        read_json: function() {
+            $.ajax({
+                url: "/cards.json",
+                dataType: 'json',
+                async: false,
+                success: function(data) {
+                    $(data["cards"]).each(function(){
+                        var card_info = $(this)[0];
+                        model.set_data(card_info);
+                    });
+                }
+            });
+        },
+        set_data: function(d) {
+            model.dat.push(d);
+        },
+        get_data: function() {
+            return model.dat;
+        },
+        filter_data: function(conteudo) {
+            var $d = model.dat;
+            var $filter = [];
+            var $c = conteudo.toLowerCase();
+            $($d).each(function(i){
+                if(
+                    $d[i].name.toLowerCase().indexOf($c) >= 0 ||
+                    $d[i].description.toLowerCase().indexOf($c) >= 0 ||
+                    $d[i].button_text.toLowerCase().indexOf($c) >= 0
+                ) {
+                    $filter.push($d[i]);
+                }
+            });
+            return $filter;
+        },
+        init: function() {
+            model.read_json();
+        }
+    };
+    var octopus = {
+        init: function() {
+            model.init();
+            view.init();
+            octopus.create_card(model.get_data());
+        },
+        create_card: function(d) {
+            $.each(d, function(i){
+                view.create_card(d[i].name, d[i].description, d[i].button_text, d[i].link, d[i].tor);
+            });
+        },
+        filter_data: function(c) {
+            var d = model.filter_data(c);
+            $.each(d, function(i){
+                view.create_card(d[i].name, d[i].description, d[i].button_text, d[i].link, d[i].tor);
+            });
+        },
+        recreate_cards: function() {
+            octopus.create_card(model.get_data());
+        }
+    };
+
+    // Renomear
+    var view = {
+        init: function() {
+            this.container = $(".flex-cards");
+            this.search_field = $("#search_field");
+            view.events();
+        },
+        events: function(){
+            this.search_field.on('input',function(){
+                var $conteudo = $(this).val();
+                view.clean_cards();
+                if($conteudo.length == 0){
+                    octopus.recreate_cards();
+                }else {
+                    octopus.filter_data($conteudo);
+                }
+            });
+        },
+        create_card: function(name, desc, bt_txt, link, tor){
+            var $card = $("<div>").addClass("card");
+            var $h1 = $("<h1>").text(name);
+            var $desc = $("<p>").text(desc);
+            var $button = $("<button>").addClass("button").text(bt_txt);
+            var $icon = $("<button>").addClass("tor").text("Tor");
+            var $a = $("<a>").attr("href", link);
+            var $tor = $("<a>").attr("href", tor);
+            $a.append($button);
+            $tor.append($icon);
+            if (tor == "#") {
+                $card.append($h1).append($desc).append($a);
+            } else {
+            $card.append($h1).append($desc).append($a).append($tor); 
+            }
+            this.container.append($card);
+        },
+        clean_cards: function() {
+            this.container.empty();
+        }
+    };
+    octopus.init();
+});

index.html 🔗

@@ -9,20 +9,39 @@ priority: 0.9
 ---
 <center><p>I host a variety of services that are available for anyone to use free of charge. Below is a list with descriptions of each.</p></center>
 <br/>
-<center><h1><a href="https://status.nixnet.xyz" target="_blank"><u>Status page</u></a> / <a href="https://netdata.nixnet.xyz" target="_blank"><u>Stats page</u></a></h1></center>
+<center><h1><a href="https://status.nixnet.xyz" target="_blank"><u>Status</u></a> / <a href="https://netdata.nixnet.xyz" target="_blank"><u>Stats</u></a></h1></center>
+<center><h1><a href="https://git.nixnet.xyz/NixNet/" target="_blank"><u>Technical information</u></a></h1></center>
 <!--
-<br/>
-<center>
+    <br/>
+    <center>
     <form>
-        <input id="search_field" type="text" autocomplete="off" name="search" placeholder="Search services . . .">
+    <input id="search_field" type="text" autocomplete="off" name="search" placeholder="Search services . . .">
     </form>
-</center>
-<br/>
+    </center>
+    <br/>
 -->
 <br/>
 <div class="flex-wrapper">
     <div class="flex-cards">
-    <!-- JS cards here -->    
+        <!-- JS cards here -->    
     </div>
 </div>
-<center><h1><u><a href="https://git.nixnet.xyz/NixNet/" target="_blank">Technical information about NixNet</a></u></h1></center>
+<br />
+<div class="content">
+    <center><h1>Help welcome <i class="fa fa-heart"></i></h1></center>
+    <p>I didn't think I would be doing this but I find myself needing assistance. As I say in <a href="/about">about/</a>, I am a high school student. I'm currently trying to get together enough money to go to college for computer science. I'm not sure exactly what I want to go into but I am thinking about cybersecurity and working with SELinux as a specialisation. Back to the point.</p>
+    <p>College is expensive in the US. Very expensive. The one I plan to go to will be ~$28,000 per year. They gave me enough financial aid and institutional scholarships to bring the cost down to $8,000/yr. My father has said he would help and bring it down further to ~$5,500/yr. Even with third-party scholarships, this is going to leave me thousands of dollars in debt.</p>
+    <p>If you can do anything to help monetarily, I would be forever grateful. I pay for the servers running this site and everything on it partially from donations and the rest out-of-pocket. If you even know of any scholarships I may be eligible for, a <a href="/contact/">message</a> and a link would be greatly appreciated.</p>
+    <p>
+    <center>
+        <a href="https://liberapay.com/Amolith/donate" target="_blank"><button class="donate"><i class="fa fa-liberapay"></i> Liberapay</button></a> 
+        <!--<a href="https://ko-fi.com/Amolith" target="_blank"><button class="donate"><i class="fa fa-coffee"></i> Ko-fi</button></a>-->
+        <a href="https://flattr.com/@Amolith" target="_blank"><button class="donate"><i class="fa fa-refresh"></i> Flattr</button></a>
+        <a href="https://tippeee.com/amolith" target="_blank"><button class="donate"><i class="fa fa-tipeee"></i> tipeee</button></a>
+    </center>
+    </p>
+    <center>
+        <p>Thank you,<br />
+        Amolith</p>
+    </center>
+</div>

jquery-3.3.1.min.js 🔗

@@ -0,0 +1,2 @@
+/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */