comment section

index.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="style/about.css">
     <link rel="stylesheet" href="style/gallery.css">
     <link rel="stylesheet" href="style/ahmet.css">
+    <link rel="stylesheet" href="style/comments.css">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <title>Esef</title>
   </head>
@@ -20,8 +21,56 @@
     </div>
 
     <section id="about" class="tab-content">
+
+      <!-- Top half: welcome -->
+      <div id="about-hero">
         <h1>Hello!!!!</h1>
         <p>Welcome to my first website, I don't actually use here at all but maybe I'll consider putting more in the future.</p>
+      </div>
+
+      <!-- Bottom half: comments -->
+      <div id="comments-section">
+
+        <div class="comments-top-row">
+          <h2 id="comments-title">Visitor Messages</h2>
+          <span class="comments-hint">No account needed — just type and post.</span>
+        </div>
+
+        <div id="firebase-setup-warning">
+          ⚠️ <strong>Setup needed:</strong> Open <code>js/comments.js</code> and follow the setup instructions at the top of the file.
+        </div>
+
+        <!-- Form -->
+        <div class="comment-form-box">
+
+          <!-- Avatar color picker (optional) -->
+          <div id="avatar-picker">
+            <span class="picker-label">Avatar colour</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>
+              <button type="button" class="av-opt" data-color="#10b981" style="background:#10b981"></button>
+              <button type="button" class="av-opt" data-color="#f59e0b" style="background:#f59e0b"></button>
+              <button type="button" class="av-opt" data-color="#ef4444" style="background:#ef4444"></button>
+              <button type="button" class="av-opt" data-color="#8b5cf6" style="background:#8b5cf6"></button>
+              <button type="button" class="av-opt" data-color="#ec4899" style="background:#ec4899"></button>
+              <button type="button" class="av-opt" data-color="#64748b" style="background:#64748b"></button>
+            </div>
+          </div>
+
+          <form id="comment-form" autocomplete="off">
+            <input type="hidden" id="comment-avatar-color" value="#5b6fde">
+            <input type="text" id="comment-name" placeholder="Name  (optional — leave blank for Anonymous)" maxlength="32">
+            <textarea id="comment-message" placeholder="Leave a message..." maxlength="300" required></textarea>
+            <div class="comment-form-footer">
+              <span id="char-count">300</span>
+              <button type="submit" id="comment-submit">POST</button>
+            </div>
+          </form>
+        </div>
+
+        <div id="comments-list"></div>
+      </div>
     </section>
 
     <section id="gallery" class="tab-content">
@@ -38,5 +87,10 @@
     <script src="js/gallery.js" defer></script>
     <script src="js/hideBroken.js" defer></script>
     <script src="js/tabs.js" defer></script>
+
+    <!-- Firebase SDK (loaded before comments.js) -->
+    <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore-compat.js"></script>
+    <script src="js/comments.js"></script>
     </body>
 </html>

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 = '<p class="no-comments">No messages yet — be the first!</p>';
+                return;
+            }
+            snap.forEach(doc => listEl.appendChild(buildBubble(doc.data())));
+
+        }, err => {
+            console.error(err);
+            listEl.innerHTML = '<p class="no-comments">Could not load comments. Check your Firebase config.</p>';
+        });
+
+    // ── 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 = `
+        <div class="comment-avatar" style="background:${esc(color)}">
+            ${esc(initial)}
+        </div>
+        <div class="comment-body">
+            <div class="comment-header">
+                <span class="comment-name">${esc(data.name)}</span>
+                <span class="comment-time">${timeStr}</span>
+            </div>
+            <p class="comment-text">${esc(data.message)}</p>
+        </div>
+    `;
+    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, '&lt;').replace(/>/g, '&gt;');
+}
+
+function esc(str) {
+    if (!str) return '';
+    return String(str)
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}

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;
+}