DISCLAIMER: this site has only been tested on google chrome and may not work on other browsers! i guessss its mobile compatible, but if u want the full experience, i 100% recommend using desktop! :D
♡ ♡
https://magicalgirl.net
(・ω・)ﾉ
自己紹介About me
Show meDesigns
好きな曲My favourite songs
type down ur fav songs here : ) title — artist title — artist title — artist (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
ウェブサイト ｜ 夢世界 ｜ crd made by Iyanna :3
✚ ✚ ✚ Internet settings (・∀・)
(function () { const loader = document.getElementById('kawaii-loader'); const disclaimer = document.getElementById('kawaii-disclaimer'); const continueBtn = document.getElementById('disclaimer-continue'); if (!loader) return; document.documentElement.classList.add('kawaii-is-loading'); let p = 0; let done = false; const tick = () => { p += Math.random() * 4 + 1; p = Math.min(p, 96); loader.style.setProperty('--p', p.toFixed(0) + '%'); if (!done) requestAnimationFrame(tick); }; requestAnimationFrame(tick); const showDisclaimer = () => { if (!disclaimer) return; document.documentElement.classList.add('kawaii-disclaimer-on'); disclaimer.classList.add('show'); disclaimer.setAttribute('aria-hidden', 'false'); }; const hideDisclaimer = () => { if (!disclaimer) return; disclaimer.classList.remove('show'); disclaimer.setAttribute('aria-hidden', 'true'); setTimeout(() => { disclaimer.remove(); document.documentElement.classList.remove('kawaii-disclaimer-on'); }, 600); }; if (continueBtn) { continueBtn.addEventListener('click', hideDisclaimer); } window.addEventListener('load', () => { done = true; const finish = () => { if (p < 100) { p += 1; loader.style.setProperty('--p', p + '%'); requestAnimationFrame(finish); } else { setTimeout(() => { showDisclaimer(); loader.classList.add('hide'); document.documentElement.classList.remove('kawaii-is-loading'); setTimeout(() => loader.remove(), 700); }, 800); } }; finish(); }); })(); (function(){ /* ===== PLAYLIST ===== */ const songs = [ { title: "Hoover", artist: "Yung Lean", cover: "https://image2url.com/r2/default/images/1770725135074-b775f364-c9ad-4b75-bfe4-b046f67cae07.png", audio: "https://example.com/song.mp3", tooltip: "song ♡ artist" } ]; /* ===== SETTINGS ===== */ let current = 0; let isPlaying = false; let fadeTimer = null; const FADE_TIME = 600; const FADE_STEPS = 20; /* ===== MARQUEE TEXT ===== */ function setMarquee(el, text, tooltip){ if (!el) return; let track = el.querySelector(".marquee-track"); if (!track){ track = document.createElement("div"); track.className = "marquee-track"; el.innerHTML = ""; el.appendChild(track); } track.innerHTML = `${text}${text}`; if (tooltip) el.title = tooltip; } /* ===== FADE AUDIO ===== */ function fade(audio, from, to, done){ if (!audio) return; clearInterval(fadeTimer); let step = 0; const time = FADE_TIME / FADE_STEPS; fadeTimer = setInterval(() => { step++; const v = from + (to - from) * (step / FADE_STEPS); audio.volume = Math.max(0, Math.min(1, v)); if (step >= FADE_STEPS){ clearInterval(fadeTimer); audio.volume = to; done && done(); } }, time); } /* ===== INIT ===== */ function init(){ const ipod = document.querySelector(".ipod"); if (!ipod) return; // prevent duplicate listeners if init runs multiple times if (ipod.dataset.ipodInit === "1") return; ipod.dataset.ipodInit = "1"; const audio = ipod.querySelector("#ipodAudio"); const playBtn = ipod.querySelector("#ipodPlayPause"); const wheel = ipod.querySelector(".wheel"); const nextBtn = wheel ? wheel.querySelector(".right") : null; const prevBtn = wheel ? wheel.querySelector(".left") : null; const artEl = ipod.querySelector(".album-art"); const titleEl = ipod.querySelector(".song-name"); const artistEl= ipod.querySelector(".artist"); if (!audio || !playBtn || !wheel || !artEl || !titleEl || !artistEl) return; if (!Array.isArray(songs) || songs.length === 0) return; audio.preload = "none"; audio.volume = 1; function loadSong(i){ const s = songs[i]; if (!s) return; artEl.style.backgroundImage = `url("${s.cover}")`; setMarquee(titleEl, s.title || "", s.tooltip || ""); setMarquee(artistEl, s.artist || ""); audio.src = s.audio; audio.load(); } function setPlayIcon(paused){ // only toggle if Font Awesome classes exist if (paused){ playBtn.classList.remove("fa-pause"); playBtn.classList.add("fa-play"); } else { playBtn.classList.remove("fa-play"); playBtn.classList.add("fa-pause"); } } function play(){ audio.play().then(() => { isPlaying = true; setPlayIcon(false); fade(audio, 0, 1); }).catch(() => { isPlaying = false; setPlayIcon(true); }); } function pause(){ fade(audio, audio.volume, 0, () => { audio.pause(); isPlaying = false; setPlayIcon(true); }); } playBtn.addEventListener("click", (e) => { e.stopPropagation(); isPlaying ? pause() : play(); }); if (nextBtn){ nextBtn.addEventListener("click", (e) => { e.stopPropagation(); current = (current + 1) % songs.length; loadSong(current); play(); }); } if (prevBtn){ prevBtn.addEventListener("click", (e) => { e.stopPropagation(); current = (current - 1 + songs.length) % songs.length; loadSong(current); play(); }); } audio.addEventListener("ended", () => { current = (current + 1) % songs.length; loadSong(current); play(); }); // start state setPlayIcon(true); loadSong(current); } /* Carrd-safe init */ init(); window.addEventListener("load", init); setTimeout(init, 250); setTimeout(init, 900); })(); (function(){ function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); } function makeFakeScrollbar(scroller){ if (!scroller || scroller.dataset.fakeScroll === "1") return; scroller.dataset.fakeScroll = "1"; // Create track + thumb const bar = document.createElement("div"); bar.className = "fake-scrollbar"; const thumb = document.createElement("div"); thumb.className = "fake-thumb"; bar.appendChild(thumb); scroller.appendChild(bar); function sync(){ const viewH = scroller.clientHeight; const scrollH = scroller.scrollHeight; const barH = bar.clientHeight; // Always show it (even if not overflow) — keep it cute and present // If you ONLY want it when overflow exists, uncomment next 2 lines: // if (scrollH <= viewH + 1){ bar.style.display = "none"; return; } // bar.style.display = "block"; const thumbH = clamp((viewH / scrollH) * barH, 22, barH); thumb.style.height = thumbH + "px"; const maxTop = barH - thumbH; const ratio = (scrollH <= viewH) ? 0 : (scroller.scrollTop / (scrollH - viewH)); thumb.style.top = (ratio * maxTop) + "px"; } // Scroll -> thumb scroller.addEventListener("scroll", sync, { passive: true }); window.addEventListener("resize", sync); // Drag thumb -> scroll let dragging = false; let startY = 0; let startTop = 0; thumb.addEventListener("mousedown", (e) => { dragging = true; startY = e.clientY; startTop = parseFloat(getComputedStyle(thumb).top) || 0; e.preventDefault(); }); document.addEventListener("mousemove", (e) => { if (!dragging) return; const barH = bar.clientHeight; const thumbH = thumb.clientHeight; const maxTop = barH - thumbH; const dy = e.clientY - startY; const newTop = clamp(startTop + dy, 0, maxTop); thumb.style.top = newTop + "px"; const viewH = scroller.clientHeight; const scrollH = scroller.scrollHeight; const ratio = (maxTop <= 0) ? 0 : (newTop / maxTop); scroller.scrollTop = ratio * (scrollH - viewH); }); document.addEventListener("mouseup", () => { dragging = false; }); // Click track to jump bar.addEventListener("mousedown", (e) => { if (e.target === thumb) return; const rect = bar.getBoundingClientRect(); const clickY = e.clientY - rect.top; const barH = bar.clientHeight; const thumbH = thumb.clientHeight; const maxTop = barH - thumbH; const newTop = clamp(clickY - thumbH / 2, 0, maxTop); const viewH = scroller.clientHeight; const scrollH = scroller.scrollHeight; const ratio = (maxTop <= 0) ? 0 : (newTop / maxTop); scroller.scrollTop = ratio * (scrollH - viewH); }); // Initial sync (Carrd sometimes needs a tiny delay) setTimeout(sync, 50); setTimeout(sync, 300); setTimeout(sync, 900); } // Apply to ANYTHING you mark with .fake-scroll function init(){ document.querySelectorAll(".fake-scroll").forEach(makeFakeScrollbar); } init(); window.addEventListener("load", init); setTimeout(init, 250); setTimeout(init, 900); })();
