aug30

Makefile

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

src/main.rs

@@ -1,12 +1,8 @@
 #[macro_use] extern crate rocket;
 
-// push strings to path
-// generate path from strings
-use std::path::{ PathBuf, Path };
+mod routes;
+use crate::routes::{ get, get_static_files };
 
-// Responder Type NamedFile
-// serve file with Content-Type based on name
-use rocket::fs::{ NamedFile, relative };
 
 // Equivalent to main()
 #[rocket::main] // enable async main()
@@ -15,20 +11,29 @@ async fn main() -> Result<(), rocket::Error> {
     // State Rocket<Build> => configuration
         // registering routes
         // mounting routes
-        // registering/ mobuildunting catchers
+        // registering/ catchers
         // manage State
         // attach Fairings
         rocket::build()
         // State Rocket<Ignite> => Finalized App ready to launch
             // check before launching
             // catch errors
-        .mount("/", routes![ index, fileserver, experiments, perma, greentech, spider, learn ])
-        .mount("/experiments", routes! [ oil, flower, candy ])
-        .mount("/permaculture", routes! [ permapp, greenlab, about_perma ])
-        .mount("/greentech", routes! [ automation, iot, diy ])
-        .mount("/spider", routes! [ spiderpi, join ])
-        .mount("/learn", routes! [ about, partners, meet, blog, code ])
-        .mount("/policies", routes! [ policies_info, privacy ])
+        .mount("/",
+            routes![ 
+                get::index, get_static_files::fileserver, 
+                get::experiments, get::perma, get::greentech, get::spider, get::learn ])
+        .mount("/experiments",
+            routes! [ get::oil, get::flower, get::candy ])
+        .mount("/permaculture",
+            routes! [ get::permapp, get::greenlab, get::about_perma ])
+        .mount("/greentech",
+        routes! [ get::automation, get::iot, get::diy ])
+        .mount("/spider",
+        routes! [ get::spiderpi, get::join ])
+        .mount("/learn", 
+        routes! [ get::about, get::partners, get::meet, get::blog, get::code ])
+        .mount("/policies", 
+        routes! [ get::policies_info, get::privacy ])
 
 
         .ignite().await?
@@ -36,148 +41,4 @@ async fn main() -> Result<(), rocket::Error> {
             // State after launch() is called
             // launch() starts server
         .launch().await
-}
-
-// Configure requests
-// generate routes, set attributes
-    // set http method
-    // set uri
-#[route(GET, uri = "/")]
-// if success call handler
-async fn index() -> Option<NamedFile> {
-   NamedFile::open("templates/index.html").await.ok()
-}
-
-// serve other pages (html GET)
-// create routes for pages
-#[get("/experiments")]
-async fn experiments() -> Option<NamedFile> {
-    NamedFile::open("templates/experiments.html").await.ok()
-}
-
-#[get("/permaculture")]
-async fn perma() -> Option<NamedFile> {
-    NamedFile::open("templates/permaculture.html").await.ok()
-}
-
-#[get("/greentech")]
-async fn greentech() -> Option<NamedFile> {
-    NamedFile::open("templates/greentech.html").await.ok()
-}
-
-#[get("/spider")]
-async fn spider() -> Option<NamedFile> {
-    NamedFile::open("templates/spider.html").await.ok()
-}
-
-#[get("/learn")]
-async fn learn() -> Option<NamedFile> {
-    NamedFile::open("templates/learn.html").await.ok()
-}
-
-#[get("/oil")]
-async fn oil() -> Option<NamedFile> {
-    NamedFile::open("templates/oils.html").await.ok()
-}
-
-#[get("/flower")]
-async fn flower() -> Option<NamedFile> {
-    NamedFile::open("templates/flower.html").await.ok()
-}
-
-#[get("/candy")]
-async fn candy() -> Option<NamedFile> {
-    NamedFile::open("templates/edibles.html").await.ok()
-}
-
-#[get("/permApp")]
-async fn permapp() -> Option<NamedFile> {
-    NamedFile::open("templates/permapp.html").await.ok()
-}
-
-#[get("/greenlab")]
-async fn greenlab() -> Option<NamedFile> {
-    NamedFile::open("templates/greenlab.html").await.ok()
-}
-
-#[get("/about")]
-async fn about_perma() -> Option<NamedFile> {
-    NamedFile::open("templates/whatsthat.html").await.ok()
-}
-
-#[get("/automation")]
-async fn automation() -> Option<NamedFile> {
-    NamedFile::open("templates/automation.html").await.ok()
-}
-
-#[get("/DiY")]
-async fn diy() -> Option<NamedFile> {
-    NamedFile::open("templates/diy.html").await.ok()
-}
-
-#[get("/IoT")]
-async fn iot() -> Option<NamedFile> {
-    NamedFile::open("templates/iot.html").await.ok()
-}
-
-#[get("/spiderPi")]
-async fn spiderpi() -> Option<NamedFile> {
-    NamedFile::open("templates/spiderpi.html").await.ok()
-}
-
-#[get("/join")]
-async fn join() -> Option<NamedFile> {
-    NamedFile::open("templates/join.html").await.ok()
-}
-
-#[get("/about")]
-async fn about() -> Option<NamedFile> {
-    NamedFile::open("templates/whoweare.html").await.ok()
-}
-
-#[get("/partners")]
-async fn partners() -> Option<NamedFile> {
-    NamedFile::open("templates/partners.html").await.ok()
-}
-
-#[get("/contact")]
-async fn meet() -> Option<NamedFile> {
-    NamedFile::open("templates/meet.html").await.ok()
-}
-
-#[get("/blog")]
-async fn blog() -> Option<NamedFile> {
-    NamedFile::open("templates/blog.html").await.ok()
-}
-
-#[get("/code")]
-async fn code() -> Option<NamedFile> {
-    NamedFile::open("templates/code.html").await.ok()
-}
-
-#[get("/")]
-async fn policies_info() -> Option<NamedFile> {
-    NamedFile::open("templates/policies.html").await.ok()
-}
-
-#[get("/privacy")]
-async fn privacy() -> Option<NamedFile> {
-    NamedFile::open("templates/privacy-policy.html").await.ok()
-}
-
-
-// Serve static files from /
-    // Match against multiple segments
-    // parameters need to implement FromSegments
-    // PathBuf implements FromSegments
-    // push all segments to path
-    // Option<Some, Err> implements Responder
-    // NamedFile implements Responder => generates Response
-#[route(GET, uri= "/<path..>")]
-async fn fileserver(path: PathBuf) -> Option<NamedFile> { // PathBuf =  Heapstring, growable
-    // set path to static files
-    let path = Path::new(relative!("templates/assets")).join(path); // Path = stack string, fixed size
-    // path accessible from /
-    // Open file at path 
-        NamedFile::open(path).await.ok()
 }

src/routes/get.rs

@@ -0,0 +1,134 @@
+// Responder Type NamedFile
+// serve file with Content-Type based on name
+use rocket::fs::NamedFile;
+// Error type 404
+use rocket::response::status::NotFound;
+
+// Configure requests
+// generate routes, set attributes
+    // set http method
+    // set uri
+    #[route(GET, uri = "/")]
+    // if success call handler
+    pub async fn index() -> Result<NamedFile, NotFound<String>> {
+       NamedFile::open("templates/index.html").await.map_err(|e|NotFound(e.to_string()))
+    }
+    
+    // serve other pages (html GET)
+    // create routes for pages
+    #[get("/experiments")]
+    pub async fn experiments() -> Option<NamedFile> {
+        NamedFile::open("templates/experiments.html").await.ok()
+    }
+    
+    #[get("/permaculture")]
+    pub async fn perma() -> Option<NamedFile> {
+        NamedFile::open("templates/permaculture.html").await.ok()
+    }
+    
+    #[get("/greentech")]
+    pub async fn greentech() -> Option<NamedFile> {
+        NamedFile::open("templates/greentech.html").await.ok()
+    }
+    
+    #[get("/spider")]
+    pub async fn spider() -> Option<NamedFile> {
+        NamedFile::open("templates/spider.html").await.ok()
+    }
+    
+    #[get("/learn")]
+    pub async fn learn() -> Option<NamedFile> {
+        NamedFile::open("templates/learn.html").await.ok()
+    }
+    
+    #[get("/oil")]
+    pub async fn oil() -> Option<NamedFile> {
+        NamedFile::open("templates/oils.html").await.ok()
+    }
+    
+    #[get("/flower")]
+    pub async fn flower() -> Option<NamedFile> {
+        NamedFile::open("templates/flower.html").await.ok()
+    }
+    
+    #[get("/candy")]
+    pub async fn candy() -> Option<NamedFile> {
+        NamedFile::open("templates/edibles.html").await.ok()
+    }
+    
+    #[get("/permApp")]
+    pub async fn permapp() -> Option<NamedFile> {
+        NamedFile::open("templates/permapp.html").await.ok()
+    }
+    
+    #[get("/greenlab")]
+    pub async fn greenlab() -> Option<NamedFile> {
+        NamedFile::open("templates/greenlab.html").await.ok()
+    }
+    
+    #[get("/about")]
+    pub async fn about_perma() -> Option<NamedFile> {
+        NamedFile::open("templates/whatsthat.html").await.ok()
+    }
+    
+    #[get("/automation")]
+    pub async fn automation() -> Option<NamedFile> {
+        NamedFile::open("templates/automation.html").await.ok()
+    }
+    
+    #[get("/DiY")]
+    pub async fn diy() -> Option<NamedFile> {
+        NamedFile::open("templates/diy.html").await.ok()
+    }
+    
+    #[get("/IoT")]
+    pub async fn iot() -> Option<NamedFile> {
+        NamedFile::open("templates/iot.html").await.ok()
+    }
+    
+    #[get("/spiderPi")]
+    pub async fn spiderpi() -> Option<NamedFile> {
+        NamedFile::open("templates/spiderpi.html").await.ok()
+    }
+    
+    #[get("/join")]
+    pub async fn join() -> Option<NamedFile> {
+        NamedFile::open("templates/join.html").await.ok()
+    }
+    
+    #[get("/about")]
+    pub async fn about() -> Option<NamedFile> {
+        NamedFile::open("templates/whoweare.html").await.ok()
+    }
+    
+    #[get("/partners")]
+    pub async fn partners() -> Option<NamedFile> {
+        NamedFile::open("templates/partners.html").await.ok()
+    }
+    
+    #[get("/contact")]
+    pub async fn meet() -> Option<NamedFile> {
+        NamedFile::open("templates/meet.html").await.ok()
+    }
+    
+    #[get("/blog")]
+    pub async fn blog() -> Option<NamedFile> {
+        NamedFile::open("templates/blog.html").await.ok()
+    }
+    
+    #[get("/code")]
+    pub async fn code() -> Option<NamedFile> {
+        NamedFile::open("templates/code.html").await.ok()
+    }
+    
+    #[get("/")]
+    pub async fn policies_info() -> Option<NamedFile> {
+        NamedFile::open("templates/policies.html").await.ok()
+    }
+    
+    #[get("/privacy")]
+    pub async fn privacy() -> Option<NamedFile> {
+        NamedFile::open("templates/privacy-policy.html").await.ok()
+    }
+    
+    

src/routes/get_static_files.rs

@@ -0,0 +1,25 @@
+// push strings to path
+// generate path from strings
+use std::path::{ Path, PathBuf };
+
+//responder type 
+use rocket::fs::{ NamedFile, relative };
+// responder Error type 404
+use rocket::response::status::NotFound;
+
+
+// Serve static files from /
+    // Match against multiple segments
+    // parameters need to implement FromSegments
+    // PathBuf implements FromSegments
+    // push all segments to path
+    // Option<Some, Err> implements Responder
+    // NamedFile implements Responder => generates Response
+    #[route(GET, uri= "/<path..>")]
+    pub async fn fileserver(path: PathBuf) -> Result<NamedFile, NotFound<String>> { // PathBuf =  Heapstring, growable
+        // set path to static files
+        let path = Path::new(relative!("templates/assets")).join(path); // Path = stack string, fixed size
+        // path accessible from /
+        // Open file at path 
+            NamedFile::open(&path).await.map_err(|e| NotFound(e.to_string()))
+    }

src/routes/mod.rs

@@ -0,0 +1,2 @@
+pub mod get;
+pub mod get_static_files;

templates/assets/components/automation-content.html

@@ -0,0 +1,47 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>Automation</h1>
+        <p>Automatic greenhouses<br class="mobile"> for everyone.<br><br>
+       </p>
+       <p id="color">Learn about our projects!</p>
+        <div class="image">
+            <!--add an imaage of a greenhouse-automation project-->
+        </div>
+        </div>
+    <div class="auto-container">
+        <div class="strip">
+        <div class="about">
+            <h3>Where we stand and where we'll go.</h3>
+            <p>Our goal is to build fully automatic greenhouses for everyone.<br>
+            We want them to be both affordable and comprehensive, we want to enable you to grow your own organic food anywhere.<br><br>
+          	Currently we are at the very beginning of our journey and we are rennovating the greenhouse that will be our first fully automized prototype that also serves as the natural habitat of SpiderPi.<br><br>
+            <span>Stay in touch</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../img/sample-greenhouse.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>Our projects</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/sample-mini-greenhouse.jpg"/>
+                </div>
+                <h5>Mini Greenhouses</h5>
+                <p>These Mini Greenhouses have a built in mechanism that manipulates the day-lenght to your plants needs.<br><br>
+                    The curtains close and the light comes up based on data transmitted by sensors and a program that knows plants exact light needs that can apply them and improve the data.<br>
+					Dreaming..here could be projects like this one.<br>
+					Find out how we did it in our <a id= "blog-link" href="../learn/blog">Blog</a>.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">More</a></button>
+                    <button id="app"><a href="#">DIY</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/blog-content.html

@@ -0,0 +1,242 @@
+<div class="page-wrapper">
+	<div class="info">
+		<h1>Blog</h1>
+			<p>CBD.Permaculture.Tech.More.<br><br>
+		<div class="image">
+			<picture>
+				<img type="image/svg+xml" src="../img/sample-blog.svg" />
+			</picture>
+		</div>
+		</div>
+	<div class="blog-container">
+		<div class="strip">
+			<h3>Company</h3>
+			<div class="grid">
+			<figure>
+			<div class="theme" id="post1">
+			<div class="image">
+			<picture>
+				<source type="image/webp">
+				<img id="closeup" type="image/jpeg" src="../img/sample-oils-background.jpg"/>
+			</picture>
+			</div>
+			<h5>CBD oil Sauvage</h5>
+			<div class="description">
+				<p>Our first experiment Sauvage is out !<br>
+				Read her story from seed to sale.</p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">Read</a>
+			</button>
+		</div>
+		</div>
+		<div class="theme" id="post2">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" type="image/jpeg" src="../img/sample-oils-background.jpg"/>
+				</picture>
+			</div>
+			<h5>Wild Herbs</h5>
+			<div class="description">
+				<p>Our first experiment Sauvage is out !<br>
+				Read her story from seed to sale.</p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">Read</a>
+			</button>
+		</div>
+		</div>
+		<div class="theme" id="post3">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" type="image/jpeg" src="../img/sample-oils-background.jpg"/>
+				</picture>
+			</div>
+			<h5>Wild Herbs</h5>
+			<div class="description">
+				<p>Our first experiment Sauvage is out !<br>
+				Read her story from seed to sale.</p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">Read</a>
+			</button>
+		</div>
+		</div>
+	</figure>
+	</div>
+</div>
+	<div class="strip">
+		<h3>CBD News</h3>
+		<div class="grid">
+		<figure>
+		<div class="theme" id="post1">
+		<div class="image">
+			<picture>
+				<source type="image/webp">
+				<img id="closeup" type="image/jpeg" src="../img/sample-migraines-art.jpg"/>
+			</picture>
+		</div>
+		<h5 class= "downsize">CBD against migraines</h5>
+		<div class="description">
+			<p>CBD helps against migraines!<br>
+			Which cannabinoid have which effects on the brain</p>
+		</div>
+		<div class="click">
+		<button class="read">
+			<a href="#">Read</a>
+		</button>
+	</div>
+	</div>
+	<div class="theme" id="post2">
+		<div class="image">
+			<picture>
+				<source type="image/webp">
+				<img id="closeup" type="image/jpeg" src="../img/sample-migraines-art.jpg"/>
+			</picture>
+		</div>
+		<h5 class= "downsize">CBD against migraines</h5>
+		<div class="description">
+			<p>CBD helps against migraines!<br>
+			Which cannabinoid have which effects on the brain</p>
+		</div>
+		<div class="click">
+		<button class="read">
+			<a href="#">Read</a>
+		</button>
+	</div>
+	</div>
+	<div class="theme" id="post3">
+		<div class="image">
+			<picture>
+				<source type="image/webp">
+				<img id="closeup" type="image/jpeg" src="../img/sample-migraines-art.jpg"/>
+			</picture>
+		</div>
+		<h5 class= "downsize">CBD against migraines</h5>
+		<div class="description">
+			<p>CBD helps against migraines!<br>
+			Which cannabinoid have which effects on the brain</p>
+		</div>
+		<div class="click">
+		<button class="read">
+			<a href="#">Read</a>
+		</button>
+	</div>
+	</div>
+</figure>
+</div>
+</div>
+<div class="strip">
+	<h3 id="smaller">Perma<br>& culture News</h3>
+	<div class="grid">
+	<figure class ="single">
+	<div class="theme" id="shorter">
+	<div class="image">
+		<picture>
+			<source type="image/webp">
+			<img id="closeup" type="image/jpeg" src="../img/sample-aqua.jpg"/>
+		</picture>
+	</div>
+	<h5>Aquaculture</h5>
+	<div class="description">
+		<p>Find out how fish and plants can profit from each other.<br>
+		Here's what we found out.</p>
+	</div>
+	<div class="click">
+	<button class="read">
+		<a href="#">Read</a>
+	</button>
+</div>
+</div>
+</figure>
+</div>
+</div>
+<div class="strip">
+	<h3>Tech News</h3>
+	<div class="grid">
+	<figure class= "single">
+	<div class="theme" id= "tech">
+	<div class="image">
+		<picture>
+			<source type="image/webp">
+			<img id="closeup" type="image/jpeg" src="../img/sample-led.jpg"/>
+		</picture>
+	</div>
+	<h5>Light Sensors</h5>
+	<div class="description">
+		<p>Read about our experiments to find out the perfect lighting conditions for our plants.<br>
+		How light influences plants and how we manipulate it.</p>
+	</div>
+	<div class="click">
+	<button class="read">
+		<a href="#">Read</a>
+	</button>
+</div>
+</div>
+</figure>
+</div>
+</div>
+<div class="strip">
+	<h3>Tutorials</h3>
+	<div class="grid">
+	<figure class="single">
+	<div class="theme" id= "tutorials">
+	<div class="image">
+		<picture>
+			<source type="image/webp">
+			<img id="closeup" type="image/jpeg" src="../img/sample-diy.jpg"/>
+		</picture>
+	</div>
+	<h5 id="small">Water Flow Automation</h5>
+	<div class="description">
+		<p>Learn how to build a water automation for your plants.<br>
+		Here's how to do it.</p>
+	</div>
+	<div class="click">
+	<button class="read">
+		<a href="#">Read</a>
+	</button>
+</div>
+</div>
+</figure>
+</div>
+</div>
+		<div class="strip2">
+		  <div class="products">
+				<h3>Social Media</h3>
+				<div class="social">
+				<h5>Keep in touch !</h5>
+				<figure>
+					<picture>
+						<source type="image/webp">
+						<img id="post_1" src="../img/sample-post.jpg"/>
+					</picture>
+
+					<picture>
+						<source type="image/webp">
+						<img id="post_2" src="../img/sample-post.jpg"/>
+					</picture>
+
+					<picture>
+						<source type="image/webp">
+						<img class="desktop" id="post_3" src="../img/sample-post.jpg"/>
+					</picture>
+				</figure>
+				  <div class="instagram">
+					  <button id="insta"><a href="#"><img id="gram" type="image/svg+xml" src="../img/pixelfed.svg"></a></button>
+					  <h5 id="account">@Cannabinieri_Official</h5>
+				  </div>
+				  <div class="youtube">
+					  <button id="you"><a href="#"><img id="tube" type="image/svg+xml" src="../img/peertube.svg"></a></button>
+					  <h5 id="account">@Cannabinieri_Official</h5>
+				  </div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

templates/assets/components/code-content.html

@@ -0,0 +1,73 @@
+<div class="page-wrapper">
+	<div class="info">
+		<h1>Code</h1>
+			<p>Get the code.<br><br>
+		<div class="image">
+			<img type="image/svg+xml" src="../img/gitea-green.svg" />
+		</div>
+		</div>
+	<div class="code-container">
+		<div class="strip">
+			<h3>All code</h3>
+			<div class="grid">
+			<figure>
+			<div class="theme" id="post1">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" src="../img/sample-code1.jpg"/>
+				</picture>
+			</div>
+			<h5>Detect obstacles</h5>
+			<h6>Python</h6>
+			<div class="description">
+				<p>Obstacle Detection Program for SpiderPi<br></p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">GET</a>
+			</button>
+		</div>
+		</div>
+		<div class="theme" id="post2">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" src="../img/sample-virtual.jpg"/>
+				</picture>
+			</div>
+			<h5>See in 3D</h5>
+			<h6>Python</h6>
+			<div class="description">
+				<p>3D Rendering Program for SpiderPI<br></p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">GET</a>
+			</button>
+		</div>
+		</div>
+		<div class="theme" id="post3">
+			<div class="image">
+				<picture>
+					<source type="image/webp">
+					<img id="closeup" src="../img/sample-waterflow.jpg"/>
+				</picture>
+			</div>
+			<h5 id= "downsize">Waterflow Regulation</h5>
+			<h6>Python</h6>
+			<div class="description">
+				<p>Program to manipulate the waterflow for Raspberry Pi</p>
+			</div>
+			<div class="click">
+			<button class="read">
+				<a href="#">GET</a>
+			</button>
+		</div>
+		</div>
+	</figure>
+	</div>
+</div>
+</div>
+</div>
+

templates/assets/components/diy-content.html

@@ -0,0 +1,47 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>DIY</h1>
+        <p>Automate yourself.<br><br>
+        <span>Check out our guides!</span></p>
+        <div class="image">
+        </div>
+        </div>
+    <div class="things-container">
+        <div class="strip">
+        <div class="about">
+            <h3>We want you to automate yourself !</h3>
+            <p>Currently many tasks that used to be done by people are done by computers.<br>
+             In agriculture there are  many interesting projects going on that will soon replace farmworkers with software-engineers.<br><br>
+              Automation is an amazing opportunity to get tasks done more efficiently and to collect data in order to get a better understanding on how things work.<br><br>
+              Even though there are many people loosing their jobs while not being able to find a new job with their skillset that used to be valuable.<br><br>
+               So we want everyone to get aquainted with automation, in order to keep working and keep contributing to the progress.<br><br>
+              For that it is important to start small automation projects yourself that are fun, that make you learn and of which you profit.<br><br>
+              <span>Start your first project now !</span>
+            <br>
+            </p>
+            <div class="image">
+              <!--add a video of a working iot module-->
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>Projects</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp"src="../img/sample-project.jpg"/>
+                </div>
+                <h5>Light, Light on off</h5>
+                <p>Learn how to build an automatic lightswitch.<br><br>
+                    Manipulate the light using sensors.<br>
+					Here could be projects like this one.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">Start</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/edibles-content.html

@@ -0,0 +1,47 @@
+
+	<div class="page-wrapper">
+        <div class="info">
+            <h1>Candy</h1>
+            <p>Learn about our CBD Edibles.<br><br>
+            <span>Coming Soon!</span></p>
+            <div class="image">
+                <img type=" image/webp" src="../img/sample-lemon.png"/>
+            </div>
+            </div>
+        <div class="oil-container">
+            <div class="strip">
+            <div class="about">
+                <h3>Currently we are brewing our gummiberry-juice !</h3>
+                <p>All around our lab grow a variety of local flavourful crops.<br>
+               There are lemon trees, orange trees, a variety of herbs such as salvia, thyme and rosemary, there is the sea with its algae and there are flowers all around.<br>
+               All the ingredients for 100% organic CBD candy are growing wildly around us.
+               Now our job is to find the perfect recipe to create vegan CBD edibles with the oil we produce and all the flavour that grows around us.<br><br>
+                <span>Out soon!</span><br>
+                #a dummy text</p>
+                <div class="image">
+                <img type=" image/webp" src="../img/sample-lemontree.jpg"/>
+                </div>
+            </div>
+        </div>
+        <div class="strip2">
+            <div class="products">
+                <h3>All CBD Edibles</h3>
+                <div class="product">
+                    <div class="image">
+                        <img type=" image/webp" src="../img/sample-product-candy.svg" />
+                    </div>
+                    <h5>Name</h5>
+                    <p>A description about this product.<br>
+                        All its ingredients and what makes it unique.<br>
+                        % CBD, % THC, flavour, effect.<br>
+                        Why people should buy it.<br><br>
+                    </p>
+                    <div class="click">
+                        <button><a href="#">About</a></button>
+                        <button id="shop"><a href="#">Try</a></button>
+                    </div>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>

templates/assets/components/flower-content.html

@@ -0,0 +1,43 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>Flowers</h1>
+		<p>Learn about our CBD Flower.<br>
+        <span>Coming Soon!</span></p>
+        <div class="image">
+            <img type=" image/webp" src="../img/sample-flower-closeup.svg"/>
+        </div>
+        </div>
+    <div class="flower-container">
+        <div class="strip">
+        <div class="about">
+            <h3>Soon we'll bring Flower to the people !</h3>
+            <p>Currently we are building our imperium.<br>
+            Our own CBD plants grow yearlong and are all set for our first experiments on them.<br>
+            We want to know which effects changes to environmental entities have and how the taste and composition of our CBD flowers is influenced by that.<br>
+            At our lab we organically grow wild herbs and a variety of fruit that will give our flower unique flavors. <br>
+            Our SpiderPi will soon be collecting information about our plants.<br><br>
+            <span>Get ready for organic, robot-grown CBD flowers !</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../img/sample-plants.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>All CBD Flower</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/sample-product.svg" />
+                </div>
+                <h5>Name</h5>
+                <p>A short description about this experiment,<br> flavor, THC, CBD and what's unique.</p>
+                <div class="click">
+                    <button>About</button>
+                    <button id="shop">Buy</button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/footer.html

@@ -71,17 +71,26 @@
                         <ul>
                             <li class="youtube">
                                     <a href="#">
-                                            <img id="youtube" type="image/webp" src= "img/peertube.svg">
+                                        <picture>
+                                                <source srcset="../img/peertube_white.svg" type="image/webp">
+                                                <img id="youtube" type="image/webp" src= "img/peertube_white.svg">
+                                        </picture>
                                     </a>
                             </li>
                             <li>
                                     <a href="#">
-                                            <img id="instagram" type="image/webp" src="img/pixelfed.svg">
+                                        <picture>
+                                                <source srcset="../img/pixelfed.svg" type="image/webp">
+                                                <img id="instagram" type="image/webp" src="img/pixelfed.svg">
+                                        </picture>
                                     </a>
                             </li>
                             <li>
                                 <a href="#">
-                                        <img id="gitea" type="image/webp" src="img/gitea.svg">
+                                        <picture>
+                                                <source srcset="../img/gitea.svg" type="image/webp">
+                                                <img id="gitea" type="image/webp" src="img/gitea.svg">
+                                        </picture>
                                 </a>
                         </li>
                     </ul>

templates/assets/components/greenlab-content.html

@@ -0,0 +1,48 @@
+
+	<div class="page-wrapper">
+    <div class="info">
+        <h1><span>Green</span>Lab</h1>
+        <p>The power of partnerplants.<br><br>
+        <span>Discover our recipes!</span></p>
+        <div class="image">
+            <img type=" image/webp" src="../img/sample-fertilizer.svg"/>
+        </div>
+        </div>
+    <div class="green-container">
+        <div class="strip">
+        <div class="about">
+            <h3> We tune our plants with our plants.</h3>
+            <p>We do not use any chemicals on our plants because nature trumps them all.<br>
+            There is no dissease or pest that can not be cured by changes within the environment or by utilizing the force of plants and animals.<br>
+          	In fact each plant is a complex chemical composition of nutrients, proteins and inherits a unique communication with the environment.<br>
+         	Different plants attract different insects and bacteria and leave nutrients in the soil, if we understand each plants potential, we have access to an endless toolbox for the composition of organic ferilizer and - pesticide recipes.<br><br>
+            <span>Here's the ones we use!</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../img/sample-fish.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>All products</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/sample-fertilizer.svg" />
+                </div>
+                <h5>Aloe</h5>
+                <p>We use Aloe Vera  as a root stimulant.<br>
+                    Aloe Vera's salysilic acid is a natural root stimulant.<br>
+					The product is a mixture of Aloe Vera juice and water.<br>
+					Find out more in our <a type="text/html" href="../learn/blog">Blog</a>.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">More</a></button>
+                    <button id="app"><a href="#">DIY</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/iot-content.html

@@ -0,0 +1,46 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>IoT</h1>
+        <p>The Raspberry Pi Greenhouse.<br><br>
+        <span>Learn about what's to come!</span></p>
+        <div class="image">
+        </div>
+        </div>
+    <div class="things-container">
+        <div class="strip">
+        <div class="about">
+            <h3>Built and play.</h3>
+            <p>Puzzle together your greenhouse with our out of the box modules or check out our tutorials, get a Pi and do it yourself.<br>
+            Those greenhouses don't spy on you and you can repair and program them yourself. While experimenting both you and them learn.<br><br>
+              They are so awesome, they record how your plants are doing and then act itelligently acording to their needs.<br>
+              Sweet sweet nothing still but we are developing the first modules.
+            <br>
+            #a dummy text</p>
+            <div class="image">
+              <!--add a video of a working iot module-->
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>All Modules</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/sample-module.jpg"/>
+                </div>
+                <h5>Go with the flow</h5>
+                <p>This module consists of a humidity sensor, a water pump and a tube.<br><br>
+                   Water is given based on your plants specific needs.<br>
+					Dreaming..here could be projects like this one.<br>
+					Find out how we built it on our <a href="../learn/blog">Blog</a>.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">More</a></button>
+                    <button id="app"><a href="#">DIY</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/join-content.html

@@ -0,0 +1,80 @@
+<div class="page-wrapper">
+	<div class="info">
+		<h1>Join</h1>
+		<p>Join our project .<br><br>
+		<span>Let's get in touch!</span></p>
+		<div class="image">
+			<img type=" image/webp" src="../img/sample-coding-together.jpg">
+		</div>
+		</div>
+	<div class="join-container">
+		<div class="strip">
+		<div class="about">
+			<h3>Want to join us ?</h3>
+			<p>Feel free to get in touch, we are looking forward to meet you and your ideas.<br>
+				  SpiderPi still is in his starting shoes and we can use your help to get him up and running.<br><br>
+				  Are you willing to contribute, learn and create the future of gardening for everyone ?<br><br>
+			<span>We love to hear from you!</span><br>
+			#a dummy text</p>
+			<div class="image">
+					<img type=" image/webp" src="../img/sample-spiderwoman.png">
+			</div>
+		</div>
+	</div>
+	<div class="strip2">
+			<div class="contact-container">
+					<div class="form">
+			<div class="contact-info">
+				<div class="adress-info">
+				<h3>Write Us</h3>
+				<h5>Adress</h5>
+				<p>Cannabinieri Office <br>
+				Some Adress <br><br>
+				<h5>Mail</h5>
+				<p>
+				cannabinieri@info.de
+				 </p>
+				</div>
+				<div class="phone-info">
+					<h3>Call Us</h3>
+					<p>Some Number<br>
+					 </p>
+					</div>
+				<div class="social-info">
+					<h3>Follow Us</h3>
+					<figure>
+					<h5 id="pixelfed">Pixelfed</h5>
+					<a id= "pixelfed-adress" href="#">Cannabinieri_Official</a>
+					<h5 id="peertube">Youtube</h5>
+					<a  id="peertube-adress" href="#">Cannabinieri_Channel</a>
+					</figure>
+				</div>
+			</div>
+				<div class="contact-form">
+					<form>
+						<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="EMail"required id="mail"/>
+						</div>
+						<div class="input-container">
+							<input type="tel" name="phone" class="input" placeholder="Phone Number(optional)" id="phone"/>
+						</div>
+						<div class="input-container">
+							<input type="subject" name="subject" class="input" placeholder="Subject" id="subject" />
+						</div>
+						<div class="input-container textarea">
+							<textarea name="message" class="input" placeholder="Message" id="message" ></textarea>
+						</div>
+						<button class="btn" id="sub_btn">Submit</button>
+					</form>
+				</div>
+				</div>
+				</div>
+			</div>
+		</div>
+		</div>
+	</div>
+</div>

templates/assets/components/main-nav.html

@@ -1,7 +1,10 @@
 <div id="main-bar">
     <div id="logo-container">
-            <a href="/">
-            <img class="logo" type="image/webp" src= "img/Logo.svg">
+        <a href="/">
+                <picture>
+                        <source srcset="../img/Logo.svg" type="image/webp">
+                        <img class="logo" type="image/webp" src= "img/Logo.svg">
+                </picture>
         </a>
     </div>
     <nav class="main-navigation-bar">

templates/assets/components/meet-content.html

@@ -0,0 +1,68 @@
+<div class="page-wrapper">
+		<div class="info">
+        <h1>Meet Us</h1>
+		<p>Do you have questions, comments, thoughts about us and our experiments ?<br><br>
+		<span>Drop us a line or two, we love to hear from you !</span></p>
+		<img  type=" image/webp" src="../img/cheers.svg"/>
+		</div>
+		<div class="contact-container">
+			<div class="form">
+				<div class="contact-info">
+					<div class="adress-info">
+					<h3>Write Us</h3>
+					<h5>Adress</h5>
+					<p>Cannabinieri Office <br>
+					Some Adress <br><br>
+					<h5>Mail</h5>
+					<p>
+					cannabinieri@info.de
+					 </p>
+					</div>
+					<div class="phone-info">
+						<h3>Call Us</h3>
+						<p>Some Number<br>
+						 </p>
+						</div>
+					<div class="social-info">
+						<h3>Follow Us</h3>
+						<figure>
+						<h5 id="pixelfed">Pixelfed</h5>
+						<a id="pixelfed-adress" href="#">Cannabinieri_Official</a>
+						<h5 id="peertube">Youtube</h5>
+						<a id ="peertube-adress"href="#">Cannabinieri_Channel</a>
+					 	</p>
+					</figure>
+					</div>
+				</div>
+					<div class="contact-form">
+						<form>
+							<h3 class="title">Meet Us</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="EMail"required id="mail"/>
+							</div>
+							<div class="input-container">
+								<input type="tel" name="phone" class="input" placeholder="Phone Number(optional)" id="phone"/>
+							</div>
+							<div class="input-container">
+								<input type="subject" name="subject" class="input" placeholder="Subject" id="subject" />
+							</div>
+							<div class="input-container textarea">
+								<textarea name="message" class="input" placeholder="Message" id="message" ></textarea>
+							</div>
+							<button class="btn" id="sub_btn">Submit</button>
+						</form>
+					</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<!--Handle Form Data with Rocket !
+	<script defer src="../js/form.js"></script>
+	<script defer type="text/javascript" src= "../js/axios.min.js"></script>
+	-->
+
+

templates/assets/components/oils-content.html

@@ -0,0 +1,47 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>Oils</h1>
+		<p>Our full-spectrum CBD oils<br><br>
+        <span>Discover our first Experiment!</span></p>
+        <div class="image">
+            <img type=" image/webp" src="../../img/sample-sauvage.svg"/>
+        </div>
+        </div>
+    <div class="oil-container">
+        <div class="strip">
+        <div class="about">
+            <h3><span>Sauvage</span>, the wild one</h3>
+            <p>Sauvage is french for wild.<br>
+            Our first Experiment is a full-spectrum CBD oil made out of a local strain, grown outdoors under normal consitions and obtained through ethanol extraction .<br>
+           Since our project is about exploring how environmental factors and partnerplants influence a products taste and effect,
+           we found that a product grown organically and manually outdoors by one of our partners would be the perfect base to our journey of exploration.<br><br>
+            <span>Find out all about her and order a sample!</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../../img/sample-oils-background.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>All CBD Oils</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../../img/sample-sauvage.svg" />
+                </div>
+                <h5>Sauvage</h5>
+                <p>A Full Spectrum CBD oil from organic grown italian hemp.<br>
+                    The carrier oil is 100% organic hemp oil, ethanol extraction.<br>
+                    % CBD, % THC, flavour, effect.<br>
+                    Natural conditions, nothing done to influence it.<br><br>
+                    <span>Available as a limited sample.</span>
+                </p>
+                <div class="click">
+                    <button><a href=experiments/sauvage.html>About</a></button>
+                    <button id="shop"><a href="#">Try</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/partners-content.html

@@ -0,0 +1,80 @@
+<div class="page-wrapper">
+        <div class="info">
+            <h1>Partners</h1>
+            <p>Who they are and what they do <br>
+            <span> Find out !</span></p>
+            <div class="image">
+               <img type=" image/webp" src="../img/sample-partners.jpg"/>     
+            </div>
+            </div>
+        <div class="post-container">
+            <div class="strip">
+            <div class="about">
+                <h3>The wild ones</h3>
+                <p>Our partner Tommaso gave us the opportunity to bring out our first experiment Sauvage.<br>
+                 He grows organic cannabis outdoors in X for X years because X.<br><br>
+                  This year we arrived in Italy in June, we didn't believe that we'd be able to bring out a product within that first year, Thommaso made it possible.<br><br>
+                  We helped him with the harvest and that was when we decided that his plants will serve our first experiment bacause X.<br>
+                  From Thommaso we can learn a lot about the region we'll be working in, about common disseases and local procedures.<br><br>
+                  <span>Find out more below !</span>
+                <br>
+                #and it goes sthn' like that
+                </p>
+                <div class="image">
+                        <img type=" image/webp" src="../img/sample-tom.jpg"/>
+                </div>
+            </div>
+        </div>
+        <div class="strip2">
+            <div class="products">
+                <h3>All Partners</h3>
+                <div class="partner">
+                    <div class="image">
+                        <img type=" image/webp" src="../img/sample-farm.jpg"/>
+                    </div>
+                    <h5>Tommaso Inc</h5>
+                    <p><span>Organic CBD Farm</span>
+                    <br><br>
+                        His company goal.<br>
+                        Why we work together /how we profit from each other.<br>
+                        #a dummy text #button leads to partners website/social-media etc<br>
+                    </p>
+                    <div class="click">
+                        <button><a href="#">More</a></button>
+                    </div>
+                </div>
+            </div>
+            </div>
+            <div class="strip2">
+                <div class="products">
+                      <h3>Links</h3>
+                      <div class="social">
+                          <div class="tommaso">
+                                  <h5 class="name">Tommaso</h5>
+                        <div class="instagram">
+                            <button id="insta"><a href="#"><img id="gram" type=" image/webp" src="../img/instagram-black.png"></a></button>
+                            <h5 id="account">@Tommaso_Official</h5>
+                        </div>
+                        </div>
+                        <div class="techdude">
+                                <h5 class="name">Tech Dude</h5>
+                        <div class="instagram">
+                                <button id="insta"><a href="#"><img id="gram" type=" image/webp" src="../img/instagram-black.png"></a></button>
+                                <h5 id="account">@TechDude_Official</h5>
+                            </div>
+                        <div class="blog">
+                            <a href="#">TechDude.com</a>
+                        </div>
+                        </div>
+                        <div class="cbdStore">
+                                <h5 class="name" id="name2">Organic CBD Shop</h5>
+                        <div class="blog">
+                                <a href="#">OnlineStore.com</a>
+                            </div>
+                      </div>
+                </div>
+                  </div>
+              </div>
+        </div>
+    </div>
+    

templates/assets/components/permapp-content.html

@@ -0,0 +1,46 @@
+<div class="page-wrapper">
+    <div class="info">
+        <h1>Perm<span>App</span></h1>
+        <p>A map of our ecosystem.<br><br>
+        <span>Try it now!</span></p>
+        <div class="image">
+            <img type=" image/webp" src="../img/sample-permapp-screen.png"/>
+        </div>
+        </div>
+    <div class="app-container">
+        <div class="strip">
+        <div class="about">
+            <h3> Let's create a database of our ecosystem!</h3>
+            <p>Our PerMapp is an app that stores all the connections in our ecosystem.<br>
+            Everything around us is connected, every plant affects all other plants and animals and in the end us people.<br>
+          In order to keep utilizing our planets ressources, we need to understand the complex system that definines life and decay .
+          Add relations you found out about, keep experimenting with the ones that are already known, so in the end we got the data neccessary for a sustainable and automated future of farming.<br><br>
+            <span>Let's Create!</span><br>
+            #a dummy text</p>
+            <div class="image">
+            <img type=" image/webp" src="../img/sample-app.jpg"/>
+            </div>
+        </div>
+    </div>
+    <div class="strip2">
+        <div class="products">
+            <h3>Try the App</h3>
+            <div class="product">
+                <div class="image">
+                    <img type=" image/webp" src="../img/permapp_black.svg" />
+                </div>
+                <h5>Perm<span>App</span></h5>
+                <p>Add and explore the relations of our ecosystem !<br>
+                    The Webapp has already has most of its core functionalities.<br>
+                    The mobile app is currently in developement.<br>
+                    #a dummy text<br>
+                </p>
+                <div class="click">
+                    <button><a href="#">Web</a></button>
+                    <button id="app"><a href="#">App</a></button>
+                </div>
+            </div>
+        </div>
+        </div>
+    </div>
+</div>

templates/assets/components/spiderpi-content.html

@@ -0,0 +1,48 @@
+<div class="page-wrapper">
+       <div class="info">
+           <h1><span>Spider</span>Pi</h1>
+           <p>Our garden hexapod.<br><br>
+           <span>Learn about SpiderPi!</span></p>
+           <div class="image">
+               <img type=" image/webp" src="../img/sample-spiderpi.svg">
+           </div>
+           </div>
+       <div class="spider-container">
+           <div class="strip">
+           <div class="about">
+               <h3>About a Spider</h3>
+               <p>SpiderPi is our garden hexapod, he is aimed to be a garden helper and a walking database of our ecosystem.<br>
+                     Through object detection he will recognize what is happening around him and check a plant for pests and disseases and then execute measures of biodynamic pest- and dissease management.<br><br>
+                     Currently SpiderPi is learning to walk on uneven ground and recognize his surroundings in order to operate within them.<br><br>
+               <span>Be part of the journey !</span><br>
+               #a dummy text</p>
+               <div class="image">
+               <video type="video/mp4" src="../img/sample-video.mp4"></video>
+               <p>video</p>
+               </div>
+           </div>
+       </div>
+       <div class="strip2">
+           <div class="products">
+               <h3>Time-Line</h3>
+               <div class="product">
+                   <div class="image">
+                       <img type=" image/webp" src="../img/sample-camera.jpg"/>
+                   </div>
+                   <h5>Eyes</h5>
+                   <p>Our first challenge is to let SpiderPi detect his surroundings and navigate through them.<br><br>
+                      We replaced his built in camera with a 360 and wrote an object detection program that enables him to navigate through his surroundings and respond to obstacles.<br>
+                       We used the software X, camera X, sensors X, made X changes on the Spider.<br><br>
+                       <span>Stay in touch !</span>
+                       #a dummy text<br>
+                   </p>
+                   <div class="click">
+                       <button><a href="#">Blog</a></button>
+                       <button id="insta"><a href="#"><img id="gram" type=" image/webp" src="../img/pixelfed.svg"></a></button>
+                       <button id="you"><a href="#"><img id="tube" type=" image/webp" src="../img/peertube.svg"></a></button>
+                   </div>
+               </div>
+           </div>
+           </div>
+       </div>
+   </div>

templates/assets/components/whatsthat-content.html

@@ -0,0 +1,59 @@
+<div class="page-wrapper">
+        <div class="info">
+            <h1>What's<br>that<span>?</span></h1>
+            <p>What <span> Permaculture </span> is <br class="mobile">and why we care.<br><br>
+            <span class="mobile">Find out!</span></p>
+            <div class="image">
+                <img type=" image/webp" src="../img/sample-wild.jpg"/>
+            </div>
+            </div>
+        <div class="culture-container">
+            <div class="strip">
+            <div class="about">
+                <h3> The design of a sustainable ecosystem.</h3>
+                <p id="first"> Permaculture is defined through<span id="twelve"><br>12 principles</span>.</p><br>
+                        <ul>
+                                <li><span># </span>Observe and interact</li>
+                                <li><span># </span>Catch and store energy</li>
+                                <li><span># </span>Obtain a yield</li>
+                                <li><span># </span>Apply self-regulation and accept    feedback</li>
+                                <li><span># </span>Use and value renewable services and ressources</li>
+                                <li><span># </span>Produce no waste</li>
+                                <li><span># </span>Design from patterns to details</li>