jayla raye online: Blog Codes

✧ ─── ♱ ─── ✧

***feel free to use these codes on your own blog, but please do not redistribute them as your own!***

everything is fully customizable, so you can change the colors, fonts, and sizes to suit your own blog's theme. i'll update this page with new codes in the future, but there are some codes i don't plan on sharing.

'ask the goblet' and tape recorder widgets are from Sugar Kissed Letters
crystal cabinet widget is from Sugar Moon Blog
'jayla is...' status widget is from Diary of an Indigenous Diva
tarot card widget is from Hall of Tarot
pet game widget is from Gift Pet
microblog is from andi's archive

─── ✧ ───

01. Interactive Archive Calendar

HTML

A calendar that displays your blog's posts by month and year, with clickable links to each post.

THE CODE ● ● ●

<div class="calendar-container">
  <div class="calendar-header">
    <button class="nav-btn" id="prev-month" aria-label="Previous Month">«</button>
    <h4 id="month-year-display"></h4>
    <button class="nav-btn" id="next-month" aria-label="Next Month">»</button>
  </div>
  
  <div class="calendar-body">
    <div class="weekdays">
      <div>Su</div><div>Mo</div><div>Tu</div><div>We</div><div>Th</div><div>Fr</div><div>Sa</div>
    </div>
    <div class="days-grid" id="days-container"></div>
  </div>
</div>

