-
Notifications
You must be signed in to change notification settings - Fork 0
/
UID_Proj_GiveUpPet_2.html
266 lines (241 loc) · 13.3 KB
/
UID_Proj_GiveUpPet_2.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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="logo.jpeg">
<script src="https://cdn.tailwindcss.com"></script>
<link href="./output.css" rel="stylesheet">
<title>PawStop | Pet Rehoming</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: #000;
}
.container {
max-width: 960px;
margin: 20px auto;
padding: 0 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input[type="text"],
input[type="number"],
textarea {
width: calc(100% - 12px);
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
border:2px solid black;
}
.radio-group {
margin-bottom: 20px;
}
.radio-group label {
display: inline-block;
margin-right: 10px;
}
.radio-group input {
margin-right: 5px;
}
button {
background-color: #07b80d;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #45a049;
}
.menu {
background-color: #333;
color: #fff;
padding: 10px;
}
.menu a {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
</style>
</head>
<body>
<header>
<h1>Rehoming Your Pet</h1>
</header>
<nav>
<a href="main_page.html">Home</a>
<a href="joinus.html">About Us</a>
<a href="adopt.html">Adopt a Pet</a>
<a href="UID_Proj_GiveUpPet_2.html">Give Up a Pet</a>
<a href="Great.html">Training Programs</a>
<a href="Peteventandactivities.html">Events & Activities</a>
<a href="UID_Proj_Pet_Food_2.html">Buy Food</a>
<a href="UID_Proj_Pet_Accessories_2.html">Buy Accessories</a>
<a href="vet-entry.html">Call a Vet</a>
<a href="signin.html">Sign In</a>
<a href="signup.html">Sign Up</a>
</nav>
<div class="container">
<form id="giveUpPetForm" method="post">
<label for="petImg">Picture of your Pet: </label>
<input type="file" id="petImg" name="petImg" />
<br><br>
<label for="petName">Pet Name:</label>
<input type="text" id="petName" name="petName" placeholder="Pet Name" required>
<label for="petAge">Pet Age:</label>
<input type="number" id="petAge" name="petAge" min="0" placeholder="Pet Age" required>
<label for="petBreed">Pet Breed:</label>
<input type="text" id="petBreed" name="petBreed" placeholder="Pet Breed" required>
<label for="healthIssues">Health Issues:</label>
<textarea id="healthIssues" name="healthIssues" rows="4" placeholder="Pet Health Issues" required></textarea>
<div class="radio-group">
<label>Is the pet neutered?</label>
<input type="radio" id="neuteredYes" name="neutered" value="yes" required>
<label for="neuteredYes">Yes</label>
<input type="radio" id="neuteredNo" name="neutered" value="no">
<label for="neuteredNo">No</label>
</div>
<div class="radio-group">
<label>Is the pet spayed?</label>
<input type="radio" id="spayedYes" name="spayed" value="yes" required>
<label for="spayedYes">Yes</label>
<input type="radio" id="spayedNo" name="spayed" value="no">
<label for="spayedNo">No</label>
</div>
<div class="radio-group">
<label>Is the pet vaccinated?</label>
<input type="radio" id="vaccinatedYes" name="vaccinated" value="yes" required>
<label for="vaccinatedYes">Yes</label>
<input type="radio" id="vaccinatedNo" name="vaccinated" value="no">
<label for="vaccinatedNo">No</label>
</div>
<div class="radio-group">
<label>Are the pet's shots up to date?</label>
<input type="radio" id="shotsUpToDateYes" name="shotsUpToDate" value="yes" required>
<label for="shotsUpToDateYes">Yes</label>
<input type="radio" id="shotsUpToDateNo" name="shotsUpToDate" value="no">
<label for="shotsUpToDateNo">No</label>
</div>
<div class="radio-group">
<label>Is the pet good with other pets?</label>
<input type="radio" id="goodWithPetsYes" name="goodWithPets" value="yes" required>
<label for="goodWithPetsYes">Yes</label>
<input type="radio" id="goodWithPetsNo" name="goodWithPets" value="no">
<label for="goodWithPetsNo">No</label>
</div>
<div class="radio-group">
<label>Is the pet good with kids?</label>
<input type="radio" id="goodWithKidsYes" name="goodWithKids" value="yes" required>
<label for="goodWithKidsYes">Yes</label>
<input type="radio" id="goodWithKidsNo" name="goodWithKids" value="no">
<label for="goodWithKidsNo">No</label>
</div>
<label for="reasons">Reasons for Giving Up the Pet:</label>
<textarea id="reasons" name="reasons" rows="4" placeholder="Reasons for giving up your pet" required></textarea>
<br><br>
<button type="submit" onclick=""style="background-color: #07b80d; padding:15px; color:white">Submit</button>
<button type="reset" style="background-color: #07b80d; padding:15px; color:white">Reset</button>
</form>
<br><hr style="border-color:rgb(58, 52, 52); size:6px"><br>
<p style="font-size: 30px" align="center"><strong>REHOME YOUR PET STRESS-FREE</strong></p>
<p>Rehoming or donating your pet should be easy and stress-free both for you and your pet.</p>
<p>PawStop has taken the initiative to remove your pet where your pet will be home again. We have created a reliable, simple & free initiative to help you rehome your pet from your loving family directly to another family.</p>
<p>Here are some tips for putting your pet for adoption in a loving new home and family -</p>
<p>Make your pet look more attractive to potential new owners. Make sure your pet is vaccinated and checked by a veterinarian. Also, make sure your pet is spayed and neutered. This will make your pet more likely to be chosen by a new owner.</p>
<p>Be transparent/clear with the new owner. Share all the details about your pet's personality and how they get along with cats, dogs, and people. Share your dog's or cat's favorite food, game, things, and any medical or behavior issues your pet is experiencing so that potential new adopters will have the information they need to determine if your cat or dog would be a good fit for their home and family.</p>
<p style="font-size: 30px" align="center"><strong>Why Rehome Your Pet?</strong></p>
<p>PawStop provides adopters to meet and learn about pets from the owners who know them best.</p>
<p>Loving families keep their pets out of the shelter homes. By rehoming a cat or dog, they can find them loving & caring new family.</p>
<p>Shelter homes can focus only on limited resources for your pet.</p>
<p>Your pet goes directly from one loving home to another potential owner. ThePetNest provides a stress-free pet adoption platform theryby reducing the chance of illness or discomfort.</p>
<p style="font-size: 30px" align="center"><strong>How Does Pet Rehoming Work?</strong></p>
<p>Fill in your pet details in the form.</p>
<p>Provide every detail of your pet including diet, medication, or existing illness if any.</p>
<p>Upload clear and attractive pictures of your pet for potential owners to see and explore.</p>
<p>Submit the details to PawStop. Your pet details would be seen by potentials owners.</p>
<p>Potential owners would contact you for more details if required and talk to them to see if they are a great fit for your pet.</p>
<footer align="center" style="size:15px">©2022, PawStop Pet Care</footer>
</div>
<script>
document.getElementById('giveUpPetForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
// Ask for confirmation before submitting
const confirmation = confirm("Are you sure you want to give up your pet for adoption?");
if (confirmation) {
// If user confirms, submit the form
this.submit();
}
else {
// If user cancels, do nothing
return false;
}
});
</script>
</body>
</html>
<!--
HTML Structure:
The HTML code starts with the <!DOCTYPE html> declaration, which specifies the document type and version of HTML being used.
Inside the <head> section, we set the character set, viewport, and title of the document.
In the <style> section, we define some basic styling for the form elements using CSS.
Form Structure:
The form is created using the <form> element with the id attribute set to "adoptionForm" and the method attribute set to "post". This means that when the form is submitted, the data will be sent to the server using the POST method.
Inside the form, we have several input fields:
Pet Name: <input type="text">
Pet Type: <input type="text">
Pet Age: <input type="number"> with the min attribute set to "0" to ensure the minimum value is 0.
Reasons for Giving Up the Pet: <textarea>
Finally, we have a submit button <input type="submit">.
JavaScript Functionality:
We use JavaScript to add functionality to the form submission process.
We select the form using document.getElementById('adoptionForm') and add an event listener for the 'submit' event.
When the form is submitted, the event listener function is triggered.
Inside the event listener function:
We prevent the default form submission behavior using event.preventDefault(). This prevents the form from being submitted immediately.
We display a confirmation dialog box using confirm("Are you sure you want to give up your pet for adoption?"). This dialog box will display a message and OK/Cancel buttons.
If the user clicks "OK", the confirm() function returns true, so we submit the form using this.submit().
If the user clicks "Cancel" or closes the dialog box, the confirm() function returns false, and we do nothing (return false), effectively canceling the form submission.
-->