Kaerlath Productions

Customized Carrd templates for characters, venue and free companies on Final Fantasy XIV

Templates

Character Templates

"Blue Steel"

Custom Character Pages

Free Company Templates

Venue Templates

About

Customer satisfaction is what I strive for! If you aren't happy, I'm not happy.I also do custom work, so if you don't see a template design that is perfect for what you want, we can come up with one that is!Please remember, template sharing requires at least Pro Lite membership levels with carrd.

Contact

Thank you for your interest in the template designs! Just fill out the form below and I will reach out to you regarding your request. Remember, in order to use a custom template, you will need to have at least Pro Lite membership levels with Carrd.

Sample Song Title

Artist Name

0:000:00

const audio = new Audio( "https://dl.sndup.net/7458z/Rick%20Astley%20-%20Never%20Gonna%20Give%20You%20Up.mp3", ) // Replace with your direct MP3 URL. Use something like https://sndup.net or Dropbox to upload. const playBtn = document.getElementById("playBtn") const backwardBtn = document.getElementById("backwardBtn") const forwardBtn = document.getElementById("forwardBtn") const progressContainer = document.getElementById("progressContainer") const progress = document.getElementById("progress") const progressDot = document.getElementById("progressDot") const currentTimeSpan = document.getElementById("currentTime") const durationSpan = document.getElementById("duration") const volumeSlider = document.getElementById("volumeSlider") let isDragging = false // Play/Pause functionality playBtn.addEventListener("click", () => { if (audio.paused) { audio.play() playBtn.textContent = "⏸" playBtn.style.paddingLeft = "6px" playBtn.style.paddingTop = "5px" playBtn.style.fontSize = "22px" } else { audio.paused = true audio.pause() playBtn.textContent = "▶" playBtn.style.paddingLeft = "8px" playBtn.style.paddingTop = "3px" playBtn.style.fontSize = "15px" } }) // Forward 10 seconds forwardBtn.addEventListener("click", () => { audio.currentTime = Math.min(audio.currentTime + 10, audio.duration) }) // Backward 10 seconds backwardBtn.addEventListener("click", () => { audio.currentTime = Math.max(audio.currentTime - 10, 0) }) // Update progress bar and time audio.addEventListener("timeupdate", () => { if (!isDragging) { const percent = (audio.currentTime / audio.duration) * 100 updateProgress(percent) } currentTimeSpan.textContent = formatTime(audio.currentTime) }) // Set duration when metadata is loaded audio.addEventListener("loadedmetadata", () => { durationSpan.textContent = formatTime(audio.duration) }) // Progress bar interaction function updateProgress(percent) { progress.style.width = percent + "%" progressDot.style.left = percent + "%" } progressContainer.addEventListener("mousedown", (e) => { isDragging = true updateProgressFromEvent(e) }) document.addEventListener("mousemove", (e) => { if (isDragging) { updateProgressFromEvent(e) } }) document.addEventListener("mouseup", () => { if (isDragging) { isDragging = false const percent = parseFloat(progress.style.width) audio.currentTime = (percent / 100) * audio.duration } }) function updateProgressFromEvent(e) { const rect = progressContainer.getBoundingClientRect() let percent = ((e.clientX - rect.left) / rect.width) * 100 percent = Math.max(0, Math.min(100, percent)) updateProgress(percent) } // Volume control volumeSlider.addEventListener("input", (e) => { audio.volume = e.target.value }) // Format time in MM:SS function formatTime(seconds) { const minutes = Math.floor(seconds / 60) seconds = Math.floor(seconds % 60) return `${minutes}:${seconds.toString().padStart(2, "0")}` } // Reset play button when audio ends audio.addEventListener("ended", () => { playBtn.textContent = "▶" updateProgress(0) audio.currentTime = 0 })

Home