sept26

3 years ago · 6e3ccb91a1
--- a/formdata.txt
+++ b/formdata.txt
@ -0,0 +1 @@
 name: name, email: mymail@me.com, phone: +333333333, subject: Hello, message: hi,[name: Johhny, email: johnny@mail.com, phone: , subject: , message: hi],[name: hello, email: must@mail.com, phone: , subject: , message: Hi],[name: hello, email: must@mail.com, phone: , subject: , message: Hi],[name: hi, email: mymail@me.com, phone: , subject: , message: peace],[name: Johhny, email: johnny@mail.com, phone: , subject: , message: hey again],
--- a/src/build_rocket/get.rs
+++ b/src/build_rocket/get.rs
@ -1,6 +1,3 @@
 // Responder Type NamedFile
 // serve file with Content-Type based on name
 use rocket::fs::NamedFile;

 use crate::build_rocket::{ templates };

@ -50,32 +47,31 @@ use rocket_dyn_templates::Template;
    }

    #[get("/contact")]
    pub async fn meet() -> Template {
    pub async fn contact() -> Template {
        let context = templates::TplPages::new();
        Template::render("contact", &context)
    }

    #[get("/about")]
    pub async fn about() -> Template {
        let context = templates::TplPages::new();
        Template::render("about", &context)
    }


    // subpages
    
    #[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("/spiderpi")]
    pub async fn spiderpi() -> Option<NamedFile> {
        NamedFile::open("templates/spiderpi.html").await.ok()
    pub async fn oil() -> Template {
        let context = templates::TplPages::new();
        Template::render("oil", &context)
    }

    #[get("/permapp")]
    pub async fn permapp() -> Option<NamedFile> {
        NamedFile::open("templates/permapp.html").await.ok()
      
    #[get("/flower")]
    pub async fn flower() -> Template {
        let context = templates::TplPages::new();
        Template::render("flower", &context)
    }

    #[get("/miner")]
@ -85,14 +81,9 @@ use rocket_dyn_templates::Template;
    }
    
    #[get("/wohnmaschine")]
    pub async fn wm() -> Option<NamedFile> {
        NamedFile::open("templates/greenlab.html").await.ok()
    }

    // footer pages
    #[get("/about")]
    pub async fn about() -> Option<NamedFile> {
        NamedFile::open("templates/about.html").await.ok()
    pub async fn wm() -> Template {
        let context = templates::TplPages::new();
        Template::render("machina", &context)
    }
    
    // code link to gitea
@ -102,5 +93,12 @@ use rocket_dyn_templates::Template;
        let context = templates::TplPrivacy::new();
        Template::render("privacy-policy", &context)
 }
    

 // after submit page
 #[get("/thanks")]
 pub fn thanks() -> Template {
    let context = templates::TplForm::new();
        Template::render("thanks", &context)
 }

   
--- a/src/build_rocket/mod.rs
+++ b/src/build_rocket/mod.rs
@ -1,6 +1,7 @@
 // Routes
 pub mod get;
 pub mod get_static_files;
 pub mod post;

 // Templates
 pub mod templates;
--- a/src/build_rocket/post.rs
+++ b/src/build_rocket/post.rs
@ -0,0 +1,39 @@
 use rocket::form::Form;
 use rocket::response::Redirect;


 use std::fs::OpenOptions;
 use std::io::Write;

 #[derive(FromForm, Debug)]
 pub struct UserInput<'r> {
    name: &'r str,
    email: &'r str,
    phone: &'r str,
    subject: &'r str,
    message: &'r str,
 }

 #[post("/submit", data = "<user_input>")]
 pub fn submit(user_input: Form<UserInput<'_>>) -> Redirect {

    let data = format!("[name: {}, email: {}, phone: {}, subject: {}, message: {}],",
    user_input.name,
    user_input.email,
    user_input.phone, 
    user_input.subject, 
    user_input.message);

    let mut f = OpenOptions::new()
        .append(true)
        .create(true)
        .open("formdata.txt")
        .expect("Couldn't open");
    
    f.write_all(&data.as_bytes()).expect("Failed to write");

    let redirect = Redirect::to(uri!("/contact/thanks"));

    redirect

 }
--- a/src/build_rocket/templates.rs
+++ b/src/build_rocket/templates.rs
@ -34,7 +34,23 @@ pub struct TplPages {
 impl TplPages {
        pub fn new() -> TplPages {
        TplPages { 
            title: json!(["Hanf", "Spinne", "Kaos Cube", "Cyberpreneur", "Offgrid", "Contact Us"]),
            title: json!(["Hanf", "Spinne", "Kaos Cube", "Cyberpreneur", "Offgrid", "Contact Us", "About Us", "Datenschutz", "CBD Öl", "Blüten", "PermApp", "Hexapod", "WohnMachine", "GPU MIner"]),
        }
    }
 }

 #[derive(Serialize)]
 pub struct TplForm {
    pub title: Value,
    pub message: Value,
 }

 // how to do linebreaks in JSON ?
 impl TplForm {
        pub fn new() -> TplForm {
        TplForm { 
            title: json!(["Danke !"]),
            message: json!(["Vielen herzlichen Dank für deine Nachricht !"]),
        }
    }
 }
--- a/src/main.rs
+++ b/src/main.rs
@ -5,7 +5,7 @@ extern crate rocket;
 extern crate lazy_static;

 mod build_rocket;
 use crate::build_rocket::{ get, get_static_files };
 use crate::build_rocket::{ get, get_static_files, post };

 use rocket_dyn_templates::Template;

@ -27,15 +27,22 @@ async fn main() -> Result<(), rocket::Error> {
        .mount("/",
            routes![ 
                get::index_de, get_static_files::fileserver, 
                get::hemp, get::spider, get::cube, get::cyber, get::offgrid, get::about, get::meet, get::privacy ])
                // add(a)about 
                get::hemp, get::spider, get::cube, get::cyber, get::offgrid,  get::contact, get::about, get::privacy ])
        .mount("/hemp",
            routes! [ get::oil, get::flower])
        .mount("/spider",
            routes! [ get::spiderpi, get::permapp ])
        // add(a) flower,
            routes! [ get::oil, get::flower ])

        // add (b)permapp spiderpi
        // .mount("/spider",
        //     routes! [ get::spiderpi, get::permapp ])

        .mount("/offgrid",
        routes! [ get::wm, get::miner ])

        .mount("/contact",
        routes! [ post::submit, get::thanks ])

        // Add Tera Templating support
      .attach(Template::fairing())

