-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpetDetails.html
More file actions
121 lines (117 loc) · 4.03 KB
/
Copy pathpetDetails.html
File metadata and controls
121 lines (117 loc) · 4.03 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pet Details</title>
<link rel="stylesheet" href="./styles/petDetails.css">
</head>
<body>
<div class="navbar">
<div class="navbar-content">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="left-arrow">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /></svg>
<p id="back">Back to all pets</p>
</div>
</div>
<div class="info-container">
<div class="images">
<img id="pet-image" src="">
</div>
<div class="details-container">
<div class="card card1">
<h2 id="pet-name"></h2>
<div class="details-grid">
<div class="info-group">
<p>Breed</p>
<p id="pet-breed"></p>
</div>
<div class="info-group">
<p>Age</p>
<p id="pet-age"></p>
</div>
<div class="info-group">
<p>Gender</p>
<p id="pet-gender"></p>
</div>
<div class="info-group">
<p>Color</p>
<p id="pet-color"></p>
</div>
<div class="info-group">
<p>Location</p>
<p id="pet-location">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="loc-icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>
</p>
</div>
</div>
</div>
<div class="card card2">
<h2>Health Details</h2>
<div class="details-grid">
<div class="info-group">
<p>Vaccinated</p>
<p id="pet-vaccinated"></p>
</div>
<div class="info-group">
<p>Neutered</p>
<p id="pet-neutered"></p>
</div>
<div class="info-group">
<p>Last Vet Checkup</p>
<p id="pet-last-checkup"></p>
</div>
<div class="info-group">
<p>Special Care Needed</p>
<p id="pet-special-care-needed"></p>
</div>
<div class="info-group">
<p>Any Existing Health Issues</p>
<p id="pet-existing-health-issues"></p>
</div>
</div>
</div>
<div class="card card3">
<h2>Payment Summary</h2>
<div class="details-grid">
<div class="info-group">
<p>Cost</p>
<p id="cost"></p>
</div>
<div class="info-group">
<p>Discount</p>
<p id="discount"></p>
</div>
<div class="info-group">
<p>Total Cost</p>
<p id="total-cost"></p>
</div>
<div class="info-group">
<p>Mode of Payment</p>
<p id="mode-of-payment"></p>
</div>
<div class="info-group" id="days-group">
<p>Number of days</p>
<p id="no-of-days"></p>
</div>
</div>
</div>
<div class="card card4">
<h2>Pet Parent</h2>
<div class="parent-info">
<div class="info-group">
<p>Name</p>
<p id="parent-name"></p>
</div>
</div>
<hr class="divider">
<button class="contact-btn">Send Request to Contact</button>
<p class="disclaimer">Once Sarah Johnson accepts your request, you'll be able to message them directly.</p>
</div>
</div>
</div>
<script type="module" src="./scripts/petDetails.js"></script>
</body>
</html>