dec19

src/build_actix/route.rs

@@ -224,6 +224,72 @@ pub async fn business( req: HttpRequest ) -> Result {
     ).await
 }
 
+pub async fn network( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    // if response Ok return HttpResponseBuilder
+    HttpResponse::Ok()
+    // set response content type html
+    .content_type("text/html")
+    // set response body to template context
+    .body(
+        // render template context
+        template::TplNetwork {
+            // lang to value of Accept-Language header
+            lang : &template::get_lang(&req),
+        }
+        
+        // render template context into String
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
+pub async fn cannabinieri( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    // if response Ok return HttpResponseBuilder
+    HttpResponse::Ok()
+    // set response content type html
+    .content_type("text/html")
+    // set response body to template context
+    .body(
+        // render template context
+        template::TplCanna {
+            // lang to value of Accept-Language header
+            lang : &template::get_lang(&req),
+        }
+        
+        // render template context into String
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
+pub async fn greenhome( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    // if response Ok return HttpResponseBuilder
+    HttpResponse::Ok()
+    // set response content type html
+    .content_type("text/html")
+    // set response body to template context
+    .body(
+        // render template context
+        template::TplHome {
+            // lang to value of Accept-Language header
+            lang : &template::get_lang(&req),
+        }
+        
+        // render template context into String
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
 
 
 

src/build_actix/template.rs

@@ -80,6 +80,24 @@ pub struct TplModel<'a> {
     pub lang: &'a str,
 }
 
+#[derive(Template)]
+#[template(path="network.html")]
+pub struct TplNetwork<'a> {
+    pub lang: &'a str,
+}
+
+#[derive(Template)]
+#[template(path="canna.html")]
+pub struct TplCanna<'a> {
+    pub lang: &'a str,
+}
+
+#[derive(Template)]
+#[template(path="greenhome.html")]
+pub struct TplHome<'a> {
+    pub lang: &'a str,
+}
+
 
 // linked to error template
 #[derive(Template)]

src/main.rs

@@ -28,6 +28,11 @@ async fn main() -> std::io::Result<()> {
             .route("/robot", web::get().to(route::robot))
             .route("/app", web::get().to(route::app))
             .route("/virtual", web::get().to(route::business))
+            .route("/network", web::get().to(route::network))
+            .route("/cannabinieri", web::get().to(route::cannabinieri))
+            .route("/greenhome", web::get().to(route::greenhome))
+            // footer
+            
         })
         .bind("0.0.0.0:5000")?
         .run()

templates/app.html

@@ -1,5 +1,31 @@
 {% extends "base.html" %}
+{% block title %}RootWork{%endblock%}
+
 {% block content %}
-  <h1>RootWork</h1>
-  <p>The social network of plants</p>
+<div class ="container">
+  <div class ="content_container" id="first">
+      <img src="/assets/img/sample-permapp-screen.webp">
+      <h1>RootWork</h1>
+      <p id="up">Wir entwickeln gerade den Prototyp des Low-Tech Hexapods, der die Gartenarbeit übernehmen und Daten über unser Ökosystem sammeln soll.
+          Die Spinne hat noch einen weiten Weg vor sich.
+          Diese Daten wird sie in die PermApp eintragen, eine App die zu einem Netzwerk von Informationen zwischen den Wechselwirkungen in unserem Ökosystem ausgebaut wird.
+          Die Kommunikation zwischen den Spinnen funktioniert abgeschnitten vom World wide web, über sein eigenes verschlüsseltes Mesh.
+      </p>
+  </div>
+  <div class ="content_container" id="spiderpi" >
+      <img src="/assets/img/pattern.webp ">
+      <h1>Progress</h1>
+      <p id="littleup">SpiderPi ist Raspberry-Pi betriebener Roboter. Er führt Programme in Python aus und hat eine eingebaute Kamera, über die er in der Lage ist, einfache Object Detection auszuführen.
+          Derzeit sind wir damit beschäftigt, mit Hilfe von Photogrammetrie ein 3d Bild zu erstellen, in dem der Roboter sich bewegen und orientieren kann.
+          Unsere Vision ist es, einen bezahlbaren Gartenroboter zu entwickeln. Während der die Gartenarbeit erledigt, sammelt der Roboter Daten über alle für Pflanzen wichtigen Faktoren.
+          Es liegt noch viel Arbeit vor uns. Dafür brauchen wir deine Unterstützung.
+       </p>
+  </div>
+  <div class ="content_container" id="permapp">
+      <img id="mysvg" src="/assets/img/VR.svg">
+      <h1 id="down">UI</h1>
+      <p id="littleup">In der PermApp werden die Informationen der Wechselwirkungen ökologischer Entitäten gespeichert. Und visualisiert. Durch Rating kommen die besten Systeme an die Oberfläche. Am Ende werden die besten Netze miteinander kombiniert. </p>
+      <a href="https://code.basabuuka.org/alpcentaur/permapp">Code</a>
+  </div>
+</div>
 {% endblock %}

templates/assets/css/box.css

@@ -187,7 +187,7 @@ input:active ~ .close  {
   }
 }
 
