RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]let users = [
{
name: 'Soltan',
img: '4_user.webp',
country: 'Almaty',
color: '#41932C',
url:'vk.com',
action: 'могу созвониться',
action_svg: 'phone.svg',
time: ['18:00', '19:00', '20:00'],
key:'1'
},
{
name: 'Also',
img: '5_user.webp',
country: 'UKG',
color: '#2C3693',
url:'vk.com',
action: 'могу созвониться',
action_svg: 'phone.svg',
time: ['18:00', '19:00', '20:00'],
key:'0'
},
{
name: 'Maria',
img: '6_user.webp',
country: 'UKG',
color: '#000000',
url:'vk.com',
action: 'могу созвониться',
action_svg: 'phone.svg',
time: ['18:00', '19:00', '20:00'],
key:'0'
},
{
name: 'Nargiza',
img: '7_user.webp',
country: 'Almaty',
color: '#e13daf',
url:'vk.com',
action: 'могу созвониться',
action_svg: 'phone.svg',
time: ['18:00', '19:00', '20:00'],
key:'0'
}
]
users.length >= 4 ? document.querySelector('div.container_users').classList.add("more_users") : document.querySelector('div.container_users').classList.add("fewer_users");
let html = ``;
let images ='';
users.forEach((el)=> {
el.time.forEach(function(item){
images += '<div><img src="assets/images/'+el.action_svg+'" alt="'+el.action+'"><span>'+item+'</span></div>';
})
html += `
<div class="container_users_user">
<div class="user_country mr">${el.country}</div>
<div class="user_cart" style ="--color: ${el.color};">
<picture><source srcset="assets/images/${el.img}" type="image/webp"> <img src="img/image.png" alt="Пользователь ${el.name}"></picture>
<div class="${el.key == '1' ? "user_creator" : "user"} mr"><a href="${el.url}">${el.name}</a></div>
<div class="user_times mr">
<div class="times_scroll">${images}</div>
</div>
</div>
</div>
`
images ='';
})
document.querySelector('.container_users').innerHTML = html
document.addEventListener('DOMContentLoaded', function(){
const script = document.createElement('script');
script.src = 'assets/js/scrolling_time.js';
document.head.appendChild(script);
}).more_users{
grid-template-columns: 1fr 1fr 1fr 1fr;
overflow-y: scroll;
}
.fewer_users{
grid-auto-flow: column;
}