--- a/templates/about.html.tera
+++ b/templates/about.html.tera
@ -0,0 +1,33 @@
 {%extends "base"%}
 {%block title %} Cannabinieri | {{ title[6] }} {%endblock title %}
 {%block head%}
 {{super()}}
 <link rel="stylesheet" type="text/css" href="../css/pages.css" />
 {%endblock head%}
 {%block content%}
 <div class ="container">
    <div class ="content_container">
        <img src="../img/Logo.svg">
        <h1 id ="small_centered">Cannabinieri</h1>
        <p>Unsere Mission ist konsequent biologisches CBD anzubauen und mit Hilfe von Technik mehr über sie zu.<br>
        All unsere Produkte sind Experimente die Auswirkungen von Wechselwirkungen in unserem Ökosystem erforschen.
       Unser Dünger sind unsere Partnerpflanzen und Insekten sind unsere Helfer gegen Schädlinge.
        <br>Entdecke unser erstes Experiment !</p>
    </div>
    <div class ="content_container">
        <img src="../img/spider_web.JPG">
        <h1>Vision</h1>
        <p>Unsere CBD Pflanzen verarbeiten wir selbst zu Vollspektrum Ölen. Jedes ein Unikat, wie die Experimente.
         Unsere ersten Öle gewinnen wir durch Extraktion mit Trinkalkohol und natürlich ohne artifizielle Zusätze.
        Wir experimentieren mit verschiedenen Trägerölen und Konzentration. 
        <br>Entdecke mehr über unsere Öle !<br>
         </p>
    </div>
    <div class ="content_container">
        <img src="../img/hero.svg">
        <h1>Modell</h1>
        <p>Unsere Ziel ist es unsere Experimente auch als Blüten anzubieten. Der Verkauf und die Einfuhr von Blüten ist für uns und viele andere Firmen, die ins CBD Business einsteigen wollen ohne rechtliche Absicherung zu riskant.
            Hier findest du mehr zu unseren Blüten, aus denen wir auch unsere Öle herstellen. </p>
    </div>
 </div>
 {%endblock content%}
--- a/templates/assets/components/join-content.html
+++ b/templates/assets/components/join-content.html
@ -1,80 +0,0 @@
 <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>
--- a/templates/assets/components/meet-content.html
+++ b/templates/assets/components/meet-content.html
@ -1,68 +0,0 @@
 <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>
 	-->


--- a/templates/assets/components/oils-content.html
+++ b/templates/assets/components/oils-content.html
@ -1,47 +0,0 @@
 <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>
--- a/templates/assets/components/partners-content.html
+++ b/templates/assets/components/partners-content.html
@ -1,80 +0,0 @@
 <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>
    
--- a/templates/assets/components/permaculture-content.html
+++ b/templates/assets/components/permaculture-content.html
@ -1,77 +0,0 @@
 <div class="page-wrapper">
 	<section class="title">
 		<div id="heading">
 		<h1>Perma</h1>
 		<h1 id="two">Culture</h1>
 		</div>
 		<p class="short">We take part in a culture utilizing the patterns of our ecosystem.</p>
 		<div class="image">
 			<img type="image/webp" src="img/sample-net.jpg">
 		  </div>
 	</section>
 	<section id="about">
 			<p> Permaculture is the way to design in synergy with nature.<br>
 				In order to use our planet's ressources in a sustainable way, we need to understand the design of nature. <br>
 				In order to find new organic solutions we created the PermApp, a way for everybody to store and explore environmental connections & utilize them for sustainable problem-solving.
 			</p>
 			</section>

 	<section id="links">
 		<div id="app-link">
 			<div class="image">
 				<a href="permapp.html">
 					<img id="icon" type="image/webp" src="img/permapp.svg"> <!--here could be an actual app icon or even an interactive canvas-->
 					<img id="icon-desktop" >
 				</a>
 			</div>
 			<div class="description">
 				<h3 class="heading">Perm<span>App</span></h3>
 				<p class="text">Try our PermApp <br>
 				Still and always in developement.<br>Explore and edit connections between the entities of our ecosystem !<br>
 				Create and use data to start your own Permaculture project.</p>
 				<ul class="additional">
 					<li> build our ecosystem</li>
 					<li> explore relations</li>
 					<li> available for Web</li>
 					<li> Mobile App coming soon #dummy</li>
 				</ul>
 			</div>
 			<div class="page-button">
 				<a href="permapp.html">Explore</a>
 			</div>
 		</div>

 		<div id="lab-link">
 			<div class="image">
 				<a href="greenlab.html">
 					<img id="organic" src="img/sample-fertilizer.svg">
 				</a>
 			</div>
 			<div class="description">
 				<h3 class="heading">Green<span>Lab</span></h3>
 				<p class="text">Learn about our 100% organic recipes for fertilizers and pesticides.</p>
 				<p class="text" class="additional">We only use plants out of our own garden for our products.<br><br>
 					Learn about how many plants cure and treat each other and how you can make use of their powers.
 			</div>
 			<div class="page-button">
 				<a href="greenlab.html">Learn</a>
 			</div>
 		</div>

 		<div id="about-link">
 			<div class="image">
 				<a href="whatsthat.html">
 					<h1 id="question">?</h1>
 				</a>
 			</div>
 			<div class="description">
 				<h3 class="heading">What's that <span>?</span></h3>
 				<p>Read about the design principles of <span>Permaculture</span> and how people animals and plants benefit.
 			<br>Permaculture helps us understand our planet and utilize its ressources to their full extend without exploiting them. </p>
 			</div>
 			<div class="page-button">
 				<a href="whatsthat.html">Read</a>
 			</div>
 		</div>
 	</section>
 </div>
