Nurila/kalendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

planner

Browse Source
This commit is contained in:
Dauren777 2026-07-31 10:09:36 +00:00
parent e205b5ccde
commit b0dab2f048
6 changed files with 282 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
data.json
node_modules/
.vibe42-run.log
.vibe42-run.pid

36
index.html
View File

@ -3,18 +3,20 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Календарь дней</title> <title>Календарь-планер</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📅</text></svg>"> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📅</text></svg>">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<main class="wrap"> <header class="top">
<header class="top"> <div class="container">
<h1>Календарь дней</h1> <h1>Календарь-планер</h1>
<p class="sub">Листай месяцы стрелками, сегодняшний день отмечен</p> <p class="sub">Нажми на день — добавь дела и планы. Всё сохранится само.</p>
</header> </div>
</header>
<main class="container layout">
<section class="cal"> <section class="cal">
<div class="cal-head"> <div class="cal-head">
<button class="arrow" id="prev" aria-label="Предыдущий месяц">←</button> <button class="arrow" id="prev" aria-label="Предыдущий месяц">←</button>
@ -30,7 +32,27 @@
</div> </div>
</section> </section>
<p class="hint" id="hint">Нажми на любой день, чтобы увидеть дату</p> <aside class="panel" id="panel">
<div class="panel-empty" id="panelEmpty">
<div class="pe-emoji">👆</div>
<p>Нажми на любой день,<br>чтобы открыть его планы</p>
</div>
<div class="panel-body hidden" id="panelBody">
<div class="panel-head">
<div class="panel-date" id="panelDate"></div>
<button class="close-btn" id="closePanel" aria-label="Закрыть">×</button>
</div>
<p class="count" id="count"></p>
<ul class="notes" id="notes"></ul>
<form class="add-form" id="addForm">
<input id="noteText" placeholder="Новое дело…" maxlength="300" required>
<button type="submit" aria-label="Добавить">+</button>
</form>
</div>
</aside>
</main> </main>
<script src="script.js"></script> <script src="script.js"></script>

6
package.json Normal file
View File

@ -0,0 +1,6 @@
{
"name": "planner",
"private": true,
"type": "commonjs",
"scripts": { "start": "node server.js" }
}

130
script.js
View File

