Network Databases

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network Databases — Try It Yourself</title>
<style>
.infographic-networkdb {
  --ink:        #1a1a1a;
  --ink-soft:   #5c5c5c;
  --paper:      #ffffff;
  --paper-alt:  #f0ece4;
  --accent:     #2563eb;
  --accent-soft:#e3ebfd;
  --line:       #ddd6c9;
  --good:       #16a34a;
  --good-soft:  #dcfce7;
  --on-accent:  #ffffff;
  --display-font: Georgia, 'Iowan Old Style', serif;
  --body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono-font: 'SF Mono', Consolas, monospace;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}
.infographic-networkdb[data-theme="dark"] {
  --ink:        #e8e6e1;
  --ink-soft:   #9a968c;
  --paper:      #121212;
  --paper-alt:  #1e1e26;
  --accent:     #5b8def;
  --accent-soft:#202942;
  --line:       #2c313d;
  --good:       #4ade80;
  --good-soft:  #123420;
  --on-accent:  #101418;
}
.infographic-networkdb * { box-sizing: border-box; }

.nd-head { text-align: center; margin-bottom: 0.25rem; }
.nd-head h2 {
  font-family: var(--display-font);
  font-size: 1.95rem;
  margin: 0 0 0.5rem;
}
.nd-head p {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0 auto;
  max-width: 620px;
  line-height: 1.55;
}

.nd-frame {
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
  margin-top: 1.75rem;
}
.nd-frame-desc { font-size: 0.87rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 1.1rem; text-align: center; }

.nd-graph-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nd-graph-scroll svg { width: 100%; height: auto; display: block; min-width: 340px; }

.nd-box { fill: var(--paper); stroke: var(--accent); stroke-width: 2; }
.nd-box.is-owner { fill: var(--accent); }
.nd-box-text { font-size: 13px; font-weight: 700; font-family: var(--body-font); text-anchor: middle; fill: var(--ink); }
.nd-box-text.is-owner { fill: var(--on-accent); }
.nd-leaf-text { font-size: 12px; font-family: var(--body-font); text-anchor: middle; fill: var(--ink-soft); }

.nd-edge { stroke: var(--ink-soft); stroke-width: 2; fill: none; transition: stroke 0.3s, stroke-width 0.3s; }
.nd-edge.is-pulsing { stroke: var(--good); stroke-width: 3; }

.nd-rahul-box { fill: var(--paper); stroke: var(--good); stroke-width: 2.5; transition: fill 0.3s; }
.nd-rahul-box.is-updated { fill: var(--good-soft); }
.nd-rahul-phone { font-family: var(--mono-font); font-size: 11px; text-anchor: middle; fill: var(--ink-soft); transition: fill 0.3s; }
.nd-rahul-phone.is-updated { fill: var(--good); font-weight: 700; }

.nd-btn-row { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.nd-btn {
  font: inherit;
  font-size: 0.85rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 7px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
}
.nd-btn:hover { opacity: 0.9; }
.nd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nd-btn.is-secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }

.nd-msg {
  margin-top: 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.55;
  display: none;
  background: var(--good-soft);
  color: var(--good);
  text-align: center;
}
.nd-msg.is-visible { display: block; }

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

<div class="infographic-networkdb" id="networkdb">

  <div class="nd-head">
    <h2>Network Databases — Try It Yourself</h2>
    <p>A record can have more than one owner here — links point directly to the same data instead of copying it.</p>
  </div>

  <div class="nd-frame">
    <p class="nd-frame-desc">Rahul works in both Sales and Marketing. Unlike the hierarchical model, he's stored <b>once</b> — both departments just link to him.</p>

    <div class="nd-graph-scroll">
      <svg viewBox="0 0 500 260" role="img" aria-label="Network diagram with Sales and Marketing both pointing to a single Rahul record">
        <defs>
          <marker id="ndArrow" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
            <path d="M0,0 L8,4 L0,8 z" fill="var(--ink-soft)"></path>
          </marker>
          <marker id="ndArrowGood" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
            <path d="M0,0 L8,4 L0,8 z" fill="var(--good)"></path>
          </marker>
        </defs>

        <!-- edges -->
        <path class="nd-edge" d="M90,60 L90,130" marker-end="url(#ndArrow)"></path>
        <path class="nd-edge" id="ndEdgeSales" d="M120,60 L235,175" marker-end="url(#ndArrow)"></path>

        <path class="nd-edge" d="M410,60 L410,130" marker-end="url(#ndArrow)"></path>
        <path class="nd-edge" id="ndEdgeMarketing" d="M380,60 L265,175" marker-end="url(#ndArrow)"></path>

        <!-- Sales -->
        <rect class="nd-box is-owner" x="30" y="20" width="120" height="40" rx="6"></rect>
        <text class="nd-box-text is-owner" x="90" y="45">📁 Sales</text>

        <!-- Marketing -->
        <rect class="nd-box is-owner" x="350" y="20" width="120" height="40" rx="6"></rect>
        <text class="nd-box-text is-owner" x="410" y="45">📁 Marketing</text>

        <!-- Priya (Sales only) -->
        <text class="nd-leaf-text" x="90" y="150">👤 Priya</text>

        <!-- Aisha (Marketing only) -->
        <text class="nd-leaf-text" x="410" y="150">👤 Aisha</text>

        <!-- Rahul: shared node -->
        <rect class="nd-rahul-box" id="ndRahulBox" x="175" y="175" width="150" height="55" rx="8"></rect>
        <text class="nd-box-text" x="250" y="197">👤 Rahul</text>
        <text class="nd-rahul-phone" id="ndRahulPhone" x="250" y="215">98765-00000</text>
      </svg>
    </div>

    <div class="nd-btn-row">
      <button class="nd-btn" id="ndUpdateBtn" type="button">✏️ Update Rahul's phone</button>
      <button class="nd-btn is-secondary" id="ndReset" type="button">Reset</button>
    </div>
    <p class="nd-msg" id="ndMsg"></p>
  </div>

</div>

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

(function () {
  const phone = document.getElementById('ndRahulPhone');
  const box = document.getElementById('ndRahulBox');
  const edgeSales = document.getElementById('ndEdgeSales');
  const edgeMarketing = document.getElementById('ndEdgeMarketing');
  const updateBtn = document.getElementById('ndUpdateBtn');
  const msg = document.getElementById('ndMsg');

  updateBtn.addEventListener('click', () => {
    phone.textContent = '98765-11111';
    phone.classList.add('is-updated');
    box.classList.add('is-updated');
    edgeSales.classList.add('is-pulsing');
    edgeMarketing.classList.add('is-pulsing');
    edgeSales.setAttribute('marker-end', 'url(#ndArrowGood)');
    edgeMarketing.setAttribute('marker-end', 'url(#ndArrowGood)');
    updateBtn.disabled = true;
    msg.textContent = '✔️ One update, one record — both Sales and Marketing now see the new number through their own link. No duplicate to fall out of sync.';
    msg.classList.add('is-visible');
  });

  document.getElementById('ndReset').addEventListener('click', () => {
    phone.textContent = '98765-00000';
    phone.classList.remove('is-updated');
    box.classList.remove('is-updated');
    edgeSales.classList.remove('is-pulsing');
    edgeMarketing.classList.remove('is-pulsing');
    edgeSales.setAttribute('marker-end', 'url(#ndArrow)');
    edgeMarketing.setAttribute('marker-end', 'url(#ndArrow)');
    updateBtn.disabled = false;
    msg.classList.remove('is-visible');
  });
})();
</script>

</body>
</html>

.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!');
});