.gitignore

@@ -1,2 +1,6 @@
-/target
+# will have compiled files and executables
+debug/
+target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
 Cargo.lock

Cargo.toml

@@ -9,4 +9,6 @@ actix-web = "3.3.2"
 actix-files = "0.5.0"
 askama = "0.10.5"
 lazy_static = "1.4.0"
-serde_json = "1.0.68"
+serde_json = "1.0.68"
+serde = "1.0.136"
+csv = "1.1.6"

Makefile

@@ -1,5 +1,5 @@
 run_dev:
-	cargo-watch -x run 
+	cargo watch -x run 
 
 build_dev: 
-	cargo build && cargo-watch -x run
+	cargo build && cargo-watch -x run

src/build_actix/route.rs

@@ -1,12 +1,187 @@
-use actix_web::{ HttpRequest, HttpResponse };
-// general purpose error
-use actix_web::error::Error;
+use actix_web::{ 
+    HttpRequest,
+    HttpResponse,
+    web
+};
 
-use crate::build_actix::template;
+use actix_web::{error::Error};
+
+
+use crate::build_actix::template::{self};
 use crate::build_actix::error;
 
 use askama::Template;
 
+use serde::{Deserialize, Serialize};
+use std::fs::File;
+use std::io;
+use std::io::Write;
+
+#[derive(Deserialize, Serialize)]
+pub struct Data {
+    mail: String,
+    subject: String,
+    comment: String,
+}
+
+// This writes formdata to stdout as csv --> needs to be written to file
+
+pub async fn send_form(req: HttpRequest, form: web::Form<Data>) -> Result<HttpResponse,Error> {
+    // format data as csv and write to stdout
+    let mut wtr = csv::Writer::from_writer(io::stdout());
+    let form = form.into_inner();
+    wtr.serialize(form).unwrap();
+    wtr.flush().unwrap();
+
+    // let mut f = File::create("data.csv").unwrap();
+
+    // write! (f, "{:#?}", wtr.serialize(form).unwrap());
+
+
+    HttpResponse::Ok()
+        .content_type("text/html")
+        .body(
+         template::TplS {
+         title: "",
+         content: "",
+         lang: &template::get_lang(&req)
+
+         }.render().unwrap()
+            
+            ).await
+    
+}
+
+
+pub async fn pool (req: HttpRequest) -> Result<HttpResponse, Error> {
+    HttpResponse::Ok().content_type("text/html")
+        .body(
+            template::TplPools {
+                title: "fund",
+                content: "",
+                subtitle: "Invest in a node and decide which of our projects comes first. Follow our timelines to see what your contribution made possible.",
+                lang: &template::get_lang(&req),
+            }.render().unwrap()
+        ).await
+}
+
+
+pub async fn info (path: web::Path<String>, req: HttpRequest) -> Result<HttpResponse, Error> {
+let info = path.into_inner();
+println!("path is {}", info);
+let list = ["solar-miner","energy"];
+
+HttpResponse::Ok()
+    .content_type("text/html")
+
+    // set teplate context
+    .body(
+        if info == list[0] {
+            template::InSm {
+                title: "Solar Miner",
+                content: "Info about Solar Miner",
+                lang: &template::get_lang(&req),
+            }.render().unwrap()
+            //load context for info page
+            } else if info == list [1] {
+                
+                template::InSm {
+                    title: "Energy",
+                    content: "Info about Energy",
+                    lang: &template::get_lang(&req),
+                }.render().unwrap()
+            }
+            else {
+                format! ("Error {}", info)
+                
+            }).await
+
+}
+
+
+pub async fn timeline(path: web::Path<String>, req: HttpRequest) -> Result<HttpResponse, Error> {
+    let name = path.into_inner();
+    let list = ["waspwork","cyberpreneur", "tekla", "green-machine", "solar-miner", "energy", "kaos-cube", "cbd"];
+    
+    HttpResponse::Ok()
+        .content_type("text/html")
+        .body(
+            if name == list[0] {
+                template::TlWw {
+                    content: "content for waspwork",
+                    lang: &template::get_lang(&req),
+                    title: "Waspwork| Timeline",
+                }.render().unwrap()
+
+            } else if name == list [1] {
+        
+                template::TlCp{
+                    content: "timeline cyberpreneur",
+                    lang: &template::get_lang(&req),
+                    title: "Cyberpreneur| Timeline",
+                }.render().unwrap()
+
+            } else if name == list [2] {
+                
+                template::TlTk{
+                    content: "timeline tekla",
+                    lang: &template::get_lang(&req),
+                    title: "Tekla| Timeline",
+                }.render().unwrap()
+
+            } else if name == list [3] {
+
+                template::TlGm{
+                    content: "timeline green machine",
+                    lang: &template::get_lang(&req),
+                    title: "Green Machine| Timeline",
+                }.render().unwrap()
+
+            } else if name == list [4] {
+            
+                template::TlSm{
+                    content: "timeline solar miner",
+                    lang: &template::get_lang(&req),
+                    title: "Solar Miner| Timeline",
+
+                }.render().unwrap()
+
+
+            } else if name == list [5] {
+                
+                template::TlEn {
+                    content: "timeline energy",
+                    lang: &template::get_lang(&req),
+                    title: "Energy| Timeline",
+                }.render().unwrap()
+
+            } else if name == list [6] {
+               
+                template::TlKc{
+                    content: "timeline kaos cube",
+                    lang: &template::get_lang(&req),
+                    title: "Kaos Cube| Timeline",
+                }.render().unwrap()
+
+
+            } else if name == list [7] {
+            
+                template::TlCb{
+                    content: "timeline cbd",
+                    lang: &template::get_lang(&req),
+                    title: "CBD| Timeline",
+                }.render().unwrap()
+
+
+            }
+            else {
+
+                format! ("Whatever {}", name)
+            }
+        ).await
+    }
+
+
 pub async fn index( req: HttpRequest ) -> Result<HttpResponse, Error> {
     // if response Ok return HttpResponseBuilder
     HttpResponse::Ok()
@@ -179,19 +354,13 @@ pub async fn robot( req: HttpRequest ) -> Result {
 }
 
 pub async fn app( 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::TplApp {
-            // 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 );
@@ -288,6 +457,84 @@ pub async fn greenhome( req: HttpRequest ) -> Result {
     ).await
 }
 
+
+pub async fn get_box_energy ( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    HttpResponse::Ok()
+    .content_type("text/html")
+    .body(
+        template::TplBoxEnergy{
+            lang : &template::get_lang(&req),
+        }
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
+
+pub async fn get_box_miner ( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    HttpResponse::Ok()
+    .content_type("text/html")
+    .body(
+        template::TplBoxMiner {
+            lang : &template::get_lang(&req),
+        }
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
+
+// pub async fn timelines( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    
+    // let uri : &Uri = req.uri();
+    // print!(" uri is {} ", uri);
+
+        // let body = match uri.path() {
+
+            // "/cyberpreneur-timeline" => {
+                // println!("path match : {}", uri.path());
+                // template::TplCyber{lang: &template::get_lang(&req),}.render()
+
+
+            // "/waspwork-timeline" => {
+                // println!("path match : {}", uri.path());
+                // template::TplRootWork{lang: &template::get_lang(&req),}.render()
+        
+        // },
+
+    // };
+
+    // HttpResponse::Ok()
+        // returns HttpResponseBuilder
+    // .content_type("text/html")
+        // set body of HttpResponse
+    // .body(
+        // set body to template
+        // type Result<String,askama::Error>
+        // body.map_err( |e| {
+        // apply funtion to Result<Error>, leave Result<Ok> untouched
+        // print error to stdout
+        // eprint!("{}", e );
+        // use sncf custom error
+        // error::crash(
+            // template::get_lang((&req), "error rendering template"),
+        // })
+
+    // )?, // return Ok value
+    // .await
+// }
+
+
+
+
+
+
 // footer Routes
 
 pub async fn contact( req: HttpRequest ) -> Result<HttpResponse, Error> {
@@ -311,6 +558,16 @@ pub async fn contact( req: HttpRequest ) -> Result {
         })?,
     ).await
 }
+// add errot handling
+pub async fn privacy (req: HttpRequest) -> Result<HttpResponse, Error> {
+    HttpResponse::Ok()
+    .content_type("text/html")
+    .body(
+        template::TplPr {
+            lang: &template::get_lang(&req),
+        }.render().unwrap()
+        ).await
+}
 
 
 

src/build_actix/template.rs

@@ -3,6 +3,113 @@ use askama::Template;
 
 use actix_web::HttpRequest;
 
+
+#[derive(Template)]
+#[template(path="pools.html")]
+pub struct TplPools<'a> {
+    pub title: &'a str,
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub subtitle: &'a str,
+}
+
+// context for info pages
+
+#[derive(Template)]
+#[template(path="info.html")]
+pub struct InSm<'a> {
+    pub title: &'a str,
+    pub content: &'a str,
+    pub lang: &'a str,
+}
+
+#[derive(Template)]
+#[template(path="timeline.html")]
+pub struct TlWw<'a> {
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub title: &'a str,
+}
+
+
+#[derive(Template)]
+#[template(path="timeline.html")]
+pub struct TlCp<'a> {
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub title: &'a str,
+}
+
+
+#[derive(Template)]
+#[template(path="timeline.html")]
+pub struct TlTk<'a> {
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub title: &'a str,
+}
+
+
+#[derive(Template)]
+#[template(path="timeline.html")]
+pub struct TlGm<'a> {
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub title: &'a str,
+}
+
+
+
+#[derive(Template)]
+#[template(path="timeline.html")]
+pub struct TlSm<'a> {
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub title: &'a str,
+}
+
+
+#[derive(Template)]
+#[template(path="timeline.html")]
+pub struct TlEn<'a> {
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub title: &'a str,
+}
+
+
+#[derive(Template)]
+#[template(path="timeline.html")]
+pub struct TlKc<'a> {
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub title: &'a str,
+}
+
+
+#[derive(Template)]
+#[template(path="timeline.html")]
+pub struct TlCb<'a> {
+    pub content: &'a str,
+    pub lang: &'a str,
+    pub title: &'a str,
+}
+
+
+#[derive(Template)]
+#[template(path="submit.html")]
+pub struct TplS<'a> {
+    pub lang: &'a str,
+    pub content: &'a str,
+    pub title: &'a str,
+}
+
+
+
+
+
+
+
 // define struct linked to template context
 #[derive(Template)]
 // define path to use template in
