<h1>Выбор вагона</h1>
<h1>
<label for="passengers">Кол-во пассажиров:</label>
<input type="number" id="passengers" name="passengers" min="1" max="4" value="1"></h1>
<h2>Выбранные места: <span id="selected-seats"></span></h2>
<h2>Плацкарт</h2>
<div class="wagon-blocks">
<!-- Блоки вагонов для плацкарта -->
<div class="wagon-block">
<h3>Вагон №1</h3>
<p>Мест: 54</p>
<p>Свободных мест: 12</p>
<button class="btn">Выбрать места</button>
<div class="block_with_text">
<div>
<svg width="1300" height="150" viewBox="0 0 910 150" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_1_164)"> <path d="M10 0.75H900C905.109 0.75 909.25 4.89137 909.25 10V140C909.25 145.109 905.109 149.25 900 149.25H10C4.89137 149.25 0.75 145.109 0.75 140V10C0.75 4.89137 4.89137 0.75 10 0.75Z" stroke="#AAAAAA" stroke-width="1.5" shape-rendering="crispEdges"/>
</g> <line x1="140.75" x2="140.75" y2="85" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="140.75" y1="108" x2="140.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="220.75" y1="108" x2="220.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="300.75" y1="108" x2="300.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="380.75" y1="108" x2="380.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="460.75" y1="108" x2="460.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="540.75" y1="108" x2="540.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="620.75" y1="108" x2="620.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="700.75" y1="108" x2="700.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="780.75" y1="108" x2="780.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="860.75" y1="108" x2="860.75" y2="150" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="220.75" x2="220.75" y2="85" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="300.75" x2="300.75" y2="86" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="380.75" x2="380.75" y2="86" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="460.75" x2="460.75" y2="86" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="540.75" x2="540.75" y2="86" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="620.75" x2="620.75" y2="86" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="700.75" x2="700.75" y2="86" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="780.75" x2="780.75" y2="86" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="860.75" x2="860.75" y2="86" stroke="#AAAAAA" stroke-width="1.5"/>
<line x1="6" y1="135.75" x2="80.0187" y2="135.75" stroke="#AAAAAA" stroke-width="2"/>
<path d="M78.0031 114H83.0031C83.5554 114 84.0031 114.448 84.0031 115V119C84.0031 119.552 83.5554 120 83.0031 120H79.0031C78.4508 120 78.0031 119.552 78.0031 119V114Z" stroke="#AAAAAA" stroke-width="2"/>
<line x1="110" y1="14" x2="118" y2="14" stroke="#AAAAAA" stroke-width="2"/>
<rect class="seat" x="147" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="226" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="307" y="16" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="386" y="16" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="466" y="16" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="546" y="16" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="626" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="706" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="786" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="147" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="226" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="307" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="386" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="466" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="546" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="626" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="706" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="786" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="147" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="226" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="307" y="56" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="386" y="56" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="466" y="56" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="546" y="56" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="626" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="706" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="786" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="185" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="264" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="345" y="16" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="424" y="16" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="504" y="16" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="584" y="16" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="664" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="744" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="824" y="15" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="185" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="184" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="263" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="345" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="424" y="108" width="30" height="30" data-seat-number="1" rx="5"fill="#D9D9D9"/>
<rect class="seat" x="504" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="584" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="664" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="744" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="824" y="108" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="264" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="345" y="56" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="424" y="56" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="504" y="56" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="584" y="56" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="664" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="744" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<rect class="seat" x="824" y="55" width="30" height="30" data-seat-number="1" rx="5" fill="#D9D9D9"/>
<defs>
<filter id="filter0_d_1_164" x="0" y="0" width="910" height="150" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_164"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_164" result="shape"/>
</filter>
</defs>
</svg>
</div>
</div>
h1 {
font-size: 36px;
font-weight: bold;
margin-bottom: 16px;
}
h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 12px;
}
label {
font-size: 20px;
font-weight: bold;
margin-right: 12px;
}
input[type="number"] {
width: 80px;
padding: 8px;
font-size: 20px;
border-radius: 8px;
border: 2px solid #ccc;
}
.wagon-block {
width: 80%;
margin: 16px 0;
margin-left: 50px;
padding: 24px;
background-color: #f7f7f7;
border-radius: 16px;
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3);
text-align: center;
transition: all 0.2s ease-in-out;
}
.wagon-block h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 12px;
}
.wagon-block p {
font-size: 18px;
margin-bottom: 8px;
}
.selected {
background-color: #2076cc;
color: #fff;
}
#selected-seats,
#selected-seats-2,
#selected-seats-3,
#selected-seats-4,
#selected-seats-5,
#selected-seats-6 {
font-weight: bold;
}
#passenger-forms {
display: flex;
flex-wrap: wrap;
margin-top: 32px;
}
#passenger-forms form {
width: 48%;
margin: 16px 0;
padding: 24px;
border-radius: 16px;
background-color: #f7f7f7;
box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out;
}
#passenger-forms form:hover {
transform: scale(1.02);
box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
}
#passenger-forms label {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
}
#passenger-forms input[type="text"] {
width: 100%;
padding: 10px 8px;
font-size: 18px;
border: none;
border-bottom: 2px solid #ccc;
transition: border-bottom-color 0.3s ease-in-out;
}
#passenger-forms input[type="text"]:focus {
border-bottom-color: #2076cc;
outline: none;
}
.btn {
margin: 16px 0;
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 32px;
border: none;
background-color: #2076cc;
color: #fff;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.btn2,
.btn3,
.btn4,
.btn5,
.btn6 {
margin: 16px 0;
padding: 12px 24px;
font-size: 18px;
font-weight: bold;
text-align: center;
text-decoration: none;
border-radius: 32px;
border: none;
background-color: #2076cc;
color: #fff;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.btn2:hover,
.btn3:hover,
.btn4:hover,
.btn5:hover,
.btn6:hover {
background-color: #143d80;
box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
}
.seat {
fill: lightgrey;
stroke: black;
stroke-width: 1;
cursor: pointer;
}
.seat.selected {
fill: green;
} $('svg').on('click', 'rect', function() {
$(this).toggleClass('active');
});
$('.btn').click(function(){
$(".block_with_text").fadeToggle(100);
});
const passengersInput = document.getElementById('passengers');
const seats = document.querySelectorAll('.seat');
const selectedSeats = [];
function selectSeat() {
const seatNumber = this.getAttribute('data-seat-number');
const isSeatSelected = this.classList.contains('selected');
if (isSeatSelected) {
this.classList.remove('selected');
selectedSeats.splice(selectedSeats.indexOf(seatNumber), 1);
} else {
if (selectedSeats.length < passengersInput.value) {
this.classList.add('selected');
selectedSeats.push(seatNumber);
}
}
const selectedSeatsString = selectedSeats.join(', ');
document.getElementById('selected-seats').textContent = selectedSeatsString;
}
seats.forEach(seat => seat.addEventListener('click', selectSeat));
External CSS
This Pen doesn't use any external CSS resources.