Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a3ca648

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

File tree

1 file changed

+267
-0
lines changed

1 file changed

+267
-0
lines changed

‎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)

AltStyle によって変換されたページ (->オリジナル) /