Environment Badge — Free HTML CSS JS DEV/STAGING/PROD Ribbon Snippet

<div class="demo-page" id="app" data-env="dev">
  <div class="env-badge" id="envBadge" role="status"><span id="envLabel">DEV</span></div>
  <div class="app-mock">
    <h3>Internal Admin Tool</h3>
    <p>This ribbon sits fixed in the corner of every non-production build so nobody mistakes a staging session for live data.</p>
    <div class="build-chip">
      <span class="chip-dot"></span>
      <code id="buildInfo"></code>
      <button type="button" id="copyBuild" aria-label="Copy build info for a bug report">Copy</button>
    </div>
  </div>
</div>
<div class="switcher" id="switcher">
  <button type="button" data-env="dev">DEV</button>
  <button type="button" data-env="staging">STAGING</button>
  <button type="button" data-env="prod">PRODUCTION</button>
</div>
<label class="opt"><input type="checkbox" id="showProd" checked> Show badge in production</label>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 24px; display: flex; align-items: center; flex-direction: column; gap: 16px; justify-content: center; min-height: 100vh; }

/* One variable per environment drives the ribbon, the top edge and the chip dot */
.demo-page {
  --env: #f59e0b;
  --env-ink: #1c1917;
  position: relative;
  width: min(100%, 460px);
  height: 220px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--env);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.demo-page[data-env="staging"] { --env: #6366f1; --env-ink: #fff; }
.demo-page[data-env="prod"]    { --env: #ef4444; --env-ink: #fff; }

.app-mock { padding: 24px; }
.app-mock h3 { font-size: 16px; color: #1e293b; margin-bottom: 8px; }
.app-mock p { font-size: 13px; color: #64748b; line-height: 1.6; max-width: 340px; }

/* Fixed-width band: the label can never be clipped, whatever its length */
.env-badge {
  position: absolute;
  top: 24px;
  right: -46px;
  width: 170px;
  padding: 5px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--env-ink);
  background: var(--env);
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  pointer-events: none; /* never blocks clicks underneath */
  z-index: 10;
  transition: background 0.2s;
}
.env-badge[hidden] { display: none; }

.build-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 4px 4px 4px 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
}
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--env); }
.build-chip code { font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: #334155; }
.build-chip button {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  box-shadow: 0 0 0 1px #e2e8f0;
  cursor: pointer;
  min-width: 64px;
}
.build-chip button:hover { box-shadow: 0 0 0 1px #94a3b8; }

.switcher { display: flex; gap: 8px; }
.switcher button {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  border-radius: 8px;
  cursor: pointer;
}
.switcher button:hover { border-color: #94a3b8; }
.switcher button[aria-pressed="true"] { border-color: #1e293b; color: #1e293b; box-shadow: 0 0 0 1px #1e293b; }
.opt { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 6px; cursor: pointer; }

// 1. Config: one entry per environment (add "qa", "sandbox"... here + one CSS block)
const ENVS = {
  dev:     { label: 'DEV',        short: 'DEV'  },
  staging: { label: 'STAGING',    short: 'STG'  },
  prod:    { label: 'PRODUCTION', short: 'PROD' },
};

// 2. Build info: inject from CI (git rev-parse --short HEAD, $BUILD_NUMBER...)
const BUILD = { branch: 'feat/login-v2', commit: 'a1b2c3d', build: 482, region: 'eu-west-1' };

// 3. Work it out from the hostname, with a ?env=staging override for testing
function detectEnv(host) {
  host = host || location.hostname;
  const forced = new URLSearchParams(location.search).get('env');
  if (ENVS[forced]) return forced;
  if (/^(localhost|127\.|0\.0\.0\.0)|\.local$/.test(host)) return 'dev';
  if (/(^|[.-])(staging|stg|qa|preview)([.-]|$)/.test(host)) return 'staging';
  return 'prod';
}

const app = document.getElementById('app');
const badge = document.getElementById('envBadge');
const showProd = document.getElementById('showProd');
const baseTitle = document.title;

// Tab favicon = a dot in the environment colour, so you spot the wrong tab at a glance
function setFavicon(color) {
  const c = document.createElement('canvas');
  c.width = c.height = 32;
  const g = c.getContext('2d');
  g.fillStyle = color;
  g.beginPath();
  g.arc(16, 16, 14, 0, Math.PI * 2);
  g.fill();
  let link = document.querySelector('link[rel="icon"]');
  if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.head.appendChild(link);
  }
  link.href = c.toDataURL();
}

function setEnv(env) {
  const cfg = ENVS[env];
  if (!cfg) return;
  app.dataset.env = env;                                  // CSS reads this
  document.getElementById('envLabel').textContent = cfg.label;
  badge.setAttribute('aria-label', 'Environment: ' + cfg.label.toLowerCase());
  badge.hidden = env === 'prod' && !showProd.checked;     // optional: hide in prod
  document.getElementById('buildInfo').textContent =
    cfg.short.toLowerCase() + ' \u00b7 ' + BUILD.branch + ' \u00b7 ' + BUILD.commit + ' \u00b7 #' + BUILD.build;
  document.title = env === 'prod' ? baseTitle : '[' + cfg.short + '] ' + baseTitle;
  setFavicon(getComputedStyle(app).getPropertyValue('--env').trim());
  document.querySelectorAll('#switcher button').forEach(function (b) {
    b.setAttribute('aria-pressed', String(b.dataset.env === env));
  });
}

// 4. One-click build info for bug reports
const copyBtn = document.getElementById('copyBuild');
copyBtn.addEventListener('click', async function () {
  const text = 'env=' + app.dataset.env + ' branch=' + BUILD.branch + ' commit=' + BUILD.commit +
    ' build=' + BUILD.build + ' region=' + BUILD.region + ' host=' + location.hostname;
  try { await navigator.clipboard.writeText(text); copyBtn.textContent = 'Copied \u2713'; }
  catch (e) { copyBtn.textContent = 'Copy failed'; }
  setTimeout(function () { copyBtn.textContent = 'Copy'; }, 1400);
});

document.getElementById('switcher').addEventListener('click', function (e) {
  if (e.target.dataset.env) setEnv(e.target.dataset.env);
});
showProd.addEventListener('change', function () { setEnv(app.dataset.env); });

setEnv('dev'); // in a real app: setEnv(detectEnv());