<button class="btn-chapter" data-chapter="1">Глава 1</button>
<button class="btn-chapter" data-chapter="2">Глава 2</button>
<button class="btn-chapter" data-chapter="3">Глава 3</button>
<button class="btn-chapter" data-chapter="4">Глава 4</button>
<button class="btn-chapter" data-chapter="5">Глава 5</button>
<div class="chapter" id="chapter-1"><h2>Глава 1: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-2"><h2>Глава 2: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-3"><h2>Глава 3: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-4"><h2>Глава 4: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-5"><h2>Глава 5: Основы Фотошопа - Растровая графика</h2></div>.chapter {
display: none;
}
.chapter.is-open {
display: block;
}document.addEventListener('DOMContentLoaded', function() {
const allChapters = document.querySelectorAll('.chapter');
const closeAllChapters = () => allChapters.forEach(el => el.classList.remove('is-open'));
const openChapterById = id => document.getElementById(id).classList.add('is-open');;
document.querySelectorAll('.btn-chapter').forEach(btn => {
btn.addEventListener('click', () => {
closeAllChapters();
openChapterById(`chapter-${btn.dataset.chapter}`);
});
});
});$query = mysqli_query($link,"UPDATE tovars SET img = '$names$name' WHERE id = '$id'");<form method="post" enctype="multipart/form-data">
<label for="tovar_full">Изображение товара</label>
<input type="hidden" name="id" value=" тут айди товара, к которому нужно прикрепить картинку " />
<input type="file" name="filename" size="10" />
<input type="submit" value="Загрузить" />
</form>$names = "https://smm-services.ru/admin/";
$id = $_POST['id']; // получить ID из формы
$query = mysqli_query($link,"UPDATE tovars SET img = '$names$name' WHERE id = '$id'");Поэтому и попросил какой-нибудь хороший визуализатор, если кто часто пользуется, где можно будет реализовать такое и потом CTR+C, CTR+V.
<head>
<script>
const theme = localStorage.getItem('color-theme') === 'dark' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-theme', theme);
</script>document.querySelectorAll('.theme-toggle').forEach(el => {
el.addEventListener('click', () => {
const theme = document.documentElement.getAttribute('data-color-theme') === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-color-theme', theme);
localStorage.setItem('color-theme', theme);
});
});:root {
--body-bg: white;
}
[data-color-theme="dark"] {
-body-bg: black;
}document.documentElement.classList.add('dark-theme');
:root {
--body-bg: white;
}
html.dark-theme {
-body-bg: black;
}<div class="wrapper">
<img src="">
<button class="btn1"></button>
</div>.wrapper {
position: relative;
}
.wrapper img {
width: 100vw;
height: 100vh;
display: block;
}
.btn1 {
position: absolute;
top: подобрать значение в процентах;
left: подобрать значение в процентах;
}.f-carousel__viewport,
.f-carousel__track,
.is-classic .f-thumbs__viewport {
height: auto !important;
}>= или <=, в зависимости от вашей логики.