From 7def129e14408cc74ad8eb2604bc887a8f63aed7 Mon Sep 17 00:00:00 2001 From: Fovway Date: Sat, 18 Oct 2025 00:39:21 +0700 Subject: [PATCH] refactor: Redesign calendar as compact sidebar box with improved layout - Changed calendar from full sidebar to compact containerized box - Reduced calendar size (190px width) to minimize space usage - Increased main container max-width from 600px to 850px for two-column layout - Added proper styling for .main element (white background, shadow, padding) - Improved visual hierarchy with matching design patterns - Updated CSS version for cache busting --- .gitignore | 8 ++ app.js | 247 -------------------------------------- favicon-16.png | Bin 0 -> 172 bytes favicon-32.png | Bin 0 -> 246 bytes favicon.ico | Bin 0 -> 708 bytes icon-192.png | Bin 0 -> 921 bytes icon-512.png | Bin 0 -> 2855 bytes index.html | 72 ----------- manifest.json | 4 +- plan.txt | 2 - public/notes.html | 36 +++--- public/style-calendar.css | 144 ++++++++++++++++++++++ public/style.css | 82 +++++-------- service-worker.js | 7 -- style.css | 178 --------------------------- 15 files changed, 204 insertions(+), 576 deletions(-) delete mode 100644 app.js create mode 100644 favicon-16.png create mode 100644 favicon-32.png create mode 100644 favicon.ico create mode 100644 icon-192.png create mode 100644 icon-512.png delete mode 100644 index.html delete mode 100644 plan.txt create mode 100644 public/style-calendar.css delete mode 100644 service-worker.js delete mode 100644 style.css diff --git a/.gitignore b/.gitignore index e1b049b..3f73acc 100644 --- a/.gitignore +++ b/.gitignore @@ -33,4 +33,12 @@ Thumbs.db dist/ build/ +# Загруженные аватарки пользователей +public/uploads/* +!public/uploads/.gitignore + +# Временные файлы +/tmp/ +*.tmp + .cursor/ \ No newline at end of file diff --git a/app.js b/app.js deleted file mode 100644 index 25af108..0000000 --- a/app.js +++ /dev/null @@ -1,247 +0,0 @@ -const textInput = document.querySelector(".textInput"); -const btnSave = document.querySelector(".btnSave"); -const notes = document.querySelector(".notes-container"); - -// Получаем кнопки -const boldBtn = document.getElementById("boldBtn"); -const italicBtn = document.getElementById("italicBtn"); -const headerBtn = document.getElementById("headerBtn"); -const listBtn = document.getElementById("listBtn"); -const quoteBtn = document.getElementById("quoteBtn"); -const codeBtn = document.getElementById("codeBtn"); -const linkBtn = document.getElementById("linkBtn"); - -function getFormattedDateTime() { - let now = new Date(); - let day = String(now.getDate()).padStart(2, "0"); - let month = String(now.getMonth() + 1).padStart(2, "0"); - let year = now.getFullYear(); - let hours = String(now.getHours()).padStart(2, "0"); - let minutes = String(now.getMinutes()).padStart(2, "0"); - - return { - date: `${day}.${month}.${year}`, - time: `${hours}:${minutes}`, - }; -} - -// Сохранить заметки в localStorage -function saveNotesToLocalStorage(notesArr) { - localStorage.setItem("notes", JSON.stringify(notesArr)); -} - -// Получить заметки из localStorage -function getNotesFromLocalStorage() { - return JSON.parse(localStorage.getItem("notes")) || []; -} - -// Обновить функцию renderNotes -function renderNotes() { - const notesArr = getNotesFromLocalStorage(); - notes.innerHTML = ""; // Очищаем контейнер перед рендерингом - - notesArr.forEach(function (content, index) { - const noteHtml = ` -
-
- ${content.date} ${content.time} -
Редактировать
-
Удалить
-
-
${marked.parse(content.content)}
-
- `; - notes.insertAdjacentHTML("afterbegin", noteHtml); - }); - - deleteNote(); - editNote(); -} - -// Обновить функцию saveNote -function saveNote() { - btnSave.addEventListener("click", function () { - if (textInput.value.trim() !== "") { - let { date, time } = getFormattedDateTime(); - - const note = { - content: textInput.value, - date: date, - time: time, - }; - - const notesArr = getNotesFromLocalStorage(); - notesArr.push(note); - saveNotesToLocalStorage(notesArr); - - textInput.value = ""; - textInput.style.height = "auto"; // Сбрасываем размер текстового поля - renderNotes(); - } - }); -} - -// Обновить функцию deleteNote -function deleteNote() { - document.querySelectorAll("#deleteBtn").forEach((btn) => { - btn.addEventListener("click", function (event) { - let index = event.target.dataset.index; - const notesArr = getNotesFromLocalStorage(); - notesArr.splice(index, 1); - saveNotesToLocalStorage(notesArr); - renderNotes(); - }); - }); -} - -// Обновить функцию editNote -function editNote() { - document.querySelectorAll("#editBtn").forEach((btn) => { - btn.addEventListener("click", function (event) { - let index = event.target.dataset.index; - let noteContainer = event.target.closest("#note"); - let noteContent = noteContainer.querySelector(".textNote"); - - // Создаем textarea с уже существующим классом textInput - let textarea = document.createElement("textarea"); - textarea.classList.add("textInput"); - textarea.value = noteContent.textContent; - - // Привязываем авторасширение к textarea для редактирования - textarea.addEventListener("input", function () { - autoExpandTextarea(textarea); - }); - autoExpandTextarea(textarea); - - // Кнопка сохранить - let saveEditBtn = document.createElement("button"); - saveEditBtn.textContent = "Сохранить"; - saveEditBtn.classList.add("btnSave"); - - // Очищаем текущий контент и вставляем textarea и кнопку сохранить - noteContent.innerHTML = ""; - noteContent.appendChild(textarea); - noteContent.appendChild(saveEditBtn); - - saveEditBtn.addEventListener("click", function () { - if (textarea.value.trim() !== "") { - let { date, time } = getFormattedDateTime(); - const notesArr = getNotesFromLocalStorage(); - notesArr[index] = { - content: textarea.value, - date: date, - time: time, - }; - saveNotesToLocalStorage(notesArr); - renderNotes(); - } - }); - }); - }); -} - -// Функция для авторасширения текстового поля -function autoExpandTextarea(textarea) { - textarea.style.height = "auto"; - textarea.style.height = textarea.scrollHeight + "px"; -} - -// Привязываем авторасширение к текстовому полю для создания заметки -textInput.addEventListener("input", function () { - autoExpandTextarea(textInput); -}); - -// Изначально запускаем для установки правильной высоты -autoExpandTextarea(textInput); - -function insertMarkdown(tag) { - const start = textInput.selectionStart; - const end = textInput.selectionEnd; - const text = textInput.value; - - const before = text.substring(0, start); - const selected = text.substring(start, end); - const after = text.substring(end); - - if (selected.startsWith(tag) && selected.endsWith(tag)) { - // Если теги уже есть, удаляем их - textInput.value = `${before}${selected.slice( - tag.length, - -tag.length - )}${after}`; - textInput.setSelectionRange(start, end - 2 * tag.length); - } else if (selected.trim() === "") { - // Если текст не выделен - if (tag === "[Текст ссылки](URL)") { - // Для ссылок создаем шаблон с двумя кавычками - textInput.value = `${before}[Текст ссылки](URL)${after}`; - const cursorPosition = start + 1; // Помещаем курсор внутрь текста ссылки - textInput.setSelectionRange(cursorPosition, cursorPosition + 12); - } else if (tag === "- " || tag === "> " || tag === "# ") { - // Для списка, цитаты и заголовка помещаем курсор после `- `, `> ` или `# ` - textInput.value = `${before}${tag}${after}`; - const cursorPosition = start + tag.length; - textInput.setSelectionRange(cursorPosition, cursorPosition); - } else { - // Для остальных типов создаем два тега - textInput.value = `${before}${tag}${tag}${after}`; - const cursorPosition = start + tag.length; - textInput.setSelectionRange(cursorPosition, cursorPosition); - } - } else { - // Если текст выделен - if (tag === "[Текст ссылки](URL)") { - // Для ссылок используем выделенный текст вместо "Текст ссылки" - textInput.value = `${before}[${selected}](URL)${after}`; - const cursorPosition = start + selected.length + 3; // Помещаем курсор в URL - textInput.setSelectionRange(cursorPosition, cursorPosition + 3); - } else if (tag === "- " || tag === "> " || tag === "# ") { - // Для списка, цитаты и заголовка добавляем `- `, `> ` или `# ` перед выделенным текстом - textInput.value = `${before}${tag}${selected}${after}`; - const cursorPosition = start + tag.length + selected.length; - textInput.setSelectionRange(cursorPosition, cursorPosition); - } else { - // Для остальных типов оборачиваем выделенный текст - textInput.value = `${before}${tag}${selected}${tag}${after}`; - const cursorPosition = start + tag.length + selected.length + tag.length; - textInput.setSelectionRange(cursorPosition, cursorPosition); - } - } - - textInput.focus(); -} - -// Обработчики для кнопок -boldBtn.addEventListener("click", function () { - insertMarkdown("**"); // Вставляем жирный текст -}); - -italicBtn.addEventListener("click", function () { - insertMarkdown("*"); // Вставляем курсив -}); - -headerBtn.addEventListener("click", function () { - insertMarkdown("# "); // Вставляем заголовок -}); - -listBtn.addEventListener("click", function () { - insertMarkdown("- "); // Вставляем элемент списка -}); - -quoteBtn.addEventListener("click", function () { - insertMarkdown("> "); // Вставляем цитату -}); - -codeBtn.addEventListener("click", function () { - insertMarkdown("`"); // Вставляем код -}); - -linkBtn.addEventListener("click", function () { - insertMarkdown("[Текст ссылки](URL)"); // Вставляем ссылку -}); - -// Удалено дублирование добавления кнопок Markdown в окно сохранения заметки -// Кнопки уже добавлены в HTML (index.html), поэтому их повторное создание не требуется - -renderNotes(); -saveNote(); diff --git a/favicon-16.png b/favicon-16.png new file mode 100644 index 0000000000000000000000000000000000000000..e530f1437b16079cb5232c828be7c702f15484b2 GIT binary patch literal 172 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`#hxyXAr*6y|NQ^|zn+bYL0EOx z$|MGEqxOw#!3R$t;xE`XV*^7Svjh;-UHR)K{4njukDuCwdJT+yYGEdV9cTYX8(a-C z=Sg6=EPW%U^*BRJ*G9&!y$3qx2yJv#wmQIZ;=c=1Th^OL8hQ%sJT-9(ZZI&sDvpYc T_D#3~w4TA!)z4*}Q$iB}(o;QZ literal 0 HcmV?d00001 diff --git a/favicon-32.png b/favicon-32.png new file mode 100644 index 0000000000000000000000000000000000000000..53fc3f85068784ecea84521043dfdcaa01c4e815 GIT binary patch literal 246 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=ffJy`COl7mc&ijFFwT8nb+-b!|V7R|L!owV8FWaa$I=eEjeX@6GCo84fr=gxG4J?{U4 zR2X+X3X^^p?`Ucv*toM$S@ocw(4CpA4trU5tG8{ll~=0Zmt>FD_I=?Z^2w5G=fo6t ztq)gN?tgr<=J$HeBhbG5_$XZ#onTC3K>$DxYk~iIK4R_jwyfPLxuwk z&IMU}Os1Y*wLqD%AY4>VdFdXOx%U|oMGpH!%rxwZY!*pjnRoBurgibos(k`=P6CGO z=1o0Ze6W{E&a3k9(%)rEZg0`{ZTUr5$LCgOS;Pas?I577_zFYTYtv);eZev(JbP0l+c7F zo)m!63gCDuuB!S1*AAt?>o(2z+7N&+aaQxciBh$ zOXw4>vfE+e3hawAgqJz6%)W5_*&TsE*_1Ub2TWAiXL1P4-ecj=EBqr@{ma%Z*5`H@ zF$8gmu>Lr$R5@Dbwgd*Y1$-Y^ RSd=!J$Q?BB2YLkVYXG&n42A#z literal 0 HcmV?d00001 diff --git a/icon-192.png b/icon-192.png new file mode 100644 index 0000000000000000000000000000000000000000..7f89b74f1bacbedd975b4b31c05858190373ae3d GIT binary patch literal 921 zcmeAS@N?(olHy`uVBq!ia0vp^2SAvE4M+yv$zf+;U{3IKaSW-L^Y-q+Ea5oK-O{-&Y)`Fui2oPxbH1-qy`pmdPHdKP`?y z$CF_RXM+jj1T}_BEDp06JcJoCnG}4fAh>0^xBdgoZ}X?c9sIMe{!ih@>lOdseS5Ut zaMfRq|0?<2;{P^!yDK#OUTf8`HvY$PJ;_FfciV5BXIR=@zy0=GyPDmxRh*uyc^7!F zT;G0*A*=j7{0qlw8|7!m2{vx#QMcVhz z*WWJ{-x#TOfZ^W0osm_XvsD`$J02LZ7zhZS@n>ijJh+F&Ktb?~J43V3K^qnW1Hm~! z(c*|QImVm@j(PqJ(uz&b1rM}!Jb1~n!BD9}iZN#bha6B?wdpuexbuMtW6m57IdFj8 zny_D}l5_q3JyBJhItN&g1MUrzY|pRb+up>@J&qy{3uV4Td@>rQGf_f1b^&vId!7*^ zwpeK1&^(cEikt10Xk}sK2;0nEl90aiBrZGLep#7(HUyjKY{yg?lc=Z0khz*W;n%J& zTpGZDJad}&Y2s?01N^yi_l{o(@nlmR-$jHd-It zxc(zs0WTy$DLlIJyz|v_Ud9P&(k3S?57aX$oK+T}Qfi|~3a(F3P2Y5I)w-|1EXUyK L>gTe~DWM4fZIDZ} literal 0 HcmV?d00001 diff --git a/icon-512.png b/icon-512.png new file mode 100644 index 0000000000000000000000000000000000000000..bf7defcda650530ad922988478c9819ee26a1f0d GIT binary patch literal 2855 zcmeHJZBUd|6n@^98|o zLL{*&u@%iYlLnZhGD372Y|8i=rVJUAg_seW4OkO}F+RG$FaOvNYNl!Yb?$l3J>ySXXB6xzAc;VS)`lFi+;FOhBaQoFd9Iu$Z zuOF9ChdzYR*6uY|!?|#5?n7eNVE31OL|F)KA)gocnwhO1NW}9} z40Nh-W+Tv4jMNW-Y*((qiwiXt%npYzLkzIRpBGm0Xne{Udz?V8mcVGU^s<< zHi=LjkLA&XrZN#rsEmmXgf3@-*+!%g?ERo+8UE=i;i&;qT)4~- z4vFj*vIs)YoAmjLTq0Y=K4}QO%iN`YsAKN!%sq-nDs#6m_x)=89t3e!39hl^+Fdwn zHZz`(h!>qf|4^g321rs7YLQ@IEmNzR8bfG1Q(5G^lT1w@^bR{_njdNcA*Q%;*0*@b zqMT8{fQd8GU7$Q75fxJSFwZf9a(`Y4B>Rbx9CnuAhle(BRgVqzax9yujYDdM!=hS! z9?Dyhw<3zSdt2A+9mQ8K67g@x&;KQR;Z<^9C=jV(+2`?4?pK+_M&3v1v9e?pOYU z7vEx&xnCdTNPDk6z#BrtNP2A$K6!vm4zi(ETQqQ^sVO~HgEjr%eA>m>?J%JMaswS{ z>}O@Itbnojl#8s!vQ!_0z@eMuyR7_H(|nDK(wq&4EC+V9RuTI7FJ}gFw`;5idEqr} zT7$_VX-Q(!u5(F$*IgUUoz(;HPHqovE-mzK>9iGmwHelZb*?&h4>6|CmR5OAStEHN zD_V@SQ#2bOb63&629m#c=<*+j>6u_A<~V%{L$0=1c7fXxP1} zuVN*kVPk;&)v@l3>5!`9Qi%19KM$_qjgi4AJW3sqFP0-EKs!7tyiBmG2UG| z%Gf>DkqfQelh^{RPt)^kZnmrj7<^j=7*BQ=uVJ`Pzxf{Ps|FR#e#P8QX;`~Q% epa19^@YcHQ - - - - - Document - - - - -
-
Заметки
-
-
- - - - - - - -
- - - -
-
-
-
-
-
-
-
-
-
-
-
-

