Detailed changes
@@ -60,6 +60,33 @@
}
/* =Base */
+
+
+
+
+input[type=text] {
+ width: 25%;
+ box-sizing: border-box;
+ border: 2px solid #333333;
+ border-radius: 40px;
+ background-color: #333333;
+ font-size: 16px;
+ text-align: center;
+ padding: 10px 0px 10px 0px;
+ -webkit-transition: width 0.4s ease-in-out;
+ transition: width 0.4s ease-in-out;
+ -moz-box-shadow: inset 0 0 10px #191919;
+ -webkit-box-shadow: inset 0 0 10px #191919;
+ box-shadow: inset 0 0 10px #191919;
+}
+
+input[type=text]:focus {
+ width: 75%;
+}
+
+
+
+
body {
font-family: 'Open Sans';
color: $iron;
@@ -505,6 +532,12 @@ strong {
}
}
@media (max-width: 620px) {
+ input[type=text] {
+ width: 80%;
+ }
+ input[type=text]:focus {
+ width: 100%;
+ }
.card {
width: 80%;
}
@@ -0,0 +1,112 @@
+
+$(function(){
+
+ var model = {
+ // renomear
+ dat: [
+
+ ],
+ read_json: function() {
+
+ $.ajax({
+ url: "cards/info.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);
+ });
+ },
+ 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);
+ });
+ },
+ recreate_cards: function() {
+ octopus.create_card(model.get_data());
+ }
+ };
+
+ // Renomear
+ var view = {
+ init: function() {
+ this.container = $(".flex-wrapper");
+ 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){
+ var $card = $("<div>").addClass("card");
+ var $h2 = $("<h2>").addClass("title").text(name);
+ var $desc = $("<div>").addClass("description").text(desc);
+ var $button = $("<button>").text(bt_txt);
+
+
+ $card.append($h2).append($desc).append($button);
+ this.container.append($card);
+ },
+ clean_cards: function() {
+ this.container.empty();
+ }
+ };
+
+
+ octopus.init();
+});
@@ -0,0 +1,20 @@
+{
+ "cards" :
+ [
+ {
+ "name": "Mastodon",
+ "description": "Mastodon is a decentralised microblogging social network with millions of users worldwide. You can create an account on one instance and interact with an instance from across the world.",
+ "button_text": "Socialise!"
+ },
+ {
+ "name": "Mattermost",
+ "description": "Mattermost is a FLOSS application for real-time chat. Use this for communicating with other users, joining a few different communities, and getting support for NixNet services.",
+ "button_text": "Chat!"
+ },
+ {
+ "name": "Wireguard",
+ "description": "WireGuard is an open source application and protocol that uses VPN techniques to create secure tunnels in various configurations. It aims to be more performant than OpenVPN or IPsec0.",
+ "button_text": "Tunnel!"
+ }
+ ]
+}
@@ -1,7 +1,7 @@
---
layout: page
title: "NixNet"
-subtitle: "Your one-man Libre Hosting provider"
+subtitle: "Freedom served with a slice of liberty"
description: "A network of websites and services hosted by Amolith available for anyone to use free of charge."
cover: /cover.png
sitemap:
@@ -0,0 +1,2 @@
+/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */
@@ -3,10 +3,10 @@
"@type" : "Organization",
"organizationType" : "Informal collective",
"name" : "NixNet",
- "tagLine" : "Your one-man Libre Hosting provider",
+ "tagLine" : "Freedom served with a slice of liberty",
"homeUrl" : "https://nixnet.xyz",
"logo" : "https://nixnet.xyz/logo.png",
- "description": "A few services open for anyone to use completely free of charge.",
+ "description": "A network of websites and services hosted by Amolith available for anyone to use free of charge.",
"communicationLanguages": "en",
"contactUrl": "https://nixnet.xyz/contact",
"privacyPolicyUrl" : "-",
@@ -0,0 +1,28 @@
+---
+layout: page
+title: "NixNet"
+subtitle: "Your one-man Libre Hosting provider"
+description: "A network of websites and services hosted by Amolith available for anyone to use free of charge."
+cover: /cover.png
+permalink: /test/
+priority: 0.9
+---
+<style>
+</style>
+<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>
+</br>
+<center>
+ <form>
+ <input type="text" autocomplete="off" name="search" placeholder="Search services . . .">
+ </form>
+</center>
+</br>
+</br>
+<div class="flex-wrapper">
+
+</div>
+<script src="js/libs/jquery-3.3.1.min.js" charset="utf-8"></script>
+<script src="js/app.js" charset="utf-8"></script>
+</br>