--- a/templates/assets/components/permapp-content.html
+++ b/templates/assets/components/permapp-content.html
@ -1,46 +0,0 @@
 <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>
--- a/templates/assets/components/spider-content.html
+++ b/templates/assets/components/spider-content.html
@ -1,60 +0,0 @@
 <div class="page-wrapper">
 	<section class="title">
 		<div id="heading">
                <h1>About a</h1>
                <h1 id="two">Spider</h1>
 		</div>
 			<article>
                <p class="short">Imagine <br class="mobile">a spider<br class="mobile"> doing your gardening.</p>
 				<i class="fa fa-angle-down"></i>
 			</article>
 		<div class="image">
 			<img type="image/webp" src="img/spider.svg" alt="spider">
 		  </div>
 	</section>
 	<section id="about">
 			<p> <span>Spider Pi </span>is the garden hexapod we are working on.<br>
 				He is aimed to be a helper and walking database that recognizes disseases and pests in plants and knows how to fight them.<br>
                He will help us understand how environmental conditions and relations between plants are connected to the spread of pests and disseases. <br>
                In order for him to understand what we don't there is  a lot of work to do and we can use your help.
 			</p>
 			</section>

 	<section id="links">
 		<div id="pi-link">
 			<div class="image">
 				<a href="spiderpi.html">
 					<img type="image/webp" src="img/sample-spiderpi.svg">
 				</a>
 			</div>
 			<div class="description">
 				<h3 class="heading">Spider <span>Pi</span></h3>
 				<p class="text">Learn about our project Spider Pi
                             and be part of the spider's journey to become a garden helper.<br>
                                       Follow Spider Pi's progress and watch us training him step by step.<br>
 				        Be part of our project from beginning to end and participate in if you like.</p>
 			</div>
 			<div class="page-button">
 				<a href="spiderpi.html">Learn</a>
 			</div>
 		</div>

 		<div id="join-link">
 			<div class="image">
 				<a href="greenlab.html">
 					<h1 id="plus">&</h1>
 				</a>
 			</div>
 			<div class="description">
 				<h3 class="heading">Join</span></h3>
 				<p class="text">Become part of us.<br>
                    We can use your help to build and develope our garden spider !<br><br>
 					Let's create together.
 				</p>
 			</div>
 			<div class="page-button">
 				<a href="join.html">Join</a>
 			</div>
 		</div>
 	</section>
 </div>
--- a/templates/assets/components/spiderpi-content.html
+++ b/templates/assets/components/spiderpi-content.html
@ -1,48 +0,0 @@
 <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>
--- a/templates/assets/components/top-nav.html
+++ b/templates/assets/components/top-nav.html
@ -1,8 +0,0 @@
 <!--Add dynamic language handling here-->
 <nav class="top-bar">
    <div class="languages">
        <a  href="../languages/deutsch.html">Deutsch |</a>
        <a  href="static/languages/italiano.html">Italiano |</a>
        <a  href="static/languages/francais.html">Francais </a>
    </div>
 </nav>