@ -6,17 +6,30 @@ var MONTHS = [
var now = new Date(); var now = new Date();
var view = { year: now.getFullYear(), month: now.getMonth() }; var view = { year: now.getFullYear(), month: now.getMonth() };
var selected = null; var openDate = null;
var allByDate = {};
var gridEl = document.getElementById("grid"); var gridEl = document.getElementById("grid");
var monthNameEl = document.getElementById("monthName"); var monthNameEl = document.getElementById("monthName");
var hintEl = document.getElementById("hint"); var panelBody = document.getElementById("panelBody");
var panelEmpty = document.getElementById("panelEmpty");
var panelDateEl = document.getElementById("panelDate");
var notesEl = document.getElementById("notes");
var countEl = document.getElementById("count");
function pad(n) { return (n < 10 ? "0" : "") + n; } function pad(n) { return (n < 10 ? "0" : "") + n; }
function fmt(d) { function fmt(d) {
return pad(d.getDate()) + "." + pad(d.getMonth() + 1) + "." + d.getFullYear(); return pad(d.getDate()) + "." + pad(d.getMonth() + 1) + "." + d.getFullYear();
} }
function iso(date) {
return date.getFullYear() + "-" + pad(date.getMonth() + 1) + "-" + pad(date.getDate());
}
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, function (c) {
return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
});
}
function renderWeekdays() { function renderWeekdays() {
document.getElementById("weekdays").innerHTML = document.getElementById("weekdays").innerHTML =
@ -30,7 +43,6 @@ function render() {
var startPad = (first.getDay() + 6) % 7; var startPad = (first.getDay() + 6) % 7;
var daysInMonth = new Date(view.year, view.month + 1, 0).getDate(); var daysInMonth = new Date(view.year, view.month + 1, 0).getDate();
var prevDays = new Date(view.year, view.month, 0).getDate(); var prevDays = new Date(view.year, view.month, 0).getDate();
var html = ""; var html = "";
for (var i = startPad - 1; i >= 0; i--) { for (var i = startPad - 1; i >= 0; i--) {
@ -38,18 +50,21 @@ function render() {
} }
for (var d = 1; d <= daysInMonth; d++) { for (var d = 1; d <= daysInMonth; d++) {
var cls = "day";
var date = new Date(view.year, view.month, d); var date = new Date(view.year, view.month, d);
var key = iso(date);
var cls = "day";
var isToday = var isToday =
date.getFullYear() === now.getFullYear() && date.getFullYear() === now.getFullYear() &&
date.getMonth() === now.getMonth() && date.getMonth() === now.getMonth() &&
date.getDate() === now.getDate(); date.getDate() === now.getDate();
if (isToday) cls += " today"; if (isToday) cls += " today";
if (openDate === key) cls += " selected";
if (selected && fmt(date) === fmt(selected)) cls += " selected"; var has = (allByDate[key] || []).length > 0;
var dot = has ? '<span class="dot"></span>' : '<span class="dot" style="visibility:hidden"></span>';
html += '<div class="' + cls + '" data-date="' + fmt(date) + '">' + d + "</div>"; html += '<div class="' + cls + '" data-key="' + key + '">' + d + dot + "</div>";
} }
var endPad = 7 - ((startPad + daysInMonth) % 7); var endPad = 7 - ((startPad + daysInMonth) % 7);
@ -66,28 +81,121 @@ function changeMonth(delta) {
view.month += delta; view.month += delta;
if (view.month < 0) { view.month = 11; view.year--; } if (view.month < 0) { view.month = 11; view.year--; }
if (view.month > 11) { view.month = 0; view.year++; } if (view.month > 11) { view.month = 0; view.year++; }
selected = null;
render(); render();
} }
function goToday() { function goToday() {
now = new Date(); now = new Date();
view = { year: now.getFullYear(), month: now.getMonth() }; view = { year: now.getFullYear(), month: now.getMonth() };
selected = null;
render(); render();
} }
function api(url, opts) {
return fetch(url, opts).then(function (r) {
if (!r.ok) throw new Error("Ошибка сервера " + r.status);
return r.json();
});
}
function loadAll() {
return api("/api/notes").then(function (list) {
allByDate = {};
list.forEach(function (n) {
(allByDate[n.date] = allByDate[n.date] || []).push(n);
});
render();
if (openDate) renderPanel();
});
}
function renderPanel() {
var list = allByDate[openDate] || [];
notesEl.innerHTML = list.map(function (n) {
return (
'<li class="note' + (n.done ? " done" : "") + '" data-id="' + n.id + '">' +
'<button class="chk' + (n.done ? " on" : "") + '" title="Отметить">' + (n.done ? "✓" : "") + "</button>" +
'<span class="note-text">' + escapeHtml(n.text) + "</span>" +
'<button class="del" title="Удалить">×</button>' +
"</li>"
);
}).join("");
countEl.textContent = list.length ? "Дела: " + list.length : "";
}
function openDay(key) {
openDate = key;
panelEmpty.classList.add("hidden");
panelBody.classList.remove("hidden");
var parts = key.split("-");
var date = new Date(parts[0], +parts[1] - 1, +parts[2]);
panelDateEl.textContent = fmt(date);
render();
renderPanel();
}
function closePanel() {
openDate = null;
panelBody.classList.add("hidden");
panelEmpty.classList.remove("hidden");
render();
}
function addNote(text) {
return api("/api/notes", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ date: openDate, text: text })
}).then(loadAll);
}
function toggleNote(id, done) {
return api("/api/notes", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id: id, done: done })
}).then(loadAll);
}
function deleteNote(id) {
return api("/api/notes/" + id, { method: "DELETE" }).then(loadAll);
}
gridEl.addEventListener("click", function (e) { gridEl.addEventListener("click", function (e) {
var day = e.target.closest(".day"); var day = e.target.closest(".day");
if (!day || day.classList.contains("empty")) return; if (!day || day.classList.contains("empty")) return;
selected = new Date(view.year, view.month, parseInt(day.textContent, 10)); openDay(day.dataset.key);
hintEl.textContent = "Выбрано: " + fmt(selected); });
render();
notesEl.addEventListener("click", function (e) {
var li = e.target.closest(".note");
if (!li) return;
var id = +li.dataset.id;
var item = (allByDate[openDate] || []).find(function (n) { return n.id === id; });
if (!item) return;
if (e.target.classList.contains("del")) {
if (confirm("Удалить это дело?")) deleteNote(id);
return;
}
if (e.target.classList.contains("chk")) {
toggleNote(id, !item.done);
}
});
document.getElementById("addForm").addEventListener("submit", function (e) {
e.preventDefault();
var input = document.getElementById("noteText");
var text = input.value.trim();
if (!text || !openDate) return;
addNote(text);
input.value = "";
}); });
document.getElementById("prev").addEventListener("click", function () { changeMonth(-1); }); document.getElementById("prev").addEventListener("click", function () { changeMonth(-1); });
document.getElementById("next").addEventListener("click", function () { changeMonth(1); }); document.getElementById("next").addEventListener("click", function () { changeMonth(1); });
document.getElementById("today").addEventListener("click", goToday); document.getElementById("today").addEventListener("click", goToday);
document.getElementById("closePanel").addEventListener("click", closePanel);
renderWeekdays(); renderWeekdays();
render(); render();
loadAll();