-@media (min-height: 800px) and (max-width: 768px) {
+@media (min-height: 750px) and (max-width: 768px) {
   .open {
     max-height: 45vh;
   }
@@ -279,7 +279,8 @@ input:active ~ .close  {
   .open {
     max-width: 35vw;
     top: 20vh;
-    right: 10vw;
+    right: 5vw;
+    max-height: 50vh;
   }
 
   .close {
@@ -293,6 +294,33 @@ input:active ~ .close  {
     left: 80vw;
   }
 
+  .content h2 {
+    font-size: 3.25vh;
+    margin: 3vh 0 2vh 0;
+  }
+
+  .content h3 {
+    font-size: 1.75vh;
+    line-height: 3vh;
+  }
+
+  .content p {
+    font-size: 1.35vh;
+    line-height: 2.5vh;
+  }
+
+  .content a {
+   width: 15vw;
+   border: .25vw solid #000;
+  }
+
+  .content a:hover {
+    border: .1vw solid #8693AB;
+  }
+
+  .content a:active {
+    border: .1vw solid #8693AB;
+  }
 
 }
 

templates/assets/css/footer.css

@@ -25,7 +25,12 @@
 }
 
 .footer_container #l3 {
-    grid-column: 1/3;
+    grid-column: 2;
+    grid-row: 3;
+}
+
+.footer_container #l4 {
+    grid-column: 1;
     grid-row: 3;
 }
 
@@ -76,6 +81,11 @@ a:active {
         grid-row: 1;
     }
 
+    .footer_container #l4 {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
     a, p, p a {
         font-size: 1.5vh;
     }

templates/assets/css/nojs_net.css

