slack status without the slack
status.zzstoatzz.io
hatk
statusphere
move embed code toggle next to share button
+57
-40
+35
-19
site/app.js
+35
-19
site/app.js
···
877
877
${current.text ? `<span id="current-text">${parseLinks(current.text)}</span>` : ''}
878
878
<span class="meta">since ${relativeTime(current.createdAt)}${expiresHtml}</span>
879
879
</div>
880
-
<button class="share-btn current-share-btn" data-uri="${escapeHtml(current.uri)}" title="copy link">
881
-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
882
-
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
883
-
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
884
-
</svg>
885
-
</button>
880
+
<div class="current-status-actions">
881
+
<button class="share-btn current-share-btn" data-uri="${escapeHtml(current.uri)}" title="copy link">
882
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
883
+
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
884
+
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
885
+
</svg>
886
+
</button>
887
+
<button class="embed-toggle-btn" title="get embed code">
888
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
889
+
<polyline points="16 18 22 12 16 6"></polyline>
890
+
<polyline points="8 6 2 12 8 18"></polyline>
891
+
</svg>
892
+
</button>
893
+
</div>
886
894
`;
887
895
if (statuses.length > 1) {
888
896
historyHtml = '<section class="history"><h2>history</h2><div id="history-list">';
···
945
953
<div class="profile-card">
946
954
<div class="current-status">${currentHtml}</div>
947
955
</div>
956
+
<div class="embed-section hidden" id="embed-section">
957
+
<div class="embed-code-container">
958
+
<pre class="embed-code"><code>${escapeHtml(embedCode)}</code></pre>
959
+
<button class="copy-embed-btn" title="copy code">
960
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
961
+
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
962
+
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
963
+
</svg>
964
+
</button>
965
+
</div>
966
+
</div>
948
967
<form id="status-form" class="status-form">
949
968
<div class="emoji-input-row">
950
969
<button type="button" id="emoji-trigger" class="emoji-trigger">
···
970
989
</div>
971
990
</form>
972
991
${historyHtml}
973
-
<section class="embed-section">
974
-
<h2>embed your status</h2>
975
-
<p class="embed-description">add this to your website to show your current status:</p>
976
-
<div class="embed-code-container">
977
-
<pre class="embed-code"><code>${escapeHtml(embedCode)}</code></pre>
978
-
<button class="copy-embed-btn" title="copy code">
979
-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
980
-
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
981
-
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
982
-
</svg>
983
-
</button>
984
-
</div>
985
-
</section>
986
992
`;
987
993
988
994
// Set up emoji picker
···
1077
1083
copyToClipboard(permalink, btn);
1078
1084
});
1079
1085
});
1086
+
1087
+
// Embed toggle button
1088
+
const embedToggleBtn = document.querySelector('.embed-toggle-btn');
1089
+
const embedSection = document.getElementById('embed-section');
1090
+
if (embedToggleBtn && embedSection) {
1091
+
embedToggleBtn.addEventListener('click', () => {
1092
+
embedSection.classList.toggle('hidden');
1093
+
embedToggleBtn.classList.toggle('active');
1094
+
});
1095
+
}
1080
1096
1081
1097
// Copy embed button
1082
1098
const copyEmbedBtn = document.querySelector('.copy-embed-btn');
+22
-21
site/styles.css
+22
-21
site/styles.css
···
395
395
position: relative;
396
396
}
397
397
398
-
/* Share button on current status - always visible */
399
-
.current-share-btn {
398
+
/* Current status action buttons */
399
+
.current-status-actions {
400
+
display: flex;
401
+
gap: 0.5rem;
402
+
margin-top: 0.75rem;
403
+
}
404
+
405
+
.current-share-btn,
406
+
.embed-toggle-btn {
400
407
opacity: 0.6;
401
-
margin-top: 0.5rem;
408
+
background: transparent;
409
+
border: 1px solid var(--border);
410
+
color: var(--text-secondary);
411
+
cursor: pointer;
412
+
padding: 0.5rem;
413
+
border-radius: 6px;
414
+
transition: opacity 0.15s, color 0.15s, border-color 0.15s;
402
415
}
403
416
404
-
.current-share-btn:hover {
417
+
.current-share-btn:hover,
418
+
.embed-toggle-btn:hover,
419
+
.embed-toggle-btn.active {
405
420
opacity: 1;
421
+
color: var(--accent);
422
+
border-color: var(--accent);
406
423
}
407
424
408
425
.delete-btn:hover {
···
422
439
423
440
/* Embed section */
424
441
.embed-section {
425
-
margin-top: 2rem;
426
-
padding-top: 1.5rem;
427
-
border-top: 1px solid var(--border);
428
-
}
429
-
430
-
.embed-section h2 {
431
-
font-size: 0.875rem;
432
-
text-transform: uppercase;
433
-
letter-spacing: 0.05em;
434
-
color: var(--text-secondary);
435
-
margin-bottom: 0.5rem;
436
-
}
437
-
438
-
.embed-description {
439
-
font-size: 0.875rem;
440
-
color: var(--text-secondary);
441
-
margin-bottom: 1rem;
442
+
margin-bottom: 1.5rem;
442
443
}
443
444
444
445
.embed-code-container {