<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Azure Naming Generator</title>
  <style>
    :root {
      --bg: #0b1220;
      --card: #121a2b;
      --muted: #93a4c7;
      --text: #eaf0ff;
      --accent: #6aa6ff;
      --bad: #ff6a6a;
      --ok: #6affb0;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    .wrap {
      max-width: 980px;
      margin: 28px auto;
      padding: 0 16px;
    }

    h1 {
      margin: 0 0 6px;
      font-size: 26px;
    }

    .sub {
      margin: 0 0 18px;
      color: var(--muted);
    }

    .grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 14px;
    }

    @media (max-width: 900px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

    .card {
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    }

    label {
      display: block;
      font-size: 12px;
      color: var(--muted);
      margin: 10px 0 6px;
    }

    input,
    select {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(0, 0, 0, .18);
      color: var(--text);
      outline: none;
    }

    input:focus,
    select:focus {
      border-color: rgba(106, 166, 255, .65);
      box-shadow: 0 0 0 3px rgba(106, 166, 255, .15);
    }

    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .btnrow {
      display: flex;
      gap: 10px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    button {
      cursor: pointer;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(106, 166, 255, .15);
      color: var(--text);
      padding: 10px 12px;
      border-radius: 12px;
      font-weight: 600;
    }

    button:hover {
      background: rgba(106, 166, 255, .22);
    }

    .ghost {
      background: rgba(255, 255, 255, .06);
    }

    .out {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 16px;
      padding: 12px;
      border-radius: 14px;
      background: rgba(0, 0, 0, .22);
      border: 1px solid rgba(255, 255, 255, .10);
      word-break: break-all;
    }

    .msg {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(0, 0, 0, .18);
    }

    .ok {
      border-color: rgba(106, 255, 176, .35);
    }

    .bad {
      border-color: rgba(255, 106, 106, .35);
    }

    .msg ul {
      margin: 6px 0 0 18px;
    }

    .pill {
      display: inline-block;
      font-size: 12px;
      color: var(--muted);
      border: 1px solid rgba(255, 255, 255, .10);
      padding: 4px 8px;
      border-radius: 999px;
    }

    .footer {
      margin-top: 14px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .mini {
      font-size: 12px;
      color: var(--muted);
    }

    .table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }

    .table th,
    .table td {
      text-align: left;
      padding: 8px 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      font-size: 13px;
    }

    .copyhint {
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px;
    }

    /* Tooltip */
    .labelrow {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tip {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .06);
      color: var(--muted);
      position: relative;
      user-select: none;
    }

    .tip:hover,
    .tip:focus {
      background: rgba(255, 255, 255, .10);
    }

    .tip[data-tip]:hover::after,
    .tip[data-tip]:focus::after {
      content: attr(data-tip);
      position: absolute;
      left: 50%;
      bottom: 130%;
      transform: translateX(-50%);
      width: 280px;
      max-width: min(80vw, 320px);
      white-space: pre-line;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(0, 0, 0, .88);
      border: 1px solid rgba(255, 255, 255, .14);
      color: var(--text);
      font-size: 12px;
      line-height: 1.35;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
      z-index: 20;
    }

    .tip[data-tip]:hover::before,
    .tip[data-tip]:focus::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 118%;
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: rgba(0, 0, 0, .88);
      z-index: 21;
    }

    .smallbtn {
      padding: 6px 10px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 700;
      background: rgba(255, 255, 255, .06);
    }

    .smallbtn:hover {
      background: rgba(255, 255, 255, .10);
    }

    .smallbtn:active {
      transform: translateY(1px);
    }

    footer a:hover {
      text-decoration: underline;
    }
  </style>
  <!-- AdSense Verification -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6604540714255672"
    crossorigin="anonymous"></script>
  <!-- Cloudflare Web Analytics -->
  <script defer src='https://static.cloudflareinsights.com/beacon.min.js'
    data-cf-beacon='{"token": "a9a6762b145f41f1a4c08987ec194555"}'></script><!-- End Cloudflare Web Analytics -->
</head>

<body>
  <div class="wrap">
    <h1>Azure Naming Generator</h1>
    <p class="sub">Opinionated, validation-aware names for common Azure resources.</p>

    <div class="grid">
      <div class="card">
        <div class="row">
          <div>
            <label for="rtype">Resource type</label>
            <select id="rtype">
              <option value="stg">Storage account (st)</option>
              <option value="kv">Key Vault (kv)</option>
              <option value="rg">Resource group (rg)</option>
              <option value="vmw">VM (Windows hostname constraint)</option>
              <option value="vml">VM (Linux hostname constraint)</option>
            </select>
          </div>
          <div>
            <label for="pattern">Pattern</label>
            <select id="pattern">
              <option value="std">std: {org}-{app}-{wld}-{env}-{reg}-{nn}</option>
              <option value="short">short: {app}-{env}-{reg}-{nn}</option>
              <option value="custom">custom: use your own pattern</option>
            </select>
            <div id="customWrap" style="display:none; margin-top:10px;">
              <div class="labelrow" style="margin-top:0;">
                <label for="customPattern" style="margin:0;">Custom pattern</label>
                <span class="tip" tabindex="0" role="button" aria-label="Help"
                  data-tip="Use tokens:\n{org} {app} {wld} {env} {reg} {nn}\n\nExample:\n{org}-{app}-{wld}-{env}-{reg}-{nn}\n\nTip:\nStorage accounts strip hyphens and non-alphanumerics.">ⓘ</span>
              </div>
              <input id="customPattern" placeholder="{org}-{app}-{wld}-{env}-{reg}-{nn}" />
              <div class="mini">Allowed tokens: {org} {app} {wld} {env} {reg} {nn}</div>
            </div>

          </div>
        </div>

        <label for="org">Org / Company (e.g., contoso)</label>
        <input id="org" placeholder="contoso" value="contoso" />

        <label for="app">App / Product (e.g., billing)</label>
        <input id="app" placeholder="billing" value="billing" />

        <div class="row">
          <div>
            <div class="labelrow">
              <label for="wld" style="margin:0;">Workload (tier / role)</label>
              <span class="tip" tabindex="0" role="button" aria-label="Help"
                data-tip="Workload = what this resource does (tier/role).\nExamples: web, api, db, data, auth, batch\n\nExample names:\ncontoso-billing-api-prod-eus-01\ncontoso-billing-db-prod-eus-01">ⓘ</span>
            </div>
            <input id="wld" placeholder="api" value="api" />

          </div>
          <div>
            <label for="env">Environment</label>
            <select id="env">
              <option value="dev">dev</option>
              <option value="test">test</option>
              <option value="stage">stage</option>
              <option value="prod" selected>prod</option>
            </select>
          </div>
        </div>

        <div class="row">
          <div>
            <div class="labelrow">
              <label for="reg" style="margin:0;">Region (short code)</label>
              <span class="tip" tabindex="0" role="button" aria-label="Help"
                data-tip="Region code = short location identifier.\nExamples: eus (East US), wus2 (West US 2), cus (Central US), neu (North Europe)\n\nTip: short codes help keep names within limits for strict resources.">ⓘ</span>
            </div>
            <input id="reg" placeholder="eus" value="eus" />
            <div class="mini">Tip: keep region codes short (eus, cus, neu, wus2).</div>

          </div>
          <div>
            <label for="nn">Instance # (00–99)</label>
            <input id="nn" placeholder="01" value="01" inputmode="numeric" />
          </div>
        </div>

        <div class="btnrow">
          <button id="genBtn">Generate</button>
          <button id="copyBtn" class="ghost">Copy</button>
          <button id="bulkBtn" class="ghost">Bulk 01–20</button>
          <button id="resetBtn" class="ghost">Reset</button>
        </div>

        <div class="footer">
          <span class="pill">v1</span>
          <span class="pill">static site</span>
          <span class="pill">ad-ready</span>
        </div>
      </div>

      <div class="card">
        <label>Generated name</label>
        <div id="outName" class="out">—</div>
        <div id="copyHint" class="copyhint"></div>

        <div id="status" class="msg">
          <strong>Status:</strong> Generate a name to see validation.
        </div>

        <div id="bulkWrap" style="display:none;">
          <label style="margin-top:14px;">Bulk output</label>
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>Name</th>
                <th>Valid</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="bulkBody"></tbody>
          </table>
        </div>

        <div class="footer">
          Validation rules are based on common Azure documentation and best practices.<br />
          Some resources require <strong>global uniqueness</strong> (for example, Storage Accounts and Key Vaults),
          which cannot be validated by this tool.
        </div>

      </div>
    </div>
  </div>
  <section class="footer" style="max-width:700px; margin:24px auto; text-align:center;">
    AzureNaming.com is a free public utility that helps generate Azure resource
    names based on common naming conventions and platform constraints.
    This site is not affiliated with Microsoft.
  </section>
  <footer class="footer" style="text-align:center; margin-top:24px;">
    Built as a public utility.
    <a href="https://github.com/darogers1201/azure-naming-generator/issues" target="_blank" rel="noopener"
      style="color: var(--accent); text-decoration: none;">
      Report an issue or suggest a rule
    </a>
  </footer>

  <script src="./app.js"></script>
</body>

</html>