-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (128 loc) · 6.11 KB
/
index.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
<!-- Document type with link attachments -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Pet's Bytes - Your go-to app for all pet-related services">
<meta name="keywords" content="pets, veterinarians, pet sitters, dog walking, pet grooming">
<title>Pet's Bytes!</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/maps.css">
</head>
<body>
<!-- Site Header -->
<header id="header">
<h1>Pet's Bytes</h1>
<!-- Navigation -->
<nav>
<ul id="ul">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main class="grid-container">
<!-- Home Section -->
<section id="home" class="content">
<h2>Welcome to Pet's Bytes!</h2>
<img src="https://inspirationseek.com/wp-content/uploads/2016/02/Cute-Dog-Photo.jpg" alt="Cute Dog" class="float-center" loading="lazy" />
<p>Welcome to our pet friendly webpage where you can find all that we have to offer for our furry family pets!</p>
</section>
<!-- About Section -->
<section id="about" class="content">
<h2>About Us</h2>
<img src="https://4.bp.blogspot.com/-qIK-2jm1Dp8/UeN7c4y-kxI/AAAAAAAAD6w/mgpYJ2labWg/s1600/Cute-Cat-Facts.jpg" alt="Cute Cat" class="float-center" />
<p>We are a pet care website that offers a variety of services to many animals and helps you find care for your loved ones. Many of the amenities that we offer including locating veterinarians, pet sitters, dog walking, and pet groomers that you can find located near you.</p>
</section>
<!-- Contact Section -->
<section id="contact" class="content">
<h2>Contact Us</h2>
<a href="contactinfo.html">
<img src="https://www.fearfreehappyhomes.com/wp-content/uploads/2021/03/bigstock-Young-Woman-Taking-Photo-Of-Cu-374979739.jpg" alt="Dog Call" class="float-center" />
</a>
<p>Here you will find links to phone numbers, emails, and other contact information for our different services.</p>
<a href="contactinfo.html" aria-label="View Contact Information">Contact info link</a>
</section>
<!-- Services Section -->
<section id="services" class="content">
<h2>Our Services</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2LrToBEtSXKSw20rqoDtiyFCe2QvPhP2MFg&usqp=CAU" alt="Professional Pet Care Services" class="float-center" />
<p>Explore our comprehensive range of pet care services including veterinary care, pet groomers, and professional pet sitters. Catering to all your pet's needs under one roof.</p>
</section>
<!-- Google Maps API section -->
<section id="mapSection" class="content">
<h2>Find Services on Map</h2>
<button id="myBtn" aria-label="View Map">View Map</button>
<!-- Button to trigger modal -->
<!-- Modal -->
<div id="myModal" class="modal" aria-hidden="true">
<div class="modal-content">
<span class="close" aria-label="Close Modal">×</span>
<h2>Find Services on Map</h2>
<p>Use the map to locate pet services near you.</p>
<div id="map"></div>
<!-- Container for Google Map -->
<ul id="places"></ul>
<!-- Container for list of places -->
<div id="servicesList">
<select id="serviceType">
<option value="veterinary_care">Veterinary Care</option>
<option value="pet_store">Pet Store</option>
<option value="animal_hospital">Animal Hospital</option>
<!-- Add more options as needed -->
</select>
<button id="findServicesButton" aria-label="Find Nearby Services">Find Services</button>
</div>
<button class="close" aria-label="Close Map">×</button>
<h2>Find Services on Map</h2>
<p>Use the map to locate pet services near you. (Zoom out if you don't see any markers)</p>
<div id="map"></div>
<button id="more">Show more Results</button>
</div>
</div>
</section>
<!-- Pet Profile Modal -->
<section id="petProfileModal" class="modal">
<section class="modal-content">
<span class="close" id="closePetProfile">×</span>
<h2>Pet Profile</h2>
<form id="petProfileForm">
<label for="petName">Name:</label>
<input type="text" id="petName">
<label for="petAge">Age:</label>
<input type="number" id="petAge">
<label for="petBreed">Breed:</label>
<input type="text" id="petBreed">
<!-- Add more fields as necessary -->
<button type="button" id="savePetProfileBtn">Save Profile</button>
</form>
</section>
</section>
<button id="openPetProfileBtn">Edit Pet Profile</button>
<!-- Dog API function -->
<select onchange="showBreedImage(value)" name="breed_selector" id="breed_selector">
</select>
<div>
<a id="wiki_link" target="_blank"></a>
<div id="breed_json"></div>
</div>
<div>
<img id="breed_image">
</div>
<!-- Site Footer -->
<section id="footerSection" class="footer">
<footer class="footer">
<p id="footer">© <span id="current-year"></span> Pet's Bytes</p>
</footer>
</section>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./assets/js/script.js"></script>
<script src="./assets/js/maps.js"></script>
</main>
</body>
</html>