portal: add icons

This commit is contained in:
Iain Learmonth 2022-05-12 14:41:14 +01:00
parent 56ddd3a771
commit 1c505ea41d
2 changed files with 90 additions and 12 deletions

View file

@ -1,3 +1,4 @@
{% from "icons.html.j2" import icon %}
<!doctype html>
<html lang="en">
<head>
@ -62,7 +63,7 @@
<li class="nav-item">
<a class="nav-link{% if section == "home" %} active{% endif %}"
href="{{ url_for("portal.portal_home") }}">
Home
{{ icon("house-door") }} Home
</a>
</li>
</ul>
@ -73,31 +74,37 @@
<li class="nav-item">
<a class="nav-link{% if section == "group" %} active{% endif %}"
href="{{ url_for("portal.group.group_list") }}">
Groups
{{ icon("collection") }} Groups
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "origin" %} active{% endif %}"
href="{{ url_for("portal.origin.origin_list") }}">
Origins
{{ icon("hdd-network") }} Web Origins
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "onion" %} active{% endif %}"
href="{{ url_for("portal.onion.onion_list") }}">
Onion Services
{{ icon("onion") }} Onion Services
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "bridgeconf" %} active{% endif %}"
href="{{ url_for("portal.bridgeconf.bridgeconf_list") }}">
Tor Bridges
{{ icon("rainbow") }} Tor Bridges
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "list" %} active{% endif %}"
href="{{ url_for("portal.list.list_list") }}">
Mirror Lists
{{ icon("file-earmark-text") }} Distribution Lists
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "blocklist" %} active{% endif %}"
href="#">
{{ icon("file-earmark-excel") }} Block Lists
</a>
</li>
</ul>
@ -108,25 +115,25 @@
<li class="nav-item">
<a class="nav-link{% if section == "proxy" %} active{% endif %}"
href="{{ url_for("portal.proxy.proxy_list") }}">
Proxies
{{ icon("arrow-down-up") }} Web Proxies
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "smart_proxy" %} active{% endif %}"
href="#">
Smart Proxy Instances
{{ icon("globe") }} Smart Proxy Instances
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "eotk" %} active{% endif %}"
href="#">
EOTK Instances
{{ icon("server") }} EOTK Instances
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "bridge" %} active{% endif %}"
href="{{ url_for("portal.bridge.bridge_list") }}">
Tor Bridges
{{ icon("rainbow") }} Tor Bridges
</a>
</li>
</ul>
@ -137,13 +144,13 @@
<li class="nav-item">
<a class="nav-link{% if section == "automation" %} active{% endif %}"
href="{{ url_for("portal.automation.automation_list") }}">
Automation
{{ icon("gear") }} Automation
</a>
</li>
<li class="nav-item">
<a class="nav-link{% if section == "alarm" %} active{% endif %}"
href="{{ url_for("portal.view_alarms") }}">
Alarms
{{ icon("bell") }} Alarms
</a>
</li>
</ul>

View file