@@ -20,6 +20,7 @@ svg {
 
 .nodes {
     stroke: #8693AB;
+    cursor: pointer;
 }
 
 .nodes:active, .nodes:hover {
@@ -219,11 +220,13 @@ svg {
 
 @media (min-width: 1000px) {
     svg {
-        max-height: 77.5vh;
-        width: 50vw;
-        margin-left: 10vw;
+        max-height: 75vh;
+        width: 55vw;
+        margin-left: 7.5vw;
     }
 
+
+
 }
 
 
@@ -235,12 +238,14 @@ svg {
 
 @media (min-height: 840px) and (max-width: 768px)  {
     svg {
-        max-height: 70vh;
-        top: 15vh;
+        max-height: 90vh;
+        top: 20vh;
     }
 }
 
 
+
+
  
     
 

templates/assets/css/pages.css

@@ -0,0 +1,230 @@
+.container {
+    width: 100vw;
+    font-family: 'Roboto', sans-serif;
+}
+
+img {
+    border-radius: 50%;
+}
+
+.content_container {
+    display: grid;
+    justify-items: center;
+    padding: 0 1vw 2vh 1vw;
+}
+
+.content_container img {
+    grid-row: 2;
+    grid-column: 1/2;
+    height: 80vw;
+    width: 80vw;
+}
+
+.content_container h1 {
+    grid-row: 1;
+    color: #000;
+    font-size: 6vh;
+    text-transform: uppercase;
+    padding: 1vh 0;
+    letter-spacing: .15vw;
+}
+
+.content_container h1 span {
+    opacity: 70%;
+}
+
+.content_container p {
+    grid-row: 2/3;
+    grid-column: 1/2;
+    text-align: center;
+    background-color: rgba(255, 255, 255, 0.5);
+    margin-top: 35vh;
+    color: #333;
+    font-size: 1.5vh !important;
+    padding: 2vh 2vw 4vh 2vw;
+    letter-spacing: .1vw;
+    line-height: 3.25vh !important;
+}
+
+.content_container a {
+    grid-row: 3;
+    text-decoration: none;
+    background-color: #fff;
+    border: .25vw solid #000;
+    opacity: 80%;
+    color: #000;
+    padding: 2vh 7vw;
+    text-transform: uppercase;
+    letter-spacing: .35vw;
+    transition: all ease .4s;
+    
+}
+
+.content_container a:hover {
+    box-shadow: 0px 0px 10px #8693AB;
+}
+
+.content_container a:active {
+    box-shadow: 0px 0px 10px #8693AB;
+}
+
+#withbutton {
+    padding-bottom: 4vh;
+}
+
+#withbutton p {
+    padding-bottom: 3vh;
+}
+
+#smaller_text {
+    font-size: 6vh;
+}
+
+#smaller {
+    font-size: 4.5vh;
+}
+
+#mid_padding_bottom {
+    font-size: 10vw;
+    text-align: center;
+    margin-bottom: 2vh;
+}
+
+#adjust_padding {
+    padding-top: 4vh;
+}
+
+#tiny {
+    font-size: 4vh;
+    padding: 1vh 1vw;
+    text-align: center;
+}
+
+#small_centered {
+    font-size: 4.5vh;
+    text-align: center;
+    line-height: 8vh;
+}
+
+#padding_bottom {
+    padding-bottom: 4vh;
+}
+
+#space_between {
+    padding-bottom: 8vh;
+}
+
+#weed {
+    height: 90vw;
+}
+
+#up {
+    margin-top: 25vh !important;
+}
+
+#littleup {
+    margin-top: 30vh !important;
+}
+
+#down {
+    margin-bottom: 0;
+}
+
+@media (min-width: 700px) {
+
+    .content_container h1 {
+        margin-top: 0;
+        font-size: 5.5vh;
+    }
+
+    .content_container p {
+        padding-bottom: 6vh;
+        padding-top: 2vh;
+        margin-top: 25vh;
+        font-size: 1.8vh !important;
+        line-height: 3.75vh !important;
+    }
+
+    .content_container {
+        display: grid;
+        justify-items: center;
+        padding: 1vh 1vw 2vh 1vw;
+        
+    }
+
+    .content_container img {
+        height: 40vw !important;
+        width: 40vw !important;
+    }
+
+    
+
+
+}
+
+@media (min-width: 1000px) {
+
+    .container {
+        padding-top: 5vh;
+        margin-bottom: 6vh;
+    }
+
+    .content_container {
+        padding: 3vh 4vw 1vh 4vw;
+        margin-top: 6vh;
+    }
+
+
+    #first {
+        margin-top: 0;
+    }
+
+    .content_container img {
+        grid-column: 1/3;
+        grid-row: 1/3;
+        height: 40vw;
+        width: 40vw;
+        align-self: center;
+        justify-self: flex-start;
+    }
+
+    .content_container h1 {
+        grid-column:2 ;
+        grid-row: 1;
+        align-self: center;
+        letter-spacing: .3vw;
+    }
+
+    .content_container p {
+        grid-column:2 ;
+        grid-row: 2;
+        margin-top: 0;
+        width: 50vw;
+        line-height: 5.25vh;
+        font-size: 1.95vh !important;
+    }
+
+    .content_container a {
+        grid-column: 2;
+        padding: 2vh 3vw;
+        border: .15vw solid #000;
+    }
+
+    #withbutton {
+        padding-bottom: 6vh;
+    }
+
+    #adjust_padding {
+        padding-top: 8vh;
+    }
+
+    #small_centered {
+        margin-left: 2vw;
+        font-size: 6vh;
+    }
+}
+
+#spider {
+    height: 85vw;
+    width: 90vw;
+}

templates/base.html

@@ -13,9 +13,11 @@
             <link rel="stylesheet" href="/assets/css/nav.css" />
             <link rel="stylesheet" href="/assets/css/footer.css" />
             <link rel="stylesheet" href="/assets/css/nojs_net.css" />
+            <link rel="stylesheet" href="/assets/css/pages.css" />
 
             <link rel="stylesheet" href="/assets/css/box.css"/>
