HTMLify

Always-forever.html
Views: 437 | Author: amar
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" />
<title>Always forever</title>
<style>
  /* --- Basic page / card --- */
  body {
    background: #f3ebdf;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: "ComicCustom", "Comic Sans MS", Arial, sans-serif;
  }
 @font-face {
    font-family: "ComicCustom";
    src: url("https://htmlify.me/amar/umeassets/ComicSansMS.woff2") format("woff2");
     font-display: swap;}
  .card {
    width: 480px;
    max-width: 95%;
    height: 540px; /* taller to fit lyrics */
    background: #fff8ef;
    border-radius: 20px;
    padding: 25px;
    border: 3px dashed #c19a6b;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* TEXT ON TOP */
  .text {
    width: 100%;
    text-align: center;
    font-size: 26px;
    margin-bottom: 8px;
    position: relative;
    height: 40px;
  }

  .fade-text {
    position: absolute;
    width: 100%;
    transition: opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
  }

  .show {
    opacity: 1;
  }

  /* IMAGES MIDDLE */
  .images {
    position: relative;
    width: 100%;
    height: 240px;
  }

  .images img {
    position: absolute;
    top: 10px;
    width: 230px;
    transition: transform 0.6s ease, opacity 0.6s ease;
  }

  #girl { left: -15px; }
  #boy  { right: -15px; }
  #hug  { left: 50%; top: 20px; width: 290px; transform: translateX(-18%); opacity: 0; position: absolute; }

  /* SLIDER AT BOTTOM */
  #slider {
    position: absolute;
    bottom: 120px;
    width: 100%;
    height: 40px;
    left: 0;
  }

  #handle {
    width: 90px;
    height: 100%;
    background: #f3d6b5;
    border-radius: 25px;
    cursor: grab;
    box-shadow: 0 0 5px #be9974 inset;
    position: relative;
    left: 0;
    user-select: none;
  }

 #lyricsPanel {
    position: absolute;
    width: 85%;
    left: 50%;
    transform: translateX(-50%);
    top: 60px;
    height: 90px;
    text-align: center;
    z-index: 10;  
    overflow: hidden;
    background: transparent; /* Transparent, no box */
    border-radius: 0;        /* Remove curve */
    padding: 0;
    display: none;
    box-shadow: none;        /* Remove shadow */
}

  #lyrics p {
    margin: 6px 0;
    font-size: 17px;
    color: #333;
    line-height: 1.4;
  }

  #lyrics p.active {
    color: #ff6b81; /* soft romantic pink-red */
    font-weight: 700;
    font-size: 18px;
  }
}

</style>
</head>
<body>

<div class="card">

  <!-- TOP TEXT -->
  <div class="text">
    <div id="text1" class="fade-text show">You & Me…</div>
    <div id="text2" class="fade-text">Always Forever ❤️</div>
  </div>

  <!-- MIDDLE IMAGES (unchanged) -->
  <div class="images">
    <img id="girl" src="https://htmlify.me/amar/umeassets/image%20(2).png" alt="girl">
    <img id="boy" src="https://htmlify.me/amar/umeassets/image%20(1).png" alt="boy">
    <img id="hug" src="https://htmlify.me/amar/umeassets/image.png" alt="hug">
  </div>

  <!-- SLIDER -->
  <div id="slider">
    <div id="handle"></div>
  </div>

  <!-- Lyrics panel (hidden until user slides) -->
  <div id="lyricsPanel">
    <div id="lyrics"></div>
  </div>

<!-- Audio (HIDDEN CONTROLS) -->
<div id="audioControls" style="display:none;">
  <audio id="audio" preload="metadata" crossorigin="anonymous"></audio>
</div>

</div>

<script>
/* =========================
   CONFIG - paste your links here
   ========================= */
const CONFIG = {
  audioSrc: "https://htmlify.me/amar/umeassets/Always%20Forever.mp3",
  lrcUrl:   "https://htmlify.me/amar/always.lrc",
  songTitle: "Always Forever ❤️",
  titleChangeTime: 0.5
};
/* ========================= */

const audio = document.getElementById("audio");
const lyricsPanel = document.getElementById("lyricsPanel");
const lyricsDiv = document.getElementById("lyrics");
const text1 = document.getElementById("text1");
const text2 = document.getElementById("text2");

