zzstoatzz.io
semantic bufo search
find-bufo.com
bufo
add bufo aesthetic: monospace font, green bg, peeking bufo
- switch to monospace font (SF Mono, Monaco, etc) site-wide
- change background to muted leaf green (#8ba888)
- add bufo-just-checking.gif randomly peeking from left or right
- bufo flips horizontally when on left side
- bufo fades out after first search, returns on page refresh
- mobile responsive sizing (200px -> 150px -> 100px)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+61
-2
static/index.html
+61
-2
static/index.html
···
13
13
}
14
14
15
15
body {
16
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
17
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
16
+
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
17
+
background: #8ba888;
18
18
min-height: 100vh;
19
19
display: flex;
20
20
justify-content: center;
21
21
align-items: center;
22
22
padding: 20px;
23
+
position: relative;
24
+
overflow-x: hidden;
23
25
}
24
26
25
27
.container {
···
79
81
border: 2px solid #e0e0e0;
80
82
border-radius: 8px;
81
83
font-size: 16px;
84
+
font-family: inherit;
82
85
transition: border-color 0.3s;
83
86
}
84
87
···
94
97
border: none;
95
98
border-radius: 8px;
96
99
font-size: 16px;
100
+
font-family: inherit;
97
101
font-weight: 600;
98
102
cursor: pointer;
99
103
transition: background 0.3s;
···
197
201
font-size: 1.2em;
198
202
padding: 40px;
199
203
}
204
+
205
+
.peeking-bufo {
206
+
position: fixed;
207
+
pointer-events: none;
208
+
z-index: 1000;
209
+
top: 50%;
210
+
width: 200px;
211
+
height: auto;
212
+
transition: opacity 0.3s ease-out;
213
+
}
214
+
215
+
.peeking-bufo.hidden {
216
+
opacity: 0;
217
+
pointer-events: none;
218
+
}
219
+
220
+
.peeking-bufo-right {
221
+
right: 0;
222
+
transform: translateY(-50%);
223
+
}
224
+
225
+
.peeking-bufo-left {
226
+
left: 0;
227
+
transform: translateY(-50%) scaleX(-1);
228
+
}
229
+
230
+
@media (max-width: 1024px) {
231
+
.peeking-bufo {
232
+
width: 150px;
233
+
}
234
+
}
235
+
236
+
@media (max-width: 768px) {
237
+
.peeking-bufo {
238
+
width: 100px;
239
+
}
240
+
}
200
241
</style>
201
242
</head>
202
243
<body>
···
223
264
<div id="results" class="results"></div>
224
265
</div>
225
266
267
+
<img src="https://all-the.bufo.zone/bufo-just-checking.gif" alt="bufo peeking" class="peeking-bufo" id="peekingBufo">
268
+
226
269
<script>
227
270
const searchInput = document.getElementById('searchInput');
228
271
const searchButton = document.getElementById('searchButton');
229
272
const resultsDiv = document.getElementById('results');
230
273
const loadingDiv = document.getElementById('loading');
231
274
const errorDiv = document.getElementById('error');
275
+
const peekingBufo = document.getElementById('peekingBufo');
276
+
277
+
// randomly position bufo on left or right
278
+
if (Math.random() < 0.5) {
279
+
peekingBufo.classList.add('peeking-bufo-left');
280
+
} else {
281
+
peekingBufo.classList.add('peeking-bufo-right');
282
+
}
283
+
284
+
let hasSearched = false;
232
285
233
286
async function search() {
234
287
const query = searchInput.value.trim();
235
288
if (!query) return;
289
+
290
+
// hide bufo after first search
291
+
if (!hasSearched) {
292
+
peekingBufo.classList.add('hidden');
293
+
hasSearched = true;
294
+
}
236
295
237
296
searchButton.disabled = true;
238
297
loadingDiv.style.display = 'block';