@@ -60,6 +167,13 @@ pub struct TplOff<'a> {
     pub lang: &'a str,
 }
 
+#[derive(Template)]
+#[template(path="policy.html")]
+pub struct TplPr<'a> {
+    pub lang: &'a str,
+}
+
+
 // index info windows
 
 #[derive(Template)]
@@ -69,7 +183,7 @@ pub struct TplRobot<'a> {
 }
 
 #[derive(Template)]
-#[template(path="rootwork.html")]
+#[template(path="waspwork_box.html")]
 pub struct TplApp<'a> {
     pub lang: &'a str,
 }
@@ -99,6 +213,23 @@ pub struct TplHome<'a> {
 }
 
 
+#[derive(Template)]
+#[template(path="energy_box.html")]
+pub struct TplBoxEnergy<'a> {
+    pub lang: &'a str,
+}
+
+
+#[derive(Template)]
+#[template(path="miner_box.html")]
+pub struct TplBoxMiner<'a> {
+    pub lang: &'a str,
+}
+
+
+
+
+
 // linked to error template
 #[derive(Template)]
 #[template(path="error.html")]

src/main.rs

@@ -1,3 +1,5 @@
+// Reduce code !
+
 #[macro_use]
 extern crate lazy_static;
 
@@ -12,27 +14,37 @@ use crate::build_actix::route;
 #[actix_web::main]
 // return Result or io::Error
 async fn main() -> std::io::Result<()> {
-
     HttpServer::new( 
         || {
             App::new()
             .service( fs::Files::new("/assets", "./templates/assets/").index_file("index.html"))
             .route("/", web::get().to(route::index))
-            .route("/hemp", web::get().to(route::hemp))
+            .route("/cbd", web::get().to(route::hemp))
             .route("/tekla", web::get().to(route::spider))
-            .route("/rootwork", web::get().to(route::rootwork))
+            .route("/waspwork", web::get().to(route::rootwork))
             .route("/kaoscube", web::get().to(route::cube))
             .route("/cyberpreneur", web::get().to(route::cyber))
-            .route("/offgrid", web::get().to(route::off))
+            .route("/greenmachine", web::get().to(route::off))
+
+            .route("/info/{info}", web::get().to(route::info))
+
             // info windows index
             .route("/robot", web::get().to(route::robot))
             .route("/app", web::get().to(route::app))
-            .route("/virtual", web::get().to(route::business))
+            .route("/remote", 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
+            .route("/energy", web::get().to(route::get_box_energy))
+            .route("/miner", web::get().to(route::get_box_miner))
+
+            // Timelines
+            .route("/timeline/{name}", web::get().to(route::timeline))
+            // Footer
+            .route("/fund", web::get().to(route::pool))
             .route("/contact", web::get().to(route::contact))
+            .route("/contact/mail", web::post().to(route::send_form))
+            .route("/privacy", web::get().to(route::privacy))
             
         })
         .bind("0.0.0.0:5000")?

templates/app.html

@@ -1,11 +1,11 @@
 {% extends "base.html" %}
-{% block title %}RootWork{%endblock%}
+{% block title %}Waspwork{%endblock%}
 
 {% block content %}
 <div class ="container">
   <div class ="content_container" id="first">
       <img src="/assets/img/sample-permapp-screen.webp">
-      <h1>RootWork</h1>
+      <h1>WaspWork</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.
@@ -28,4 +28,4 @@
       <a href="https://code.basabuuka.org/alpcentaur/permapp">Code</a>
   </div>
 </div>
-{% endblock %}
+{% endblock %}

templates/assets/css/box.css

@@ -1,35 +1,16 @@
-
  .mobile_placeholder {
     display: flex;
     justify-content: center;
     box-sizing: border-box;
 }
 
-/* To Do: opaque background solid text ! */
 .open {
   position: fixed;
-  height: 70vh;
-  width: 90vw;
-  background-color: fuchsia;
-  opacity: 70%;
   top: 25vh;
   display: grid;
-  grid-template-rows: repeat(4, 1fr);
-  border-style: solid;
-  border-image: linear-gradient(#BDD4E7, #8693AB) 30;
   z-index: 300;
 }
 
-/* .open .box {
-  background-image: url('/assets/img/spider_out_bw.webp'); 
-  background-size: cover;
-  background-repeat: no-repeat;
-  height: inherit;
-  width: inherit;
-  opacity: 20%;
-  grid-row: 1/5;
-} */
-
 .content {
   height: inherit;
   width: inherit;
@@ -37,6 +18,12 @@
   grid-template-rows: .35fr .25fr 1fr .45fr;
   max-width: inherit;
   max-height: inherit;
+  background:  rgba(255,0,255,0.85);
+  position: relative;
+  max-width: 60vw;
+  /* max-height: 51vh; */
+  top: 20vh;
+  right: -10vw;
 }
 
 .content h2 {
@@ -45,25 +32,32 @@
   justify-content: center;
   align-items: center;
   text-transform: uppercase;
-  font-size: 6.5vh;
-  margin: 6vh 0 4vh 0;
+  /* font-size: 6.5vh; */
+  font-size: 3.25vh !important;
+  margin: 3vh 0 2vh 0 !important;
+  /* margin: 6vh 0 4vh 0; */
+  font-family: 'IBMPlexMono', sans-serif;
 }
 
 .content h3 {
   grid-row: 2;
   display: grid;
   text-transform: uppercase;
-  font-size: 3vh;
+  /* font-size: 3vh; */
   margin: 0;
-  line-height: 5vh;
+  /* line-height: 5vh; */
   text-align: center;
+  font-size: 1.35vh !important;
+  line-height: 2.5vh !important;
 }
 
 .content p {
-  font-size: 1.5vh;
   text-align: center;
-  line-height: 3.5vh;
-  margin: 2vh 2vw;
+  margin: 2vh 4vw;
+  font-family: 'IBMPlexMono', sans-serif;
+  font-size: 1.05vh !important;
+  font-weight: bold;
+  line-height: 2.5vh !important;
 }
 
 .content a {
@@ -74,10 +68,9 @@
   height: 4vh;
   width: 10vw;
   width: 30vw;
-  border: .5vw solid #000;
   justify-self: center;
   align-self: center;
-  margin-top: 2vh;
+  margin: 0 0 2vh 0 !important;
   color: #000;
   font-size: 1.95vh;
   cursor: pointer;
@@ -87,11 +80,10 @@
 }
 
 .content a:hover {
-  background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%);
+  background: linear-gradient(to right, rgba(255,255,255,0), rgba(1,1,1,1));
   background-size: 200% 100%;
   background-position: left bottom;
-  border: .5vw solid #8693AB;
-  color: #BDD4E7;
+  color: #90e7bc;
 }
 
 .content a:active {
@@ -104,24 +96,37 @@
 
 
 .close {
-    height: 10vh;
+    height: 20vh;
     width: auto;
-    align-self: flex-start;
-    color: #e5e7e6;
+    color: #000;
     position: fixed;
-    top: 15vh;
-    left: 70vw;
+	stroke: #000;
+    top: 30vh;
+	right: -5vw;
+}
+
+
+.close path {
+	stroke-width: 1% !important;
+}
+
+.close_box {
+	right: 10vw;
+	top: 35vh;
+}
+
+input:hover ~ .close path {
+	stroke: rgba(1, 0, 0, 0.3);
 }
 
 input {
     height: 20vw;
-    width: 20vh;
     z-index: 200;
     opacity: 0%;
     cursor: pointer;
     position: fixed;
-    top: 15vh;
-    left: 70vw;
+    top: 35vh;
+	right: 0;
 }
 
 
@@ -151,36 +156,12 @@ input:active ~ .close  {
 
 }
 
-/* test */
-
-@keyframes shine2 {
-  0% {
-      stroke: #8693AB;
-  
-  }
-
-  25% {
-    stroke:#BDD4E7;
-  }
-      50% {
-        stroke: #8693AB;
-        
-      }
-  75% {
-        stroke:#BDD4E7;
-  }
-
-      100% {
-          stroke: #8693AB
-  }
-}
-
-
 
 @media (min-height: 750px) {
   .open {
     max-height: 60vh;
   }
+  
 }
 
 @media (min-height: 800px) {
@@ -233,11 +214,10 @@ input:active ~ .close  {
 
   .content a {
     font-size: 1.45vh !important;
-    margin: 0 !important;
     width: 15vw !important;
     height: 3.5vh !important;
-    border: .25vw solid #000;
   }
+
 }
 
 
@@ -262,18 +242,36 @@ input:active ~ .close  {
   .open {
     max-height: 35vh;
   }
-}
 
-#small {
-  font-size: 4.9vh;
-  max-width: inherit;
+	#small {
+		font-size: 4.9vh;
+		max-width: inherit;
+	}
 }
 
 @media (min-width: 768px) {
-  input:hover ~ .close  {
-    animation: shine2 3s ease-in forwards;
-  
-  }
+	.content {
+		position: relative;
+		max-width: 60vw;
+		/* max-height: 55vh; */
+		top: 5vh;
+	}
+
+	.content p {
+		font-size: 2vh !important;
+		margin: 2vh 2vw;
+		line-height: 3vh !important;
+	}
+
+	.close {
+		height: 25vh;
+		top: 15vh;
+		right: -5vw;
+	}
+	.close_box {
+		right: 5vw;
+		top: 20vh;
+	}
 }
 
 @media (min-width: 1000px) {
@@ -282,22 +280,40 @@ input:active ~ .close  {
     max-width: 35vw;
     top: 20vh;
     right: 5vw;
-    max-height: 50vh;
+    max-height: 60vh;
   }
 
   .close {
-    top: 10vh;
-    left: 75vw;
+    top: 3vh;
+    left: 70vw;
+	height: 25vh;
+  }
+
+  .close path {
+	stroke-width: 1% !important;
+	}
+
+
+  .close_box {
+	right: 20vw;
+	top: 10vh;
+ }
+
+  input:hover ~ .close path {
+	stroke: rgba(1, 0, 0, 0.3);
   }
 
   input {
     height: 10vh;
     top: 10vh;
-    /* left: 80vw; */
+	right: 20vw;
+  }
+  .content {
+	padding: 5vh 1.5vw .5vh 1.5vw;
   }
 
   .content h2 {
-    font-size: 3.25vh;
+    font-size: 4.5vh;
     margin: 3vh 0 2vh 0;
   }
 
@@ -307,8 +323,9 @@ input:active ~ .close  {
   }
 
   .content p {
-    font-size: 1.35vh;
-    line-height: 2.5vh;
+    font-size: 2vh;
+    line-height: 4vh;
+	font-weight: bold;
   }
 
   .content a {
@@ -317,15 +334,24 @@ input:active ~ .close  {
   }
 
   .content a:hover {
-    border: .1vw solid #8693AB;
+    border: none;
   }
 
   .content a:active {
     border: .1vw solid #8693AB;
   }
 
+  #larger {
+  padding: 5vh 1.5vw 2vh 1.5vw;
+  }
+
 }
 
+@media (min-width: 1280px) {
+	.content {
+	right: 5vw;
+	}
+}
 
 
 

templates/assets/css/footer-pages.css

@@ -0,0 +1,201 @@
+/* styles for fund.html */
+
+#fund_container {
+	position: relative;
+	top: 20vh;
+	font-family: 'IBMPlexMono', sans-serif;
+	margin-bottom: 20vh;
+}
+#fund_container h2 {
+	text-transform: uppercase;
+	color: #93ebbf;
+	font-weight: bold;
+	left: 5vw;
+	font-size: 5vh;
+	position: relative;
+}
+
+#fund_container p {
+	padding: 0 2vw 0 3vw;
+	margin: 0 3vw 0 3vw;
+	border: .5vw solid #bcd3e7;
+}
+
+#fund_container img {
+	max-width: 20vw;
+	border-radius: unset;
+	margin: 2vh 4vw;
+	grid-row: 1/3;
+	align-self: center;
+	justify-self: center;
+
+}
+
+.node_container {
+	display: grid;
+	grid-template-columns: 25% 75%;
+	margin-bottom: 2vh;
+}
+
+.node_container h6 {
+	grid-row: 1;
+	grid-column: 2;
+	margin: 0;
+	padding: 2vh 2vw;
+	text-transform: uppercase;
+
+}
+
+.node_container p {
+	grid-row: 2;
+	grid-column: 2;
+	margin: unset !important;
+	border: unset !important;
+}
+
+/* contact page */
+
+.contact_container {
+	position: relative;
+	top: 20vh;
+	font-family: 'IBMPlexMono', sans-serif;
+	margin: 0 2vw 0 2vw;
+}
+
+.contact_container h1 {
+	margin: 2vh 0 4vh 5vw;
+	font-size: 4.5vh;
+}
+
+#contact_form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+  grid-gap: 1vh 5vw;
+}	
+
+#l1 {
+	grid-column: 1;
+	grid-row: 1;	
+	text-align: center;
+}
+
+#l2 {
+	grid-column: 1;
+	grid-row: 3;
+	text-align: center;
+	margin-top: 2vh;
+}
+
+#l3 {
+	grid-column: 2;
+	grid-row: 1;
+	text-align: center;
+}
+
+.form_input {
+	font-size: 1.75vh;
+	padding-left: 1vw;	
+	font-family: 'IBMPlexMono', sans-serif;
+}
+
+#input_mail {
+	grid-column: 1;
+	grid-row: 2;	
+}
+
+#input_subject {
+	grid-column: 1;
+	grid-row: 4
+}
+
+#input_message {
+	grid-column: 2;
+	grid-row: 2/4;
+	font-size: 1.75vh;
+	color: rgba(15, 230, 190, 1);
+	padding-left: 2vw;
+}
+
+#mail_submit {
+	grid-column: 2;
+	grid-row: 5;
+	text-align: center;
+	display: flex;
+	justify-self: center;
+	background: none;
+	border: .04vw solid black;
+	padding: 2vh 2vw;
+	font-family: 'IBMPlexMono', sans-serif;
+}
+
+#mail_submit:hover, #mail_submit:active {
+	 background-image: linear-gradient(to right,  rgba(15, 230, 190, 1) , #e4e4a8);
+}
+
+
+
+#input_mail, #input_subject, #input_message, #mail_submit, #blub {
+	height: unset;
+	top: unset;
+	right: unset;
+	opacity: unset;
+	position: unset;
+}
+
+/* back home page */
+#back_home_container {
+	position: relative;
+	background-image: linear-gradient(#93ebbf, #c4d8e9,#f9d17d, #b0afd0,#fdfd96,#ff7fff);
+	min-height: 100vh;
+	font-family: 'IBMPlexMono', sans-serif;
+}
+
+#back_home_container h1 {
+	text-align: center;
+	margin: 0;
+}
+
+#back_home_container a {
+	font-size: 3vh;
+	text-align: center;
+}
+
+#back_home_container a:hover, #back_home_container a:active {
+	color:#ff7fff;
+}
+
+#back_home_container  svg {
+	max-height: 10vh;
+	margin: -5vh 0 7.5vh 0;
+}
+
+#contents_container {
+	top: 30vh;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+}
+
+@media (min-width: 1024px) {
+
+#back_home_container  svg {
+	margin: 2vh 0 3vh 0;
+}
+
+
+}
+
+/* privacy policy page */
+
+
+#privacy_container {
+	top: 20vh;
+	position: relative;
+	font-family: 'IBMPlexMono', sans-serif;
+	margin: 2vh 4vw;
+	box-shadow: 60px -16px teal;
+}
+
+