81
server.js Normal file
View File

@ -0,0 +1,81 @@
const http = require("http");
const fs = require("fs");
const path = require("path");
const PORT = process.env.PORT || 3000;
const DATA = path.join(__dirname, "data.json");
function load() {
try { return JSON.parse(fs.readFileSync(DATA, "utf8")); } catch (_) { return { notes: [] }; }
}
function save(d) {
fs.writeFileSync(DATA, JSON.stringify(d, null, 2));
}
function body(req) {
return new Promise((resolve) => {
let s = "";
req.on("data", (c) => (s += c));
req.on("end", () => { try { resolve(JSON.parse(s || "{}")); } catch (_) { resolve({}); } });
});
}
http.createServer(async (req, res) => {
const url = req.url.split("?")[0];
// Список всех заметок (опционально фильтр по дате)
if (req.method === "GET" && url === "/api/notes") {
const q = new URL(req.url, "http://x").searchParams;
const date = q.get("date");
const db = load();
const list = date ? db.notes.filter((n) => n.date === date) : db.notes;
res.writeHead(200, { "Content-Type": "application/json" });
return res.end(JSON.stringify(list));
}
// Добавить заметку
if (req.method === "POST" && url === "/api/notes") {
const note = await body(req);
if (!note.date || !note.text) {
res.writeHead(400, { "Content-Type": "application/json" });
return res.end(JSON.stringify({ ok: false, error: "date и text обязательны" }));
}
const db = load();
const item = { id: Date.now(), date: note.date, text: String(note.text).slice(0, 300), done: !!note.done };
db.notes.push(item);
save(db);
res.writeHead(200, { "Content-Type": "application/json" });
return res.end(JSON.stringify(item));
}
// Переключить «сделано»
if (req.method === "PATCH" && url === "/api/notes") {
const patch = await body(req);
const db = load();
const note = db.notes.find((n) => n.id === patch.id);
if (note) note.done = !!patch.done;
save(db);
res.writeHead(200, { "Content-Type": "application/json" });
return res.end(JSON.stringify({ ok: !!note }));
}
// Удалить заметку
if (req.method === "DELETE" && url.startsWith("/api/notes/")) {
const id = Number(url.split("/").pop());
const db = load();
db.notes = db.notes.filter((n) => n.id !== id);
save(db);
res.writeHead(200, { "Content-Type": "application/json" });
return res.end(JSON.stringify({ ok: true }));
}
// Статика: index.html / style.css / script.js
let file = req.url === "/" ? "/index.html" : url;
const full = path.join(__dirname, file);
if (full.startsWith(__dirname) && fs.existsSync(full) && fs.statSync(full).isFile()) {
const ext = path.extname(full);
const type = ext === ".css" ? "text/css" : ext === ".js" ? "application/javascript" : "text/html";
res.writeHead(200, { "Content-Type": type + "; charset=utf-8" });
return res.end(fs.readFileSync(full));
}
res.writeHead(404); res.end("Not found");
}).listen(PORT, () => console.log("Сервер на порту " + PORT));

56
style.css
View File