Создатель: Fovway

-
- - - - diff --git a/manifest.json b/manifest.json index 129f529..5543802 100644 --- a/manifest.json +++ b/manifest.json @@ -7,12 +7,12 @@ "theme_color": "#000000", "icons": [ { - "src": "project.png", + "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }, { - "src": "project.png", + "src": "icon-512.png", "sizes": "512x512", "type": "image/png" } diff --git a/plan.txt b/plan.txt deleted file mode 100644 index af58597..0000000 --- a/plan.txt +++ /dev/null @@ -1,2 +0,0 @@ -✅ 1. Сделать создание заметки по нажатию alt + enter. И написать подсказку возле кнопки Сохранить. -✅ 2. Добавить личный кабинет, который открывается при нажатии на свой ник. В личном кабинете можно менять регистрационные данные, а так же привязать свой эмейл и поставить аватарку. Картинки аватарки загружаются на сервер. \ No newline at end of file diff --git a/public/notes.html b/public/notes.html index d16e240..7c2ff41 100644 --- a/public/notes.html +++ b/public/notes.html @@ -4,7 +4,7 @@ Заметки - + - +
+
Пн
+
Вт
+
Ср
+
Чт
+
Пт
+
Сб
+
Вс
+
+
+
diff --git a/public/style-calendar.css b/public/style-calendar.css new file mode 100644 index 0000000..e0e4c9c --- /dev/null +++ b/public/style-calendar.css @@ -0,0 +1,144 @@ +/* Компактные стили для календаря */ +.main-wrapper { + display: flex; + gap: 15px; + align-items: flex-start; + width: 100%; +} + +.calendar-box { + flex-shrink: 0; + width: 190px; + background: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; + padding: 10px; +} + +.calendar-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + gap: 4px; +} + +.calendar-header h3 { + margin: 0; + font-size: 11px; + font-weight: 600; + color: #333; + min-width: 75px; + text-align: center; + flex: 1; +} + +.calendar-nav-btn { + background: #f0f0f0; + border: 1px solid #ddd; + border-radius: 3px; + padding: 2px 5px; + cursor: pointer; + font-size: 11px; + color: #333; + transition: all 0.2s ease; +} + +.calendar-nav-btn:hover { + background: #007bff; + color: white; + border-color: #007bff; +} + +.calendar-weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 1px; + margin-bottom: 5px; +} + +.weekday { + text-align: center; + font-size: 8px; + font-weight: 600; + color: #666; + padding: 1px 0; + text-transform: uppercase; +} + +.calendar-days { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 1px; +} + +.calendar-day { + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + border-radius: 3px; + cursor: pointer; + background: #f8f9fa; + color: #666; + border: 1px solid transparent; + transition: all 0.2s ease; + position: relative; +} + +.calendar-day:hover { + background: #e8f4f8; + border-color: #007bff; +} + +.calendar-day.other-month { + color: #ccc; + background: #fafafa; +} + +.calendar-day.today { + background: #007bff; + color: white; + font-weight: 600; + border-color: #0056cc; +} + +.calendar-day.today:hover { + background: #0056cc; +} + +.calendar-day.selected { + background: #28a745; + color: white; + font-weight: 600; + border-color: #1e7e34; +} + +.calendar-day.selected:hover { + background: #1e7e34; +} + +.main { + flex: 1; + min-width: 300px; +} + +/* Адаптация для мобильных устройств */ +@media (max-width: 768px) { + .main-wrapper { + flex-direction: column; + } + + .calendar-box { + width: 100%; + } + + .main { + min-width: auto; + } + + .container { + max-width: 100%; + } +} diff --git a/public/style.css b/public/style.css index afebf1c..9ca7564 100644 --- a/public/style.css +++ b/public/style.css @@ -66,7 +66,7 @@ header { .container { width: 90%; - max-width: 600px; + max-width: 850px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 15px; @@ -440,41 +440,39 @@ textarea:focus { text-decoration: underline; } -/* Стили для календаря */ + +/* ========== Стили для компактного календаря ========== */ + .main-wrapper { display: flex; - gap: 20px; + gap: 15px; align-items: flex-start; width: 100%; } -.calendar-sidebar { +.calendar-box { flex-shrink: 0; - width: 240px; -} - -.calendar-container { + width: 190px; background: white; - border: 1px solid #e0e0e0; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; - padding: 15px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + padding: 10px; } .calendar-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 15px; - gap: 10px; + margin-bottom: 8px; + gap: 4px; } .calendar-header h3 { margin: 0; - font-size: 14px; + font-size: 11px; font-weight: 600; color: #333; - min-width: 120px; + min-width: 75px; text-align: center; flex: 1; } @@ -482,10 +480,10 @@ textarea:focus { .calendar-nav-btn { background: #f0f0f0; border: 1px solid #ddd; - border-radius: 4px; - padding: 4px 8px; + border-radius: 3px; + padding: 2px 5px; cursor: pointer; - font-size: 14px; + font-size: 11px; color: #333; transition: all 0.2s ease; } @@ -499,23 +497,23 @@ textarea:focus { .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); - gap: 2px; - margin-bottom: 10px; + gap: 1px; + margin-bottom: 5px; } .weekday { text-align: center; - font-size: 11px; + font-size: 8px; font-weight: 600; color: #666; - padding: 5px 0; + padding: 1px 0; text-transform: uppercase; } .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); - gap: 2px; + gap: 1px; } .calendar-day { @@ -523,8 +521,8 @@ textarea:focus { display: flex; align-items: center; justify-content: center; - font-size: 12px; - border-radius: 4px; + font-size: 10px; + border-radius: 3px; cursor: pointer; background: #f8f9fa; color: #666; @@ -565,24 +563,6 @@ 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; @@ -594,19 +574,23 @@ textarea:focus { flex-direction: column; } - .calendar-sidebar { + .calendar-box { width: 100%; } - .calendar-container { - max-width: 100%; - } - .main { min-width: auto; } .container { - max-width: 900px; + max-width: 100%; } } + +/* Стиль для основного блока заметок */ +.main { + background: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; + padding: 15px; +} diff --git a/service-worker.js b/service-worker.js deleted file mode 100644 index 0644d99..0000000 --- a/service-worker.js +++ /dev/null @@ -1,7 +0,0 @@ -self.addEventListener("install", (event) => { - console.log("Service Worker установлен."); -}); - -self.addEventListener("fetch", (event) => { - console.log("Обработан запрос:", event.request.url); -}); diff --git a/style.css b/style.css deleted file mode 100644 index 9da575e..0000000 --- a/style.css +++ /dev/null @@ -1,178 +0,0 @@ -body { - font-family: "Open Sans", sans-serif; - padding: 0; - margin: 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - background: #f5f5f5; -} - -header { - font-size: 20px; - font-weight: bold; - margin-bottom: 20px; -} - -.container { - width: 90%; - max-width: 600px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - border-radius: 8px; - padding: 15px; - margin-top: 20px; - background: white; -} - -textarea { - width: 100%; - min-height: 50px; /* Минимальная высота */ - resize: none; /* Отключаем возможность ручного изменения размера */ - border: none; - background: white; - margin-bottom: 5px; - overflow-y: hidden; /* Отключаем полосу прокрутки по вертикали */ -} - -textarea:focus { - outline: none; /* Убираем обводку */ -} - -.btnSave { - padding: 5px; - cursor: pointer; - border-width: 1px; - background: white; - border-radius: 5px; - font-family: "Open Sans", sans-serif; - transition: all 0.3s ease; -} - -.date { - font-size: 11px; - color: grey; -} - -.notesHeaderBtn { - display: inline-block; - cursor: pointer; - color: black; - font-weight: bold; -} - -.textNote { - margin-top: 10px; - white-space: pre-wrap; -} - -/* Убираем стандартные отступы для абзацев */ -.textNote p { - margin: 0; - padding: 0; -} - -/* Убираем маргины у заголовков */ -.textNote h1, -.textNote h2, -.textNote h3, -.textNote h4, -.textNote h5, -.textNote h6 { - margin: 0; - padding: 0; -} - -/* Убираем отступы у списков */ -.textNote ul, -.textNote ol { - margin: 0; - padding-left: 20px; -} - -/* Убираем маргины у элементов списка */ -.textNote li { - margin: 0; - padding: 0; -} - -/* Стили для ссылок */ -.textNote a { - color: #007bff; - text-decoration: none; -} - -.textNote a:hover { - text-decoration: underline; -} - -/* Стили для цитат */ -.textNote blockquote { - border-left: 4px solid #007bff; - padding-left: 16px; - margin: 10px 0; - color: #555; - font-style: italic; - background-color: #f8f9fa; - padding: 10px 16px; - border-radius: 0 4px 4px 0; -} - -.textNote blockquote p { - margin: 0; -} - -/* Стили для кода */ -.textNote pre { - background-color: #f5f5f5; - padding: 10px; - border-radius: 5px; - font-size: 14px; - overflow-x: auto; -} - -.textNote code { - background-color: #f5f5f5; - padding: 2px 4px; - border-radius: 5px; - font-size: 14px; -} - -.notes-container { - width: 100%; - display: flex; - flex-direction: column; /* Располагаем элементы в колонку */ - align-items: center; /* Центрируем */ -} - -.markdown-buttons { - margin-top: 10px; - margin-bottom: 10px; -} - -.markdown-buttons .btnMarkdown { - padding: 5px 10px; - margin-right: 5px; - cursor: pointer; - border: 1px solid #ddd; - background-color: #f0f0f0; - border-radius: 5px; - font-size: 14px; -} - -.markdown-buttons .btnMarkdown:hover { - background-color: #e0e0e0; -} - -.footer { - text-align: center; - font-size: 12px; - color: #999; - position: fixed; - bottom: 0; - width: 100%; - padding: 10px 0; -} - -.footer span { - font-weight: bold; -}