dec17

src/build_actix/route.rs

@@ -133,5 +133,31 @@ pub async fn off( req: HttpRequest ) -> Result {
     ).await
 }
 
+// test
+// load info template when click on link in svg
+
+pub async fn robot( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    // if response Ok return HttpResponseBuilder
+    HttpResponse::Ok()
+    // set response content type html
+    .content_type("text/html")
+    // set response body to template context
+    .body(
+        // render template context
+        template::TplRobot {
+            // lang to value of Accept-Language header
+            lang : &template::get_lang(&req),
+        }
+        
+        // render template context into String
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
+
 
 

src/build_actix/template.rs

@@ -12,9 +12,6 @@ pub struct TplIndex<'a> {
     pub lang: &'a str,
 }
 
-
-
-
 #[derive(Template)]
 // define path to use template in
 #[template(path="hemp.html")]
@@ -55,6 +52,18 @@ pub struct TplOff<'a> {
     pub lang: &'a str,
 }
 
+
+// test
+// info template within index.html
+
+#[derive(Template)]
+#[template(path="info.html")]
+pub struct TplRobot<'a> {
+    pub lang: &'a str,
+}
+
+
+
 // linked to error template
 #[derive(Template)]
 #[template(path="error.html")]

src/main.rs

@@ -23,6 +23,10 @@ async fn main() -> std::io::Result<()> {
             .route("/kaoscube", web::get().to(route::cube))
             .route("/cyberpreneur", web::get().to(route::cyber))
             .route("/offgrid", web::get().to(route::off))
+
+            // test
+            // route of link in svg in index.html
+            .route("/robot", web::get().to(route::robot))
         })
         .bind("0.0.0.0:5000")?
         .run()

templates/assets/css/box.css

