-
Notifications
You must be signed in to change notification settings - Fork 0
/
viosT.html
196 lines (188 loc) · 13 KB
/
viosT.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vios</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
<link rel="stylesheet" href="productdetails.css">
<link rel="stylesheet" href="swiper.min.css">
</head>
<body>
<section id="header">
<a href="index.html"><img src="https://i.postimg.cc/JzCmzrRm/Eng-removebg-preview.png" width="125px" class="logo" alt=""></a>
<div>
<ul id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="Deal.html">Deal Contract</a></li>
<li><a class="active" href="Car.html">Car</a></li>
<!--<li id="lg-acc"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a></li>
<li id="lg-bag"><a href="Account.html"><i class="fa-solid fa-user"></i></a></li>-->
<a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
</ul>
</div>
<div id="mobile">
<!--<a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a>
<a href="Account.html"><i class="fa-solid fa-user"></i></a>-->
<i id="bar" class="fas fa-outdent"></i>
</div>
</section>
<section id="prodetails" class="section-p1">
<div class="single-proimg">
<img src="https://img5.pic.in.th/file/secure-sv1/baa38aaf1539d328be0e96c3c51a657c.jpg" width="100%" height="100%" id="MainImg" alt="">
<div class="small-img-group">
<div class="small-img-col">
<img src="https://img5.pic.in.th/file/secure-sv1/baa38aaf1539d328be0e96c3c51a657c.jpg" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="" width="100%" class="small-img" alt="">
</div>
<div class="small-img-col">
<img src="" width="100%" height="107px" class="small-img" alt="">
</div>
</div>
</div>
<div class="single-prodetails">
<h4>Toyota Vios</h4>
<p class="car_price">ค่าเช่า</p>
<p><span class="car_price_time"> 850 </span>บาท/วัน</p>
<p><span class="car_price_time"> 4500 </span>บาท/สัปดาห์</p>
<p><span class="car_price_time"> 12000 </span>บาท/เดือน</p>
<p><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="6" r="4" stroke="#1C274C" stroke-width="1.5"></circle> <path d="M19.9975 18C20 17.8358 20 17.669 20 17.5C20 15.0147 16.4183 13 12 13C7.58172 13 4 15.0147 4 17.5C4 19.9853 4 22 12 22C14.231 22 15.8398 21.8433 17 21.5634" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>5 ที่นั่ง</p>
<p><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11 6H8C7.05719 6 6.58579 6 6.29289 6.29289C6 6.58579 6 7.05719 6 8C6 8.94281 6 9.41421 6.29289 9.70711C6.58579 10 7.05719 10 8 10H11C11.9428 10 12.4142 10 12.7071 9.70711C13 9.41421 13 8.94281 13 8C13 7.05719 13 6.58579 12.7071 6.29289C12.4142 6 11.9428 6 11 6Z" stroke="#1C274C" stroke-width="1.5"></path> <path d="M7 17H12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M17 22H2" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M19.5 4L20.7331 4.98647C20.8709 5.09673 20.9398 5.15186 21.0025 5.20805C21.5937 5.73807 21.9508 6.48086 21.9953 7.27364C22 7.35769 22 7.44594 22 7.62244V18.5C22 19.3284 21.3284 20 20.5 20C19.6716 20 19 19.3284 19 18.5V18.4286C19 17.6396 18.3604 17 17.5714 17H16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M22 8H20.5C19.6716 8 19 8.67157 19 9.5V11.9189C19 12.5645 19.4131 13.1377 20.0257 13.3419L22 14" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M16 22V15M3 22V18M3 14V8C3 5.17157 3 3.75736 3.87868 2.87868C4.75736 2 6.17157 2 9 2H10C12.8284 2 14.2426 2 15.1213 2.87868C16 3.75736 16 5.17157 16 8V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>Gasohal 91</p>
<p><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M8 9V15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M12 9V15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M8 12H13C13.9319 12 14.3978 12 14.7654 11.8478C15.2554 11.6448 15.6448 11.2554 15.8478 10.7654C16 10.3978 16 9.93188 16 9" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> <path d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C21.5093 4.43821 21.8356 5.80655 21.9449 8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"></path> </g></svg>อัตโนมัติ</p>
<!--ปุ่มมีปัญหา คือ มันคุมพื้นที่มากกว่ากรอบ-->
<a href="#divOne">
<button class="rentbtn"><p class="text">ชำระเงิน</p></button>
</a>
</div>
<div class="overlay" id="divOne">
<div class="wrapperpopup">
<h2>กรุณากรอกข้อมูล</h2>
<a href="#" class="closepopup">×</a>
<div class="contactpopup">
<div class="containerpopup">
<form class="Form" onsubmit="sendemail(); reset(); return false">
<div class="columnPB">
<div class="inputbox">
<label>ชื่อ</label>
<input type="text" id="Name" placeholder="Enter first name">
</div>
<div class="inputbox">
<label>นามสกุล</label>
<input type="text" id="SurName" placeholder="Enter last name">
</div>
</div>
<label>Email Address</label>
<input type="text" id="Email" placeholder="Email@gmail.com">
<label>เบอร์โทรศัพท์</label>
<input type="text" id="Tel" placeholder="098-262-52XX">
<div class="columnPB">
<div class="inputbox">
<label>วันเริ่มต้น</label>
<input type="datetime-local" id="Start">
</div>
<div class="inputbox">
<label>วันสิ้นสุด</label>
<input type="datetime-local" id="End">
</div>
</div>
<div class="place-box">
<h3>ต้องการให้นำรถไปส่งหรือไม่</h3>
<div class="place-option">
<div class="place">
<input type="radio" id="checkyes" name="place">
<label for="checkyes">ใช่</label>
</div>
<div class="place">
<input type="radio" id="checkno" name="place">
<label for="checkno">ไม่</label>
</div>
</div>
</div>
<button class="btn btn-primary" onclick="sendMail()">Submit</button>
</form>
<script src="https://smtpjs.com/v3/smtp.js">
</script>
<script>
function sendemail(){
Email.send({
Host : "smtp.elasticemail.com",
Username : "tapatauto9898@gmail.com",
Password : "705A36B80E2EDE7065502CBD39B8711A59D0",
To : 'toungsakul2@gmail.com',
From : "tapatauto9898@gmail.com",
Subject : "This is the subject",
Body : "And this is the body"
}).then(
message => alert(message)
);}
</script>
</div>
</div>
</div>
</div>
</section>
<footer class="section-p1">
<div class="col">
<img src="https://i.postimg.cc/JzCmzrRm/Eng-removebg-preview.png" width="125px" class="logo" alt="">
<h4>Contact</h4>
<p><strong>Address : </strong>35/93 ซอยสิวารัตน์ 1 ถนนบ้านปลายครองครุ ม.4 ต.นาดี อ.เมือง จ.สมุทรสาคร 74000</p>
<p><strong>Phone : </strong>081-9424507 (คุณแก้ว) 098-2625255 (คุณโต้)</p>
<p><strong>Open : </strong> 06.00 - 18.00 Everyday</p>
<div class="follow">
<h4>ติดตามเรา</h4>
<div class="icon">
<a href="https://www.facebook.com/profile.php?id=100089833762334"><i class="fab fa-facebook"></i></a>
<a href="https://line.me/ti/p/coPYvKE9VZ"><i class="fab fa-line"></i></a>
</div>
</div>
</div>
<div class="col">
<h4>เกี่ยวกับ รถเช่ามหาชัย</h4>
<a href="index.html">Home</a>
<a href="Deal.html">Deal Contract</a>
<a href="Car.html">Car</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="signup.html">Sign up</a>
<a href="login.html">Log in</a>
<h4>ความช่วยเหลือ</h4>
<a href="Deal.html">วิธีการจอง</a>
<a href="Deal.html">เงื่อนไขการใช้บริการ</a>
<a href="index.html">ความช่วยเหลือเพิ่มเติม</a>
</div>
<div class="col install">
<h4>Payment Gateway</h4>
<p>Secured Payment Gateway</p>
<div src="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/1200px-MasterCard_Logo.svg.png" width="50px" alt="">
<img src="https://1000logos.net/wp-content/uploads/2021/11/VISA-logo.png" width="60px" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/JCB_logo.svg/2560px-JCB_logo.svg.png" width="40px" alt="">
<img src="https://w7.pngwing.com/pngs/604/48/png-transparent-citibank-logo-credit-card-insurance-score-blue-text-trademark.png" width="60px" alt="">
<img src="https://newsroom.paypal-corp.com/image/pp_h_rgb_logo_tn.jpg" width="50px" alt="">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c5/PromptPay-logo.png" width="50px" alt="">
</div>
</div>
<div class="copyright">
<p>Copyright © by Tapat Toungsakul 2024 </p>
</div>
</footer>
<script>
var MainImg = document.getElementById("MainImg")
var smallimg = document.getElementsByClassName("small-img")
smallimg[0].onclick = function(){
MainImg.src = smallimg[0].src;
}
smallimg[1].onclick = function(){
MainImg.src = smallimg[1].src;
}
smallimg[2].onclick = function(){
MainImg.src = smallimg[2].src;
}
</script>
<script src="script.js"></script>
<script src="swiper.min.js"></script>
</body>
</html>