Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

js-movie-seat-booking #101

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

js-movie-seat-booking #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
207 changes: 207 additions & 0 deletions submissions/kasionio/js-cinema-booking/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
* {
margin: 0;
border: 0;
box-sizing: border-box;
color: white;
text-decoration: none;
}

html {
height: 100%;
}

body {
min-width: 320px;
display: flex;
flex-direction: column;
height: 100%;
}

.main {
display: flex;
justify-content: center;
flex: 1 0 auto;
background: url(img/sex-education_left.png) no-repeat calc(50% - 500px),
url(img/sex-education_right.png) no-repeat calc(50% + 500px),
linear-gradient(0deg, #99fff8, white 50%, #99fff8);
}

.header {
text-align: center;
}

.header_main {
background-color: #008b81;
color: #fff;
text-transform: uppercase;
line-height: 2;
flex: 0 0 auto;
}

.article {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 100%;
text-align: center;
}

.main-container {
width: 500px;
background-color: #728673;
}

.screen_text {
text-transform: uppercase;
letter-spacing: 2px;
}

.seat:checked + label,
.selected {
background-color: pink;
}

.seat:disabled + label,
.unavailable {
background-color: #c9c9c9;
}

.seat:disabled + label:hover {
cursor: not-allowed;
}

.seat:focus + label {
border: 1px solid red;
}

.seat:active + label {
transform: scale(1.3);
border: 2px solid red;
}

.square {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 3px;
}

.available {
background-color: #008b81;
}

.submit-button {
width: 150px;
height: 50px;
margin: 10px;
border-radius: 10px;
background-color: #375f81;
outline: none;
}

.submit-button:hover {
cursor: pointer;
background-color: #294b69;
}

.submit-button:active {
border: 1px #fff solid;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
}

.label {
display: inline-block;
margin: 6px;
width: 30px;
height: 30px;
background-color: #008b81;
border: #375f81 1px solid;
border-radius: 4px;
}

label:hover {
background-color: #02dfd0;
cursor: pointer;
}

.comfort {
width: 40px;
margin: 10px;
}

.footer {
background-color: #008b81;
flex: 0 0 auto;
}

.footer-content {
margin: auto;
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
width: 50vw;
}

.legend-item,
.price-item {
margin: 10px;
}

.legend,
.price {
display: flex;
flex-direction: column;

}

.legend::after,
.price::after {
content: '';
position: relative;
margin-top: 20px;
width: 100%;
border-bottom: 1px solid #fff;
}

.place {
height: 100px;
width: 200px;
overflow-y: auto;
}

.email:before {
content: '\2709 ';
}

.tel::before {
content: '\1F57F ';
}

@media screen and (max-width: 680px) {
.main {
background: linear-gradient(0deg, #99fff8, white 50%, #99fff8);
}

.modal-content {
width: 80%;
}
}

@media screen and (max-width: 1400px) {
.footer-content {
flex-direction: column;
width: 100%;
}
}
160 changes: 160 additions & 0 deletions submissions/kasionio/js-cinema-booking/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
<title>Cinema booking</title>
</head>
<body class="body">
<header class="header">
<h1 class="header_main">Sex education</h1>
</header>
<main class="main">
<div class="main-container">
<article class="article">
<header class="header">
<h2>Select your seat</h2>
</header>
<fieldset class='hall-container'>
<svg width="320" height="80" xmlns="http://www.w3.org/2000/svg">
<path d="M10 60 Q 160 10 310 60" stroke="#cfcfcf" fill="transparent" stroke-width="24"/>
<text x="128" y="40" class="screen_text" fill="white">Screen</text>
</svg>
<form id="form" action="#">
<div class="seats" id='row-1'>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-1_1' value="1-1">
<label for="seat-1_1" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-1_2' value="1-2">
<label for="seat-1_2" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-1_3' value="1-3">
<label for="seat-1_3" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-1_4' value="1-4" disabled>
<label for="seat-1_4" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-1_5' value="1-5">
<label for="seat-1_5" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-1_6' value="1-6">
<label for="seat-1_6" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-1_7' value="1-7">
<label for="seat-1_7" class="label"></label>
</div>
<div class="seats" id='row-2'>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-2_1' value="2-1">
<label for="seat-2_1" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-2_2' value="2-2">
<label for="seat-2_2" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-2_3' value="2-3" disabled>
<label for="seat-2_3" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-2_4' value="2-4" disabled>
<label for="seat-2_4" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-2_5' value="2-5" disabled>
<label for="seat-2_5" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-2_6' value="2-6">
<label for="seat-2_6" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-2_7' value="2-7">
<label for="seat-2_7" class="label"></label>
</div>
<div class="seats" id='row-3'>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-3_1' value="3-1">
<label for="seat-3_1" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-3_2' value="3-2">
<label for="seat-3_2" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-3_3' value="3-3">
<label for="seat-3_3" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-3_4' value="3-4" disabled>
<label for="seat-3_4" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-3_5' value="3-5">
<label for="seat-3_5" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-3_6' value="3-6">
<label for="seat-3_6" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-3_7' value="3-7">
<label for="seat-3_7" class="label"></label>
</div>
<div class="seats" id='row-4'>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-4_1' value="4-1">
<label for="seat-4_1" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-4_2' value="4-2">
<label for="seat-4_2" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-4_3' value="4-3" disabled>
<label for="seat-4_3" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-4_4' value="4-4" disabled>
<label for="seat-4_4" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-4_5' value="4-5" disabled>
<label for="seat-4_5" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-4_6' value="4-6">
<label for="seat-4_6" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-4_7' value="4-7">
<label for="seat-4_7" class="label"></label>
</div>
<div class="seats" id='row-5'>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-5_1' value="5-1">
<label for="seat-5_1" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-5_2' value="5-2">
<label for="seat-5_2" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-5_3' value="5-3" disabled>
<label for="seat-5_3" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-5_4' value="5-4">
<label for="seat-5_4" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-5_5' value="5-5" disabled>
<label for="seat-5_5" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-5_6' value="5-6">
<label for="seat-5_6" class="label"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-5_7' value="5-7">
<label for="seat-5_7" class="label"></label>
</div>
<div class="seats" id='row-6'>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-6_1' value="6-1">
<label for="seat-6_1" class="label comfort"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-6_2' value="6-2">
<label for="seat-6_2" class="label comfort"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-6_3' value="6-3">
<label for="seat-6_3" class="label comfort"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-6_4' value="6-4">
<label for="seat-6_4" class="label comfort"></label>
<input class="seat visually-hidden" type="checkbox" name="seat" id='seat-6_5' value="6-5">
<label for="seat-6_5" class="label comfort"></label>
</div>
</form>
</fieldset>
<section class="legend">
<header>
<h3>Legend: </h3>
</header>
<div class="legend-content">
<span class="square available"></span>
<span class="legend-item" id="available">Available</span>
<span class="square unavailable"></span>
<span class="legend-item" id="unavailable">Unavailable</span>
<span class="square selected"></span>
<span class="legend-item" id="selected">Selected</span>
</div>
</section>
<section>
<h3>Selected: </h3>
<p class="place" id="place">
</p>
</section>
<section class="price">
<p class="price-item">Total amount:
<span id='total-price'>0</span>$
</p>
</section>
<div class="submit">
<input class="submit-button" id="paymentButton" type="submit" value="Proceed to payment">
</div>
</article>
</div>
</main>
<footer class="footer">
<div class="footer-content">
<address>
<p>Kyiv, Prorizna str.99</p>
<a class="email" href="mailto:[email protected]">[email protected]</a><br>
<a class="tel" href="tel:+380730000003">+38(073)000-00-03</a>
</address>
<p>2021 Cinema booking site</p>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>
Loading