esef/website
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test 3 pfp

Browse Source
This commit is contained in:
esef committed 2026-04-26 14:52:47 +03:00
1 parent f0367ddff9
commit e460479f40
3 files changed
+149 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+14 -2
View File
@@ -48,9 +48,18 @@
<div class="steam-form-area">
<p class="steam-form-label">Leave a comment:</p>
<!-- Avatar colour picker -->
<!-- Avatar picker -->
<div id="avatar-picker">
<span class="picker-label">Colour</span>
<span class="picker-label">Avatar:</span>
<div class="custom-pfp-upload">
<label for="pfp-upload" class="pfp-upload-btn">Upload PFP</label>
<input type="file" id="pfp-upload" accept="image/png, image/jpeg, image/webp" style="display: none;">
<div id="pfp-preview" class="pfp-preview"></div>
<button type="button" id="pfp-clear" class="pfp-clear" style="display: none;">&times;</button>
</div>
<span class="picker-label" style="margin-left: 10px;">Or Color:</span>
<div class="picker-row">
<button type="button" class="av-opt selected" data-color="#5b6fde" style="background:#5b6fde"></button>
<button type="button" class="av-opt" data-color="#3b82f6" style="background:#3b82f6"></button>
@@ -65,6 +74,7 @@
<form id="comment-form" autocomplete="off">
<input type="hidden" id="comment-avatar-color" value="#5b6fde">
<input type="hidden" id="comment-avatar-b64" value="">
<input type="text" id="comment-name" placeholder="Name (optional)" maxlength="32">
<textarea id="comment-message" placeholder="Write something..." maxlength="300" required></textarea>
<div class="steam-submit-row">
@@ -88,6 +98,8 @@
</div>
</section>
<script src="js/gallery.js" defer></script>
<script src="js/hideBroken.js" defer></script>
<script src="js/tabs.js" defer></script>
js/comments.js
+61 -4
View File
@@ -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 = `<img src="${esc(data.avatarUrl)}" class="comment-avatar" alt="Avatar">`;
} else {
avatarHtml = `
<div class="comment-avatar" style="background:${esc(color)}">
${esc(initial)}
</div>
`;
}
div.innerHTML = `
<div class="comment-avatar" style="background:${esc(color)}">
${esc(initial)}
</div>
${avatarHtml}
<div class="comment-body">
<div class="comment-header">
<span class="comment-name">${esc(data.name)}</span>
style/comments.css
+74 -19
View File
@@ -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;
}