-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (101 loc) · 7.5 KB
/
index.html
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Default consent settings
gtag('consent', 'default', {'functionality_storage': 'granted',
'security_storage': 'granted',
'ad_storage': 'denied',
'analytics_storage': 'denied',
'personalization_storage': 'denied',
'wait_for_update': 500}); // so you can update consent later and it gets correctly triggered in GTM
</script>
<!-- Google Tag Manager -->
<script>(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-XXXXXXX');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!--
COOKIE DIALOG HTML (cookieConsent.html)
This doesn't have to be here but cookieConsent.html can be inserted instead.
For test without apache server it's here directly so browser doesn't block
content from another html due to CORS policies.
-->
<div id="cookieConsentDialog">
<div class="cookieDialog">
<div class="cookieIn">
<div class="cookieBox">
<a href="#" class="cookieClose" title="close">✖</a>
<h2>Cookie consent</h2>
<p>This website uses cookies to personalise content and to analyse our traffic.</p>
<table>
<tr>
<td>
<b>Necessary</b> - Necessary cookies needed to make a website usable by enabling basic functions. The website cannot function properly without these cookies. (always active)
</td>
<td>
<label class="switch">
<input type="checkbox" name="necessaryCookiesConsent" id="necessaryCookiesConsent_input" disabled="disabled" checked="checked">
<span class="checkboxSlider round"></span>
</label>
</td>
</tr>
<tr>
<td>
<b>Marketing</b> - Marketing cookies are used to track visitors across websites.
</td>
<td>
<label class="switch">
<input type="checkbox" name="marketingCookiesConsent" id="marketingCookiesConsent_input">
<span class="checkboxSlider round"></span>
</label>
</td>
</tr>
</table>
<br>
<div>You can learn about cookies and change your cookie consent settings on our <a href="#">Privacy Policy page</a></div>
<br>
<div id="cookieDialog_buttonbar" class="buttonbar">
<input type="submit" name="" value="Save preferences" id="coookieDialog_save_button" class="cookieNoticeButton gray" title="">
<input type="submit" name="" value="Allow all" id="coookieDialog_acceptAll_button" class="cookieNoticeButton green" title="">
</div>
</div>
</div>
</div>
<div class="cookieOverlay"></div>
</div>
<!-- END OF COOCIE DIALOG HTML -->
<div class="content">
<h1>Lorem ipsum</h1>
<p>
Penatibus molestie gravida velit mauris duis nullam hac sem tempor viverra vivamus. Enim primis cras quisque magna dis porttitor nec. Phasellus non hendrerit porttitor natoque rutrum platea feugiat velit sociosqu aliquam donec ipsum. Suspendisse donec elit hac. Nam viverra mattis nostra! Taciti convallis, erat vestibulum pellentesque pellentesque etiam habitant tempor ut et massa. Malesuada, phasellus fermentum luctus.
</p>
<p>
Mauris placerat sodales habitasse. Etiam lectus porta tempus. Cras scelerisque donec tempus quisque vel inceptos convallis non enim. Posuere congue id pulvinar risus elementum netus scelerisque? Mattis quis facilisi nisi mattis non euismod senectus phasellus felis. Congue pretium justo torquent suspendisse penatibus nec. Sociis habitant inceptos conubia odio ante tellus inceptos vel integer congue. Ornare viverra nascetur mi ultrices netus ridiculus.
</p>
<p>
Id vel etiam, varius aliquam elit inceptos viverra natoque volutpat sapien tortor ac? Porttitor enim donec dapibus pretium lobortis, molestie est interdum vitae. Risus suscipit, faucibus primis convallis. Varius vulputate a vestibulum! Quam fames adipiscing ridiculus commodo felis pulvinar suspendisse? Augue ac sagittis feugiat habitant ad enim. Ornare placerat tempus fames fringilla aliquam maecenas nisl bibendum eros.
</p>
<p>
Dolor habitasse ultrices faucibus venenatis magnis! Vitae taciti consectetur, lectus ornare lacus platea leo tortor ad donec netus vel. Ornare sed nibh gravida duis mauris vivamus cum volutpat convallis. Volutpat maecenas fusce, dictum torquent integer. Dui lorem eleifend nisl parturient quis eget. Posuere, rutrum vel vulputate dictumst phasellus sit luctus ridiculus velit duis. Odio placerat euismod, sagittis eu imperdiet. Venenatis sem vitae pharetra sit senectus ipsum commodo sociis bibendum. Auctor imperdiet mauris feugiat tempus elit leo curabitur ipsum sollicitudin. Tempus ac sagittis!
</p>
<p>
Accumsan morbi conubia potenti porta, bibendum nullam. Sit morbi sollicitudin conubia dictumst ultrices. Iaculis tristique nibh nascetur sapien fringilla? Himenaeos fringilla libero rutrum mus, leo tincidunt nam. Urna varius sed nascetur etiam montes. Fermentum nisi sollicitudin taciti potenti. Dapibus eget aptent augue vivamus hendrerit. Eu nam mollis potenti dictumst, himenaeos class? Vivamus tempus sagittis id risus rhoncus. Cubilia nec netus rhoncus suscipit curae; velit.
</p>
<!-- LINK TO OPEN COOKIE DIALOG AFTER IT WAS CLOSED BY USER -->
<a href="#" class="showCookieDialog">Open cookie consent form</a>
</div>
<!-- load cookieConsent javascript -->
<script type="text/javascript" src="cookieConsent.js"></script>
</body>
</html>