/
Ormon
/
notebook-app
Обзор
Документация
Войти
/
Ormon
/
notebook-app
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/index.html
126 строк
5 KB
Sergey
новый проект
07 мар 2026, 22:26
07 мар 2026, 22:26
e6a8352
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Notebook App</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="app"> <header class="topbar"> <h1>My Notebook</h1> <div class="search-container"> <select id="search-type" class="search-type"> <option value="title">Title</option> <option value="content">Content</option> <option value="full">Full Search</option> </select> <input type="text" id="search-input" placeholder="Search..." /> </div> <button id="btn-new-note" class="primary-btn">+ New Note</button> </header> <div class="layout"> <aside class="sidebar" id="sidebar"> <h3>Tags</h3> <ul id="tag-list" class="tag-list"> <!-- Tags will be dynamically loaded here --> <li class="active">All Notes</li> </ul> </aside> <main class="content"> <div id="notes-grid" class="notes-grid"> <!-- Notes will be loaded here --> <div class="skeleton-note"></div> <div class="skeleton-note"></div> <div class="skeleton-note"></div> </div> <div id="pagination-controls" class="pagination-controls hidden"> <button id="btn-prev-page" class="secondary-btn" disabled>← Previous</button> <span id="page-info">Page 1 of 1</span> <button id="btn-next-page" class="secondary-btn" disabled>Next →</button> </div> </main> <aside id="right-column" class="right-column hidden"> <h3>Timed Reminders</h3> <div id="reminders-list" class="reminders-list"> <!-- Timed reminders will be loaded here --> </div> </aside> </div> <div id="marquee-container" class="marquee-container hidden"> <div class="marquee-content" id="marquee-content"></div> </div> <!-- Modal for New / Edit Note --> <div id="note-modal" class="modal-overlay hidden"> <div class="modal-content"> <header class="modal-header"> <h2 id="modal-title">Create Note</h2> <div class="header-actions"> <button id="btn-edit-note" class="secondary-btn hidden">Edit</button> <button id="btn-close-modal" class="icon-btn">×</button> </div> </header> <!-- Read Mode View --> <div id="note-view" class="note-view hidden"> <h2 id="view-title" class="view-title"></h2> <div id="view-date" class="date"></div> <div id="view-tags" class="note-tags"></div> <div id="view-reminders" class="note-reminders"></div> <div id="view-content" class="body"></div> <div id="view-attachments" class="attachments-list"></div> </div> <form id="note-form"> <input type="hidden" id="note-id" /> <div class="form-group"> <label for="note-title">Title</label> <input type="text" id="note-title" placeholder="What's this about?" required /> </div> <div class="form-group"> <label for="note-content">Content</label> <textarea id="note-content" placeholder="Write your note here... Include dates like 'Tomorrow' for reminders!" rows="5" required></textarea> </div> <div class="form-group row"> <div class="flex-1"> <label for="note-tags">Tags (space separated)</label> <input type="text" id="note-tags" placeholder="work ideas personal" /> </div> </div> <div class="form-group"> <label for="note-file">Attachment</label> <div class="file-upload-wrapper"> <input type="file" id="note-file" multiple /> <span id="file-status" class="file-status">No files chosen</span> </div> <div id="new-files-list" class="new-files-list"></div> <div id="edit-files-list" class="edit-files-list"></div> </div> <div class="modal-actions"> <button type="button" id="btn-cancel" class="secondary-btn">Cancel</button> <button type="submit" class="primary-btn">Save Note</button> </div> </form> </div> </div> </div> <script type="module" src="./main.js"></script> </body> </html>