Hugging Face's logo

Spaces:
cob05
/
deepsite-pawconnect
Running

App Files Community
cob05 commited on
Commit
69d7d52
·
verified ·
1 Parent(s): ae44d72

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +581 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Pawconnect
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: deepsite-pawconnect
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,581 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PawConnect - Social Network for Dog Breeders</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .dog-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
16
+ }
17
+ .notification-badge {
18
+ position: absolute;
19
+ top: -5px;
20
+ right: -5px;
21
+ width: 18px;
22
+ height: 18px;
23
+ font-size: 10px;
24
+ }
25
+ .chat-bubble {
26
+ position: fixed;
27
+ bottom: 20px;
28
+ right: 20px;
29
+ z-index: 50;
30
+ }
31
+ .dropdown-menu {
32
+ display: none;
33
+ position: absolute;
34
+ right: 0;
35
+ z-index: 10;
36
+ }
37
+ .dropdown:hover .dropdown-menu {
38
+ display: block;
39
+ }
40
+ @keyframes pulse {
41
+ 0%, 100% {
42
+ opacity: 1;
43
+ }
44
+ 50% {
45
+ opacity: 0.5;
46
+ }
47
+ }
48
+ .animate-pulse {
49
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="gradient-bg min-h-screen">
54
+ <!-- Navigation -->
55
+ <nav class="bg-white shadow-lg">
56
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
57
+ <div class="flex justify-between h-16">
58
+ <div class="flex">
59
+ <div class="flex-shrink-0 flex items-center">
60
+ <i class="fas fa-paw text-amber-500 text-2xl mr-2"></i>
61
+ <span class="text-xl font-bold text-gray-800">PawConnect</span>
62
+ </div>
63
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
64
+ <a href="#" class="border-amber-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
65
+ Home
66
+ </a>
67
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
68
+ Explore
69
+ </a>
70
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
71
+ Breeders
72
+ </a>
73
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
74
+ Events
75
+ </a>
76
+ </div>
77
+ </div>
78
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
79
+ <div class="relative ml-3">
80
+ <div class="flex space-x-4">
81
+ <button type="button" class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none">
82
+ <span class="absolute -inset-1.5"></span>
83
+ <span class="sr-only">View notifications</span>
84
+ <i class="fas fa-bell h-6 w-6"></i>
85
+ <span class="notification-badge bg-red-500 text-white rounded-full flex items-center justify-center">3</span>
86
+ </button>
87
+ <button type="button" class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none">
88
+ <span class="absolute -inset-1.5"></span>
89
+ <span class="sr-only">View messages</span>
90
+ <i class="fas fa-envelope h-6 w-6"></i>
91
+ <span class="notification-badge bg-blue-500 text-white rounded-full flex items-center justify-center">5</span>
92
+ </button>
93
+ </div>
94
+ </div>
95
+ <div class="ml-3 relative dropdown">
96
+ <div>
97
+ <button type="button" class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
98
+ <span class="absolute -inset-1.5"></span>
99
+ <span class="sr-only">Open user menu</span>
100
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
101
+ </button>
102
+ </div>
103
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
104
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
105
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
106
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div class="-mr-2 flex items-center sm:hidden">
111
+ <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500" aria-controls="mobile-menu" aria-expanded="false">
112
+ <span class="absolute -inset-0.5"></span>
113
+ <span class="sr-only">Open main menu</span>
114
+ <i class="fas fa-bars h-6 w-6"></i>
115
+ </button>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Mobile menu, show/hide based on menu state. -->
121
+ <div class="sm:hidden hidden" id="mobile-menu">
122
+ <div class="space-y-1 pb-3 pt-2">
123
+ <a href="#" class="block border-l-4 border-amber-500 bg-amber-50 py-2 pl-3 pr-4 text-base font-medium text-amber-700">Home</a>
124
+ <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700">Explore</a>
125
+ <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700">Breeders</a>
126
+ <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700">Events</a>
127
+ </div>
128
+ <div class="border-t border-gray-200 pb-3 pt-4">
129
+ <div class="flex items-center px-4">
130
+ <div class="flex-shrink-0">
131
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
132
+ </div>
133
+ <div class="ml-3">
134
+ <div class="text-base font-medium text-gray-800">John Doe</div>
135
+ <div class="text-sm font-medium text-gray-500">Golden Retriever Breeder</div>
136
+ </div>
137
+ <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
138
+ <span class="absolute -inset-1.5"></span>
139
+ <span class="sr-only">View notifications</span>
140
+ <i class="fas fa-bell h-6 w-6"></i>
141
+ </button>
142
+ </div>
143
+ <div class="mt-3 space-y-1">
144
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Your Profile</a>
145
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Settings</a>
146
+ <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Sign out</a>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </nav>
151
+
152
+ <!-- Main Content -->
153
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
154
+ <div class="flex flex-col lg:flex-row gap-8">
155
+ <!-- Left Sidebar -->
156
+ <div class="w-full lg:w-1/4">
157
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
158
+ <div class="flex items-center mb-6">
159
+ <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
160
+ <div class="ml-4">
161
+ <h3 class="text-lg font-semibold text-gray-900">John Doe</h3>
162
+ <p class="text-sm text-gray-500">Golden Retriever Breeder</p>
163
+ <div class="flex items-center mt-1">
164
+ <i class="fas fa-map-marker-alt text-gray-400 text-xs mr-1"></i>
165
+ <span class="text-xs text-gray-500">Portland, Oregon</span>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ <div class="border-t border-gray-200 pt-4">
170
+ <div class="flex justify-between text-sm mb-2">
171
+ <span class="text-gray-500">Breeding since</span>
172
+ <span class="text-gray-900">2015</span>
173
+ </div>
174
+ <div class="flex justify-between text-sm mb-2">
175
+ <span class="text-gray-500">Specializes in</span>
176
+ <span class="text-gray-900">Golden Retrievers</span>
177
+ </div>
178
+ <div class="flex justify-between text-sm mb-2">
179
+ <span class="text-gray-500">Kennel name</span>
180
+ <span class="text-gray-900">Golden Paws</span>
181
+ </div>
182
+ <div class="flex justify-between text-sm">
183
+ <span class="text-gray-500">AKC registered</span>
184
+ <span class="text-green-500">
185
+ <i class="fas fa-check-circle"></i>
186
+ </span>
187
+ </div>
188
+ </div>
189
+ <button class="w-full mt-6 bg-amber-500 hover:bg-amber-600 text-white py-2 px-4 rounded-lg transition duration-200">
190
+ Edit Profile
191
+ </button>
192
+ </div>
193
+
194
+ <div class="bg-white rounded-lg shadow p-6">
195
+ <h3 class="font-semibold text-gray-900 mb-4">Upcoming Events</h3>
196
+ <div class="space-y-4">
197
+ <div class="flex items-start">
198
+ <div class="bg-amber-100 text-amber-800 rounded-lg p-3 mr-3">
199
+ <i class="fas fa-dog"></i>
200
+ </div>
201
+ <div>
202
+ <h4 class="text-sm font-medium text-gray-900">Portland Dog Show</h4>
203
+ <p class="text-xs text-gray-500">June 15, 2023</p>
204
+ <button class="mt-1 text-xs text-amber-600 hover:text-amber-700">View Details</button>
205
+ </div>
206
+ </div>
207
+ <div class="flex items-start">
208
+ <div class="bg-blue-100 text-blue-800 rounded-lg p-3 mr-3">
209
+ <i class="fas fa-users"></i>
210
+ </div>
211
+ <div>
212
+ <h4 class="text-sm font-medium text-gray-900">Breeders Meetup</h4>
213
+ <p class="text-xs text-gray-500">July 2, 2023</p>
214
+ <button class="mt-1 text-xs text-blue-600 hover:text-blue-700">View Details</button>
215
+ </div>
216
+ </div>
217
+ <div class="flex items-start">
218
+ <div class="bg-green-100 text-green-800 rounded-lg p-3 mr-3">
219
+ <i class="fas fa-graduation-cap"></i>
220
+ </div>
221
+ <div>
222
+ <h4 class="text-sm font-medium text-gray-900">Breeding Seminar</h4>
223
+ <p class="text-xs text-gray-500">August 10, 2023</p>
224
+ <button class="mt-1 text-xs text-green-600 hover:text-green-700">View Details</button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ <button class="w-full mt-4 text-sm text-amber-600 hover:text-amber-700 font-medium">
229
+ View All Events
230
+ </button>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Main Feed -->
235
+ <div class="w-full lg:w-2/4">
236
+ <!-- Create Post -->
237
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
238
+ <div class="flex items-start">
239
+ <img class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
240
+ <div class="ml-4 flex-1">
241
+ <textarea class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-amber-500 focus:border-transparent" rows="3" placeholder="What's new in your breeding world?"></textarea>
242
+ <div class="flex justify-between items-center mt-3">
243
+ <div class="flex space-x-2">
244
+ <button class="text-gray-500 hover:text-amber-500">
245
+ <i class="fas fa-camera"></i>
246
+ </button>
247
+ <button class="text-gray-500 hover:text-amber-500">
248
+ <i class="fas fa-video"></i>
249
+ </button>
250
+ <button class="text-gray-500 hover:text-amber-500">
251
+ <i class="fas fa-paw"></i>
252
+ </button>
253
+ </div>
254
+ <button class="bg-amber-500 hover:bg-amber-600 text-white py-1 px-4 rounded-lg transition duration-200">
255
+ Post
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Posts -->
263
+ <div class="space-y-6">
264
+ <!-- Post 1 -->
265
+ <div class="bg-white rounded-lg shadow overflow-hidden">
266
+ <div class="p-6">
267
+ <div class="flex items-start">
268
+ <img class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
269
+ <div class="ml-4">
270
+ <h3 class="text-sm font-semibold text-gray-900">Sarah Johnson</h3>
271
+ <p class="text-xs text-gray-500">Labrador Breeder • 2 hours ago</p>
272
+ </div>
273
+ </div>
274
+ <p class="mt-4 text-gray-700">
275
+ Our latest litter of chocolate labs is now 6 weeks old and ready for their first vet checkup! They're all healthy and energetic. We're so proud of how well momma Bella has done with them.
276
+ </p>
277
+ </div>
278
+ <div class="bg-gray-50 px-6 py-4">
279
+ <div class="flex justify-between">
280
+ <div class="flex space-x-4">
281
+ <button class="flex items-center text-gray-500 hover:text-red-500">
282
+ <i class="fas fa-heart mr-1"></i>
283
+ <span>24</span>
284
+ </button>
285
+ <button class="flex items-center text-gray-500 hover:text-amber-500">
286
+ <i class="fas fa-comment mr-1"></i>
287
+ <span>8</span>
288
+ </button>
289
+ </div>
290
+ <button class="text-gray-500 hover:text-amber-500">
291
+ <i class="fas fa-share"></i>
292
+ </button>
293
+ </div>
294
+ </div>
295
+ <div class="border-t border-gray-200 px-6 py-4 bg-gray-50">
296
+ <div class="flex">
297
+ <img class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
298
+ <div class="ml-3 flex-1">
299
+ <input type="text" class="w-full border border-gray-300 rounded-full px-4 py-2 focus:ring-2 focus:ring-amber-500 focus:border-transparent" placeholder="Write a comment...">
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Post 2 - Photo Post -->
306
+ <div class="bg-white rounded-lg shadow overflow-hidden">
307
+ <div class="p-6">
308
+ <div class="flex items-start">
309
+ <img class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
310
+ <div class="ml-4">
311
+ <h3 class="text-sm font-semibold text-gray-900">Michael Chen</h3>
312
+ <p class="text-xs text-gray-500">German Shepherd Breeder • 5 hours ago</p>
313
+ </div>
314
+ </div>
315
+ <p class="mt-4 text-gray-700">
316
+ Just finished this year's health testing for our breeding dogs. All results came back excellent! Here's Max, our top stud, showing off his perfect hip scores.
317
+ </p>
318
+ <div class="mt-4 rounded-lg overflow-hidden">
319
+ <img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="German Shepherd" class="w-full h-64 object-cover">
320
+ </div>
321
+ </div>
322
+ <div class="bg-gray-50 px-6 py-4">
323
+ <div class="flex justify-between">
324
+ <div class="flex space-x-4">
325
+ <button class="flex items-center text-gray-500 hover:text-red-500">
326
+ <i class="fas fa-heart mr-1"></i>
327
+ <span>42</span>
328
+ </button>
329
+ <button class="flex items-center text-gray-500 hover:text-amber-500">
330
+ <i class="fas fa-comment mr-1"></i>
331
+ <span>15</span>
332
+ </button>
333
+ </div>
334
+ <button class="text-gray-500 hover:text-amber-500">
335
+ <i class="fas fa-share"></i>
336
+ </button>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Post 3 - Announcement -->
342
+ <div class="bg-white rounded-lg shadow overflow-hidden border-l-4 border-amber-500">
343
+ <div class="p-6">
344
+ <div class="flex items-start">
345
+ <div class="bg-amber-100 text-amber-800 rounded-full p-3 mr-3">
346
+ <i class="fas fa-bullhorn"></i>
347
+ </div>
348
+ <div>
349
+ <h3 class="text-sm font-semibold text-gray-900">PawConnect Announcement</h3>
350
+ <p class="text-xs text-gray-500">Official • 1 day ago</p>
351
+ </div>
352
+ </div>
353
+ <p class="mt-4 text-gray-700">
354
+ We're excited to announce our first virtual "Breeder's Roundtable" next month! This will be a great opportunity to discuss best practices, share experiences, and learn from top breeders in the community. Stay tuned for details!
355
+ </p>
356
+ <div class="mt-4">
357
+ <button class="text-sm bg-amber-500 hover:bg-amber-600 text-white py-1 px-4 rounded-lg transition duration-200">
358
+ Learn More
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Right Sidebar -->
367
+ <div class="w-full lg:w-1/4">
368
+ <!-- Breeder Spotlight -->
369
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
370
+ <h3 class="font-semibold text-gray-900 mb-4">Breeder Spotlight</h3>
371
+ <div class="space-y-4">
372
+ <div class="flex items-center">
373
+ <img class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
374
+ <div class="ml-3">
375
+ <h4 class="text-sm font-medium text-gray-900">Robert Taylor</h4>
376
+ <p class="text-xs text-gray-500">French Bulldog Specialist</p>
377
+ <div class="flex items-center mt-1">
378
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
379
+ <span class="text-xs text-gray-700 ml-1">4.9 (28 reviews)</span>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ <div class="flex items-center">
384
+ <img class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
385
+ <div class="ml-3">
386
+ <h4 class="text-sm font-medium text-gray-900">Lisa Rodriguez</h4>
387
+ <p class="text-xs text-gray-500">Poodle Genetics Expert</p>
388
+ <div class="flex items-center mt-1">
389
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
390
+ <span class="text-xs text-gray-700 ml-1">5.0 (42 reviews)</span>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ <div class="flex items-center">
395
+ <img class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Profile picture">
396
+ <div class="ml-3">
397
+ <h4 class="text-sm font-medium text-gray-900">Emma Wilson</h4>
398
+ <p class="text-xs text-gray-500">Rare Breed Preservationist</p>
399
+ <div class="flex items-center mt-1">
400
+ <i class="fas fa-star text-yellow-400 text-xs"></i>
401
+ <span class="text-xs text-gray-700 ml-1">4.8 (35 reviews)</span>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ <button class="w-full mt-4 text-sm text-amber-600 hover:text-amber-700 font-medium">
407
+ View All Featured Breeders
408
+ </button>
409
+ </div>
410
+
411
+ <!-- Latest Litters -->
412
+ <div class="bg-white rounded-lg shadow p-6">
413
+ <h3 class="font-semibold text-gray-900 mb-4">Latest Litters</h3>
414
+ <div class="space-y-4">
415
+ <div class="dog-card bg-white border border-gray-200 rounded-lg p-4 transition duration-200">
416
+ <div class="flex">
417
+ <img src="https://images.unsplash.com/photo-1586671267731-da2cf3ceeb80?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="German Shepherd puppies" class="h-16 w-16 rounded-lg object-cover">
418
+ <div class="ml-3">
419
+ <h4 class="text-sm font-medium text-gray-900">German Shepherd</h4>
420
+ <p class="text-xs text-gray-500">Born: May 15, 2023</p>
421
+ <p class="text-xs text-gray-700 mt-1">5 males, 3 females available</p>
422
+ </div>
423
+ </div>
424
+ <div class="flex justify-between items-center mt-3">
425
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Health Guarantee</span>
426
+ <button class="text-xs text-amber-600 hover:text-amber-700 font-medium">View Details</button>
427
+ </div>
428
+ </div>
429
+ <div class="dog-card bg-white border border-gray-200 rounded-lg p-4 transition duration-200">
430
+ <div class="flex">
431
+ <img src="https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Golden Retriever puppies" class="h-16 w-16 rounded-lg object-cover">
432
+ <div class="ml-3">
433
+ <h4 class="text-sm font-medium text-gray-900">Golden Retriever</h4>
434
+ <p class="text-xs text-gray-500">Born: May 20, 2023</p>
435
+ <p class="text-xs text-gray-700 mt-1">4 males, 4 females available</p>
436
+ </div>
437
+ </div>
438
+ <div class="flex justify-between items-center mt-3">
439
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">AKC Registered</span>
440
+ <button class="text-xs text-amber-600 hover:text-amber-700 font-medium">View Details</button>
441
+ </div>
442
+ </div>
443
+ <div class="dog-card bg-white border border-gray-200 rounded-lg p-4 transition duration-200">
444
+ <div class="flex">
445
+ <img src="https://images.unsplash.com/photo-1583511655826-05700d52f4d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="French Bulldog puppies" class="h-16 w-16 rounded-lg object-cover">
446
+ <div class="ml-3">
447
+ <h4 class="text-sm font-medium text-gray-900">French Bulldog</h4>
448
+ <p class="text-xs text-gray-500">Born: May 25, 2023</p>
449
+ <p class="text-xs text-gray-700 mt-1">2 males, 3 females available</p>
450
+ </div>
451
+ </div>
452
+ <div class="flex justify-between items-center mt-3">
453
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Rare Colors</span>
454
+ <button class="text-xs text-amber-600 hover:text-amber-700 font-medium">View Details</button>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ <button class="w-full mt-4 text-sm text-amber-600 hover:text-amber-700 font-medium">
459
+ Browse All Litters
460
+ </button>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Chat Bubble -->
467
+ <div class="chat-bubble">
468
+ <button class="bg-amber-500 hover:bg-amber-600 text-white rounded-full p-4 shadow-lg transition duration-200">
469
+ <i class="fas fa-comment-dots text-xl"></i>
470
+ </button>
471
+ </div>
472
+
473
+ <!-- Footer -->
474
+ <footer class="bg-gray-800 text-white py-8">
475
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
476
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
477
+ <div>
478
+ <h3 class="text-lg font-semibold mb-4">PawConnect</h3>
479
+ <p class="text-gray-400 text-sm">
480
+ Connecting dog breeders worldwide to share knowledge, improve breeding practices, and promote responsible dog ownership.
481
+ </p>
482
+ </div>
483
+ <div>
484
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
485
+ <ul class="space-y-2 text-sm text-gray-400">
486
+ <li><a href="#" class="hover:text-amber-400">About Us</a></li>
487
+ <li><a href="#" class="hover:text-amber-400">Breeding Resources</a></li>
488
+ <li><a href="#" class="hover:text-amber-400">Code of Ethics</a></li>
489
+ <li><a href="#" class="hover:text-amber-400">FAQ</a></li>
490
+ </ul>
491
+ </div>
492
+ <div>
493
+ <h3 class="text-lg font-semibold mb-4">Breeding Tools</h3>
494
+ <ul class="space-y-2 text-sm text-gray-400">
495
+ <li><a href="#" class="hover:text-amber-400">Pedigree Generator</a></li>
496
+ <li><a href="#" class="hover:text-amber-400">Genetic Calculator</a></li>
497
+ <li><a href="#" class="hover:text-amber-400">Litter Tracker</a></li>
498
+ <li><a href="#" class="hover:text-amber-400">Health Database</a></li>
499
+ </ul>
500
+ </div>
501
+ <div>
502
+ <h3 class="text-lg font-semibold mb-4">Connect</h3>
503
+ <div class="flex space-x-4 mb-4">
504
+ <a href="#" class="text-gray-400 hover:text-amber-400">
505
+ <i class="fab fa-facebook-f"></i>
506
+ </a>
507
+ <a href="#" class="text-gray-400 hover:text-amber-400">
508
+ <i class="fab fa-twitter"></i>
509
+ </a>
510
+ <a href="#" class="text-gray-400 hover:text-amber-400">
511
+ <i class="fab fa-instagram"></i>
512
+ </a>
513
+ <a href="#" class="text-gray-400 hover:text-amber-400">
514
+ <i class="fab fa-youtube"></i>
515
+ </a>
516
+ </div>
517
+ <p class="text-sm text-gray-400">
518
+ Subscribe to our newsletter for breeding tips and community updates.
519
+ </p>
520
+ <div class="mt-2 flex">
521
+ <input type="email" placeholder="Your email" class="px-3 py-2 text-sm text-gray-900 rounded-l-lg focus:ring-amber-500 focus:border-amber-500">
522
+ <button class="bg-amber-500 hover:bg-amber-600 text-white px-3 py-2 rounded-r-lg text-sm">
523
+ <i class="fas fa-paper-plane"></i>
524
+ </button>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-gray-400">
529
+ <div class="flex flex-col md:flex-row justify-between items-center">
530
+ <p>© 2023 PawConnect. All rights reserved.</p>
531
+ <div class="flex space-x-6 mt-4 md:mt-0">
532
+ <a href="#" class="hover:text-amber-400">Privacy Policy</a>
533
+ <a href="#" class="hover:text-amber-400">Terms of Service</a>
534
+ <a href="#" class="hover:text-amber-400">Contact Us</a>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </footer>
540
+
541
+ <script>
542
+ // Mobile menu toggle
543
+ document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
544
+ const menu = document.getElementById('mobile-menu');
545
+ menu.classList.toggle('hidden');
546
+ });
547
+
548
+ // Dropdown menu for user profile
549
+ document.querySelectorAll('.dropdown').forEach(dropdown => {
550
+ const button = dropdown.querySelector('button');
551
+ const menu = dropdown.querySelector('.dropdown-menu');
552
+
553
+ button.addEventListener('click', () => {
554
+ menu.classList.toggle('hidden');
555
+ });
556
+
557
+ // Close when clicking outside
558
+ document.addEventListener('click', (e) => {
559
+ if (!dropdown.contains(e.target)) {
560
+ menu.classList.add('hidden');
561
+ }
562
+ });
563
+ });
564
+
565
+ // Simulate loading animation
566
+ window.addEventListener('load', function() {
567
+ setTimeout(() => {
568
+ document.querySelectorAll('.animate-pulse').forEach(el => {
569
+ el.classList.remove('animate-pulse');
570
+ });
571
+ }, 2000);
572
+ });
573
+
574
+ // Chat bubble interaction
575
+ const chatBubble = document.querySelector('.chat-bubble button');
576
+ chatBubble.addEventListener('click', function() {
577
+ alert('Chat feature coming soon! In the meantime, you can message breeders directly from their profiles.');
578
+ });
579
+ </script>
580
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cob05/deepsite-pawconnect" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
581
+ </html>