const slider = document.getElementById("slider");
const handle = document.getElementById("handle");
const girl = document.getElementById("girl");
const boy = document.getElementById("boy");
const hug = document.getElementById("hug");

let dragging = false;
let startedBySlide = false;   // whether audio started by slider first interaction
let lines = [];              // parsed lrc lines {time, text}

// New vars to prevent undo and flicker
let maxReachedX = 0;         // maximum handle left reached (px) -> can't go left of this
let titleLockedByUser = false; // when true, audio won't change top title (prevents flicker)

// set audio src from config
if (CONFIG.audioSrc && CONFIG.audioSrc !== "https://example.com/song.mp3") {
  audio.src = CONFIG.audioSrc;
} else {
  console.warn("No audioSrc set in CONFIG — set CONFIG.audioSrc to your hosted audio URL.");
}

// show the configured song title text2
text2.textContent = CONFIG.songTitle || text2.textContent;

// parse LRC if provided (fetch)
if (CONFIG.lrcUrl && CONFIG.lrcUrl !== "https://example.com/lyrics.lrc") {
  fetch(CONFIG.lrcUrl)
    .then(r => r.text())
    .then(parseLRC)
    .catch(err => {
      console.warn("Failed to load LRC:", err);
    });
} else {
  console.warn("No lrcUrl set in CONFIG — set CONFIG.lrcUrl to your hosted LRC URL.");
}

/* ---------- LRC parser (supports multiple timestamps per line) ---------- */
function parseLRC(text) {
  const rawLines = text.replace(/\r/g,"").split("\n");
  const timeTag = /\[(\d+):(\d+(\.\d+)?)\]/g;

  for (const raw of rawLines) {
    let matches;
    let lastIndex = 0;
    const times = [];
    while ((matches = timeTag.exec(raw)) !== null) {
      const min = parseInt(matches[1],10);
      const sec = parseFloat(matches[2]);
      times.push(min * 60 + sec);
      lastIndex = matches.index + matches[0].length;
    }
    const content = raw.slice(lastIndex).trim();
    times.forEach(t => {
      lines.push({ time: t, text: content || "" });
    });
  }

  // sort by time
  lines.sort((a,b) => a.time - b.time);

  // render lines into lyricsDiv (but keep hidden until user slides)
  renderLyrics();
}

/* ---------- render lyrics into panel ---------- */
function renderLyrics() {
  lyricsDiv.innerHTML = "";
  lines.forEach((ln, i) => {
    const p = document.createElement("p");
    p.id = "line-" + i;
    p.textContent = ln.text || " ";
    lyricsDiv.appendChild(p);
  });
}

/* ---------- slider events (desktop + mobile) ---------- */
handle.addEventListener("mousedown", () => dragging = true);
document.addEventListener("mouseup", () => dragging = false);
document.addEventListener("mousemove", (e) => { if (dragging) moveHandle(e.clientX); });

handle.addEventListener("touchstart", (e) => { dragging = true; e.preventDefault(); });
document.addEventListener("touchend", () => dragging = false);
document.addEventListener("touchmove", (e) => { if (dragging) moveHandle(e.touches[0].clientX); });

/* ---------- move logic (prevents moving left of maxReachedX) ---------- */
function moveHandle(posX) {
  const rect = slider.getBoundingClientRect();
  let x = posX - rect.left - handle.offsetWidth / 2;
  const max = slider.offsetWidth - handle.offsetWidth;
  if (x < 0) x = 0;
  if (x > max) x = max;

  // Prevent moving left of the maximum reached X (user can't undo)
  // This makes the handle non-decreasing in left position.
  x = Math.max(x, maxReachedX);
  // Update maxReachedX to the new position
  maxReachedX = Math.max(maxReachedX, x);

  handle.style.left = x + "px";

  const slide = x / max;

  // Girl moves toward center
  girl.style.transform = `translateX(${slide * 160}px)`;

  // top text crossfade — but once user has started sliding we lock title updates to avoid audio fighting slider
  if (!titleLockedByUser) {
    // smooth crossfade while user slides BEFORE lock
    text1.style.opacity = 1 - slide;
    text2.style.opacity = slide;
  } else {
    // If locked, ensure title remains the user's chosen state.
    // Prefer always-forever look when user has moved beyond tiny threshold
    if (slide > 0.2) {
      text1.style.opacity = 0;
      text2.style.opacity = 1;
    } else {
      text1.style.opacity = 1;
      text2.style.opacity = 0;
    }
  }

  // hug appears when close to end visually
  if (slide > 0.85) {
    girl.style.opacity = 0;
    boy.style.opacity = 0;
    hug.style.opacity = 1;
  } else {
    girl.style.opacity = 1;
    boy.style.opacity = 1;
    hug.style.opacity = 0;
  }

  // reveal lyrics panel when the user starts sliding
  if (!startedBySlide && slide > 0.01) {
    startedBySlide = true;
    // lock title so audio.timeupdate won't fight the slider and cause flicker
    titleLockedByUser = true;
    revealLyricsAndStart();
  }
}

