<html>
<head>
<meta charset="UTF-8">
<title>Текст Крутится</title>
<style>
@layer base, text, box;
@layer settings {
:root {
--radius: 27vmin;
--radius-text: calc(var(--radius) + 7vmin);
--blur: 8px;
--spinDuration: 25s;
--speedYMod: -3;
--speedXMod: 1;
--speedZMod: -1;
--perspective: 1200px;
}
body{perspective: var(--perspective);}
body,h1{transform-style: preserve-3d; }
}
@layer text {
h1 {
position: relative;
animation: spin3d var(--spinDuration) linear infinite;
span {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%, 0) rotateY(calc(var(--i) * 360deg)) translateZ(var(--radius-text));
backface-visibility: visible;
}
}
@keyframes spin3d {
0% {transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);}
100% {transform:
rotateX(calc(360deg * var(--speedXMod)))
rotateZ(calc(360deg * var(--speedZMod)))
rotateY(calc(360deg * var(--speedYMod)));
}
}
}
@layer box {
dialog {
width: calc(2 * var(--radius));
backdrop-filter: blur(var(--blur));
transform: translateZ(0);
background: radial-gradient(var(--c-bg) 20%, rgb(from var(--c-bg) r g b / 0));
&:hover {
backdrop-filter: unset;
background-image: radial-gradient(
circle at 50% 50%,
transparent 0% 35%,
var(--c-bg) 35% 100%
);
background-repeat: repeat;
background-size: 3px 3px;
}
}
}
@layer base {
:root {
--c-black: #0a0a0a;
--c-white: #fff;
--s-line: 1px;
--c-line: var(--c-black);
--c-bg: var(--c-white);
font-family: sans-serif;
}
* {text-box: trim-both cap alphabetic;}
body {
display: grid;
place-content: center;
align-items: center;
min-height: 100dvh;
background: var(--c-bg);
color: var(--c-black);
& > * {grid-area: 1 / 1;}
}
h1 {
margin: 0;
padding: 0;
font-weight: 500;
font-size: calc(var(--radius) * 0.7);
pointer-events: none;
}
dialog {
position: relative;
grid-area: 1 / 1;
border: var(--s-line) solid var(--c-line);
padding: 0;
border-radius: 50%;
aspect-ratio: 1;
background: none;
}
}
</style>
</head>
<body>
<dialog open></dialog>
<h1 data-splittext>Текст Крутится</h1>
<script>
const $h1 = document.querySelector("[data-splittext]");
const letters = $h1.textContent.split("");
$h1.innerHTML = letters.map((c,i) =>`<span style="--i: ${i / (letters.length + 1)};">${c}</span>`).join("");
</script>
</body>
</html><div class="main-promo__slider swiper-container" data-promo-slider>
<div class="main-promo__slider-holder swiper-wrapper">
{if (!isset($smarty.server.HTTP_USER_AGENT) || stripos($smarty.server.HTTP_USER_AGENT, 'Chrome-Lighthouse') === false) }
{foreach $alldata as $item}
{if !empty($item->url)}
{*если есть ссылка*}
<a href="{$item->url}"
class="main-promo__slider-slide swiper-slide"
style="background-image: url('/storage/slider/{$item->img}')"
target="_blank"
data-swiper-autoplay="{$item->showTime}">
{if !empty($item->mintext) || !empty($item->title)}
<div class="main-promo__slider-slide-content">
{if !empty($item->title)}
<p class="main-promo__slider-slide-title">{$item->title}</p>
{/if}
{if !empty($item->mintext)}
<p class="main-promo__slider-slide-text">{$item->mintext|truncate:200}</p>
{/if}
</div>
{/if}
</a>
{else}
{*если нет ссылки*}
<div class="main-promo__slider-slide swiper-slide"
data-swiper-autoplay="{$item->showTime}">
style="background-image: url('{[$item->img, $urlg]|resize:[1920, 700, 0, 'fullsize' => false]}')">
{if !empty($item->mintext) || !empty($item->title)}
<div class="main-promo__slider-slide-content">
{if !empty($item->title)}
<p class="main-promo__slider-slide-title">{$item->title}</p>
{/if}
{if !empty($item->mintext)}
<p class="main-promo__slider-slide-text">{$item->mintext|truncate:200}</p>
{/if}
</div>
{/if}
</div>
{/if}
{/foreach}
{/if}
</div>
</div>window.dataLayer.push({ ecommerce: null }); будет работать не так. Не экономьте кавычки.
function updateRecords(id, prop, value) {
if(collection.hasOwnProperty(id))if(prop!="tracks"){
if(value!=""){collection[id][prop]=value;}else{delete(collection[id][prop])}
}else{
if(!collection[id].hasOwnProperty("tracks"))collection[id]["tracks"]=[];
if(value!="")collection[id]["tracks"].push(value)
}
return collection;
}<input id="inMac">
<select id="typeMac">
<option value=0>XX-XX-XX-XX-XX-XX</option>
<option value=1>xxxx.xxxx.xxxx</option>
<option value=2>xx:xx:xx:xx:xx:xx</option>
<option value=3>xxxxxxxxxxxx</option>
</select><button onclick='a=[0,0,0,0,0,0].fill("([1-9abcdef]{2})");document.querySelector("#inMac").value=[x=>x.map(x=>x.toUpperCase()).join("-"),x=>x[0]+x[1]+"."+x[2]+x[3]+"."+x[4]+x[5],x=>x.join(":"),x=>x.join("")][document.querySelector("#typeMac").value](document.querySelector("#inMac").value.toLowerCase().split(RegExp([a.join("[\-\:]"),[0,0,0].fill(a[0]+a[0]).join("."),a.join()].join("|"))).filter(x=>x&&x.length==2))'>JUST DO IT</button>