cookie_consent/examples/index.html at main · Amarjit/cookie_consent · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cookie Consent Examples</title>
    <link rel="stylesheet" href="./assets/docs.css">
    <style>
      body { margin: 0; font-family: Georgia, serif; background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%); color: #0f172a; }
      main { max-width: 980px; margin: 0 auto; padding: 56px 20px 140px; }
      h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; }
      p, li { font-size: 1rem; line-height: 1.7; }
      .panel { margin-top: 24px; padding: 20px; border-radius: 20px; background: rgba(255,255,255,0.82); border: 1px solid rgba(15,23,42,0.1); }
      .nav, .actions { display: flex; gap: 10px; flex-wrap: wrap; }
      .chip { display: inline-flex; padding: 0.8rem 1rem; border-radius: 999px; border: 1px solid #0f172a; background: #fff; color: #0f172a; text-decoration: none; font-weight: 700; cursor: pointer; }
      .chip.active { background: #0f172a; color: #f8fafc; }
      code, pre { background: rgba(15,23,42,0.08); border-radius: 12px; }
      code { padding: 0.15rem 0.35rem; }
      pre { padding: 14px; overflow: auto; white-space: pre-wrap; }
    </style>
    <script src="./assets/docs.js" defer></script>
    <script src="./assets/docs-bootstrap.js"></script>
    <script src="../cookie-consent.js"></script>
  </head>
  <body>
    <main>
      <h1>Cookie Consent Examples</h1>
      <div class="panel">
        <h2>What this page shows</h2>
        <p>
          This is the main example hub for the project. Use the sidebar to move through the working demos,
          inspect the exact snippets each page uses, and test the feature you care about directly.
        </p>
      </div>
      <div class="panel">
        <h2>Minimal script include</h2>
        <pre><code>&lt;script src="/path/to/cookie-consent.js"&gt;&lt;/script&gt;</code></pre>
      </div>
      <div class="panel">
        <h2>Minimal cookie settings link</h2>
        <pre><code>&lt;a href="#" id="open-cookie-settings"&gt;Cookie settings&lt;/a&gt;

&lt;script&gt;
  document.getElementById("open-cookie-settings").addEventListener("click", function(event) {
    event.preventDefault();
    if (window.CookieConsent &amp;&amp; typeof window.CookieConsent.showSettings === "function") {
      window.CookieConsent.showSettings();
    }
  });
&lt;/script&gt;</code></pre>
        <div class="actions">
          <a href="#" class="chip active" id="open-cookie-settings">Open cookie settings</a>
        </div>
      </div>
      <div class="panel">
        <h2>Testing tools</h2>
        <p>
          The sidebar provides tools to clear consent cookies, clear audit storage,
          or clear both together. Use them before reloading when you want to retest first-load behavior,
          translation changes, or the browser no-tracking signal.
        </p>
      </div>
    </main>
    <script>
      document.getElementById("open-cookie-settings").addEventListener("click", function(event) {
        event.preventDefault();
        if (window.CookieConsent && typeof window.CookieConsent.showSettings === "function") {
          window.CookieConsent.showSettings();
        }
      });
    </script>
  </body>
</html>