zzstoatzz.io
semantic bufo search
find-bufo.com
bufo
add sample query buttons to homepage
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+46
static/index.html
+46
static/index.html
···
76
76
border-radius: 12px;
77
77
padding: 20px;
78
78
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
79
+
margin-bottom: 20px;
80
+
}
81
+
82
+
.sample-queries {
83
+
display: flex;
84
+
gap: 10px;
85
+
justify-content: center;
79
86
margin-bottom: 30px;
87
+
}
88
+
89
+
.sample-queries.hidden {
90
+
display: none;
91
+
}
92
+
93
+
.sample-query-btn {
94
+
padding: 10px 20px;
95
+
background: white;
96
+
color: #667eea;
97
+
border: 2px solid #667eea;
98
+
border-radius: 8px;
99
+
font-size: 14px;
100
+
font-family: inherit;
101
+
font-weight: 600;
102
+
cursor: pointer;
103
+
transition: all 0.2s;
104
+
}
105
+
106
+
.sample-query-btn:hover {
107
+
background: #667eea;
108
+
color: white;
80
109
}
81
110
82
111
.search-input-wrapper {
···
303
332
</div>
304
333
</div>
305
334
335
+
<div id="sampleQueries" class="sample-queries">
336
+
<button class="sample-query-btn" data-query="happy">happy</button>
337
+
<button class="sample-query-btn" data-query="sad">sad</button>
338
+
<button class="sample-query-btn" data-query="generous">generous</button>
339
+
</div>
340
+
306
341
<div id="error" class="error" style="display: none;"></div>
307
342
<div id="loading" class="loading" style="display: none;">searching...</div>
308
343
<div id="results" class="results"></div>
···
317
352
const resultsDiv = document.getElementById('results');
318
353
const loadingDiv = document.getElementById('loading');
319
354
const errorDiv = document.getElementById('error');
355
+
const sampleQueriesDiv = document.getElementById('sampleQueries');
320
356
321
357
let hasSearched = false;
322
358
···
343
379
loadingDiv.style.display = 'block';
344
380
resultsDiv.innerHTML = '';
345
381
errorDiv.style.display = 'none';
382
+
sampleQueriesDiv.classList.add('hidden');
346
383
347
384
try {
348
385
const params = new URLSearchParams();
···
413
450
searchInput.value = query;
414
451
search(false); // don't update URL since we're already loading from it
415
452
}
453
+
});
454
+
455
+
// handle sample query button clicks
456
+
document.querySelectorAll('.sample-query-btn').forEach(btn => {
457
+
btn.addEventListener('click', () => {
458
+
const query = btn.getAttribute('data-query');
459
+
searchInput.value = query;
460
+
search(true);
461
+
});
416
462
});
417
463
</script>
418
464
</body>