dec14

templates/assets/css/nojs_net.css

@@ -162,6 +162,77 @@ svg {
   }
 
 
+  /* 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');
+    }
+}
+    
+
+
+
+
+
+
 
 
 

templates/index.html

@@ -2,7 +2,7 @@
 {% block content %}
 <!--nodes in svg as links-->
 <!--animation with CSS-->
-<!--nodes load template based on get request on click-->
+<!--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">
@@ -91,12 +91,30 @@
     </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 %} #}
+
 </div>
 </div>
 
 <!-- Get requests, load templates, inherit index.html, alt Post and foregnelement form in svg -->
 
 
-
 {% endblock %}

templates/info.html

@@ -1,11 +1,8 @@
 {% extends "index.html" %}
-{% block head }
+{% block head %}
-<link rel="stylesheet" href="/assets/css/box.css"/>
+{{ super() }}
-{% endblock %}
+<link rel="stylesheet" href="box.css"/>
-
+{% endbock%}
-{%block info}
+{% block child %}
-<div class="box">
+<h1>Hello from child template 1 !</h1>
-    
+{% endblock%}
-    <img src="/assets/img/Logo.svg" alt="Logo" />
-</div>
-{% endblock %}