Андрей Шубников

Проще всего display: grid + подложка на svg и медиа-запросами переключать подложки.

https://laravel.com/docs/7.x/eloquent-relationships

Если вы считаете, что конструкторы смогут заменить полноценного фронтендер разработчика, то мой вам совет не лезле в веб. Ибо толку от фронта если есть зеро блоки? И толку от Бека если есть всякие элементоры?
Программирование нужно любить, а потом зарабатывать, а не любить зарабатывать а потом программирование.
P.S. вот сколько орут что есть всякие тильда/Викс/ что там ещё? И верстка вот вот умрет, а ко мне как приходили за версткой, так и приходят по сей день.

Код который будет вызываться в JS файле чтобы получить ответ от сервера где вы должны указать HTTP путь к файлу с кодом PHP указанным ниже.

$.ajax({
    url: url.to.php.file,
    type: 'POST',
    data: {
    // тут пишите данные в виде массива по которым нужно отфильтровать, что-то...
    },
    dataType: 'json',
    contentType: 'application/json',
    json: true
}).done(function(data){
    console.log(data);
}).always(function(dataError){
    console.log(dataError);
});

Код PHP который отдаст вам JSON

<?php
        header('Content-Type: application/json');
    $resultJson = array("text" => "Hello!");
    echo json_encode($resultJson);
?>

https://laravel.com/docs/7.x/eloquent#query-scopes

Есть скрипт который нужно после события click загружать заново.

Здесь что-то очень, очень неправильно.

Скрипт загружается единственный раз и сохраняется в кэше браузера. Выполнять его можно многократно.

Хорошо бы привести содержание скрипта в вопросе. Под «спойлером», если он длинный. Обязательно обернув в тег <code>.

Можно обернуть код файла в функцию. И вызывать её сразу при загрузке скриптов. И потом по клику.

Например, в загружаемом скрипте было так:
my_script.js

var message = "Привет Хабр";
alert(message);

А вы сделайте так:
my_script.js

function my_func() {
  var message = "Привет Хабр";
  alert(message);
}

и в коде страницы:

<button id="btn">нажми</button>

<script src="my_script.js"></script>
<script>
document.addEvenListener('load', my_func); // при загрузке страницы выполнить
document.getElementById('btn').addEventListener('click', my_func); // и при нажатии кнопки
</script>

Работает https://jsfiddle.net/hkyamdbg/
Но если только 2 слоя, картинка и цвет и цвет это нижний слой, то пишут просто одно обычное свойство background, начиная его с цвета.
background: red url()

Responsive Display В самом начале документации..

const items = [
    {
        name: 'Apple',
        dropChance: 0.7
    },
    {
        name: 'Knife',
        dropChance: 0.25
    },
    {
        name: 'Spoon',
        dropChance: 0.25
    },
    {
        name: 'Ice Cream',
        dropChance: 0.1
    }
];

const lerp = (min, max, value) => ((1 - value) * min + value * max);

const drop = items => {
    const total = items.reduce((accumulator, item) => (accumulator + item.dropChance), 0);
    const chance = lerp(0, total, Math.random());

    let current = 0;
    for (const item of items) {
        if (current <= chance && chance < current + item.dropChance) {
            return item;
        }

        current += item.dropChance;
    }
};

Можно ли с помощью php защитить сайт от воровства?

Можно. Запускать сайт на localhost

base64

В модели прописываешь:

public function getFioAttribute()
    {
        return $this->firstname . " " . $this->lastname;
    }

Потом вызываешь:

$model->fio;

Может взять даже на виртуальной лаборатории поставить демо решение и скачать потом папки решения из components и modules. Но не все решения смогут так запустится.

Отложить загрузку на 5 секунд - выход, но грубоватый (имхо конечно). Я делаю по-другому - оборачиваю код в скролл-ивент + задержка в 1 секунду. То есть, сайт загрузился быстро, и как только пользователь начал скроллить хоть чуть-чуть - секундный таймаут и загрузка дополнительных ресурсов. Гугл доволен, пользователи вообще не замечают задержки:

var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {
            // Здесь все эти тормознутые трекеры, чаты и прочая ересь,
            // без которой жить не может отдел маркетинга, и которые
            // дико бесят разработчиков, когда тот же маркетинг приходит
            // с вопросом "почему сайт медленно грузится, нам гугл сказал"
        }, 1000)
    }
});