templates/assets/css/footer.css

@@ -11,7 +11,7 @@
     grid-column: 1/3;
     grid-row: 3;
     color: #5c5d61;
-    font-size: 1.35vh;
+    font-size: 1.35vh !important;
 }
 
 .footer_container #l1 {
@@ -21,12 +21,12 @@
 
 .footer_container #l2 {
     grid-column: 2;
-    grid-row: 2;
+    grid-row: 1;
 }
 
 .footer_container #l3 {
     grid-column: 2;
-    grid-row: 3;
+    grid-row: 2;
 }
 
 .footer_container #l4 {
@@ -102,3 +102,12 @@ a:active {
 
 
 }
+
+@media(min-width:768px) {
+
+	.footer-container p {
+		grid-row: 3;
+		grid-column: 1;
+	}
+}
+

templates/assets/css/index.css

@@ -3,6 +3,7 @@ svg {
 	width: 100%;
 	position: relative;
 	z-index: 100;
+	top: 10vh;
 }
 
 path {
@@ -242,16 +243,73 @@ path {
 	align-items: center;
 }
 
-#banner_text {
-	color: #ffd580;
-	font-size: 5vh;
-	margin: 0;
-	position: relative;
-	bottom: 20vh;
-	right: 5vw;
+#text {
+		width: 90vw;
+		text-align: left;
+		font-size: 2.5vh !important;
+		top: 20vh;
+		line-height: 5vh !important;
+		z-index: 200;
+		background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(1,1,1,1));
+		margin: 0 3vw;
+		padding: 0 2vw;
+		color: hsl(150,69%,75%);
+		position: absolute;
+		left: 3vw;
+		text-transform: uppercase;
+		letter-spacing: 0.08vw;
 }
