211 lines
5.9 KiB
HTML
211 lines
5.9 KiB
HTML
{% load static %}
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<style>
|
||
body {
|
||
background-image: url('{% static "bg_main.jpg" %}' );
|
||
background-size: 110vw;
|
||
background-repeat: no-repeat;
|
||
font-family: Arial;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div style="font-size: 50px; width: 45%; border-radius: 10px; margin-top: 10% ; margin-left: 30%" >
|
||
<div style="color: black" class="centered-div">Ваш выбор: <br> {{tickets.0}} - {{quantity1}} шт.
|
||
<br> {{tickets.1}} - {{quantity2}} шт.
|
||
<br> {{tickets.2}} - {{quantity3}} шт.
|
||
<br> Сумма к оплате - {{total_price}} P.
|
||
</div>
|
||
|
||
<div class="centered-div" >Выберите способ оплаты:
|
||
<br>
|
||
<a href="#openQR" ><img src='{% static "sbp.jpg"%}' width="20%"></a>
|
||
<a href="#opencash" ><img src='{% static "cash.jpg"%}' width="20%"></a>
|
||
<a href="#openBN" ><img src='{% static "webmoney.jpg"%}' width="24%"></a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div id="openQR" class="modal">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
|
||
<a href="#close" title="Close" class="close">×</a>
|
||
</div>
|
||
<div class="modal-body centered-div">
|
||
|
||
<form><a href="QR.html"><img src="http://qrcoder.ru/code/?http%3A%2F%2F127.0.0.1%3A8000%2Fcheck_choice%2FQR.html&4&0" width="350" height="350" border="0" title="QR код" ></a></form>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="opencash" class="modal">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
|
||
<a href="#close" title="Close" class="close">×</a>
|
||
</div>
|
||
<div class="modal-body centered-div" style="font-size: 32px">
|
||
|
||
Внесите в купюроприемник сумму наличных, равную {{total_price}} P. и нажмите "Далее"
|
||
<a href="QR.html"><br><br><button style="font-size: 32px" >Далее</button></a>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="openBN" class="modal">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
|
||
<a href="#close" title="Close" class="close">×</a>
|
||
</div>
|
||
<div class="modal-body centered-div" style="font-size: 32px">
|
||
|
||
Cледуйте инструкциям на терминале
|
||
<a href="QR.html"><br><br><button style="font-size: 32px" name="datetime">Далее</button></a>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|
||
<style>
|
||
.centered-div {
|
||
text-align: center;
|
||
}
|
||
|
||
.modal {
|
||
position: fixed; /* фиксированное положение */
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: rgba(0,0,0,0.5); /* фон */
|
||
z-index: 1050;
|
||
opacity: 0; /* по умолчанию модальное окно прозрачно */
|
||
-webkit-transition: opacity 200ms ease-in;
|
||
-moz-transition: opacity 200ms ease-in;
|
||
transition: opacity 200ms ease-in; /* анимация перехода */
|
||
pointer-events: none; /* элемент невидим для событий мыши */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
/* При отображении модального окно */
|
||
.modal:target {
|
||
opacity: 1; /* делаем окно видимым */
|
||
pointer-events: auto; /* элемент видим для событий мыши */
|
||
overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
|
||
}
|
||
/* ширина модального окна и его отступы от экрана */
|
||
.modal-dialog {
|
||
position: relative;
|
||
width: auto;
|
||
margin: 10px;
|
||
}
|
||
@media (min-width: 576px) {
|
||
.modal-dialog {
|
||
max-width: 750px;
|
||
margin: 30px auto; /* отображение окна по центру */
|
||
}
|
||
}
|
||
/* Стили для блока с контентом окна */
|
||
.modal-content {
|
||
position: relative;
|
||
display: -webkit-box;
|
||
display: -webkit-flex;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-direction: normal;
|
||
-webkit-flex-direction: column;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
background-color: #fff;
|
||
-webkit-background-clip: padding-box;
|
||
background-clip: padding-box;
|
||
border: 1px solid rgba(0,0,0,.2);
|
||
border-radius: .3rem;
|
||
outline: 0;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.modal-content {
|
||
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
||
}
|
||
}
|
||
/* Стили заголовка окна */
|
||
.modal-header {
|
||
display: -webkit-box;
|
||
display: -webkit-flex;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-align: center;
|
||
-webkit-align-items: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
-webkit-box-pack: justify;
|
||
-webkit-justify-content: space-between;
|
||
-ms-flex-pack: justify;
|
||
justify-content: space-between;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eceeef;
|
||
}
|
||
.modal-title {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
line-height: 1.5;
|
||
font-size: 1.25rem;
|
||
font-weight: 500;
|
||
}
|
||
/* Стили кнопки "х" ("Закрыть") */
|
||
.close {
|
||
float: right;
|
||
font-family: sans-serif;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
color: #000;
|
||
text-shadow: 0 1px 0 #fff;
|
||
opacity: .5;
|
||
text-decoration: none;
|
||
}
|
||
/* Стили для закрывающей кнопки в фокусе или наведении */
|
||
.close:focus, .close:hover {
|
||
color: #000;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
opacity: .75;
|
||
}
|
||
/* Стили блока основного содержимого окна */
|
||
.modal-body {
|
||
position: relative;
|
||
-webkit-box-flex: 1;
|
||
-webkit-flex: 1 1 auto;
|
||
-ms-flex: 1 1 auto;
|
||
flex: 1 1 auto;
|
||
padding: 15px;
|
||
overflow: auto;
|
||
}
|
||
|
||
</style> |