···
300
-
font-size: 0.45rem;
301
-
color: var(--text-lighter);
302
-
letter-spacing: 0.1em;
301
+
color: var(--text);
306
-
font-size: 0.75rem;
307
-
color: var(--text);
308
+
color: var(--text-lighter);
315
+
@media (max-width: 768px) {{
321
+
font-size: 0.65rem;
···
border: 1px solid var(--border);
···
color: var(--text-light);
transition: all 0.15s ease;
···
520
+
justify-content: space-between;
521
+
align-items: center;
522
+
padding: 0.5rem 0.6rem;
523
+
background: var(--surface);
524
+
border-bottom: 1px solid var(--border);
529
+
color: var(--text-lighter);
534
+
background: var(--bg);
535
+
border: 1px solid var(--border);
536
+
color: var(--text-light);
537
+
font-family: inherit;
538
+
font-size: 0.55rem;
539
+
padding: 0.2rem 0.5rem;
541
+
transition: all 0.15s ease;
542
+
border-radius: 2px;
543
+
-webkit-tap-highlight-color: transparent;
546
+
.copy-btn:hover, .copy-btn:active {{
547
+
background: var(--surface-hover);
548
+
border-color: var(--text-light);
549
+
color: var(--text);
552
+
.copy-btn.copied {{
553
+
color: var(--text);
554
+
border-color: var(--text);
561
+
.record-content pre {{
566
+
font-size: 0.625rem;
···
if (data.records && data.records.length > 0) {{
800
-
data.records.forEach(record => {{
855
+
data.records.forEach((record, idx) => {{
const json = JSON.stringify(record.value, null, 2);
802
-
recordsHtml += `<div class="record"><pre>${{json}}</pre></div>`;
857
+
const recordId = `record-${{Date.now()}}-${{idx}}`;
859
+
<div class="record">
860
+
<div class="record-header">
861
+
<span class="record-label">record</span>
862
+
<button class="copy-btn" data-content="${{encodeURIComponent(json)}}" data-record-id="${{recordId}}">copy</button>
864
+
<div class="record-content">
865
+
<pre>${{json}}</pre>
···
recordListDiv.innerHTML = recordsHtml;
811
-
// Use event delegation for load more buttons
877
+
// Use event delegation for copy and load more buttons
recordListDiv.addEventListener('click', (e) => {{
879
+
// Handle copy button
880
+
if (e.target.classList.contains('copy-btn')) {{
881
+
e.stopPropagation();
882
+
const copyBtn = e.target;
883
+
const content = decodeURIComponent(copyBtn.dataset.content);
885
+
navigator.clipboard.writeText(content).then(() => {{
886
+
const originalText = copyBtn.textContent;
887
+
copyBtn.textContent = 'copied!';
888
+
copyBtn.classList.add('copied');
889
+
setTimeout(() => {{
890
+
copyBtn.textContent = originalText;
891
+
copyBtn.classList.remove('copied');
893
+
}}).catch(err => {{
894
+
console.error('Failed to copy:', err);
895
+
copyBtn.textContent = 'error';
896
+
setTimeout(() => {{
897
+
copyBtn.textContent = 'copy';
902
+
// Handle load more button
if (e.target.classList.contains('load-more')) {{
const loadMoreBtn = e.target;
···
825
-
moreData.records.forEach(record => {{
915
+
moreData.records.forEach((record, idx) => {{
const json = JSON.stringify(record.value, null, 2);
827
-
moreHtml += `<div class="record"><pre>${{json}}</pre></div>`;
917
+
const recordId = `record-more-${{Date.now()}}-${{idx}}`;
919
+
<div class="record">
920
+
<div class="record-header">
921
+
<span class="record-label">record</span>
922
+
<button class="copy-btn" data-content="${{encodeURIComponent(json)}}" data-record-id="${{recordId}}">copy</button>
924
+
<div class="record-content">
925
+
<pre>${{json}}</pre>
zzstoatzz.io