vanilla-cookieconsent
Version:
🍪 Simple cross-browser cookie-consent plugin written in vanilla js.
91 lines (87 loc) • 6.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CookieConsent demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="cookieconsent, orestbida, github,cookie consent gdpr, vanillajs">
<meta name="description" content="demo cookieconsent gdpr orest bida">
<link rel="icon" type="image/png" href="https://orestbida.com/favicon.png">
<link rel="apple-touch-icon" href="https://orestbida.com/favicon.png">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body class="d_mode">
<div id="_mainwrapper">
<div id="app_content" role="main">
<div class="_max_width">
<div id="header">
<a id="github_link" href="https://github.com/orestbida/cookieconsent/" aria-label="cookie consent">
<div id="_icon">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="20" height="20" viewBox="0 0 438.5 438.5"><path d="M409.1 114.6A218.3 218.3 0 0 0 219.3 5.4 218.3 218.3 0 0 0 0 224.7c0 47.7 14 90.7 41.8 128.8 28 38.2 64 64.6 108 79.3 5.2 1 9 .2 11.5-2 2.5-2.3 3.7-5.2 3.7-8.6a6589.9 6589.9 0 0 0-.3-40.8l-6.5 1.1a120.7 120.7 0 0 1-35.7-1c-6.9-1.2-13.3-4-19.2-8.5a36.2 36.2 0 0 1-12.5-17.6l-2.9-6.6a71.3 71.3 0 0 0-9-14.5c-4-5.4-8.2-9-12.4-10.9l-2-1.4a21 21 0 0 1-6.3-7.4c-.5-1.4 0-2.5 1.5-3.3 1.5-.9 4.3-1.3 8.2-1.3l5.8.9c3.8.7 8.5 3 14 6.8a46 46 0 0 1 14 14.9 50.3 50.3 0 0 0 15.8 17.8c6.2 4 12.4 6.1 18.7 6.1 6.3 0 11.7-.4 16.3-1.4 4.5-1 8.8-2.4 12.8-4.3a46.3 46.3 0 0 1 14-29.4 195.5 195.5 0 0 1-29.3-5.1c-8.6-2.3-17.6-6-26.8-11.2a76.9 76.9 0 0 1-23-19 92 92 0 0 1-15-30 142.6 142.6 0 0 1-5.8-42.9c0-23 7.5-42.6 22.5-58.8-7-17.3-6.4-36.7 2-58.3 5.5-1.7 13.7-.4 24.6 3.9a171.7 171.7 0 0 1 36 18.7 203 203 0 0 1 109.6 0l10.8-6.8c7.5-4.6 16.2-8.8 26.3-12.6 10-3.8 17.8-4.9 23.1-3.1 8.6 21.5 9.4 40.9 2.3 58.2a83.3 83.3 0 0 1 22.6 58.8c0 16.2-2 30.5-5.9 43a88.4 88.4 0 0 1-15.1 30 79.8 79.8 0 0 1-23.1 19c-9.3 5-18.2 8.8-26.9 11-8.6 2.4-18.4 4-29.2 5.2 9.9 8.6 14.8 22.1 14.8 40.6v60.2c0 3.4 1.2 6.3 3.6 8.6 2.4 2.2 6.1 3 11.3 2 44.1-14.7 80.1-41.1 108-79.3a213.1 213.1 0 0 0 41.8-128.9c0-39.7-9.8-76.4-29.4-110z"></path></svg>
</div>
<div id="_text">Github repo.</div>
</a>
<h1 id="app_title">
<span id="_title_span">C<span id="_cookie_ic">🍪🍪</span>kie Consent</span>
</h1>
</div>
<h2 id="app_description">
Simple, <span class="c_emf">lightweight</span> && <span class="c_emf">cross-browser</span> cookie-consent plugin written in <span class="c_emf">vanilla js</span>.
</h2>
<div id="app_settings">
<h3>Current settings</h3>
<p class="_theme">Current theme: <span id="theme">light theme</span></p>
<p class="_cookie_value">Current cookie_value: </p>
<code id="cookie">
<pre id="cookie_val"></pre>
</code>
</div>
<div id="api_section">
<h3>Api calls </h3>
<ul>
<li><button class="styled_btn" id="btn2" type="button">Show cookie modal</button></li>
<li><button class="styled_btn" id="btn5" type="button">Show cookie settings</button></li>
<li><button class="styled_btn" id="btn3" type="button">Hide cookie modal</button></li>
<li><button class="styled_btn" id="btn6" type="button">Toggle dark-mode</button></li>
</ul>
</div>
<div id="additional_section">
<p>Open cookie settings without manually calling api</p><br>
<button type="button" class="styled_btn" data-cc="c-settings">open cookie settings</button>
</div>
</div>
</div>
</div>
<script defer src="../src/cookieconsent.js"></script>
<script defer src="app2.js"></script>
<!-- =================================================== -->
<!-- All the scripts below are managed by the cookieconsent -->
<!-- INLINE GTAG -->
<script type="text/plain" data-cookiecategory="analytics">
// Google Tag Manager (configured with GA internally)
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TKL88W3');
console.log("loaded gtm.js");
</script>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TKL88W3" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- INLINE CLARITY -->
<script type="text/plain" data-cookiecategory="targeting">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "632ibvubgh");
console.log("loaded clarity.js");
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=287319019608397&ev=PageView&noscript=1"/></noscript>
<!-- EXTERNAL JAVASCRIPT -->
<script type="text/plain" data-src="./assets/cookie_test.js" data-cookiecategory="analytics" defer></script>
<script type="text/plain" data-cookiecategory="analytics">
console.log('calling object defined inside cookie_test.js: ');
myObject.write("Hello!");
</script>
</body>
</html>