nojs

templates/assets/css/nojs_net.css

@@ -0,0 +1,107 @@
+#mobile {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 85vh;
+}
+
+svg {
+    width: 95%;
+    height: auto;
+    position: absolute;
+    align-self: center;
+}
+
+
+.edges {
+    stroke: #000;
+    stroke-width: 1%;
+}
+
+.nodes {
+    stroke: #afb3b6;
+}
+
+.nodes:active, .nodes:hover {
+   
+    animation: svg_pulse 2s ease-in-out forwards;  
+}
+
+ @keyframes svg_pulse {
+    0% {
+       transform: scale(1);
+       stroke: #00ffef;
+    }
+
+    20% {
+        transform: scale(1.01);
+    }
+
+    80% {
+        transform: scale(1);
+        stroke: #7df9ff;
+    }
+
+    80% {
+        transform: scale(1.01);
+    }
+
+    100% {
+        transform: scale(1);
+        stroke: #00ffef;
+    }
+}
+
+
+
+.group_1:hover > #edge_1 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_1:hover > #edge_2 {
+    animation: glowing 2s ease-in forwards;
+  
+}
+
+.group_2:hover > #edge_3 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_2:hover > #edge_4 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_2:hover > #edge_5 {
+    animation: glowing 2s ease-in forwards;
+}
+
+.group_2:hover > #edge_6 {
+    animation: glowing 2s ease-in forwards;
+}
+
+
+
+@keyframes glowing {
+    0% {
+    stroke: #00ffef;
+   
+    }
+    50% {
+      stroke: #7df9ff;
+      
+    }
+    100% {
+        stroke: #00ffef;
+    }
+  }
+
+
+
+
+
+
+ 
+  
+
+
+

templates/assets/js/net.js

@@ -49,7 +49,7 @@ const svg = d3.select("#mobile_network").append("svg").attr("viewBox", "0, 0, 10
 
 
 const node1 = svg.select("#hemp")
-    .attr("fill", "url(#imgHemp)")
+    .attr("fill", "url(#imgHemp)");
 
 const node2 = svg.select("#permapp")
     .attr("fill", "url(#imgPermapp)");

templates/base.html

@@ -12,7 +12,8 @@
             <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/net.css"/>
+            
+            <link rel="stylesheet" href="/assets/css/nojs_net.css" />
             <title>Cannabinieri</title>
         {% endblock %}
     </head>

templates/index-js.html

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

templates/index.html

@@ -1,13 +1,79 @@
 {% extends "base.html" %}
 {% block content %}
-<div id="mobile_network"></div>
-<div id="box" class ="box_off">
-    <div id ="box_content">
-        <h1 id ="title">Test</h1>
-        <p id="description"></p>
-        <a id="page_link"></a>
-    </div>
+<!--nodes in svg as links-->
+<!--animation with CSS-->
+<!--nodes load template based on get request on click-->
+<!--content(info) is loaded into placeholder in template-->
+<!--actix get div and load on click-->
+<div id="mobile">
+    <svg id="a" width="320" height="568" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+        <defs>
+            <pattern id="spiderpi" height="100%" width="100%">
+                <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
+            </pattern>  
+        </defs>
+
+        <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
+        <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
+        
+        <g class="group_1">
+            <path id="edge_1" class="edges" d="m33.037 28.44c23.239 25.242 23.239 25.228 23.239 25.228" stroke-width="2.6458"/>
+            <path id="edge_2" class="edges" d="m21.599 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
+
+            <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)"/>
+            </a>
+        </g>
+        
+        <g class="group_2">
+        <path id="edge_3" class="edges" d="m24.862 67.439c31.427-13.767 31.414-13.772 31.414-13.772" stroke-width="2.6458"/>
+        <path id="edge_6" class="edges" d="m18.277 93.674c38.021-40.006 37.999-40.007 37.999-40.007" stroke-width=".52917"/>
+        <path id="edge_4" class="edges" d="m69.403 85.356c-13.122-31.702-13.127-31.689-13.127-31.689" stroke-width="3.4396"/>
+        <path id="edge_5" class="edges" d="m50.728 121.44c2.3527-71.49 2.3361-71.474 2.3361-71.474" stroke-width=".48836px"/>
+        <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:stroke fill markers"/>
+        </g>
+
+
+
+        
+        
+        <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"/>
+        
+       
+        
+        <path id="edge_9" class="edges" d="m26.119 94.06c34.309 0.3248 34.299 0.31493 34.299 0.31493" stroke-width="2.6458"/>
+
+       
+        
+
+
+    <a 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>
+
+    <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"/>
+    </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>
-<script type="module" src="/assets/js/net.js"></script>
-<script type="text/javascript" src="/assets/js/d3.v7.min.js"></script>
+</div>
+
+
+
 {% endblock %}