From e460479f4033095b628dab67c3a7257de3c54fdf Mon Sep 17 00:00:00 2001 From: esefxdz Date: Sun, 26 Apr 2026 14:52:47 +0300 Subject: [PATCH] test 3 pfp --- index.html | 16 +++++++- js/comments.js | 65 ++++++++++++++++++++++++++++++-- style/comments.css | 93 ++++++++++++++++++++++++++++++++++++---------- 3 files changed, 149 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index c613f38..e2cb7e5 100644 --- a/index.html +++ b/index.html @@ -48,9 +48,18 @@

Leave a comment:

- +
- Colour + Avatar: + +
+ + +
+ +
+ + Or Color:
@@ -65,6 +74,7 @@
+
@@ -88,6 +98,8 @@
+ + diff --git a/js/comments.js b/js/comments.js index 933b6ed..1f0b2f4 100644 --- a/js/comments.js +++ b/js/comments.js @@ -24,6 +24,10 @@ document.addEventListener('DOMContentLoaded', () => { const listEl = document.getElementById('comments-list'); const titleEl = document.getElementById('comments-title'); const colorInput = document.getElementById('comment-avatar-color'); + const b64Input = document.getElementById('comment-avatar-b64'); + const pfpUpload = document.getElementById('pfp-upload'); + const pfpPreview = document.getElementById('pfp-preview'); + const pfpClear = document.getElementById('pfp-clear'); const warning = document.getElementById('firebase-setup-warning'); if (!form || !listEl) return; @@ -37,6 +41,49 @@ document.addEventListener('DOMContentLoaded', () => { }); }); + // ── Custom PFP Upload ──────────────────────────────────────── + if (pfpUpload) { + pfpUpload.addEventListener('change', (e) => { + const file = e.target.files[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = (event) => { + const img = new Image(); + img.onload = () => { + // Shrink to max 64x64 to save space + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + canvas.width = 64; + canvas.height = 64; + + // Center and crop + const size = Math.min(img.width, img.height); + const sx = (img.width - size) / 2; + const sy = (img.height - size) / 2; + + ctx.drawImage(img, sx, sy, size, size, 0, 0, 64, 64); + + const dataUrl = canvas.toDataURL('image/jpeg', 0.8); + b64Input.value = dataUrl; + pfpPreview.style.backgroundImage = `url(${dataUrl})`; + pfpPreview.style.display = 'block'; + pfpClear.style.display = 'inline-flex'; + }; + img.src = event.target.result; + }; + reader.readAsDataURL(file); + }); + + pfpClear.addEventListener('click', () => { + b64Input.value = ''; + pfpUpload.value = ''; + pfpPreview.style.display = 'none'; + pfpPreview.style.backgroundImage = 'none'; + pfpClear.style.display = 'none'; + }); + } + // ── Char counter ───────────────────────────────────────────── charCountEl.textContent = MAX_CHARS; msgInput.addEventListener('input', () => { @@ -88,6 +135,7 @@ document.addEventListener('DOMContentLoaded', () => { const name = clean(nameInput.value.trim()).slice(0, 32) || 'Anonymous'; const message = clean(msgInput.value.trim()).slice(0, MAX_CHARS); const color = colorInput.value || '#5b6fde'; + const avatarUrl = b64Input.value; if (!message) { msgInput.focus(); return; } @@ -96,7 +144,7 @@ document.addEventListener('DOMContentLoaded', () => { try { await db.collection(COLLECTION).add({ - name, message, color, + name, message, color, avatarUrl, timestamp: firebase.firestore.FieldValue.serverTimestamp() }); nameInput.value = ''; @@ -127,11 +175,20 @@ function buildBubble(data) { const color = data.color || '#64748b'; const initial = (data.name || '?').charAt(0).toUpperCase(); + + let avatarHtml = ''; + if (data.avatarUrl) { + avatarHtml = `Avatar`; + } else { + avatarHtml = ` +
+ ${esc(initial)} +
+ `; + } div.innerHTML = ` -
- ${esc(initial)} -
+ ${avatarHtml}
${esc(data.name)} diff --git a/style/comments.css b/style/comments.css index 5510830..9fcf9cf 100644 --- a/style/comments.css +++ b/style/comments.css @@ -14,9 +14,11 @@ /* ── Steam panel wrapper ─────────────────────────────────── */ #comments-section { - max-width: 640px; - margin: 0 auto 80px; - border: 1px solid rgba(0, 0, 0, 0.6); + width: 100%; + max-width: 100%; + margin: 50px 0 0 0; + padding: 0 20px 40px 20px; + box-sizing: border-box; background: transparent; font-family: 'Motiva Sans', Arial, Helvetica, sans-serif; } @@ -26,9 +28,9 @@ display: flex; align-items: center; gap: 8px; - padding: 8px 14px; - background: rgba(0, 0, 0, 0.55); - border-bottom: 1px solid rgba(0, 0, 0, 0.5); + padding: 10px 0; + background: transparent; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .steam-header-title { @@ -69,15 +71,15 @@ display: flex; gap: 0; align-items: flex-start; - background: rgba(0, 0, 0, 0.25); - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - padding: 10px 14px; + background: transparent; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + padding: 14px 0; transition: background 0.15s; animation: fadeRow 0.2s ease forwards; } .comment-bubble:hover { - background: rgba(0, 0, 0, 0.4); + background: rgba(255, 255, 255, 0.02); } .comment-bubble:last-child { @@ -160,9 +162,10 @@ /* ── Post form (bottom, Steam style) ────────────────────── */ .steam-form-area { - background: rgba(0, 0, 0, 0.4); - border-top: 1px solid rgba(0, 0, 0, 0.5); - padding: 12px 14px; + background: transparent; + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding: 20px 0 0 0; + margin-top: 10px; } .steam-form-label { @@ -222,17 +225,17 @@ #comment-form input[type="text"], #comment-form textarea { width: 100%; - background: rgba(0, 0, 0, 0.35); - border: 1px solid #3d4b57; + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 2px; color: #c6d4df; - padding: 7px 10px; - font-size: 0.82rem; + padding: 10px; + font-size: 0.85rem; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; - margin-bottom: 6px; + margin-bottom: 10px; resize: none; - transition: border-color 0.2s; + transition: border-color 0.2s, background 0.2s; } #comment-form input[type="text"]::placeholder, @@ -290,3 +293,55 @@ color: #556772; font-family: Arial, Helvetica, sans-serif; } + +/* ── Custom PFP Upload ───────────────────────────────────── */ +.custom-pfp-upload { + display: flex; + align-items: center; + gap: 8px; +} + +.pfp-upload-btn { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + color: #c6d4df; + padding: 3px 8px; + border-radius: 2px; + font-size: 0.7rem; + cursor: pointer; + transition: background 0.15s; + font-family: Arial, Helvetica, sans-serif; + text-transform: uppercase; +} + +.pfp-upload-btn:hover { + background: rgba(255, 255, 255, 0.2); +} + +.pfp-preview { + width: 24px; + height: 24px; + border-radius: 2px; + background-size: cover; + background-position: center; + display: none; + border: 1px solid rgba(255, 255, 255, 0.4); +} + +.pfp-clear { + background: transparent; + border: none; + color: #e05555; + font-size: 1.2rem; + cursor: pointer; + padding: 0; + line-height: 1; + display: none; + align-items: center; + justify-content: center; + transition: color 0.15s; +} + +.pfp-clear:hover { + color: #ff7070; +}