From 81151ec4a61b4314892776132f26cd7a2b76018d Mon Sep 17 00:00:00 2001
From: Fedorov Vladimir <vladimir.fodorow@gmail.com>
Date: Tue, 31 Mar 2026 14:55:32 +0700
Subject: [PATCH] update design

---
 src/assets/base.css             |  2 +-
 src/components/SchedulePage.vue | 19 +++++++++++++++----
 src/components/date.ts          | 30 ++++++++++++++++++------------
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 9b09752..80077ae 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -61,7 +61,7 @@
 body {
   min-height: 100vh;
   color: var(--color-text);
-  background: #eee;
+  background: #ccc;
   transition:
     color 0.5s,
     background-color 0.5s;
diff --git a/src/components/SchedulePage.vue b/src/components/SchedulePage.vue
index a621d21..a77caa0 100644
--- a/src/components/SchedulePage.vue
+++ b/src/components/SchedulePage.vue
@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { apiGetDays } from './client';
 import type { Schedule } from './models';
-import { formatRussianDate, formatTime, getRelativeDayName, timeAgo, formatTimeRange } from './date';
+import { formatRussianDate, cleanTime, getRelativeDayName, timeAgo, formatTimeRange } from './date';
 import { capitalizeFirstLetter } from './text';
 
 const schedule = ref<Schedule>({ updateTime: "", days: [] })
@@ -17,12 +17,13 @@ onMounted(async () => {
   <div>
     <div v-for="day in schedule.days" :key="day.date" class="day-block">
       {{ capitalizeFirstLetter(formatRussianDate(day.date)) }}
-      <span v-if="getRelativeDayName(day.date) !== ''">({{ getRelativeDayName(day.date) }})</span>
+      <span v-if="getRelativeDayName(day.date) !== ''" class="relative-day-name">{{ getRelativeDayName(day.date)
+        }}</span>
       <div v-for="(performance, index) in day.performances" :key="performance.name" class="performance-block">
         <hr v-if="index > 0" class="hr">
         <div v-if="performance.timeCollection !== '' && performance.timeCollection !== '-'"
           class="time-collection-block">
-          Сбор: {{ formatTime(performance.timeCollection) }}
+          Сбор: {{ cleanTime(performance.timeCollection) }}
         </div>
         <div>
           Время:
@@ -55,16 +56,18 @@ onMounted(async () => {
 
 <style scoped>
 .day-block {
-  border: solid 2px #000058;
   margin: 10px 0;
   padding: 15px;
   border-radius: 10px;
   font-weight: 700;
+  background-color: #fff;
 }
 
 .time-collection-block {
   font-size: 20px;
   font-weight: 700;
+  line-height: 25px;
+  margin: 3px 0;
 }
 
 .place-block {
@@ -84,4 +87,12 @@ onMounted(async () => {
 .hr {
   margin: 5px;
 }
+
+.relative-day-name {
+  background-color: #70e5ff;
+  padding: 3px 10px 6px 10px;
+  border-radius: 15px;
+  float: right;
+  font-weight: 600;
+}
 </style>
diff --git a/src/components/date.ts b/src/components/date.ts
index 67246e5..82531d5 100644
--- a/src/components/date.ts
+++ b/src/components/date.ts
@@ -149,18 +149,6 @@ export function timeAgo(goDateStr: string): string {
   });
 }
 
-export function formatTime(timeStr: string): string {
-  if (!timeStr) {
-    return "";
-  }
-
-  return timeStr
-    // 1. Убираем абсолютно все пробелы (включая табы и неразрывные пробелы)
-    .replace(/\s+/g, "")
-    // 2. Заменяем все точки на двоеточия
-    .replace(/\./g, ":");
-}
-
 export function formatTimeRange(text: string): string {
   if (!text) {
     return "";
@@ -185,3 +173,21 @@ export function formatTimeRange(text: string): string {
     .trim();
 }
 
+
+export function cleanTime(text: string): string {
+  if (!text) return text;
+
+  // Ищем шаблон: 1-2 цифры, затем [двоеточие или точка] с возможными пробелами, затем 2 цифры
+  const match = text.match(/\d{1,2}\s*[:.]\s*\d{2}/);
+
+  if (match) {
+    // Берем найденный кусок (например, "8. 00")
+    const extractedTime = match[0];
+
+    // Удаляем все пробелы и заменяем точку на двоеточие
+    return extractedTime.replace(/\s+/g, '').replace('.', ':');
+  }
+
+  // Если время не найдено, возвращаем исходный текст
+  return text;
+}