@ -0,0 +1,71 @@
{% macro icon(i) %}
{% if i == "arrow-down-up" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-up"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"/>
</svg>
{% elif i == "bell" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell"
viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
</svg>
{% elif i == "collection" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-collection"
viewBox="0 0 16 16">
<path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
</svg>
{% elif i == "file-earmark-excel" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-file-earmark-excel" viewBox="0 0 16 16">
<path d="M5.884 6.68a.5.5 0 1 0-.768.64L7.349 10l-2.233 2.68a.5.5 0 0 0 .768.64L8 10.781l2.116 2.54a.5.5 0 0 0 .768-.641L8.651 10l2.233-2.68a.5.5 0 0 0-.768-.64L8 9.219l-2.116-2.54z"/>
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
</svg>
{% elif i == "file-earmark-text" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-file-earmark-text" viewBox="0 0 16 16">
<path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
<path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/>
</svg>
{% elif i == "hdd-network" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hdd-network"
viewBox="0 0 16 16">
<path d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM3 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8.5v3a1.5 1.5 0 0 1 1.5 1.5h5.5a.5.5 0 0 1 0 1H10A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5H.5a.5.5 0 0 1 0-1H6A1.5 1.5 0 0 1 7.5 10V7H2a2 2 0 0 1-2-2V4zm1 0v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1zm6 7.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5z"/>
</svg>
{% elif i == "house-door" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door"
viewBox="0 0 16 16">
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
</svg>
{% elif i == "gear" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear"
viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
</svg>
{% elif i == "globe" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe"
viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
</svg>
{% elif i == "rainbow" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rainbow"
viewBox="0 0 16 16">
<path d="M8 4.5a7 7 0 0 0-7 7 .5.5 0 0 1-1 0 8 8 0 1 1 16 0 .5.5 0 0 1-1 0 7 7 0 0 0-7-7zm0 2a5 5 0 0 0-5 5 .5.5 0 0 1-1 0 6 6 0 1 1 12 0 .5.5 0 0 1-1 0 5 5 0 0 0-5-5zm0 2a3 3 0 0 0-3 3 .5.5 0 0 1-1 0 4 4 0 1 1 8 0 .5.5 0 0 1-1 0 3 3 0 0 0-3-3zm0 2a1 1 0 0 0-1 1 .5.5 0 0 1-1 0 2 2 0 1 1 4 0 .5.5 0 0 1-1 0 1 1 0 0 0-1-1z"/>
</svg>
{% elif i == "onion" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-onion"
viewBox="0 2 24 24" style="margin-top: -3px;">
<title>Tor icon</title>
<path d="M17.578 12.201c-.76-.692-1.721-1.251-2.704-1.81-.446-.246-1.81-1.318-1.34-2.838l-.851-.358c1.342-2.078 3.085-4.134 5.229-6.056-1.721.581-3.24 1.476-4.379 3.062.67-1.407 1.765-2.793 2.972-4.201-1.654 1.185-3.084 2.525-3.979 4.313l.627-2.503c-.894 1.608-1.52 3.24-1.766 4.871l-1.317-.535-.223.178c1.162 2.078.559 3.174-.022 3.553-1.162.783-2.838 1.788-3.688 2.659-1.609 1.654-2.078 3.218-1.921 5.296.157 2.66 2.101 4.873 4.67 5.744 1.14.38 2.19.424 3.352.424 1.877 0 3.799-.491 5.207-1.676a6.551 6.551 0 0 0 2.369-5.027 6.875 6.875 0 0 0-2.236-5.096zm-3.553 8.872c-.09.402-.38.894-.737 1.341.134-.246.246-.492.313-.76.559-1.989.805-2.904.537-5.095-.045-.224-.135-.938-.471-1.721-.468-1.185-1.184-2.303-1.272-2.548-.157-.38-.38-1.989-.403-3.084.023.938.089 2.659.335 3.329.067.225.715 1.229 1.185 2.459.312.849.38 1.632.446 1.854.224 1.007-.045 2.705-.401 4.313-.111.581-.426 1.252-.828 1.766.225-.313.402-.715.537-1.185.269-.938.38-2.145.356-2.905-.021-.446-.222-1.407-.558-2.278-.201-.47-.492-.961-.692-1.297-.224-.335-.224-1.072-.313-1.921.021.916-.068 1.385.156 2.033.134.379.625.916.759 1.43.201.693.402 1.453.381 1.922 0 .536-.022 1.52-.269 2.593-.157.804-.515 1.497-1.095 1.943.246-.312.38-.625.447-.938.089-.469.111-.916.156-1.475a5.96 5.96 0 0 0-.111-1.721c-.179-.805-.469-1.608-.604-2.168.022.626.269 1.408.381 2.235.089.604.044 1.206.021 1.742-.021.627-.223 1.722-.492 2.258-.268-.112-.357-.269-.537-.491-.223-.291-.357-.604-.491-.962a5.043 5.043 0 0 1-.291-.915 3.071 3.071 0 0 1 .559-2.213c.469-.671.559-.716.715-1.497-.223.692-.379.759-.871 1.341-.559.647-.648 1.586-.648 2.346 0 .313.134.671.246 1.007.134.356.268.714.447.982.134.223.313.379.469.491-.581-.156-1.184-.379-1.564-.692-.938-.805-1.765-2.167-1.877-3.375-.089-.982.804-2.413 2.078-3.128 1.073-.626 1.318-1.319 1.542-2.459-.313.983-.626 1.833-1.654 2.348-1.475.804-2.235 2.1-2.167 3.352.112 1.586.737 2.682 2.011 3.554.291.2.693.401 1.118.559-1.587-.381-1.788-.604-2.324-1.229 0-.045-.134-.135-.134-.156-.715-.805-1.609-2.19-1.922-3.464-.112-.447-.224-.916-.089-1.363.581-2.101 1.854-2.905 3.128-3.775.313-.225.626-.426.916-.649.715-.559.894-2.012 1.05-2.838-.29 1.006-.603 2.258-1.162 2.659-.29.224-.648.402-.938.604-1.318.894-2.637 1.743-3.24 3.91-.134.56-.044.962.089 1.498.335 1.317 1.229 2.748 1.989 3.597l.134.135c.335.381.76.67 1.274.871a5.945 5.945 0 0 1-1.296-.469c-2.078-1.005-3.463-3.173-3.553-4.939-.179-3.597 1.542-4.647 3.151-5.966.894-.737 2.145-1.095 2.86-2.413.134-.291.224-.916.045-1.587-.067-.224-.402-1.028-.537-1.207l1.989.872c-.044.938-.067 1.698.112 2.391.2.76 1.184 1.854 1.586 3.129.783 2.41.583 5.561.023 8.019z"/>
</svg>
{% elif i == "server" %}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-server"
viewBox="0 0 16 16">
<path d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4c0 1.473-2.985 2.667-6.667 2.667S1.333 5.473 1.333 4V2.667z"/>
<path d="M1.333 6.334v3C1.333 10.805 4.318 12 8 12s6.667-1.194 6.667-2.667V6.334a6.51 6.51 0 0 1-1.458.79C11.81 7.684 9.967 8 8 8c-1.966 0-3.809-.317-5.208-.876a6.508 6.508 0 0 1-1.458-.79z"/>
<path d="M14.667 11.668a6.51 6.51 0 0 1-1.458.789c-1.4.56-3.242.876-5.21.876-1.966 0-3.809-.316-5.208-.876a6.51 6.51 0 0 1-1.458-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667v-1.665z"/>
</svg>
{% endif %}
{% endmacro %}