121 lines
5.7 KiB
HTML
121 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Galery</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|||
|
|
<link rel="stylesheet" href="./myStyle.css">
|
|||
|
|
<!-- Bootstrap CSS -->
|
|||
|
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
|||
|
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
|||
|
|
<!-- Bootstrap JS -->
|
|||
|
|
<script defer src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body class="bg-image overflow-visible pageBackground">
|
|||
|
|
<!--Шапка-->
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<a class="navbar-brand btn btn-outline-dark" href="./index.html" >
|
|||
|
|
<img src="./img/lable.png" alt="Logo" height="60" class="align-text-top">
|
|||
|
|
</a>
|
|||
|
|
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<img src="./img/togglerIcon.png" alt="Toggler" height="40">
|
|||
|
|
</button>
|
|||
|
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
|||
|
|
<ul class="navbar-nav">
|
|||
|
|
<li class="nav-item ">
|
|||
|
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./index.html">Главная</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item ">
|
|||
|
|
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="./Galery.html" >Галерея</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item " >
|
|||
|
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Courses.html">Курсы</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item " >
|
|||
|
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Contacts.html" >Контакты</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item " >
|
|||
|
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Reviews.html" >Отзывы</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item " >
|
|||
|
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Admin.html" >Админ</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
<!--Шапка-->
|
|||
|
|
<!--Галерея-->
|
|||
|
|
<div class="container mx-auto my-5 p-2 fw-bold rounded-8 formStyle formSizeStyle hfitcon">
|
|||
|
|
<div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-3 pb-3 text-center response-container" id="response-container">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--Галерея-->
|
|||
|
|
<!-- Модальное окно -->
|
|||
|
|
<div class="modal fade " id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel">
|
|||
|
|
<div class="modal-dialog modal-dialog-centered modal-fullscreen mx-auto modal-dialog-style">
|
|||
|
|
<div class="modal-content rounded-8">
|
|||
|
|
<div class="modal-body text-center rounded-8 modalStyle hfitcon width-100">
|
|||
|
|
<button type="button" class="btn-close position-absolute top-0 end-0 me-1" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
|||
|
|
<img id="image" class="mx-auto width-100" src="" alt="image">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
var exampleModal = document.getElementById('imageModal')
|
|||
|
|
exampleModal.addEventListener('show.bs.modal', function (event){
|
|||
|
|
var button = event.relatedTarget
|
|||
|
|
var source = button.getElementsByTagName('img').item(0).getAttribute('src')
|
|||
|
|
document.getElementById('image').setAttribute("src", source.toString())
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var imgContainer = document.getElementById('response-container')
|
|||
|
|
function filling(line){
|
|||
|
|
const Container =
|
|||
|
|
`<button class="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
|||
|
|
<img src="` + line + `" class="rounded-8 width-100" alt="image">
|
|||
|
|
</button>`
|
|||
|
|
imgContainer.innerHTML += Container
|
|||
|
|
}
|
|||
|
|
fetch('imgs.txt')
|
|||
|
|
.then(response => response.text())
|
|||
|
|
.then(data => {
|
|||
|
|
readFile(data)
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('Ошибка:', error);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function readFile(file) {
|
|||
|
|
console.log(file);
|
|||
|
|
const arr = file.split(/\r?\n/gm)
|
|||
|
|
arr.map(line => filling(line))
|
|||
|
|
console.log('done')
|
|||
|
|
imgContainer.innerHTML += `<button onclick="file.click()" type="button" class="col-xxl-4 col-lg-6 col-12 p-0 btn btn-dark mx-auto my-4 rounded-8 fw-bold fs-1 PictureButton">
|
|||
|
|
+
|
|||
|
|
</button>
|
|||
|
|
<input id="file" type="file" hidden>`
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<!--Подвал-->
|
|||
|
|
<footer class="position-sticky top-100 footer-style">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
|||
|
|
Техническая поддержка <br>
|
|||
|
|
8-800-555-3535 <br>
|
|||
|
|
valitzhoska73@gmail.com
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
|||
|
|
Работаем без выходных с 8:00 до 21:30
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
<!--Подвал-->
|
|||
|
|
</body>
|
|||
|
|
</html>
|