-            <title>Cyberpreneur</title>
+            
+            <title>{%block title%}{%endblock%} | Cyberpreneur</title>
         {% endblock %}
     </head>
     <body>

templates/canna.html

@@ -0,0 +1,41 @@
+{% extends "index.html" %}
+
+<!-- load into index template -->
+{% block child %}
+<div class="mobile_placeholder">
+    <form action="/" method="get">
+        <input type="submit">
+            <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+                    <stop offset="5%"  stop-color="#8693AB" />
+                    <stop offset="95%" stop-color="#BDD4E7" />
+                    </linearGradient>
+
+                    <linearGradient id="myGradient2" gradientTransform="rotate(45)">
+                        <stop offset="5%"  stop-color="#BDD4E7" />
+                        <stop offset="95%" stop-color="#8693AB" />
+                    </linearGradient>
+                </defs>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </form>
+    <div class="open">
+        {# Test Content - add language handling json#}
+        <div class="box">
+        </div>
+        <div class="content">
+            <h2 id="small">Cannabinieri</h2>
+            <h3>Biodynamic Transparent CBD experiments </h3>
+            <p>The most impressive network on out planet can be found underground. 
+               All organisms on earth are related, they are friends and followers. 
+               All of them have favorite environments that get them into a good mood. 
+               They show it with flowers or sweet fruit.
+               RootWork aims to become a network of optimal conditions for all organisms and serves as a database for Tekla.
+            </p>
+            <a href="/hemp">MORE</a>
+        </div>
+    </div>
+
+</div>
+{% endblock%}

templates/cube.html

@@ -1,5 +1,29 @@
 {% extends "base.html" %}
-{% block content %}
-  <h1>Kaos Cube</h1>
-  <p>Hello, world!</p>
-{% endblock %}
+{% block title %}Kaos Cube{%endblock%}
+
+{%block content%}
+<div class ="container">
+    <div class ="content_container">
+        <img src="/assets/img/cube_space.webp">
+        <h1>Kaos Cube</h1>
+        <p>Der Kaos Cube ist das Netzwerk, in dem sich die Spinne bewegt. Er spannt ein dezentrales und privates Netzwerk zwischen den Spinnen.
+            Der Cube ist eine Art Router, kombiniert mit digitalen Token basierend auf dem Ethereum Netzwerk. Die Antenne des Kaos Cubes fängt naheliegende Netzwerke ein. Jeder Kaos Cube Besitzer ist durch einen Ether Token in der Lage sein eigenes Inernet zu teilen. 
+            Der KaosCube ist Vorraussetzung für die Spinne. Individuelle Automation, welche die Spinne darstellt, birgt die große Gefahr eines perfekten Überwachungstools. Das setzt voraus, dass ihre Nutzer und Besitzende sich mit dem Netzwerk und der Sicherheit der Daten auseinandergesetzt haben.
+        </p>
+    </div>
+    <div class ="content_container">
+        <img src="/assets/img/opi.webp ">
+        <h1 id="tiny">Die physische Infrastruktur des Internets in den Händen des Nutzers</h1>
+        <p>
+        Mit dem Kaos Cube wird es möglich, sichere Internet Verbindungen mit anderen teilen.
+        Der Ether Token lässt Contracts zu, mit denen jeder Nutzer einstellt, wie er die Kosten seiner Bandbreite auf andere verteilen möchte. Die Verschlüsselung des Kaos Cubes ist auf Cjdns aufgebaut. Das bedeutet, dass an Stelle von IPs öffentliche Schlüssel die "Identität" der Nutzer darstellen. Daher ist der gesamte Datenverkehr des Netzwerkes der Cubes standardmäßig Onion verschlüsselt. Onion ist das Prinzip von Tor, beziehungsweise das, was als Darknet bezeichnet wird.
+         </p>
+    </div>
+    <div class ="content_container">
+        <img src="/assets/img/ethereum_stock_1.webp">
+        <h1 id="small_centered">Der<span> Decnet Coin</span> </h1>
+        <p>Zwei Smart Contracts machen diesen Coin aus. Der erste Contract bestimmt, wieviele Coins der KaosCube von Fremden verlangen soll. Dafür dass er Bandbreite weiterleitet. Oder auch als Tor Guard agiert. 
+            Der zweite Contract setzt über alle DecNETcoins einen Anteil fest, der in zentrale Knotenpunkte fließen soll. Zentrale Knotenpunkte in einem dezentralen Netzwerk? Für diesen empfindlichen Punkt dienen "Bürger für Glasfaser" sowie der Stadtteil von Barcelona, in dem Freifunk große Teile des Internets bildet, als Vorbilder. Ziel ist ein von den Nutzern demokratisch kontrolliertes Netzwerk. Ein Internet, dessen physische Infrastruktur im Besitz der Nutzer ist, gewartet und durchdrungen von genau diesen.</p>
+    </div>
+</div>
+{%endblock content%}

templates/cyber.html

@@ -1,5 +1,27 @@
 {% extends "base.html" %}
-{% block content %}
-  <h1>Cyberpreneur</h1>
-  <p>Hello, world!</p>
+{% block title %}Virtual Farming{%endblock%}
+
+{%block content%}
+<div class ="container">
+    <div class ="content_container" id="adjust_padding">
+        <img src="/assets/img/3d_greenhouse.webp ">
+        <h1 id="small_centered">Cyberpreneur</h1>
+        <p>Wir wollen, dass alle unsere Kunden zum Unternehmer im Cyberspace werden. 
+            Die Roboterspinnen gehen in den Besitz von den Cyberpreneuren, um ihre Pflanzen für sie anzubauen.
+            Wir kümmern uns um Administration sowie die schrittweise Vereinfachung und Beseitigung dieser.
+            Wie in einem Spiel können die Cyberpreneure rund um die Uhr ihre Pflanzen sehen und mit einer der Spinnen kommunizieren.
+        </p>
+    </div>
+    <div class ="content_container">
+        <img src="/assets/img/hemp_field_greded.webp">
+        <h1>Progress</h1>
+        <p>Wir nutzen Photogrammetrie um unser Gewächshaus in in die virtuelle Realität zu bringen.
+            Auf dieser Website wird für registrierte Cyberpreneure ein von der Spinne produziertes, virtuelles, dreidimensionales und interaktives Abbild unseres Gewächshauses regelmäßig upgedatet.
+             Kunden können ihre Pflanzen rund um die Uhr sehen und Wünsche äussern, die später von der Spinne angenommen und beantwortet werden.
+             Cyberpreneure können, wie in einem Spiel, ihre Pflanzen in allen Wachsumsphasen sehen, selbst eingreifen und letztendlich bestimmen wann die Blüten geerntet werden, wie sie verarbeitet werden.
+
+         </p>
+    </div>
+</div>
+
 {% endblock %}

templates/footer.html

@@ -2,6 +2,8 @@
     <div class="footer_container">
         <p>© Cannabinieri 2021 <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">CC-NC-4.0 </a>.</p>
         <h6 id ="l1"><a href="/contact">{{ "footer_item1"|translate(lang) }}</a></h6>
+        <!-- add game here or similar crowdfunding pitch -->
+        <h6 id ="l4"><a href="/crowdfunding">Donate</a></h6>
         <h6 id ="l2"><a href="https://code.basabuuka.org/">Code</a></h6>
         <h6 id ="l3"><a href="/privacy">{{ "footer_item2"|translate(lang) }}</a></h6>
     </div>

templates/greenhome.html

@@ -0,0 +1,41 @@
+{% extends "index.html" %}
+
+<!-- load into index template -->
+{% block child %}
+<div class="mobile_placeholder">
+    <form action="/" method="get">
+        <input type="submit">
+            <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+                    <stop offset="5%"  stop-color="#8693AB" />
+                    <stop offset="95%" stop-color="#BDD4E7" />
+                    </linearGradient>
+
+                    <linearGradient id="myGradient2" gradientTransform="rotate(45)">
+                        <stop offset="5%"  stop-color="#BDD4E7" />
+                        <stop offset="95%" stop-color="#8693AB" />
+                    </linearGradient>
+                </defs>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </form>
+    <div class="open">
+        {# Test Content - add language handling json#}
+        <div class="box">
+        </div>
+        <div class="content">
+            <h2 id="small">Green Machine</h2>
+            <h3>Responsive Sustainable Houses</h3>
+            <p>The most impressive network on out planet can be found underground. 
+               All organisms on earth are related, they are friends and followers. 
+               All of them have favorite environments that get them into a good mood. 
+               They show it with flowers or sweet fruit.
+               RootWork aims to become a network of optimal conditions for all organisms and serves as a database for Tekla.
+            </p>
+            <a href="/offgrid">MORE</a>
+        </div>
+    </div>
+
+</div>
+{% endblock%}

templates/hemp.html

@@ -1,5 +1,33 @@
 {% extends "base.html" %}
-{% block content %}
-  <h1>Hemp</h1>
-  <p>Hello, world!</p>
-{% endblock %}
+{% block title %}Cannabinieri{%endblock%}
+
+{%block content%}
+<div class ="container">
+    <div class ="content_container">
+        <img id="weed" src="/assets/img/hemp.webp">
+        <h1 id="small_centered">Cannabinieri</h1>
+        <p>Unsere Mission ist konsequent biologisch anzubauen und mit Hilfe von Technik mehr über sie zu lernen.<br>
+        All unsere Produkte sind Experimente, die Wechselwirkungen in unserem Ökosystem erforschen.
+       Unsere Partnerpflanzen sind unsere Dünger. Insekten sind unsere Helfer gegen Schädlinge.
+        <br>Entdecke unser erstes Experiment !</p>
+    </div>
+    <div class ="content_container" id="withbutton">
+        <img src="/assets/img/oil_drop.webp">
+        <h1><span>CBD </span>Oil</h1>
+        <p id="up">Unsere CBD Pflanzen verarbeiten wir selbst zu Vollspektrum Ölen.
+         Unsere ersten Öle gewinnen wir durch Extraktion mit Trinkalkohol und natürlich ohne artifizielle Zusätze.
+        Wir experimentieren mit verschiedenen Trägerölen und Konzentrationen. 
+        <br>Unsere Vollspektrum Öle stellen wir aus europäisch zertifiziertem Nutzhanf her, deren THC Gehalt 0.2 Prozent nicht überschreitet.
+        All unsere Öle kommen mit einem Analyse Zertifikat, das genaue Auskunft über die Menge verschiedener Cannabinoide gibt. Auch auf gängige Pestizide werden wir testen, solange wir noch keine 24 Stunden live Übertragung aller Schritte leisten können.<br>
+        </p>
+        <a href="hemp/oil">Donate</a>
+    </div>
+    <div class ="content_container" id="withbutton">
+        <img src="/assets/img/Canna17.webp ">
+        <h1 id="tiny">Cyber Transparency</h1>
+        <p>Unsere Ziel ist es, unsere Experimente auch in Form von Blüten anzubieten. Der Verkauf und die Einfuhr von Nutzhanf Blüten ist für uns und viele andere kleine Firmen, die ins CBD Business einsteigen wollen, ohne rechtliche Absicherung zu riskant.
+            Hier findest du mehr zu unseren Nutzhanf Blüten, aus denen wir auch unsere Öle herstellen. </p>
+        <a href="/cyberpreneur">Mehr</a>
+    </div>
+</div>
+{%endblock content%}

templates/index.html

@@ -40,7 +40,7 @@
 
         <defs>
             <pattern id="machina" height="100%" width="100%">
-                <image href="/assets/img/boat_construction.webp" width="26" height="31"></image>
+                <image href="/assets/img/boat_construction.webp" width="24" height="31"></image>
             </pattern>  
         </defs>
 
@@ -76,17 +76,20 @@
 
         <g class="group_4">
             <path id="edge_9" class="edges" d="m26.119 94.06c34.309 0.3248 34.299 0.31493 34.299 0.31493" stroke-width="2.6458"/>
-            <circle id="circle_4" class="nodes" cx="65.545" cy="91.148" r="12" style="paint-order: fill stroke markers" fill="url(#kaos)"/>
+            <a href="/network">
+                <circle id="circle_4" class="nodes" cx="65.545" cy="91.148" r="12" style="paint-order: fill stroke markers" fill="url(#kaos)"/>
+            </a>
         </g>
 
         <g class="group_5">
             <path id="edge_10" class="edges" d="m23.407 96.406c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.9104"/>
-            <a id="link_1" href="/spider" style>an class="o">="paint-order: fill stroke markers">
+            <a href="/cannabinieri">
                 <circle id="circle_5" class="nodes" cx="20.734" cy="95.501" r="12.5" style="paint-order: fill stroke markers" fill="url(#hemp)"/>
             </a>
         </g>
-
-        <circle id="circle_6" class="nodes" cx="50" cy="120" r="12.5" style="paint-order: fill stroke markers" fill="url(#machina)"/>
+        <a href="/greenhome">
+            <circle id="circle_6" class="nodes" cx="50" cy="120" r="12.5" style="paint-order: fill stroke markers" fill="url(#machina)"/>
+        </a>
     </g>
 
     <g fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".12003">
@@ -135,7 +138,7 @@
 
         <defs>
             <pattern id="machinalala" height="100%" width="100%">
-                <image href="/assets/img/boat_construction.webp" width="26" height="31"></image>
+                <image href="/assets/img/boat_construction.webp" width="24" height="31"></image>
             </pattern>  
         </defs>
 
@@ -174,17 +177,20 @@
 
         <g class="group_4">
             <path id="edge_9" class="edges" d="m75 87.5 l10 10"/>
-            <circle id="circle_4" class="nodes" cx="70" cy="80" r="12" style="paint-order: fill stroke markers" fill="url(#kaosk)"/>
+            <a href="/network">
+                <circle id="circle_4" class="nodes" cx="70" cy="80" r="12" style="paint-order: fill stroke markers" fill="url(#kaosk)"/>
+            </a>
         </g>
 
         <g class="group_5">
         
-            <a id="link_1" href="/spider" style>an class="o">="paint-order: fill stroke markers">
+            <a href="/cannabinieri">
                 <circle id="circle_5" class="nodes" cx="20.734" cy="102.5" r="12.5" style="paint-order: fill stroke markers" fill="url(#hempium)"/>
             </a>
         </g>
-
-        <circle id="circle_6" class="nodes" cx="90" cy="105" r="12" style="paint-order: fill stroke markers" fill="url(#machinalala)"/>
+        <a href="/greenhome">
+            <circle id="circle_6" class="nodes" cx="90" cy="105" r="12" style="paint-order: fill stroke markers" fill="url(#machinalala)"/>
+        </a>
     </g>
 
     <g fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".12003">

templates/network.html

@@ -0,0 +1,41 @@
+{% extends "index.html" %}
+
+<!-- load into index template -->
+{% block child %}
+<div class="mobile_placeholder">
+    <form action="/" method="get">
+        <input type="submit">
+            <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+                    <stop offset="5%"  stop-color="#8693AB" />
+                    <stop offset="95%" stop-color="#BDD4E7" />
+                    </linearGradient>
+
+                    <linearGradient id="myGradient2" gradientTransform="rotate(45)">
+                        <stop offset="5%"  stop-color="#BDD4E7" />
+                        <stop offset="95%" stop-color="#8693AB" />
+                    </linearGradient>
+                </defs>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </form>
+    <div class="open">
+        {# Test Content - add language handling json#}
+        <div class="box">
+        </div>
+        <div class="content">
+            <h2>Kaos Cube</h2>
+            <h3>Anonymous Decentralized Network Sharing</h3>
+            <p>The most impressive network on out planet can be found underground. 
+               All organisms on earth are related, they are friends and followers. 
+               All of them have favorite environments that get them into a good mood. 
+               They show it with flowers or sweet fruit.
+               RootWork aims to become a network of optimal conditions for all organisms and serves as a database for Tekla.
+            </p>
+            <a href="/kaoscube">MORE</a>
+        </div>
+    </div>
+
+</div>
+{% endblock%}

templates/offgrid.html

@@ -1,5 +1,32 @@
 {% extends "base.html" %}
+{% block title %}Green Machine{%endblock%}
 {% block content %}
-  <h1>Offgrid</h1>
-  <p>Hello, world!</p>
+<div class ="container">
+  <div class ="content_container">
+      <img src="../img/bootA.JPG">
+      <h1>Off-Grid</h1>
+      <p>Wir möchten unabhängige und nachhaltige Systeme kreieren. In denen ein Leben komplett ohne den Anschluss an zentralisierte Versorgungsysteme möglich ist.
+          Mit erneuerbaren Energien, Recycling von Müll und Wissen der rechtlichen Fallen ist das möglich. 
+
+      </p>
+  </div>
+  <div class ="content_container">
+      <img src="/assets/img/boat_peace.webp">
+      <h1 id="smaller_text"><span>Wohn-</span>Maschine</h1>
+      <p>
+      Eine Maschine nutzt Energie um Arbeiten zu verrichten. Unsere Wohnmaschinen nutzen erneuerbare Energien um Strom bereitzustellen.
+      Bauteile der Maschinen sind Materialien, die in großer Anzahl verfügbar sind. Materialien die ohne - oder für wenig Geld zu haben sind.
+      Durch die Verwendung bauen wir lebendige, unabhängige  und individuelle Maschinen, die einfach nachzubauen und zu warten sind.
+       </p>
+       <a href="offgrid/wohnmaschine">Mehr</a>
+  </div>
+  <div class ="content_container">
+      <img src="../img/solar.JPG">
+      <h1>GPU Miner</h1>
+      <p> Jede Solaranlage hat Probleme mit der Überproduktion von Strom. Sobald die Recycling Stromspeicher voll sind, geht Energie verloren. Diese Energie nutzen wir zum verifizieren von Transaktionen. Transaktionen von Krypto Währungen. Dabei sehen wir vor allem Monero und Etherium als nützlich an. Etherium Token sind einfach zu Coden. ETH Token als Bestandteil des KaosCubes um mit Contracts den automatischen Tausch von Währung gegen Bandbreite zu gewährleisten. Auch der geringe Ressourcen Verbrauch durch Proof of Stake ist dabei ein Argument für diese Währung.
+          Monero wird die Grundlage eines sicheren Transaktionssystems innerhalb der Kooperativen. Zusätzlich ist der Mining Algorithmus von Monero so aufgebaut, dass er Unrentabilität für große Mining Farmen verspricht.
+      </p>
+      <a href="offgrid/miner">Mehr</a>
+  </div>
+</div>
 {% endblock %}

templates/spider.html

@@ -1,5 +1,31 @@
 {% extends "base.html" %}
+{% block title %}Tekla{%endblock%}
+
 {% block content %}
-  <h1>Spider</h1>
-  <p>Hello, world!</p>
+<div class ="container">
+  <div class ="content_container" id="first">
+      <img id="spider" src="/assets/img/spider_out.webp">
+      <h1>Tekla</h1>
+      <p>Wir entwickeln gerade den Prototyp des Low-Tech Hexapods, der die Gartenarbeit übernehmen und Daten über unser Ökosystem sammeln soll.
+          Die Spinne hat noch einen weiten Weg vor sich.
+          Diese Daten wird sie in die PermApp eintragen, eine App die zu einem Netzwerk von Informationen zwischen den Wechselwirkungen in unserem Ökosystem ausgebaut wird.
+          Die Kommunikation zwischen den Spinnen funktioniert abgeschnitten vom World wide web, über sein eigenes verschlüsseltes Mesh.
+      </p>
+  </div>
+  <div class ="content_container" id="spiderpi" >
+      <img src="/assets/img/sample_code.webp">
+      <h1>Progress</h1>
+      <p>SpiderPi ist Raspberry-Pi betriebener Roboter. Er führt Programme in Python aus und hat eine eingebaute Kamera, über die er in der Lage ist, einfache Object Detection auszuführen.
+          Derzeit sind wir damit beschäftigt, mit Hilfe von Photogrammetrie ein 3d Bild zu erstellen, in dem der Roboter sich bewegen und orientieren kann.
+          Unsere Vision ist es, einen bezahlbaren Gartenroboter zu entwickeln. Während der die Gartenarbeit erledigt, sammelt der Roboter Daten über alle für Pflanzen wichtigen Faktoren.
+          Es liegt noch viel Arbeit vor uns. Dafür brauchen wir deine Unterstützung.
+       </p>
+  </div>
+  <div class ="content_container" id="permapp">
+      <img src="/assets/img/spider_web.webp">
+      <h1>Data</h1>
+      <p>In der PermApp werden die Informationen der Wechselwirkungen ökologischer Entitäten gespeichert. Und visualisiert. Durch Rating kommen die besten Systeme an die Oberfläche. Am Ende werden die besten Netze miteinander kombiniert. </p>
+      <a href="https://code.basabuuka.org/alpcentaur/permapp">Code</a>
+  </div>
+</div>
 {% endblock %}