feat(new tool): Visual Subnet Calculator

Fix CorentinTh#1746

Author: sharevb

public/visualsubnetcalc/calc.html

@@ -0,0 +1,371 @@
+:root {
+    /*
+    Color Palette
+    https://coolors.co/palette/033270-1368aa-4091c9-9dcee2-fedfd4-f29479-f26a4f-ef3c2d-cb1b16-65010c
+    --yale-blue: #033270ff;
+    --green-blue: #1368aaff;
+    --celestial-blue: #4091c9ff;
+    --light-blue: #9dcee2ff;
+    --misty-rose: #fedfd4ff;
+    --salmon: #f29479ff;
+    --tomato: #f26a4fff;
+    --vermilion: #ef3c2dff;
+    --engineering-orange: #cb1b16ff;
+    --rosewood: #65010cff;
+     */
+    --split-foreground: #000000;
+    /* Combination of Salmon/Tomato */
+    --split-background: #F27F64;
+    --join-foreground: #000000;
+    /* Combination of Light/Celestial Blue */
+    --join-background: #6FB0D6;
+
+    /* Color Palettes for subnet highlights
+    https://coolors.co/palette/f0d7df-f9e0e2-f8eaec-f7ddd9-f7e6da-e3e9dd-c4dbd9-d4e5e3-cae0e4-c8c7d6
+    https://coolors.co/palette/54478c-2c699a-048ba8-0db39e-16db93-83e377-b9e769-efea5a-f1c453-f29e4c
+    https://coolors.co/palette/e2e2df-d2d2cf-e2cfc4-f7d9c4-faedcb-c9e4de-c6def1-dbcdf0-f2c6de-f9c6c9
+    https://coolors.co/palette/54478c-2c699a-048ba8-0db39e-16db93-83e377-b9e769-efea5a-f1c453-f29e4c
+    https://coolors.co/palette/ffadad-ffd6a5-fdffb6-caffbf-9bf6ff-a0c4ff-bdb2ff-ffc6ff-e6e6e6
+     */
+    --subpal-1-1: #ffadadff;
+    --subpal-1-2: #ffd6a5ff;
+    --subpal-1-3: #fdffb6ff;
+    --subpal-1-4: #caffbfff;
+    --subpal-1-5: #9bf6ffff;
+    --subpal-1-6: #a0c4ffff;
+    --subpal-1-7: #bdb2ffff;
+    --subpal-1-8: #ffc6ffff;
+    --subpal-1-9: #e6e6e6ff;
+    --subpal-1-10: #ffffffff;
+}
+
+.table>:not(caption)>*>* {
+    background-color: unset;
+}
+
+#bottom_nav {
+    height:2rem;
+}
+
+#bottom_nav span {
+    border-bottom:1px black dotted;
+}
+
+#whats_new {
+    cursor:pointer !important;
+    text-align: right;
+    width:15rem;
+    float:right;
+}
+
+#whats_new a {
+    width:15rem;
+    text-align: right;
+    text-decoration: none;
+    border-bottom:1px var(--bs-success) dotted;
+}
+
+
+#copy_url {
+    cursor:pointer !important;
+    text-align: center;
+    width:11rem;
+}
+
+#copy_url span {
+    width:11rem;
+    text-align: center;
+}
+
+#color_palette {
+    min-width: 0rem;
+}
+
+#color_palette #colors_word_close {
+    line-height: 2rem;
+    cursor:pointer;
+}
+
+#color_palette #colors_word_open {
+    display:inline-block;
+    height:2rem;
+    cursor:pointer;
+    white-space: nowrap;
+}
+
+#color_palette div {
+    display:inline-block;
+    height:2rem;
+    cursor:pointer;
+    white-space: nowrap;
+}
+
+#color_palette div[id^='palette_picker_'] {
+    width:2rem;
+    border:1px solid;
+}
+
+#color_palette #reset_colors {
+    padding: 0 0.5rem;
+    border: 1px solid;
+    background-color: #f8f9fa;
+}
+
+#color_palette #palette_picker_1 {
+    background-color: var(--subpal-1-1);
+}
+#color_palette #palette_picker_2 {
+    background-color: var(--subpal-1-2);
+}
+#color_palette #palette_picker_3 {
+    background-color: var(--subpal-1-3);
+}
+#color_palette #palette_picker_4 {
+    background-color: var(--subpal-1-4);
+}
+#color_palette #palette_picker_5 {
+    background-color: var(--subpal-1-5);
+}
+#color_palette #palette_picker_6 {
+    background-color: var(--subpal-1-6);
+}
+#color_palette #palette_picker_7 {
+    background-color: var(--subpal-1-7);
+}
+#color_palette #palette_picker_8 {
+    background-color: var(--subpal-1-8);
+}
+#color_palette #palette_picker_9 {
+    background-color: var(--subpal-1-9);
+}
+#color_palette #palette_picker_10 {
+    background-color: var(--subpal-1-10);
+}
+
+.container-xxl {
+    min-width: 576px;
+}
+
+#navigation a {
+    color:#000000;
+    text-decoration: none;
+}
+
+/* Dark mode adjustments */
+[data-bs-theme="dark"] #navigation a {
+    color:#ffffff;
+}
+
+[data-bs-theme="dark"] #bottom_nav span {
+    border-bottom:1px white dotted;
+}
+
+[data-bs-theme="dark"] #calc td.split {
+    background-color: #d9634f;
+    color: #ffffff;
+}
+
+[data-bs-theme="dark"] #calc td.join {
+    background-color: #4d8fa6;
+    color: #ffffff;
+}
+
+[data-bs-theme="dark"] #calc span.split {
+    color: #d9634f;
+}
+
+[data-bs-theme="dark"] #calc span.join {
+    color: #4d8fa6;
+}
+
+/* Adjust color palette borders for dark mode */
+[data-bs-theme="dark"] #color_palette div[id^='palette_picker_'] {
+    border-color: #dee2e6;
+}
+
+/* Dark mode reset button */
+[data-bs-theme="dark"] #color_palette #reset_colors {
+    background-color: #495057;
+    color: #ffffff;
+}
+
+/* Dark mode color palette - darker colors for better contrast with white text */
+[data-bs-theme="dark"] #color_palette #palette_picker_1 {
+    background-color: #8b3a3a; /* Deep red */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_2 {
+    background-color: #8b5a2b; /* Deep orange/brown */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_3 {
+    background-color: #8b7500; /* Deep gold */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_4 {
+    background-color: #2e7d32; /* Deep green */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_5 {
+    background-color: #006064; /* Deep cyan */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_6 {
+    background-color: #1565c0; /* Deep blue */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_7 {
+    background-color: #6a1b9a; /* Deep purple */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_8 {
+    background-color: #880e4f; /* Deep magenta */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_9 {
+    background-color: #424242; /* Deep gray */
+}
+[data-bs-theme="dark"] #color_palette #palette_picker_10 {
+    background-color: #616161; /* Medium gray */
+}
+
+/* Cloud mode links styling */
+.cloud-mode-link {
+    color: #000;
+    border-bottom: 1px dotted #000;
+    text-decoration: none;
+}
+
+.cloud-mode-link:hover {
+    color: #333;
+    border-bottom-style: solid;
+}
+
+/* Dark mode cloud links */
+[data-bs-theme="dark"] .cloud-mode-link {
+    color: #fff;
+    border-bottom-color: #fff;
+}
+
+[data-bs-theme="dark"] .cloud-mode-link:hover {
+    color: #ddd;
+    border-bottom-style: solid;
+}
+
+#subnet_input #network {
+    flex-grow: 0;
+    flex-basis: 11rem;
+}
+#subnet_input #netsize {
+    flex-grow: 0;
+    flex-basis: 4rem;
+}
+
+#calc {
+    vertical-align: middle;
+}
+
+#calc>tbody>tr>td, #calc>tbody>tr>th, #calc>tfoot>tr>td, #calc>tfoot>tr>th, #calc>thead>tr>td, #calc>thead>tr>th {
+    /* Equivalent to p-1 */
+    padding: 0.25rem;
+    /* Equivalent to p-2 */
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+/*
+#joinHeader {
+    border:none;
+}
+
+#calc thead {
+    border-right-width: 1px;
+    border-bottom-width: 0px;
+}*/
+
+#calc span.split {
+    color: var(--split-background);
+}
+
+#calc span.join {
+    color: var(--join-background);
+}
+
+#calc td.split {
+    background-color: var(--split-background);
+    color: var(--split-foreground);
+    cursor: pointer;
+    min-width: 2.3rem;
+    width: 1%;
+    font-size:1rem;
+}
+
+#notifyModal .modal-content {
+    background-color: var(--bs-alert-bg);
+}
+
+#calc td.join {
+    background-color: var(--join-background);
+    color: var(--join-foreground);
+    cursor: pointer;
+    min-width: 2.3rem;
+    width: 1%;
+    font-size:1rem;
+}
+
+#calc td.split, #calc td.join {
+    padding: 0;
+}
+
+#calc td.split span, #calc td.join span {
+    padding-right: 0.4rem;
+}
+#calc .note {
+    padding-left:0.5rem;
+    padding-right:0.5rem;
+}
+
+#calc .note label,input {
+    width: 100%;
+}
+
+#calc .row_address {
+    white-space: nowrap;
+    padding-left:0.5rem;
+    padding-right:0.5rem;
+}
+
+#calc .row_range {
+    /* TODO: Make this a checkbox?
+    white-space: nowrap;
+     */
+    padding-left:0.5rem;
+    padding-right:0.5rem;
+}
+
+#calc .row_usable {
+    /* TODO: Make this a checkbox?
+    white-space: nowrap;
+     */
+    padding-left:0.5rem;
+    padding-right:0.5rem;
+}
+
+#calc .row_hosts {
+    width:1%;
+    white-space: nowrap;
+    padding-left:0.5rem;
+    padding-right:0.5rem;
+}
+
+
+#calc .note input {
+    border: none !important;
+    border-color: transparent !important;
+    background-color: transparent;
+}
+
+/* https://stackoverflow.com/a/47245068/606974 */
+.rotate {
+    vertical-align: middle;
+    text-align: end;
+}
+.rotate span {
+    -ms-writing-mode: tb-rl;
+    -webkit-writing-mode: vertical-rl;
+    writing-mode: vertical-rl;
+    white-space: nowrap;
+    padding-top: 0.25rem;
+}