website polish
This commit is contained in:
esef committed
1 parent
a55e339ba8
commit
6b52f9ea14
16 files changed
+671
-770
No files matched your search
@@ -7,3 +7,5 @@ Thumbs.db
|
||||
.DS_Store
|
||||
firebase.txt
|
||||
manipulate_boxes.md
|
||||
bot/
|
||||
AGENTS.md
|
||||
@@ -5,26 +5,26 @@
|
||||
```
|
||||
website/
|
||||
├── index.html # Single-page entry point — all 5 tabs live here
|
||||
├── gallery-container.html # Static gallery image tags (50 images)
|
||||
├── _redirects # Netlify SPA rewrite rule (/* → /index.html)
|
||||
├── js/
|
||||
│ ├── tabs.js # Client-side routing, tab switching, background video swap
|
||||
│ ├── comments.js # Steam-style comment wall (Firestore: comments + stats)
|
||||
│ ├── yuukabot.js # Live bot dashboard (Firestore: sysinfo/server)
|
||||
│ ├── calendar.js # Event calendar (Firestore: calendar_events)
|
||||
│ └── gallery.js # Lightbox + dynamic thumbnail loader
|
||||
│ ├── bucketlist.js # Password-gated list (Firestore: bucketlist_auth + bucketlist_data)
|
||||
│ └── gallery.js # Lightbox + thumbnail grid built from gallery/manifest.json
|
||||
├── style/
|
||||
│ ├── styles.css # Global layout, nav bar, base typography
|
||||
│ ├── comments.css # Steam-profile comment UI
|
||||
│ ├── yuukabot.css # Dashboard glassmorphism cards + grid
|
||||
│ ├── calendar.css # Calendar grid, popups, sidebar
|
||||
│ ├── gallery.css # Gallery grid + lightbox
|
||||
│ └── ahmet.css # Bucketlist tab button
|
||||
├── gallery/ # 50 full-quality images + thumbnails/ subdirectory
|
||||
│ ├── bucketlist.css # Lock screen + list panel
|
||||
│ └── gallery.css # Gallery grid + lightbox
|
||||
├── gallery/ # Full-quality images, thumbnails/, and manifest.json
|
||||
├── textures/ # Background MP4 videos + clickable character PNG
|
||||
├── sounds/ # Click SFX (yuuka_click.mp3)
|
||||
├── generate_thumbnails.py # Pillow script: resizes gallery/ images → thumbnails/
|
||||
└── firebase.txt # Firestore security rules (reference only)
|
||||
├── generate_thumbnails.py # Pillow script: builds thumbnails/ + manifest.json
|
||||
└── firebase.txt # Firestore security rules (reference only, gitignored)
|
||||
```
|
||||
|
||||
- **No frameworks, no build step, no package manager.** Every file is served directly.
|
||||
@@ -44,7 +44,7 @@ npx serve .
|
||||
```
|
||||
|
||||
- `_redirects` handles SPA routing on Netlify; for local dev, navigate to `/index.html` directly.
|
||||
- `generate_thumbnails.py` regenerates gallery thumbnails: `python generate_thumbnails.py`. Requires `Pillow`.
|
||||
- After adding images to `gallery/`, run `python generate_thumbnails.py` (requires `Pillow`). It creates missing thumbnails and rewrites `gallery/manifest.json`, which is the list the gallery renders — an image not in the manifest won't show up.
|
||||
|
||||
There are **no automated tests** in this project.
|
||||
|
||||
@@ -52,7 +52,7 @@ There are **no automated tests** in this project.
|
||||
|
||||
- **HTML:** Semantic elements where practical. Tab contents use `<section id="…" class="tab-content">`. IDs are kebab-case.
|
||||
- **CSS:** Each tab has its own stylesheet under `style/`. Class names follow BEM-lite (`cal-day`, `dash-card`). CSS variables define layout knobs (`--dash-columns`, `--dash-gap`).
|
||||
- **JavaScript:** Vanilla ES6+, no transpilation. Functions are `camelCase`, DOM-referencing IDs match kebab-case HTML IDs. Each script is self-contained with a `DOMContentLoaded` guard. Firebase config is repeated per-file (same values) — keep this pattern.
|
||||
- **JavaScript:** Vanilla ES6+, no transpilation. Functions are `camelCase`, DOM-referencing IDs match kebab-case HTML IDs. Each script is self-contained with a `DOMContentLoaded` guard, and Firestore-backed scripts are wrapped in an IIFE so their helpers don't leak into (and clobber each other in) the global scope. Firebase config is repeated per-file (same values) — keep this pattern.
|
||||
- **Whitespace:** 4-space indentation in JS/CSS, 2-space in HTML. No trailing semicolons are required but consistency within each file is expected.
|
||||
- No linters or formatters are configured.
|
||||
|
||||
@@ -76,6 +76,8 @@ Examples from the repo: `calendar added`, `fix upcoming filter`, `css polish bs`
|
||||
- **Firebase API keys** are public by design (they identify the project, not authenticate). Do not commit service-account credentials or `.env` files.
|
||||
- `firebase.txt` is in `.gitignore` — keep the live rules reference there, not hardcoded in source.
|
||||
- All Firestore writes are guarded by security rules (see `firebase.txt`): only `comments` and `stats/global_clicks` accept public writes; everything else is read-only.
|
||||
- Use `allow get` (not `allow read`) for collections keyed by a secret, like `bucketlist_auth` — `read` also permits listing every document.
|
||||
- Editing `firebase.txt` does nothing by itself: paste it into Firebase Console → Firestore → Rules and publish.
|
||||
|
||||
## Adding a New Feature
|
||||
|
||||
|
||||
+54
-26
@@ -1,41 +1,54 @@
|
||||
"""Build gallery thumbnails + manifest.
|
||||
|
||||
Run after adding images to gallery/:
|
||||
python generate_thumbnails.py
|
||||
|
||||
- Creates gallery/thumbnails/<name>.jpg (max 400x400) for any image missing one.
|
||||
- Rewrites gallery/manifest.json: the ordered list of full-size filenames
|
||||
that js/gallery.js renders.
|
||||
"""
|
||||
import json
|
||||
import os
|
||||
|
||||
from PIL import Image
|
||||
|
||||
def create_thumbnails(base_folder):
|
||||
if not os.path.exists(base_folder):
|
||||
print(f"Folder {base_folder} does not exist.")
|
||||
return
|
||||
IMAGE_EXTS = {".jpg", ".jpeg", ".png", ".gif"}
|
||||
THUMB_SIZE = (400, 400)
|
||||
|
||||
|
||||
def sort_key(filename):
|
||||
# Numeric names sort numerically (1, 2, ..., 10), anything else after, alphabetically
|
||||
stem = os.path.splitext(filename)[0]
|
||||
return (0, int(stem), "") if stem.isdigit() else (1, 0, stem.lower())
|
||||
|
||||
|
||||
def list_images(base_folder):
|
||||
return sorted(
|
||||
(f for f in os.listdir(base_folder)
|
||||
if os.path.isfile(os.path.join(base_folder, f))
|
||||
and os.path.splitext(f)[1].lower() in IMAGE_EXTS),
|
||||
key=sort_key,
|
||||
)
|
||||
|
||||
|
||||
def create_thumbnails(base_folder, images):
|
||||
thumb_dir = os.path.join(base_folder, "thumbnails")
|
||||
os.makedirs(thumb_dir, exist_ok=True)
|
||||
|
||||
count = 0
|
||||
for filename in os.listdir(base_folder):
|
||||
ext = filename.split('.')[-1].lower()
|
||||
if ext not in ['jpg', 'jpeg', 'png', 'gif']:
|
||||
continue
|
||||
|
||||
filepath = os.path.join(base_folder, filename)
|
||||
if not os.path.isfile(filepath):
|
||||
continue
|
||||
|
||||
base_name = filename.split('.')[0]
|
||||
for filename in images:
|
||||
# Always save thumbnail as jpg
|
||||
thumb_path = os.path.join(thumb_dir, f"{base_name}.jpg")
|
||||
|
||||
# If thumbnail already exists, skip
|
||||
stem = os.path.splitext(filename)[0]
|
||||
thumb_path = os.path.join(thumb_dir, f"{stem}.jpg")
|
||||
if os.path.exists(thumb_path):
|
||||
continue
|
||||
|
||||
try:
|
||||
with Image.open(filepath) as img:
|
||||
# Convert to RGB if necessary (e.g., for RGBA PNGs or GIFs)
|
||||
if img.mode != 'RGB':
|
||||
img = img.convert('RGB')
|
||||
|
||||
# Resize keeping aspect ratio
|
||||
# Set a max dimension (e.g., 400x400)
|
||||
img.thumbnail((400, 400))
|
||||
with Image.open(os.path.join(base_folder, filename)) as img:
|
||||
# JPEG needs RGB (e.g. for RGBA PNGs or palette GIFs)
|
||||
if img.mode != "RGB":
|
||||
img = img.convert("RGB")
|
||||
img.thumbnail(THUMB_SIZE) # keeps aspect ratio
|
||||
img.save(thumb_path, "JPEG", quality=85)
|
||||
count += 1
|
||||
print(f"Created thumbnail for {filename}")
|
||||
@@ -44,5 +57,20 @@ def create_thumbnails(base_folder):
|
||||
|
||||
print(f"Created {count} thumbnails in {base_folder}")
|
||||
|
||||
|
||||
def write_manifest(base_folder, images):
|
||||
path = os.path.join(base_folder, "manifest.json")
|
||||
with open(path, "w", encoding="utf-8") as f:
|
||||
json.dump(images, f, indent=2)
|
||||
f.write("\n")
|
||||
print(f"Wrote {path} ({len(images)} images)")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
create_thumbnails("gallery")
|
||||
folder = "gallery"
|
||||
if not os.path.isdir(folder):
|
||||
print(f"Folder {folder} does not exist.")
|
||||
else:
|
||||
imgs = list_images(folder)
|
||||
create_thumbnails(folder, imgs)
|
||||
write_manifest(folder, imgs)
|
||||
+13
-21
@@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="style/styles.css">
|
||||
<link rel="stylesheet" href="style/gallery.css">
|
||||
<link rel="stylesheet" href="style/ahmet.css">
|
||||
<link rel="stylesheet" href="style/comments.css">
|
||||
<link rel="stylesheet" href="style/yuukabot.css">
|
||||
<link rel="stylesheet" href="style/calendar.css">
|
||||
@@ -24,7 +24,6 @@
|
||||
<source src="textures/cz_background.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div id="top-line">
|
||||
<a href="index.html" id="home-btn"></a>
|
||||
<button id="about-btn">About This Website</button>
|
||||
<button id="gallery-btn">Gallery</button>
|
||||
<button id="bucketlist-btn">Bucketlist</button>
|
||||
@@ -57,13 +56,8 @@
|
||||
<span id="comments-title"></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>
|
||||
|
||||
<!-- Post form — at the top -->
|
||||
<div class="steam-form-area" style="margin-bottom: 20px; border-top: none; padding-top: 0; margin-top: 20px;">
|
||||
<div class="steam-form-area">
|
||||
<p class="steam-form-label">Leave a comment:</p>
|
||||
|
||||
<!-- Avatar picker -->
|
||||
@@ -112,16 +106,14 @@
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="tab-content">
|
||||
<div class="gallery-grid">
|
||||
</div>
|
||||
<div id="gallery-container" class="gallery-grid"></div>
|
||||
</section>
|
||||
|
||||
<section id="bucketlist" class="tab-content"></section>
|
||||
<section id="bucketlist" class="tab-content"></section>
|
||||
|
||||
<section id="yuukabot" class="tab-content">
|
||||
<header class="dash-header">
|
||||
<h1><span class="status-dot" id="dash-status-dot"></span>Yuuka Bot</h1>
|
||||
<h1><span class="status-dot pending" id="dash-status-dot"></span>Yuuka Bot</h1>
|
||||
</header>
|
||||
|
||||
<div class="dash-grid">
|
||||
@@ -129,7 +121,7 @@
|
||||
<div class="dash-card span2">
|
||||
<div class="card-top"><span class="card-label">Uptime</span></div>
|
||||
<p class="card-value" id="dash-uptime">—</p>
|
||||
<div class="card-spacer"></div>
|
||||
<span class="card-detail" id="dash-bot-uptime"></span>
|
||||
</div>
|
||||
<div class="dash-card span2">
|
||||
<div class="card-top"><span class="card-label">Disk</span></div>
|
||||
@@ -210,22 +202,22 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lightbox (gallery) -->
|
||||
<div id="lightbox" class="lightbox">
|
||||
<span class="lightbox-close">×</span>
|
||||
<img class="lightbox-content" id="lightbox-img" alt="">
|
||||
</div>
|
||||
|
||||
<script src="js/gallery.js" defer></script>
|
||||
<script src="js/tabs.js" defer></script>
|
||||
|
||||
<!-- Firebase SDK (loaded before comments.js) -->
|
||||
<!-- Firebase SDK (must load before the Firestore-backed scripts below) -->
|
||||
<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>
|
||||
<script src="js/yuukabot.js"></script>
|
||||
<script src="js/calendar.js"></script>
|
||||
<script src="js/bucketlist.js"></script>
|
||||
|
||||
<!-- Lightbox -->
|
||||
<div id="lightbox" class="lightbox">
|
||||
<span class="lightbox-close">×</span>
|
||||
<img class="lightbox-content" id="lightbox-img">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+142
-136
@@ -1,152 +1,158 @@
|
||||
// Bucketlist tab — password-gated, real-time Firestore list
|
||||
const BL_FB_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 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"
|
||||
};
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// PASSWORD GATE — items never touch DOM until authenticated
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// PASSWORD GATE — items never touch DOM until authenticated
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
|
||||
// --- SHA-256 via Web Crypto ---------------------------------------------------
|
||||
async function sha256(text) {
|
||||
const buf = new TextEncoder().encode(text);
|
||||
const hash = await crypto.subtle.digest("SHA-256", buf);
|
||||
return Array.from(new Uint8Array(hash))
|
||||
.map(b => b.toString(16).padStart(2, "0"))
|
||||
.join("");
|
||||
}
|
||||
// --- SHA-256 via Web Crypto ---------------------------------------------------
|
||||
async function sha256(text) {
|
||||
const buf = new TextEncoder().encode(text);
|
||||
const hash = await crypto.subtle.digest("SHA-256", buf);
|
||||
return Array.from(new Uint8Array(hash))
|
||||
.map(b => b.toString(16).padStart(2, "0"))
|
||||
.join("");
|
||||
}
|
||||
|
||||
// --- Lock-screen HTML (only thing in DOM before auth) -------------------------
|
||||
function showLock(container) {
|
||||
container.innerHTML = `
|
||||
<div class="bl-lock">
|
||||
<div class="bl-lock-box">
|
||||
<h2>Bucketlist</h2>
|
||||
<input type="text" id="bl-user" placeholder="Username" autofocus>
|
||||
<input type="password" id="bl-pass" placeholder="Password">
|
||||
<button id="bl-submit">Unlock</button>
|
||||
<p id="bl-err"></p>
|
||||
// --- Lock-screen HTML (only thing in DOM before auth) -------------------------
|
||||
function showLock(container) {
|
||||
container.innerHTML = `
|
||||
<div class="bl-lock">
|
||||
<form class="bl-lock-box" id="bl-form">
|
||||
<h2>Bucketlist</h2>
|
||||
<input type="text" id="bl-user" placeholder="Username" autocomplete="username">
|
||||
<input type="password" id="bl-pass" placeholder="Password" autocomplete="current-password">
|
||||
<button type="submit" id="bl-submit">Unlock</button>
|
||||
<p id="bl-err"></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
// --- Build the real panel + attach Firestore after auth -----------------------
|
||||
function unlock(container, db, hash) {
|
||||
container.innerHTML = `
|
||||
<div class="bl-panel">
|
||||
<div class="bl-list" id="bl-list">
|
||||
<p class="bl-empty">Loading...</p>
|
||||
// --- Build the real panel + attach Firestore after auth -----------------------
|
||||
function unlock(container, db, hash) {
|
||||
container.innerHTML = `
|
||||
<div class="bl-panel">
|
||||
<div class="bl-list" id="bl-list">
|
||||
<p class="bl-empty">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
|
||||
const listEl = document.getElementById("bl-list");
|
||||
if (!listEl) return;
|
||||
const listEl = document.getElementById("bl-list");
|
||||
if (!listEl) return;
|
||||
|
||||
// items live under bucketlist_data/<sha256(user:pass)>/items — the path IS the key
|
||||
db.collection("bucketlist_data").doc(hash).collection("items").onSnapshot(snap => {
|
||||
const items = [];
|
||||
snap.forEach(doc => {
|
||||
const d = doc.data();
|
||||
items.push({
|
||||
id: doc.id,
|
||||
title: d.title || "",
|
||||
description: d.description || "",
|
||||
date: d.date || "",
|
||||
utc: d.utc || "",
|
||||
done: d.done || false
|
||||
// items live under bucketlist_data/<sha256(user:pass)>/items — the path IS the key
|
||||
db.collection("bucketlist_data").doc(hash).collection("items").onSnapshot(snap => {
|
||||
const items = [];
|
||||
snap.forEach(doc => {
|
||||
const d = doc.data();
|
||||
items.push({
|
||||
id: doc.id,
|
||||
title: d.title || "",
|
||||
description: d.description || "",
|
||||
date: d.date || "",
|
||||
utc: d.utc || "",
|
||||
done: d.done || false
|
||||
});
|
||||
});
|
||||
items.sort((a, b) => (a.utc || "").localeCompare(b.utc || ""));
|
||||
render(listEl, items);
|
||||
}, () => {
|
||||
if (listEl) listEl.innerHTML = '<p class="bl-empty">Could not load.</p>';
|
||||
});
|
||||
items.sort((a, b) => (a.utc || "").localeCompare(b.utc || ""));
|
||||
render(listEl, items);
|
||||
}, () => {
|
||||
if (listEl) listEl.innerHTML = '<p class="bl-empty">Could not load.</p>';
|
||||
});
|
||||
}
|
||||
|
||||
function render(listEl, items) {
|
||||
if (items.length === 0) {
|
||||
listEl.innerHTML = '<p class="bl-empty">Nothing here yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// NOTE: item.done adds .bl-done class — hook for completed-item styling (CSS still TODO)
|
||||
listEl.innerHTML = items.map(item =>
|
||||
'<div class="bl-item' + (item.done ? ' bl-done' : '') + '">' +
|
||||
'<div class="bl-title">' + esc(item.title) + '</div>' +
|
||||
(item.date ? '<div class="bl-date">' + esc(item.date) + '</div>' : '') +
|
||||
(item.description ? '<div class="bl-desc">' + esc(item.description) + '</div>' : '') +
|
||||
'</div>'
|
||||
).join("");
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
if (!s) return "";
|
||||
return String(s).replace(/&/g,"&").replace(/</g,"<")
|
||||
.replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ENTRY
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tab = document.getElementById("bucketlist");
|
||||
if (!tab) return;
|
||||
|
||||
if (!firebase.apps.length) firebase.initializeApp(BL_FB_CONFIG);
|
||||
const db = firebase.firestore();
|
||||
|
||||
const container = tab; // the <section> itself — nothing else exists inside it
|
||||
|
||||
// --- Already authenticated this session? ---------------------------------
|
||||
const savedHash = sessionStorage.getItem("bl_hash");
|
||||
if (savedHash) {
|
||||
unlock(container, db, savedHash);
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Show lock screen ----------------------------------------------------
|
||||
showLock(container);
|
||||
|
||||
const userInput = document.getElementById("bl-user");
|
||||
const passInput = document.getElementById("bl-pass");
|
||||
const submitBtn = document.getElementById("bl-submit");
|
||||
const errEl = document.getElementById("bl-err");
|
||||
|
||||
async function tryUnlock() {
|
||||
const user = userInput.value.trim();
|
||||
const pass = passInput.value;
|
||||
if (!user || !pass) return;
|
||||
|
||||
submitBtn.disabled = true;
|
||||
errEl.textContent = "";
|
||||
|
||||
// hash = sha256("username:password") — both must match the Firestore doc ID
|
||||
const hash = await sha256(user + ":" + pass);
|
||||
try {
|
||||
const doc = await db.collection("bucketlist_auth").doc(hash).get();
|
||||
if (doc.exists) {
|
||||
sessionStorage.setItem("bl_hash", hash);
|
||||
unlock(container, db, hash);
|
||||
} else {
|
||||
errEl.textContent = "Wrong credentials.";
|
||||
passInput.value = "";
|
||||
passInput.focus();
|
||||
}
|
||||
} catch (e) {
|
||||
errEl.textContent = "Could not verify. Try again.";
|
||||
function render(listEl, items) {
|
||||
if (items.length === 0) {
|
||||
listEl.innerHTML = '<p class="bl-empty">Nothing here yet.</p>';
|
||||
return;
|
||||
}
|
||||
submitBtn.disabled = false;
|
||||
|
||||
listEl.innerHTML = items.map(item =>
|
||||
'<div class="bl-item' + (item.done ? ' bl-done' : '') + '">' +
|
||||
'<div class="bl-title">' + esc(item.title) + '</div>' +
|
||||
(item.date ? '<div class="bl-date">' + esc(item.date) + '</div>' : '') +
|
||||
(item.description ? '<div class="bl-desc">' + esc(item.description) + '</div>' : '') +
|
||||
'</div>'
|
||||
).join("");
|
||||
}
|
||||
|
||||
submitBtn.onclick = tryUnlock;
|
||||
userInput.onkeydown = e => { if (e.key === "Enter") passInput.focus(); };
|
||||
passInput.onkeydown = e => { if (e.key === "Enter") tryUnlock(); };
|
||||
});
|
||||
function esc(s) {
|
||||
if (!s) return "";
|
||||
return String(s).replace(/&/g,"&").replace(/</g,"<")
|
||||
.replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ENTRY
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tab = document.getElementById("bucketlist");
|
||||
if (!tab) return;
|
||||
|
||||
if (!firebase.apps.length) firebase.initializeApp(FIREBASE_CONFIG);
|
||||
const db = firebase.firestore();
|
||||
|
||||
const container = tab; // the <section> itself — nothing else exists inside it
|
||||
|
||||
// --- Already authenticated this session? ---------------------------------
|
||||
const savedHash = sessionStorage.getItem("bl_hash");
|
||||
if (savedHash) {
|
||||
unlock(container, db, savedHash);
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Show lock screen ----------------------------------------------------
|
||||
showLock(container);
|
||||
|
||||
const userInput = document.getElementById("bl-user");
|
||||
const passInput = document.getElementById("bl-pass");
|
||||
const submitBtn = document.getElementById("bl-submit");
|
||||
const errEl = document.getElementById("bl-err");
|
||||
|
||||
async function tryUnlock() {
|
||||
const user = userInput.value.trim();
|
||||
const pass = passInput.value;
|
||||
if (!user || !pass) {
|
||||
(user ? passInput : userInput).focus();
|
||||
return;
|
||||
}
|
||||
|
||||
submitBtn.disabled = true;
|
||||
errEl.textContent = "";
|
||||
|
||||
// hash = sha256("username:password") — both must match the Firestore doc ID
|
||||
const hash = await sha256(user + ":" + pass);
|
||||
try {
|
||||
const doc = await db.collection("bucketlist_auth").doc(hash).get();
|
||||
if (doc.exists) {
|
||||
sessionStorage.setItem("bl_hash", hash);
|
||||
unlock(container, db, hash);
|
||||
} else {
|
||||
errEl.textContent = "Wrong credentials.";
|
||||
passInput.value = "";
|
||||
passInput.focus();
|
||||
}
|
||||
} catch (e) {
|
||||
errEl.textContent = "Could not verify. Try again.";
|
||||
}
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
|
||||
// Enter in either field submits the form
|
||||
document.getElementById("bl-form").onsubmit = e => {
|
||||
e.preventDefault();
|
||||
tryUnlock();
|
||||
};
|
||||
});
|
||||
})();
|
||||
+121
-117
@@ -1,140 +1,144 @@
|
||||
// Calendar tab — timezone-aware (auto-converts to your local time)
|
||||
const CAL_FB_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 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 WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
const MONTHS = ["January","February","March","April","May","June",
|
||||
"July","August","September","October","November","December"];
|
||||
const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
const MONTHS = ["January","February","March","April","May","June",
|
||||
"July","August","September","October","November","December"];
|
||||
|
||||
function fmtTime(utcIso) {
|
||||
if (utcIso) {
|
||||
try {
|
||||
var d = new Date(utcIso);
|
||||
if (!isNaN(d.getTime())) {
|
||||
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tab = document.getElementById("calendar");
|
||||
if (!tab) return;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const tab = document.getElementById("calendar");
|
||||
if (!tab) return;
|
||||
if (!firebase.apps.length) firebase.initializeApp(FIREBASE_CONFIG);
|
||||
const db = firebase.firestore();
|
||||
|
||||
if (!firebase.apps.length) firebase.initializeApp(CAL_FB_CONFIG);
|
||||
const db = firebase.firestore();
|
||||
let allEvents = [];
|
||||
const now = new Date();
|
||||
let viewYear = now.getFullYear();
|
||||
let viewMonth = now.getMonth();
|
||||
|
||||
let allEvents = [];
|
||||
let viewDate = new Date();
|
||||
const gridEl = document.getElementById("cal-grid");
|
||||
const navEl = document.getElementById("cal-nav-title");
|
||||
const sidebarEl = document.getElementById("cal-sidebar-list");
|
||||
|
||||
const gridEl = document.getElementById("cal-grid");
|
||||
const navEl = document.getElementById("cal-nav-title");
|
||||
const sidebarEl = document.getElementById("cal-sidebar-list");
|
||||
|
||||
db.collection("calendar_events").onSnapshot(snap => {
|
||||
allEvents = [];
|
||||
snap.forEach(doc => {
|
||||
const d = doc.data();
|
||||
allEvents.push({
|
||||
id: doc.id,
|
||||
title: d.title || "",
|
||||
date: d.date || "",
|
||||
time: d.time || "",
|
||||
utc: d.utc || "",
|
||||
description: d.description || "",
|
||||
_sort: d.utc || (d.date + "T" + (d.time || "00:00"))
|
||||
});
|
||||
});
|
||||
allEvents.sort((a, b) => a._sort.localeCompare(b._sort));
|
||||
render();
|
||||
}, () => {
|
||||
if (gridEl) gridEl.innerHTML = '<p class="cal-side-empty">Could not load.</p>';
|
||||
});
|
||||
|
||||
document.getElementById("cal-prev").onclick = () => { viewDate.setMonth(viewDate.getMonth()-1); render(); };
|
||||
document.getElementById("cal-next").onclick = () => { viewDate.setMonth(viewDate.getMonth()+1); render(); };
|
||||
|
||||
// Auto-refresh every 60s so "Upcoming" stays current as time passes
|
||||
setInterval(render, 60000);
|
||||
|
||||
function render() {
|
||||
const year = viewDate.getFullYear();
|
||||
const month = viewDate.getMonth();
|
||||
navEl.textContent = MONTHS[month] + " " + year;
|
||||
|
||||
const byDate = {};
|
||||
allEvents.forEach(e => {
|
||||
if (!byDate[e.date]) byDate[e.date] = [];
|
||||
byDate[e.date].push(e);
|
||||
db.collection("calendar_events").onSnapshot(snap => {
|
||||
allEvents = snap.docs.map(doc => toEvent(doc.data()));
|
||||
allEvents.sort((a, b) => a.when - b.when);
|
||||
render();
|
||||
}, () => {
|
||||
gridEl.innerHTML = '<p class="cal-side-empty">Could not load.</p>';
|
||||
});
|
||||
|
||||
const firstDay = new Date(year, month, 1).getDay();
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
const today = new Date();
|
||||
const todayStr = today.getFullYear() + "-" +
|
||||
String(today.getMonth()+1).padStart(2,"0") + "-" +
|
||||
String(today.getDate()).padStart(2,"0");
|
||||
document.getElementById("cal-prev").onclick = () => shiftMonth(-1);
|
||||
document.getElementById("cal-next").onclick = () => shiftMonth(1);
|
||||
|
||||
let html = "";
|
||||
WEEKDAYS.forEach(d => html += '<div class="cal-day-header">' + d + "</div>");
|
||||
// Auto-refresh every 60s so "Upcoming" stays current as time passes
|
||||
setInterval(render, 60000);
|
||||
|
||||
for (let i = 0; i < firstDay; i++) {
|
||||
html += '<div class="cal-day other-month"><div class="day-num"></div></div>';
|
||||
function shiftMonth(delta) {
|
||||
// Day 1 avoids overflow (e.g. Jan 31 + 1 month → Mar 3)
|
||||
const d = new Date(viewYear, viewMonth + delta, 1);
|
||||
viewYear = d.getFullYear();
|
||||
viewMonth = d.getMonth();
|
||||
render();
|
||||
}
|
||||
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
const dateStr = year + "-" +
|
||||
String(month+1).padStart(2,"0") + "-" +
|
||||
String(d).padStart(2,"0");
|
||||
const dayEvents = byDate[dateStr] || [];
|
||||
const isToday = dateStr === todayStr;
|
||||
const hasEvents = dayEvents.length > 0;
|
||||
function render() {
|
||||
navEl.textContent = MONTHS[viewMonth] + " " + viewYear;
|
||||
|
||||
html += '<div class="cal-day' +
|
||||
(isToday ? " today" : "") +
|
||||
(hasEvents ? " has-events" : "") + '">';
|
||||
html += '<div class="day-num">' + d + "</div>";
|
||||
const byDate = {};
|
||||
allEvents.forEach(e => {
|
||||
(byDate[e.date] = byDate[e.date] || []).push(e);
|
||||
});
|
||||
|
||||
if (hasEvents) {
|
||||
dayEvents.forEach(() => html += '<span class="day-dot"></span>');
|
||||
html += '<div class="cal-popup"><h4>' + dateStr + "</h4>";
|
||||
dayEvents.forEach(e => {
|
||||
html += '<div class="cal-popup-item">';
|
||||
if (e.time) {
|
||||
html += '<span class="pop-time">' + fmtTime(e.utc) + "</span> ";
|
||||
}
|
||||
html += esc(e.title);
|
||||
if (e.description) html += '<div class="pop-desc">' + esc(e.description) + "</div>";
|
||||
const firstDay = new Date(viewYear, viewMonth, 1).getDay();
|
||||
const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
|
||||
const todayStr = ymd(new Date());
|
||||
|
||||
let html = "";
|
||||
WEEKDAYS.forEach(d => html += '<div class="cal-day-header">' + d + "</div>");
|
||||
|
||||
for (let i = 0; i < firstDay; i++) {
|
||||
html += '<div class="cal-day other-month"><div class="day-num"></div></div>';
|
||||
}
|
||||
|
||||
for (let d = 1; d <= daysInMonth; d++) {
|
||||
const dateStr = ymd(new Date(viewYear, viewMonth, d));
|
||||
const dayEvents = byDate[dateStr] || [];
|
||||
const hasEvents = dayEvents.length > 0;
|
||||
|
||||
html += '<div class="cal-day' +
|
||||
(dateStr === todayStr ? " today" : "") +
|
||||
(hasEvents ? " has-events" : "") + '">';
|
||||
html += '<div class="day-num">' + d + "</div>";
|
||||
|
||||
if (hasEvents) {
|
||||
dayEvents.forEach(() => html += '<span class="day-dot"></span>');
|
||||
html += '<div class="cal-popup"><h4>' + dateStr + "</h4>";
|
||||
dayEvents.forEach(e => {
|
||||
html += '<div class="cal-popup-item">';
|
||||
if (e.time) html += '<span class="pop-time">' + esc(e.time) + "</span> ";
|
||||
html += esc(e.title);
|
||||
if (e.description) html += '<div class="pop-desc">' + esc(e.description) + "</div>";
|
||||
html += "</div>";
|
||||
});
|
||||
html += "</div>";
|
||||
});
|
||||
}
|
||||
html += "</div>";
|
||||
}
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
gridEl.innerHTML = html;
|
||||
gridEl.innerHTML = html;
|
||||
|
||||
const nowISO = new Date().toISOString();
|
||||
const upcoming = allEvents.filter(e => e._sort >= nowISO);
|
||||
if (upcoming.length === 0) {
|
||||
sidebarEl.innerHTML = '<p class="cal-side-empty">No upcoming events.<br>Use !book in Discord.</p>';
|
||||
} else {
|
||||
sidebarEl.innerHTML = upcoming.slice(0, 15).map(e =>
|
||||
'<div class="cal-side-event">' +
|
||||
'<div class="se-date">' + e.date +
|
||||
(e.time ? " " + fmtTime(e.utc) : "") + "</div>" +
|
||||
'<div class="se-title">' + esc(e.title) + "</div>" +
|
||||
(e.description ? '<div class="se-desc">' + esc(e.description) + "</div>" : "") +
|
||||
"</div>"
|
||||
).join("");
|
||||
const nowMs = Date.now();
|
||||
const upcoming = allEvents.filter(e => e.when >= nowMs);
|
||||
if (upcoming.length === 0) {
|
||||
sidebarEl.innerHTML = '<p class="cal-side-empty">No upcoming events.<br>Use !book in Discord.</p>';
|
||||
} else {
|
||||
sidebarEl.innerHTML = upcoming.slice(0, 15).map(e =>
|
||||
'<div class="cal-side-event">' +
|
||||
'<div class="se-date">' + esc(e.date) + (e.time ? " " + esc(e.time) : "") + "</div>" +
|
||||
'<div class="se-title">' + esc(e.title) + "</div>" +
|
||||
(e.description ? '<div class="se-desc">' + esc(e.description) + "</div>" : "") +
|
||||
"</div>"
|
||||
).join("");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Normalise a Firestore doc into local date/time. Timed events use the
|
||||
// `utc` timestamp so they land on the viewer's local day; date-only events
|
||||
// keep their `date` (converting their midnight could shift them a day).
|
||||
// Falls back to the raw fields when `utc` is missing or unparseable.
|
||||
function toEvent(d) {
|
||||
const utc = d.utc ? new Date(d.utc) : null;
|
||||
const hasUtc = utc && !isNaN(utc.getTime());
|
||||
const localize = hasUtc && d.time;
|
||||
const date = localize ? ymd(utc) : (d.date || "");
|
||||
const time = !d.time ? "" : localize
|
||||
? utc.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
|
||||
: d.time;
|
||||
return {
|
||||
title: d.title || "",
|
||||
description: d.description || "",
|
||||
date,
|
||||
time,
|
||||
// 0 for malformed events keeps the sort stable and hides them from "Upcoming"
|
||||
when: (hasUtc ? utc.getTime() : new Date(date + "T" + (d.time || "00:00")).getTime()) || 0
|
||||
};
|
||||
}
|
||||
|
||||
function ymd(d) {
|
||||
return d.getFullYear() + "-" +
|
||||
String(d.getMonth() + 1).padStart(2, "0") + "-" +
|
||||
String(d.getDate()).padStart(2, "0");
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
@@ -142,4 +146,4 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
return String(s).replace(/&/g,"&").replace(/</g,"<")
|
||||
.replace(/>/g,">").replace(/"/g,""");
|
||||
}
|
||||
});
|
||||
})();
|
||||
+192
-240
@@ -1,68 +1,69 @@
|
||||
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"
|
||||
};
|
||||
// About tab — Steam-style comment wall + global click counter
|
||||
(() => {
|
||||
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 MAX_NAME = 32;
|
||||
const COMMENTS_PER_PAGE = 5;
|
||||
const COLLECTION = "comments";
|
||||
const DEFAULT_COLOR = "#5b6fde";
|
||||
const COUNT_COLOR = "#364858";
|
||||
const COUNT_LOW_COLOR = "#e05555";
|
||||
|
||||
const MAX_CHARS = 300;
|
||||
const COLLECTION = "comments";
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
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 paginationEl = document.getElementById('comments-pagination');
|
||||
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');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (!form || !listEl) return;
|
||||
|
||||
const configured = FIREBASE_CONFIG.apiKey !== "YOUR_API_KEY";
|
||||
if (!firebase.apps.length) firebase.initializeApp(FIREBASE_CONFIG);
|
||||
const db = firebase.firestore();
|
||||
|
||||
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 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;
|
||||
|
||||
// ── 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;
|
||||
// ── Avatar colour picker ─────────────────────────────────────
|
||||
const colorOpts = document.querySelectorAll('.av-opt');
|
||||
colorOpts.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
colorOpts.forEach(b => b.classList.remove('selected'));
|
||||
btn.classList.add('selected');
|
||||
colorInput.value = btn.dataset.color;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ── Custom PFP Upload ────────────────────────────────────────
|
||||
if (pfpUpload) {
|
||||
pfpUpload.addEventListener('change', (e) => {
|
||||
const file = e.target.files[0];
|
||||
// ── Custom PFP upload (center-cropped + shrunk to 64×64 JPEG) ─
|
||||
pfpUpload.addEventListener('change', () => {
|
||||
const file = pfpUpload.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
reader.onload = () => {
|
||||
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);
|
||||
canvas.getContext('2d').drawImage(img, sx, sy, size, size, 0, 0, 64, 64);
|
||||
|
||||
const dataUrl = canvas.toDataURL('image/jpeg', 0.8);
|
||||
b64Input.value = dataUrl;
|
||||
@@ -70,7 +71,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
pfpPreview.style.display = 'block';
|
||||
pfpClear.style.display = 'inline-flex';
|
||||
};
|
||||
img.src = event.target.result;
|
||||
img.src = reader.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
@@ -82,220 +83,171 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
pfpPreview.style.backgroundImage = 'none';
|
||||
pfpClear.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// ── 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 is configured — hide the setup warning
|
||||
if (warning) warning.style.display = 'none';
|
||||
|
||||
// ── Firebase init ────────────────────────────────────────────
|
||||
firebase.initializeApp(FIREBASE_CONFIG);
|
||||
const db = firebase.firestore();
|
||||
|
||||
// ── Real-time feed & Pagination ──────────────────────────────
|
||||
let allComments = [];
|
||||
let currentPage = 1;
|
||||
const COMMENTS_PER_PAGE = 5;
|
||||
const paginationEl = document.getElementById('comments-pagination');
|
||||
|
||||
function renderPage() {
|
||||
listEl.innerHTML = '';
|
||||
if (paginationEl) paginationEl.innerHTML = '';
|
||||
|
||||
if (allComments.length === 0) {
|
||||
listEl.innerHTML = '<p class="no-comments">No messages yet — be the first!</p>';
|
||||
return;
|
||||
// ── Char counter ─────────────────────────────────────────────
|
||||
function updateCharCount() {
|
||||
const left = MAX_CHARS - msgInput.value.length;
|
||||
charCountEl.textContent = left;
|
||||
charCountEl.style.color = left < 40 ? COUNT_LOW_COLOR : COUNT_COLOR;
|
||||
}
|
||||
msgInput.addEventListener('input', updateCharCount);
|
||||
updateCharCount();
|
||||
|
||||
const totalPages = Math.ceil(allComments.length / COMMENTS_PER_PAGE);
|
||||
if (currentPage > totalPages) currentPage = totalPages;
|
||||
if (currentPage < 1) currentPage = 1;
|
||||
// ── Real-time feed + pagination ──────────────────────────────
|
||||
let allComments = [];
|
||||
let currentPage = 1;
|
||||
|
||||
const start = (currentPage - 1) * COMMENTS_PER_PAGE;
|
||||
const end = start + COMMENTS_PER_PAGE;
|
||||
const slice = allComments.slice(start, end);
|
||||
function renderPage() {
|
||||
listEl.innerHTML = '';
|
||||
paginationEl.innerHTML = '';
|
||||
|
||||
slice.forEach(data => listEl.appendChild(buildBubble(data)));
|
||||
if (allComments.length === 0) {
|
||||
listEl.innerHTML = '<p class="no-comments">No messages yet — be the first!</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Build pagination controls
|
||||
if (totalPages > 1 && paginationEl) {
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'steam-page-btn' + (i === currentPage ? ' active' : '');
|
||||
btn.textContent = i;
|
||||
btn.onclick = () => {
|
||||
currentPage = i;
|
||||
renderPage();
|
||||
};
|
||||
paginationEl.appendChild(btn);
|
||||
const totalPages = Math.ceil(allComments.length / COMMENTS_PER_PAGE);
|
||||
currentPage = Math.min(Math.max(currentPage, 1), totalPages);
|
||||
|
||||
const start = (currentPage - 1) * COMMENTS_PER_PAGE;
|
||||
allComments.slice(start, start + COMMENTS_PER_PAGE)
|
||||
.forEach(data => listEl.appendChild(buildBubble(data)));
|
||||
|
||||
if (totalPages > 1) {
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'steam-page-btn' + (i === currentPage ? ' active' : '');
|
||||
btn.textContent = i;
|
||||
btn.onclick = () => {
|
||||
currentPage = i;
|
||||
renderPage();
|
||||
};
|
||||
paginationEl.appendChild(btn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Global Click Counter ─────────────────────────────────────
|
||||
const clickBtn = document.getElementById('yuuka-click-btn');
|
||||
const clickDisplay = document.getElementById('click-counter-display');
|
||||
const clickSound = new Audio('sounds/yuuka_click.mp3');
|
||||
|
||||
if (clickBtn && clickDisplay && configured) {
|
||||
const statsRef = db.collection('stats').doc('global_clicks');
|
||||
|
||||
// Listen to changes in real-time
|
||||
statsRef.onSnapshot(doc => {
|
||||
if (doc.exists) {
|
||||
clickDisplay.textContent = doc.data().count.toLocaleString();
|
||||
} else {
|
||||
clickDisplay.textContent = '0';
|
||||
}
|
||||
}, err => {
|
||||
console.error("Click counter error:", err);
|
||||
clickDisplay.textContent = 'Error';
|
||||
});
|
||||
|
||||
// Increment on click
|
||||
clickBtn.addEventListener('click', () => {
|
||||
// Play sound
|
||||
clickSound.currentTime = 0; // Reset to allow rapid clicking
|
||||
clickSound.play().catch(e => console.error("Audio play failed:", e));
|
||||
|
||||
// Optimistic update for instant feel
|
||||
let current = parseInt(clickDisplay.textContent.replace(/,/g, '')) || 0;
|
||||
clickDisplay.textContent = (current + 1).toLocaleString();
|
||||
|
||||
statsRef.set({
|
||||
count: firebase.firestore.FieldValue.increment(1)
|
||||
}, { merge: true }).catch(err => console.error("Failed to click:", err));
|
||||
});
|
||||
}
|
||||
|
||||
db.collection(COLLECTION)
|
||||
.orderBy('timestamp', 'desc')
|
||||
.onSnapshot(snap => {
|
||||
if (titleEl) {
|
||||
db.collection(COLLECTION)
|
||||
.orderBy('timestamp', 'desc')
|
||||
.onSnapshot(snap => {
|
||||
titleEl.textContent = snap.size > 0 ? `(${snap.size})` : '';
|
||||
allComments = snap.docs.map(doc => doc.data());
|
||||
renderPage();
|
||||
}, err => {
|
||||
console.error(err);
|
||||
listEl.innerHTML = '<p class="no-comments">Could not load comments.</p>';
|
||||
});
|
||||
|
||||
// ── Global click counter ─────────────────────────────────────
|
||||
const clickBtn = document.getElementById('yuuka-click-btn');
|
||||
const clickDisplay = document.getElementById('click-counter-display');
|
||||
const clickSound = new Audio('sounds/yuuka_click.mp3');
|
||||
|
||||
if (clickBtn && clickDisplay) {
|
||||
const statsRef = db.collection('stats').doc('global_clicks');
|
||||
|
||||
// Firestore applies local writes to this listener instantly,
|
||||
// so clicks show up immediately without a manual optimistic update.
|
||||
statsRef.onSnapshot(doc => {
|
||||
const count = doc.exists ? doc.data().count : 0;
|
||||
clickDisplay.textContent = (count || 0).toLocaleString();
|
||||
}, err => {
|
||||
console.error("Click counter error:", err);
|
||||
clickDisplay.textContent = 'Error';
|
||||
});
|
||||
|
||||
clickBtn.addEventListener('click', () => {
|
||||
clickSound.currentTime = 0; // restart so rapid clicks all play
|
||||
clickSound.play().catch(() => {});
|
||||
|
||||
statsRef.set({
|
||||
count: firebase.firestore.FieldValue.increment(1)
|
||||
}, { merge: true }).catch(err => console.error("Failed to click:", err));
|
||||
});
|
||||
}
|
||||
|
||||
// ── Submit ───────────────────────────────────────────────────
|
||||
form.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
|
||||
const name = nameInput.value.trim().slice(0, MAX_NAME) || 'Anonymous';
|
||||
const message = msgInput.value.trim().slice(0, MAX_CHARS);
|
||||
const color = colorInput.value || DEFAULT_COLOR;
|
||||
const avatarUrl = b64Input.value;
|
||||
|
||||
if (!message) { msgInput.focus(); return; }
|
||||
|
||||
const label = submitBtn.textContent;
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = 'Posting...';
|
||||
|
||||
try {
|
||||
await db.collection(COLLECTION).add({
|
||||
name, message, color, avatarUrl,
|
||||
timestamp: firebase.firestore.FieldValue.serverTimestamp()
|
||||
});
|
||||
nameInput.value = '';
|
||||
msgInput.value = '';
|
||||
updateCharCount();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Failed to post. Try again!');
|
||||
} finally {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = label;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
allComments = [];
|
||||
snap.forEach(doc => allComments.push(doc.data()));
|
||||
// ── Build a single comment bubble (Steam layout) ─────────────────
|
||||
function buildBubble(data) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'comment-bubble';
|
||||
|
||||
renderPage();
|
||||
|
||||
}, err => {
|
||||
console.error(err);
|
||||
listEl.innerHTML = '<p class="no-comments">Could not load comments. Check your Firebase config.</p>';
|
||||
// Pending server timestamps are null until the write lands
|
||||
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'
|
||||
});
|
||||
|
||||
// ── Submit ───────────────────────────────────────────────────
|
||||
form.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const name = legacyUnescape(data.name) || 'Anonymous';
|
||||
const message = legacyUnescape(data.message);
|
||||
|
||||
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; }
|
||||
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = 'Posting...';
|
||||
|
||||
try {
|
||||
await db.collection(COLLECTION).add({
|
||||
name, message, color, avatarUrl,
|
||||
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';
|
||||
let avatarHtml;
|
||||
if (typeof data.avatarUrl === 'string' && data.avatarUrl.startsWith('data:image/')) {
|
||||
avatarHtml = `<img src="${esc(data.avatarUrl)}" class="comment-avatar" alt="">`;
|
||||
} else {
|
||||
const color = /^#[0-9a-f]{6}$/i.test(data.color) ? data.color : '#64748b';
|
||||
avatarHtml = `<div class="comment-avatar" style="background:${color}">${esc(name.charAt(0).toUpperCase())}</div>`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ── 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();
|
||||
|
||||
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.innerHTML = `
|
||||
${avatarHtml}
|
||||
<div class="comment-body">
|
||||
<div class="comment-header">
|
||||
<span class="comment-name">${esc(name)}</span>
|
||||
<span class="comment-time">${timeStr}</span>
|
||||
</div>
|
||||
<p class="comment-text">${esc(message)}</p>
|
||||
</div>
|
||||
`;
|
||||
return div;
|
||||
}
|
||||
|
||||
div.innerHTML = `
|
||||
${avatarHtml}
|
||||
<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;
|
||||
}
|
||||
// ── Helpers ──────────────────────────────────────────────────────
|
||||
|
||||
// ── Demo bubbles shown before Firebase is set up ─────────────────
|
||||
// Older comments were stored pre-escaped (< and > only), which made
|
||||
// them render as literal "<" once escaped again. Undo that here.
|
||||
function legacyUnescape(str) {
|
||||
if (!str) return '';
|
||||
return String(str).replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
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, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
function esc(str) {
|
||||
if (!str) return '';
|
||||
return String(str)
|
||||
.replace(/&/g, '&').replace(/</g, '<')
|
||||
.replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
||||
}
|
||||
function esc(str) {
|
||||
if (!str) return '';
|
||||
return String(str)
|
||||
.replace(/&/g, '&').replace(/</g, '<')
|
||||
.replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
||||
}
|
||||
})();
|
||||
+38
-61
@@ -1,69 +1,46 @@
|
||||
// Gallery tab — thumbnails from gallery/manifest.json + full-size lightbox.
|
||||
// The manifest is (re)generated by generate_thumbnails.py.
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const container = document.getElementById('gallery-container');
|
||||
const lightbox = document.getElementById('lightbox');
|
||||
const lightboxImg = document.getElementById('lightbox-img');
|
||||
const closeBtn = document.querySelector('.lightbox-close');
|
||||
|
||||
// Close lightbox when clicking the X
|
||||
if (closeBtn) {
|
||||
closeBtn.onclick = () => {
|
||||
lightbox.style.display = "none";
|
||||
lightboxImg.src = ""; // Clear source to stop GIFs
|
||||
}
|
||||
}
|
||||
if (!container || !lightbox) return;
|
||||
|
||||
// Close lightbox when clicking outside the image
|
||||
if (lightbox) {
|
||||
lightbox.onclick = (e) => {
|
||||
if (e.target !== lightboxImg && e.target !== closeBtn) {
|
||||
lightbox.style.display = "none";
|
||||
lightboxImg.src = ""; // Clear source to stop GIFs
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Function to load images into a specific container from a specific folder
|
||||
const loadGallery = (containerId, folderName, totalImages) => {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
for (let i = 1; i <= totalImages; i++) {
|
||||
const img = document.createElement('img');
|
||||
img.alt = `${folderName} Image ${i}`;
|
||||
|
||||
// Load the thumbnail instead of the full image
|
||||
img.src = `${folderName}/thumbnails/${i}.jpg`;
|
||||
|
||||
// If thumbnail fails to load, it means the image doesn't exist at all
|
||||
img.onerror = () => { img.style.display = 'none'; };
|
||||
|
||||
// Open lightbox on click
|
||||
img.onclick = () => {
|
||||
lightbox.style.display = "block";
|
||||
lightboxImg.src = ""; // Clear previous image
|
||||
|
||||
// Try loading original full quality image: jpg -> png -> gif
|
||||
const tryLoad = (extensions) => {
|
||||
if (extensions.length === 0) return; // All failed
|
||||
const testExt = extensions.shift();
|
||||
|
||||
const tempImg = new Image();
|
||||
tempImg.onload = () => {
|
||||
lightboxImg.src = tempImg.src; // Success! Show it.
|
||||
};
|
||||
tempImg.onerror = () => {
|
||||
tryLoad(extensions); // Failed, try next extension
|
||||
};
|
||||
tempImg.src = `${folderName}/${i}.${testExt}`;
|
||||
};
|
||||
|
||||
// Start trying to find the full image
|
||||
tryLoad(['jpg', 'png', 'gif']);
|
||||
};
|
||||
|
||||
container.appendChild(img);
|
||||
}
|
||||
const openLightbox = (src) => {
|
||||
lightboxImg.src = src;
|
||||
lightbox.style.display = 'block';
|
||||
};
|
||||
|
||||
// Load your original Gallery
|
||||
loadGallery('gallery-container', 'gallery', 50);
|
||||
const closeLightbox = () => {
|
||||
lightbox.style.display = 'none';
|
||||
lightboxImg.src = ''; // Clear source to stop GIFs
|
||||
};
|
||||
|
||||
// Close on the X, on a click outside the image, or with Escape
|
||||
lightbox.addEventListener('click', (e) => {
|
||||
if (e.target !== lightboxImg) closeLightbox();
|
||||
});
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && lightbox.style.display === 'block') closeLightbox();
|
||||
});
|
||||
|
||||
const thumbPath = (file) => `gallery/thumbnails/${file.replace(/\.[^.]+$/, '')}.jpg`;
|
||||
|
||||
fetch('gallery/manifest.json')
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error(res.status);
|
||||
return res.json();
|
||||
})
|
||||
.then(files => {
|
||||
files.forEach((file, i) => {
|
||||
const img = document.createElement('img');
|
||||
img.src = thumbPath(file);
|
||||
img.alt = `Gallery image ${i + 1}`;
|
||||
img.loading = 'lazy';
|
||||
img.onclick = () => openLightbox(`gallery/${file}`);
|
||||
container.appendChild(img);
|
||||
});
|
||||
})
|
||||
.catch(err => console.error('Could not load gallery manifest:', err));
|
||||
});
|
||||
+8
-19
@@ -59,15 +59,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
// ── Navigate to a tab (updates URL + shows it) ────────
|
||||
function navigateTo(tabId, push = true) {
|
||||
function navigateTo(tabId) {
|
||||
showTab(tabId);
|
||||
if (push) {
|
||||
history.pushState({ tab: tabId }, '', tabToPath(tabId));
|
||||
}
|
||||
window.scrollTo(0, 0);
|
||||
history.pushState({ tab: tabId }, '', tabToPath(tabId));
|
||||
}
|
||||
|
||||
// ── Initial load: show tab from URL ────────────────────
|
||||
showTab(pathToTab(window.location.pathname));
|
||||
// (also normalises unknown / legacy paths like /ahmet in the address bar)
|
||||
const initialTab = pathToTab(window.location.pathname);
|
||||
showTab(initialTab);
|
||||
history.replaceState({ tab: initialTab }, '', tabToPath(initialTab) + window.location.search);
|
||||
|
||||
// ── Tab button clicks ──────────────────────────────────
|
||||
const buttons = document.querySelectorAll('#top-line button');
|
||||
@@ -78,22 +80,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// ── Home button (logo) ─────────────────────────────────
|
||||
const homeBtn = document.getElementById('home-btn');
|
||||
if (homeBtn) {
|
||||
homeBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
navigateTo('about');
|
||||
});
|
||||
}
|
||||
|
||||
// ── Back / forward browser buttons ─────────────────────
|
||||
window.addEventListener('popstate', (e) => {
|
||||
if (e.state && e.state.tab) {
|
||||
showTab(e.state.tab);
|
||||
} else {
|
||||
showTab(pathToTab(window.location.pathname));
|
||||
}
|
||||
showTab(e.state && e.state.tab ? e.state.tab : pathToTab(window.location.pathname));
|
||||
});
|
||||
|
||||
});
|
||||
+76
-57
@@ -1,80 +1,99 @@
|
||||
// Yuuka Bot Dashboard — live Firestore reader
|
||||
const YUUKA_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 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"
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const dash = document.getElementById("yuukabot");
|
||||
if (!dash) return;
|
||||
// The bot pushes every 10s; no update for this long means it's down
|
||||
// (generous so a visitor's slightly-off clock doesn't flip the dot).
|
||||
const STALE_MS = 60 * 1000;
|
||||
|
||||
if (!firebase.apps.length) firebase.initializeApp(YUUKA_FIREBASE_CONFIG);
|
||||
const db = firebase.firestore();
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const dash = document.getElementById("yuukabot");
|
||||
if (!dash) return;
|
||||
|
||||
db.collection("sysinfo").doc("server").onSnapshot(
|
||||
(doc) => {
|
||||
if (!firebase.apps.length) firebase.initializeApp(FIREBASE_CONFIG);
|
||||
const db = firebase.firestore();
|
||||
|
||||
const dot = document.getElementById("dash-status-dot");
|
||||
let online = false;
|
||||
let updatedAt = null; // ms; null for bots that don't send updatedAt yet
|
||||
let loaded = false; // keep the grey "pending" dot until first data
|
||||
|
||||
function refreshDot() {
|
||||
if (!loaded) return;
|
||||
const fresh = updatedAt == null || Date.now() - updatedAt < STALE_MS;
|
||||
if (dot) dot.className = online && fresh ? "status-dot" : "status-dot offline";
|
||||
}
|
||||
// Re-check periodically: a crashed bot sends no more snapshots
|
||||
setInterval(refreshDot, 5000);
|
||||
|
||||
db.collection("sysinfo").doc("server").onSnapshot(doc => {
|
||||
loaded = true;
|
||||
const d = doc.exists ? doc.data() : {};
|
||||
online = !!d.online;
|
||||
updatedAt = d.updatedAt ? d.updatedAt.toMillis() : null;
|
||||
refreshDot();
|
||||
if (!doc.exists) return;
|
||||
const d = doc.data();
|
||||
|
||||
// Online dot
|
||||
const dot = document.getElementById("dash-status-dot");
|
||||
if (dot) dot.className = d.online ? "status-dot" : "status-dot offline";
|
||||
|
||||
// Uptime
|
||||
setText("dash-uptime", d.uptime);
|
||||
setText("dash-bot-uptime", d.botUptime ? "bot up " + d.botUptime : "");
|
||||
|
||||
// CPU, RAM, Disk, Swap — bars
|
||||
setBar("dash-cpu-val", "dash-cpu-bar", null, d.cpu, "%", "cpu");
|
||||
setBar("dash-ram-val", "dash-ram-bar", null, d.ram, "%", "ram");
|
||||
setText("dash-ram-detail", d.ramUsed ? d.ramUsed + " / " + d.ramTotal : "");
|
||||
setBar("dash-disk-val", "dash-disk-bar", null, d.disk, "%", "disk");
|
||||
setText("dash-disk-detail", d.diskUsed ? d.diskUsed + " / " + d.diskTotal : "");
|
||||
setBar("dash-swap-val", "dash-swap-bar", null, d.swap, "%", "swap");
|
||||
setText("dash-swap-detail", d.swapUsed ? d.swapUsed + " / " + d.swapTotal : "");
|
||||
// CPU, RAM, Disk, Swap — value + bar
|
||||
setBar("dash-cpu-val", "dash-cpu-bar", d.cpu);
|
||||
setBar("dash-ram-val", "dash-ram-bar", d.ram);
|
||||
setBar("dash-disk-val", "dash-disk-bar", d.disk);
|
||||
setBar("dash-swap-val", "dash-swap-bar", d.swap);
|
||||
setText("dash-ram-detail", usedOfTotal(d.ramUsed, d.ramTotal));
|
||||
setText("dash-disk-detail", usedOfTotal(d.diskUsed, d.diskTotal));
|
||||
setText("dash-swap-detail", usedOfTotal(d.swapUsed, d.swapTotal));
|
||||
|
||||
// Load average
|
||||
if (d.load1 != null) {
|
||||
setText("dash-load", d.load1 + " / " + d.load5 + " / " + d.load15);
|
||||
}
|
||||
|
||||
// Network
|
||||
if (d.netSent) {
|
||||
setText("dash-net", "sent " + d.netSent);
|
||||
setText("dash-net-detail", "recv " + (d.netRecv || "—"));
|
||||
}
|
||||
|
||||
// Processes
|
||||
// Fastfetch
|
||||
setText("dash-fetch", d.fetch);
|
||||
|
||||
if (d.processes != null) {
|
||||
setText("dash-procs", d.processes.toLocaleString());
|
||||
}
|
||||
},
|
||||
() => {
|
||||
const dot = document.getElementById("dash-status-dot");
|
||||
if (dot) dot.className = "status-dot offline";
|
||||
|
||||
setText("dash-fetch", d.fetch);
|
||||
}, () => {
|
||||
loaded = true;
|
||||
online = false;
|
||||
refreshDot();
|
||||
});
|
||||
});
|
||||
|
||||
function usedOfTotal(used, total) {
|
||||
return used ? used + " / " + total : "";
|
||||
}
|
||||
|
||||
function setText(id, value) {
|
||||
const el = document.getElementById(id);
|
||||
if (el && value != null) el.textContent = value;
|
||||
}
|
||||
|
||||
function setBar(valId, barId, value) {
|
||||
const valEl = document.getElementById(valId);
|
||||
const barEl = document.getElementById(barId);
|
||||
if (valEl && value != null) {
|
||||
valEl.textContent = value;
|
||||
const unit = document.createElement("span");
|
||||
unit.textContent = "%";
|
||||
valEl.appendChild(unit);
|
||||
}
|
||||
if (barEl) {
|
||||
barEl.style.width = Math.min(Math.max(value || 0, 0), 100) + "%";
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
function setText(id, value) {
|
||||
const el = document.getElementById(id);
|
||||
if (el && value != null) el.textContent = value;
|
||||
}
|
||||
|
||||
function setBar(valId, barId, _detailId, value, suffix, barClass) {
|
||||
const valEl = document.getElementById(valId);
|
||||
const barEl = document.getElementById(barId);
|
||||
if (valEl && value != null) {
|
||||
valEl.innerHTML = value + '<span>' + suffix + '</span>';
|
||||
}
|
||||
if (barEl) {
|
||||
barEl.style.width = Math.min(Math.max(value || 0, 0), 100) + "%";
|
||||
barEl.className = "card-bar-fill " + barClass;
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -107,9 +107,9 @@
|
||||
box-shadow: 0 3px 16px rgba(184, 68, 87, 0.08);
|
||||
}
|
||||
|
||||
/* TODO: .bl-done styles — dim + strikethrough for completed items */
|
||||
/* .bl-item.bl-done { opacity: 0.5; }
|
||||
.bl-item.bl-done .bl-title { text-decoration: line-through; } */
|
||||
/* Completed items */
|
||||
.bl-item.bl-done { opacity: 0.5; }
|
||||
.bl-item.bl-done .bl-title { text-decoration: line-through; }
|
||||
|
||||
.bl-item .bl-title {
|
||||
color: #F4F2F5;
|
||||
|
||||
+1
-7
@@ -1,11 +1,5 @@
|
||||
/* Calendar tab */
|
||||
|
||||
#calendar-btn {
|
||||
background-color: #FBC4CC; color: #232329;
|
||||
border: none; padding: 12px 24px; border-radius: 8px;
|
||||
cursor: pointer; transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* ── Two-column layout ─────────────────────────────────────── */
|
||||
.cal-wrap {
|
||||
max-width: 95vw; margin: 0 auto;
|
||||
@@ -93,7 +87,7 @@
|
||||
}
|
||||
|
||||
/* ── Sidebar ───────────────────────────────────────────────── */
|
||||
.cal-sidebar h3 { margin-top: 0;
|
||||
.cal-sidebar h3 {
|
||||
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
|
||||
color: rgba(244,242,245,0.65); margin: 0 0 14px;
|
||||
font-family: Arial, sans-serif;
|
||||
|
||||
+3
-24
@@ -97,18 +97,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Firebase warning ────────────────────────────────────── */
|
||||
#firebase-setup-warning {
|
||||
background: rgba(180, 80, 30, 0.25);
|
||||
border-bottom: 1px solid rgba(180, 80, 30, 0.4);
|
||||
padding: 10px 14px;
|
||||
color: #ffb89a;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
display: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Comment rows ────────────────────────────────────────── */
|
||||
#comments-list {
|
||||
display: flex;
|
||||
@@ -169,7 +157,7 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Steam cyan username -> Now Black */
|
||||
/* Username */
|
||||
.comment-name {
|
||||
font-size: 0.85rem;
|
||||
font-weight: bold;
|
||||
@@ -209,12 +197,10 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Post form (bottom, Steam style) ────────────────────── */
|
||||
/* ── Post form (above the feed) ──────────────────────────── */
|
||||
.steam-form-area {
|
||||
background: transparent;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding: 20px 0 0 0;
|
||||
margin-top: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.steam-form-label {
|
||||
@@ -338,13 +324,6 @@
|
||||
}
|
||||
#comment-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
|
||||
|
||||
/* Comment count next to header */
|
||||
.comment-count-badge {
|
||||
font-size: 0.72rem;
|
||||
color: #556772;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Custom PFP Upload ───────────────────────────────────── */
|
||||
.custom-pfp-upload {
|
||||
display: flex;
|
||||
|
||||
+1
-15
@@ -1,22 +1,8 @@
|
||||
#gallery-link-btn {
|
||||
background-color:aliceblue;
|
||||
color:#f0f8ff;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
#gallery-link-btn:hover {
|
||||
box-shadow: 0 0 10px #02e3ff;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display:grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 70px;
|
||||
padding: 210px 70px 70px; /* extra top padding clears the fixed nav bar */
|
||||
}
|
||||
|
||||
.gallery-grid img {
|
||||
|
||||
+2
-8
@@ -32,8 +32,8 @@ html, body {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 115px; /* 95px + 2×10px padding — other tabs' top offsets assume this */
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
z-index: 10;
|
||||
@@ -85,12 +85,6 @@ html, body {
|
||||
transition: border-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
title {
|
||||
font-size: large;
|
||||
font-weight: 100;
|
||||
margin-bottom: auto;
|
||||
color:#000000;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
color: #000000;
|
||||
|
||||
+4
-27
@@ -7,14 +7,10 @@
|
||||
--dash-columns: 6; /* number of columns (2 = 2×2, 3 = 3-wide, etc.) */
|
||||
--dash-gap: 20px; /* space between boxes */
|
||||
--dash-min-card-height: 200px;/* minimum height of each box */
|
||||
--dash-max-width: none; /* max width of the whole grid */
|
||||
--dash-padding: 120px 48px 60px; /* top right/left bottom */
|
||||
--dash-max-width: none; /* max width of the whole grid */
|
||||
}
|
||||
|
||||
/* To make boxes take different amounts of space, add a class
|
||||
to the HTML like "wide" or "tall" and define it here:
|
||||
|
||||
.dash-card.tall { grid-row: span 2; } */
|
||||
/* Card widths come from the .spanN helpers at the bottom of this file. */
|
||||
|
||||
/* ── Tab header ───────────────────────────────────────────── */
|
||||
.dash-header {
|
||||
@@ -41,6 +37,7 @@
|
||||
50% { box-shadow: 0 0 20px #22c55e, 0 0 40px rgba(34,197,94,0.4); }
|
||||
}
|
||||
.dash-header .offline { background: #ef4444; box-shadow: 0 0 12px #ef4444; animation: none; }
|
||||
.dash-header .pending { background: #64748b; box-shadow: none; animation: none; }
|
||||
|
||||
/* ── Card grid ────────────────────────────────────────────── */
|
||||
.dash-grid {
|
||||
@@ -71,19 +68,12 @@
|
||||
box-shadow: 0 6px 28px rgba(91, 111, 222, 0.12);
|
||||
}
|
||||
|
||||
/* ── Card header (icon + label) ───────────────────────────── */
|
||||
/* ── Card header ──────────────────────────────────────────── */
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.card-icon {
|
||||
font-size: 1.6rem;
|
||||
width: 44px; height: 44px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(91, 111, 222, 0.12);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.card-label {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
@@ -133,18 +123,6 @@
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── Footer ───────────────────────────────────────────────── */
|
||||
.dash-footer {
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
font-size: 0.7rem;
|
||||
padding-bottom: 50px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* ── Wide card (span 2 columns) ────────────────────────────── */
|
||||
|
||||
|
||||
/* ── Fastfetch text block ──────────────────────────────────── */
|
||||
.card-fetch {
|
||||
margin: 12px 0 0;
|
||||
@@ -160,4 +138,3 @@
|
||||
.dash-card.span2 { grid-column: span 2; } /* 3 per row */
|
||||
.dash-card.span3 { grid-column: span 3; } /* 2 per row — stretched */
|
||||
.dash-card.span6 { grid-column: span 6; } /* full width */
|
||||
.card-spacer { height: 32px; }
|
||||
Reference in new issue
Block a user