Jump to content
Slivator.info

slivator

Recommended Posts

В свете обновленных правил о конфиденциальности данных, рекомендуется использовать следующий скрипт для уведомлений о файле cookie.

1697884617_firefox_screenshot_20.png.05054f1f52caa67cd69a5b03caffd300.png

Добавить в шаблоне в main.tpl внизу перед

</body>

добавить

<style>
	.mcookie {background-color: #fff; color: #000; border-radius: 10px; overflow: hidden; display: none; 
		box-shadow: 0 10px 30px rgba(0,0,0,0.25); position: fixed; z-index: 10000; right: 30px; bottom: 30px; width: 600px;}
	.mcookie__btns button {appearance: none; -webkit-appearance: none; display: flex; align-items: center; 
		justify-content: center; height: 40px; cursor: pointer; border-radius: 0; font-weight: bold;
		background: rgba(0,0,0,0.2); color: #000; flex-grow: 1; text-transform: uppercase; font-size: 12px;}
	.mcookie__btns button.mcookie__yes {background-color: #0dc42c; color: #fff;}
	.mcookie__btns {display: flex;}
	.mcookie__text {padding: 30px;}
	.mcookie__text a {color: #06c; text-decoration: underline;}
	.mcookie__title {font-weight: bold; font-size: 16px; 
		padding: 30px; padding-bottom: 0; margin-bottom: -25px;}
@media screen and (max-width: 760px) {
	.mcookie {width: calc(100% - 40px); right: 20px; bottom: 20px;}
}
		</style>

	<div class="mcookie">
		<div class="mcookie__title">We use cookies</div>
		<div class="mcookie__text">
			Star Wars is an American epic space opera media franchise, centered on a film series created by George Lucas.
			Star Wars is an American epic <a href="">space opera media franchise</a>, centered on a film series created by George Lucas.
		</div>
		<div class="mcookie__btns">
			<button class="mcookie__yes">I accept</button>
			<button class="mcookie__no">I do not accept</button>
		</div>
	</div>

	<script>
		const mcookie = document.querySelector('.mcookie'), mcookieStatus = localStorage.getItem('mcookie'), 
			mcookieYes = document.querySelector('.mcookie__yes'), mcookieNo = document.querySelector('.mcookie__no');
		if ( mcookieStatus != 1 ) { mcookie.style.cssText = 'display: block' };
		mcookieYes.onclick = ()=> {
			localStorage.setItem('mcookie', 1);
			mcookie.style.cssText = 'display: none'
		};
		mcookieNo.onclick = ()=> {
			window.location.href="https://www.google.com";
		};
	</script>

Результат

1697884617_firefox_screenshot_20.jpg.e48da2331611f9c826565c11516087dc.jpg

Старый вариант! так же рабочий

в main.tpl перед

</body>

вставить

<div class="message-alert">
	<div class="message-alert-in">
		<div class="message-alert-desc">
			<div class="message-alert-caption">We value your privacy</div>
			<div class="message-alert-text">Star Wars is an American epic space opera media franchise, centered on a film series created by George Lucas. It depicts the adventures of characters "a long time ago in a galaxy far, far away".</div>
		</div>
		<div class="message-alert-btns">
			<div class="message-btn message-btn-yes">I accept</div>
			<div class="message-btn message-btn-no">I do not accept</div>
			<a href="#" class="message-link">Show purposes</a>
		</div>
	</div>
</div>

в ваш css файл

.message-alert {background-color: #fff; color: #000; box-shadow: 0 0 20px rgba(0,0,0,0.2); display: none; 
position: fixed; left: 0; bottom: 0; z-index: 99999; width: 100%; font-size: 12px; line-height: 1.5;}
.message-alert-in {max-width: 700px; margin: 0 auto; padding: 10px; 
display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between; 
-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.message-alert-desc {-ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;}
.message-alert-btns {margin-left: 10px; width: 110px; text-align: center;}
.message-alert-caption {font-size: 1.2em; font-weight: 700; margin-bottom: 7px;}
.message-btn {display: block; padding: 7px 0; cursor: pointer; border-radius: 3px; 
	margin-bottom: 10px; font-weight: 700;}
.message-btn-yes {background-color: green; color: #fff;}
.message-btn-no {color: #888; box-shadow: inset 0 0 0 1px red;}
.message-link {text-decoration: underline; color: #06c;}

в ваш js файл

$(document).ready(function(){
	
    var messageAlert = localStorage.getItem('message-alert');
	if (messageAlert != 1) { $('.message-alert').fadeIn(200); };

	$(".message-btn-yes").click(function() {
		localStorage.setItem('message-alert', 1);
		$(".message-alert").fadeOut(200);
	});

	$('.message-btn-no').click(function(){
		window.location.href="http://www.yandex.ru/";

Результат

1527929826_firefox_screenshot_20.thumb.jpg.c865aeb0aa0536d81c8454472fe901e1.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...