<style>
  :root {
    --bg-dark: #1f111e;
    --bg-card: #473144;
    --border-purple: #785273;
    --border-bright: #ad78a8;
    --text-light: #fdfafc;
    --text-muted: #d8c0d2;
    --silver-accent: #f2e9f0;
    --purple-glow: #eaafe4;
    --red-accent: #d52c1f;
    --overlay-dark: #00000080;
  }

  .calendar-container {
    background: linear-gradient(145deg, var(--bg-card) 0%, #382435 60%, #2b1a29 100%);
    border: 1px solid var(--border-purple);
    padding: 16px;
    box-shadow: inset 0 0 20px var(--overlay-dark), 0 8px 20px #000000;
    width: 100%; 
    box-sizing: border-box; 
    font-family: 'Georgia', 'Garamond', 'Times New Roman', serif;
    color: var(--text-light); 
    overflow: visible !important; 
    position: relative;
  }

  .calendar-container::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid rgba(232, 165, 152, 0.15);
    border-radius: 5px;
    pointer-events: none;
  }

  .calendar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    border: 1px solid rgba(120, 82, 115, 0.4);
    position: relative;
    z-index: 2;
  }
  
  .calendar-header h4 { 
    margin: 0; 
    font-size: 0.7rem;
    color: var(--silver-accent); 
    font-style: italic;
    font-weight: bold;
    letter-spacing: 1px; 
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(213, 44, 31, 0.4);
    white-space: nowrap; 
  }

  .nav-btn {
    background: transparent; 
    border: none;
    color: var(--text-muted); 
    font-family: inherit; 
    font-size: 1.1rem; 
    padding: 2px 8px; 
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    opacity: 0.7;
  }

  .nav-btn:hover {
    color: var(--red-accent);
    opacity: 1;
    text-shadow: 0 0 6px rgba(232, 165, 152, 0.6);
    background: transparent;
  }

  .calendar-body {
    position: relative;
    z-index: 2;
  }

  .weekdays {
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    text-align: center;
    font-size: 0.75rem; 
    font-weight: bold;
    color: var(--red-accent); 
    margin-bottom: 8px; 
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(173, 120, 168, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
  }

  .weekdays div { 
    text-shadow: none !important; 
  }

  .days-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    row-gap: 5px; 
    column-gap: 5px; 
    overflow: visible !important; 
    position: relative;
    z-index: 2;
  }

  .day-cell { 
    position: relative; 
    aspect-ratio: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 0.8rem; 
    color: var(--text-muted);
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 3px;
  }
  
  .day-number { 
    z-index: 2; 
    pointer-events: none; 
    position: relative; 
    text-shadow: 0 0 3px #000000 !important; 
  }

  .day-cell.has-post {
    background: linear-gradient(135deg, #6b4366 0%, #40203a 100%); 
    border: 1px solid var(--red-accent); 
    color: #ffffff;
    cursor: pointer; 
    z-index: 5;
    transition: all 0.25s ease;
    box-shadow: inset 0 0 6px rgba(213, 44, 31, 0.3);
  }

  .day-cell.has-post:hover { 
    border-color: var(--red-accent);
    box-shadow: 0 0 12px rgba(213, 44, 31, 0.8), inset 0 0 8px rgba(232, 165, 152, 0.4);
    background: linear-gradient(135deg, #885382 0%, #54294d 100%);
    z-index: 9999 !important; 
  }
  
  .day-cell.has-post .day-number { 
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(213, 44, 31, 0.9), 0 0 3px #000000 !important;
  }
  
  .heart-bg {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    font-size: 1.4rem; 
    color: var(--red-accent); 
    opacity: 0.85;
    z-index: 1; 
    line-height: 1; 
    display: block;
    transition: all 0.25s ease;
    text-shadow: 0 0 6px rgba(213, 44, 31, 0.7) !important;
    pointer-events: none;
  }

  .heart-bg::before {
    content: "\2722";
  }

  .day-cell.has-post:hover .heart-bg { 
    opacity: 1;
    color: var(--red-accent);
    text-shadow: 0 0 10px rgba(232, 165, 152, 0.95), 0 0 4px rgba(213, 44, 31, 0.8) !important; 
    transform: translate(-50%, -50%) scale(1.15);
  }

  .calendar-container .tooltip {
    visibility: hidden; 
    position: absolute; 
    bottom: 120%; 
    left: 50%; 
    transform: translateX(-50%);
    background-color: var(--bg-dark); 
    color: var(--text-light); 
    border: 1px solid var(--red-accent);
    border-radius: 4px;
    box-shadow: 0 6px 20px var(--overlay-dark), 0 0 12px rgba(213, 44, 31, 0.3); 
    padding: 10px; 
    font-size: 0.75rem; 
    opacity: 0; 
    transition: opacity 0.2s ease; 
    width: 170px; 
    white-space: normal; 
    line-height: 1.4; 
    text-align: left; 
    pointer-events: auto; 
    z-index: 100000 !important;
    text-shadow: none !important; 
    max-height: 150px; 
    overflow-y: auto;
  }

  .tooltip-item {
    border-bottom: 1px dashed rgba(213, 44, 31, 0.5); 
    padding-bottom: 6px; 
    margin-bottom: 6px;
  }

  .tooltip-item:last-child { 
    border-bottom: none; 
    margin-bottom: 0; 
    padding-bottom: 0; 
  }

  .calendar-container .tooltip a { 
    color: var(--purple-glow); 
    text-decoration: none; 
    display: inline-block; 
    margin-top: 3px; 
    font-style: italic;
    font-weight: bold;
    transition: color 0.2s ease;
  }

  .calendar-container .tooltip a:hover {
    color: var(--red-accent);
    text-decoration: underline;
    text-shadow: 0 0 6px rgba(232, 165, 152, 0.8);
  }

  .day-cell.has-post:hover .tooltip { 
    visibility: visible; 
    opacity: 1; 
  }
</style>

<script>
    (function () {
        let blogPosts = {}, currentDate = new Date();
        const monthYearDisplay = document.getElementById('month-year-display');
        const daysContainer = document.getElementById('days-container');
        const prevBtn = document.getElementById('prev-month'), nextBtn = document.getElementById('next-month');
        const months = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];

        function fetchBloggerPosts() {
            fetch('/feeds/posts/default?alt=json&max-results=500')
                .then(r => r.json()).then(data => {
                    if (data.feed && data.feed.entry) {
                        data.feed.entry.forEach(e => {
                            const date = e.published.$t.substring(0, 10);
                            let url = '#', alt = e.link.find(l => l.rel === 'alternate');
                            if (alt) url = alt.href;

                            if (!blogPosts[date]) {
                                blogPosts[date] = [];
                            }
                            blogPosts[date].push({ title: e.title.$t, url: url });
                        });
                    }
                    renderCalendar();
                }).catch(err => { console.error(err); renderCalendar(); });
        }

        function renderCalendar() {
            const y = currentDate.getFullYear(), m = currentDate.getMonth();
            monthYearDisplay.textContent = `${months[m]} ${y}`; daysContainer.innerHTML = '';
            const firstDay = new Date(y, m, 1).getDay(), totalDays = new Date(y, m + 1, 0).getDate();

            for (let i = 0; i < firstDay; i++) {
                const cell = document.createElement('div'); cell.classList.add('day-cell', 'empty'); daysContainer.appendChild(cell);
            }
            for (let d = 1; d <= totalDays; d++) {
                const cell = document.createElement('div'); cell.classList.add('day-cell', 'active-day');

                const numSpan = document.createElement('span');
                numSpan.classList.add('day-number');
                numSpan.textContent = d;
                cell.appendChild(numSpan);

                const mm = String(m + 1).padStart(2, '0'), dd = String(d).padStart(2, '0'), key = `${y}-${mm}-${dd}`;
                if (blogPosts[key] && blogPosts[key].length > 0) {
                    cell.classList.add('has-post');

                    const starSpan = document.createElement('span');
                    starSpan.classList.add('heart-bg');
                    cell.appendChild(starSpan);

                    const tt = document.createElement('div');
                    tt.classList.add('tooltip');

                    let tooltipContent = '';
                    blogPosts[key].forEach(post => {
                        tooltipContent += `
            <div class="tooltip-item">
              <div>${post.title}</div>
              <a href="${post.url}">read entry ↗</a>
            </div>`;
                    });

                    tt.innerHTML = tooltipContent;
                    cell.appendChild(tt);
                }
                daysContainer.appendChild(cell);
            }
        }
        prevBtn.addEventListener('click', () => { currentDate.setMonth(currentDate.getMonth() - 1); renderCalendar(); });
        nextBtn.addEventListener('click', () => { currentDate.setMonth(currentDate.getMonth() + 1); renderCalendar(); });
        fetchBloggerPosts();
    })();
</script>

02. 'Now Watching' Widget

HTML

Shows the title, poster, status, and rating of the show you're currently watching. You can add multiple shows to the widget and cycle through them with the arrows!

THE CODE ● ● ●

<div class="watching-widget" id="rgWatchingWidget">

  <div class="rg-watching-header">
    <span class="rg-symbol">✧</span>
    now watching
    <span class="rg-symbol">✧</span>
  </div>

  <div class="rg-watching-content">
    <div class="rg-poster-wrapper">
      <img class="rg-watching-poster" src="" alt="Show poster" />
    </div>

    <div class="rg-watching-details">
      <h4 class="rg-watching-title"></h4>
      <p class="rg-watching-info">
        <span class="rg-label">status:</span>
        <span class="rg-val rg-status"></span>
      </p>
      <p class="rg-watching-info">
        <span class="rg-label">rating:</span>
        <span class="rg-stars"></span>
      </p>
    </div>
  </div>

  <div class="rg-page-controls">
    <button class="rg-page-arrow rg-prev" type="button" aria-label="Previous show">‹</button>
    <div class="rg-page-dots"></div>
    <button class="rg-page-arrow rg-next" type="button" aria-label="Next show">›</button>
  </div>

  <div class="rg-page-count"></div>

</div>

<style>
.watching-widget {
  background: #261A24;
  border: 1px solid #724E6D;
  box-shadow: inset 0 0 20px rgba(14,10,14,.8),
              0 8px 20px rgba(14,10,14,.6);
  padding: 18px;
  max-width: 100%;
  box-sizing: border-box;
  font-family: 'Times New Roman', serif;
  margin: 15px auto;
  position: relative;
  overflow: hidden;
}

.watching-widget::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px dashed rgba(114,78,109,.45);
  pointer-events: none;
}

