Hugging Face's logo

Spaces:
pranked03
/
poop
Running

App Files Community
pranked03 commited on
Commit
777461e
·
verified ·
1 Parent(s): 12ac2fd

Create a website all about poop - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +253 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Poop
3
- emoji: ⚡
4
- colorFrom: red
5
  colorTo: blue
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: poop
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: blue
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,254 @@
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>The Wonderful World of Poop</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .poop-bg {
14
+ background-color: #8B4513;
15
+ }
16
+ .poop-text {
17
+ color: #5D4037;
18
+ }
19
+ .poop-card {
20
+ background-color: #D7CCC8;
21
+ border-radius: 20px;
22
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
23
+ }
24
+ .poop-btn {
25
+ background-color: #6D4C41;
26
+ color: white;
27
+ transition: all 0.3s ease;
28
+ }
29
+ .poop-btn:hover {
30
+ background-color: #5D4037;
31
+ transform: translateY(-2px);
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-amber-50">
36
+ <!-- Navigation -->
37
+ <nav class="poop-bg text-white py-4 px-6 shadow-lg">
38
+ <div class="container mx-auto flex justify-between items-center">
39
+ <div class="flex items-center space-x-2">
40
+ <i data-feather="droplet" class="w-8 h-8"></i>
41
+ <span class="text-2xl font-bold">PoopFacts</span>
42
+ </div>
43
+ <div class="hidden md:flex space-x-6">
44
+ <a href="#" class="hover:text-amber-200">Home</a>
45
+ <a href="#" class="hover:text-amber-200">Types</a>
46
+ <a href="#" class="hover:text-amber-200">Health</a>
47
+ <a href="#" class="hover:text-amber-200">History</a>
48
+ <a href="#" class="hover:text-amber-200">Fun Facts</a>
49
+ </div>
50
+ <button class="md:hidden">
51
+ <i data-feather="menu" class="w-6 h-6"></i>
52
+ </button>
53
+ </div>
54
+ </nav>
55
+
56
+ <!-- Hero Section -->
57
+ <section class="poop-bg text-white py-20 px-6">
58
+ <div class="container mx-auto text-center" data-aos="fade-up">
59
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Everything You Never Knew About Poop</h1>
60
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">From biology to culture, we've got the scoop on poop!</p>
61
+ <button class="poop-btn px-8 py-3 rounded-full text-lg font-semibold shadow-lg">
62
+ <i data-feather="arrow-right" class="inline mr-2"></i> Explore Now
63
+ </button>
64
+ </div>
65
+ </section>
66
+
67
+ <!-- Facts Section -->
68
+ <section class="py-16 px-6">
69
+ <div class="container mx-auto">
70
+ <h2 class="text-3xl font-bold text-center poop-text mb-12" data-aos="fade-up">Fascinating Poop Facts</h2>
71
+
72
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
73
+ <!-- Fact 1 -->
74
+ <div class="poop-card p-6" data-aos="fade-up" data-aos-delay="100">
75
+ <div class="flex justify-center mb-4">
76
+ <i data-feather="clock" class="w-12 h-12 poop-text"></i>
77
+ </div>
78
+ <h3 class="text-xl font-bold poop-text mb-3">Average Time</h3>
79
+ <p class="text-gray-700">The average person spends about 92 days of their life on the toilet. That's 3 months of pooping!</p>
80
+ </div>
81
+
82
+ <!-- Fact 2 -->
83
+ <div class="poop-card p-6" data-aos="fade-up" data-aos-delay="200">
84
+ <div class="flex justify-center mb-4">
85
+ <i data-feather="activity" class="w-12 h-12 poop-text"></i>
86
+ </div>
87
+ <h3 class="text-xl font-bold poop-text mb-3">Health Indicator</h3>
88
+ <p class="text-gray-700">Your poop can reveal important information about your digestive health, diet, and even stress levels.</p>
89
+ </div>
90
+
91
+ <!-- Fact 3 -->
92
+ <div class="poop-card p-6" data-aos="fade-up" data-aos-delay="300">
93
+ <div class="flex justify-center mb-4">
94
+ <i data-feather="globe" class="w-12 h-12 poop-text"></i>
95
+ </div>
96
+ <h3 class="text-xl font-bold poop-text mb-3">Global Impact</h3>
97
+ <p class="text-gray-700">2.4 billion people worldwide lack access to proper sanitation, leading to serious health issues.</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Types Section -->
104
+ <section class="py-16 px-6 bg-amber-100">
105
+ <div class="container mx-auto">
106
+ <h2 class="text-3xl font-bold text-center poop-text mb-12" data-aos="fade-up">The Bristol Stool Chart</h2>
107
+
108
+ <div class="grid grid-cols-2 md:grid-cols-7 gap-4">
109
+ <!-- Type 1 -->
110
+ <div class="text-center" data-aos="fade-up" data-aos-delay="50">
111
+ <div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center">
112
+ <div class="h-16 w-16 rounded-full bg-amber-800"></div>
113
+ </div>
114
+ <p class="text-sm font-semibold poop-text">Type 1</p>
115
+ </div>
116
+
117
+ <!-- Type 2 -->
118
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
119
+ <div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center">
120
+ <div class="h-16 w-16 rounded-lg bg-amber-700"></div>
121
+ </div>
122
+ <p class="text-sm font-semibold poop-text">Type 2</p>
123
+ </div>
124
+
125
+ <!-- Type 3 -->
126
+ <div class="text-center" data-aos="fade-up" data-aos-delay="150">
127
+ <div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center">
128
+ <div class="h-16 w-16 rounded-lg bg-amber-600"></div>
129
+ </div>
130
+ <p class="text-sm font-semibold poop-text">Type 3</p>
131
+ </div>
132
+
133
+ <!-- Type 4 -->
134
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
135
+ <div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center">
136
+ <div class="h-16 w-16 rounded-lg bg-amber-500"></div>
137
+ </div>
138
+ <p class="text-sm font-semibold poop-text">Type 4</p>
139
+ </div>
140
+
141
+ <!-- Type 5 -->
142
+ <div class="text-center" data-aos="fade-up" data-aos-delay="250">
143
+ <div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center">
144
+ <div class="h-16 w-16 rounded-lg bg-amber-400"></div>
145
+ </div>
146
+ <p class="text-sm font-semibold poop-text">Type 5</p>
147
+ </div>
148
+
149
+ <!-- Type 6 -->
150
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
151
+ <div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center">
152
+ <div class="h-16 w-16 rounded-lg bg-amber-300"></div>
153
+ </div>
154
+ <p class="text-sm font-semibold poop-text">Type 6</p>
155
+ </div>
156
+
157
+ <!-- Type 7 -->
158
+ <div class="text-center" data-aos="fade-up" data-aos-delay="350">
159
+ <div class="poop-card h-24 w-24 mx-auto mb-2 flex items-center justify-center">
160
+ <div class="h-16 w-16 rounded-lg bg-amber-200"></div>
161
+ </div>
162
+ <p class="text-sm font-semibold poop-text">Type 7</p>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="mt-12 max-w-2xl mx-auto text-center">
167
+ <p class="text-gray-700 mb-6">The Bristol Stool Chart classifies human feces into seven categories based on their shape and consistency, helping identify potential digestive issues.</p>
168
+ <button class="poop-btn px-6 py-2 rounded-full font-medium">
169
+ Learn More About Stool Types
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </section>
174
+
175
+ <!-- Fun Facts Section -->
176
+ <section class="py-16 px-6">
177
+ <div class="container mx-auto">
178
+ <h2 class="text-3xl font-bold text-center poop-text mb-12" data-aos="fade-up">Weird Poop Facts</h2>
179
+
180
+ <div class="max-w-4xl mx-auto">
181
+ <div class="poop-card p-6 mb-6" data-aos="fade-up">
182
+ <div class="flex items-start">
183
+ <i data-feather="alert-circle" class="w-6 h-6 poop-text mr-4 mt-1"></i>
184
+ <div>
185
+ <h3 class="text-xl font-bold poop-text mb-2">Ancient Toilet Paper</h3>
186
+ <p class="text-gray-700">Ancient Romans used a sponge on a stick soaked in salt water as toilet paper, which was shared among public toilet users!</p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="poop-card p-6 mb-6" data-aos="fade-up" data-aos-delay="100">
192
+ <div class="flex items-start">
193
+ <i data-feather="dollar-sign" class="w-6 h-6 poop-text mr-4 mt-1"></i>
194
+ <div>
195
+ <h3 class="text-xl font-bold poop-text mb-2">Poop Gold</h3>
196
+ <p class="text-gray-700">Scientists have found trace amounts of gold in human waste. If extracted from all sewage, it could be worth millions!</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="poop-card p-6" data-aos="fade-up" data-aos-delay="200">
202
+ <div class="flex items-start">
203
+ <i data-feather="wind" class="w-6 h-6 poop-text mr-4 mt-1"></i>
204
+ <div>
205
+ <h3 class="text-xl font-bold poop-text mb-2">Space Poop</h3>
206
+ <p class="text-gray-700">Astronauts have special toilets that use suction to collect waste in zero gravity. The cost of transporting poop from space is about $19,000 per pound!</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Footer -->
215
+ <footer class="poop-bg text-white py-8 px-6">
216
+ <div class="container mx-auto">
217
+ <div class="flex flex-col md:flex-row justify-between items-center">
218
+ <div class="mb-4 md:mb-0">
219
+ <div class="flex items-center space-x-2">
220
+ <i data-feather="droplet" class="w-6 h-6"></i>
221
+ <span class="text-xl font-bold">PoopFacts</span>
222
+ </div>
223
+ <p class="text-amber-200 mt-2">The #1 source for poop information</p>
224
+ </div>
225
+
226
+ <div class="flex space-x-4">
227
+ <a href="#" class="hover:text-amber-200">Privacy</a>
228
+ <a href="#" class="hover:text-amber-200">Terms</a>
229
+ <a href="#" class="hover:text-amber-200">Contact</a>
230
+ </div>
231
+
232
+ <div class="mt-4 md:mt-0 flex space-x-4">
233
+ <a href="#" class="hover:text-amber-200"><i data-feather="twitter" class="w-5 h-5"></i></a>
234
+ <a href="#" class="hover:text-amber-200"><i data-feather="instagram" class="w-5 h-5"></i></a>
235
+ <a href="#" class="hover:text-amber-200"><i data-feather="facebook" class="w-5 h-5"></i></a>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="mt-8 text-center text-sm text-amber-200">
240
+ <p>© 2025 PoopFacts. All rights reserved. Because everyone poops.</p>
241
+ </div>
242
+ </div>
243
+ </footer>
244
+
245
+ <script>
246
+ AOS.init({
247
+ duration: 800,
248
+ easing: 'ease-in-out',
249
+ once: true
250
+ });
251
+ feather.replace();
252
+ </script>
253
+ </body>
254
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a website all about poop