@ -1,15 +1,17 @@
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7} :root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--gray-100);min-height:100vh} body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--gray-100);min-height:100vh}
.container{max-width:1060px;margin:0 auto;padding:40px 24px}
.hidden{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding:48px 20px} .top{background:var(--ink);color:#fff}
.top h1{font-size:40px;font-weight:800;line-height:1.1}
.top .sub{color:#9aa3b2;margin-top:8px}
.top{text-align:center;margin-bottom:32px} .layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.top h1{font-size:36px;font-weight:800;line-height:1.1;color:var(--ink)}
.top .sub{color:var(--gray-500);font-size:16px;margin-top:8px}
.cal{background:var(--white);border-radius:16px;box-shadow:0 12px 32px rgba(15,18,24,.08);padding:24px;overflow:hidden}
/* ===== Календарь ===== */
.cal{background:var(--white);border-radius:16px;box-shadow:0 12px 32px rgba(15,18,24,.08);padding:24px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.month-name{font-size:24px;font-weight:800;text-transform:capitalize} .month-name{font-size:24px;font-weight:800;text-transform:capitalize}
.arrow{border:none;background:var(--ink);color:#fff;width:42px;height:42px;border-radius:10px;font-size:20px;cursor:pointer;transition:transform .15s ease,opacity .15s ease} .arrow{border:none;background:var(--ink);color:#fff;width:42px;height:42px;border-radius:10px;font-size:20px;cursor:pointer;transition:transform .15s ease,opacity .15s ease}
@ -20,23 +22,51 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
.weekdays span{text-align:center;font-size:13px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em} .weekdays span{text-align:center;font-size:13px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{display:flex;align-items:center;justify-content:center;height:52px;border-radius:10px;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:background .15s ease,transform .15s ease} .day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;border-radius:10px;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);transition:background .15s ease,transform .15s ease}
.day:hover{background:var(--cyan-50);transform:scale(1.05)} .day:hover{background:var(--cyan-50);transform:scale(1.05)}
.day.empty{pointer-events:none} .day.empty{pointer-events:none}
.day.today{background:var(--ink);color:#fff;box-shadow:0 4px 12px rgba(15,18,24,.25)} .day.today{background:var(--ink);color:#fff;box-shadow:0 4px 12px rgba(15,18,24,.25)}
.day.today:hover{background:var(--ink)} .day.today:hover{background:var(--ink)}
.day.selected{background:var(--cyan);color:var(--ink);box-shadow:0 4px 12px rgba(0,229,255,.4)} .day.selected{background:var(--cyan);color:var(--ink);box-shadow:0 4px 12px rgba(0,229,255,.4)}
.day.selected:hover{background:var(--cyan)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.day.today .dot,.day.selected .dot{background:#fff}
.cal-foot{text-align:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--gray-100)} .cal-foot{text-align:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--gray-100)}
.today-btn{border:none;background:var(--cyan-50);color:var(--ink);padding:10px 24px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s ease} .today-btn{border:none;background:var(--cyan-50);color:var(--ink);padding:10px 24px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:background .15s ease}
.today-btn:hover{background:var(--cyan)} .today-btn:hover{background:var(--cyan)}
.hint{text-align:center;color:var(--gray-500);font-size:15px;margin-top:20px} /* ===== Панель дел ===== */
.panel{background:var(--white);border-radius:16px;box-shadow:0 12px 32px rgba(15,18,24,.08);padding:24px;min-height:320px}
.panel-empty{text-align:center;color:var(--gray-500);padding:70px 10px}
.pe-emoji{font-size:44px;margin-bottom:12px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.panel-date{font-size:22px;font-weight:800}
.close-btn{border:none;background:var(--gray-100);width:36px;height:36px;border-radius:10px;font-size:20px;line-height:1;cursor:pointer;color:var(--gray-500)}
.close-btn:hover{background:var(--cyan-50);color:var(--ink)}
@media (max-width:480px){ .count{font-size:14px;color:var(--gray-500);margin-bottom:14px}
.wrap{padding:32px 14px} .notes{list-style:none;margin-bottom:18px;max-height:340px;overflow-y:auto}
.notes:empty::after{content:"Пока пусто — добавь первое дело ниже";color:#b4bcc7;font-size:15px;display:block;padding:8px 0}
.note{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100)}
.note:last-child{border-bottom:none}
.chk{width:24px;height:24px;border:2px solid #c4ccd6;border-radius:8px;background:var(--white);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;transition:background .15s ease,border-color .15s ease}
.chk.on{background:var(--cyan);border-color:var(--cyan)}
.note-text{flex:1;font-size:16px}
.note.done .note-text{text-decoration:line-through;color:#aab3bf}
.del{border:none;background:none;color:#c4ccd6;font-size:20px;cursor:pointer;padding:4px;line-height:1}
.del:hover{color:#e5484d}
.add-form{display:flex;gap:10px}
.add-form input{flex:1;border:2px solid var(--gray-100);border-radius:10px;padding:12px 14px;font-size:16px;font-family:inherit;outline:none;transition:border-color .15s ease}
.add-form input:focus{border-color:var(--cyan)}
.add-form button{border:none;background:var(--ink);color:#fff;width:50px;border-radius:10px;font-size:26px;cursor:pointer;flex-shrink:0}
.add-form button:hover{background:#232a35}
@media (max-width:860px){
.layout{grid-template-columns:1fr}
.container{padding:28px 16px}
.top h1{font-size:30px} .top h1{font-size:30px}
.cal{padding:16px} .day{height:48px}
.day{height:44px;font-size:14px}
.month-name{font-size:20px}
} }