.rg-watching-header {
  font-size: 11px;
  font-weight: normal;
  color: #FCFEFD;
  text-transform: lowercase;
  letter-spacing: 3px;
  margin-bottom: 14px;
  text-align: center;
  border-top: 1px double rgba(114,78,109,.7);
  border-bottom: 1px double rgba(114,78,109,.7);
  padding: 6px 0;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.rg-symbol {
  color: #865C80;
  font-size: 10px;
  vertical-align: middle;
  margin: 0 4px;
}

.rg-watching-content {
  display: flex;
  gap: 16px;
  align-items: center;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.rg-poster-wrapper {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.rg-watching-poster {
  width: 72px;
  height: 108px;
  object-fit: cover;
  display: block;
  border: 1px solid #724E6D;
  box-shadow: 0 4px 12px rgba(14,10,14,.8);
  transition: transform .35s ease,
              border-color .35s ease,
              box-shadow .35s ease;
}

.watching-widget:hover .rg-watching-poster {
  border-color: #865C80;
  box-shadow: 0 0 12px #d52c1f,
              0 4px 12px #d52c1f;
  transform: scale(1.04);
}

.rg-watching-details {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.rg-watching-title {
  margin: 0 0 10px;
  font-size: 16px;
  color: #FCFEFD;
  font-style: italic;
  font-weight: normal;
  letter-spacing: .5px;
  line-height: 1.2;
  transition: text-shadow .3s ease;
}

.watching-widget:hover .rg-watching-title {
  text-shadow: 0 0 8px rgba(252,254,253,.6);
}

.rg-watching-info {
  margin: 5px 0;
  font-size: 11px;
  color: #d52c1f;
}

.rg-label {
  color: #d52c1f;
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-style: italic;
}

.rg-val {
  color: #d52c1f;
  font-style: italic;
}

.rg-stars {
  color: #d52c1f;
  letter-spacing: 2px;
  text-shadow: 0 0 6px rgba(134,92,128,.5);
  white-space: nowrap;
}


.rg-page-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 17px;
  position: relative;
  z-index: 1;
}

.rg-page-arrow {
  background: transparent;
  border: none;
  padding: 0 5px;
  color: #865C80;
  font-family: 'Times New Roman', serif;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease, text-shadow .25s ease;
}

.rg-page-arrow:hover {
  color: #FCFEFD;
  text-shadow: 0 0 8px #d52c1f;
}

.rg-page-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.rg-page-dot {
  width: 5px;
  height: 5px;
  border: 1px solid #865C80;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease;
}

.rg-page-dot.active {
  background: #d52c1f;
  border-color: #d52c1f;
  box-shadow: 0 0 6px rgba(213,44,31,.6);
}

.rg-page-count {
  margin-top: 7px;
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  color: #865C80;
  position: relative;
  z-index: 1;
}
</style>

<script>
    (function () {
        var widget = document.getElementById('rgWatchingWidget');
        if (!widget || widget.dataset.initialized === 'true') return;
        widget.dataset.initialized = 'true';

        var shows = [
            {
                title: 'SHOW 1',
                poster: 'POSTER-IMAGE-URL',
                status: 'watching',
                rating: 4
            },
            {
                title: 'SHOW 2',
                poster: 'POSTER-IMAGE-URL',
                status: 'watching',
                rating: 4
            }
        ];

        var current = 0;
        var poster = widget.querySelector('.rg-watching-poster');
        var title = widget.querySelector('.rg-watching-title');
        var status = widget.querySelector('.rg-status');
        var stars = widget.querySelector('.rg-stars');
        var dots = widget.querySelector('.rg-page-dots');
        var count = widget.querySelector('.rg-page-count');
        var prev = widget.querySelector('.rg-prev');
        var next = widget.querySelector('.rg-next');

        function render() {
            var show = shows[current];

            title.textContent = show.title;
            poster.src = show.poster;
            poster.alt = show.title + ' poster';
            status.textContent = show.status;
            var rating = Math.max(0, Math.min(5, Number(show.rating) || 0));
            stars.innerHTML = '';

            for (var i = 0; i < 5; i++) {
                var star = document.createTextNode(i < rating ? '\u2605' : '\u2606');
                stars.appendChild(star);
            }

            count.textContent = (current + 1) + ' / ' + shows.length;

            dots.querySelectorAll('.rg-page-dot').forEach(function (dot, index) {
                dot.classList.toggle('active', index === current);
                dot.setAttribute('aria-current', index === current ? 'true' : 'false');
            });
        }

        shows.forEach(function (show, index) {
            var dot = document.createElement('button');
            dot.type = 'button';
            dot.className = 'rg-page-dot';
            dot.setAttribute('aria-label', 'Show ' + (index + 1) + ': ' + show.title);
            dot.addEventListener('click', function () {
                current = index;
                render();
            });
            dots.appendChild(dot);
        });

        prev.addEventListener('click', function () {
            current = (current - 1 + shows.length) % shows.length;
            render();
        });

        next.addEventListener('click', function () {
            current = (current + 1) % shows.length;
            render();
        });

        render();
    })();
</script>

03. MP3 Player

HTML

Add your own songs by downloading with Spotmate, and then uploading them to Catbox. Paste the Catbox links into this code!

THE CODE ● ● ●

<div class="retro-player">
  <div class="retro-screen">

    <div class="crt-scanlines"></div>
    <div class="crt-beam"></div>
    
    <div class="retro-header">
      <span id="track-number">TRACK 01/01</span>
      <div class="status-wrap">
        <span class="led-light" id="led-indicator"></span>
        <span class="status-indicator" id="play-status">STOP</span>
      </div>
    </div>
    <div class="track-info">
      <div class="marquee-wrapper">
        <span class="scrolling-text" id="track-title">SELECT TRACK...</span>
      </div>
    </div>
    <div class="time-readout">
      <span id="current-time">00:00</span>
      <div class="progress-bar-wrap" id="progress-bar-wrap">
        <div class="progress-bar-fill" id="progress-bar-fill"></div>
      </div>
      <span id="total-duration">00:00</span>
    </div>
  </div>

  <div class="retro-controls">
    <button class="retro-btn" id="prev-btn" aria-label="Previous"><<</button>
    <button class="retro-btn" id="play-btn" aria-label="Play/Pause">></button>
    <button class="retro-btn" id="next-btn" aria-label="Next">>></button>
    <div class="vol-control">
      <label for="volume-bar">VOL</label>
      <input type="range" id="volume-bar" value="80" min="0" max="100" />
    </div>
  </div>

  <audio id="audio-element" preload="metadata"></audio>
</div>

<style>
  :root {
    --retro-bg: #110912;
    --retro-panel: #2d182b;
    --retro-border: #785273;
    --retro-screen-bg: #050106;
    --retro-text: #d52c1f;
    --retro-text-dim: #ad78a8;
    --retro-accent: #ff2b1d;
    --retro-glow-red: rgba(213, 44, 31, 0.95);
    --retro-glow-soft: rgba(213, 44, 31, 0.4);
  }

  .retro-player {
    background: var(--retro-panel);
    border: 2px solid var(--retro-border);
    outline: 2px solid var(--retro-bg);
    box-shadow: 6px 6px 0px #000000, 0 0 20px rgba(213, 44, 31, 0.25);
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    color: var(--retro-text);
  }

  .retro-screen {
    background: var(--retro-screen-bg);
    border: 2px inset var(--retro-border);
    padding: 8px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9), 0 0 10px rgba(213, 44, 31, 0.15);
  }

  .crt-scanlines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
      rgba(18, 16, 16, 0) 50%, 
      rgba(0, 0, 0, 0.45) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.8;
  }

  .crt-beam {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(213, 44, 31, 0), rgba(213, 44, 31, 0.08), rgba(213, 44, 31, 0));
    pointer-events: none;
    z-index: 11;
    animation: scanbeam 4s linear infinite;
  }

  @keyframes scanbeam {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(300%); }
  }

  .retro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.65rem;
    color: var(--retro-text-dim);
    margin-bottom: 6px;
    font-weight: bold;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
  }

  #track-number {
    text-shadow: 0 0 4px rgba(173, 120, 168, 0.5);
  }

  .status-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .led-light {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #3d0805;
    box-shadow: 0 0 2px #000;
    transition: all 0.3s ease;
  }

  .is-playing .led-light {
    background-color: #ff3b2d;
    box-shadow: 0 0 10px #ff3b2d, 0 0 20px #ff3b2d;
    animation: pulse-led-bright 0.8s infinite alternate;
  }

  .is-playing .scrolling-text {
    text-shadow: 0 0 5px var(--retro-text), 0 0 12px var(--retro-text), 0 0 20px var(--retro-glow-soft);
  }

  .is-playing .progress-bar-fill {
    box-shadow: 0 0 10px var(--retro-text), 0 0 18px var(--retro-text);
  }

  .is-playing #play-status {
    color: var(--retro-text);
    text-shadow: 0 0 8px var(--retro-text);
  }

  @keyframes pulse-led-bright {
    0% { opacity: 0.5; box-shadow: 0 0 4px #ff3b2d; }
    100% { opacity: 1; box-shadow: 0 0 12px #ff3b2d, 0 0 22px #ff3b2d; }
  }

  .track-info {
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 8px;
    border: 1px solid rgba(213, 44, 31, 0.4);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8), 0 0 5px rgba(213, 44, 31, 0.2);
    margin-bottom: 8px;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 2;
  }

  .marquee-wrapper {
    display: flex;
    width: max-content;
    white-space: nowrap;
    position: relative;
    align-items: center;
  }

  .scrolling-text {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: bold;
    color: var(--retro-text);
    letter-spacing: 0.5px;
    padding-right: 25px;
    text-shadow: 0 0 4px var(--retro-glow-soft);
    transition: text-shadow 0.3s ease;
  }

  .marquee-active {
    animation: marquee-scroll 10s linear infinite;
  }

  @keyframes marquee-scroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }

  .time-readout {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    color: var(--retro-text-dim);
    position: relative;
    z-index: 2;
  }

  .progress-bar-wrap {
    flex-grow: 1;
    height: 8px;
    background: var(--retro-bg);
    border: 1px solid var(--retro-border);
    cursor: pointer;
    position: relative;
    box-shadow: inset 0 0 4px #000;
  }

  .progress-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--retro-text);
    transition: width 0.1s linear, box-shadow 0.3s ease;
  }

  .retro-controls {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .retro-btn {
    background: var(--retro-panel);
    color: var(--retro-text);
    border: 2px solid var(--retro-border);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 8px;
    cursor: pointer;
    box-shadow: 2px 2px 0px #000000;
    transition: all 0.2s ease;
    text-shadow: 0 0 3px var(--retro-glow-soft);
  }

  .retro-btn:hover {
    background: var(--retro-text);
    color: #000000;
    border-color: var(--retro-text);
    box-shadow: 2px 2px 0px #000000, 0 0 12px var(--retro-glow-red);
    text-shadow: none;
  }

  .retro-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000000;
  }

  .vol-control {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: bold;
    color: var(--retro-text-dim);
  }

  .vol-control input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 6px;
    background: var(--retro-screen-bg);
    border: 1px solid var(--retro-border);
    outline: none;
  }

  .vol-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 10px;
    background: var(--retro-text);
    cursor: pointer;
    box-shadow: 0 0 6px var(--retro-text);
  }

  .vol-control input[type="range"]::-moz-range-thumb {
    width: 6px;
    height: 10px;
    background: var(--retro-text);
    border: none;
    cursor: pointer;
    box-shadow: 0 0 6px var(--retro-text);
  }
