<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pelagos Blog</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 640px;
margin: 40px auto;
padding: 0 20px;
color: #333;
background: #f9f9f9;
}
h1 { margin-bottom: 8px; color: #1a1a1a; }
.subtitle { color: #888; margin-bottom: 32px; font-size: 14px; }
.form-row {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
input[type="text"] {
flex: 1;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
}
button {
padding: 10px 20px;
background: #2563eb;
color: #fff;
border: none;
border-radius: 6px;
font-size: 15px;
cursor: pointer;
}
button:hover { background: #1d4ed8; }
.notes { list-style: none; }
.notes li {
background: #fff;
padding: 12px 16px;
border: 1px solid #e5e5e5;
border-radius: 6px;
margin-bottom: 8px;
font-size: 15px;
}
.empty { color: #aaa; font-style: italic; }
.count { color: #888; font-size: 13px; margin-bottom: 12px; }
</style>
</head>
<body>
<h1>Pelagos Blog</h1>
<p class="subtitle">A multi-container demo — nginx + bottle + redis</p>
<div class="form-row">
<input type="text" id="note-input" placeholder="Write a note..." autofocus>
<button onclick="addNote()">Post</button>
</div>
<p class="count" id="count"></p>
<ul class="notes" id="notes"></ul>
<script>
async function loadNotes() {
const res = await fetch("/api/notes");
const notes = await res.json();
const ul = document.getElementById("notes");
const countEl = document.getElementById("count");
countEl.textContent = notes.length + " note" + (notes.length !== 1 ? "s" : "");
if (notes.length === 0) {
ul.innerHTML = '<li class="empty">No notes yet. Write one above!</li>';
} else {
ul.innerHTML = notes.map(n => "<li>" + escapeHtml(n) + "</li>").join("");
}
}
async function addNote() {
const input = document.getElementById("note-input");
const text = input.value.trim();
if (!text) return;
await fetch("/api/notes", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({text: text})
});
input.value = "";
loadNotes();
}
document.getElementById("note-input").addEventListener("keydown", function(e) {
if (e.key === "Enter") addNote();
});
function escapeHtml(s) {
const d = document.createElement("div");
d.textContent = s;
return d.innerHTML;
}
loadNotes();
</script>
</body>
</html>