feature: added end of the day

src/index.css

@@ -91,6 +91,12 @@ H1 {
   margin: 20px 0;
 }
 
+.next-break.secondary {
+  font-size: 1.1em;
+  margin-top: 0;
+  color: #b9c8d6;
+}
+
 .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,7 @@
     <div class="vblock">
       <div class="hblock">
         <div class="next-break jetbrains-mono" id="nextBreak"></div>
+        <div class="next-break secondary jetbrains-mono" id="endOfDay"></div>
       </div>
     </div>
 
@@ -34,6 +35,6 @@
     </div>
   </div>
 
-  <script src="worktime/index.js"></script>
+  <script src="index.js"></script>
 </body>
 </html>

src/index.js

@@ -14,7 +14,10 @@ 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";
+
+let clockEl, dateEl, nextBreakEl, endOfDayEl;
 let breakNodes = [];
 let lastDayKey = "";
 
@@ -47,6 +50,15 @@ 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 getEndOfDayMs(now) {
+  return breakMsForToday(getWorkDayEndForToday(now), now);
+}
+
 function formatDuration(ms) {
   const totalSeconds = Math.floor(ms / 1000);
   const h = Math.floor(totalSeconds / 3600);
@@ -250,6 +262,11 @@ function updateNextBreak() {
     nextBreakEl.textContent = "Перерывов больше нет";
   }
 
+  const endOfDayMs = getEndOfDayMs(now);
+  const timeUntilEndOfDay = Math.max(0, endOfDayMs - now.getTime());
+  endOfDayEl.textContent =
+    "До конца работы · " + formatDuration(timeUntilEndOfDay);
+
   scheduleNextBreakTick();
 }
 
@@ -274,6 +291,7 @@ function init() {
   clockEl = document.getElementById("currentTime");
   dateEl = document.getElementById("currentDate");
   nextBreakEl = document.getElementById("nextBreak");
+  endOfDayEl = document.getElementById("endOfDay");
 
   buildBreakBlocks();
   buildCalendar();
@@ -288,4 +306,16 @@ function init() {
   setInterval(checkDayChange, 60000);
 }
 
-init();
+if (typeof document !== "undefined") {
+  init();
+}
+
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = {
+    getBreaksForToday,
+    getWorkDayEndForToday,
+    getEndOfDayMs,
+    breakTimeToMinutes,
+    formatDuration,
+  };
+}