@@ -1,12 +1,176 @@
-.box {
-    z-index: 1000;
+ /* Test */
+ /* only load with child template */
+
+ .mobile_placeholder {
+    display: flex;
+    justify-content: center;
+}
+
+.open {
+  position: fixed;
+  height: 70vh;
+  width: 90vw;
+  background-color: #fff;
+  top: 25vh;
+  display: grid;
+  grid-template-rows: repeat(4, 1fr);
+  border-style: solid;
+  border-image: linear-gradient(#BDD4E7, #8693AB) 30;
+}
+
+.open .box {
+  /* background-image: url('/assets/img/spider_out_bw.webp'); */
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: inherit;
+  width: inherit;
+  opacity: 20%;
+  grid-row: 1/5;
+}
+
+.content {
+  height: inherit;
+  width: inherit;
+  display: grid;
+  grid-template-rows: .5fr .25fr 1fr .45fr;
+}
+
+.content h2 {
+  grid-row: 1;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  font-size: 6.5vh;
+  margin: 6vh 0 4vh 0;
+}
+
+.content h3 {
+  grid-row: 2;
+  display: grid;
+  text-transform: uppercase;
+  font-size: 3vh;
+  margin: 0;
+  line-height: 5vh;
+  text-align: center;
+}
+
+.content p {
+  font-size: 1.5vh;
+  text-align: center;
+  line-height: 3.5vh;
+  margin-top: 2vh;
+}
+
+.content a {
+  grid-row: 4;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  height: 4vh;
+  width: 10vw;
+  width: 30vw;
+  border: .5vw solid #000;
+  justify-self: center;
+  align-self: center;
+  margin-top: 2vh;
+  color: #000;
+  font-size: 1.95vh;
+  cursor: pointer;
+  z-index: 2;
+  background-position: right bottom;
+  transition: all .75s ease-out;
+}
+
+.content a:hover {
+  background: linear-gradient(to right, #8693AB 5%, #BDD4E7 95%);
+  background-size: 200% 100%;
+  background-position: left bottom;
+  border: .5vw solid #8693AB;
+}
+
+
+
+.close {
+    height: 10vh;
+    width: auto;
+    align-self: flex-start;
+    color: #e5e7e6;
+    position: fixed;
+    top: 15vh;
+    left: 80vw;
+}
+
+input {
+    height: 20vw;
+    width: 20vh;
+    z-index: 200;
+    opacity: 0%;
+    cursor: pointer;
     position: fixed;
+    top: 15vh;
+    left: 80vw;
+}
+
+input:checked ~ .open {
+    display: none;
+}
+
+input:checked ~ .close {
+  display: none;
+}
+
+input:hover ~ .close  {
+  animation: shine 4s ease-in forwards;
+
+}
+
+@keyframes shine {
+  0% {
+      stroke: url('#myGradient');
+
+     
+      }
+      50% {
+        stroke: url('#myGradient2');
+        
+      }
+      100% {
+          stroke: url('#myGradient');
+  }
+}
+
+@media (min-height: 750px) {
+  .open {
     max-height: 60vh;
-    max-width: 80vw;
-    top: 680px;
-    left: 155px;
-    display: flex;
-    margin: 0;
-    background-color: fuchsia;
-    opacity: 85%;
-}
+  }
+}
+
+@media (min-height: 800px) {
+  .open {
+    max-height: 55vh;
+  }
+}
+
+@media (min-height: 880px) {
+  .open {
+    max-height: 45vh;
+  }
+}
+
+@media (min-height: 1000px) {
+  .open {
+    max-height: 40vh;
+  }
+}
+
+
+@media (min-height: 1070px) {
+  .open {
+    max-height: 35vh;
+  }
+}
+
+
+
+

templates/assets/css/nav.css

@@ -107,6 +107,8 @@
     z-index: 3;
     cursor: pointer;
     opacity: 0;
+    top: unset;
+    left: unset;
 }
 
 .navigation input:checked ~ .hamburger {

templates/assets/css/nojs_net.css

@@ -19,7 +19,7 @@ svg {
 }
 
 .nodes {
-    stroke: #afb3b6;
+    stroke: #8693AB;
 }
 
 .nodes:active, .nodes:hover {
@@ -35,7 +35,7 @@ svg {
  @keyframes svg_pulse {
     0% {
        transform: scale(1);
-       stroke: #00ffef;
+       stroke: #8693AB;
     }
 
     20% {
@@ -44,7 +44,7 @@ svg {
 
     80% {
         transform: scale(1);
-        stroke: #7df9ff;
+        stroke: #BDD4E7;
     }
 
     80% {
@@ -53,7 +53,7 @@ svg {
 
     100% {
         transform: scale(1);
-        stroke: #00ffef;
+        stroke: #8693AB;
     }
 }
 
@@ -149,83 +149,28 @@ svg {
 
 @keyframes glowing {
     0% {
-    stroke: #00ffef;
+    stroke: #8693AB;
    
     }
     50% {
-      stroke: #7df9ff;
+      stroke: #BDD4E7;
       
     }
     100% {
-        stroke: #00ffef;
+        stroke: #8693AB;
     }
   }
 
 
-  /* Test */
-
-  .mobile_placeholder {
-      display: flex;
-      justify-content: center;
-  }
-
-  .open {
-    position: fixed;
-    height: 50vh;
-    width: 70vw;
-    background: #e5e7e6;
-    top: 25vh;
-    display: flex;
-  }
-
-  .close {
-      height: 10vh;
-      width: auto;
-      align-self: flex-start;
-      color: #e5e7e6;
-      position: fixed;
-      top: 15vh;
-  }
-
-  
-
-  input {
-      height: 20vw;
-      width: 20vh;
-      z-index: 200;
-      opacity: 0%;
-      cursor: pointer;
-      position: fixed;
-      top: 15vh;
-  }
-
-  input:checked ~ .open {
-      display: none;
-  }
-
-  input:checked ~ .close {
-    display: none;
-}
-
-input:hover ~ .close  {
-    animation: shine 4s ease-in forwards;
-
-}
-
-@keyframes shine {
-    0% {
-        stroke: url('#myGradient');
-
-       
-        }
-        50% {
-          stroke: url('#myGradient2');
-          
-        }
-        100% {
-            stroke: url('#myGradient');
+@media (min-width: 768px) {
+    svg {
+        max-height: 100vh;
+        max-width: 65vw;
+      
     }
 }
+
+ 
     
 
 

templates/base.html

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

templates/index.html

@@ -50,8 +50,8 @@
         <g class="group_1">
             <path id="edge_1" class="edges" d="m33.037 28.44c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.6458"/>
             <path id="edge_2" class="edges" d="m21.599 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
-
-            <a href="/spider_info">
+        <!-- on  click open info template -->
+            <a href="/robot">
                 <ellipse id="circle_one" class="nodes" cx="35" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#spiderpi)"/>
             </a>
         </g>
@@ -90,29 +90,9 @@
     </g>
     </svg>
 
-<div class="mobile_placeholder">
-    <!--info windows-->
-    
-    <input type="checkbox" class="toggle_info">
-    <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-            <linearGradient id="myGradient" gradientTransform="rotate(90)">
-              <stop offset="5%"  stop-color="#8693AB" />
-              <stop offset="95%" stop-color="#BDD4E7" />
-            </linearGradient>
-
-            <linearGradient id="myGradient2" gradientTransform="rotate(45)">
-                <stop offset="5%"  stop-color="#BDD4E7" />
-                <stop offset="95%" stop-color="#8693AB" />
-              </linearGradient>
-          </defs>
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-    </svg>
-    <div class="open"></div>
-    {# {% block child %} {% endblock %} #}
+{% block child %} {% endblock %}
 
 </div>
-</div>
 
 <!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->
 

templates/info.html

@@ -1,8 +1,41 @@
 {% extends "index.html" %}
-{% block head %}
-{{ super() }}
-<link rel="stylesheet" href="box.css"/>
-{% endbock%}
+
+<!-- load into index template -->
 {% block child %}
-<h1>Hello from child template 1 !</h1>
+<div class="mobile_placeholder">
+    <form action="/" method="get">
+        <input type="submit">
+            <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+                    <stop offset="5%"  stop-color="#8693AB" />
+                    <stop offset="95%" stop-color="#BDD4E7" />
+                    </linearGradient>
+
+                    <linearGradient id="myGradient2" gradientTransform="rotate(45)">
+                        <stop offset="5%"  stop-color="#BDD4E7" />
+                        <stop offset="95%" stop-color="#8693AB" />
+                    </linearGradient>
+                </defs>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </form>
+    <div class="open">
+        {# Test - add language handling#}
+        <div class="box">
+        </div>
+        <div class="content">
+            <h2>Tekla</h2>
+            <h3>Automatic Biodynamic Gardening for Everyone</h3>
+            <p>Tekla is a garden robot that makes automatic and biodynamic farming accessible for everyone.
+                The low-tech robot gathers informational and relational data in natural environments.
+                Communicating with the TeklApp it determines which organisms work best together in any given environment.
+                All Spiders communicate trough the network the Kaos Cube spins.
+                Tekla monitors the plants and takes care of their needs until it's time for it to harvest the free organic and local crops.
+            </p>
+            <a href="/spider">MORE</a>
+        </div>
+    </div>
+
+</div>
 {% endblock%}