--- a/templates/assets/components/whatsthat-content.html
+++ b/templates/assets/components/whatsthat-content.html
@ -1,59 +0,0 @@
 <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>
                                <li><span># </span>Integrate rather than segregate</li>
                                <li><span># </span>Use small and slow solutions</li>
                                <li><span># </span>Use and value diversity</li>
                                <li><span># </span>Use edges and value the marginal</li>
                                <li><span># </span>Creatively use and respond to change</li>
                        </ul>
                <p id="second">
                        All those principles are about a optimized use of our limited ressources while creating a sustaining value - a self-sufficient system that takes care of itself. <br>

                        In order to build such a system a lot of information is required and this information is gained with tech, <br> to ultimately reach the goal of an actual automatic garden that takes care of itself by the rules of nature.<br> This can be a longer text. It should include all info we want to share about no waste, renewable energy, fish, herbs and our experiments.<br> When we got the demeter seal we can also mention it here or that we are working on obtaining it now.<br>
                         This text is about what permaculture is, why it is useful, why and how we use it and how the definition can include robots, maybe no robots here and just what people need to know about us not using plastic, creating a biodynamic farm, working on renewable energy solutions and utilizing partnerplants for our experiments.<br>
                #smthn' like that</p>
                <div class="image">
                <img type=" image/webp" src="../img/plants-in-bags-owned.jpeg"/>
                </div>
            </div>
        </div>
        <div class="strip2">
            <div class="products">
                <h3>Blog</h3>
                <div class="product">
                    <div class="image">
                        <img type=" image/webp" src="../img/sample-post.jpg" />
                    </div>
                    <h5>Related post 1</h5>
                    <p>Short description.<br>
                        Might be about a specific relation or on some study or one of our experiments.<br>
                        #a dummy text<br>
                    </p>
                    <div class="click">
                        <button><a href="#">Read</a></button>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
--- a/templates/assets/components/whoweare-content.html
+++ b/templates/assets/components/whoweare-content.html
@ -1,102 +0,0 @@
 <div class="page-wrapper">
      <div class="info">
          <h1>About<br><span>Us</span></h1>
              <p>We grow further.<br><br>
          <div class="image">
              <img type=" image/webp" src="../img/sample-about.svg" />
          </div>
          </div>
      <div class="about-container">
          <div class="strip">
          <div class="philo">
              <h3><span>We grow our future</h3>
              <p>We are working actively on creating a future that is reigned by knowledge about our environment .<br>
             It is a future that enables us to make use of the full potential of our planet and grow our crops by the principles of nature and with the help of modern technology.<br>
            We want our projects and products to be seen as packages of knowledge - as an ability to understand how complex and exiting the system around us is.<br>
             Our goal is to understand our ecosystem and the influence of every relation on a product. We want you to know all we know.<br><br>
             Collective knowledge, heath and excitement about our environment empowers us to grow further.<br><br>
              #a dummy text</p>
              <div class="image">
              <img id="closeup" type=" image/webp" src="../img/sample-close.jpg"/>
              </div>
          </div>
      </div>
      <div class="strip2">
            <div class="philo">
                  <h3 id="heading2">Working with Nature</h3>
                  <p>We want to utilize all of natures powers and explore organic and biodynamic solutions for pest and dissease management. By that we aim to obtain the highest quality and quantity of yields by only playing with natures entities.<br>
                 We are currently aspiring to obtain the Demeteter label which proves that all principlels of biodynamic agriculture are approved .<br>
                We want to build a self-sufficient system where each plant and each environmental factor profit from each other.
                All products we use on our plants are products made out of our plants.<br><br>
                  #a dummy text</p>
                  <div class="image">
                  <img id="partners" type=" image/webp" src="../img/sample-biodyn.svg"/>
                  </div>
              </div>
         
          </div>
          <div class="strip2">
            <div class="philo">
                  <h3>Exploring the full potential of CBD</h3>
                  <p>The Cannabis plant consisists of more than 120 different cannabinoids which all affect our body and psyche in unique ways.<br>
                All our experiments are tailored to create exquisit compositions of different tastes and effects, just by manipulating environmental factors and the use of partnerplants.<br>
                We evaluate the results through advanced technology lab tests, that precicely determine the quantity of different cannabinoids in our experiments. 
                By lab testing we also find out more about pests and disseases affecting our plants.Through constant reasearch and the collection of data we find organic solutions for their prevention.<br><br>
                We are experimenting with all available extraction methods and our products ship with a lab test.<br>
                  #a dummy text</p>
                  <div class="image">
                  <img type=" image/webp" src="../img/sample-lab.jpg"/>
                  </div>
              </div>
         
          </div>
          <div class="strip2">
            <div class="philo">
                  <h3>Automation for the People</h3>
                  <p>If we talk about automation we mean people automating gardening for themselves, not people being automated.<br>
                 One of the main engines of this project is to find affordable and comprehensible solutions that enable everyone to have their own organic automated garden everywhere.<br>
                We believe that many people utilizing our products, growing different plants under different conditions, enables us, all people, to create a huge net of data about our ecosystem that we can use and share and over which we have total control.
                We want everyone to have access to our projects that is why all of them are documented to be imitated and improved.<br><br>
                  #a dummy text</p>
                  <div class="image">
                  <img id= "helper" type=" image/webp" src="../img/sample-spiderpi-helper.svg"/>
                  </div>
              </div>
         
          </div>
          <div class="strip2">
            <div class="philo">
                  <h3>Collective Growth</h3>
                  <p>We choose the business model of a collective for our project.<br>
                    We did start this business in X 2020, our idea was to start small in order not to have large expenses at the beginning, which enables us to make all busines decisions ourselves.<br>
                 We want to have total control over what we are doing and make collective decisions without an investor interfering and forcing us to compromise our values.
                 So our definition of growth is a slow but consitent growth, that lets us step by step realize each of our ideas.<br><br>
                 We want to share our data and every detail about what we are doing.<br>
                 We desire to know more, and so do you, so we are taking the first step by deciding to share all we do and doing it all ourselves.<br>
                  #a dummy text</p>
                  <div class="image">
                  <img type=" image/webp" src="../img/sample-collective.jpg"/>
                  </div>
              </div>
          </div>
          <div class="strip2">
            <div class="products">
                  <h3>Social Media</h3>
                  <div class="social">
                      <h5>Keep in touch !</h5>
                    <div class="instagram">
                        <button id="insta"><a href="#"><img id="gram" type=" image/webp" 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/webp" src="../img/peertube.svg"></a></button>
                        <h5 id="account">@Cannabinieri_Official</h5>
                    </div>
                    <div class="blog">
                        <button id="blog"><a href="#">Blog</a></button>
                    </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@ -1,25 +1,32 @@
 /* small mobile */

 /* Fix overlaps */

 .banner {
    height: 20vw;
    background-color: #ff00ff;
    background-image: url('../img/banner_img.png');
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4vw;
    flex-direction: column;
    justify-content: flex-end;
    height: 87.5vw;
    padding: 0 1vw;
    line-height: 8vw;
    letter-spacing: .125vw;
 }

 .banner h6 {
    color: #fff;
    color: #ff00ff;
    font-family: 'Lato', sans-serif;
    font-size: 5vw;
    border: 1vw solid #ff00ff;
    border-radius: 5vw;
    padding: 2vw 2vw;
 }

 .banner h6 a {
    text-decoration: none;
    color: yellow;
    color: #3dbd92;
 }

 .banner h6 a:active {
@ -68,9 +75,10 @@ img {
    cursor: pointer;;
    align-self: center;
    justify-self: center;
    transition: all .4 ease-in-out;
 }

 .link button:active {
 .link button:active, .link button:hover {
    box-shadow: 0px 0px 10px hsl(300, 100%, 30%);
 }

@ -89,10 +97,12 @@ img {
    grid-column: 1/5;
    grid-row: 2/5;
    padding: 3vh 1vw 0 1vw;
    height: 45vw;
    width: 45vw;
 }

 .link .sub_container p {
    font-size: 3vw;
    font-size: 4.5vw;
    text-align: center;
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
@ -104,19 +114,32 @@ img {
    flex-direction: column;
    align-items: center;
    padding: 1vw 2vw;
    line-height: 4.5vw;
    line-height: 5.5vw;
    letter-spacing: .05vw;
 }

 .link .sub_container p a {
    color: #333;
    text-decoration: none;
    font-size: 4.5vw;
 }

 .link .sub_container p a:active {
    opacity: 60%;
    color: #ff00ff;
 }

 .link .sub_container p a:hover {
    opacity: 60%;
    color: #ff00ff;
 }

 .banner .banner_img {
    height: 80vw;

 }


@media(min-width: 300px) {
    #hemp {
        margin-left: 50vw;
@ -168,8 +191,17 @@ img {
 }
 }

@media(min-width: 600px) {
    
@media(min-width: 700px) {
    .banner {
        height: 47.5vw;
        line-height: 5vw;
        background-size: 60vw;
    }

    .banner h6 {
        font-size: 3vw;
        border: .5vw solid #ff00ff;
    }
 }

 @media(min-width: 800px) {
@ -190,12 +222,24 @@ img {
    }

    .banner {
        height: 10vw;
        height: 32vw;
        line-height: 5vw;
        background-size: 40vw;
        background-position: center;
    }

    .banner h6 {
        font-size: 2vw;
        margin-left: 10vw;
        font-size: 2.25vw;
        border: .45vw solid #ff00ff;
        padding: 1vw 2vw;
    }

    .link .sub_container p {
        font-size: 3vw;
    }

    #small_screen {
        display: none;
    }
 }

@ -229,7 +273,12 @@ img {
    }

    #miner{
        margin-top: 230vw;
        margin-top: 210vw;
    }

    #miner .sub_container {
        width: 68vw;
        height: 40vw;
    }
   
 }
