-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpayment.html
126 lines (103 loc) · 6.38 KB
/
payment.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
<!DOCTYPE html>
<html>
<head>
<!--How code being decoded-->
<meta charset = "utf-8">
<!--How page being display based on viewport-->
<meta name = "viewport" content = "width = device-width, initial-scale = 1 shrink-to-fit = no">
<!--Add author, web description, keywords for search engine, and copyright-->
<meta name = "author" content = "Yip Zi Xian | Neong Yee Kay | Wong Xie Ling">
<meta name = "description" content = "Browse for your fluffy or exotic companions">
<meta name = "keywords" content = "Les Petz Shop University Assignment, Les Petz Shop, University Assignment">
<meta name = "copyright" content = "Copyright 2021 Yip Zi Xian, Neong Yee Kay, Wong Xie Ling">
<!--Link to Pictures file-->
<link rel = "icon" type = image/png href = art/logo.png>
<!--Title-->
<title>Les Pet Shop - Payment</title>
<!-- Add icon library -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/c8bccee41a.js" crossorigin="anonymous"></script>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.15.4/css/v4-shims.css">
<!--Add font library-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Rubik:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--link css-->
<link href="css/profile.css" rel="stylesheet">
<!--Add JS script-->
<script src="console.js"></script>
</head>
<!--Body-->
<body style="background-color: #eee2dcc7;">
<!--Back to Top Button-->
<button id='back2top-btn' onclick='scroll2Top()' title='Purr back 2 top!~'><i class="fas fa-arrow-alt-circle-up fa-4x"></i></button>
<!--Navigation Bar & Hamburger-->
<header>
<div class='nav-bar'>
<img class='logo' src='art/logo.png'>
<div class='name'>Les Pet Shop</div>
<div class='nav-btn-container'>
<button onclick="document.location='../homepage.html'"><span><i class="fas fa-home fa-2x"></i></span>HOME</button>
<button onclick="document.location='pet.php'"><span><i class="fas fa-paw fa-2x"></i></span>PETS</button>
<button onclick="document.location='food.php'"><span><i class="fas fa-fish fa-2x"></i></span>FOOD</button>
<button onclick="document.location='accessories.php'"><span><i class="fas fa-gift fa-2x"></i></span>ACCESSORIES</button>
<button onclick="document.location='userprofile.php'"><span><i class="fas fa-user-circle fa-2x"></i></span>PROFILE</button>
<button onclick="document.location='logout.php'"><span><i class="fas fa-sign-out-alt fa-2x"></i></span>LOGOUT</button>
</div>
</div>
</header>
<!--Payment Form-->
<form id="payment-form" style="background-image: url('art/white_texture.png');" method="post" action="php/payment.php">
<h2>Payment</h2>
<img id="card-img" src="art/card.png" alt="accepted credit cards">
<div>Name on card:</div>
<input type="text" name="card_name" required="required">
<div>Card number:</div>
<input type="text" name="card_number" required="required" placeholder="Format: 0000 0000 0000 0000" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}">
<div>Expiry Date:</div>
<input type="text" name="card_expirydate" required="required" placeholder="Format: MM/YY" pattern="[0-1][0-9]/[0-2][0-9]">
<div>CVV:</div>
<input type="text" name="card_CVV" required="required" placeholder="Format: 000" pattern="[0-9]{3}">
<div>Billing address:</div>
<textarea name="card_address" form="payment-form" required="required" rows="5" cols="40"></textarea>
<p><b>Your card details are protected.</b><br>Les Pet Shop will not access to your card information <br>and we will keep it secure from third parties.</p>
<input type="submit" value="Pay" name="pay">
</form>
<!--Footer-->
<footer>
<div class="footer-flexbox">
<div class='footer-flexbox-item'>
<h3>About Us</h3>
<p>Les Pet Shop is always here for you and your pets. You can find yourself a companion and high quality pet product here!</p>
</div>
<div class='footer-flexbox-item'>
<h3>More From Us</h3>
<ul>
<li><i class="fas fa-paw"></i><a href="php/pet.php">Pets</a></li>
<li><i class="fas fa-paw"></i><a href="php/food.php">Pets Food</a></li>
<li><i class="fas fa-paw"></i><a href="php/accessories.php">Pets Accessories</a></li>
</ul>
</div>
<div class='footer-flexbox-item'>
<h3>Stay with Us</h3>
<p class="media">
Find us on social media<br><br>
<a href="www.facebook.com" class="fa fa-facebook"></a>
<a href="www.twitter.com" class="fa fa-twitter"></a>
<a href="www.instagram.com" class="fa fa-instagram"></a>
</p>
</div>
<div class='footer-flexbox-item'>
<h3>Contact Us</h3>
<p>2, Jalan Besar 5,<br>50000 Kuala Lumpur, <br>Malaysia</p>
<p>Email: <a href="mailto:lespetshopt@gmail.com">lespetshopt@gmail.com</a></p>
<p>Phone no: <a href="tel:0312345678">03-12345678</a></p>
</div>
</div>
<p id="copyright"><b>© 2021 Les Pet Shop (Team Name)</b></p>
</footer>
</body>
</html>