FishCakes/example.html at master · fatpixelstudio/FishCakes · 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
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />

	<title>Fishcakes: cookie consent plugin</title>

	<link rel="stylesheet" href="dist/fishcakes.css" />
	<script src="dist/fishcakes.js"></script>

	<script>
		function fishcakeswrapper_head(analytical, marketing) {
			if(analytical) {
				alert('this is an analytical script running in head');
			}
			if (marketing) {
				alert('this is a marketing or social script running in head');
			}
		}
	</script>
</head>

<body>
	<h1>Fishcakes</h1>
	<p>Cookie consent the right way.</p>

	<div class="fishcakes-banner js-fishcakes">
		<div class="fishcakes-banner__contain">
			<div class="fishcakes-banner__text">
				<p>
					This website uses cookies.
				</p>
			</div>
			<div class="fishcakes-banner__options fishcakes-options js-fishcakes-options">
				<p>We save functional cookies, analytical cookies and marketing cookies. Please let us know what cookies you consent to.</p>
				<form class="fishcakes-options__list js-fishcakes-form">
					<div class="fishcakes-options__item">
						<label><input type="checkbox" name="functional" checked="checked" disabled="disabled" /> Functional cookies</label>
						<a href="#moreinfo-functional" class="js-fishcakes-moreinfo-button" data-text-show="More info" data-text-hide="Hide info">More info</a>
						<div class="fishcakes-options__moreinfo" id="moreinfo-functional">
							<p>Functional cookies allow websites to remember the user's site preferences and choices they make on the site including username, region, and language. This allows the website to provide personalized features like local news stories and weather if you share your location.</p>
						</div>
					</div>
					<div class="fishcakes-options__item">
						<label><input type="checkbox" name="analytical" /> Analytical cookies</label>
						<a href="#moreinfo-analytical" class="js-fishcakes-moreinfo-button" data-text-show="More info" data-text-hide="Hide info">More info</a>
						<div class="fishcakes-options__moreinfo" id="moreinfo-analytical">
							<p>Analytical cookies are used to determine usage of a site, they may track an individual users, but only to the extent to allow a users journey through the site. They are not used for targeting adverts (Marketing Cookies)</p>
						</div>
					</div>
					<div class="fishcakes-options__item">
						<label><input type="checkbox" name="marketing" /> Marketing &amp; social cookies</label>
						<a href="#moreinfo-marketing" class="js-fishcakes-moreinfo-button" data-text-show="More info" data-text-hide="Hide info">More info</a>
						<div class="fishcakes-options__moreinfo" id="moreinfo-marketing">
							<p>Marketing cookies are used to target advertising to a user (behavioural targeting). They are often served by third party companies, and track a user across websites. Social cookies are used by Social Media platforms such as Facebook, LinkedIn and YouTube, when you view or use embedded media. These cookies can sometimes track your activities and so are closely related to advertising cookies.</p>
						</div>
					</div>
					<button class="fishcakes-button fishcakes-options__button js-fishcakes-save" type="submit">Save</button>
				</form>
			</div>
			<div class="fishcakes-banner__action">
				<button class="fishcakes-link js-fishcakes-options-button" data-text-show="Show options" data-text-hide="Hide options">Show options</button>
				<button class="fishcakes-button js-fishcakes-accept-all">Accept all</button>
			</div>
		</div>
	</div>

	<script>
		function fishcakeswrapper_foot(analytical, marketing) {
			if (analytical) {
				alert('this is an analytical script running in footer');
			}
			if (marketing) {
				alert('this is a marketing or social script running in footer');
			}
		}
	</script>

</body>

</html>