Add event colors (Catppuccin Mocha) and read-only week view for users

Admins can now pick a color per event from a Catppuccin Mocha palette;
existing events default to blue. Colors flow through to both the admin
timeline and the new "Неделя" tab in the user view, which reuses the
admin's weekly grid in a read-only mode. Also reworks event blocks to
show a single-line "start–end title" so short events no longer overflow,
tidies the admin toolbar, and expands mobile responsiveness across both
frontends.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/admin/static/script.js

@@ -7,6 +7,28 @@ const START_HOUR = 8;
 const END_HOUR = 20;
 const PIXELS_PER_MINUTE = 0.8;
 
+const CATPPUCCIN_MOCHA = {
+    rosewater: '#f5e0dc',
+    flamingo: '#f2cdcd',
+    pink: '#f5c2e7',
+    mauve: '#cba6f7',
+    red: '#f38ba8',
+    maroon: '#eba0ac',
+    peach: '#fab387',
+    yellow: '#f9e2af',
+    green: '#a6e3a1',
+    teal: '#94e2d5',
+    sky: '#89dceb',
+    sapphire: '#74c7ec',
+    blue: '#89b4fa',
+    lavender: '#b4befe'
+};
+const DEFAULT_EVENT_COLOR = 'blue';
+
+function eventColorHex(colorKey) {
+    return CATPPUCCIN_MOCHA[colorKey] || CATPPUCCIN_MOCHA[DEFAULT_EVENT_COLOR];
+}
+
 let dragOffsetY = 0;
 let currentRangeStart = null;
 let scheduleItems = [];
@@ -60,6 +82,11 @@ function formatDayLabel(dateStr) {
     };
 }
 
+function timeToMinutes(time) {
+    const [hour, minute] = time.split(':').map(Number);
+    return hour * 60 + minute;
+}
+
 function calculateEndTime(startTime, durationMin) {
     const [hour, minute] = startTime.split(':').map(Number);
     const totalMinutes = hour * 60 + minute + durationMin;
@@ -68,11 +95,6 @@ function calculateEndTime(startTime, durationMin) {
     return `${String(endHour).padStart(2, '0')}:${String(endMinute).padStart(2, '0')}`;
 }
 
-function timeToMinutes(time) {
-    const [hour, minute] = time.split(':').map(Number);
-    return hour * 60 + minute;
-}
-
 function minutesToTime(totalMinutes) {
     const hour = Math.floor(totalMinutes / 60);
     const minute = totalMinutes % 60;
@@ -181,6 +203,7 @@ function renderEventBlock(event) {
     const startMinutes = timeToMinutes(event.start_time) - START_HOUR * 60;
     const top = Math.max(0, startMinutes * PIXELS_PER_MINUTE);
     const height = Math.max(42, event.duration_min * PIXELS_PER_MINUTE);
+    const colorHex = eventColorHex(event.color);
     const endTime = calculateEndTime(event.start_time, event.duration_min);
     return `
         <article
@@ -189,11 +212,12 @@ function renderEventBlock(event) {
             data-kind="event"
             data-id="${event.id}"
             data-date="${event.source_date || event.date}"
-            style="top:${top}px;height:${height}px;"
+            style="top:${top}px;height:${height}px;--event-color:${colorHex};"
         >
-            <div class="event-time">${event.start_time} - ${endTime}</div>
-            <div class="event-title">${escapeHtml(event.title)}</div>
-            <div class="meta-text" style="color: rgba(255,255,255,0.82);">${event.repeat_weekly ? 'Цикличное занятие' : 'Разовое занятие'}</div>
+            <div class="event-line">
+                <span class="event-time">${event.start_time}–${endTime}</span>
+                <span class="event-title">${escapeHtml(event.title)}</span>
+            </div>
             <div class="item-actions">
                 <button class="item-action edit" data-action="edit" data-kind="event" data-id="${event.id}" data-date="${event.source_date || event.date}">Изменить</button>
                 <button class="item-action delete" data-action="delete" data-kind="event" data-id="${event.id}" data-date="${event.source_date || event.date}">Удалить</button>
@@ -202,6 +226,38 @@ function renderEventBlock(event) {
     `;
 }
 
+function renderColorPicker(selectedColor) {
+    const current = selectedColor || DEFAULT_EVENT_COLOR;
+    const swatches = Object.entries(CATPPUCCIN_MOCHA).map(([key, hex]) => `
+        <button
+            type="button"
+            class="color-swatch ${key === current ? 'is-selected' : ''}"
+            data-color="${key}"
+            style="background:${hex};"
+            title="${key}"
+            aria-label="${key}"
+        ></button>
+    `).join('');
+    return `
+        <div class="form-group full">
+            <label>Цвет занятия</label>
+            <input type="hidden" id="event-color" value="${current}">
+            <div class="color-swatch-row">${swatches}</div>
+        </div>
+    `;
+}
+
+function bindColorPicker() {
+    const input = document.getElementById('event-color');
+    document.querySelectorAll('.color-swatch').forEach((swatch) => {
+        swatch.addEventListener('click', () => {
+            document.querySelectorAll('.color-swatch').forEach((el) => el.classList.remove('is-selected'));
+            swatch.classList.add('is-selected');
+            input.value = swatch.dataset.color;
+        });
+    });
+}
+
 function bindInteractiveHandlers() {
     document.removeEventListener('click', clearActiveItems);
     document.addEventListener('click', clearActiveItems);
@@ -450,6 +506,7 @@ function showEventModal(initial = {}, item = null) {
                     <label>Название</label>
                     <textarea id="event-title" required>${escapeHtml(initial.title || '')}</textarea>
                 </div>
+                ${renderColorPicker(initial.color)}
                 ${isEdit ? buildScopeSelector(item) : ''}
             </div>
             <div class="actions-row">
@@ -459,6 +516,7 @@ function showEventModal(initial = {}, item = null) {
         </form>
     `);
 
+    bindColorPicker();
     document.getElementById('cancel-event').addEventListener('click', closeModal);
     document.getElementById('event-form').addEventListener('submit', async (event) => {
         event.preventDefault();
@@ -467,7 +525,8 @@ function showEventModal(initial = {}, item = null) {
             start_time: document.getElementById('event-start-time').value,
             duration_min: Number(document.getElementById('event-duration').value),
             title: document.getElementById('event-title').value.trim(),
-            repeat_weekly: document.getElementById('event-repeat-weekly').checked
+            repeat_weekly: document.getElementById('event-repeat-weekly').checked,
+            color: document.getElementById('event-color').value
         };
 
         if (isEdit) {