document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', function () {
btn.disabled = true;
btn.textContent = 'Идет поиск. Ждите пожалуйста.'
});
});<div class="wrapper">
<div class="header"> <!-- блок header -->
<div class="header__content"> <!-- элемент блока header -->
<div class="container"></div>
</div>
</div>
<div class="main">
<div class="container"></div>
</div>
<div class="footer">
<div class="container">
<div class="footer__logo"></div>
<div class="footer__main"></div>
<div class="footer__links"></div>
</div>
</div>
</div>.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}<div class="wrapper">
<div class="header"> ... </div>
<div class="wrapper__main main"> <-- Блок main и одновременно элемент враппера -->
<div class="container"></div>
</div>
<div class="footer"> ... </div>
</div>.wrapper__main {
flex-grow: 1;
}<div class="footer">
<div class="container">
<div class="footer__logo"></div>
<div class="footer__main"></div>
<div class="footer__links"></div>
</div>
</div><div class="footer">
<div class="footer__container container">
<div class="footer__logo"></div>
<div class="footer__main"></div>
<div class="footer__links"></div>
</div>
</div>// общие стили контейнера (например центрирование)
.container {
max-width: 1000px;
margin-inline: auto;
}
// стили контейнера в подвале
.footer__container {
display: flex;
justify-content: space-between;
}$order = 'price';
usort($filtered_items, function($a, $b) use ($order){
return ($a[$order] - $b[$order]);
});$order = 'price';
usort($filtered_items, fn($a, $b) => ($a[$order] - $b[$order]));// добавляем стиль
order_active.style.flex = '0 1' + choisenitemwidth + 'px';
// обнуляем
order_active.style.flex = '';.blog-inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1rem;
}
.blog__card:first-child {
grid-row: span 3;
}<?php $conditional = true; ?>
<div class="<?= $conditional ? 'hidden' : 'display-contents' ?>">
<?php echo 'content'; ?>
</div>.display-contents {
display: contents;
}<?php if (true): ?>
<div class="hidden">
<?php echo 'content'; ?>
</div>
<?php else: ?>
<?php echo 'content'; ?>
<?php endif; ?>const type_input = document.getElementById("type_input").value.toLowerCase();
const type_names = ['фильм', 'сериал', 'мультсериал', 'мультфильм', 'аниме'];
const type_index = type_names.indexOf(type_input);
let type = 0;
if (type_index === -1) {
alert('Добавьте или исправьте тип');
} else {
type = type_index + 1; // значение для базы данных (если нужно 1-based)
}
<button id="play" data-source="https://www.youtube.com/embed/dQw4w9WgXcQ">Play</button>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe id="youtube-video" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.modal.show {
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
position: relative;
background-color: #fefefe;
padding: 20px;
border-radius: 8px;
max-width: 800px;
width: 90%;
}
.close {
position: absolute;
top: 10px;
right: 20px;
font-size: 28px;
font-weight: bold;
color: #aaa;
cursor: pointer;
}
.close:hover {
color: #000;
}
iframe {
width: 100%;
aspect-ratio: 16/9;
}
</style>
<script>
const playButton = document.getElementById('play');
const modal = document.getElementById('modal');
const closeButton = document.querySelector('.close');
const iframe = document.getElementById('youtube-video');
playButton.addEventListener('click', () => {
const videoUrl = playButton.getAttribute('data-source');
iframe.src = videoUrl + '?autoplay=1';
modal.classList.add('show');
});
closeButton.addEventListener('click', () => {
modal.classList.remove('show');
iframe.src = '';
});
// Закрытие модального окна при клике вне его
window.addEventListener('click', (event) => {
if (event.target === modal) {
modal.classList.remove('show');
iframe.src = '';
}
});
</script>public function product($slug)
{
$product = Product::where('slug', $slug)->firstOrFail();Route::get('/{category:slug}/{product:slug}',[\App\Http\Controllers\ProductController::class,'product'])
->name('product');
public function product(Category $category, Product $product)
{
return view('product.index', [
'product' => $product,
'cat_slug' => $category->slug,
]);
}