Skip to content

Commit a3ca648

Browse files
mbrsagormbrsagor
committed
New: Button change QNT.
1 parent 733693e commit a3ca648

1 file changed

Lines changed: 267 additions & 0 deletions

File tree

‎dom/changeQTN.html‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="shortcut icon"
8+
href="https://img.icons8.com/?size=100&id=SYr46wFfJEEG&format=png&color=000000"
9+
type="image/x-icon"
10+
/>
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap" rel="stylesheet">
14+
<title>Ticket details view</title>
15+
<style>
16+
body {
17+
font-size: 14px;
18+
font-family: "DM Serif Text", serif;
19+
font-weight: 400;
20+
font-style: normal;
21+
}
22+
.container {
23+
max-width: 450px;
24+
margin: 0 auto;
25+
border: 1px solid #ccc;
26+
border-radius: 5px;
27+
background-color: #f9f9f9;
28+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
29+
overflow: auto;
30+
word-wrap: break-word;
31+
hyphens: auto;
32+
line-height: 1.5;
33+
color: #333;
34+
font-size: 16px;
35+
line-height: 1.6;
36+
letter-spacing: 0.01em;
37+
box-sizing: border-box;
38+
transition: background-color 0.3s ease;
39+
overflow-x: hidden;
40+
overflow-y: scroll;
41+
display: flex;
42+
}
43+
.content {
44+
padding: 0;
45+
margin: 0;
46+
}
47+
.event_sub_info {
48+
padding: 10px;
49+
}
50+
.event_sub_info h3 {
51+
margin: 0;
52+
padding-bottom: 10px;
53+
text-transform: uppercase;
54+
color: #1A434E
55+
}
56+
.ticket_info p {
57+
margin: 1px;
58+
}
59+
.ticket_info img {
60+
width: 100%;
61+
}
62+
.qr_code {
63+
text-align: center;
64+
text-transform: uppercase;
65+
}
66+
.qr_code img {
67+
width: 40%;
68+
}
69+
.qr_code p {
70+
font-size: 20px;
71+
margin: 0;
72+
padding-bottom: 5px;
73+
}
74+
.event_desc {
75+
padding: 15px;
76+
}
77+
.event_desc h4 {
78+
margin: 0;
79+
text-transform: uppercase;
80+
color: #1A434E;
81+
}
82+
.event_desc p {
83+
margin: 0;
84+
padding-top: 10px;
85+
text-align: justify;
86+
}
87+
.btn {
88+
background: #1A434E;
89+
color: #ffffff;
90+
padding: 13px 40px;
91+
border: 0 transparent;
92+
margin-bottom: 10px;
93+
border-radius: 15px;
94+
cursor: pointer;
95+
font-size: 18px;
96+
margin-bottom: 35px;
97+
font-family: "DM Serif Text", serif;
98+
font-weight: 400;
99+
font-style: normal;
100+
}
101+
.quantity {
102+
display: flex;
103+
border-radius: 4px;
104+
overflow: hidden;
105+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
106+
max-width: 120px;
107+
margin: 15px auto;
108+
}
109+
110+
.quantity button {
111+
background-color: #1A434E;
112+
color: #fff;
113+
border: none;
114+
cursor: pointer;
115+
font-size: 20px;
116+
width: 30px;
117+
height: auto;
118+
text-align: center;
119+
transition: background-color 0.2s;
120+
}
121+
122+
.input-box {
123+
width: 40px;
124+
text-align: center;
125+
border: none;
126+
padding: 8px 10px;
127+
font-size: 16px;
128+
outline: none;
129+
}
130+
131+
/* Hide the number input spin buttons */
132+
.input-box::-webkit-inner-spin-button,
133+
.input-box::-webkit-outer-spin-button {
134+
-webkit-appearance: none;
135+
margin: 0;
136+
}
137+
138+
.input-box[type="number"] {
139+
-moz-appearance: textfield;
140+
}
141+
142+
</style>
143+
</head>
144+
<body>
145+
<div class="container">
146+
<div class="content">
147+
<div class="ticket_info">
148+
{% if ticket.event.thumbnail %}
149+
<img src="{{ ticket.event.thumbnail.url }}" alt="" />
150+
{% else %}
151+
<img
152+
src="https://static.vecteezy.com/system/resources/thumbnails/005/720/479/small_2x/banner-abstract-background-board-for-text-and-message-design-modern-free-vector.jpg"
153+
alt=""
154+
/>
155+
{% endif %}
156+
<div class="event_sub_info">
157+
<h3>{{ticket.event.title}}</h3>
158+
<p>
159+
<img
160+
style="width: 20px; height: 18px"
161+
src="https://img.icons8.com/?size=100&id=23&format=png&color=000000"
162+
alt=""
163+
/>
164+
&nbsp;{{ticket.event.start_date}}
165+
</p>
166+
<p>
167+
<img
168+
style="width: 20px; height: 18px"
169+
src="https://img.icons8.com/?size=100&id=p5n5ZAUprZsA&format=png&color=000000"
170+
alt=""
171+
/>
172+
{{ticket.event.location}}
173+
</p>
174+
</div>
175+
</div>
176+
<div class="event_desc">
177+
<h4>Event details</h4>
178+
<p>{{ ticket.event.description }}</p>
179+
</div>
180+
<div class="qr_code">
181+
<h3 style="color: #1A434E">Scan for join</h3>
182+
<img id="myImage" alt="Base64 Image" />
183+
<p style="color: #1A434E"><b>{{ticket.ticket_number}}</b></p>
184+
{% if ticket.is_active is False and ticket.is_scanned is False %}
185+
<form action="{% url 'create-checkout-session' %}" method="POST">
186+
{% csrf_token %}
187+
<div class="quantity">
188+
<button type="button" class="minus" aria-label="Decrease">&minus;</button>
189+
<input type="number" class="input-box" value="1" min="1" max="10" readonly="readonly">
190+
<button type="button" class="plus" aria-label="Increase">&plus;</button>
191+
</div>
192+
<button id="result" class="btn" type="submit">Purchase New Ticket (${{ticket_price}})</button>
193+
</form>
194+
{% endif %}
195+
</div>
196+
</div>
197+
</div>
198+
<script src="https://js.stripe.com/v3/"></script>
199+
<script>
200+
// Base64 encoded string (example PNG image)
201+
const base64String = "{{ ticket.ticket_qrcode|escapejs }}";
202+
// Create an image element
203+
const img = document.getElementById('myImage');
204+
// Set the src attribute of the image element
205+
img.src = `data:image/png;base64,${base64String}`;
206+
207+
// Change ticket price on click
208+
let ticket_price = "{{ event.single_ticket_price|escapejs }}"
209+
const button = document.getElementById('showDataButton');
210+
211+
console.log(ticket_price);
212+
</script>
213+
214+
<script>
215+
(function () {
216+
const quantityContainer = document.querySelector(".quantity");
217+
const minusBtn = quantityContainer.querySelector(".minus");
218+
const plusBtn = quantityContainer.querySelector(".plus");
219+
const inputBox = quantityContainer.querySelector(".input-box");
220+
221+
updateButtonStates();
222+
223+
quantityContainer.addEventListener("click", handleButtonClick);
224+
inputBox.addEventListener("input", handleQuantityChange);
225+
226+
function updateButtonStates() {
227+
const value = parseInt(inputBox.value);
228+
minusBtn.disabled = value <= 1;
229+
plusBtn.disabled = value >= parseInt(inputBox.max);
230+
}
231+
232+
function handleButtonClick(event) {
233+
if (event.target.classList.contains("minus")) {
234+
decreaseValue();
235+
} else if (event.target.classList.contains("plus")) {
236+
increaseValue();
237+
}
238+
}
239+
240+
function decreaseValue() {
241+
let value = parseInt(inputBox.value);
242+
value = isNaN(value) ? 1 : Math.max(value - 1, 1);
243+
inputBox.value = value;
244+
updateButtonStates();
245+
handleQuantityChange();
246+
}
247+
248+
function increaseValue() {
249+
let value = parseInt(inputBox.value);
250+
value = isNaN(value) ? 1 : Math.min(value + 1, parseInt(inputBox.max));
251+
inputBox.value = value;
252+
updateButtonStates();
253+
handleQuantityChange();
254+
}
255+
256+
function handleQuantityChange() {
257+
let value = parseInt(inputBox.value);
258+
value = isNaN(value) ? 1 : value;
259+
260+
// Execute your code here based on the updated quantity value
261+
console.log("Quantity changed:", value);
262+
}
263+
})();
264+
</script>
265+
</body>
266+
</html>
267+

0 commit comments

Comments
 (0)