+
 @media ( min-width: 1024px ) {
 	svg {
 		left: 5vw;
+		top: 0;
+	}
+
+#text 
+{
+	max-width: 20vw;
+	height: 50vh;
+	color: hsl(150,69%,75%);
+	position: absolute;
+	top: 25vh;
+	font-size: 5vh;
+	z-index: 400;
+	margin: 0;
+	left: 3vw;
+	line-height: 9vh;
+	text-transform: uppercase;
+	letter-spacing: 0.08vw;
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+
+}
+
+}
+
+@media ( min-width: 768px) and ( max-width: 1023px) {
+	svg {
+		top: 8vh;
+	}
+
+	#text {
+		font-size: 2.5vh !important;
+		top: 18vh;
+		line-height: 5vh !important;
+		z-index: 200;
+		background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(1,1,1,1));
+		margin: 0 3vw;
+		padding: 0 2vw;
+		color: hsl(150,69%,75%);
+		position: absolute;
+		left: 3vw;
+		text-transform: uppercase;
+		letter-spacing: 0.08vw;
+	}
+
+	#text br {
+		display: none;
+
 	}
 }

templates/assets/css/nav.css

@@ -1,6 +1,5 @@
 #nav {
-	max-height: 5vh;
-}
+	max-height: 0; }
 
 .header {
     position: relative;
@@ -32,7 +31,7 @@
 }
 
 .navigation input:checked ~ .menu {
-    right: 0;
+    right: 2vw;
 	z-index: 397;
 }
 
@@ -68,18 +67,20 @@
     display: block;
     padding: 1.3vh 0 2vh 0;
     line-height: 1;
-    font-size: 2.35vh;
+    font-size: 2.35vh !important;
     text-align: right;
     box-shadow: 0 .5vw 0 -0.35vw #D8D8D8;
     text-transform: uppercase;
     transition: .3s;
 	font-family: 'IBMPlexMono', sans-serif;    
+	position: relative;
+	z-index: 200;
 }
 
 
 .hamburger {
     position: relative;
-    width: 5vw;
+    /* width: 5vw; */
     height: .5vh;
     background: #000;
     cursor: pointer;
@@ -117,6 +118,7 @@
     top: unset;
     left: unset;
 	z-index: 400;
+	right: 5vw;
 }
 
 .navigation input:checked ~ .hamburger {
@@ -138,6 +140,65 @@
     
 }
 
