From 8360516e25768e6d385af1d4fbabd5a0485eef5c Mon Sep 17 00:00:00 2001 From: Almas Date: Mon, 17 Aug 2026 11:49:15 +0000 Subject: [PATCH] =?UTF-8?q?=D0=95=D0=B6=D0=B5=D0=B4=D0=BD=D0=B5=D0=B2?= =?UTF-8?q?=D0=BD=D1=8B=D0=B9=20=D0=BF=D0=BB=D0=B0=D0=BD=D0=B5=D1=80=20?= =?UTF-8?q?=D1=81=20=D0=BF=D0=BE=D1=81=D1=83=D1=82=D0=BE=D1=87=D0=BD=D1=8B?= =?UTF-8?q?=D0=BC=20=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=BE?= =?UTF-8?q?=D0=BC=20=D0=B8=20=D0=BA=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D0=B0=D1=80=D0=B8=D1=8F=D0=BC=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1802 +++++++++++++++++++++++++++++++--------------------- 1 file changed, 1093 insertions(+), 709 deletions(-) diff --git a/index.html b/index.html index e201394..08813cd 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Ты хозяин своих привычек + Планер @@ -17,11 +17,11 @@ --text-secondary: #D9C4A8; --text-muted: #A68B6F; --accent1: #E8B598; - --accent2: #D4A574; - --accent3: #C08B65; - --accent4: #A67B5B; - --accent5: #8B6F4E; - --accent6: #F7EDE2; + --accent2: #F7EDE2; + --accent3: #D4A574; + --accent4: #C08B65; + --accent5: #A67B5B; + --accent6: #8B6F4E; --success: #B5A47A; --shadow: 0 4px 20px rgba(44, 24, 16, 0.5); } @@ -43,155 +43,254 @@ } .container { - max-width: 1400px; + max-width: 1200px; margin: 0 auto; - display: grid; - grid-template-columns: 320px 1fr 280px; - gap: 24px; } - /* Header */ + /* Header Navigation */ .header { - grid-column: 1 / -1; - display: flex; - justify-content: space-between; - align-items: flex-end; - padding-bottom: 20px; - border-bottom: 1px solid var(--bg-border); + text-align: center; margin-bottom: 24px; } - .header h1 { - font-size: 42px; - color: var(--accent1); - font-style: italic; - } - - .header-date { - color: var(--text-secondary); - font-size: 16px; - margin-top: 4px; - cursor: pointer; - } - - .header-date:hover { color: var(--accent1); } - - .month-selector { + .date-navigator { display: flex; - gap: 4px; - flex-wrap: wrap; - justify-content: flex-end; + align-items: center; + justify-content: center; + gap: 16px; + margin-bottom: 16px; } - .month-btn { - background: transparent; + .nav-btn { + background: var(--bg-card); border: 1px solid var(--bg-border); color: var(--text-secondary); - padding: 6px 12px; - border-radius: 6px; + width: 40px; + height: 40px; + border-radius: 8px; cursor: pointer; - font-size: 13px; - transition: all 0.2s ease-out; + font-size: 18px; + transition: all 0.2s; } - .month-btn:hover { + .nav-btn:hover { background: var(--bg-hover); color: var(--text-main); } - .month-btn.active { + .current-date { + font-size: 24px; + color: var(--text-main); + cursor: pointer; + padding: 8px 16px; + border-radius: 8px; + transition: background 0.2s; + } + + .current-date:hover { + background: var(--bg-card); + } + + .today-btn { + background: var(--accent1); + border: none; + color: var(--bg-main); + padding: 8px 16px; + border-radius: 8px; + cursor: pointer; + font-weight: 600; + font-size: 14px; + transition: all 0.2s; + } + + .today-btn:hover { + opacity: 0.9; + transform: scale(1.02); + } + + .view-toggle { + display: flex; + justify-content: center; + gap: 8px; + margin-bottom: 16px; + } + + .view-btn { + background: transparent; + border: 1px solid var(--bg-border); + color: var(--text-secondary); + padding: 8px 16px; + border-radius: 6px; + cursor: pointer; + font-size: 14px; + transition: all 0.2s; + } + + .view-btn.active { background: var(--accent1); border-color: var(--accent1); color: var(--bg-main); - font-weight: 600; } - /* Cards */ - .card { + .title { + font-size: 36px; + color: var(--accent1); + font-style: italic; + margin-bottom: 8px; + } + + .subtitle { + color: var(--text-secondary); + font-size: 16px; + } + + /* Main Layout */ + .main-layout { + display: grid; + grid-template-columns: 1fr 280px; + gap: 24px; + } + + /* Task Sections */ + .task-section { background: var(--bg-card); border-radius: 12px; padding: 20px; - box-shadow: var(--shadow); - border: 1px solid var(--bg-border); - } - - .card-title { - font-size: 18px; - color: var(--text-secondary); - margin-bottom: 16px; - text-transform: uppercase; - letter-spacing: 1px; - font-size: 13px; - } - - /* Schedule Section */ - .schedule-section { margin-bottom: 20px; + border-left: 4px solid; + box-shadow: var(--shadow); } - .schedule-title { - font-size: 16px; - color: var(--accent1); - margin-bottom: 12px; + .task-section.morning { border-color: var(--accent2); } + .task-section.day { border-color: var(--accent3); } + .task-section.evening { border-color: var(--accent4); } + + .section-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; + font-size: 18px; font-style: italic; } + .morning .section-header { color: var(--accent2); } + .day .section-header { color: var(--accent3); } + .evening .section-header { color: var(--accent4); } + .task-list { list-style: none; } .task-item { display: flex; - align-items: center; - gap: 8px; - padding: 8px 10px; - border-radius: 6px; - margin-bottom: 6px; + align-items: flex-start; + gap: 12px; + padding: 12px; + border-radius: 8px; + margin-bottom: 8px; transition: background 0.2s; + position: relative; } .task-item:hover { background: var(--bg-hover); } - .task-text { - flex: 1; - font-size: 14px; - border: none; - background: transparent; - color: var(--text-main); - padding: 4px; + .task-checkbox { + width: 22px; + height: 22px; + border: 2px solid var(--bg-border); border-radius: 4px; + cursor: pointer; + transition: all 0.2s; + flex-shrink: 0; + margin-top: 2px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; } - .task-text:focus { - outline: none; + .task-checkbox:hover { + transform: scale(1.1); + border-color: var(--accent1); + } + + .task-checkbox.checked { + background: var(--accent1); + border-color: var(--accent1); + } + + .task-checkbox.checked::after { + content: '✓'; + color: var(--bg-main); + font-weight: bold; + font-size: 14px; + } + + .task-content { + flex: 1; + min-width: 0; + } + + .task-title { + font-size: 16px; + color: var(--text-main); + border: none; + background: transparent; + padding: 2px 4px; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s; + } + + .task-title:hover { background: rgba(255,255,255,0.05); } - .task-delete { + .task-title.completed { + text-decoration: line-through; + opacity: 0.5; + } + + .task-time { + font-size: 12px; + color: var(--text-muted); + margin-left: 8px; + } + + .task-comment { + font-size: 13px; + color: var(--text-muted); + margin-top: 6px; + padding-left: 8px; + line-height: 1.4; + } + + .task-menu { opacity: 0; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; - padding: 0 4px; + padding: 4px; transition: all 0.2s; } - .task-item:hover .task-delete { opacity: 1; } - .task-delete:hover { color: var(--accent3); } + .task-item:hover .task-menu { opacity: 1; } + .task-menu:hover { color: var(--accent1); } .add-task-btn { width: 100%; - padding: 8px; + padding: 10px; background: transparent; border: 1px dashed var(--bg-border); color: var(--text-secondary); border-radius: 6px; cursor: pointer; - font-size: 13px; + font-size: 14px; transition: all 0.2s; } @@ -200,314 +299,76 @@ color: var(--accent1); } - /* Weeks Grid */ - .weeks-container { - display: flex; - flex-direction: column; - gap: 20px; + /* Week Overview */ + .week-overview { + background: var(--bg-card); + border-radius: 12px; + padding: 20px; + box-shadow: var(--shadow); + height: fit-content; } - .week-block { - border-radius: 10px; - overflow: hidden; - border: 1px solid var(--bg-border); - } - - .week-header { - padding: 12px 16px; - font-size: 14px; - font-weight: 600; + .week-title { + font-size: 16px; + color: var(--text-secondary); + margin-bottom: 16px; text-transform: uppercase; - letter-spacing: 1.5px; - } - - .week-1 .week-header { background: var(--accent1); color: var(--bg-main); } - .week-2 .week-header { background: var(--accent3); color: var(--bg-main); } - .week-3 .week-header { background: var(--accent5); color: var(--text-main); } - .week-4 .week-header { background: var(--accent2); color: var(--bg-main); } - - .week-days { - display: grid; - grid-template-columns: 1.5fr repeat(7, 1fr); - background: var(--bg-card); - border-bottom: 1px solid var(--bg-border); - } - - .week-days div { - padding: 10px 6px; - text-align: center; - font-size: 12px; - color: var(--text-secondary); - border-right: 1px solid var(--bg-border); - } - - .week-days div:first-child { - text-align: left; - padding-left: 12px; - border-left: none; - } - - .checkbox-grid { - background: var(--bg-card); - } - - .checkbox-row { - display: grid; - grid-template-columns: 1.5fr repeat(7, 1fr); - align-items: center; - } - - .checkbox-row:not(:last-child) { - border-bottom: 1px solid var(--bg-border); - } - - .checkbox-row .task-name { - padding: 12px; + letter-spacing: 1px; font-size: 13px; - color: var(--text-main); - border-right: 1px solid var(--bg-border); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } - .checkbox-cell { - display: flex; - justify-content: center; - align-items: center; - padding: 8px 0; - border-right: 1px solid var(--bg-border); - } - - .custom-checkbox { - width: 22px; - height: 22px; - border: 2px solid var(--bg-border); - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease-out; - display: flex; - align-items: center; - justify-content: center; - background: transparent; - } - - .custom-checkbox:hover { - transform: scale(1.1); - border-color: var(--accent1); - } - - .custom-checkbox.checked { - background: var(--accent1); - border-color: var(--accent1); - } - - .custom-checkbox.checked::after { - content: '✓'; - color: var(--bg-main); - font-weight: bold; - font-size: 14px; - } - - .week-2 .custom-checkbox.checked { background: var(--accent3); border-color: var(--accent3); } - .week-3 .custom-checkbox.checked { background: var(--accent5); border-color: var(--accent5); } - .week-4 .custom-checkbox.checked { background: var(--accent2); border-color: var(--accent2); } - - /* Bar Chart */ - .chart-block { - margin-top: 16px; - padding: 16px; - background: rgba(0,0,0,0.2); - border-radius: 8px; - } - - .bar-chart { - display: flex; - justify-content: space-between; - align-items: flex-end; - height: 100px; - gap: 8px; - padding: 0 8px; - } - - .bar-container { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - gap: 6px; - } - - .bar { + .week-table { width: 100%; - max-width: 40px; - border-radius: 4px 4px 0 0; - transition: height 0.3s ease-out; - min-height: 4px; + border-collapse: collapse; } - .bar-value { - font-size: 11px; - color: var(--text-secondary); - font-weight: 600; + .week-table td { + padding: 10px 8px; + border-bottom: 1px solid var(--bg-border); + cursor: pointer; + transition: background 0.2s; } - .bar-label { - font-size: 10px; + .week-table tr:hover td { + background: var(--bg-hover); + } + + .week-table .today { + background: var(--bg-hover); + } + + .week-day { + font-size: 12px; color: var(--text-muted); text-transform: uppercase; } + .week-date { + font-size: 14px; + color: var(--text-main); + font-weight: 500; + } + .week-progress { - margin-top: 12px; - display: flex; - align-items: center; - gap: 12px; - } - - .progress-bar-bg { - flex: 1; - height: 8px; - background: var(--bg-border); - border-radius: 4px; - overflow: hidden; - } - - .progress-bar-fill { - height: 100%; - border-radius: 4px; - transition: width 0.3s ease-out; - } - - .week-1 .progress-bar-fill { background: var(--accent1); } - .week-2 .progress-bar-fill { background: var(--accent3); } - .week-3 .progress-bar-fill { background: var(--accent5); } - .week-4 .progress-bar-fill { background: var(--accent2); } - - .progress-text { + text-align: right; font-size: 12px; color: var(--text-secondary); - min-width: 60px; - text-align: right; } - /* Progress Section */ - .progress-title { - font-size: 16px; - color: var(--accent1); - margin-bottom: 16px; - font-style: italic; - } - - .progress-count { - font-size: 28px; - color: var(--text-main); - font-weight: 600; - margin-bottom: 16px; - } - - .task-progress-list { - display: flex; - flex-direction: column; - gap: 10px; - margin-bottom: 20px; - } - - .task-progress-item { - display: flex; - align-items: center; - gap: 10px; - } - - .task-progress-name { - width: 140px; - font-size: 12px; + .week-total { + padding-top: 16px; + font-size: 13px; color: var(--text-secondary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .task-progress-bar-bg { - flex: 1; - height: 6px; - background: var(--bg-border); - border-radius: 3px; - overflow: hidden; - } - - .task-progress-bar-fill { - height: 100%; - background: linear-gradient(90deg, var(--accent3), var(--accent1)); - border-radius: 3px; - transition: width 0.3s ease-out; - } - - .task-progress-percent { - width: 35px; - font-size: 11px; - color: var(--text-muted); - text-align: right; - } - - .donut-container { - display: flex; - flex-direction: column; - align-items: center; - gap: 12px; - padding: 16px 0; - } - - .donut-chart { - width: 120px; - height: 120px; - border-radius: 50%; - background: conic-gradient(var(--accent1) 0deg 0deg, var(--bg-border) 0deg 360deg); - position: relative; - transition: background 0.3s ease-out; - } - - .donut-inner { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 80px; - height: 80px; - background: var(--bg-card); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 18px; - font-weight: 600; - color: var(--accent1); - } - - .donut-legend { - display: flex; - gap: 16px; - font-size: 11px; - color: var(--text-secondary); - } - - .legend-item { - display: flex; - align-items: center; - gap: 6px; - } - - .legend-color { - width: 10px; - height: 10px; - border-radius: 2px; + text-align: center; } /* Overall Progress */ .overall-progress { - margin-top: 20px; - padding-top: 20px; - border-top: 1px solid var(--bg-border); + margin-top: 24px; + padding: 20px; + background: var(--bg-card); + border-radius: 12px; + box-shadow: var(--shadow); } .overall-title { @@ -518,17 +379,22 @@ margin-bottom: 12px; } + .overall-stats { + display: flex; + align-items: baseline; + gap: 12px; + margin-bottom: 12px; + } + .overall-count { - font-size: 36px; + font-size: 28px; color: var(--accent1); font-weight: 600; - margin-bottom: 8px; } .overall-percent { font-size: 18px; color: var(--text-muted); - margin-bottom: 12px; } .overall-bar-bg { @@ -545,48 +411,321 @@ transition: width 0.3s ease-out; } - /* Responsive */ - @media (max-width: 1200px) { - .container { - grid-template-columns: 280px 1fr; - } - .progress-section { - grid-column: 1 / -1; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 24px; - } + /* Modal */ + .modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.7); + display: none; + align-items: center; + justify-content: center; + z-index: 1000; + padding: 20px; } + .modal-overlay.active { + display: flex; + } + + .modal { + background: var(--bg-card); + border-radius: 12px; + padding: 24px; + width: 100%; + max-width: 500px; + box-shadow: var(--shadow); + animation: modalFade 0.2s ease-out; + } + + @keyframes modalFade { + from { opacity: 0; transform: scale(0.96); } + to { opacity: 1; transform: scale(1); } + } + + .modal-title { + font-size: 22px; + color: var(--text-main); + margin-bottom: 20px; + } + + .form-group { + margin-bottom: 16px; + } + + .form-label { + display: block; + font-size: 14px; + color: var(--text-secondary); + margin-bottom: 8px; + } + + .form-input, .form-textarea, .form-select { + width: 100%; + padding: 10px 12px; + background: var(--bg-main); + border: 1px solid var(--bg-border); + border-radius: 6px; + color: var(--text-main); + font-size: 14px; + font-family: inherit; + } + + .form-input:focus, .form-textarea:focus, .form-select:focus { + outline: none; + border-color: var(--accent1); + } + + .form-textarea { + min-height: 80px; + resize: vertical; + } + + .radio-group { + display: flex; + flex-direction: column; + gap: 10px; + } + + .radio-option { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + } + + .radio-option input[type="radio"] { + accent-color: var(--accent1); + } + + .frequency-options { + margin-top: 10px; + padding-left: 24px; + } + + .modal-buttons { + display: flex; + gap: 12px; + justify-content: flex-end; + margin-top: 24px; + } + + .btn-primary { + background: var(--accent1); + border: none; + color: var(--bg-main); + padding: 10px 20px; + border-radius: 6px; + cursor: pointer; + font-weight: 600; + font-size: 14px; + transition: all 0.2s; + } + + .btn-primary:hover { + opacity: 0.9; + transform: scale(1.02); + } + + .btn-secondary { + background: transparent; + border: 1px solid var(--bg-border); + color: var(--text-secondary); + padding: 10px 20px; + border-radius: 6px; + cursor: pointer; + font-size: 14px; + transition: all 0.2s; + } + + .btn-secondary:hover { + background: var(--bg-hover); + color: var(--text-main); + } + + /* Calendar Modal */ + .calendar-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 4px; + margin-top: 16px; + } + + .calendar-day { + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + cursor: pointer; + font-size: 14px; + transition: all 0.2s; + background: var(--bg-main); + } + + .calendar-day:hover { + background: var(--bg-hover); + } + + .calendar-day.today { + border: 2px solid var(--accent1); + } + + .calendar-day.selected { + background: var(--accent1); + color: var(--bg-main); + } + + .calendar-day.has-tasks { + border: 1px solid var(--accent3); + } + + .calendar-day.full-complete { + background: var(--success); + color: var(--bg-main); + } + + .calendar-header { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 4px; + margin-bottom: 8px; + } + + .calendar-header div { + text-align: center; + font-size: 12px; + color: var(--text-muted); + text-transform: uppercase; + } + + /* Month View */ + .month-view { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 8px; + } + + .month-day { + aspect-ratio: 1; + background: var(--bg-card); + border-radius: 8px; + padding: 8px; + cursor: pointer; + transition: all 0.2s; + border: 1px solid var(--bg-border); + } + + .month-day:hover { + transform: scale(1.05); + border-color: var(--accent1); + } + + .month-day .date { + font-size: 14px; + font-weight: 600; + color: var(--text-main); + margin-bottom: 4px; + } + + .month-day .progress { + font-size: 11px; + color: var(--text-muted); + } + + .month-day.has-tasks { + border-color: var(--accent3); + } + + .month-day.full-complete { + background: var(--success); + } + + .month-day.full-complete .date, + .month-day.full-complete .progress { + color: var(--bg-main); + } + + /* Data buttons */ + .data-buttons { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + gap: 8px; + } + + .data-btn { + background: var(--bg-card); + border: 1px solid var(--bg-border); + color: var(--text-muted); + padding: 8px 12px; + border-radius: 6px; + cursor: pointer; + font-size: 12px; + transition: all 0.2s; + } + + .data-btn:hover { + color: var(--text-main); + border-color: var(--accent1); + } + + /* Dropdown menu */ + .dropdown { + position: absolute; + right: 0; + top: 100%; + background: var(--bg-card); + border: 1px solid var(--bg-border); + border-radius: 6px; + box-shadow: var(--shadow); + z-index: 100; + display: none; + min-width: 150px; + } + + .dropdown.active { + display: block; + } + + .dropdown-item { + padding: 8px 12px; + cursor: pointer; + font-size: 13px; + color: var(--text-secondary); + transition: background 0.2s; + } + + .dropdown-item:hover { + background: var(--bg-hover); + color: var(--text-main); + } + + .dropdown-item.danger { + color: var(--accent4); + } + + /* Responsive */ @media (max-width: 900px) { - .container { + .main-layout { grid-template-columns: 1fr; } - .schedule-section, .progress-section { - grid-column: 1; - } - .weeks-container { + .week-overview { overflow-x: auto; } - .week-days, .checkbox-row { - min-width: 600px; - } - .progress-section { - grid-template-columns: 1fr; - } } @media (max-width: 600px) { body { padding: 12px; } - .header { - flex-direction: column; - align-items: flex-start; - gap: 16px; - } - .header h1 { font-size: 28px; } - .month-selector { - justify-content: flex-start; + .date-navigator { + flex-wrap: wrap; + gap: 8px; } + .title { font-size: 24px; } + .current-date { font-size: 18px; } } @@ -594,387 +733,632 @@
-
-

Планер

-
15 декабря 2025
+
+ +
Понедельник, 15 декабря 2025
+ + +
+
+ +
-
- -
-

Расписание дня

- -
-

☀️ Утро

-
    - + +
    +

    Ты хозяин своих привычек

    +

    Выполнено 0 из 0 задач

    + +
    +
    +
    +

    ☀️ Утро

    +
      + +
      + +
      +

      ☕ День

      +
        + +
        + +
        +

        🌙 Вечер

        +
          + +
          +
          + +
          +

          Обзор недели

          +
          +
          +
          -
          -

          🌤 День

          -
            - -
            - -
            -

            🌙 Вечер

            -
              - +
              +

              Общий прогресс за месяц

              +
              +
              0 / 0
              +
              0%
              +
              +
              +
              +
              - -
              + + +
              - -
              -
              -

              Прогресс за месяц

              -
              0 / 0
              - -
              + +