Home: put this camera in your app (the live element and its snippet) (#93)

ddiff --git a/public/css/cam.css b/public/css/cam.css
iindex 604ebf3..317dc10 100644
---- a/public/css/cam.css
++++ b/public/css/cam.css
@@@ -294,3 +294,12 @@ html, body { margin: 0; background: var(--bg-primary, #0a0f1c); color: var(--tex
  .cm-doc-table code { overflow-wrap: anywhere; }
  .cm-embed-demo { max-width: 660px; margin: 18px 0 8px; }
  .cm-embed-demo .cm-photos { margin-top: 10px; }
++
++/* The camera in your own app (home, 11-07): the live element above the two lines that put it anywhere. */
++.cm-build { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(100%, 440px); margin: 0 auto; }
++.cm-build-cam { width: 100%; min-width: 0; --ov-camera-radius: 22px; }
++.cm-build-code { position: relative; margin: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border, #1f2d47); background: var(--bg-primary, #0b0f1a); }
++.cm-build-code figcaption { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #7386a3); }
++.cm-build-code pre { margin: 0; padding-right: 64px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; }
++.cm-build-copy { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); background: var(--bg-secondary, #101828); color: var(--text-primary, #e6edf7); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
++.cm-build-copy:hover { border-color: var(--accent, #00c7d2); }
ddiff --git a/public/js/cam.js b/public/js/cam.js
iindex 8dee6ab..b87a195 100644
---- a/public/js/cam.js
++++ b/public/js/cam.js
@@@ -223,3 +223,10 @@
      if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wire); else wire();
      document.addEventListener('ov:boost:load', wire);
  })();
++
++// The home's Copy button beside the <ov-camera> snippet (11-07).
++document.addEventListener('click', function (e) {
++    var b = e.target && e.target.closest ? e.target.closest('.cm-build-copy[data-copy]') : null;
++    if (!b || !navigator.clipboard) return;
++    navigator.clipboard.writeText(b.getAttribute('data-copy')).then(function () { b.textContent = 'Copied'; setTimeout(function () { b.textContent = 'Copy'; }, 1500); }, function () {});
++});
ddiff --git a/server/views/index.js b/server/views/index.js
iindex ead4cc6..cd8bad3 100644
---- a/server/views/index.js
++++ b/server/views/index.js
@@@ -57,6 +57,19 @@ function grantDemo() {
  }
  
  /** One picture through every filter the camera app has (the same CSS as public/js/cam.js), Warm picked. */
++/**
++ * The camera in your own app (11-07, the owner: "people should be able to use the OpenVibe cam for their own shit …
++ * integrate with the SDK and APIs easily"): the real <ov-camera> element, live on the page (it waits for a tap), beside
++ * the two lines that put it anywhere.
++ */
++function buildDemo() {
++    const code = '<script src="https://openvibe.cam/embed/ov-camera.js" async></script>\n<ov-camera filters="none,warm,vivid"></ov-camera>';
++    return `<div class="cm-build">
++<ov-camera class="cm-build-cam" facing="user" filters="none,mono,warm,vivid" mode="photo" upload="off" aria-label="A live OpenVibe camera: tap to turn it on"></ov-camera>
++<figure class="cm-build-code"><figcaption>Your page</figcaption><pre><code>${esc(code)}</code></pre><button type="button" class="cm-build-copy" data-copy="${esc(code)}">Copy</button></figure>
++</div>`;
++}
++
  function filtersDemo() {
      const thumbs = Object.entries(FILTER_LABEL).map(([id, label]) => `<li${id === 'warm' ? ' class="is-on"' : ''}><img class="cm-f-${id}" src="${SAMPLE}" alt="" width="64" height="48" loading="lazy"><span>${esc(label)}</span></li>`).join('');
      return `<figure class="cm-demo-filters" role="img" aria-label="Example: one picture in each of the camera's filters, with Warm picked and saved to Pics">
@@@ -114,6 +127,12 @@ function home({ signedIn = false } = {}) {
              motif: shutterMotif(),
          },
          scenes: [
++            {
++                title: 'Put this camera in your app',
++                text: 'One script and one tag: the same preview, filters, timer and burst, in any page you make. Nothing starts until someone taps, and the picture stays in the browser unless you ask Cam to save it to Pics. This one is live: try it.',
++                html: buildDemo(),
++                action: { href: '/developers', label: 'The element, its events and the API' },
++            },
              {
                  title: 'A still from a stream',
                  text: 'The cam button takes the frame OpenVibe.Media already serves, saves it to your OpenVibe.Pics as a still with your caption, and hands the chat line back to Live. Nothing is recorded and nothing is analysed.',