+.dropdown {
+
+	z-index: 201;
+
+}
+
+.dropdown:hover ~ .top{
+	color: #d2c0e7 !important;
+	transition: 1s ease; 
+}
+
+
+.dropdown:active ~ .top{
+	color: #d2c0e7 !important;
+	transition: 1s ease; 
+}
+
+
+
+
+.sub_1 {
+	font-size: 3vh !important;
+	box-shadow: none !important;
+	cursor: pointer;
+}
+
+.sub_1:hover, .sub_1:active {
+	color: #e59ebc;
+	transition: 1s ease;
+}
+
+
+.sub_2{
+	font-size: 3vh !important;
+	cursor:pointer;
+}
+
+.sub_2:hover, .sub_2:active {
+	color: #9be7c6;
+	transition: 1s ease;
+}
+
+.dropdown {
+	right: 0;
+	top: unset;
+	left: unset;
+	height: 5vh;
+	min-width: 20vw;
+}
+
+.down {
+	display: none;
+}
+
+.dropdown:checked ~ .down {
+	display: flex;
+	flex-direction: column;
+}
+
 @media (min-width: 768px) {
     .menu {
         width: unset;
@@ -158,58 +219,11 @@
 	.navigation {
 		top: 5vh;
 	}
+
 }
 
-/* /1* @media (min-width: 1024px) { *1/ */
-
-/*     /1* .header { *1/ */
-/*     /1*     position: relative; *1/ */
-/*         width: 100%; */
-/*         display: flex; */
-/*         justify-content: flex-start; */
-/*         align-items: center; */
-
-/*     } */
-
-/*     .hamburger, */ 
-/*     .toggle_menu { */
-/*         display: none; */
-/*     } */
-
-/*     .menu { */
-/*         justify-content: center; */
-/*         flex-direction: row; */
-/*         position: sticky; */
-        /* z-index: 1; */
-        /* transition: .5s; */
-        /* padding: 0; */
-        /* width: unset; */
-        /* margin-left: 10vw; */
-    /* } */
-
-    /* .menu li { */
-        /* width: unset; */
-    /* } */
-
-    /* .menu li a { */
-        /* color: #000; */
-        /* text-decoration: none; */
-        /* display: block; */
-        /* padding: 2vh 1.5vw 1.5vh; */
-        /* line-height: 1; */
-        /* transition: .3s; */
-        /* box-shadow: none; */
-    /* } */
-
-    /* .menu li a:hover { */
-    /*     box-shadow: 0 .5vw 0 -0.35vw #000; */
-    /* } */
-
-    /* .navigation { */
-    /*     display: flex; */
-    /*     justify-content: space-between; */
-    /*     align-items: center; */
-    /*     padding: 0; */
-    /* } */
-    
-/* } */
+@media (min-width: 1280px) {
+	.navigation input:checked ~ .menu {
+		right: 2vw;
+	}
+}

templates/assets/css/pages.css

@@ -1,6 +1,7 @@
 .container {
     width: 100vw;
-    font-family: 'Roboto', sans-serif;
+    font-family: 'IBMPlexMono', sans-serif;
+	padding-top: 15vh;
 }
 
 img {
@@ -130,6 +131,10 @@ img {
     margin-bottom: 0;
 }
 
+#small {
+	font-size: 2.95vh !important;
+}
+
 @media (min-width: 700px) {
 
     .content_container h1 {
@@ -256,4 +261,4 @@ img {
 #spider {
     height: 85vw;
     width: 90vw;
-}
+}

templates/base.html

@@ -14,8 +14,9 @@
             <link rel="stylesheet" href="/assets/css/footer.css" />
             <link rel="stylesheet" href="/assets/css/index.css" />
             <link rel="stylesheet" href="/assets/css/pages.css" />
-            <link rel="stylesheet" href="/assets/css/contact.css" />
             <link rel="stylesheet" href="/assets/css/box.css"/>
+            <link rel="stylesheet" href="/assets/css/footer-pages.css"/>
+            <!-- <link rel="stylesheet" href="/assets/css/contact.css"/> -->
             <title>{%block title%}{%endblock%} | Cyberpreneur</title>
         {% endblock %}
     </head>

templates/canna.html

@@ -4,20 +4,9 @@
 {% block child %}
 <div class="mobile_placeholder">
     <form action="/" method="get">
-        <input type="submit">
+        <input type="submit" class="close_box">
             <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>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9"></path>
             </svg>
         </form>
     <div class="open">
@@ -38,4 +27,4 @@
     </div>
 
 </div>
-{% endblock%}
+{% endblock%}

templates/contact.html

@@ -1,48 +1,16 @@
 {% extends "base.html" %}
 {% block title %}Contact{%endblock%}
-
-<!-- add css -->
-<!-- design oriented on pages, simple silver, club mate image -->
-<!-- simple contact form -->
-
-<!-- reemove donation stuff -->
-
-
 {% block content %}
-<div class ="container">
-    <div class="donation_container">
-        <h2>Unterstützt uns</h2>
-        <p>Spende an:<br> <span><b>IBAN:</b></span><br>
-        Gib als <span>Verwendungszweck</span> die <span>Node</span> an die du unterstützen möchtest !<br>
-        Nodes: <span>Hanf, PermApp, Spinne, Cube, Cyberpreneur, Offgrid </span></p>
-    </div>
-    <div class="form_container">
-        <div class="form_box">
-            <div class="left">
-            </div>
-            <div class="right">
-                <h2>Kontaktiert Uns</h2>
-                <form action="/contact/submit" method="post" enctype="multipart/form-data">
-                    <h3 class="title"> Get in touch</h3>
-                    <div class="input-container">
-                        <input type="text" name="name" class="input" placeholder="Name" id="username"/>
-                    </div>
-                    <div class="input-container">
-                        <input type="email" name="email" class="input" placeholder="Meine EMail*"required id="mail"/>
-                    </div>
-                    <div class="input-container">
-                        <input type="tel" name="phone" class="input" placeholder="Telefonnummer (optional)" id="phone"/>
-                    </div>
-                    <div class="input-container">
-                        <input type="subject" name="subject" class="input" placeholder="Betreff" id="subject" />
-                    </div>
-                    <div class="input-container textarea">
-                        <textarea name="message" class="input" placeholder="Nachricht*" id="message" ></textarea>
-                    </div>
-                    <button class="btn" id="sub_btn">Submit</button>
-                </form>
-            </div>
-        </div>
-    </div>
+<div class="contact_container">
+	<h1>Contact</h1>
+	<form id="contact_form" action="/contact/mail" method="POST">
+		<label id="l1"for="input_mail">Email</label>
+			<input class="form_input"id="input_mail"type="email" name="mail">
+			<label id="l2" for="input_subject">Subject</label>
+			<input class="form_input" id="input_subject" type="text" name="subject">
+			<label id="l3" for="input_message">Question/Comment</label>
+			<textarea id="input_message" type="text" name="comment"></textarea>
+			<input id="mail_submit"type="submit" value="Submit">
+	</form>
 </div>
-{% endblock %}
+{% endblock %}

templates/cube.html

@@ -4,7 +4,7 @@
 {%block content%}
 <div class ="container">
     <div class ="content_container">
-        <img src="/assets/img/cube_space.webp">
+        <img src="/assets/img/kaoscube.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. 
@@ -26,4 +26,4 @@
             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%}
+{%endblock content%}

templates/rootwork.html → templates/energy_box.html

@@ -4,38 +4,27 @@
 {% block child %}
 <div class="mobile_placeholder">
     <form action="/" method="get">
-        <input type="submit">
+        <input type="submit" class="close_box">
             <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>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9"></path>
             </svg>
         </form>
     <div class="open">
         {# Test Content - add language handling json#}
         <div class="box">
         </div>
-        <div class="content">
-            <h2>Root Work</h2>
-            <h3>The Social Network of Plants for Robots and Explorers</h3>
+        <div class="content" id="larger">
+            <h2 id="small">Green Energy</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="/rootwork">MORE</a>
+            <a href="/offgrid">MORE</a>
         </div>
     </div>
 
 </div>
-{% endblock%}
+{% endblock%}

templates/footer.html

@@ -2,8 +2,7 @@
     <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">fund</a></h6>
+        <h6 id ="l4"><a href="/fund">fund</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

@@ -4,27 +4,16 @@
 {% block child %}
 <div class="mobile_placeholder">
     <form action="/" method="get">
-        <input type="submit">
+        <input type="submit" class="close_box">
             <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>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9"></path>
             </svg>
         </form>
     <div class="open">
         {# Test Content - add language handling json#}
         <div class="box">
         </div>
-        <div class="content">
+        <div class="content" id="larger">
             <h2 id="small">Green Machine</h2>
             <h3>Responsive Sustainable Houses</h3>
             <p>The most impressive network on out planet can be found underground. 
@@ -38,4 +27,4 @@
     </div>
 
 </div>
-{% endblock%}
+{% endblock%}

templates/index-js.html

@@ -1,13 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<div id="mobile_network"></div>
-<div id="box" class ="box_off">
-    <div id ="box_content">
-        <h1 id ="title">Test</h1>
-        <p id="description"></p>
-        <a id="page_link"></a>
-    </div>
-</div>
-<script type="module" src="/assets/js/net.js"></script>
-<script type="text/javascript" src="/assets/js/d3.v7.min.js"></script>
-{% endblock %}

templates/index.html

@@ -40,6 +40,11 @@
 				<image href="/assets/img/canna.webp" viewBox="0 0 100 100" height="105" width="110"/>
 			 </pattern>
 
+		     <pattern id="waspwork" viewBox="0,0,100,100" width="100%" height="100%">
+				<image href="/assets/img/VR.svg" viewBox="0 0 100 100" height="130" width="110"/>
+			 </pattern>
+
+
 			  <linearGradient id="myGradient">
 				<stop offset="5%"  stop-color="hsl(60,96%,79%)" />
 				<stop offset="10%" stop-color="hsl(40,100%,75%)" />
@@ -64,21 +69,21 @@
 	  <path class="edge" id="edge1" d="M50, 50 m 10,0 L85, 35"/>
 	</g>
 	<g class="group2">
-	<a href="#">
-	  <path class="node" id="node2" d="M 85, 35 m 0, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" fill="hsl(207,47%,70%)"/> 
+	<a href="/app">
+	  <path class="node" id="node2" d="M 85, 35 m 0, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" fill="url(#waspwork)"/> 
 	</a>
 	  <path class="edge" id="edge2" d="M 95, 35 m 0,10 L95, 60"/>
 	</g>
 	
 	<g class="group3">
-	<a href="#">
+	<a href="/robot">
 	<path class="node" id="node3" d="M 85, 70 m 0, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" fill="url(#tekla)"/>
 	</a>
 	  <path class="edge" id="edge3" d="M 95, 80 m 0,10 L95, 80"/>
 	</g>
 	
 	<g class="group4">
-	<a href="#">
+	<a href="/remote">
 	  <path class="node" id="node4" d="M 95, 100 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" fill="url(#greenhouse)"/> 
 	</a>
 	  <path class="edge" id="edge4" d="M95, 100 m -10,0 L60, 105"/>
@@ -86,7 +91,7 @@
 	</g>
 	
 	<g class="group5">
-	<a href="#">
+	<a href="/miner">
 	  <path class="node" id="node5" d="M 50, 105 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" fill="url(#solar_panels"/> 
 	</a>
 	  <path class="edge" id="edge6" d="M50, 105 m -10, 0 L25, 100" />
@@ -94,7 +99,7 @@
 	</g>
 	
 	<g class="group6">
-	<a href="#">
+	<a href="/energy">
 	<path class="node" id="node6" d="M 15, 100 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" fill="url(#perinaldo)"/>
 	</a>
 	<path class="edge" id="edge8" d="M15, 100 m 0, -10 L15, 65" />
@@ -102,14 +107,14 @@
 	</g>
 
 	<g class="group7">
-	<a href="#">
+	<a href="/greenhome">
 	<path class="node" id="node7" d="M 15, 65 m -10, -10 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" fill="url(#bootA"/>
 	</a>
 	<path class="edge" id="edge10" d="M15, 55 m 10, 0 L40, 50" />
 	<path class="edge" id="edge11" d="M15, 55 m 0, -10 L40, 15" />
 	</g>
 	<g class="group8">
-	<a href="#">
+	<a href="/cannabinieri">
 	<path class="node" id="node8" d="M 50, 15 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" fill="url(#canna")/>
 	</a>
 	<path class="edge" id="edge12" d="M 50, 15 m 0, 10 L50, 40"/>
@@ -117,8 +122,8 @@
 	</g>
 	</svg>
 	<div id="banner">
-	<h6 id="banner_text"> Put 20 € in a node &<br> get a Cannabinieri CBD oil<br> for free</h6>
 	</div>
+	<!-- <p id="text"> Put €20 in a node & <br>get a free Cannabinieri Oil </p> -->
 	{%block child%} {%endblock%}
 </div>
 

templates/index.old.html

@@ -1,207 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<!--nodes in svg as links-->
-<!--animation with CSS-->
-<!--nodes load template based on GET request on click-->
-<!--content(info) is loaded into placeholder in template-->
-<!--actix get div and load on click-->
-<div id="mobile">
-    <svg id="a" width="320" height="568" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-
-        <defs>
-            <pattern id="spiderpi" height="100%" width="100%">
-                <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="permapp" height="100%" width="100%">
-                <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="cyber" height="100%" width="100%">
-                <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="kaos" height="100%" width="100%">
-                <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="hemp" height="100%" width="100%">
-                <image href="/assets/img/hemp.webp" width="30" height="45"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="machina" height="100%" width="100%">
-                <image href="/assets/img/boat_construction.webp" width="24" height="31"></image>
-            </pattern>  
-        </defs>
-
-        <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
-        <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
-        
-        <g class="group_1">
-            <path id="edge_1" class="edges" d="m33.037 28.44c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.6458"/>
-            <path id="edge_2" class="edges" d="m21.599 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
-        <!-- on  click open info template -->
-            <a href="/robot">
-                <ellipse id="circle_one" class="nodes" cx="35" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#spiderpi)"/>
-            </a>
-        </g>
-        
-        <g class="group_2">
-        <path id="edge_3" class="edges" d="m24.862 67.439c31.427-13.767 31.414-13.772 31.414-13.772" stroke-width="2.6458"/>
-        <path id="edge_6" class="edges" d="m18.277 93.674c38.021-40.006 37.999-40.007 37.999-40.007" stroke-width=".52917"/>
-        <path id="edge_4" class="edges" d="m69.403 85.356c-13.122-31.702-13.127-31.689-13.127-31.689" stroke-width="3.4396"/>
-        <path id="edge_5" class="edges" d="m50.728 121.44c2.3527-71.49 2.3361-71.474 2.3361-71.474" stroke-width=".48836px"/>
-        <a href="/app">
-            <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:fill stroke markers" fill="url(#permapp)"/>
-        </a>
-        </g>
-
-        <g class="group_3">
-            <path id="edge_7" class="edges" d="m30.477 64.503c29.347 29.791 29.347 29.774 29.347 29.774" stroke-width=".52917"/>
-            <path id="edge_8" class="edges" d="m23.453 62.106c28.366 67.295 28.374 67.263 28.374 67.263" stroke-width=".55417px"/>
-            <a href="/virtual">
-                <circle id="circle_3" class="nodes" cx="20" cy="60" r="13" style="paint-order: fill stroke markers" fill="url(#cyber)"/>
-            </a>
-        </g>
-
-        <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"/>
-            <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 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>
-        <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">
-    </g>
-    </g>
-    </svg>
-
-{% block child %} {% endblock %}
-
-</div>
-
-
-<!--Tablet & Desktop -->
-<div id="tablet">
-    <svg id="a" width="768" height="1024" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-
-        <defs>
-            <pattern id="tekla" height="100%" width="100%">
-                <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="rootwork" height="100%" width="100%">
-                <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="cyberb" height="100%" width="100%">
-                <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="kaosk" height="100%" width="100%">
-                <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="hempium" height="100%" width="100%">
-                <image href="/assets/img/hemp.webp" width="30" height="45"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="machinalala" height="100%" width="100%">
-                <image href="/assets/img/boat_construction.webp" width="24" height="31"></image>
-            </pattern>  
-        </defs>
-
-        <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
-        <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
-        
-        <g class="group_1">
-            <path id="edge_1" class="edges" d="m-10 20 l90 15 " stroke-width="2.6458"/>
-            <path id="edge_2" class="edges" d="m-10 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
-            <path id="edge_11" class="edges" d="m-5 30 l80 55"/>
-            <a href="/robot">
-                <ellipse id="circle_one" class="nodes" cx="0" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#tekla)" fill-opacity="1"/>
-            </a>
-        </g>
-        
-        <g class="group_2">
-        <path id="edge_3" class="edges" d="m-10 70 l80 -30" stroke-width="2.6458"/>
-        <path id="edge_6" class="edges" d="m75 40 l -60 65" stroke-width=".52917"/>
-        <path id="edge_4" class="edges" d="m70 85 l5 -50" stroke-width="3.4396"/>
-        <path id="edge_5" class="edges" d="m90 100 l -10 -60" stroke-width=".48836px"/>
-        <a href="/app">
-            <circle id="circle_2" class="nodes" cx="80" cy="35" r="13" style="paint-order:fill stroke markers" fill="url(#rootwork)"/>
-        </a>
-        </g>
-
-        <g class="group_3">
-            <path id="edge_10" class="edges" d="m20 95.5 l-35 -25"/>
-            <path id="edge_7" class="edges" d="m1 75 l70 3" stroke-width=".52917"/>
-            <path id="edge_8" class="edges" d="m-1 77.5 l90 30"/>
-           
-            
-            <a href="/virtual">
-                <circle id="circle_3" class="nodes" cx="-10" cy="70" r="13" style="paint-order: fill stroke markers" fill="url(#cyberb)"/>
-            </a>
-        </g>
-
-        <g class="group_4">
-            <path id="edge_9" class="edges" d="m75 87.5 l10 10"/>
-            <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 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>
-        <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">
-    </g>
-    </g>
-    </svg>
-
-{% block child %} {% endblock %}
-
-</div>
-
-
-
-{% endblock %}

templates/index.v1.html

@@ -1,206 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<!--nodes in svg as links-->
-<!--animation with CSS-->
-<!--nodes load template based on GET request on click-->
-<!--content(info) is loaded into placeholder in template-->
-<div id="mobile">
-    <svg id="a" width="320" height="568" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-
-        <defs>
-            <pattern id="spiderpi" height="100%" width="100%">
-                <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="permapp" height="100%" width="100%">
-                <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="cyber" height="100%" width="100%">
-                <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="kaos" height="100%" width="100%">
-                <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="hemp" height="100%" width="100%">
-                <image href="/assets/img/hemp.webp" width="30" height="45"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="machina" height="100%" width="100%">
-                <image href="/assets/img/boat_construction.webp" width="24" height="31"></image>
-            </pattern>  
-        </defs>
-
-        <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
-        <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
-        
-        <g class="group_1">
-            <path id="edge_1" class="edges" d="m33.037 28.44c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.6458"/>
-            <path id="edge_2" class="edges" d="m21.599 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
-        <!-- on  click open info template -->
-            <a href="/robot">
-                <ellipse id="circle_one" class="nodes" cx="35" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#spiderpi)"/>
-            </a>
-        </g>
-        
-        <g class="group_2">
-        <path id="edge_3" class="edges" d="m24.862 67.439c31.427-13.767 31.414-13.772 31.414-13.772" stroke-width="2.6458"/>
-        <path id="edge_6" class="edges" d="m18.277 93.674c38.021-40.006 37.999-40.007 37.999-40.007" stroke-width=".52917"/>
-        <path id="edge_4" class="edges" d="m69.403 85.356c-13.122-31.702-13.127-31.689-13.127-31.689" stroke-width="3.4396"/>
-        <path id="edge_5" class="edges" d="m50.728 121.44c2.3527-71.49 2.3361-71.474 2.3361-71.474" stroke-width=".48836px"/>
-        <a href="/app">
-            <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:fill stroke markers" fill="url(#permapp)"/>
-        </a>
-        </g>
-
-        <g class="group_3">
-            <path id="edge_7" class="edges" d="m30.477 64.503c29.347 29.791 29.347 29.774 29.347 29.774" stroke-width=".52917"/>
-            <path id="edge_8" class="edges" d="m23.453 62.106c28.366 67.295 28.374 67.263 28.374 67.263" stroke-width=".55417px"/>
-            <a href="/virtual">
-                <circle id="circle_3" class="nodes" cx="20" cy="60" r="13" style="paint-order: fill stroke markers" fill="url(#cyber)"/>
-            </a>
-        </g>
-
-        <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"/>
-            <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 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>
-        <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">
-    </g>
-    </g>
-    </svg>
-
-{% block child %} {% endblock %}
-
-</div>
-
-
-<!--Tablet & Desktop -->
-<div id="tablet">
-    <svg id="a" width="768" height="1024" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-
-        <defs>
-            <pattern id="tekla" height="100%" width="100%">
-                <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="rootwork" height="100%" width="100%">
-                <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="cyberb" height="100%" width="100%">
-                <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="kaosk" height="100%" width="100%">
-                <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="hempium" height="100%" width="100%">
-                <image href="/assets/img/hemp.webp" width="30" height="45"></image>
-            </pattern>  
-        </defs>
-
-        <defs>
-            <pattern id="machinalala" height="100%" width="100%">
-                <image href="/assets/img/boat_construction.webp" width="24" height="31"></image>
-            </pattern>  
-        </defs>
-
-        <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
-        <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
-        
-        <g class="group_1">
-            <path id="edge_1" class="edges" d="m-10 20 l90 15 " stroke-width="2.6458"/>
-            <path id="edge_2" class="edges" d="m-10 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
-            <path id="edge_11" class="edges" d="m-5 30 l80 55"/>
-            <a href="/robot">
-                <ellipse id="circle_one" class="nodes" cx="0" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#tekla)" fill-opacity="1"/>
-            </a>
-        </g>
-        
-        <g class="group_2">
-        <path id="edge_3" class="edges" d="m-10 70 l80 -30" stroke-width="2.6458"/>
-        <path id="edge_6" class="edges" d="m75 40 l -60 65" stroke-width=".52917"/>
-        <path id="edge_4" class="edges" d="m70 85 l5 -50" stroke-width="3.4396"/>
-        <path id="edge_5" class="edges" d="m90 100 l -10 -60" stroke-width=".48836px"/>
-        <a href="/app">
-            <circle id="circle_2" class="nodes" cx="80" cy="35" r="13" style="paint-order:fill stroke markers" fill="url(#rootwork)"/>
-        </a>
-        </g>
-
-        <g class="group_3">
-            <path id="edge_10" class="edges" d="m20 95.5 l-35 -25"/>
-            <path id="edge_7" class="edges" d="m1 75 l70 3" stroke-width=".52917"/>
-            <path id="edge_8" class="edges" d="m-1 77.5 l90 30"/>
-           
-            
-            <a href="/virtual">
-                <circle id="circle_3" class="nodes" cx="-10" cy="70" r="13" style="paint-order: fill stroke markers" fill="url(#cyberb)"/>
-            </a>
-        </g>
-
-        <g class="group_4">
-            <path id="edge_9" class="edges" d="m75 87.5 l10 10"/>
-            <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 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>
-        <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">
-    </g>
-    </g>
-    </svg>
-
-{% block child %} {% endblock %}
-
-</div>
-
-
-
-{% endblock %}

templates/info.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% block title %}{{ title }}{%endblock%}
+{% block content %}
+<div class ="container">
+  <div class ="content_container">
+      <img src="/assets/img/bootA.webp">
+	  <h1>{{ title }}</h1>
+      <p id="up">
+		{{ content }}
+      </p>
+  </div>
+  <div class ="content_container">
+      <img src="/assets/img/sketch.webp">
+      <h1 id="smaller_text"><span>Green </span>Machine</h1>
+      <p id="up">
+      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>
+  </div>
+  <div class ="content_container">
+      <img src="/assets/img/solar.webp">
+      <h1 id="smaller_text">Solar Miner</h1>
+      <p id="up"> 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>
+  </div>
+</div>
+{% endblock %}

templates/miner_box.html

@@ -0,0 +1,28 @@
+{% extends "index.html" %}
+
+{% block child %}
+<div class="mobile_placeholder">
+    <form action="/" method="get">
+        <input type="submit" class="close_box">
+            <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9"></path>
+            </svg>
+        </form>
+    <div class="open">
+        <div class="box">
+        </div>
+        <div class="content" id="larger">
+            <h2 id="small">Solar Miner</h2>
+            <h3>Solar-powered Crypto Mining System shaping a green future</h3>
+            <p>
+
+			Sustain energy needs, reduce energy waste in mining and use surplus solar power to build a decentralized and green future.
+			The Solar Miner system transmits redundant energy to power a ready-to-use mining rig.
+			Rewards are split between a local wallet and that of a solarpunk project of choice.
+            </p>
+            <a href="/solar-miner">GO</a>
+        </div>
+    </div>
+
+</div>
+{% endblock%}

templates/nav.html

@@ -9,12 +9,88 @@
         <div class="hamburger"></div>
 
         <ul class ="menu">
-            <li><a href="/tekla">Tekla</a></li>
-            <li><a href="/rootwork">Rootwork</a></li>
-            <li><a href="/hemp">{{ "nav_item1"|translate(lang) }}</a></li>
-            <li><a href="/kaoscube">Kaos Cube</a></li>
-            <li><a href="/cyberpreneur">Cyberpreneur</a></li>
-            <li><a href="/offgrid">Offgrid</a></li>
+            <li>
+				<input class="dropdown" id="one" type="checkbox">
+				<a class="top">Waspwork</a>
+				<ul class="down">
+					<li><a class="sub_1" href="/waspwork">Info</a>
+					</li>
+					<li><a class="sub_2" href="/timeline/waspwork">Timeline</a>
+					</li>
+				</ul>
+			</li>
+            <li>
+				<input class="dropdown" id="two" type="checkbox">
+				<a class="top">Cyberpreneur</a>
+				<ul class="down">
+					<li><a class="sub_1" href="/cyberpreneur">Info</a>
+					</li>
+					<li><a class="sub_2" href="/timeline/cyberpreneur">Timeline</a>
+					</li>
+				</ul>
+			</li>
+            <li>
+				<input class="dropdown" id="three" type="checkbox">
+				<a class="top">Tekla</a>
+			<ul class="down">
+				<li><a class="sub_1" href="/tekla">Info</a>
+					</li>
+					<li><a class="sub_2" href="/timeline/tekla">Timeline</a>
+					</li>
+				</ul>
+			</li>
+            <li>
+				<input class="dropdown" id="four" type="checkbox">
+				<a class="top">Kaos Cube</a>
+			<ul class="down">
+				<li><a class="sub_1" href="/kaoscube">Info</a>
+					</li>
+					<li><a class="sub_2" href="/timeline/kaos-cube">Timeline</a>
+					</li>
+				</ul>
+			</li>
+            <li>
+				<input class="dropdown" id="four" type="checkbox">
+					<a class="top">Green Machine</a>
+				<ul class="down">
+					<li><a class="sub_1" href="/greenmachine">Info</a>
+					</li>
+					<li><a class="sub_2" href="/timeline/green-machine">Timeline</a>
+					</li>
+				</ul>
+			</li>
+            <li>
+				<input class="dropdown" id="four" type="checkbox">
+				<a class="top">Solar Miner</a>
+				<ul class="down">
+					<li><a class="sub_1" href="/info/solar-miner">Info</a>
+					</li>
+					<li><a class="sub_2" href="/timeline/solar-miner">Timeline</a>
+					</li>
+				</ul>
+			</li>
+
+            <li>
+				<input class="dropdown" id="four" type="checkbox">
+				<a class="top">Green Energy</a>
+				<ul class="down">
+					<li><a class="sub_1" href="/info/energy">Info</a>
+					</li>
+					<li><a class="sub_2" href="/timeline/energy">Timeline</a>
+					</li>
+				</ul>
+			</li>
+
+            <li>
+				<input class="dropdown" id="four" type="checkbox">
+				<a class="top" style= "color: hsl(150,69%,75%);">CBD</a>
+				<ul class="down">
+					<li><a class="sub_1" href="/cbd">Info</a>
+					</li>
+					<li><a class="sub_2" href="/timeline/cbd">Timeline</a>
+					</li>
+				</ul>
+			</li>
         </ul>
     </div>
 </header>

templates/network.html

@@ -4,20 +4,9 @@
 {% block child %}
 <div class="mobile_placeholder">
     <form action="/" method="get">
-        <input type="submit">
+        <input type="submit" class="close_box">
             <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>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9"></path>
             </svg>
         </form>
     <div class="open">
@@ -26,14 +15,12 @@
         </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>
+            <h3>Anonymizing router for decentralized network sharing </h3>
+            <p>
+			Reinvent public wifi access points by sharing unused bandwith trough a decentralized network.
+			Cubes generate a layer of freedom between ISP provided home-routers and the internet.
+			Get a cube and share your internet or connect to one nearby, using the Kaos Cube DApp, where conditions are agreed upon by peers.</p>
+            <a href="/kaoscube">GO</a>
         </div>
     </div>
 

templates/policy.html

@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+{% block title %}Privacy Policy{%endblock%}
+
+{% block content %}
+<div id="privacy_container">		
+	<h2>Privacy Policy</h2>
+	<div id="statements">
+		<h6>We value your anonymity</h6>
+			<p>This page is designed to be fully functional in the Tor Browser.<br>
+				If you scroll trough the source code of this page, which you can <a>here</a> you won't find a line of Javascript.
+				..and so on, informal
+			</p>
+	</div>
+</div>
+{% endblock %}

templates/pools.html

@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% block title %}{{title}}{%endblock%}
+
+{% block content %}
+<div id="fund_container">
+		<h2>{{ title}}</h2>
+		<p> {{ subtitle }} </p>
+		<div class="node_container">
+			{%if title == "fund"%}
+			<img src="/assets/img/placeholder.jpg">
+			{%endif%}
+			<h6>waspwork</h6>
+			<p>Developement of an <a href="/waspwork">AR App</a> detecting relationships between plants and plants and the environment. </p>
+		</div>
+		<div class="node_container">
+			{%if title == "fund"%}
+			<img src="/assets/img/placeholder.jpg">
+			{%endif%}
+			<h6>cyberpreneur</h6>
+			<p>Developement of an <a href="/cyberpreneur">Remote Farming WebApp</a> enabling monitoring and remote control of a garden.</p>
+		</div>
+
+		<div class="node_container">
+			{%if title == "fund"%}
+			<img src="/assets/img/placeholder.jpg">
+			{%endif%}
+			<h6>tekla</h6>
+			<p>Developement of an <a href="/tekla">Gardening Hexapod</a> automating gardening based on biodynamic design principles.</p>
+		</div>
+
+		<div class="node_container">
+			{%if title == "fund"%}
+			<img src="/assets/img/placeholder.jpg">
+			{%endif%}
+			<h6>solar waste miner</h6>
+			<p>Developement of a <a href="/info/solar-miner">Fundrasing Blockchain Network </a> powered by exess solar energy.</p>
+		</div>
+
+		<div class="node_container">
+			{%if title == "fund"%}
+			<img src="/assets/img/placeholder.jpg">
+			{%endif%}
+			<h6>kaos cube</h6>
+			<p>Developement of a <a href="/cube">Decentralized Internet Sharing Network</a> powered by exess solar energy.</p>
+		</div>
+
+		<div class="node_container">
+			{%if title == "fund"%}
+			<img src="/assets/img/placeholder.jpg">
+			{%endif%}
+			<h6>green machine</h6>
+			<p>Design of <a href="/greenmachine">Fully Self-Sustainable houses</a>adapted to a given environment, making use of the concepts of all other projects.</p>
+		</div>
+		<div class="node_container">
+			{%if title == "fund"%}
+			<img src="/assets/img/placeholder.jpg">
+			{%endif%}
+			<h6></h6>
+			<p>Design of <a href="/cube">Fully Self-Sustainable houses</a>adapted to a given environment, making use of the concepts of all other projects.</p>
+		</div>
+		<div class="node_container">
+			{%if title == "fund"%}
+			<img src="/assets/img/placeholder.jpg">
+			{%endif%}
+			<h6></h6>
+			<p>Design of <a href="/info/energy">Renewable energy solutions adapted to the environment </a>that enable confortable living off the grid.</p>
+		</div>
+</div>
+{% endblock %}

templates/solar.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% block title %}Kaos Cube{%endblock%}
+
+{%block content%}
+<div class ="container">
+    <div class ="content_container">
+        <img src="/assets/img/kaoscube.webp">
+        <h1>Solar Waste Miner</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/spider.html

@@ -4,7 +4,7 @@
 {% block content %}
 <div class ="container">
   <div class ="content_container" id="first">
-      <img id="spider" src="/assets/img/spider_out.webp">
+      <img id="spider" src="/assets/img/tekla.webp">
       <h1>Tekla</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.
@@ -28,4 +28,4 @@
       <a href="https://code.basabuuka.org/alpcentaur/permapp">Code</a>
   </div>
 </div>
-{% endblock %}
+{% endblock %}

templates/submit.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+{% block title %}Submit{%endblock%}
+
+{% block content %}
+<div id="back_home_container">
+	<div id="contents_container">
+		<h1>We've received your message. <br> We'll get in touch soon :)</h1>
+		<a href="/contact">
+			<svg class="arrow" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
+		</a>
+				<a href="/">Back home</a>
+	</div>
+</div>
+{% endblock %}

