dec12

src/build_actix/route.rs

@@ -14,7 +14,7 @@ pub async fn index( req: HttpRequest ) -> Result<HttpResponse, Error> {
     .content_type("text/html")
     // set response body to template context
     .body(
-        // render template context
+        // render index template
         template::TplIndex {
             // lang to value of Accept-Language header
             lang : &template::get_lang(&req),
@@ -132,3 +132,6 @@ pub async fn off( req: HttpRequest ) -> Result<HttpResponse, Error> {
         })?,
     ).await
 }
+
+
+

src/build_actix/template.rs

@@ -8,10 +8,13 @@ use actix_web::HttpRequest;
 // define path to use template in
 #[template(path="index.html")]
 pub struct TplIndex<'a> {
-    // replace with lang
+   
     pub lang: &'a str,
 }
 
+
+
+
 #[derive(Template)]
 // define path to use template in
 #[template(path="hemp.html")]

templates/assets/css/box.css

@@ -0,0 +1,12 @@
+.box {
+    z-index: 1000;
+    position: fixed;
+    max-height: 60vh;
+    max-width: 80vw;
+    top: 680px;
+    left: 155px;
+    display: flex;
+    margin: 0;
+    background-color: fuchsia;
+    opacity: 85%;
+}

templates/assets/css/net.css

@@ -1,77 +0,0 @@
-svg {
-  max-height: 90vh;
-  width: 100%;
-}
-
-.link {
-    stroke: #000;
-    stroke-width: 1.5px;
-  }
-  
-  .node {
-    cursor: move;
-    stroke: #000;
-    stroke-width: .07vw;
-    fill-rule: evenodd;
-  }
-  
-  .node.fixed {
-    stroke: #30dfdf;
-    stroke-width: .05vw;
-  }
-
-
-
-  /* box */
-
-  div#box {
-    position: absolute;
-    pointer-events: none;
-    top: 0px;
-    right: 0px;
-}
-
-/* visibility box */
-
-div.box_off {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-div.box_on {
-  visibility: visible;
-  pointer-events: all;
-}
-
-/* box content */
-
-div#box_content {
-  position: relative;
-   /* cursor: text; change to something cool */
-  width: 50vw;
-  height: 50vh;
-  z-index: 1000;
-  background: #000;
-  opacity: 85%;
-  border: solid .2vw #30dfdf;
-  border-radius: 8px;    
-  font-family: Helvetica, sans-serif; /* change */
-  font-size: 2vh;    
-  padding: 2vh 2vw;
-  text-align: right;
-  color: #fff;
-}
-
-
-/* !! somehow adjust screenwidth for desktop (in js */
-/* @media(min-width: 768px) {
-
-   #mobile_network {
-     display: none;
-   }
-} */
-
-
-
-
-  

templates/assets/css/nojs_net.css

@@ -25,6 +25,11 @@ svg {
 .nodes:active, .nodes:hover {
    
     animation: svg_pulse 2s ease-in-out forwards; 
+    
+}
+
+#circle_one:active {
+    opacity: 100% !important;
 }
 
  @keyframes svg_pulse {
@@ -58,27 +63,88 @@ svg {
     animation: glowing 2s ease-in forwards;
 }
 
+.group_1:active > #edge_1 {
+    animation: glowing 2s ease-in forwards;
+}
+
+
 .group_1:hover > #edge_2 {
     animation: glowing 2s ease-in forwards;
   
 }
 
+.group_1:active > #edge_2 {
+    animation: glowing 2s ease-in forwards;
+  
+}
+
+
 .group_2:hover > #edge_3 {
     animation: glowing 2s ease-in forwards;
 }
 
+.group_2:active > #edge_3 {
+    animation: glowing 2s ease-in forwards;
+}
+
 .group_2:hover > #edge_4 {
     animation: glowing 2s ease-in forwards;
 }
 
+.group_2:active > #edge_4 {
+    animation: glowing 2s ease-in forwards;
+}
+
 .group_2:hover > #edge_5 {
     animation: glowing 2s ease-in forwards;
 }
 
+.group_2:active > #edge_5 {
+    animation: glowing 2s ease-in forwards;
+}
+
 .group_2:hover > #edge_6 {
     animation: glowing 2s ease-in forwards;
 }
 
