Sagrana

Переформатировал SSD в APFS и импорт завелся.

Пусть это будет как не идеальный пример с пространством для творчества и развития https://codepen.io/KataevAS/pen/zYXpdoV

Накидал на скорую руку, один из вариантов:

Все зависит от того какие изображения будут и какие позиции они должны занимать. Для гибкости и адаптивности, нужно немного подумать над формулами, но основная суть думаю ясна.

один из первых результатов из гугла - https://driverjs.com/

https://habr.com/ru/sandbox/163129/
https://www.litmus.com/blog/the-ultimate-guide-to-...

Нужно слайдеры в цикле обрабатывать. Выше уже предложили одно из решений, но в нём есть нюанс - создание функций в цикле достаточно дорого по ресурсам (мы же заботимся о наших пользователях?), благо есть альтернатива, в качестве слушателя события может быть не только функция, но и объект с методом handleEvent:

class PrevClickListener {
    constructor(track, next) {
        this.track = track;
        this.next = next;
    }

    handleEvent() {
        const {track, next} = this;
        next.removeAttribute('disabled');
        track.scrollTo({
            left: track.scrollLeft - track.firstElementChild.offsetWidth,
            behavior: 'smooth',
        });
    }
}

class NextClickListener {
    constructor(track, prev) {
        this.track = track;
        this.prev = prev;
    }

    handleEvent() {
        const {track, prev} = this;
        prev.removeAttribute('disabled');
        track.scrollTo({
            left: track.scrollLeft + track.firstElementChild.offsetWidth,
            behavior: 'smooth',
        });
    }
}

class TrackScrollListener {
    constructor(track, prev, next) {
        this.track = track;
        this.prev = prev;
        this.next = next;
    }

    handleEvent() {
        const {track, next, prev} = this;
        const trackScrollWidth = track.scrollWidth;
        const trackOuterWidth = track.clientWidth;

        prev.removeAttribute('disabled');
        next.removeAttribute('disabled');

        if (track.scrollLeft <= 0) {
            prev.setAttribute('disabled', '');
        }

        if (track.scrollLeft === trackScrollWidth - trackOuterWidth) {
            next.setAttribute('disabled', '');
        }
    }
}

const sliders = document.querySelectorAll('[data-slider]');
for (const slider of sliders) {
    const track = slider.querySelector('[data-slider-track]');
    const prev = slider.querySelector('[data-slider-prev]');
    const next = slider.querySelector('[data-slider-next]');
    if (!track || !prev || !next) continue;

    prev.addEventListener('click', new PrevClickListener(track, next));
    next.addEventListener('click', new NextClickListener(track, prev));
    track.addEventListener('scroll', new TrackScrollListener(track, prev, next));
}

Нарисовать надо по пиксельной сетке, иллюстрирую:


Если дизайнер изначально об этом не думал, когда рисовал (точки поставлены наобум, либо используется не целочисленная величина обводки) - вы с этим ничего не сделаете.

На экранах повышенной плотности, к слову, эффект менее заметен (что не особо радует всех остальных).

function getData() {
  return new Promise(resolve => {
    $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
        const kyrs = Math.ceil(100 / data.Valute.KZT.Value * data.Valute.EUR.Value).toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
        resolve(kurs);
    });
  })
}

function func1(kurs) {
  console.log(kurs);
}

function func2(kurs) {
  console.log(kurs);
}

async function go() {
  const kurs = await getData();
  $('#euro').html(kyrs);
  func1(kurs);
  func2(kurs);
}

go();

HTML:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>      
    </ul>
</div>

Css для второй строки:

div{
    width:100%;  
}
ul{  
    padding:0;
    margin:0;
    width:100%;
    text-align:right;
}
li{
    width:50px;
    height:50px;    
    margin:20px 5px;
    padding:5px;
    text-align:center;   
    list-style:none;  
    display:inline-block;
    font-size:25px;  
    line-height:50px;
    font-weight:500;
    background:#fc9090;
    color:#FFF;
  font-family:sans-serif;
}
li:nth-child(1){
  width:100px;
  height:100px;
  float:left;
  line-height:100px;
  font-size:50px;
}

css для третьей строки:

div{
    width:100%;  
}
ul{  
    padding:0;
    margin:0;
    width:100%;
    text-align:right;
}
li{
    width:100px;
    height:100px;    
    margin:20px 5px;
    padding:5px;
    text-align:center;   
    list-style:none;  
    display:inline-block;
    line-height:100px;
    font-size:50px;
    font-weight:500;
    background:#fc9090;
    color:#FFF;
    font-family:sans-serif;
}
li:nth-child(1),li:nth-child(2){
  float:left;
}
li:nth-child(5){
display:none;
}

Косвенная информация о месторасположении
- по ip адресу клиента и по времени ответа можно выявить наличие vpn и даже расстояние от клиента до выходной ноды vpn
- наличие прокси, с теми же возможностями, а если прокси внезапно на том же адресе что и выходной ip и анонимна, то анализ может быть более подробный

Атака на сеть
- можно анализировать локальную сеть запросами, подбирая ip адреса и типовые порты можно обнаружить наличие роутера и даже его тип (cors не дает читать содержимое https->http но есть информация о заголовках и самом факте верного ответа), помимо роутера программисты часто в десктопных приложениях поднимают веб сервер (особо криворукие - без авторизации), это можно обнаружить и при наличии ошибок даже на него повлиять (повторяю, пользователь заходит на веб сайт, и его локальная сеть может быть просканирована, уязвимые приложения найдены и атакованы... я наблюдал как сбер онлайн делал такое сканирование, делая запросы к localhost по разным портам), примером таких приложений могут быть remote control медиа плееров.
- XSS/CSRF. открывая уязвимые веб приложения в прозрачном iframe можно двигать его под мышь пользователя таким образом, чтобы пользователь не ведая того, кликак в этом приложении в нужных местах (уязвимое приложение будет открыто с авторизацией пользователя, это оправдано и такие еще встречаются), доступа к данным не будет но действия пользователя пройдут.
- можно просто ddos-ить какой-либо сайт запросами, которые будут идти от пользователя но referer так подделать нельзя, т.е. будет видно кто виновник (понятно что в iframe можно открыть заранее сгенерированные мусорные домены)
Помню в одном веб приложении была ошибка, оно не проверяло результат и случайно ddos-ило гугловский сервис, который в результате отказывал в обслуживании пользователю вне этого веб приложения.
- используя webrtc можно даже вылезти в локальную сеть (найти соседний браузер без proxy/vpn если там тоже открыта страница сервера)
Было время, когда при использовании java applet/flash/silverlight и прочих нативных аддонов, можно было еще сильнее вылезать из браузерной песочницы и вытворять в сети пользователя лютую дичь.
- есть какие то направления в атаке через уведомления (если ты подписываешься на них на сайте, всплывающее окошко с ним открывается в ином контексте безопасности чем оригинальная страница), я не изучал но наверняка тут тоже можно что то вытянуть

Типовая информация о железе
- характеристики монитора (разрешение, масштабирование, глубина цвета - хотя все уже 32бит но слабые железки могут быть все еще 16битными)
Из размера окна можно вытянуть информацию об операционной системе, нестандартном оборудовании и установленных темах, меняющих его размер
- производительность cpu и gpu замеряя их бенмчмарками
можно вычислять размер кеша и от сюда косвенно получать информацию о модели процессора и даже о вендоре intel/amd/... arm
- почти полную информацию о gpu и даже попытку скрыть ее за виртуальной машиной
- через тайминги и сетевой бенчмарк можно собрать информацию о скорости сети (ethernet или wifi)
- через storage api можно собрать бенчмарки по скорости жесткого диска, как минимум можно понять hdd или ssd
- инструмент ввода мышь/тачпад, даже если ты на планшетнике запускаешь мобильный браузер в режиме и в режиме PC, по тому как работает пользователь с тачпадом можно вытянуть информацию (отсутствие mousemove там где оно должно быть)

Атака на железо
- до сих пор я вижу сообщения о закрываемых уязвимостях доступа к gpu ram при использовании особенностей gpu, доступные в т.ч. из браузера, т.е. буквально вытаскивают изображение экрана и содержимое окон соседних приложений... это не просто, не гарантированно но при наличии желания и ресурсов, адресные атаки возможны, не удивлюсь если так будут воровать веса приватных нейронок.
- из производительности кеша процессора вытягивают информацию об оперативной памяти соседних процессов (уязвимости Meltdown/Spectre) но это еще сложнее