templates/tekla.html

@@ -4,37 +4,20 @@
 {% block child %}
 <div class="mobile_placeholder">
     <form action="/" method="get">
-        <input type="submit">
+        <input type="submit" class="close_box">
             <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>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9"></path>
             </svg>
         </form>
     <div class="open">
-        {# Test - add language handling#}
-        <!-- <div class="box">
-        </div> -->
         <div class="content">
             <h2>Tekla</h2>
-            <h3>Automatic Biodynamic Gardening for Everyone</h3>
-            <p>Tekla is a garden robot that makes automatic and biodynamic farming accessible for everyone.
-                The low-tech robot gathers informational and relational data in natural environments.
-                Communicating with the TeklApp it determines which organisms work best together in any given environment.
-                All Spiders communicate trough the network the Kaos Cube spins.
-                Tekla monitors the plants and takes care of their needs until it's time for it to harvest the free organic and local crops.
+            <h3>Bio-Inspired Robot for Automated Biodynamic Gardening</h3>
+            <p>Tekla designs self-sustainable gardens emulating nature's strategies.
+			Use the mobile hexapod to effortlessly create biodynamic gardens anywhere.
+                The low-tech robot interfaces with the Waspwork app and learns how to grow in sync with nature.
             </p>
-            <a href="/tekla">MORE</a>
+            <a href="/tekla">GO</a>
         </div>
     </div>
 

templates/timeline.html

@@ -0,0 +1,173 @@
+{% extends "base.html" %}
+{% block title %}{{ title }}{%endblock%}
+
+{% block content %}
+<style>
+
+#bg {
+  background-image: linear-gradient(to left, rgba(255,255,255,0), rgba(1,1,1,1));
+}
+
+.timeline {
+  position: relative;
+  top: 20vh;
+  margin: 0 auto;
+
+}
+
+.timeline::after {
+  info: '';
+  position: absolute;
+  width: 6vw;
+  background-color: white;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.content_box {
+  padding: 1vw 3vw;
+  position: relative;
+  background-color: inherit;
+  width: 50%;
+}
+
+/* The circles on the timeline */
+.content_box::after {
+  content: '';
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  right: -17px;
+  background-color: white;
+  border: 4px solid #FF9F55;
+  top: 15px;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+/* Place the container to the left */
+.left {
+  left: 0;
+}
+
+/* Place the container to the right */
+.right {
+  left: 50%;
+}
+
+.left::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 2vh;
+  width: 0;
+  z-index: 1;
+  right: 2vw;
+  border: medium solid white;
+  border-width: .75vw 0 .75vw .75vw;
+  border-color: transparent transparent transparent white;
+}
+
+/* Add arrows to the right container (pointing left) */
+.right::before {
+  content: " ";
+  height: 0;
+  position: absolute;
+  top: 22px;
+  width: 0;
+  z-index: 1;
+  left: 30px;
+  border: medium solid white;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent white transparent transparent;
+}
+
+/* Fix the circle for containers on the right side */
+.right::after {
+  left: -16px;
+}
+
+.info {
+  padding: 2vh 3vw;
+  background-color: white;
+  position: relative;
+  border-radius: .5vw;
+}
+
+/* Media queries - Responsive timeline on screens less than 600px wide */
+@media screen and (max-width: 600px) {
+  /* Place the timelime to the left */
+  .timeline::after {
+  left: 31px;
+  }
+  
+  /* Full-width containers */
+  .content_box{
+  width: 100%;
+  padding-left: 70px;
+  padding-right: 25px;
+  }
+  
+  /* Make sure that all arrows are pointing leftwards */
+  .content_box::before {
+  left: 60px;
+  border: medium solid white;
+  border-width: 10px 10px 10px 0;
+  border-color: transparent white transparent transparent;
+  }
+
+  /* Make sure all circles are at the same spot */
+  .left::after, .right::after {
+  left: 15px;
+  }
+  
+  /* Make all right containers behave like the left ones */
+  .right {
+  left: 0%;
+  }
+}
+</style>
+</head>
+<div id="bg">
+<div class="timeline">
+  <div class="content_box left">
+    <div class="info">
+      <h2>03/2020</h2>
+	  <p>{{ content }} </p>
+    </div>
+  </div>
+  <div class="content_box right">
+    <div class="info">
+      <h2>2016</h2>
+      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
+    </div>
+  </div>
+  <div class="content_box left">
+    <div class="info">
+      <h2>2015</h2>
+      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
+    </div>
+  </div>
+  <div class="content_box right">
+    <div class="info">
+      <h2>2012</h2>
+      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
+    </div>
+  </div>
+  <div class="content_box left">
+    <div class="info">
+      <h2>2011</h2>
+      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
+    </div>
+  </div>
+  <div class="content_box right">
+    <div class="info">
+      <h2>2007</h2>
+      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
+    </div>
+  </div>
+</div>
+</div>
+{% endblock %}

templates/virtual.html

@@ -4,20 +4,9 @@
 {% block child %}
 <div class="mobile_placeholder">
     <form action="/" method="get">
-        <input type="submit">
+        <input type="submit" class="close_box">
             <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>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9"></path>
             </svg>
         </form>
     <div class="open">
@@ -26,16 +15,14 @@
         </div>
         <div class="content">
             <h2 id="small">Cyberpreneur</h2>
-            <h3>Virtual business transparency and customers as entrepreneurs</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.
+            <h3>P2P network for remote farming and trading greens</h3>
+            <p>Design and monitor gardens remotely and share outputs locally. 
+               The P2P Cyberpreneur network connects Tekla robots and provides a platform for exchanging goods with 100% transparency.
+			   Tekla owners trade and certify their goods themselves and therefore become entrepreneurs revolutionalizing agronomics.
             </p>
-            <a href="/cyberpreneur">MORE</a>
+            <a href="/cyberpreneur">GO</a>
         </div>
     </div>
 
 </div>
-{% endblock%}
+{% endblock%}

templates/waspwork_box.html

@@ -0,0 +1,29 @@
+{% extends "index.html" %}
+
+<!-- load into index template -->
+{% block child %}
+<div class="mobile_placeholder">
+    <form action="/" method="get">
+        <input type="submit" class="close_box">
+            <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9"></path>
+            </svg>
+        </form>
+    <div class="open">
+        {# Test Content - add language handling json#}
+        <div class="box">
+        </div>
+        <div class="content">
+            <h2>Waspwork</h2>
+            <h3>AR-app to design self-sustainable environments</h3>
+            <p>
+			Waspwork makes gardening sustainable and accessible. 
+			Learn about relationships between entities in any given environment.
+			Grasp the complexity of a natural environment with ease and design your own biodynamic garden the way nature would do it.
+            </p>
+            <a href="/waspwork">GO</a>
+        </div>
+    </div>
+
+</div>
+{% endblock%}