forked from SubbotaAnton/AV_Landing
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (133 loc) · 8.07 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://www.googletagmanager.com/gtm.js?id=GTM-PMDFG9" async=""></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-PMDFG9');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- meta for sharing -->
<meta property="og:url" content="https://www.sravni.ru/promo/azbuka-vkusa/" />
<meta property="og:title" content="Индекс Айфона" />
<meta property="og:description" content="Посчитайте, сколько времени вы сможете питаться на 79 990 рублей!" />
<meta property="og:image" content="https://www.sravni.ru/wp-content/themes/sravniru/assets/landing/azbuka-vkusa/images/for_sharing.png" />
<!-- meta for sharing -->
<title>Sravni Azbuka</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<link rel="stylesheet" type="text/css" href="./css/mobile.css" />
<link rel="stylesheet" type="text/css" href="./css/chart.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="https://vk.com/js/api/share.js?95" charset="windows-1251"></script>
</head>
<body class="mainBackground">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PMDFG9"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v8.0&appId=5130895303602643" nonce="v9KuvDW8"></script>
<!-- Load Facebook SDK for JavaScript -->
<header>
<div class="sravniLogo">
<a href="https://www.sravni.ru/" class="logoLink" target="_blank"><span class="sravniIcon"></span></a>
</div>
<div class="azbukaLogo">
<a href="https://av.ru/?utm_source=sravni.ru&utm_medium=special_project&utm_campaign=IPhone12&utm_content=link1" class="logoLink" target="_blank"><span class="azbukaIcon"></span></a>
</div>
</header>
<div class="content" id="step_1">
<h1 class="mainTitle">Индекс Айфона</h1>
<span class="appleIcon"></span>
<h2 class="description">Посчитайте, сколько времени вы сможете питаться на 79 990 рублей</h2>
<p class="hint">Новый Айфон 12 с памятью 64 гб стоит почти 80 тысяч рублей. Дорого ли это — зависит не только от вашей зарплаты, но и от расходов.</p>
<p class="hint">Это калькулятор, который показывает ваши примерные траты на еду и сравнивает их с ценой Айфона. А вас — со средним москвичом.</p>
<p class="hint">Поставьте галочки, если это о вас и посчитайте:</p>
<div id="questionnaire" class="questionnaire">
<div class="option">
<input type="checkbox" class="questionCheckbox" id="a" name="a"/><label class="questionLabel" for="a">Я вегетарианец</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="b" name="b"/><label class="questionLabel" for="b">Я веган</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="c" name="c"/><label class="questionLabel" for="c">Я за здоровое питание</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="d" name="d"/><label class="questionLabel" for="d">Я трудоголик и редко ем дома</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="e" name="e"/><label class="questionLabel" for="e">Я на удаленке</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="f" name="f"/><label class="questionLabel" for="f">У меня есть ребенок до 3 лет</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="g" name="g"/><label class="questionLabel" for="g">У меня есть ребенок старше 3 лет</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="h" name="h"/><label class="questionLabel" for="h">У меня есть пёс</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="i" name="i"/><label class="questionLabel" for="i">У меня есть кот</label>
</div>
<div class="option">
<input type="checkbox" class="questionCheckbox" id="j" name="g"/><label class="questionLabel" for="g">Я люблю деликатесы</label>
</div>
</div>
<div class="submit" id="submit"
data-event="adEvent"
data-event-category="Прочее"
data-event-action="Рассчитать"
data-event-label="undefined"
data-event-value="undefined"
>
Рассчитать <span class="arrow_submit"></span>
</div>
</div>
<div class="content hidden" id="step_2">
<div class="loading">
<span class="loadingIcon"></span>
Корзина формируется...
</div>
</div>
<script type="text/javascript" src="./scripts/chart.min.js"></script>
<script type="text/javascript" src="./scripts/chartjs-plugin-doughnutlabel.min.js"></script>
<script type="text/javascript" src="./scripts/calculator.js"></script>
<script type="text/javascript" src="./scripts/main.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var allBlock = document.querySelectorAll('[data-event-action]');
for (let i = 0; i < allBlock.length; i++) {
allBlock[i].addEventListener('click', function() {
var eventName = this.getAttribute('data-event-name');
var eventCategory = this.getAttribute('data-event-category');
var eventAction = this.getAttribute('data-event-action');
var eventLabel = this.getAttribute('data-event-label');
var eventValue = Number(this.getAttribute('data-event-value'));
var eventActiveClass = this.getAttribute('data-event-active-class');
// var eventYandexGoal = this.getAttribute('data-event-yandex-goal');
if (window.dataLayer && eventCategory && eventAction && eventLabel && !this.classList.contains(eventActiveClass)) {
window.dataLayer.push({
event: eventName ? eventName : 'adEvent',
eventCategory: eventCategory,
eventAction: eventAction,
eventLabel: eventLabel,
eventValue: eventValue,
eventInteraction: false,
metric1: eventValue
})
}
})
}
})
</script>
</body>
</html>