Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Azure-Nutanix Migration Estimator</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    label, input, select { display: block; margin: 10px 0; }
    .output { margin-top: 20px; padding: 10px; border: 1px solid #ccc; }
    .diagram { margin-top: 20px; transition: all 0.3s ease-in-out; overflow-x: auto; }
    .button-group button { margin-right: 10px; }
    .bubble { font-size: 12px; text-anchor: middle; dominant-baseline: middle; cursor: pointer; }
    .logo {
      width: 100px;
      height: auto;
      margin-bottom: 20px;
    }
    svg text.label {
      font-size: 10px;
      fill: #333;
    }
    .tooltip {
      position: absolute;
      background: #f9f9f9;
      border: 1px solid #ccc;
      padding: 5px 10px;
      border-radius: 5px;
      display: none;
      pointer-events: none;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <img src="/mnt/data/Azure MDT.png" alt="Azure MDT Logo" class="logo" />
  <h1>Azure-Nutanix Migration Estimator</h1>
  <form id="infraForm">
    <label>Workload Type:
      <select id="workloadType">
        <option>SQL</option>
        <option>File</option>
        <option>VM</option>
      </select>
    </label>
    <label>Data Size (TB):
      <input type="number" id="dataSize" min="1" required />
    </label>
    <label>Current Platform:
      <select id="currentPlatform">
        <option>VMware</option>
        <option>Hyper-V</option>
      </select>
    </label>
    <label>Target Platform:
      <select id="targetPlatform">
        <option>Nutanix</option>
        <option>Azure</option>
      </select>
    </label>
    <label>Backup Strategy:
      <select id="backupStrategy">
        <option>Cloud</option>
        <option>Hybrid</option>
        <option>On-Prem</option>
      </select>
    </label>
    <button type="submit">Estimate</button>
  </form>

  <div class="output" id="output"></div>
  <div class="diagram" id="diagram"></div>
  <div class="tooltip" id="tooltip"></div>

  <div class="button-group">
    <button onclick="window.print()">Print</button>
    <button onclick="exportPDF()">Export to PDF</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script>
    const tooltips = {
      workload: "This represents your primary workload type (e.g., SQL, File, VM).",
      target: "Target platform for migration, such as Azure or Nutanix.",
      backup: "Selected backup strategy and location.",
      ai: "Azure AI and ML services for enrichment and automation.",
      bi: "Power BI enables analytics and dashboard visualizations.",
      lake: "Azure Data Lake for long-term scalable storage."
    };

    document.getElementById('infraForm').addEventListener('submit', function(e) {
      e.preventDefault();

      const workload = document.getElementById('workloadType').value;
      const size = parseInt(document.getElementById('dataSize').value);
      const current = document.getElementById('currentPlatform').value;
      const target = document.getElementById('targetPlatform').value;
      const backup = document.getElementById('backupStrategy').value;

      const nodes = Math.ceil(size / 5);
      const backupCost = backup === 'Cloud' ? size * 30 : backup === 'Hybrid' ? size * 20 : size * 10;

      const synapseCost = 6418.94;
      const analysisCost = 95.04;
      const powerBiCost = 1445.83;
      const totalCost = backupCost + synapseCost + analysisCost + powerBiCost;

      document.getElementById('output').innerHTML = `
        <strong>Estimated Resources:</strong><br/>
        - Nutanix Nodes Required: ${nodes}<br/>
        - Estimated Monthly Backup Cost: $${backupCost.toLocaleString()}<br/>
        - Target Platform: ${target}<br/>
        - Azure Synapse: $${synapseCost.toLocaleString()}<br/>
        - Azure Analysis Services: $${analysisCost.toLocaleString()}<br/>
        - Power BI Embedded: $${powerBiCost.toLocaleString()}<br/>
        <strong>Total Estimated Monthly Cost: $${totalCost.toLocaleString()}</strong><br/>
      `;

      document.getElementById('diagram').innerHTML = `
        <svg width="1200" height="450" onmousemove="showTooltip(evt)" onmouseleave="hideTooltip()">
          <circle cx="100" cy="200" r="50" fill="#0078D4" data-tip="workload" class="bubble" />
          <text x="100" y="200" fill="white" class="bubble">${workload}</text>

          <line x1="150" y1="200" x2="250" y2="200" stroke="black" />

          <circle cx="300" cy="200" r="50" fill="#00ADEF" data-tip="target" class="bubble" />
          <text x="300" y="200" fill="white" class="bubble">${target}</text>

          <line x1="350" y1="200" x2="450" y2="200" stroke="black" />

          <circle cx="500" cy="200" r="50" fill="#FFB900" data-tip="backup" class="bubble" />
          <text x="500" y="200" fill="black" class="bubble">${backup}</text>

          <line x1="550" y1="200" x2="650" y2="200" stroke="black" />

          <circle cx="700" cy="200" r="50" fill="#6A5ACD" data-tip="ai" class="bubble" />
          <text x="700" y="200" fill="white" class="bubble">Azure AI</text>

          <line x1="750" y1="200" x2="850" y2="200" stroke="black" />

          <circle cx="900" cy="200" r="50" fill="#32CD32" data-tip="bi" class="bubble" />
          <text x="900" y="200" fill="white" class="bubble">Power BI</text>

          <line x1="950" y1="200" x2="1050" y2="200" stroke="black" />

          <circle cx="1100" cy="200" r="50" fill="#4682B4" data-tip="lake" class="bubble" />
          <text x="1100" y="200" fill="white" class="bubble">Data Lake</text>

          <text x="100" y="270" class="label">Source</text>
          <text x="300" y="270" class="label">Migration</text>
          <text x="500" y="270" class="label">Backup</text>
          <text x="700" y="270" class="label">ML/AI</text>
          <text x="900" y="270" class="label">Analytics</text>
          <text x="1100" y="270" class="label">Storage</text>
        </svg>
      `;
    });

    function showTooltip(evt) {
      const tip = evt.target.getAttribute('data-tip');
      const tooltip = document.getElementById('tooltip');
      if (tip && tooltips[tip]) {
        tooltip.style.display = 'block';
        tooltip.style.left = evt.pageX + 10 + 'px';
        tooltip.style.top = evt.pageY + 10 + 'px';
        tooltip.innerHTML = tooltips[tip];
      } else {
        tooltip.style.display = 'none';
      }
    }

    function hideTooltip() {
      document.getElementById('tooltip').style.display = 'none';
    }

    async function exportPDF() {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      doc.text("Azure-Nutanix Migration Estimator", 10, 10);
      const content = document.getElementById('output').innerText;
      doc.text(content, 10, 20);
      doc.save("migration_estimate.pdf");
    }
  </script>
</body>
</html>
