```html
/* ============================================================
ELEMENTLER
============================================================ */
const container =
document.getElementById(
"iframe-container"
);
const holo =
document.getElementById(
"holo-wall"
);
const musicContainer =
document.getElementById(
"music-transition"
);
/* ============================================================
DEĞİŞKENLER
============================================================ */
let currentThemeUrl =
"";
let themeCheckBusy =
false;
let themeTransitionBusy =
false;
let musicTimeout =
null;
/* ============================================================
GEÇİŞLER
============================================================ */
const transitionTypes = [
"transition-softfade"
];
let lastTransition =
-1;
/* ============================================================
RENK PALETİ
============================================================ */
const particleColors = [
"#00ffe1",
"#00b7ff",
"#5865ff",
"#9b5cff",
"#d946ef",
"#ff3cac",
"#ff4d6d",
"#ff8a3d",
"#ffd84d",
"#7cff6b"
];
/* ============================================================
RANDOM
============================================================ */
function random(
min,
max
) {
return Math.random() *
(max - min) +
min;
}
/* ============================================================
RANDOM RENK
============================================================ */
function randomColor() {
return particleColors[
Math.floor(
Math.random() *
particleColors.length
)
];
}
/* ============================================================
FARKLI GEÇİŞ
============================================================ */
function getRandomTransition() {
let index;
do {
index =
Math.floor(
Math.random() *
transitionTypes.length
);
}
while (
index === lastTransition &&
transitionTypes.length > 1
);
lastTransition =
index;
return transitionTypes[
index
];
}
/* ============================================================
RENKLİ YILDIZ + NOTA EFEKTİ
============================================================ */
function createSignatureParticles() {
const colors = [
"#00ffd5",
"#a879ff",
"#ffffff",
"#ff9d4d"
];
for (let i = 0; i < 10; i++) {
const particle = document.createElement("span");
particle.className = "signature-particle";
particle.style.left =
(25 + Math.random() * 50) + "vw";
particle.style.top =
(25 + Math.random() * 50) + "vh";
particle.style.color =
colors[Math.floor(Math.random() * colors.length)];
particle.style.setProperty(
"--dx",
((Math.random() - .5) * 260) + "px"
);
particle.style.setProperty(
"--dy",
((Math.random() - .5) * 180) + "px"
);
document.body.appendChild(particle);
setTimeout(function () {
particle.remove();
}, 900);
}
}
function createMusicEffects() {
if (!musicContainer) {
return;
}
if (musicTimeout) {
clearTimeout(musicTimeout);
musicTimeout = null;
}
musicContainer.innerHTML = "";
musicContainer.classList.remove("music-active");
requestAnimationFrame(function () {
musicContainer.classList.add("music-active");
/*
* Her tema değişiminde yalnızca 1 kez çalışır.
* Daha büyük, daha gerçekçi ve sağa-sola süzülen kalpler.
*/
const colors = [
{
color: "rgba(255,85,145,.78)",
glow: "rgba(255,60,125,.34)"
},
{
color: "rgba(255,125,185,.74)",
glow: "rgba(255,95,165,.30)"
},
{
color: "rgba(205,125,255,.70)",
glow: "rgba(180,95,255,.28)"
},
{
color: "rgba(95,215,255,.64)",
glow: "rgba(70,200,255,.24)"
},
{
color: "rgba(255,185,120,.66)",
glow: "rgba(255,160,95,.24)"
}
];
const count =
Math.floor(
random(9, 14)
);
for (
let i = 0;
i < count;
i++
) {
const item =
document.createElement(
"span"
);
item.className =
"soft-particle soft-heart";
const palette =
colors[
Math.floor(
Math.random() *
colors.length
)
];
/*
* Kalpler alt bölgede dağınık başlar.
*/
item.style.setProperty(
"--left",
random(5, 95) + "%"
);
item.style.setProperty(
"--top",
random(68, 98) + "%"
);
/*
* Daha büyük kalpler.
* Bazıları özellikle iri olsun.
*/
item.style.setProperty(
"--size",
random(44, 82) + "px"
);
item.style.setProperty(
"--opacity",
random(.48, .76)
);
item.style.setProperty(
"--heart-color",
palette.color
);
item.style.setProperty(
"--heart-glow",
palette.glow
);
/*
* Her kalp kendi hızında bağımsız hareket eder.
* Yatay drift yok: düz, temiz ve sakin süzülme.
*/
item.style.setProperty(
"--duration",
random(5.8, 8.2) + "s"
);
item.style.setProperty(
"--delay",
random(0, 1.4) + "s"
);
/*
* Her kalp birbirinden bağımsız, yavaş ve düz süzülür.
*/
item.style.setProperty(
"--duration",
random(5.8, 8.2) + "s"
);
item.style.setProperty(
"--delay",
random(0, 1.4) + "s"
);
musicContainer.appendChild(
item
);
}
/*
* Efekt tamamlandıktan sonra tamamen temizle.
* Böylece sonraki tema değişimine kadar hiçbir şey çalışmaz.
*/
musicTimeout = setTimeout(function () {
musicContainer.classList.remove(
"music-active"
);
musicContainer.innerHTML = "";
musicTimeout = null;
}, 9000);
});
}
/*
CSS transition başlangıcı.
*/
requestAnimationFrame(
function () {
requestAnimationFrame(
function () {
newLayer.classList.add(
"active"
);
}
);
}
);
currentThemeUrl =
url;
/*
Light sweep.
*/
container.classList.remove(
"magic-shift"
);
requestAnimationFrame(
function () {
container.classList.add(
"magic-shift"
);
}
);
/*
Hologram.
*/
if (holo) {
holo.classList.remove(
"holo-active"
);
requestAnimationFrame(
function () {
holo.classList.add(
"holo-active"
);
}
);
}
/*
SAYDAM KALP + TOZ PARÇACIKLARI.
*/
createMusicEffects();
