feat: add interactive cost calculator to the hosting costs page

assets/css/cost-calculator.css

@@ -0,0 +1,336 @@
+:root {
+  --calc-border: #a4a4a4;
+  --calc-text: #1f2937;
+  --calc-text-light: #6b7280;
+  --calc-input-bg: #f9fafb;
+  --calc-input-border: #d1d5db;
+  --calc-card-bg: #efefef;
+  --calc-label-bg: #f3f4f6;
+
+  --calc-link: #3b82f6;
+  --calc-grad-start: #10b981;
+  --calc-grad-mid: #f59e0b;
+  --calc-grad-end: #ef4444;
+}
+
+html.dark {
+  --calc-border: #374151;
+  --calc-text: #f9fafb;
+  --calc-text-light: #9ca3af;
+  --calc-input-bg: #374151;
+  --calc-input-border: #4b5563;
+  --calc-card-bg: #111827;
+  --calc-label-bg: #374151;
+
+  --calc-link: #60a5fa;
+  --calc-grad-start: #34d399;
+}
+
+.cht-cost-calculator {
+  width: 100%;
+  margin-top: 2rem;
+  display: grid;
+  gap: 1rem;
+  max-width: 48rem;
+
+  .calc-hidden {
+    display: none !important;
+  }
+  .calc-text-muted {
+    color: var(--calc-text-light);
+  }
+  .calc-text-blue {
+    color: var(--calc-link);
+  }
+  .calc-text-orange {
+    color: var(--calc-grad-mid);
+  }
+
+  .calc-divider {
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--calc-border);
+  }
+
+  .calc-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--calc-text-light);
+    margin-bottom: 0.5rem;
+  }
+  .range-bar {
+    position: relative;
+    height: 1rem;
+    background: linear-gradient(to right, var(--calc-grad-start), var(--calc-grad-mid), var(--calc-grad-end));
+    border-radius: 4px;
+    margin-bottom: 0.25rem;
+
+    .range-marker {
+      position: absolute;
+      top: -0.25rem;
+      width: 3px;
+      height: 1.5rem;
+      background: white;
+      border: 2px solid var(--calc-text);
+      transition: left 0.3s ease;
+    }
+  }
+  .calc-link {
+    color: var(--calc-link);
+    font-size: 0.9rem;
+    font-weight: 500;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+  .advanced-footer > :last-child {
+    float: right;
+  }
+  .inline-cost {
+    text-align: right;
+  }
+  .inline-cost-yearly {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--calc-link);
+    white-space: nowrap;
+  }
+  .inline-cost-monthly {
+    font-size: 0.75rem;
+    color: var(--calc-text-light);
+  }
+
+  .calc-card {
+    background: var(--calc-card-bg);
+    border: 1px solid var(--calc-border);
+    border-radius: 8px;
+    padding: 1.5rem;
+    max-width: 24rem;
+
+    h3 {
+      margin: 0 0 1.25rem 0;
+    }
+  }
+  .calc-card.params {
+    display: flex;
+    flex-direction: column;
+
+    .advanced-inputs-scroll {
+      overflow-y: auto;
+      min-height: 0;
+      max-height: 19rem;
+      margin-right: -0.75rem;
+      padding-right: 0.25rem;
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+      &:hover {
+        scrollbar-color: var(--calc-border) transparent;
+      }
+    }
+
+    > .calc-divider {
+      margin-top: auto;
+    }
+
+    .label-with-value {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 0.5rem;
+      font-weight: 500;
+      font-size: 0.9rem;
+    }
+
+    .input-value {
+      background: var(--calc-label-bg);
+      padding: 0.25rem 0.5rem;
+      border: 1px solid var(--calc-input-border);
+      border-radius: 4px;
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--calc-text);
+      width: 4.5rem;
+      text-align: right;
+    }
+    .input-value:focus {
+      outline: none;
+      border-color: var(--calc-link);
+    }
+    /* Hide spin buttons for number inputs */
+    .input-value::-webkit-outer-spin-button,
+    .input-value::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    .input-value[type=number] {
+      -moz-appearance: textfield;
+    }
+
+    .calc-input {
+      width: 100%;
+      padding: 0;
+      height: 2rem;
+      cursor: pointer;
+    }
+
+    .helper-text {
+      font-size: 0.8rem;
+      color: var(--calc-text-light);
+      margin-top: 0.25rem;
+    }
+
+    .advanced-input-group {
+      margin-bottom: 1.25rem;
+
+      .advanced-input {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        margin-bottom: 0.25rem;
+
+        label {
+          margin: 0;
+          flex: 1;
+        }
+      }
+    }
+  }
+  .calc-card.cost {
+    .total-cost {
+      text-align: center;
+      font-size: 2.5rem;
+      font-weight: bold;
+      color: var(--calc-link);
+      margin-bottom: 0.25rem;
+    }
+    .monthly-cost {
+      text-align: center;
+      font-size: 1rem;
+      color: var(--calc-text-light);
+      margin-bottom: 1rem;
+    }
+    .cost-pie {
+      --instance-pct: 50;
+      width: 12rem;
+      height: 12rem;
+      margin: 0 auto 1rem;
+      border-radius: 50%;
+      background: conic-gradient(
+              var(--calc-link) 0% calc(var(--instance-pct) * 1%),
+              var(--calc-grad-start) calc(var(--instance-pct) * 1%) 100%
+      );
+    }
+    .cost-legend {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: center;
+    }
+    .cost-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.9rem;
+    }
+    .cost-legend-color {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+    }
+    .cost-legend-instance {
+      background: var(--calc-link);
+    }
+    .cost-legend-disk {
+      background: var(--calc-grad-start);
+    }
+  }
+  .calc-card.users {
+    .calc-label {
+      font-size: 1rem;
+      margin-right: 0.5rem;
+    }
+    .cost-per-user {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      margin-bottom: 1.5rem;
+    }
+
+    .viz-section {
+      margin-bottom: 1.5rem;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: baseline;
+
+      .viz-value {
+        font-size: 1.5rem;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+      }
+
+      .range-bar {
+        width: 100%;
+      }
+    }
+    .viz-section:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .calc-card.host {
+    .host-value-large {
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
+    .host-section-row {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .disk-bar {
+      display: flex;
+      height: 20px;
+      border-radius: 4px;
+      overflow: hidden;
+      margin-top: 0.5rem;
+    }
+    .disk-bar-segment {
+      height: 100%;
+      transition: width 0.3s ease;
+    }
+    .disk-bar-segment-root {
+      background: var(--calc-text-light);
+    }
+    .disk-bar-segment-db {
+      background: var(--calc-link);
+    }
+    .disk-bar-segment-overprovision {
+      background: var(--calc-grad-mid);
+    }
+
+    .breakdown-legend {
+      margin-top: 0.5rem;
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+    .breakdown-label {
+      color: var(--calc-text-light);
+      font-weight: normal;
+      margin-right: 0.25rem;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .cht-cost-calculator {
+    grid-template-columns: repeat(12, 1fr);
+  }
+  .calc-card.params { grid-column: span 6; }
+  .calc-card.cost { grid-column: span 6; }
+  .calc-card.users { grid-column: span 6; }
+  .calc-card.host { grid-column: span 6; }
+}