"small changes"

- remove http only in login.html
- extract PeeringManager into separate file
- add "progress meter" for "used" to "available" peerings

web/frontend/static/style.css

@@ -62,6 +62,46 @@ footer.flex {
     flex-direction: row;
 }
 
+/* # index.html */
+
+/* based on https://codepen.io/t_afif/pen/RwQZLYb */
+progress[value] {
+    --w: 100px; /* the width*/
+    --color:  /* the progress color */
+      /* linear-gradient(#fff8,#fff0), */
+      /* repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px), */
+      /* if < 30% "red" */
+      linear-gradient(green    0 0) 0 /calc(var(--w)*.8 - 100%) 1px,
+      /* if < 60% "orange" */
+      linear-gradient(orange 0 0) 0 /calc(var(--w)*.9 - 100%) 1px,
+      /* else "green" */
+      red;
+    --background: lightgrey; /* the background color */
+  
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    width: var(--w);
+    margin: 0 10px;
+    border-radius: 10em;
+    background: var(--background);
+  }
+  progress[value]::-webkit-progress-bar {
+    border-radius: 10em;
+    background: var(--background);
+  }
+  progress[value]::-webkit-progress-value {
+    border-radius: 10em;
+    background: var(--color);
+  }
+  progress[value]::-moz-progress-bar {
+    border-radius: 10em;
+    background: var(--color);
+  }
+  
+
+/* for peerings-{edit,new}.html */
 .example-config {
     background-color: white;
     padding: 1%;
@@ -78,6 +118,7 @@ form>div>* {
     margin: 10px;
 }
 
+/* for peerings.html */
 .peering {
     border-color: var(--other-background);
     border-radius: 10px;
@@ -99,6 +140,11 @@ form>div>* {
     padding: 10px;
 }
 
+.peering>* {
+    width: auto;
+    align-items: center;
+}
+/* button def */
 button,
 input[type=button] {
     background-color: #00000020;
@@ -113,10 +159,6 @@ input[type=button].button-selected {
     color: var(--text-color-dark);
 }
 
-.peering>* {
-    width: auto;
-    align-items: center;
-}
 
 .button-blue {
     border-color: lightblue;