--- a/templates/assets/css/navigation.css
+++ b/templates/assets/css/navigation.css
@ -80,7 +80,8 @@
 }

 #mobile_dropdown ul li li a {
    font-weight: 400;
    font-weight: 300;
    letter-spacing: 1.5vw;
 }

 #mobile_dropdown ul li a:active {
@ -105,20 +106,26 @@
    flex-direction: column;
    align-items: center;
    z-index: 200;
    position: fixed;
    max-height: 30vh;
    margin-top: 5rem;
    min-width: 80%;
    right: 10%;
    border-radius: .2rem;
    background-color: #0cffae;
    box-shadow: 0 0 10px hsl(160, 51%, 80%);
    opacity: 85%;
    transition: all .7 ease;
 }

 #down_3 {
   margin-top: 4rem;
 #down_2, #down_3{
    margin-top: 0;
    box-shadow: 0 0 15px 47px #0cffae;
 }

 #chevron_2, #chevron_3 {
    z-index: 1000;
 }

 #spider_dropdown, #offgrid_dropdown {
    width: 25vw;
 }

 .desktop_navigation {
--- a/templates/assets/css/pages.css
+++ b/templates/assets/css/pages.css
@ -11,7 +11,7 @@ img {
 .content_container {
    display: grid;
    justify-items: center;
    padding: 1vh 1vw;
    padding: 5vh 1vw 2vh 1vw;
 }

 .content_container img {
@ -24,9 +24,10 @@ img {
 .content_container h1 {
    grid-row: 1;
    color: #333;
    font-size: 8vh;
    font-size: 7vh;
    text-transform: uppercase;
    padding: 1vh 0;
    letter-spacing: .15vw;
 }

 .content_container h1 span {
@ -81,6 +82,11 @@ img {
    text-align: center;
 }

 #small_centered {
    font-size: 6vh;
    text-align: center;
 }

@media (min-width: 700px) {
    .content_container p {
        padding-bottom: 6vh;
--- a/templates/assets/css/submit.css
+++ b/templates/assets/css/submit.css
@ -0,0 +1,41 @@
 .container {
    background-color: #05f2a5;
    font-family: 'Lato', sans-serif;;
    background-size: cover;
    background-repeat: no-repeat;
    height: calc(100% - 30vh);
    min-height: 55vh;
    margin: 5vh 5vw;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
 }

 .container h2 {
    color: #fff;
    text-align: center;
    padding: 0 6vw .5vh 6vw;
    font-size: 8.5vw;
    line-height: 7.5vh;
    letter-spacing: 0.045vw;
 }

 .container p {
    color: #333;
    letter-spacing: 0.045vw;
 }

 .container a {
    text-decoration: none;
    background-color: #fff;
    padding: 2vh 6vw;
    color: #3dbd92;
    letter-spacing: 0.045vw;
    font-weight: 600;
 }

 .container a:active, .container a:hover {
    box-shadow: 0px 0px 10px #333;
    color: hsl(160,51%, 39%);
 }
--- a/templates/assets/img/ValleyOfTheFlowers.JPG
+++ b/templates/assets/img/ValleyOfTheFlowers.JPG
--- a/templates/assets/img/baby_plants.JPG
+++ b/templates/assets/img/baby_plants.JPG
--- a/templates/assets/img/banner_img.png
+++ b/templates/assets/img/banner_img.png
--- a/templates/assets/img/canna_candy.JPG
+++ b/templates/assets/img/canna_candy.JPG
--- a/templates/assets/img/crude.jpg
+++ b/templates/assets/img/crude.jpg
--- a/templates/assets/img/cube_space.png
+++ b/templates/assets/img/cube_space.png
--- a/templates/assets/img/flower_square.JPG
+++ b/templates/assets/img/flower_square.JPG
--- a/templates/assets/img/hemp.JPG
+++ b/templates/assets/img/hemp.JPG
--- a/templates/assets/img/hemp_square.JPG
+++ b/templates/assets/img/hemp_square.JPG
--- a/templates/assets/img/hero.svg
+++ b/templates/assets/img/hero.svg
@ -4,9 +4,9 @@
 <svg
   inkscape:version="1.1 (ce6663b3b7, 2021-05-25)"
   sodipodi:docname="hero.svg"
   viewBox="0 0 420 1024"
   height="1024"
   width="420"
   viewBox="0 0 500 500"
   height="500"
   width="500"
   id="svg2"
   version="1.1"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@ -29,16 +29,16 @@
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     showgrid="true"
     inkscape:zoom="0.42951213"
     inkscape:cx="230.49407"
     inkscape:cy="697.30277"
     inkscape:zoom="0.60742188"
     inkscape:cx="237.89067"
     inkscape:cy="315.26688"
     inkscape:window-width="1368"
     inkscape:window-height="836"
     inkscape:window-x="72"
     inkscape:window-y="27"
     inkscape:window-maximized="1"
     inkscape:current-layer="g8"
     width="420px"
     inkscape:current-layer="g1981"
     width="500px"
     showguides="true"
     inkscape:guide-bbox="true">
    <inkscape:grid
@ -54,266 +54,313 @@
     inkscape:label="Image"
     id="g8">
    <g
       id="edges"
       class="edges">
      <path
         style="fill:none;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 240,160 c 40,120 40,120 40,120 v 0"
         id="path6274" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 270,400 c 40,120 40,120 40,120 v 0"
         id="path6274-9" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 235,610 c 40,120 40,120 40,120 v 0"
         id="path6274-9-1" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 100,840 c 40,-120 40,-120 40,-120 v 0"
         id="path6274-9-2" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 115,610 c 40,-120 40,-120 40,-120 v 0"
         id="path6274-9-2-0" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 110,410 c 40,-120 40,-120 40,-120 v 0"
         id="path6274-9-2-9" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="M 132.02042,420 C 230,340 230,340 230,340 v 0"
         id="path6274-9-2-3" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 135,620 c 97.97958,-80 97.97958,-80 97.97958,-80 v 0"
         id="path6274-9-2-3-6" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="M 271.35528,285 C 160,225 160,225 160,225 v 0"
         id="path6274-9-2-3-6-0" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 160,220 c 40,-60 40,-60 40,-60 v 0"
         id="path6274-9-2-0-6" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 120,525 c 20,310 20,310 20,310 v 0 0 0"
         id="path6751" />
      <path
         style="fill:#fe00fe;stroke:#fe00fe;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.98039216;fill-opacity:0.98039216;stroke-miterlimit:4;stroke-dasharray:none"
         d="m 210,165 c -80,250 -80,250 -80,250 v 0 0"
         id="path6867" />
    </g>
    <g
       id="g30087"
       style="display:inline"
       transform="translate(-453.36711,81.041712)">
       id="g30372"
       transform="translate(-1.35412,0.583899)">
      <g
         id="g30372"
         transform="translate(454.16754,-82.856521)">
         id="nodes">
        <g
           id="nodes">
           id="g1981">
          <g
             id="node1"
             class="nodes">
            <path
               id="path57"
               style="opacity:0.980099;fill:none;stroke:#fe00fe;stroke-width:7;stroke-linecap:round;stroke-linejoin:bevel;paint-order:stroke fill markers"
               transform="translate(1.6788805,2.2155349)"
               d="m 277.52069,99.599274 a 62.618,62.618355 0 0 1 -62.618,62.618356 62.618,62.618355 0 0 1 -62.618,-62.618356 62.618,62.618355 0 0 1 62.618,-62.618355 62.618,62.618355 0 0 1 62.618,62.618355 z" />
             id="g22190"
             transform="matrix(0,-0.50741751,-0.50741751,0,504.91494,217.40263)">
            <g
               id="g29426">
              <path
                 id="path271"
                 style="opacity:1;fill:#fe00fe;fill-opacity:0.980392;stroke:#fe00fe;stroke-width:3.02535;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:0.980392;paint-order:stroke fill markers"
                 d="m 313.5151,45.825661 a 24.6134,24.6134 0 0 1 -24.6134,24.613399 24.6134,24.6134 0 0 1 -24.6134,-24.613399 24.6134,24.6134 0 0 1 24.6134,-24.6134 24.6134,24.6134 0 0 1 24.6134,24.6134 z" />
              <g
                 aria-label="i"
                 id="text23481"
                 style="font-size:40px;line-height:1.25;font-family:Lato;-inkscape-font-specification:Lato;fill:#ffffff;stroke:#000000;stroke-opacity:0">
                <path
                   d="m 291.62538,38.266581 v 20.26 h -3.56 v -20.26 z m 0.76,-6.36 q 0,0.52 -0.22,0.98 -0.2,0.44 -0.56,0.8 -0.34,0.34 -0.82,0.54 -0.46,0.2 -0.98,0.2 -0.52,0 -0.98,-0.2 -0.44,-0.2 -0.78,-0.54 -0.34,-0.36 -0.54,-0.8 -0.2,-0.46 -0.2,-0.98 0,-0.52 0.2,-0.98 0.2,-0.48 0.54,-0.82 0.34,-0.36 0.78,-0.56 0.46,-0.2 0.98,-0.2 0.52,0 0.98,0.2 0.48,0.2 0.82,0.56 0.36,0.34 0.56,0.82 0.22,0.46 0.22,0.98 z"
                   id="path30376" />
              </g>
               id="edges"
               class="edges"
               transform="translate(1.35412,-0.583899)"
               style="stroke:#000000;stroke-opacity:0.716206">
              <path
                 style="fill:none;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 240,160 c 40,120 40,120 40,120 v 0"
                 id="path6274" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 270,400 c 40,120 40,120 40,120 v 0"
                 id="path6274-9" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 235,610 c 40,120 40,120 40,120 v 0"
                 id="path6274-9-1" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 100,840 c 40,-120 40,-120 40,-120 v 0"
                 id="path6274-9-2" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 115,610 c 40,-120 40,-120 40,-120 v 0"
                 id="path6274-9-2-0" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 110,410 c 40,-120 40,-120 40,-120 v 0"
                 id="path6274-9-2-9" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="M 132.02042,420 C 230,340 230,340 230,340 v 0"
                 id="path6274-9-2-3" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 135,620 c 97.97958,-80 97.97958,-80 97.97958,-80 v 0"
                 id="path6274-9-2-3-6" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="M 271.35528,285 C 160,225 160,225 160,225 v 0"
                 id="path6274-9-2-3-6-0" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 160,220 c 40,-60 40,-60 40,-60 v 0"
                 id="path6274-9-2-0-6" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 120,525 c 20,310 20,310 20,310 v 0 0 0"
                 id="path6751" />
              <path
                 style="fill:#fe00fe;fill-opacity:0.980392;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.716206"
                 d="m 210,165 c -80,250 -80,250 -80,250 v 0 0"
                 id="path6867" />
            </g>
          </g>
          <g
             id="node2"
             class="nodes">
            <path
               id="path57-3"
               style="opacity:0.980099;fill:none;stroke:#fe00fe;stroke-width:7;stroke-linecap:round;stroke-linejoin:bevel;paint-order:stroke fill markers"
               transform="translate(1.6788805,2.2155349)"
               d="m 166.46417,246.44484 a 62.618355,62.618355 0 0 1 -62.61835,62.61835 62.618355,62.618355 0 0 1 -62.618357,-62.61835 62.618355,62.618355 0 0 1 62.618357,-62.61836 62.618355,62.618355 0 0 1 62.61835,62.61836 z" />
               id="path57"
               style="opacity:1;fill:none;stroke:#3dbd92;stroke-width:7;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers"
               d="m 279.19957,101.81481 a 62.618,62.618355 0 0 1 -62.618,62.61835 62.618,62.618355 0 0 1 -62.618,-62.61835 62.618,62.618355 0 0 1 62.618,-62.618356 62.618,62.618355 0 0 1 62.618,62.618356 z" />
            <g
               id="g29426-2"
               transform="translate(-216.71126,120.88952)">
              <path
                 id="path271-8"
                 style="opacity:1;fill:#fe00fe;fill-opacity:0.980392;stroke:#fe00fe;stroke-width:3.02535;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:0.980392;paint-order:stroke fill markers"
                 d="m 313.5151,45.825661 a 24.6134,24.6134 0 0 1 -24.6134,24.613399 24.6134,24.6134 0 0 1 -24.6134,-24.613399 24.6134,24.6134 0 0 1 24.6134,-24.6134 24.6134,24.6134 0 0 1 24.6134,24.6134 z" />
              <g
                 aria-label="i"
                 id="text23481-4"
                 style="font-size:40px;line-height:1.25;font-family:Lato;-inkscape-font-specification:Lato;fill:#ffffff;stroke:#000000;stroke-opacity:0">
                <path
                   d="m 291.62538,38.266581 v 20.26 h -3.56 v -20.26 z m 0.76,-6.36 q 0,0.52 -0.22,0.98 -0.2,0.44 -0.56,0.8 -0.34,0.34 -0.82,0.54 -0.46,0.2 -0.98,0.2 -0.52,0 -0.98,-0.2 -0.44,-0.2 -0.78,-0.54 -0.34,-0.36 -0.54,-0.8 -0.2,-0.46 -0.2,-0.98 0,-0.52 0.2,-0.98 0.2,-0.48 0.54,-0.82 0.34,-0.36 0.78,-0.56 0.46,-0.2 0.98,-0.2 0.52,0 0.98,0.2 0.48,0.2 0.82,0.56 0.36,0.34 0.56,0.82 0.22,0.46 0.22,0.98 z"
                   id="path30381" />
              </g>
               id="node2"
               class="nodes"
               style="stroke:#3dbd92;stroke-opacity:1">
              <path
                 id="path57-3"
                 style="opacity:0.980099;fill:none;stroke:#3dbd92;stroke-width:7;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers"
                 transform="translate(1.6788805,2.2155349)"
                 d="m 166.46417,246.44484 a 62.618355,62.618355 0 0 1 -62.61835,62.61835 62.618355,62.618355 0 0 1 -62.618357,-62.61835 62.618355,62.618355 0 0 1 62.618357,-62.61836 62.618355,62.618355 0 0 1 62.61835,62.61836 z" />
            </g>
          </g>
          <g
             id="node3"
             class="nodes">
            <path
               id="path57-3-6"
               style="opacity:0.980099;fill:none;stroke:#fe00fe;stroke-width:7;stroke-linecap:round;stroke-linejoin:bevel;paint-order:stroke fill markers"
               transform="translate(1.6788805,2.2155349)"
               d="m 353.17313,341.96844 a 62.618355,62.618355 0 0 1 -62.61835,62.61836 62.618355,62.618355 0 0 1 -62.61836,-62.61836 62.618355,62.618355 0 0 1 62.61836,-62.61835 62.618355,62.618355 0 0 1 62.61835,62.61835 z" />
            <g
               id="g29426-24"
               transform="translate(77.767084,244.32994)">
              <path
                 id="path271-0"
                 style="opacity:1;fill:#fe00fe;fill-opacity:0.980392;stroke:#fe00fe;stroke-width:3.02535;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:0.980392;paint-order:stroke fill markers"
                 d="m 313.5151,45.825661 a 24.6134,24.6134 0 0 1 -24.6134,24.613399 24.6134,24.6134 0 0 1 -24.6134,-24.613399 24.6134,24.6134 0 0 1 24.6134,-24.6134 24.6134,24.6134 0 0 1 24.6134,24.6134 z" />
              <g
                 aria-label="i"
                 id="text23481-6"
                 style="font-size:40px;line-height:1.25;font-family:Lato;-inkscape-font-specification:Lato;fill:#ffffff;stroke:#000000;stroke-opacity:0">
                <path
                   d="m 291.62538,38.266581 v 20.26 h -3.56 v -20.26 z m 0.76,-6.36 q 0,0.52 -0.22,0.98 -0.2,0.44 -0.56,0.8 -0.34,0.34 -0.82,0.54 -0.46,0.2 -0.98,0.2 -0.52,0 -0.98,-0.2 -0.44,-0.2 -0.78,-0.54 -0.34,-0.36 -0.54,-0.8 -0.2,-0.46 -0.2,-0.98 0,-0.52 0.2,-0.98 0.2,-0.48 0.54,-0.82 0.34,-0.36 0.78,-0.56 0.46,-0.2 0.98,-0.2 0.52,0 0.98,0.2 0.48,0.2 0.82,0.56 0.36,0.34 0.56,0.82 0.22,0.46 0.22,0.98 z"
                   id="path30386" />
              </g>
            </g>
          </g>
          <g
             id="node4"
             class="nodes">
               style="opacity:0.980099;fill:none;stroke:#3dbd92;stroke-width:7;stroke-linecap:round;stroke-linejoin:bevel;stroke-opacity:1;paint-order:stroke fill markers"
               d="m 354.85201,344.18397 a 62.618355,62.618355 0 0 1 -62.61835,62.61836 62.618355,62.618355 0 0 1 -62.61836,-62.61836 62.618355,62.618355 0 0 1 62.61836,-62.61835 62.618355,62.618355 0 0 1 62.61835,62.61835 z" />
            <path
               id="path57-3-7"
               style="opacity:0.980099;fill:none;stroke:#fe00fe;stroke-width:7;stroke-linecap:round;stroke-linejoin:bevel;paint-order:stroke fill markers"
               transform="translate(1.6788805,2.2155349)"
               d="M 159.84685,468.05493 A 62.618355,62.618355 0 0 1 97.228493,530.67329 62.618355,62.618355 0 0 1 34.610138,468.05493 62.618355,62.618355 0 0 1