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
border-radius: 12px;
77
padding: 20px;
78
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
79
margin-bottom: 30px;
80
}
81
82
.search-input-wrapper {
···
303
</div>
304
</div>
305
306
<div id="error" class="error" style="display: none;"></div>
307
<div id="loading" class="loading" style="display: none;">searching...</div>
308
<div id="results" class="results"></div>
···
317
const resultsDiv = document.getElementById('results');
318
const loadingDiv = document.getElementById('loading');
319
const errorDiv = document.getElementById('error');
320
321
let hasSearched = false;
322
···
343
loadingDiv.style.display = 'block';
344
resultsDiv.innerHTML = '';
345
errorDiv.style.display = 'none';
346
347
try {
348
const params = new URLSearchParams();
···
413
searchInput.value = query;
414
search(false); // don't update URL since we're already loading from it
415
}
416
});
417
</script>
418
</body>
···
76
border-radius: 12px;
77
padding: 20px;
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;
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;
109
}
110
111
.search-input-wrapper {
···
332
</div>
333
</div>
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
+
341
<div id="error" class="error" style="display: none;"></div>
342
<div id="loading" class="loading" style="display: none;">searching...</div>
343
<div id="results" class="results"></div>
···
352
const resultsDiv = document.getElementById('results');
353
const loadingDiv = document.getElementById('loading');
354
const errorDiv = document.getElementById('error');
355
+
const sampleQueriesDiv = document.getElementById('sampleQueries');
356
357
let hasSearched = false;
358
···
379
loadingDiv.style.display = 'block';
380
resultsDiv.innerHTML = '';
381
errorDiv.style.display = 'none';
382
+
sampleQueriesDiv.classList.add('hidden');
383
384
try {
385
const params = new URLSearchParams();
···
450
searchInput.value = query;
451
search(false); // don't update URL since we're already loading from it
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
+
});
462
});
463
</script>
464
</body>