From f56f2a70abac562b471119087a80f101fab20322 Mon Sep 17 00:00:00 2001 From: esefxdz Date: Sun, 26 Apr 2026 14:16:58 +0300 Subject: [PATCH] comment section --- index.html | 58 ++++++++- js/comments.js | 176 +++++++++++++++++++++++++++ style/comments.css | 291 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 523 insertions(+), 2 deletions(-) create mode 100644 js/comments.js create mode 100644 style/comments.css diff --git a/index.html b/index.html index 1260847..2a9ae97 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + Esef @@ -20,8 +21,56 @@
-

Hello!!!!

-

Welcome to my first website, I don't actually use here at all but maybe I'll consider putting more in the future.

+ + +
+

Hello!!!!

+

Welcome to my first website, I don't actually use here at all but maybe I'll consider putting more in the future.

+
+ + +
+ +
+

Visitor Messages

+ No account needed — just type and post. +
+ +
+ ⚠️ Setup needed: Open js/comments.js and follow the setup instructions at the top of the file. +
+ + +
+ + +
+ Avatar colour +
+ + + + + + + + +
+
+ +
+ + + +
+ 300 + +
+
+
+ +
+
@@ -38,5 +87,10 @@ + + + + + diff --git a/js/comments.js b/js/comments.js new file mode 100644 index 0000000..3aca823 --- /dev/null +++ b/js/comments.js @@ -0,0 +1,176 @@ +const FIREBASE_CONFIG = { + apiKey: "AIzaSyDuSjEGEKx5FnWYnQq8f_owbpYRBRrl5x0", + authDomain: "esef-514bf.firebaseapp.com", + projectId: "esef-514bf", + storageBucket: "esef-514bf.firebasestorage.app", + messagingSenderId: "353969651290", + appId: "1:353969651290:web:41e3aaf8e54c743702a263" +}; + +// ================================================================ + +const MAX_CHARS = 300; +const COLLECTION = "comments"; + +document.addEventListener('DOMContentLoaded', () => { + + const configured = FIREBASE_CONFIG.apiKey !== "YOUR_API_KEY"; + + const form = document.getElementById('comment-form'); + const nameInput = document.getElementById('comment-name'); + const msgInput = document.getElementById('comment-message'); + const submitBtn = document.getElementById('comment-submit'); + const charCountEl = document.getElementById('char-count'); + const listEl = document.getElementById('comments-list'); + const titleEl = document.getElementById('comments-title'); + const colorInput = document.getElementById('comment-avatar-color'); + const warning = document.getElementById('firebase-setup-warning'); + + if (!form || !listEl) return; + + // ── Avatar colour picker ───────────────────────────────────── + document.querySelectorAll('.av-opt').forEach(btn => { + btn.addEventListener('click', () => { + document.querySelectorAll('.av-opt').forEach(b => b.classList.remove('selected')); + btn.classList.add('selected'); + colorInput.value = btn.dataset.color; + }); + }); + + // ── Char counter ───────────────────────────────────────────── + charCountEl.textContent = MAX_CHARS; + msgInput.addEventListener('input', () => { + const left = MAX_CHARS - msgInput.value.length; + charCountEl.textContent = left; + charCountEl.style.color = left < 40 ? '#e05555' : '#364858'; + }); + + // ── No Firebase → show demo + setup warning ────────────────── + if (!configured) { + if (warning) warning.style.display = 'block'; + showDemo(listEl); + form.addEventListener('submit', e => { + e.preventDefault(); + alert('Firebase is not connected yet!\n\nOpen js/comments.js and follow the setup instructions at the top of the file.'); + }); + return; + } + + // ── Firebase init ──────────────────────────────────────────── + firebase.initializeApp(FIREBASE_CONFIG); + const db = firebase.firestore(); + + // ── Real-time feed ─────────────────────────────────────────── + db.collection(COLLECTION) + .orderBy('timestamp', 'desc') + .onSnapshot(snap => { + listEl.innerHTML = ''; + + if (titleEl) { + const old = titleEl.querySelector('.comment-count-badge'); + if (old) old.remove(); + if (snap.size > 0) { + const badge = document.createElement('span'); + badge.className = 'comment-count-badge'; + badge.textContent = snap.size; + titleEl.appendChild(badge); + } + } + + if (snap.empty) { + listEl.innerHTML = '

No messages yet — be the first!

'; + return; + } + snap.forEach(doc => listEl.appendChild(buildBubble(doc.data()))); + + }, err => { + console.error(err); + listEl.innerHTML = '