</style>

<script>
    (function () {
        const playlistData = [
            {
                title: "Song - Artist",
                url: "CATBOX-URL-HERE"
            },
            {
                title: "Song - Artist",
                url: "CATBOX-URL-HERE"
            }
            /* Add more tracks as needed, following the same structure. Separate each track with a comma */
        ];

        let currentTrackIndex = 0;
        let isPlaying = false;

        const audio = document.getElementById('audio-element');
        const playerContainer = document.querySelector('.retro-player');
        const playBtn = document.getElementById('play-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const marqueeWrapper = document.querySelector('.marquee-wrapper');
        const trackInfoBox = document.querySelector('.track-info');
        const trackNumber = document.getElementById('track-number');
        const playStatus = document.getElementById('play-status');
        const currentTimeDisplay = document.getElementById('current-time');
        const totalDurationDisplay = document.getElementById('total-duration');
        const progressBarWrap = document.getElementById('progress-bar-wrap');
        const progressBarFill = document.getElementById('progress-bar-fill');
        const volumeBar = document.getElementById('volume-bar');

        function updateMarquee(text) {
            marqueeWrapper.classList.remove('marquee-active');
            marqueeWrapper.innerHTML = '';

            const firstSpan = document.createElement('span');
            firstSpan.className = 'scrolling-text';
            firstSpan.textContent = text;
            marqueeWrapper.appendChild(firstSpan);

            if (firstSpan.offsetWidth > trackInfoBox.clientWidth) {
                const secondSpan = document.createElement('span');
                secondSpan.className = 'scrolling-text';
                secondSpan.textContent = text;
                marqueeWrapper.appendChild(secondSpan);

                const scrollDuration = Math.max(6, text.length * 0.25);
                marqueeWrapper.style.animationDuration = `${scrollDuration}s`;
                marqueeWrapper.classList.add('marquee-active');
            }
        }

        function loadTrack(index) {
            if (!playlistData.length) return;
            const track = playlistData[index];
            audio.src = track.url;

            updateMarquee(track.title);

            trackNumber.textContent = `TRACK ${String(index + 1).padStart(2, '0')}/${String(playlistData.length).padStart(2, '0')}`;
            progressBarFill.style.width = '0%';
            currentTimeDisplay.textContent = "00:00";
            totalDurationDisplay.textContent = "00:00";
        }

        function playTrack() {
            isPlaying = true;
            audio.play();
            playBtn.textContent = "||";
            playStatus.textContent = "PLAY";
            playerContainer.classList.add('is-playing');
        }

        function pauseTrack() {
            isPlaying = false;
            audio.pause();
            playBtn.textContent = ">";
            playStatus.textContent = "PAUSE";
            playerContainer.classList.remove('is-playing');
        }

        function formatTime(seconds) {
            if (isNaN(seconds)) return "00:00";
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
        }

        playBtn.addEventListener('click', () => {
            if (isPlaying) {
                pauseTrack();
            } else {
                playTrack();
            }
        });

        prevBtn.addEventListener('click', () => {
            currentTrackIndex = (currentTrackIndex - 1 + playlistData.length) % playlistData.length;
            loadTrack(currentTrackIndex);
            if (isPlaying) playTrack();
        });

        nextBtn.addEventListener('click', () => {
            currentTrackIndex = (currentTrackIndex + 1) % playlistData.length;
            loadTrack(currentTrackIndex);
            if (isPlaying) playTrack();
        });

        audio.addEventListener('timeupdate', () => {
            if (audio.duration) {
                const progress = (audio.currentTime / audio.duration) * 100;
                progressBarFill.style.width = `${progress}%`;
                currentTimeDisplay.textContent = formatTime(audio.currentTime);
                totalDurationDisplay.textContent = formatTime(audio.duration);
            }
        });

        audio.addEventListener('ended', () => {
            currentTrackIndex = (currentTrackIndex + 1) % playlistData.length;
            loadTrack(currentTrackIndex);
            playTrack();
        });

        progressBarWrap.addEventListener('click', (e) => {
            if (audio.duration) {
                const rect = progressBarWrap.getBoundingClientRect();
                const clickPosition = (e.clientX - rect.left) / rect.width;
                audio.currentTime = clickPosition * audio.duration;
            }
        });

        volumeBar.addEventListener('input', () => {
            audio.volume = volumeBar.value / 100;
        });

        audio.volume = volumeBar.value / 100;
        loadTrack(currentTrackIndex);
    })();
</script>

jayla raye online

Pages

join our book club

book club is reading: 'The Lamb' by Lucy Rose

Blog Codes

01. Interactive Archive Calendar

02. 'Now Watching' Widget

03. MP3 Player

No comments:

Post a Comment

jayla's update log

blog codes now available!

new poll!

a tiny change ♡

click the crystal ball to sign the guestbook!

who's she?