From 96a048f226cc1bbffb03acdd1bc73b13b4693a17 Mon Sep 17 00:00:00 2001 From: Fovway Date: Sat, 18 Oct 2025 01:23:25 +0700 Subject: [PATCH] =?UTF-8?q?=D1=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/calendar.js | 164 --------------------------------------------- public/notes.html | 88 +++++++++--------------- public/style.css | 82 ++++++++++++++--------- 3 files changed, 81 insertions(+), 253 deletions(-) delete mode 100644 public/calendar.js diff --git a/public/calendar.js b/public/calendar.js deleted file mode 100644 index dbeb366..0000000 --- a/public/calendar.js +++ /dev/null @@ -1,164 +0,0 @@ -// Календарь -class Calendar { - constructor() { - this.currentDate = new Date(); - this.selectedDate = new Date(); - this.today = new Date(); - this.init(); - } - - init() { - this.calendarTitle = document.getElementById("calendarTitle"); - this.calendarDays = document.getElementById("calendarDays"); - this.prevMonthBtn = document.getElementById("prevMonth"); - this.nextMonthBtn = document.getElementById("nextMonth"); - - this.prevMonthBtn.addEventListener("click", () => this.previousMonth()); - this.nextMonthBtn.addEventListener("click", () => this.nextMonth()); - - this.render(); - } - - previousMonth() { - this.currentDate.setMonth(this.currentDate.getMonth() - 1); - this.render(); - } - - nextMonth() { - this.currentDate.setMonth(this.currentDate.getMonth() + 1); - this.render(); - } - - render() { - this.renderTitle(); - this.renderDays(); - } - - renderTitle() { - const monthNames = [ - "Январь", - "Февраль", - "Март", - "Апрель", - "Май", - "Июнь", - "Июль", - "Август", - "Сентябрь", - "Октябрь", - "Ноябрь", - "Декабрь", - ]; - const month = monthNames[this.currentDate.getMonth()]; - const year = this.currentDate.getFullYear(); - this.calendarTitle.textContent = `${month} ${year}`; - } - - renderDays() { - this.calendarDays.innerHTML = ""; - - // Первый день месяца - const firstDay = new Date( - this.currentDate.getFullYear(), - this.currentDate.getMonth(), - 1 - ); - // Последний день месяца - const lastDay = new Date( - this.currentDate.getFullYear(), - this.currentDate.getMonth() + 1, - 0 - ); - // Число дней в месяце - const daysInMonth = lastDay.getDate(); - // День недели, на который выпадает 1-е число месяца (0 - понедельник в нашей системе) - let startingDayOfWeek = firstDay.getDay() - 1; // Преобразуем так, чтобы понедельник был 0 - if (startingDayOfWeek === -1) startingDayOfWeek = 6; // Воскресенье = 6 - - // Добавляем дни из предыдущего месяца - const prevLastDay = new Date( - this.currentDate.getFullYear(), - this.currentDate.getMonth(), - 0 - ).getDate(); - for (let i = startingDayOfWeek - 1; i >= 0; i--) { - const dayDiv = document.createElement("div"); - dayDiv.classList.add("calendar-day", "other-month"); - dayDiv.textContent = prevLastDay - i; - this.calendarDays.appendChild(dayDiv); - } - - // Добавляем дни текущего месяца - for (let day = 1; day <= daysInMonth; day++) { - const dayDiv = document.createElement("div"); - dayDiv.classList.add("calendar-day"); - dayDiv.textContent = day; - - const currentCellDate = new Date( - this.currentDate.getFullYear(), - this.currentDate.getMonth(), - day - ); - - // Проверяем, сегодняшний ли это день - if (this.isToday(currentCellDate)) { - dayDiv.classList.add("today"); - } - - // Проверяем, выбранный ли это день - if (this.isSelected(currentCellDate)) { - dayDiv.classList.add("selected"); - } - - // Добавляем обработчик клика - dayDiv.addEventListener("click", () => this.selectDate(currentCellDate)); - - this.calendarDays.appendChild(dayDiv); - } - - // Добавляем дни из следующего месяца - const totalCells = this.calendarDays.children.length; - const remainingCells = 42 - totalCells; // 6 строк * 7 дней = 42 - for (let day = 1; day <= remainingCells; day++) { - const dayDiv = document.createElement("div"); - dayDiv.classList.add("calendar-day", "other-month"); - dayDiv.textContent = day; - this.calendarDays.appendChild(dayDiv); - } - } - - isToday(date) { - return ( - date.getDate() === this.today.getDate() && - date.getMonth() === this.today.getMonth() && - date.getFullYear() === this.today.getFullYear() - ); - } - - isSelected(date) { - return ( - date.getDate() === this.selectedDate.getDate() && - date.getMonth() === this.selectedDate.getMonth() && - date.getFullYear() === this.selectedDate.getFullYear() - ); - } - - selectDate(date) { - this.selectedDate = new Date(date); - this.render(); - // Вы можете добавить дополнительную логику здесь, например, фильтрацию заметок по дате - console.log("Выбрана дата:", this.formatDate(date)); - } - - formatDate(date) { - const day = String(date.getDate()).padStart(2, "0"); - const month = String(date.getMonth() + 1).padStart(2, "0"); - const year = date.getFullYear(); - return `${day}.${month}.${year}`; - } -} - -// Инициализируем календарь при загрузке страницы -document.addEventListener("DOMContentLoaded", function () { - new Calendar(); -}); diff --git a/public/notes.html b/public/notes.html index 7c2ff41..b97f309 100644 --- a/public/notes.html +++ b/public/notes.html @@ -4,7 +4,7 @@ Заметки - + - -
- -
-
- -

