Fovway/NoteJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ё

Browse Source
This commit is contained in:
Fovway 2025-10-18 01:23:25 +07:00
parent b8cc859334
commit 96a048f226
3 changed files with 81 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
public/calendar.js
View File

@ -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();
});

88
public/notes.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Заметки</title> <title>Заметки</title>
<link rel="stylesheet" href="/style.css?v=5" /> <link rel="stylesheet" href="/style.css?v=2" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
@ -39,62 +39,39 @@
</form> </form>
</div> </div>
</header> </header>
<div class="main">
<div class="main-wrapper"> <div class="markdown-buttons">
<!-- Календарь слева --> <button class="btnMarkdown" id="boldBtn">
<div class="calendar-box"> <i class="fas fa-bold"></i>
<div class="calendar-header"> </button>
<button id="prevMonth" class="calendar-nav-btn">&lt;</button> <button class="btnMarkdown" id="italicBtn">
<h3 id="calendarTitle"></h3> <i class="fas fa-italic"></i>
<button id="nextMonth" class="calendar-nav-btn">&gt;</button> </button>
</div> <button class="btnMarkdown" id="headerBtn">
<div class="calendar-weekdays"> <i class="fas fa-heading"></i>
<div class="weekday">Пн</div> </button>
<div class="weekday">Вт</div> <button class="btnMarkdown" id="listBtn">
<div class="weekday">Ср</div> <i class="fas fa-list-ul"></i>
<div class="weekday">Чт</div> </button>
<div class="weekday">Пт</div> <button class="btnMarkdown" id="quoteBtn">
<div class="weekday">Сб</div> <i class="fas fa-quote-right"></i>
<div class="weekday">Вс</div> </button>
</div> <button class="btnMarkdown" id="codeBtn">
<div id="calendarDays" class="calendar-days"></div> <i class="fas fa-code"></i>
</button>
<button class="btnMarkdown" id="linkBtn">
<i class="fas fa-link"></i>
</button>
</div> </div>
<!-- Основной контент с формой заметки --> <textarea
<div class="main"> class="textInput"
<div class="markdown-buttons"> id="noteInput"
<button class="btnMarkdown" id="boldBtn"> placeholder="Ваша заметка..."
<i class="fas fa-bold"></i> ></textarea>
</button> <div class="save-button-container">
<button class="btnMarkdown" id="italicBtn"> <button class="btnSave" id="saveBtn">Сохранить</button>
<i class="fas fa-italic"></i> <span class="save-hint">или нажмите Alt + Enter</span>
</button>
<button class="btnMarkdown" id="headerBtn">
<i class="fas fa-heading"></i>
</button>
<button class="btnMarkdown" id="listBtn">
<i class="fas fa-list-ul"></i>
</button>
<button class="btnMarkdown" id="quoteBtn">
<i class="fas fa-quote-right"></i>
</button>
<button class="btnMarkdown" id="codeBtn">
<i class="fas fa-code"></i>
</button>
<button class="btnMarkdown" id="linkBtn">
<i class="fas fa-link"></i>
</button>
</div>
<textarea
class="textInput"
id="noteInput"
placeholder="Ваша заметка..."
></textarea>
<div class="save-button-container">
<button class="btnSave" id="saveBtn">Сохранить</button>
<span class="save-hint">или нажмите Alt + Enter</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -108,6 +85,5 @@
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.1.0/marked.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.1.0/marked.min.js"></script>
<script src="/app.js"></script> <script src="/app.js"></script>
<script src="/calendar.js"></script>
</body> </body>
</html> </html>

82
public/style.css
View File

@ -66,7 +66,7 @@ header {
.container { .container {
width: 90%; width: 90%;
max-width: 850px; max-width: 600px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
padding: 15px; padding: 15px;
@ -440,39 +440,41 @@ textarea:focus {
text-decoration: underline; text-decoration: underline;
} }
/* Стили для календаря */
/* ========== Стили для компактного календаря ========== */
.main-wrapper { .main-wrapper {
display: flex; display: flex;
gap: 15px; gap: 20px;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
} }
.calendar-box { .calendar-sidebar {
flex-shrink: 0; flex-shrink: 0;
width: 190px; width: 240px;
}
.calendar-container {
background: white; background: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border: 1px solid #e0e0e0;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
} }
.calendar-header { .calendar-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 15px;
gap: 4px; gap: 10px;
} }
.calendar-header h3 { .calendar-header h3 {
margin: 0; margin: 0;
font-size: 11px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
min-width: 75px; min-width: 120px;
text-align: center; text-align: center;
flex: 1; flex: 1;
} }
@ -480,10 +482,10 @@ textarea:focus {
.calendar-nav-btn { .calendar-nav-btn {
background: #f0f0f0; background: #f0f0f0;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 4px;
padding: 2px 5px; padding: 4px 8px;
cursor: pointer; cursor: pointer;
font-size: 11px; font-size: 14px;
color: #333; color: #333;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@ -497,23 +499,23 @@ textarea:focus {
.calendar-weekdays { .calendar-weekdays {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
gap: 1px; gap: 2px;
margin-bottom: 5px; margin-bottom: 10px;
} }
.weekday { .weekday {
text-align: center; text-align: center;
font-size: 8px; font-size: 11px;
font-weight: 600; font-weight: 600;
color: #666; color: #666;
padding: 1px 0; padding: 5px 0;
text-transform: uppercase; text-transform: uppercase;
} }
.calendar-days { .calendar-days {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
gap: 1px; gap: 2px;
} }
.calendar-day { .calendar-day {
@ -521,8 +523,8 @@ textarea:focus {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 10px; font-size: 12px;
border-radius: 3px; border-radius: 4px;
cursor: pointer; cursor: pointer;
background: #f8f9fa; background: #f8f9fa;
color: #666; color: #666;
@ -563,6 +565,24 @@ textarea:focus {
background: #1e7e34; 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 { .main {
flex: 1; flex: 1;
min-width: 300px; min-width: 300px;
@ -574,23 +594,19 @@ textarea:focus {
flex-direction: column; flex-direction: column;
} }
.calendar-box { .calendar-sidebar {
width: 100%; width: 100%;
} }
.calendar-container {
max-width: 100%;
}
.main { .main {
min-width: auto; min-width: auto;
} }
.container { .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;
}