Embed

<div id="lsrl-schedule">
  <div class="lsrl-head">
    <p class="lsrl-kicker">LOVE SOUL RADIO LONDON</p>
    <h2>WEEKLY SCHEDULE</h2>
    <p>Soul • Funk • Boogie • Disco • Reggae</p>
    <small>All times UK &nbsp; • &nbsp; <span class="live-dot"></span> LIVE</small>
    <div class="uk-clock">
      <span>UK TIME</span><strong>--:--:--</strong>
    </div>
  </div>

  <div class="on-air" aria-live="polite">
    <div class="on-air-label">
      <span class="pulse-dot"></span> ON AIR NOW
    </div>
    <div class="on-air-details">
      <strong>Loading schedule…</strong>
    </div>
  </div>

  <div class="day-tabs" role="tablist" aria-label="Choose a day"></div>
  <div class="day-title" aria-live="polite"></div>
  <div class="show-list"></div>
</div>

<style>
#lsrl-schedule {
  --blue:#0878d1;
  --navy:#07182b;
  --ink:#102033;
  --pale:#eef6fc;
  max-width:980px;
  margin:auto;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  border:1px solid #dbe7f0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 38px rgba(7,24,43,.12);
}

#lsrl-schedule * {
  box-sizing:border-box;
}

.lsrl-head {
  padding:30px 24px;
  text-align:center;
  color:#fff;
  background:linear-gradient(135deg,var(--navy),#063e71 65%,var(--blue));
}

.lsrl-head h2 {
  margin:5px 0 8px;
  font-size:clamp(27px,5vw,44px);
  letter-spacing:.05em;
}

.lsrl-head p {
  margin:5px 0;
}

.lsrl-kicker {
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
}

.live-dot {
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:3px;
  border-radius:50%;
  background:#ed1c24;
  box-shadow:0 0 0 3px rgba(237,28,36,.2);
}

.uk-clock {
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:9px;
  margin:18px auto 0;
  padding:8px 14px;
  width:max-content;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(0,0,0,.2);
}

.uk-clock span {
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}

.uk-clock strong {
  font-size:19px;
  letter-spacing:.06em;
}

.on-air {
  display:flex;
  align-items:center;
  gap:20px;
  padding:17px 24px;
  color:#fff;
  background:#07111e;
  border-bottom:3px solid #ed1c24;
}

.on-air-label {
  white-space:nowrap;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  color:#ff5b62;
}

.on-air-details strong {
  font-size:17px;
}

.on-air-details span {
  color:#b9c9d8;
}

.pulse-dot {
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:7px;
  border-radius:50%;
  background:#ed1c24;
  animation:lsrlPulse 1.4s infinite;
}

@keyframes lsrlPulse {
  0%,100% {
    box-shadow:0 0 0 0 rgba(237,28,36,.65);
  }

  50% {
    box-shadow:0 0 0 8px rgba(237,28,36,0);
  }
}

.day-tabs {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  background:var(--navy);
  padding:7px;
  gap:5px;
}

.day-tab {
  border:0;
  border-radius:8px;
  padding:13px 5px;
  color:#fff;
  background:transparent;
  font-weight:800;
  cursor:pointer;
  transition:.2s;
}

.day-tab:hover,
.day-tab:focus-visible {
  background:#163b61;
  outline:none;
}

.day-tab.active {
  color:var(--navy);
  background:#fff;
}

.day-title {
  padding:23px 24px 13px;
  font-size:24px;
  font-weight:900;
  color:var(--navy);
}

.show-list {
  padding:0 18px 24px;
}

.show {
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:18px;
  align-items:center;
  padding:18px 12px;
  border-top:1px solid #dbe7f0;
}

.show-time {
  font-size:21px;
  font-weight:900;
  color:var(--blue);
}

.show-name {
  font-size:18px;
  font-weight:900;
  color:var(--navy);
}

.show-title {
  margin-top:4px;
  color:#526577;
}

.show-note {
  margin-top:6px;
  font-size:12px;
  font-weight:800;
  color:#7d4594;
  text-transform:uppercase;
}

.live-badge {
  white-space:nowrap;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:900;
  color:#b20f18;
  background:#ffe8e9;
}

.show.now {
  position:relative;
  margin:7px 0;
  border:2px solid var(--blue);
  border-radius:12px;
  background:#eaf6ff;
  box-shadow:0 6px 20px rgba(8,120,209,.16);
}

.show.now::before {
  content:'NOW PLAYING';
  position:absolute;
  right:10px;
  top:-10px;
  padding:4px 8px;
  border-radius:999px;
  color:#fff;
  background:var(--blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
}

.show.now.is-live {
  border-color:#ed1c24;
  background:#fff0f1;
  box-shadow:0 6px 20px rgba(237,28,36,.16);
}

.show.now.is-live::before {
  content:'LIVE NOW';
  background:#ed1c24;
}

@media (max-width:700px) {
  .day-tabs {
    grid-template-columns:repeat(4,1fr);
  }

  .day-tab:last-child {
    grid-column:auto;
  }

  .show {
    grid-template-columns:68px 1fr;
    gap:11px;
  }

  .show-time {
    font-size:17px;
  }

  .show-name {
    font-size:16px;
  }

  .live-badge {
    grid-column:2;
    justify-self:start;
  }

  .lsrl-head {
    padding:25px 15px;
  }

  .show-list {
    padding:0 10px 18px;
  }

  .on-air {
    display:block;
    padding:15px;
  }

  .on-air-details {
    margin-top:8px;
  }

  .show.now::before {
    right:6px;
  }
}
</style>

<script>
(() => {
  const schedule = {
    Monday: [
      ['00:00','Heddi','JAZZ nOT JAZZ'],
      ['01:00','Colin Curtis','Jazz Dance Fusion'],
      ['04:00','Hugh Williams','Souled Out Show'],
      ['06:00',"Kevin O'Brien",'Early Early Morning Soulcial',true],
      ['08:00','Tony Peters','Breakfast Show',true],
      ['10:00','Terry Peters',"Soul Surfin'",true],
      ['12:00','Glitterbox','Glitterbox Radio Show'],
      ['14:00','Craig Thomas','Soul Searching',true],
      ['16:00','Ady Crampton','Soul Sessions with Interview'],
      ['18:00','Jim Forbes','Mix & Match Show',true],
      ['20:00','Gary Raven','Soul Kitchen',true],
      ['22:00','Mac',"Mac's Soul Cafe"]
    ],

    Tuesday: [
      ['00:00','Andy Tee','UK Soul Chart Breakers'],
      ['01:00',"K'La Shawn",'R&B Juke Joint'],
      ['03:00','LSRL','Monday Overnight Soulful Jukebox'],
      ['06:00',"Kevin O'Brien",'Early Early Morning Soulcial',true],
      ['08:00','Miss Behaving','Wakey Wakey Breakfast Show',true],
      ['10:00','Lance Beadle','The Function'],
      ['12:00','Will Downing','Wind Down Radio Show'],
      ['13:00','Angie Brown','My House Radio Show'],
      ['14:00','Dave Cummings','Northern Soul Floor Fillers'],
      ['16:00','Marcus Hayes','The Soul Show',false,'4th Tuesday: DJ Denzil — Crate Diggers Club'],
      ['18:00','LSRL','Time Machine'],
      ['20:00','Lee Richardson','Soul Blend',true],
      ['22:00','Nick Davies','Boogie Wonderland Show']
    ],

    Wednesday: [
      ['00:00','Lisa London','Inside The Quiet Storm'],
      ['03:00','LSRL','Tuesday Overnight Soulful Jukebox'],
      ['06:00',"Kevin O'Brien",'Early Early Morning Soulcial',true],
      ['08:00','Miss Behaving','Wakey Wakey Breakfast Show',true],
      ['10:00','Alan Barnes','Soul Symphony',true],
      ['12:00','Cliff James','UK Soul Chart'],
      ['14:00','Doug Hall','The Motown Show'],
      ['16:00','Steve Teasdale','The House Music Express'],
      ['18:00','Marquis Anthony','Simply Soul Sessions',true],
      ['20:00','Chris Medhurst','Wednesday Wiggle',true,'1st Wednesday: Elle Cee & Kingpin — Soulful Soiree — LIVE'],
      ['22:00','Gary Prescott','Just Good Nu Soul']
    ],

    Thursday: [
      ['00:00','Brett Costello','Urban Meltdown'],
      ['02:00','Chris Guscott','Magic Carpet Ride',false,'Repeat'],
      ['04:00','LSRL','Wednesday Overnight Soulful Jukebox'],
      ['06:00',"Kevin O'Brien",'Early Early Morning Soulcial',true],
      ['08:00','Jerry Belcher','The Breakfast Show',true],
      ['10:00','Mick Fuller','SoulShyne'],
      ['12:00','Tony Peters','The Soul Cellar',true],
      ['14:00','Kevin Sowerby','Voices From The Shadows',true],
      ['16:00','Mark Davies','Soul Boys Radio Show',true],
      ['18:00','Claudette Woods','Simply Soul'],
      ['20:00','Anthony Angell','Essential House'],
      ['22:00','Chris Guscott','Magic Carpet Ride',true]
    ],

    Friday: [
      ['00:00','Steve James','Blues Cafe'],
      ['01:00','Mike Winn','Real Enjoyment Jazz'],
      ['02:00','Tony Hall','Memory Lane'],
      ['04:00','LSRL','Thursday Overnight Soulful Jukebox'],
      ['08:00','Miss Behaving','Wakey Wakey Breakfast Show',true],
      ['10:00','Neil Greaves','Philly Friday'],
      ['12:00','Terry Peters',"Soul Surfin'",true],
      ['14:00','Jazzy Lady','Good Vibrations Show',true],
      ['16:00','Dave Ellis','Soul Towers'],
      ['18:00','Donny Watson','Friday Floor Fillers',true],
      ['20:00',"Bernie O'Brien",'Groove Connection',true],
      ['22:00','Stephen Howie','Grooveline']
    ],

    Saturday: [
      ['00:00','Wayne C McDonald','Sugar Radio Show'],
      ['02:00','Al Seaforth','Jazz & Soul Show'],
      ['04:00','Dave Cummings','Northern Soul Floor Fillers',false,'Repeat'],
      ['06:00','LSRL','Overnight Soulful Jukebox'],
      ['08:00','DJ Allan','Saturday Breakfast Show',true],
      ['10:00','Rodney Brown','The Soul Lounge',true],
      ['12:00','Stephen Howie','Grooveline',true],
      ['14:00','David Southway','Soul Vaults'],
      ['16:00','Terry Peters','The Dynamic Pressure Sound Reggae Show',true],
      ['18:00','Tony G','Soul Fiesta',true],
      ['20:00','Peter Browes','DiscoMania',true],
      ['22:00','Nita Funk','Nita Funk'],
      ['23:00','Ken@Work','The Workshop']
    ],

    Sunday: [
      ['00:00','Terri B','Housecrunch Radio Show'],
      ['01:00','Elle Cee & Kingpin','Soulful Soiree',false,'Repeat'],
      ['03:00','Pat Gwinn','Soul Vaults'],
      ['05:00','LSRL','Saturday Night Overnight Jukebox'],
      ['07:00','Chris Goldfinger','Soul Serenade'],
      ['09:00','Paul Gilhooley','Soul At Energy Show'],
      ['11:00','Woodsy & Greavesie','Naked Sunday',true],
      ['13:00','Chris Lawrence','Recipe For Soul',true],
      ['15:00','Jerry Belcher','The Soul In One Show',true],
      ['17:00','Neil Greaves','Big Box Of Chocolates'],
      ['19:00','PJ','Soul Intimacy',true],
      ['21:00','Lee Highcazony','Soul Fever',true],
      ['23:00','Heddi','JAZZ nOT JAZZ']
    ]
  };

  const root = document.getElementById('lsrl-schedule');
  if (!root) return;

  const tabs = root.querySelector('.day-tabs');
  const list = root.querySelector('.show-list');
  const heading = root.querySelector('.day-title');
  const clock = root.querySelector('.uk-clock strong');
  const onAir = root.querySelector('.on-air-details');
  const days = Object.keys(schedule);

  let selectedDay;
  let lastLiveKey = '';

  function ukNow() {
    const parts = new Intl.DateTimeFormat('en-GB', {
      timeZone:'Europe/London',
      weekday:'long',
      hour:'2-digit',
      minute:'2-digit',
      second:'2-digit',
      hourCycle:'h23'
    }).formatToParts(new Date());

    return Object.fromEntries(
      parts.map(part => [part.type,part.value])
    );
  }

  function currentShow(day, hour, minute) {
    const shows = schedule[day];
    const nowMinutes = Number(hour) * 60 + Number(minute);
    let index = 0;

    shows.forEach((show, i) => {
      const [h,m] = show[0].split(':').map(Number);

      if (h * 60 + m <= nowMinutes) {
        index = i;
      }
    });

    return {
      show:shows[index],
      index
    };
  }

  function render(day) {
    selectedDay = day;

    const now = ukNow();
    const active = currentShow(now.weekday,now.hour,now.minute);

    heading.textContent = day.toUpperCase();

    list.innerHTML = schedule[day].map((show,index) => `
      <article class="show ${
        day === now.weekday && index === active.index
          ? `now ${show[3] ? 'is-live' : ''}`
          : ''
      }">
        <div class="show-time">${show[0]}</div>

        <div>
          <div class="show-name">${show[1]}</div>
          <div class="show-title">${show[2]}</div>
          ${show[4] ? `<div class="show-note">${show[4]}</div>` : ''}
        </div>

        ${
          show[3]
            ? '<div class="live-badge"><span class="live-dot"></span> LIVE</div>'
            : ''
        }
      </article>
    `).join('');

    [...tabs.children].forEach(button => {
      const activeTab = button.dataset.day === day;
      button.classList.toggle('active',activeTab);
      button.setAttribute('aria-selected',activeTab);
    });
  }

  days.forEach(day => {
    const button = document.createElement('button');

    button.className = 'day-tab';
    button.type = 'button';
    button.dataset.day = day;
    button.textContent = day.slice(0,3).toUpperCase();
    button.setAttribute('role','tab');

    button.addEventListener('click',() => render(day));
    tabs.appendChild(button);
  });

  const ukDay = new Intl.DateTimeFormat('en-GB', {
    weekday:'long',
    timeZone:'Europe/London'
  }).format(new Date());

  render(schedule[ukDay] ? ukDay : 'Monday');

  function updateLiveStatus() {
    const now = ukNow();

    clock.textContent = `${now.hour}:${now.minute}:${now.second}`;

    const active = currentShow(
      now.weekday,
      now.hour,
      now.minute
    ).show;

    onAir.innerHTML = `
      <strong>${active[1]} — ${active[2]}</strong>
      <span>
        • from ${active[0]}${active[3] ? ' • LIVE' : ''}
      </span>
    `;

    const liveKey = `${now.weekday}-${active[0]}`;

    if (
      selectedDay === now.weekday &&
      liveKey !== lastLiveKey
    ) {
      render(selectedDay);
    }

    lastLiveKey = liveKey;
  }

  updateLiveStatus();
  setInterval(updateLiveStatus,1000);
})();
</script>

Love Soul Radio London