<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
Выход с Авито
</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
box-sizing: border-box;
padding: 4%;
margin: 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #ff6163;
}
main,
header {
background-color: #fff;
box-sizing: border-box;
}
main {
padding: 24px;
}
.header__logo {
height: 24px;
padding: 20px 24px;
background: url(http://avito.ru/s/a/i/logo/logo-avito.svg) no-repeat 20px 18px;
background-size: auto 36px;
}
.header__warning {
display: flex;
flex-wrap: wrap;
padding: 20px 24px 24px;
background-color: #ffe6e6;
}
.header__description {
width: 100%;
padding: 13px 0 0;
font-size: 16px;
line-height: 24px;
}
.header__icon {
display: inline-flex;
align-self: center;
margin-right: 12px;
margin-bottom: 14px;
}
h1 {
display: inline-flex;
align-self: center;
font-weight: bold;
font-size: 25px;
line-height: 30px;
margin: 0;
color: #ff4053;
}
h2 {
margin: 0 0 6px;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
a {
color: #009CF0;
}
p {
padding: 8px 0;
margin: 0;
}
ul {
list-style: none;
padding: 0;
margin-top: 8px;
margin-bottom: 20px;
}
li {
position: relative;
padding-left: 1.4em;
margin-top: 8px;
margin-bottom: 8px;
}
li::before {
content: "—";
position: absolute;
left: 0;
}
.buttons {
display: flex;
flex-direction: column;
}
.link-as-button {
position: relative;
display: inline-flex;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
align-items: center;
padding: 5px 12px;
border: 1px solid #ccc;
border-radius: 3px;
margin: 0 0 20px;
text-align: center;
text-decoration: none;
font-size: 14px;
line-height: 1.3;
color: #000;
background-color: #fff;
cursor: pointer;
outline: 0;
}
.link-as-button:hover {
background-color: #f5f5f5;
}
.link-as-button:hover {
background-color: #e0e0e0;
}
.link-as-button_safe {
background-color: #97cf27;
border-color: #97cf27;
color: #fff;
}
.link-as-button_safe:hover {
background-color: #83C217;
}
.link-as-button_safe:active {
background-color: #72B50E;
}
@media screen and (min-width: 800px) {
body {
padding: 120px 10% 4%;
}
main,
header {
background-color: #fff;
width: 53%;
min-width: 640px;
box-sizing: border-box;
}
.buttons {
flex-direction: row;
}
.link-as-button {
margin: 0 20px 0 0;
}
.link-as-button_safe {
order: 2;
}
.header__icon {
margin-bottom: 0;
}
}
</style>
</head>
<body>
<header>
<div class="header__logo"></div>
<div class="header__warning">
<div class="header__icon">
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="16" fill="#FF6163"/>
<path d="M19.497 7.2h-6.994a1 1 0 0 0-.707.293l-4.303 4.303a1 1 0 0 0-.293.707v6.994a1 1 0 0 0 .293.707l4.303 4.303a1 1 0 0 0 .707.293h6.994a1 1 0 0 0 .707-.293l4.303-4.303a1 1 0 0 0 .293-.707v-6.994a1 1 0 0 0-.293-.707l-4.303-4.303a1 1 0 0 0-.707-.293z" fill="#fff"/>
<path d="M15.886 11.2a.686.686 0 0 0-.686.686v4.228c0 .379.307.686.686.686h.228a.686.686 0 0 0 .686-.686v-4.228a.686.686 0 0 0-.686-.686h-.228zM16 20.8a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z" fill="#FF6163"/>
<defs>
<filter id="filter0_d" x="5.2" y="6.2" width="21.6" height="21.6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</div>
<h1 class="header-basic__inner">Осторожно! Подозрительный сайт!</h1>
<p class="header__description">
<b>https://cleantalkorg5.ru</b> — этот сайт не имеет отношения к Авито, поэтому мы не можем проверить его подлинность, содержимое и безопасность.
</p>
</div>
</header>
<main>
<h2>Мы просим вас обратить внимание:</h2>
<ul>
<li>
Не вводите данные банковской карты;
</li>
<li>
Не вводите ваши логин и пароль от Авито на других ресурсах. Сотрудники Авито никогда не просят
у вас пароль;
</li>
<li>
Если при переходе по ссылке вас просят ввести телефон или код для получения доступа к Авито, не делайте
этого;
</li>
<li>
Файлы и вложения можно открывать и устанавливать только если они от людей и сайтов,
которым вы доверяете.
</li>
</ul>
<div class="buttons">
<a class="link-as-button link-as-button_safe" id="back-safe" href="https://www.avito.ru/">
Назад к безопасности
</a>
<a class="link-as-button link-as-button_blocked" id="link-unsafe" href="https://cleantalkorg5.ru">
Я понимаю риск, перейти по ссылке
</a>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
let unsafeLink = document.getElementById('link-unsafe');
let backSafeLink = document.getElementById('back-safe');
let buttonClicked = false;
let endpointUrl = 'https://link.avito.ru/go?to=';
unsafeLink.addEventListener('click', function () {
navigator.sendBeacon(endpointUrl + 'click', '');
buttonClicked = true;
});
backSafeLink.addEventListener('click', function () {
navigator.sendBeacon(endpointUrl + 'back', '');
buttonClicked = true;
});
window.addEventListener('unload', function () {
if (!buttonClicked) {
navigator.sendBeacon(endpointUrl + 'unload', '');
}
});
});
</script>
</body>
</html>