Could not load comments. Check your Firebase config.

'; + }); + + // ── Submit ─────────────────────────────────────────────────── + form.addEventListener('submit', async e => { + e.preventDefault(); + + 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'; + + if (!message) { msgInput.focus(); return; } + + submitBtn.disabled = true; + submitBtn.textContent = 'Posting...'; + + try { + await db.collection(COLLECTION).add({ + name, message, color, + timestamp: firebase.firestore.FieldValue.serverTimestamp() + }); + nameInput.value = ''; + msgInput.value = ''; + charCountEl.textContent = MAX_CHARS; + charCountEl.style.color = '#364858'; + } catch (err) { + console.error(err); + alert('Failed to post. Try again!'); + } finally { + submitBtn.disabled = false; + submitBtn.textContent = 'POST'; + } + }); +}); + +// ── Build a single comment bubble (Steam layout) ───────────────── + +function buildBubble(data) { + const div = document.createElement('div'); + div.className = 'comment-bubble'; + + const ts = data.timestamp ? data.timestamp.toDate() : new Date(); + const timeStr = ts.toLocaleDateString('en-US', { + year: 'numeric', month: 'short', day: 'numeric', + hour: '2-digit', minute: '2-digit' + }); + + const color = data.color || '#64748b'; + const initial = (data.name || '?').charAt(0).toUpperCase(); + + div.innerHTML = ` +
+ ${esc(initial)} +
+
+
+ ${esc(data.name)} + ${timeStr} +
+

${esc(data.message)}

