server actix for cannabinieri website
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

207 lines
8.7 KiB

2 years ago
  1. {% extends "base.html" %}
  2. {% block content %}
  3. <!--nodes in svg as links-->
  4. <!--animation with CSS-->
  5. <!--nodes load template based on GET request on click-->
  6. <!--content(info) is loaded into placeholder in template-->
  7. <!--actix get div and load on click-->
  8. <div id="mobile">
  9. <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">
  10. <defs>
  11. <pattern id="spiderpi" height="100%" width="100%">
  12. <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
  13. </pattern>
  14. </defs>
  15. <defs>
  16. <pattern id="permapp" height="100%" width="100%">
  17. <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
  18. </pattern>
  19. </defs>
  20. <defs>
  21. <pattern id="cyber" height="100%" width="100%">
  22. <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
  23. </pattern>
  24. </defs>
  25. <defs>
  26. <pattern id="kaos" height="100%" width="100%">
  27. <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
  28. </pattern>
  29. </defs>
  30. <defs>
  31. <pattern id="hemp" height="100%" width="100%">
  32. <image href="/assets/img/hemp.webp" width="30" height="45"></image>
  33. </pattern>
  34. </defs>
  35. <defs>
  36. <pattern id="machina" height="100%" width="100%">
  37. <image href="/assets/img/boat_construction.webp" width="24" height="31"></image>
  38. </pattern>
  39. </defs>
  40. <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
  41. <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
  42. <g class="group_1">
  43. <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"/>
  44. <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"/>
  45. <!-- on click open info template -->
  46. <a href="/robot">
  47. <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)"/>
  48. </a>
  49. </g>
  50. <g class="group_2">
  51. <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"/>
  52. <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"/>
  53. <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"/>
  54. <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"/>
  55. <a href="/app">
  56. <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:fill stroke markers" fill="url(#permapp)"/>
  57. </a>
  58. </g>
  59. <g class="group_3">
  60. <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"/>
  61. <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"/>
  62. <a href="/virtual">
  63. <circle id="circle_3" class="nodes" cx="20" cy="60" r="13" style="paint-order: fill stroke markers" fill="url(#cyber)"/>
  64. </a>
  65. </g>
  66. <g class="group_4">
  67. <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"/>
  68. <a href="/network">
  69. <circle id="circle_4" class="nodes" cx="65.545" cy="91.148" r="12" style="paint-order: fill stroke markers" fill="url(#kaos)"/>
  70. </a>
  71. </g>
  72. <g class="group_5">
  73. <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"/>
  74. <a href="/cannabinieri">
  75. <circle id="circle_5" class="nodes" cx="20.734" cy="95.501" r="12.5" style="paint-order: fill stroke markers" fill="url(#hemp)"/>
  76. </a>
  77. </g>
  78. <a href="/greenhome">
  79. <circle id="circle_6" class="nodes" cx="50" cy="120" r="12.5" style="paint-order: fill stroke markers" fill="url(#machina)"/>
  80. </a>
  81. </g>
  82. <g fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".12003">
  83. </g>
  84. </g>
  85. </svg>
  86. {% block child %} {% endblock %}
  87. </div>
  88. <!--Tablet & Desktop -->
  89. <div id="tablet">
  90. <svg id="a" width="768" height="1024" version="1.1" viewBox="0 0 80 175" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  91. <defs>
  92. <pattern id="tekla" height="100%" width="100%">
  93. <image href="/assets/img/spider_out.webp" width="44" height="30"></image>
  94. </pattern>
  95. </defs>
  96. <defs>
  97. <pattern id="rootwork" height="100%" width="100%">
  98. <image href="/assets/img/sample-permapp-screen.webp" width="30" height="30"></image>
  99. </pattern>
  100. </defs>
  101. <defs>
  102. <pattern id="cyberb" height="100%" width="100%">
  103. <image href="/assets/img/3d_greenhouse.webp" width="55" height="35"></image>
  104. </pattern>
  105. </defs>
  106. <defs>
  107. <pattern id="kaosk" height="100%" width="100%">
  108. <image href="/assets/img/cube_space.webp " width="25" height="25"></image>
  109. </pattern>
  110. </defs>
  111. <defs>
  112. <pattern id="hempium" height="100%" width="100%">
  113. <image href="/assets/img/hemp.webp" width="30" height="45"></image>
  114. </pattern>
  115. </defs>
  116. <defs>
  117. <pattern id="machinalala" height="100%" width="100%">
  118. <image href="/assets/img/boat_construction.webp" width="24" height="31"></image>
  119. </pattern>
  120. </defs>
  121. <g id="position" transform="translate(-36.486 -121.6)" stroke="#000">
  122. <g id="connect" transform="matrix(1.2003 0 0 1.2003 26.945 106.96)">
  123. <g class="group_1">
  124. <path id="edge_1" class="edges" d="m-10 20 l90 15 " stroke-width="2.6458"/>
  125. <path id="edge_2" class="edges" d="m-10 60.776c11.451-32.343 11.438-32.337 11.438-32.337" stroke-width="2.6458"/>
  126. <path id="edge_11" class="edges" d="m-5 30 l80 55"/>
  127. <a href="/robot">
  128. <ellipse id="circle_one" class="nodes" cx="0" cy="27" rx="13.5" ry="13.5" style="paint-order: fill stroke markers" fill="url(#tekla)" fill-opacity="1"/>
  129. </a>
  130. </g>
  131. <g class="group_2">
  132. <path id="edge_3" class="edges" d="m-10 70 l80 -30" stroke-width="2.6458"/>
  133. <path id="edge_6" class="edges" d="m75 40 l -60 65" stroke-width=".52917"/>
  134. <path id="edge_4" class="edges" d="m70 85 l5 -50" stroke-width="3.4396"/>
  135. <path id="edge_5" class="edges" d="m90 100 l -10 -60" stroke-width=".48836px"/>
  136. <a href="/app">
  137. <circle id="circle_2" class="nodes" cx="80" cy="35" r="13" style="paint-order:fill stroke markers" fill="url(#rootwork)"/>
  138. </a>
  139. </g>
  140. <g class="group_3">
  141. <path id="edge_10" class="edges" d="m20 95.5 l-35 -25"/>
  142. <path id="edge_7" class="edges" d="m1 75 l70 3" stroke-width=".52917"/>
  143. <path id="edge_8" class="edges" d="m-1 77.5 l90 30"/>
  144. <a href="/virtual">
  145. <circle id="circle_3" class="nodes" cx="-10" cy="70" r="13" style="paint-order: fill stroke markers" fill="url(#cyberb)"/>
  146. </a>
  147. </g>
  148. <g class="group_4">
  149. <path id="edge_9" class="edges" d="m75 87.5 l10 10"/>
  150. <a href="/network">
  151. <circle id="circle_4" class="nodes" cx="70" cy="80" r="12" style="paint-order: fill stroke markers" fill="url(#kaosk)"/>
  152. </a>
  153. </g>
  154. <g class="group_5">
  155. <a href="/cannabinieri">
  156. <circle id="circle_5" class="nodes" cx="20.734" cy="102.5" r="12.5" style="paint-order: fill stroke markers" fill="url(#hempium)"/>
  157. </a>
  158. </g>
  159. <a href="/greenhome">
  160. <circle id="circle_6" class="nodes" cx="90" cy="105" r="12" style="paint-order: fill stroke markers" fill="url(#machinalala)"/>
  161. </a>
  162. </g>
  163. <g fill="#333" stroke-linecap="round" stroke-linejoin="bevel" stroke-opacity=".99634" stroke-width=".12003">
  164. </g>
  165. </g>
  166. </svg>
  167. {% block child %} {% endblock %}
  168. </div>
  169. {% endblock %}