123 lines
4.1 KiB
HTML
123 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|||
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
|||
|
|
<title>Карточки с Bootstrap</title>
|
|||
|
|
<style>
|
|||
|
|
.card {
|
|||
|
|
margin: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#image-preview {
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 200px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row" id="card-container">
|
|||
|
|
<!-- Здесь будут отображаться карточки -->
|
|||
|
|
</div>
|
|||
|
|
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Добавить карточку</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Модальное окно -->
|
|||
|
|
<div class="modal" id="myModal">
|
|||
|
|
<div class="modal-dialog">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
|
|||
|
|
<!-- Заголовок модального окна -->
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<h4 class="modal-title">Добавить карточку</h4>
|
|||
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Тело модального окна -->
|
|||
|
|
<div class="modal-body">
|
|||
|
|
<label for="image-input">Выберите изображение</label>
|
|||
|
|
<input type="file" id="image-input" onchange="previewImage()" accept="image/*">
|
|||
|
|
<img id="image-preview" alt="Image Preview" class="img-fluid">
|
|||
|
|
<label for="text-input">Введите текст</label>
|
|||
|
|
<textarea class="form-control" id="text-input" placeholder="Введите текст"></textarea>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Подвал модального окна -->
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-success" onclick="addCard()">Добавить</button>
|
|||
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
|||
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
let cardCounter = 0;
|
|||
|
|
|
|||
|
|
function addCard() {
|
|||
|
|
cardCounter++;
|
|||
|
|
|
|||
|
|
const cardContainer = document.getElementById('card-container');
|
|||
|
|
|
|||
|
|
const card = document.createElement('div');
|
|||
|
|
card.className = 'col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 p-0 border-0 card';
|
|||
|
|
card.innerHTML = `
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="row g-0">
|
|||
|
|
<div class="col-sm-12 col-6">
|
|||
|
|
<img class="card-img-top" src="img/15.png" alt="Card image cap">
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-12 col-6">
|
|||
|
|
<div class="card-body p-2">
|
|||
|
|
<h5 id="cart-text-cust" class="card-title">₽50,200,00</h5>
|
|||
|
|
<p class="card-text">Тайский дракон </p>
|
|||
|
|
<label for="text-input-${cardCounter}">Введите текст</label>
|
|||
|
|
<textarea class="form-control" id="text-input-${cardCounter}" placeholder="Введите текст" readonly>${document.getElementById('text-input').value}</textarea>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-footer p-2">
|
|||
|
|
<!-- Дополнительные элементы внизу карточки -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
|
|||
|
|
cardContainer.appendChild(card);
|
|||
|
|
|
|||
|
|
// Очистить поля модального окна после добавления карточки
|
|||
|
|
document.getElementById('image-input').value = '';
|
|||
|
|
document.getElementById('text-input').value = '';
|
|||
|
|
$('#myModal').modal('hide');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function previewImage() {
|
|||
|
|
const input = document.getElementById('image-input');
|
|||
|
|
const preview = document.getElementById('image-preview');
|
|||
|
|
const file = input.files[0];
|
|||
|
|
|
|||
|
|
if (file) {
|
|||
|
|
const reader = new FileReader();
|
|||
|
|
|
|||
|
|
reader.onload = function (e) {
|
|||
|
|
preview.src = e.target.result;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
reader.readAsDataURL(file);
|
|||
|
|
} else {
|
|||
|
|
preview.src = '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|