Attribute Consistency Constraints

<div class="infographic-constraints">
  <style>
    .infographic-constraints {
      --ink:        #1a1a1a;
      --ink-soft:   #5c5c5c;
      --paper:      #ffffff;
      --paper-alt:  #f0ece4;
      --accent:     #2563eb;
      --accent-soft:#e3ebfd;
      --line:       #ddd6c9;
      --success:    #2e7d32;
      --success-soft: #e8f5e9;
      --error:      #c0392b;
      --error-soft: #fbe9e7;
      --mono-font:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      background: var(--paper);
      color: var(--ink);
      max-width: 720px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .infographic-constraints[data-theme="dark"] {
      --ink:        #e8e6e1;
      --ink-soft:   #9a968c;
      --paper:      #121212;
      --paper-alt:  #1e1e26;
      --accent:     #5b8def;
      --accent-soft:#202942;
      --line:       #2c313d;
      --success:    #66bb6a;
      --success-soft: #1b3320;
      --error:      #e57373;
      --error-soft: #3a2222;
    }
    .infographic-constraints *, .infographic-constraints *::before, .infographic-constraints *::after {
      box-sizing: border-box;
    }
    .infographic-constraints h2 {
      font-size: 1.4rem;
      margin: 0 0 0.25rem;
      letter-spacing: -0.01em;
    }
    .infographic-constraints .subtitle {
      color: var(--ink-soft);
      font-size: 0.92rem;
      margin: 0 0 1.5rem;
      max-width: 54ch;
    }

    .infographic-constraints .tabs {
      display: flex;
      flex-wrap: wrap;
      background: var(--paper-alt);
      border-radius: 12px;
      padding: 4px;
      margin-bottom: 1.1rem;
      gap: 4px;
    }
    .infographic-constraints .tab {
      font: inherit;
      font-size: 0.78rem;
      font-weight: 700;
      padding: 0.5rem 0.7rem;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--ink-soft);
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
      flex: 1 1 auto;
      white-space: nowrap;
    }
    .infographic-constraints .tab.is-active {
      background: var(--accent);
      color: #fff;
    }

    .infographic-constraints .panel {
      display: none;
      background: var(--paper-alt);
      border-radius: 14px;
      padding: 1.1rem 1.1rem 1.25rem;
    }
    .infographic-constraints .panel.is-active {
      display: block;
      animation: cst-fade 0.3s ease;
    }
    @keyframes cst-fade {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .infographic-constraints .constraint-desc {
      font-size: 0.85rem;
      color: var(--ink-soft);
      margin: 0 0 0.2rem;
    }
    .infographic-constraints .constraint-example {
      font-size: 0.78rem;
      color: var(--ink-soft);
      margin: 0 0 0.9rem;
    }
    .infographic-constraints .constraint-example code {
      font-family: var(--mono-font);
      background: var(--accent-soft);
      color: var(--accent);
      padding: 0.1rem 0.35rem;
      border-radius: 4px;
    }

    .infographic-constraints .field-label {
      font-family: var(--mono-font);
      font-size: 0.76rem;
      color: var(--ink-soft);
      display: block;
      margin-bottom: 0.3rem;
    }
    .infographic-constraints .constraint-input {
      width: 100%;
      font: inherit;
      font-size: 0.95rem;
      font-family: var(--mono-font);
      padding: 0.6rem 0.75rem;
      border-radius: 9px;
      border: 1.5px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      outline: none;
      transition: border-color 0.2s ease;
    }
    .infographic-constraints .constraint-input:focus {
      border-color: var(--accent);
    }
    .infographic-constraints .constraint-input.state-valid { border-color: var(--success); }
    .infographic-constraints .constraint-input.state-invalid { border-color: var(--error); }

    @media (max-width: 480px) {
      .infographic-constraints .constraint-input::placeholder {
        font-size: 0.78rem;
      }
    }

    .infographic-constraints .feedback {
      margin-top: 0.65rem;
      font-size: 0.82rem;
      font-weight: 600;
      min-height: 1.3em;
    }
    .infographic-constraints .feedback.state-neutral { color: var(--ink-soft); font-weight: 500; }
    .infographic-constraints .feedback.state-valid { color: var(--success); }
    .infographic-constraints .feedback.state-invalid { color: var(--error); }
    .infographic-constraints .feedback.state-default { color: var(--accent); }

    .infographic-constraints .chip-note {
      margin-top: 0.75rem;
      font-size: 0.76rem;
      color: var(--ink-soft);
    }
    .infographic-constraints .chip-list {
      display: inline-flex;
      gap: 0.35rem;
      flex-wrap: wrap;
      margin-left: 0.3rem;
    }
    .infographic-constraints .chip {
      font-family: var(--mono-font);
      font-size: 0.74rem;
      background: var(--paper);
      border: 1px solid var(--line);
      padding: 0.1rem 0.45rem;
      border-radius: 6px;
    }

    .infographic-constraints .takeaway {
      margin-top: 1.5rem;
      font-size: 0.88rem;
      color: var(--ink-soft);
      border-left: 3px solid var(--accent);
      padding: 0.5rem 0 0.5rem 0.9rem;
    }
    .infographic-constraints .takeaway strong { color: var(--ink); }

    @media (prefers-reduced-motion: reduce) {
      .infographic-constraints *, .infographic-constraints *::before, .infographic-constraints *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
      }
    }
  </style>

  <h2>✏️ Attribute Consistency Constraints</h2>
  <p class="subtitle">Don't just read the rule — break it. Type a value into each field and watch the constraint check it live.</p>

  <div class="tabs" role="tablist">
    <button class="tab is-active" type="button" data-key="type">Type</button>
    <button class="tab" type="button" data-key="domain">Domain</button>
    <button class="tab" type="button" data-key="format">Format</button>
    <button class="tab" type="button" data-key="uniqueness">Uniqueness</button>
    <button class="tab" type="button" data-key="notnull">Not Null</button>
    <button class="tab" type="button" data-key="default">Default</button>
  </div>

  <div class="panel is-active" data-key="type">
    <p class="constraint-desc">Value must match the expected data type.</p>
    <p class="constraint-example">📌 Example: <code>Age</code> must be an <strong>integer</strong></p>
    <label class="field-label">Age</label>
    <input class="constraint-input" type="text" placeholder="Try typing a value for Age…" autocomplete="off">
    <div class="feedback state-neutral">Start typing to test a value.</div>
  </div>

  <div class="panel" data-key="domain">
    <p class="constraint-desc">Value must fall within a predefined range or set.</p>
    <p class="constraint-example">📌 Example: <code>Marks</code> between <strong>0 and 100</strong></p>
    <label class="field-label">Marks</label>
    <input class="constraint-input" type="text" placeholder="Try typing a value for Marks…" autocomplete="off">
    <div class="feedback state-neutral">Start typing to test a value.</div>
  </div>

  <div class="panel" data-key="format">
    <p class="constraint-desc">Value must follow a specific pattern or structure.</p>
    <p class="constraint-example">📌 Example: <code>Email</code> must include <strong>@</strong> and <strong>.com</strong></p>
    <label class="field-label">Email</label>
    <input class="constraint-input" type="text" placeholder="Try typing a value for Email…" autocomplete="off">
    <div class="feedback state-neutral">Start typing to test a value.</div>
  </div>

  <div class="panel" data-key="uniqueness">
    <p class="constraint-desc">No two entities can have the same value.</p>
    <p class="constraint-example">📌 Example: <code>Student_ID</code> must be <strong>unique</strong></p>
    <label class="field-label">Student_ID</label>
    <input class="constraint-input" type="text" placeholder="Try typing a Student_ID…" autocomplete="off">
    <div class="feedback state-neutral">Start typing to test a value.</div>
    <div class="chip-note">Already taken:<span class="chip-list"><span class="chip">101</span><span class="chip">102</span><span class="chip">103</span></span></div>
  </div>

  <div class="panel" data-key="notnull">
    <p class="constraint-desc">Attribute cannot be left empty (null).</p>
    <p class="constraint-example">📌 Example: <code>Name</code> must always be filled</p>
    <label class="field-label">Name</label>
    <input class="constraint-input" type="text" placeholder="This field starts empty on purpose…" autocomplete="off">
    <div class="feedback state-invalid">❌ Name is empty — Not Null constraint violated.</div>
  </div>

  <div class="panel" data-key="default">
    <p class="constraint-desc">A default value is automatically assigned if none is given.</p>
    <p class="constraint-example">📌 Example: <code>Status</code> defaults to <code>"active"</code></p>
    <label class="field-label">Status</label>
    <input class="constraint-input" type="text" placeholder="Leave this blank and see what happens…" autocomplete="off">
    <div class="feedback state-default">🔄 Status will be saved as <strong>active</strong> — default value auto-applied.</div>
  </div>

  <p class="takeaway"><strong>Constraints aren't red tape.</strong> Each one is just a rule the database enforces before it ever lets bad data in.</p>

  <script>
    (function () {
      var wrapper = document.currentScript.closest('.infographic-constraints')
        || document.querySelector('.infographic-constraints');
      var bodyAttr = document.body.getAttribute('data-darkmode');
      var dark;
      if (bodyAttr === 'true') {
        dark = true;
      } else if (bodyAttr === 'false') {
        dark = false;
      } else {
        var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
        dark = match ? match[1] === 'true' : false;
      }
      if (dark) wrapper.setAttribute('data-theme', 'dark');

      function neutral(msg) { return { state: 'neutral', msg: msg || 'Start typing to test a value.' }; }

      var VALIDATORS = {
        type: function (v) {
          if (!v.trim()) return neutral();
          var ok = /^-?\d+$/.test(v.trim());
          return ok
            ? { state: 'valid', msg: '✅ "' + v + '" is an integer — valid Age.' }
            : { state: 'invalid', msg: '❌ "' + v + '" isn\'t an integer — Age only accepts whole numbers.' };
        },
        domain: function (v) {
          if (!v.trim()) return neutral();
          var n = Number(v.trim());
          if (isNaN(n)) return { state: 'invalid', msg: '❌ "' + v + '" isn\'t a number.' };
          return (n >= 0 && n <= 100)
            ? { state: 'valid', msg: '✅ ' + n + ' falls within 0–100 — valid Marks.' }
            : { state: 'invalid', msg: '❌ ' + n + ' is outside the 0–100 range.' };
        },
        format: function (v) {
          if (!v.trim()) return neutral();
          var ok = /^[^\s@]+@[^\s@]+\.com$/i.test(v.trim());
          return ok
            ? { state: 'valid', msg: '✅ "' + v + '" matches the required pattern.' }
            : { state: 'invalid', msg: '❌ Must include "@" and end in ".com".' };
        },
        uniqueness: function (v) {
          if (!v.trim()) return neutral();
          var taken = ['101', '102', '103'];
          return taken.indexOf(v.trim()) !== -1
            ? { state: 'invalid', msg: '❌ Student_ID ' + v.trim() + ' is already taken.' }
            : { state: 'valid', msg: '✅ Student_ID ' + v.trim() + ' is unique — available.' };
        },
        notnull: function (v) {
          return v.trim().length > 0
            ? { state: 'valid', msg: '✅ Name has a value — constraint satisfied.' }
            : { state: 'invalid', msg: '❌ Name is empty — Not Null constraint violated.' };
        },
        default: function (v) {
          return v.trim().length === 0
            ? { state: 'default', msg: '🔄 Status will be saved as <strong>active</strong> — default value auto-applied.' }
            : { state: 'valid', msg: '✅ Status will be saved as <strong>' + v.trim() + '</strong> — your value overrides the default.' };
        }
      };

      var tabs = wrapper.querySelectorAll('.tab');
      var panels = wrapper.querySelectorAll('.panel');

      tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
          var key = tab.getAttribute('data-key');
          tabs.forEach(function (t) { t.classList.remove('is-active'); });
          tab.classList.add('is-active');
          panels.forEach(function (p) { p.classList.toggle('is-active', p.getAttribute('data-key') === key); });
        });
      });

      panels.forEach(function (panel) {
        var key = panel.getAttribute('data-key');
        var input = panel.querySelector('.constraint-input');
        var feedback = panel.querySelector('.feedback');

        input.addEventListener('input', function () {
          var result = VALIDATORS[key](input.value);
          feedback.className = 'feedback state-' + result.state;
          feedback.innerHTML = result.msg;
          input.classList.remove('state-valid', 'state-invalid');
          if (result.state === 'valid') input.classList.add('state-valid');
          if (result.state === 'invalid') input.classList.add('state-invalid');
        });
      });
    })();
  </script>
</div>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});