-
Notifications
You must be signed in to change notification settings - Fork 0
/
findus.html
126 lines (126 loc) · 5.66 KB
/
findus.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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link rel="stylesheet" href="https://use.typekit.net/xcc5lpj.css">
<title>Find Us</title>
</head>
<body>
<nav class="navbar">
<a href="homepage.php"><img src="images/logo.png" class="logo" class="logo"></a>
<img src="images/profile.png" onclick="openForm()" class="prof navlink">
<a href="findus.html" class="navlink" style="color: #c090dba3">find us</a>
<a href="services.html" class="navlink">our services</a>
<a href="meetus.html" class="navlink">meet us</a>
</nav>
<!-- the icon that changes depending on user type -->
<h1><img src="images/dogw.png" id="icon" style="height: 35px"> Come visit us</h1>
<!-- link to the map -->
<div class="mapouter">
<div class="gmap_canvas">
<iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=3%20animal%20road,%20vetville,%20adelaide%20&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
<div class="findpage">
<div class="openhours">
<table id="opening">
<th colspan="2">Opening Hours:</th>
<tr>
<td>Mon - Fri</td>
<td>8am - 5pm</td>
</tr>
<tr>
<td>Saturday</td>
<td>9am - 4pm</td>
</tr>
<tr>
<td>Sunday</td>
<td>Closed</td>
</tr>
</table>
</div>
<table id="contactinfo">
<th colspan="2">Contact Us:</th>
<tr>
<td>Phone:</td>
<td><a href="tel: 8200000000">8200 000 000</a></td>
</tr>
<tr>
<td>E-mail:</td>
<td><a href="mailto: [email protected]">[email protected]</a></td>
</tr>
<tr>
<td>Address:</td>
<td><a href="https://goo.gl/maps/JH4yBy9DnhmYPSQr8">3 Animal Rd, Vetville, SA</a></td>
</tr>
</table>
</div>
<div class="form-popup" id="myForm">
<form class="form-container" action="user.php" method="POST" enctype='multipart/form-data'>
<button type="button" class="cancel" onclick="closeForm()">x</button><br><br>
<button type="button" class="btn" onclick="loginForm()">Log In</button>
<h1 style="font-size: 25px;">Create a Puppy Play Date Account</h1>
<label for="first_name"><b>First Name:</b></label><br>
<input type="text" placeholder="Enter your first name" name="first_name" required><br>
<label for="surname"><b>Surname:</b></label><br>
<input type="text" placeholder="Enter your last name" name="surname" required><br>
<label for="password"><b>Password:</b></label><br>
<input type="password" placeholder="********" name="password" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" onfocus="passwordpopup()" onblur="passwordhide()" required><br>
<p class="passm" id="passmessage">Password must contain uppercase & lowercase letters, a symbol and it must be 6 characters long</p>
<label for="phone"><b>Phone Number:</b></label><br>
<input type="tel" placeholder="0400123456" name="phone" pattern="[0]{1}[0-9]{9}"required><br>
<label for="e-mail"><b>E-mail:</b></label><br>
<input type="email" placeholder="[email protected]" name="e-mail" size="30" required><br>
<label for="suburb"><b>Suburb:</b></label><br>
<input type="text" placeholder="Enter the name of your suburb" name="suburb" id ="suburb" required><br>
<label for="postcode"><b>Postcode:</b></label><br>
<input type="text" placeholder="Enter your postcode" name="postcode" id="postcode" pattern="[0-9]{4}" required><br>
<label for="dog_name"><b>Dog's Name:</b></label><br>
<input type="text" placeholder="Enter your dog's name" name="dog_name" required><br>
<label for="dog_breed"><b>Dog Breed:</b></label><br>
<input type="text" placeholder="Enter your dog's breed" name="dog_breed" required><br>
<label for="dog_age"><b>Dog's Age:</b></label><br>
<input type="number" placeholder="Enter your dog's age in human years" name="dog_age" required><br>
<label for="dog_gender"><b>Dog's Gender:</b></label><br>
<input type="radio" name="dog_gender" id="female" value="female">
<label for="female">Female</label>
<input type="radio" name="dog_gender" id="male" value="male">
<label for="male">Male</label><br>
<label for="image"><b>Upload a picture of your pet:</b></label><br>
<input type="file" name="image" required><br><br>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<div class="form-popup" id="myLogin">
<form class="form-container" action="login.php" method="POST">
<button type="button" class="cancel" onclick="back()"><</button>
<h1>User Login</h1>
<label for="e-mail"><b>E-mail:</b></label><br>
<input type="email" placeholder="[email protected]" name="e-mail" size="30" required><br>
<label for="password"><b>Password:</b></label><br>
<input type="password" placeholder="********" name="password" required><br><br>
<button type="submit" class="btn">Log In</button>
</form>
</div>
<footer class="footer">
<div classs="container">
<div class="socials">
<h2>Connect with us:</h2>
<a href="https://www.instagram.com"><img src="images/insta.png" class="sociallinks"></a>
<a href="https://www.facebook.com"><img src="images/facebook.png" class="sociallinks"></a>
<a href="https://twitter.com"><img src="images/twitter.png" class="sociallinks"></a>
</div>
<div class="socials">
<a href="findus.html"><img src="images/contact.png" id="contactbox"></a>
</div>
</div>
<div class="logofooter">
<img src="images/whitelogo.png" id="footerlogo">
</div>
</footer>
</body>
<script type="text/javascript" src="betterpets.js"></script>
</html>