155 lines
2.7 KiB
JavaScript
155 lines
2.7 KiB
JavaScript
|
|
||
|
|
function setTint( tint ) {
|
||
|
|
|
||
|
|
var label = document.querySelector('.label');
|
||
|
|
|
||
|
|
if( tint == "Dark" ) {
|
||
|
|
|
||
|
|
label.classList.remove("light");
|
||
|
|
|
||
|
|
label.classList.add("dark");
|
||
|
|
|
||
|
|
label.innerHTML = "Dark";
|
||
|
|
|
||
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||
|
|
|
||
|
|
localStorage.setItem("tint", "dark");
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
label.innerHTML = "Light";
|
||
|
|
|
||
|
|
label.classList.add("light");
|
||
|
|
|
||
|
|
label.classList.remove("dark");
|
||
|
|
|
||
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
||
|
|
|
||
|
|
localStorage.setItem("tint", "light");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
|
||
|
|
var panels = document.querySelectorAll('.halfPanel');
|
||
|
|
|
||
|
|
console.log("boxes", panels);
|
||
|
|
|
||
|
|
//#1e2e43
|
||
|
|
|
||
|
|
for (var i = 0; i < panels.length; i++) {
|
||
|
|
|
||
|
|
var currentPanel = panels[i];
|
||
|
|
|
||
|
|
currentPanel.addEventListener('click', function() {
|
||
|
|
|
||
|
|
for (var j = 0; j < panels.length; j++) {
|
||
|
|
|
||
|
|
panels[j].classList.add("hidePanel");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//document.body.setAttribute("id", "snow");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
|
||
|
|
currentPanel.addEventListener('mouseover', function() {
|
||
|
|
|
||
|
|
var glowingBorder = document.querySelector(".glowingBorder");
|
||
|
|
|
||
|
|
var boundingBoxRectangle = this.getBoundingClientRect();
|
||
|
|
|
||
|
|
glowingBorder.style.left = (boundingBoxRectangle.x - 2) + "px";
|
||
|
|
|
||
|
|
glowingBorder.style.top = ( boundingBoxRectangle.y - 2) + "px";
|
||
|
|
|
||
|
|
glowingBorder.style.width = boundingBoxRectangle.width + 4 + "px";
|
||
|
|
|
||
|
|
glowingBorder.style.height = boundingBoxRectangle.height + 12 + "px";
|
||
|
|
|
||
|
|
//this.classList.add("glowingBorder");
|
||
|
|
console.log(boundingBoxRectangle);
|
||
|
|
|
||
|
|
});*/
|
||
|
|
|
||
|
|
/*
|
||
|
|
currentPanel.addEventListener('mouseover', function() {
|
||
|
|
|
||
|
|
if( document.querySelector(".glowingBorder-active") ) {
|
||
|
|
|
||
|
|
document.querySelector(".glowingBorder-active").classList.remove("glowingBorder-active");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
this.classList.add("glowingBorder-active");
|
||
|
|
console.log(this);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
currentPanel.addEventListener('mouseout', function() {
|
||
|
|
|
||
|
|
|
||
|
|
//this.classList.remove("glowingBorder-active");
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});*/
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var smallPanels = document.querySelectorAll('panel.wiggle');
|
||
|
|
|
||
|
|
console.log("smallPanels", smallPanels);
|
||
|
|
|
||
|
|
for (var i = 0; i < smallPanels.length; i++) {
|
||
|
|
|
||
|
|
var currentPanel = smallPanels[i];
|
||
|
|
|
||
|
|
currentPanel.style.transform = "rotate("+ ( -3 + ( Math.random() * 7 )) + "deg)";
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
//glowingBorder
|
||
|
|
|
||
|
|
var checkbox = document.querySelector('.toggle-checkbox');
|
||
|
|
|
||
|
|
checkbox.addEventListener('change', function() {
|
||
|
|
|
||
|
|
if( !this.checked ) {
|
||
|
|
|
||
|
|
setTint( "Dark" );
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
setTint( "Light" );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
if( localStorage.getItem("tint") == "light" ) {
|
||
|
|
|
||
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
||
|
|
|
||
|
|
document.querySelector(".toggle-checkbox").setAttribute("checked", "checked");
|
||
|
|
|
||
|
|
setTint( "Light" );
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||
|
|
|
||
|
|
setTint( "Dark" );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|