/* ---------- reveal lyrics + start audio ---------- */
function revealLyricsAndStart() {
  // show lyrics panel
  lyricsPanel.style.display = "block";

  // start audio if not already playing
  if (audio.src && audio.paused) {
    audio.play().catch(err => {
      console.warn("Autoplay blocked; user gesture needed to play. Click Play manually.", err);
    });
  }

  // (Optional) while the user has started sliding, keep the top title in the "song title" state:
  text1.style.opacity = 0;
  text2.style.opacity = 1;
}

/* ---------- audio sync for top text & lyrics ---------- */
audio.addEventListener("timeupdate", () => {
  const t = audio.currentTime;

  // 1) top text auto-switch based on CONFIG.titleChangeTime
  // Only let audio control the title if the user hasn't locked it by sliding.
  if (typeof CONFIG.titleChangeTime === "number" && !titleLockedByUser) {
    if (t >= CONFIG.titleChangeTime) {
      text1.style.opacity = 0;
      text2.style.opacity = 1;
    } else {
      text1.style.opacity = 1;
      text2.style.opacity = 0;
    }
  }

  // 2) highlight current lyric line (line-by-line)
  if (lines.length === 0) return;

  for (let i = 0; i < lines.length; i++) {
    const current = lines[i];
    const next = lines[i+1];
    if (t >= current.time && (!next || t < next.time)) {
      highlightLine(i);
      break;
    }
  }
});

/* ---------- highlight and scroll the lyrics box ---------- */
let lastActive = -1;
function highlightLine(index) {
  if (index === lastActive) return;
  lastActive = index;

  const all = lyricsDiv.querySelectorAll("p");
  all.forEach(p => p.classList.remove("active"));

  const el = document.getElementById("line-" + index);
  if (!el) return;
  el.classList.add("active");

  // auto-scroll lyricsPanel so active line is centered-ish
  const panel = lyricsPanel;
  const topOffset = el.offsetTop - panel.clientHeight/2 + el.clientHeight/2;
  panel.scrollTo({ top: Math.max(0, topOffset), behavior: "smooth" });
}

/* ---------- handle audio ended: keep locked state if user locked it ---------- */
audio.addEventListener("ended", () => {
  if (!titleLockedByUser) {
    // reset top text and visuals only if user didn't lock by sliding
    text1.style.opacity = 1;
    text2.style.opacity = 0;
    handle.style.left = "0px";
    girl.style.transform = `translateX(0px)`;
    girl.style.opacity = 1;
    boy.style.opacity = 1;
    hug.style.opacity = 0;
    setTimeout(() => {
      lyricsPanel.style.display = "none";
      lastActive = -1;
      maxReachedX = 0;
    }, 900);
  } else {
    // user locked: keep state (do not reset). Also disable handle pointer events so user can't attempt to move left.
    handle.style.pointerEvents = 'none';
    // keep lyrics visible (you can change to hide if you want)
  }
});

/* ---------- optional: click play from UI will also reveal lyrics (if they want) ---------- */
audio.addEventListener("play", () => {
  // if user presses play without sliding, we still want top sync and optionally reveal lyrics:
  // For now we won't auto-show lyrics unless they've dragged — that was requested by you.
});

/* ---------- small safety: if user hasn't provided LRC/audio links, leave working structure ---------- */
</script>

</body>
</html>
HTMLify

Share this file:
