feat:time to end of first shift is hidden

src/index.css

@@ -91,6 +91,16 @@ H1 {
   margin: 20px 0;
 }
 
+.next-break.secondary {
+  font-size: 1.1em;
+  margin-top: 0;
+  color: #b9c8d6;
+}
+
+.hidden {
+  display: none;
+}
+
 .time-block.break-current {
   border: 2px solid #d4a017;
   color: #d4a017;

src/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>w-timerer</title>
-  <link rel="stylesheet" type="text/css" href="worktime/index.css">
+  <link rel="stylesheet" type="text/css" href="index.css">
 </head>
 <body>
   <div class="parent">
@@ -23,6 +23,8 @@
     <div class="vblock">
       <div class="hblock">
         <div class="next-break jetbrains-mono" id="nextBreak"></div>
+        <div class="next-break secondary jetbrains-mono" id="shift1End"></div>
+        <div class="next-break secondary jetbrains-mono" id="endOfDay"></div>
       </div>
     </div>
 
@@ -34,6 +36,6 @@
     </div>
   </div>
 
-  <script src="worktime/index.js"></script>
+  <script src="index.js"></script>
 </body>
 </html>

src/index.js

@@ -14,7 +14,13 @@ const WEEKEND_BREAKS = [
   { start: "20:00", end: "20:15" },
 ];
 
-let clockEl, dateEl, nextBreakEl;
+const WEEKDAY_END_OF_DAY = "23:00";
+const WEEKEND_END_OF_DAY = "22:00";
+
+const WEEKDAY_SHIFT1_END = "15:00";
+const WEEKEND_SHIFT1_END = "15:30";
+
+let clockEl, dateEl, nextBreakEl, endOfDayEl, shift1EndEl;
 let breakNodes = [];
 let lastDayKey = "";
 
@@ -47,6 +53,24 @@ function getBreaksForToday(now) {
   return day === 0 || day === 6 ? WEEKEND_BREAKS : WEEKDAY_BREAKS;
 }
 
+function getWorkDayEndForToday(now) {
+  const day = now.getDay();
+  return day === 0 || day === 6 ? WEEKEND_END_OF_DAY : WEEKDAY_END_OF_DAY;
+}
+
+function getShift1EndForToday(now) {
+  const day = now.getDay();
+  return day === 0 || day === 6 ? WEEKEND_SHIFT1_END : WEEKDAY_SHIFT1_END;
+}
+
+function getEndOfDayMs(now) {
+  return breakMsForToday(getWorkDayEndForToday(now), now);
+}
+
+function getShift1EndMs(now) {
+  return breakMsForToday(getShift1EndForToday(now), now);
+}
+
 function formatDuration(ms) {
   const totalSeconds = Math.floor(ms / 1000);
   const h = Math.floor(totalSeconds / 3600);
@@ -250,6 +274,22 @@ function updateNextBreak() {
     nextBreakEl.textContent = "Перерывов больше нет";
   }
 
+  const endOfDayMs = getEndOfDayMs(now);
+  const timeUntilEndOfDay = Math.max(0, endOfDayMs - now.getTime());
+  endOfDayEl.textContent =
+    "До конца рабочего дня · " + formatDuration(timeUntilEndOfDay);
+
+  const shift1Ms = getShift1EndMs(now);
+  const timeUntilShift1End = Math.max(0, shift1Ms - now.getTime());
+  if (timeUntilShift1End === 0) {
+    shift1EndEl.classList.add("hidden");
+  } else {
+    shift1EndEl.classList.remove("hidden");
+    shift1EndEl.textContent =
+      "До конца смены 1 (" + getShift1EndForToday(now) + ") · " +
+      formatDuration(timeUntilShift1End);
+  }
+
   scheduleNextBreakTick();
 }
 
@@ -274,6 +314,8 @@ function init() {
   clockEl = document.getElementById("currentTime");
   dateEl = document.getElementById("currentDate");
   nextBreakEl = document.getElementById("nextBreak");
+  endOfDayEl = document.getElementById("endOfDay");
+  shift1EndEl = document.getElementById("shift1End");
 
   buildBreakBlocks();
   buildCalendar();
@@ -288,4 +330,18 @@ function init() {
   setInterval(checkDayChange, 60000);
 }
 
-init();
+if (typeof document !== "undefined") {
+  init();
+}
+
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = {
+    getBreaksForToday,
+    getWorkDayEndForToday,
+    getShift1EndForToday,
+    getEndOfDayMs,
+    getShift1EndMs,
+    breakTimeToMinutes,
+    formatDuration,
+  };
+}