Minor theme tweaking
This commit is contained in:
parent
25287795d8
commit
e3cfd9142f
6 changed files with 16 additions and 214 deletions
|
@ -1,7 +1,8 @@
|
|||
function rain() {
|
||||
var html = ""
|
||||
|
||||
html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css"> <script src="/themes/rain/script.js"></script>`
|
||||
html += `<link rel="stylesheet" type="text/css" href="/themes/rain/style.css">`
|
||||
|
||||
html += `<div class="rainStuff"><div class="rainContainer">`
|
||||
|
||||
var amount = 7
|
||||
|
@ -57,77 +58,29 @@ function rain() {
|
|||
return html
|
||||
}
|
||||
|
||||
function purpleMagic() {
|
||||
function halloween() {
|
||||
var html = ""
|
||||
|
||||
html += `<link rel="stylesheet" type="text/css" href="/themes/magic/style.css"> <script src="/themes/magic/script.js"></script>`
|
||||
html += `<div class="magicStuff"><div class="magicContainer">`
|
||||
|
||||
var amount = 15
|
||||
|
||||
for (let index = 0; index < amount; index++) {
|
||||
html += `<div class="particle"></div>`
|
||||
}
|
||||
html += "<style>"
|
||||
for (let index = 0; index < amount; index++) {
|
||||
html += `
|
||||
.particle:nth-of-type(${index + 1}) {
|
||||
animation: magic${index} ${((Math.round(Math.random() * 10) / 10) * 0.3) + 20}s linear, sway 4s cubic-bezier(0.445, 0.05, 0.55, 0.95) alternate;
|
||||
animation-delay: ${Math.round(Math.random() * 100) / 100 * 20}s;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
}
|
||||
`
|
||||
|
||||
if (index % 2 == 0) {
|
||||
html.replace("alternate", "alternate-reverse")
|
||||
}
|
||||
|
||||
var pos = Math.round(Math.random() * 100)
|
||||
|
||||
html += `@keyframes magic${index} { `
|
||||
|
||||
html += `
|
||||
0% {
|
||||
top: 110vh;
|
||||
right: ${pos}%;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
90% {
|
||||
top: -10vh;
|
||||
right: ${pos}%;
|
||||
visibility: visible;
|
||||
}
|
||||
90.1% {
|
||||
visibility: hidden;
|
||||
}
|
||||
`
|
||||
|
||||
html += `}`
|
||||
|
||||
}
|
||||
html += "</style>"
|
||||
html += "</div></div>"
|
||||
html += `<link rel="stylesheet" type="text/css" href="/themes/halloween/style.css">`
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
function code() {
|
||||
return '<link rel="stylesheet" type="text/css" href="/themes/code/style.css">' // <script src="/themes/code/script.js"></script>'
|
||||
}
|
||||
|
||||
var events = []
|
||||
events = events.concat(Array(10).fill(""))
|
||||
events.push(rain())
|
||||
|
||||
events = events.concat(Array(10).fill(""))
|
||||
events.push(purpleMagic())
|
||||
|
||||
module.exports = {
|
||||
returnTheme: function() {
|
||||
var time = new Date()
|
||||
return events[time.getDate() % events.length]
|
||||
|
||||
// return halloween()
|
||||
|
||||
if (time.getMonth() + 1 == 10) {
|
||||
return halloween()
|
||||
}
|
||||
|
||||
else if (time.getDate() % 10 == 0) {
|
||||
return rain()
|
||||
}
|
||||
|
||||
return ""
|
||||
},
|
||||
|
||||
}
|
|
@ -1,29 +0,0 @@
|
|||
function typeWriter(elem, delay) {
|
||||
var elemText = elem.text().split('')
|
||||
elem.text('_'.repeat(elemText.length))
|
||||
var i = 0
|
||||
function nextLetter() {
|
||||
elem.text(elemText.slice(0, i).join('') + '_'.repeat(elemText.length - i))
|
||||
if (i < elemText.length) {
|
||||
setTimeout(() => {
|
||||
i++
|
||||
nextLetter()
|
||||
}, 20)
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (elem.text() == '_'.repeat(elemText.length)) {
|
||||
nextLetter()
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// $(document).ready(() => {
|
||||
// var i = 0
|
||||
// var arr = $("span").each((_, item) => {
|
||||
// if ($(item).text().length > 0) {
|
||||
// i++
|
||||
// typeWriter($(item), i * 150)
|
||||
// }
|
||||
// })
|
||||
// })
|
|
@ -1,16 +0,0 @@
|
|||
* {
|
||||
font-family: "Consolas", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New";
|
||||
}
|
||||
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.mainTitle, .mainTitle > span {
|
||||
color: limegreen !important;
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
animation: typer 2s linear;
|
||||
margin: auto;
|
||||
}
|
|
@ -1,34 +0,0 @@
|
|||
$(document).ready(() => {
|
||||
function particle() {
|
||||
var particle = $("<div></div>")
|
||||
particle.addClass("particle")
|
||||
particle.css("left", (Math.random() * 100).toString() + "%")
|
||||
particle.css("visibility", "visible")
|
||||
particle.css("top", "100%")
|
||||
var anim = "sway 4s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95)"
|
||||
if (Math.round(Math.random()) == 1) {
|
||||
anim += " alternate"
|
||||
} else {
|
||||
anim += " alternate-reverse"
|
||||
}
|
||||
particle.css("animation", anim)
|
||||
|
||||
particle.animate({
|
||||
"top": "-5%"
|
||||
}, (((Math.round(Math.random() * 10) / 10) * 0.3) + 20) * 1000, () => {
|
||||
particle.remove()
|
||||
})
|
||||
|
||||
$(".magicContainer").append(particle)
|
||||
}
|
||||
|
||||
$(".magicContainer > *").remove()
|
||||
|
||||
function loop() {
|
||||
particle()
|
||||
setTimeout(() => {
|
||||
loop()
|
||||
}, 1000);
|
||||
}
|
||||
loop()
|
||||
})
|
|
@ -1,44 +0,0 @@
|
|||
|
||||
#card {
|
||||
background-color: rgba(25, 0, 70, 1);
|
||||
/* backdrop-filter: blur(5px); */
|
||||
}
|
||||
.magicStuff {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.magicContainer {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
top: 0px;
|
||||
left: 0vw;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: rgb(100, 70, 255);
|
||||
/* background-image: radial-gradient(rgba(175, 0, 255, 1) 0% 25%, rgba(175, 0, 255, 0.6) 25% 50%, rgba(175, 0, 255, 0.3) 50% 75%, rgba(0, 0, 255, 0)); */
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(black, rgb(50, 0, 90));
|
||||
}
|
||||
|
||||
@keyframes sway {
|
||||
from {
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
to {
|
||||
transform: translateX(30px);
|
||||
}
|
||||
}
|
|
@ -1,28 +0,0 @@
|
|||
$(document).ready(() => {
|
||||
function particle() {
|
||||
var particle = $("<div></div>")
|
||||
particle.addClass("rainDrop")
|
||||
particle.css("left", (Math.random() * 100).toString() + "%")
|
||||
particle.css("visibility", "visible")
|
||||
particle.css("top", "-10%")
|
||||
|
||||
particle.animate({
|
||||
"top": "110%",
|
||||
"easing": "linear"
|
||||
}, 600, () => {
|
||||
particle.remove()
|
||||
})
|
||||
|
||||
$(".rainContainer").append(particle)
|
||||
}
|
||||
|
||||
$(".rainContainer > *").remove()
|
||||
|
||||
function loop() {
|
||||
particle()
|
||||
setTimeout(() => {
|
||||
loop()
|
||||
}, 100 * (Math.random() + 0.25));
|
||||
}
|
||||
loop()
|
||||
})
|
Loading…
Reference in a new issue