zzstoatzz.io
semantic bufo search
find-bufo.com
bufo
redesign sample query buttons with glassmorphic style
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+76
-20
+76
-20
static/index.html
+76
-20
static/index.html
···
79
79
margin-bottom: 20px;
80
80
}
81
81
82
-
.sample-queries {
83
-
display: flex;
84
-
gap: 10px;
85
-
justify-content: center;
82
+
.sample-queries-container {
83
+
text-align: center;
86
84
margin-bottom: 30px;
87
85
}
88
86
89
-
.sample-queries.hidden {
87
+
.sample-queries-container.hidden {
90
88
display: none;
91
89
}
92
90
91
+
.sample-queries-label {
92
+
color: rgba(255, 255, 255, 0.7);
93
+
font-size: 0.85em;
94
+
margin-bottom: 10px;
95
+
font-weight: 500;
96
+
}
97
+
98
+
.sample-queries {
99
+
display: flex;
100
+
gap: 8px;
101
+
justify-content: center;
102
+
flex-wrap: wrap;
103
+
}
104
+
93
105
.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;
106
+
padding: 8px 16px;
107
+
background: rgba(255, 255, 255, 0.15);
108
+
backdrop-filter: blur(10px);
109
+
border: 1.5px solid rgba(255, 255, 255, 0.3);
110
+
border-radius: 6px;
111
+
font-size: 0.85em;
100
112
font-family: inherit;
101
113
font-weight: 600;
102
114
cursor: pointer;
103
115
transition: all 0.2s;
116
+
color: white;
117
+
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
118
+
}
119
+
120
+
.sample-query-btn.happy {
121
+
background: rgba(255, 220, 100, 0.25);
122
+
border-color: rgba(255, 220, 100, 0.4);
104
123
}
105
124
106
-
.sample-query-btn:hover {
107
-
background: #667eea;
108
-
color: white;
125
+
.sample-query-btn.happy:hover {
126
+
background: rgba(255, 220, 100, 0.4);
127
+
border-color: rgba(255, 220, 100, 0.6);
128
+
transform: translateY(-2px);
129
+
}
130
+
131
+
.sample-query-btn.apocalyptic {
132
+
background: rgba(255, 80, 80, 0.25);
133
+
border-color: rgba(255, 80, 80, 0.4);
134
+
}
135
+
136
+
.sample-query-btn.apocalyptic:hover {
137
+
background: rgba(255, 80, 80, 0.4);
138
+
border-color: rgba(255, 80, 80, 0.6);
139
+
transform: translateY(-2px);
140
+
}
141
+
142
+
.sample-query-btn.giving {
143
+
background: rgba(100, 220, 150, 0.25);
144
+
border-color: rgba(100, 220, 150, 0.4);
145
+
}
146
+
147
+
.sample-query-btn.giving:hover {
148
+
background: rgba(100, 220, 150, 0.4);
149
+
border-color: rgba(100, 220, 150, 0.6);
150
+
transform: translateY(-2px);
151
+
}
152
+
153
+
@media (max-width: 600px) {
154
+
.sample-query-btn {
155
+
font-size: 0.8em;
156
+
padding: 6px 12px;
157
+
}
158
+
159
+
.sample-queries {
160
+
gap: 6px;
161
+
}
109
162
}
110
163
111
164
.search-input-wrapper {
···
332
385
</div>
333
386
</div>
334
387
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="apocalyptic">apocalyptic</button>
338
-
<button class="sample-query-btn" data-query="in a giving mood">in a giving mood</button>
388
+
<div id="sampleQueriesContainer" class="sample-queries-container">
389
+
<div class="sample-queries-label">try a sample query:</div>
390
+
<div class="sample-queries">
391
+
<button class="sample-query-btn happy" data-query="happy">happy</button>
392
+
<button class="sample-query-btn apocalyptic" data-query="apocalyptic">apocalyptic</button>
393
+
<button class="sample-query-btn giving" data-query="in a giving mood">in a giving mood</button>
394
+
</div>
339
395
</div>
340
396
341
397
<div id="error" class="error" style="display: none;"></div>
···
352
408
const resultsDiv = document.getElementById('results');
353
409
const loadingDiv = document.getElementById('loading');
354
410
const errorDiv = document.getElementById('error');
355
-
const sampleQueriesDiv = document.getElementById('sampleQueries');
411
+
const sampleQueriesContainer = document.getElementById('sampleQueriesContainer');
356
412
357
413
let hasSearched = false;
358
414
···
379
435
loadingDiv.style.display = 'block';
380
436
resultsDiv.innerHTML = '';
381
437
errorDiv.style.display = 'none';
382
-
sampleQueriesDiv.classList.add('hidden');
438
+
sampleQueriesContainer.classList.add('hidden');
383
439
384
440
try {
385
441
const params = new URLSearchParams();