+.group_2:active > #edge_6 {
+    animation: glowing 2s ease-in forwards;
+}
+
+
+
+.group_3:hover > #edge_7 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_3:active > #edge_7 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_3:hover > #edge_8 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_3:active > #edge_8 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_4:hover > #edge_9 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_4:active > #edge_9 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_5:hover > #edge_10 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_5:active > #edge_10 {
+    animation: glowing 2s ease-in forwards;
+}
+
 
 
 @keyframes glowing {

templates/base.html

@@ -12,7 +12,6 @@
             <link rel="stylesheet" href="/assets/css/base.css" />
             <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>
         {% endblock %}

templates/index.html

@@ -14,6 +14,36 @@
             </pattern>  
         </defs>
 
+        <defs>
+            <pattern id="permapp" height="100%" width="100%">
+                <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="cyber" height="100%" width="100%">
+                <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="kaos" height="100%" width="100%">
+                <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="hemp" height="100%" width="100%">
+                <image href="/assets/img/hemp.webp" width="30" height="45"></image>
+            </pattern>  
+        </defs>
+
+        <defs>
+            <pattern id="machina" height="100%" width="100%">
+                <image href="/assets/img/boat_construction.webp" width="26" height="31"></image>
+            </pattern>  
+        </defs>
+
         <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
         <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
         
@@ -22,7 +52,7 @@
             <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">
-                <ellipse id="circle_one" class="nodes" cx="35" cy="27" rx="13.5" ry="13.5" style="paint-order:stroke fill markers" fill="url(#spiderpi)"/>
+                <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>
         
@@ -31,49 +61,42 @@
         <path id="edge_6" class="edges" d="m18.277 93.674c38.021-40.006 37.999-40.007 37.999-40.007" stroke-width=".52917"/>
         <path id="edge_4" class="edges" d="m69.403 85.356c-13.122-31.702-13.127-31.689-13.127-31.689" stroke-width="3.4396"/>
         <path id="edge_5" class="edges" d="m50.728 121.44c2.3527-71.49 2.3361-71.474 2.3361-71.474" stroke-width=".48836px"/>
-        <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:stroke fill markers"/>
+        <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:fill stroke markers" fill="url(#permapp)"/>
         </g>
 
-
+        <g class="group_3">
-
-        
-        
             <path id="edge_7" class="edges" d="m30.477 64.503c29.347 29.791 29.347 29.774 29.347 29.774" stroke-width=".52917"/>
-        <path id="edge_10" class="edges" d="m23.407 96.406c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.9104"/>
-        
             <path id="edge_8" class="edges" d="m23.453 62.106c28.366 67.295 28.374 67.263 28.374 67.263" stroke-width=".55417px"/>
+            <circle id="circle_3" class="nodes" cx="20" cy="60" r="13" style="paint-order: fill stroke markers" fill="url(#cyber)"/>
+        </g>
 
-       
+        <g class="group_4">
-        
             <path id="edge_9" class="edges" d="m26.119 94.06c34.309 0.3248 34.299 0.31493 34.299 0.31493" stroke-width="2.6458"/>
+            <circle id="circle_4" class="nodes" cx="65.545" cy="91.148" r="12" style="paint-order: fill stroke markers" fill="url(#kaos)"/>
+        </g>
 
-       
+        <g class="group_5">
-        
+            <path id="edge_10" class="edges" d="m23.407 96.406c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.9104"/>
-
+            <a id="link_1" href="/spider" style="paint-order: fill stroke markers">
-
+                <circle id="circle_5" class="nodes" cx="20.734" cy="95.501" r="12.5" style="paint-order: fill stroke markers" fill="url(#hemp)"/>
-    <a id="link_1" href="/spider">
-        <circle id="circle_5" class="nodes" cx="20.734" cy="95.501" r="12.5"  stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".1" style="paint-order:stroke fill markers"/>
             </a>
+        </g>
 
-    <circle id="circle_4" class="nodes" cx="65.545" cy="91.148" r="12" fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".1" style="paint-order:stroke fill markers"/>
+        <circle id="circle_6" class="nodes" cx="50" cy="120" r="12.5" style="paint-order: fill stroke markers" fill="url(#machina)"/>
     </g>
 
     <g fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".12003">
-    <!--load spider_info template in placeholder-->
-   
-
-    
-    <circle id="circle_3" class="nodes" cx="55.416" cy="181.23" r="15" style="paint-order:stroke fill markers"/>
-    <circle id="circle_6" class="nodes" cx="85.363" cy="257.04" r="14" style="paint-order:stroke fill markers"/>
     </g>
     </g>
     </svg>
 
 <div class="mobile_placeholder">
-    <!--inheritance-->
+    
 </div>
 </div>
 
+<!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->
+
 
 
 {% endblock %}

templates/info.html

@@ -0,0 +1,11 @@
+{% extends "index.html" %}
+{% block head }
+<link rel="stylesheet" href="/assets/css/box.css"/>
+{% endblock %}
+
+{%block info}
+<div class="box">
+    
+    <img src="/assets/img/Logo.svg" alt="Logo" />
+</div>
+{% endblock %}