שעות פתיחה

הסטטוס מחושב לפי אזור הזמן Asia/Jerusalem דרך Intl, ולא לפי השעון של הגולש — אחרת מי שגולש מחו״ל או עם שעון מוגדר שגוי רואה "סגור" בשעת פעילות. Intl גם מטפל במעבר שעון הקיץ בלי טבלה ידנית. הימים נספרים בשיטה הישראלית, כשראשון הוא היום הראשון. שעות פתיחה הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · עסק מקומי · שירות · בלי ספריות

<!-- שעות פתיחה — ערכו את data-hours, ריק פירושו סגור -->
<style>
  .klix-hours b { display: block; font-weight: 700 }
  .klix-hours b[data-open="1"] { color: #34d399 }
  .klix-hours b[data-open="0"] { color: #fb7185 }
  .klix-hours b small { font-weight: 400; color: #94a3b8 }
  .klix-hours ul { margin: .75rem 0 0; padding: 0; list-style: none; font-size: .9rem;
    min-width: 14rem }
  .klix-hours li { display: flex; justify-content: space-between; gap: 1rem; color: #94a3b8 }
  .klix-hours li[data-today="1"] { color: #e2e8f0; font-weight: 700 }
</style>

<div class="klix-hours" id="klix-hours"
     data-hours="09:00-17:00,09:00-17:00,09:00-17:00,09:00-17:00,09:00-17:00,09:00-13:00,">
  <b></b>
  <ul></ul>
</div>

<script>
(function () {
  var box = document.getElementById('klix-hours');
  if (!box) return;

  var DAYS = ['ראשון', 'שני', 'שלישי', 'רביעי', 'חמישי', 'שישי', 'שבת'];
  var week = (box.getAttribute('data-hours') || '').split(',');

  // קוראים את השעה בישראל ולא בשעון המקומי של הגולש. Intl מטפל גם בשעון קיץ
  function nowInIsrael() {
    var f = new Intl.DateTimeFormat('en-GB', {
      timeZone: 'Asia/Jerusalem', weekday: 'short',
      hour: '2-digit', minute: '2-digit', hour12: false
    });
    var parts = {};
    f.formatToParts(new Date()).forEach(function (p) { parts[p.type] = p.value; });
    var order = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    return { day: order.indexOf(parts.weekday), minutes: +parts.hour * 60 + +parts.minute };
  }

  function toMinutes(s) {
    var p = s.split(':');
    return (+p[0]) * 60 + (+p[1]);
  }

  function render() {
    var now = nowInIsrael();
    var today = (week[now.day] || '').trim();
    var open = false, note = 'היום סגור';

    if (today) {
      var range = today.split('-');
      var from = toMinutes(range[0]), to = toMinutes(range[1]);
      if (now.minutes < from) note = 'נפתח ב-' + range[0];
      else if (now.minutes >= to) note = 'נסגר להיום';
      else { open = true; note = 'עד ' + range[1]; }
    }

    var status = box.querySelector('b');
    status.setAttribute('data-open', open ? '1' : '0');
    status.innerHTML = (open ? '● פתוח עכשיו' : '● סגור') + ' <small>· ' + note + '</small>';

    var list = box.querySelector('ul');
    list.innerHTML = '';
    DAYS.forEach(function (name, i) {
      var li = document.createElement('li');
      if (i === now.day) li.setAttribute('data-today', '1');
      li.innerHTML = '<span>' + name + '</span><span>' + ((week[i] || '').trim() || 'סגור') + '</span>';
      list.appendChild(li);
    });
  }

  render();
  setInterval(render, 60000);
})();
</script>