Информацию о софте
- класс браузера (firefox/chromium и при желании opera/edge/...) по поведению javascript и многим специфическим особенностям и само собой по заголовках запроса по useragent (это само собой подменяется)
- наличие некоторых плагинов (по тому что они добавляют на странице, например api или специфические изменения)
например блокировщики рекламы выявляются не сложно, правда лучше прикручивать автоматизацию на основе публикуемых правил

Доступ к clipboard
- clipboard api не дает доступа к буферу обмена, но при клике на страницу возможна его подмена, типовой пример - пользователь держит в буфере финансовую информацию (номер счета например) и кликая по 'сайту с инструкциями' может получить подмену содержимого буфера и вставить эту подмену как адрес для денежного перевода.

Передача сообщений через звук
- Веб приложения, на клик, могут включить воспроизведение звука на высоких частотах, не слышимых человеческим ухом (ультразвук или инфразвук), но который способно уловить соседнее устройство на котором уже запущено соответствующее приложение или веб с открытым доступом (например у тебя в фоне открыта страница, постоянно передающее звуковые сообщения, тут же ты голосом общаешься в публичном чате, владелец сайта может использовать это чтобы связать тебя в этом чате с открытой веб страницей)

p.s. а сколько открывается дивных возможностей, когда веб сервис запрашивает доступ к чему то еще и пользователь его разрешает, типа камера, положение по gps, доступ к clipboard,..

Как бороться - отдельное железо для чувствительных вещей, или наоборот, отдельное железо для развлечения и интернета. Всегда помнить об этом (та же атака через звук).

body {
  background: black no-repeat / cover;
  background-image: var(--bg-image-mobile);
}
@media (min-width: 768px) {
  body {
    background-image: var(--bg-image-tablet);
  }
}
@media (min-width: 1200px) {
  body {
    background-image: var(--bg-image-desktop);
  }
}

<body style="
  --bg-image-mobile: url(/images/bg-image-mobile.jpg);
  --bg-image-tablet: url(/images/bg-image-tablet.jpg);
  --bg-image-desktop: url(/images/bg-image-desktop.jpg);
">

</body>

Как сверстать такой каталог?

Таблицей, и не парится.
Либо гриды. Флексы здесь вообще плохо вписываются.

Можно, используйте await:

window.addEventListener('load', async () => {
    
    var data1 = await $.getJSON('https://json файл разные');
    
    console.log('Получены данные:', data1);
    
    $(".mypanel").html(data1.hls);
    
    var A = ',{"get":"';
    var B = '",';
    var C = '"img":"';
    var D = '"}';
    var master = [A,data1.hls,B,C,D];
    
    var data2 = await $.post('zapros2.php', {name1: master});
    
    console.log('Получены еще данные:', data2);
    
});

Для справки: при AJAX запросах jQuery возвращает объект Deferred, который обратно совместим с Promise.

Соответственно к нему можно применять await.

https://developer.mozilla.org/en-US/docs/Web/JavaS...

// Demonstrate selected international locales
var locales = [
  undefined,  // Your own browser
  'en-US',    // United States
  'de-DE',    // Germany
  'ru-RU',    // Russia
  'hi-IN',    // India
  'de-CH',    // Switzerland
];
var n = 100000;
var opts = { minimumFractionDigits: 2 };
for (var i = 0; i < locales.length; i++) {
  console.log(locales[i], n.toLocaleString(locales[i], opts));
}

результат

undefined '100 000,00'
en-US 100,000.00
de-DE 100.000,00
ru-RU 100 000,00
hi-IN 1,00,000.00
de-CH 100’000.00

Intl.NumberFormat

const number = 123456.789;

new Intl.NumberFormat('ru-RU').format(number);
// "123 456,789"

по умолчанию { style: 'decimal' }

Но..

new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 6 })
  .format(123456.789012345);
// "123 456,789012" - после запятой не разделяет

correct_date = `${hour}:${min}`;
// correct_date = `${hour}:${min}:${sec}`;

const getTimeString = () => {
    const subbed = new Date();
    const hour = subbed.getHours().toString().padStart(2, '0');
    cosnt min = subbed.getMinutes().toString().padStart(2, '0');
    const sec = subbed.getSeconds().toString().padStart(2, '0');

    return  `${hour}:${min}:${sec}`;
}

let clock = document.getElementById('clock')
setInterval(() => {
    clock.innerHTML = getTimeString();
}, 1000);

Прям так и писать, если нечетный и последний, то..

&:nth-child(2n-1):last-child {
    grid-column: span 2
  }