+
+ `; + return div; +} + +// ── Demo bubbles shown before Firebase is set up ───────────────── + +function showDemo(list) { + const demos = [ + { name: 'Visitor', message: 'cool site lol', color: '#3b82f6', timestamp: { toDate: () => new Date(Date.now() - 60000) } }, + { name: 'Ahmet', message: 'when is the gallery getting updated', color: '#10b981', timestamp: { toDate: () => new Date(Date.now() - 300000) } }, + { name: 'Someone', message: 'Ahmet museum is peak', color: '#8b5cf6', timestamp: { toDate: () => new Date(Date.now() - 800000) } }, + ]; + list.innerHTML = ''; + demos.forEach(d => list.appendChild(buildBubble(d))); +} + +// ── Helpers ────────────────────────────────────────────────────── + +function clean(str) { + return str.replace(//g, '>'); +} + +function esc(str) { + if (!str) return ''; + return String(str) + .replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, '''); +} diff --git a/style/comments.css b/style/comments.css new file mode 100644 index 0000000..6d61b3d --- /dev/null +++ b/style/comments.css @@ -0,0 +1,291 @@ +/* ── About page two-part layout ──────────────────────────── */ + +#about-hero { + padding: 120px 20px 60px; + text-align: center; +} + +/* Stop the global h1 margin from pushing things */ +#about-hero h1 { + margin-top: 0; +} + +/* ── Comments panel ───────────────────────────────────────── */ +#comments-section { + background: rgba(5, 12, 24, 0.78); + backdrop-filter: blur(18px); + -webkit-backdrop-filter: blur(18px); + border-top: 1px solid rgba(91, 111, 222, 0.3); + padding: 40px 24px 60px; + text-align: left; +} + +.comments-top-row { + display: flex; + align-items: baseline; + gap: 14px; + margin-bottom: 22px; + flex-wrap: wrap; +} + +#comments-title { + font-size: 0.8rem; + color: #8aaabf; + text-transform: uppercase; + letter-spacing: 3px; + font-weight: 600; + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.comments-hint { + font-size: 0.78rem; + color: #3f5268; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +/* ── Firebase warning ─────────────────────────────────────── */ +#firebase-setup-warning { + background: rgba(255, 100, 60, 0.1); + border: 1px solid rgba(255, 100, 60, 0.4); + border-radius: 10px; + padding: 12px 18px; + margin-bottom: 20px; + color: #ffb89a; + font-size: 0.85rem; + line-height: 1.6; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + display: none; +} + +/* ── Post form ────────────────────────────────────────────── */ +.comment-form-box { + background: rgba(10, 20, 38, 0.7); + border: 1px solid rgba(91, 111, 222, 0.3); + border-radius: 12px; + padding: 18px 20px; + margin-bottom: 28px; + max-width: 680px; +} + +/* ── Avatar picker ────────────────────────────────────────── */ +#avatar-picker { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 14px; + flex-wrap: wrap; +} + +.picker-label { + font-size: 0.78rem; + color: #4a6278; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + flex-shrink: 0; +} + +.picker-row { + display: flex; + gap: 7px; + flex-wrap: wrap; +} + +.av-opt { + width: 26px; + height: 26px; + border-radius: 5px; + border: 2px solid transparent; + cursor: pointer; + padding: 0; + transition: transform 0.15s, border-color 0.15s; + flex-shrink: 0; +} + +.av-opt:hover { + transform: scale(1.18); +} + +.av-opt.selected { + border-color: #fff; + transform: scale(1.22); + box-shadow: 0 0 8px rgba(255,255,255,0.35); +} + +/* ── Form inputs ──────────────────────────────────────────── */ +.comment-form-box input[type="text"], +.comment-form-box textarea { + width: 100%; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(91, 111, 222, 0.25); + border-radius: 7px; + color: #dce8f5; + padding: 9px 13px; + font-size: 0.9rem; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + box-sizing: border-box; + margin-bottom: 9px; + transition: border-color 0.2s, box-shadow 0.2s; + resize: none; +} + +.comment-form-box input[type="text"]::placeholder, +.comment-form-box textarea::placeholder { + color: #364858; +} + +.comment-form-box input[type="text"]:focus, +.comment-form-box textarea:focus { + outline: none; + border-color: #5b6fde; + box-shadow: 0 0 0 3px rgba(91,111,222,0.12); +} + +.comment-form-box textarea { + height: 72px; +} + +.comment-form-footer { + display: flex; + justify-content: space-between; + align-items: center; +} + +#char-count { + font-size: 0.8rem; + color: #364858; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + transition: color 0.2s; +} + +#comment-submit { + background: linear-gradient(135deg, #5b6fde, #3a52c4); + color: #fff; + border: none; + border-radius: 7px; + padding: 8px 26px; + font-size: 0.85rem; + font-weight: 700; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + cursor: pointer; + letter-spacing: 2px; + text-transform: uppercase; + transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s; + box-shadow: 0 2px 12px rgba(91,111,222,0.35); +} + +#comment-submit:hover:not(:disabled) { + opacity: 0.85; + box-shadow: 0 4px 18px rgba(91,111,222,0.55); +} + +#comment-submit:active:not(:disabled) { transform: scale(0.97); } +#comment-submit:disabled { opacity: 0.4; cursor: not-allowed; } + +/* ── Comment bubbles (Steam layout) ──────────────────────── */ +#comments-list { + display: flex; + flex-direction: column; + gap: 6px; + max-width: 680px; +} + +.comment-bubble { + display: flex; + gap: 12px; + align-items: flex-start; + background: rgba(10, 20, 38, 0.55); + border: 1px solid rgba(91, 111, 222, 0.15); + border-radius: 8px; + padding: 12px 14px; + animation: slideUp 0.25s ease forwards; + transition: border-color 0.2s, background 0.2s; +} + +.comment-bubble:hover { + border-color: rgba(91,111,222,0.4); + background: rgba(10, 20, 38, 0.75); +} + +@keyframes slideUp { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} + +/* Steam-style square avatar */ +.comment-avatar { + width: 42px; + height: 42px; + min-width: 42px; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.1rem; + color: #fff; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.comment-body { + flex: 1; + min-width: 0; +} + +.comment-header { + display: flex; + align-items: baseline; + gap: 8px; + margin-bottom: 5px; + flex-wrap: wrap; +} + +.comment-name { + font-weight: 700; + font-size: 0.9rem; + color: #c6d4df; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.comment-time { + font-size: 0.76rem; + color: #344a5e; + margin-left: auto; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + white-space: nowrap; +} + +.comment-text { + color: #8fafc8 !important; + font-size: 0.88rem !important; + line-height: 1.55 !important; + margin: 0 !important; + max-width: 100% !important; + word-break: break-word; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.no-comments { + color: #2e4156 !important; + font-size: 0.85rem !important; + text-align: center !important; + padding: 32px !important; + font-style: italic; + margin: 0 !important; + max-width: 100% !important; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +/* Count badge next to title */ +.comment-count-badge { + display: inline-block; + background: rgba(91,111,222,0.2); + color: #5b7a9a; + border-radius: 20px; + padding: 1px 8px; + font-size: 0.72rem; + margin-left: 8px; + vertical-align: middle; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +}