More on the style of the IPs table

static/css/dpto2.css

@@ -49,7 +49,6 @@ div.ips-cell.ips-bottom,div.ips-hor-half {
 div.name {
     max-height: 70px;
 }
-
 span.ip {
     position: absolute;
     bottom: 2px;
@@ -58,7 +57,23 @@ span.ip {
     font-weight: bold;
     font-size: x-small;
 }
+span.lock {
+    position: absolute;
+    bottom: 2px;
+    left: 0.7em;
+    color: #aaa;
+    font-size: small;
+}
 
 div.ips-cell.dhcp-pool {
     background-color: #bed;
 }
+div.ips-cell.dhcp-pool.hover {
+    background-color: #acdccc;
+}
+div.ips-cell.hover {
+    background-color: #eae4ea;
+}
+div.ips-cell.unusable {
+    background-image: url(../img/unusable.png)
+}

templates/ips.html

@@ -12,7 +12,9 @@
       <div class="ips-row">
       {% for col in range(16) -%}
         {% set ip = row*16 + col %}
-        <a href="ip/{{ ip }}">
+        {% set unusable = ip == 0 or ip == 255 %}
+        {% set usable = not unusable %}
+        <a {% if usable %}href="ip/{{ ip }}"{% endif %}>
         <div class="ips-cell
           {%- if row == 0 %} ips-top{% endif %}
           {%- if col == 0 %} ips-left{% endif %}
@@ -20,6 +22,7 @@
           {%- if col == 15 %} ips-right{% endif %}
           {%- if col == 7 %} ips-ver-half{% endif %}
           {%- if row == 7 %} ips-hor-half{% endif %}
+          {% if unusable %} unusable{% endif %}
           {%- if 216 <= ip <= 239 %} dhcp-pool{% endif -%}
           ">
           <div class="name">
@@ -29,7 +32,12 @@
                 DHCP
             {% endif %}
           </div>
+          {% if usable %}
+          {% if ip == 14 or ip == 99 %}
+              <span class="lock"><i class="fa fa-lock"></i></span>
+          {% endif %}
           <span class="ip">.{{ row*16 + col }}</span>
+          {% endif %}
         </div>
         </a>
       {%- endfor %}
@@ -37,4 +45,16 @@
     {% endfor %}
 </div>
 
+<script>
+    $(function() {
+        $(".ips-cell:not(.unusable)").hover(
+            function() {
+                $(this).addClass("hover");
+            },
+            function() {
+                $(this).removeClass("hover");
+            }
+        );
+    })
+</script>
 {% endblock %}