- -
-
-
Пн
-
Вт
-
Ср
-
Чт
-
Пт
-
Сб
-
Вс
-
-
+
+
+ + + + + + +
- -
-
- - - - - - - -
- - -
- - или нажмите Alt + Enter -
+ +
+ + или нажмите Alt + Enter
@@ -108,6 +85,5 @@
- diff --git a/public/style.css b/public/style.css index 9ca7564..ac57c35 100644 --- a/public/style.css +++ b/public/style.css @@ -66,7 +66,7 @@ header { .container { width: 90%; - max-width: 850px; + max-width: 600px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 15px; @@ -440,39 +440,41 @@ textarea:focus { text-decoration: underline; } - -/* ========== Стили для компактного календаря ========== */ - +/* Стили для календаря */ .main-wrapper { display: flex; - gap: 15px; + gap: 20px; align-items: flex-start; width: 100%; } -.calendar-box { +.calendar-sidebar { flex-shrink: 0; - width: 190px; + width: 240px; +} + +.calendar-container { background: white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border: 1px solid #e0e0e0; border-radius: 8px; - padding: 10px; + padding: 15px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .calendar-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 8px; - gap: 4px; + margin-bottom: 15px; + gap: 10px; } .calendar-header h3 { margin: 0; - font-size: 11px; + font-size: 14px; font-weight: 600; color: #333; - min-width: 75px; + min-width: 120px; text-align: center; flex: 1; } @@ -480,10 +482,10 @@ textarea:focus { .calendar-nav-btn { background: #f0f0f0; border: 1px solid #ddd; - border-radius: 3px; - padding: 2px 5px; + border-radius: 4px; + padding: 4px 8px; cursor: pointer; - font-size: 11px; + font-size: 14px; color: #333; transition: all 0.2s ease; } @@ -497,23 +499,23 @@ textarea:focus { .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); - gap: 1px; - margin-bottom: 5px; + gap: 2px; + margin-bottom: 10px; } .weekday { text-align: center; - font-size: 8px; + font-size: 11px; font-weight: 600; color: #666; - padding: 1px 0; + padding: 5px 0; text-transform: uppercase; } .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); - gap: 1px; + gap: 2px; } .calendar-day { @@ -521,8 +523,8 @@ textarea:focus { display: flex; align-items: center; justify-content: center; - font-size: 10px; - border-radius: 3px; + font-size: 12px; + border-radius: 4px; cursor: pointer; background: #f8f9fa; color: #666; @@ -563,6 +565,24 @@ textarea:focus { background: #1e7e34; } +.calendar-day.has-notes { + font-weight: 600; + color: #007bff; +} + +.calendar-day.has-notes::before { + content: ""; + display: block; + width: 4px; + height: 4px; + background: #007bff; + border-radius: 50%; + position: absolute; + bottom: 2px; + left: 50%; + transform: translateX(-50%); +} + .main { flex: 1; min-width: 300px; @@ -574,23 +594,19 @@ textarea:focus { flex-direction: column; } - .calendar-box { + .calendar-sidebar { width: 100%; } + .calendar-container { + max-width: 100%; + } + .main { min-width: auto; } .container { - max-width: 100%; + max-width: 900px; } } - -/* Стиль для основного блока заметок */ -.main { - background: white; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - border-radius: 8px; - padding: 15px; -}