Spinny pfp
This commit is contained in:
parent
ace19a693d
commit
689e66e1d5
8 changed files with 44 additions and 10 deletions
BIN
assets/Sounds/cats on mars.mp3
Normal file
BIN
assets/Sounds/cats on mars.mp3
Normal file
Binary file not shown.
BIN
assets/Sounds/johnny-test-whip-crack.mp3
Normal file
BIN
assets/Sounds/johnny-test-whip-crack.mp3
Normal file
Binary file not shown.
1
index.js
1
index.js
|
|
@ -22,6 +22,7 @@ var assetPath = path.join(__dirname, "assets")
|
|||
app.use("/fonts", express.static(fontPath))
|
||||
app.use("/cached", express.static(cachePath))
|
||||
app.use("/imgs", express.static(path.join(assetPath, "Images")))
|
||||
app.use("/snds", express.static(path.join(assetPath, "Sounds")))
|
||||
|
||||
if (!fs.existsSync(cachePath)) {
|
||||
fs.mkdirSync(cachePath)
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<main>
|
||||
<h3>Why are so many words colored?</h3>
|
||||
<p>I like the way it looks to have certain words be highlighted, makes it look fancier and easier to read (imo). So, when I remade this site, I went ahead and added an <em>Automatic Word Highlighting System!</em> This allows me have words automatically highlighted, on the server side, without having to do it in the code manually. E.G.</p>
|
||||
<p>Godot Engine, Javascript, NodeJS, Starwalker, Violet's Purgatory, Violet, Purgatory, and more :)</p>
|
||||
<p>Godot Engine, Javascript, NodeJS, Starwalker, Violet, Asahi, Purgatory, and more :)</p>
|
||||
<h3>I thought the site doesn't use Javascript? So why is it there?</h3>
|
||||
<p>Originally, all my sites were completely Javascript free. As of late, though, I decided to add Javascript to this one. Javascript will <b><em>NEVER</em></b> be a requirement on this site. Javascript will ONLY be used where nessacary, and I will do everything possible to make the experience indistinguishable.</p>
|
||||
<p>For example, things such as the song duration bar on my activities are pure HTML, using some mathy NodeJS-generated CSS animations! The only thing the site uses Javascript for right now, is setting the scroll to the top of the page on reload, and real time updating discord activities.</p>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="./global.css">
|
||||
<link rel="stylesheet" type="text/css" href="./root.css">
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="./noScript.css">
|
||||
</noscript>
|
||||
|
||||
<script src="./main.js"></script>
|
||||
|
||||
|
|
@ -22,14 +25,15 @@
|
|||
|
||||
<body>
|
||||
{WEATHER_MODIFIER}
|
||||
<h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1>
|
||||
<h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span></h1>
|
||||
<main class="animatedMain">
|
||||
<p>Make sure to check out this project on <a href="https://codeberg.org/bingus_violet/violets-purgatory">Codeberg</a>!</p>
|
||||
<hr>
|
||||
<div id="card">
|
||||
<h2>{Violet}</h2>
|
||||
<div style="display: flex; justify-content: center; align-items: center;">
|
||||
<div style="width: 50%;">
|
||||
<img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
|
||||
<img draggable="false" src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
|
||||
</div>
|
||||
<div style="width: 50%;">
|
||||
<div style="float: left;">
|
||||
|
|
@ -57,7 +61,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<p>{RANDOM_QUOTE}</p>
|
||||
<p>Make sure to check out this project on <a href="https://codeberg.org/bingus_violet/violets-purgatory">Codeberg</a>!</p>
|
||||
|
||||
<div id="activityHTML">
|
||||
{ACTIVITIES}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,36 @@
|
|||
var catsOnMars = new Audio("/snds/cats on mars.mp3")
|
||||
var whipLash = new Audio("/snds/johnny-test-whip-crack.mp3")
|
||||
catsOnMars.loop = true
|
||||
|
||||
window.onbeforeunload = function () {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
var pfp = document.querySelector(".pfp")
|
||||
|
||||
pfp.addEventListener("mousedown", () => {
|
||||
catsOnMars.play()
|
||||
|
||||
pfp.style.animationName = "spinny"
|
||||
|
||||
pfp.style.scale = "1.2"
|
||||
})
|
||||
|
||||
document.body.onmouseup = () => {
|
||||
if (catsOnMars.currentTime != 0) {
|
||||
catsOnMars.currentTime = 0
|
||||
catsOnMars.pause()
|
||||
|
||||
whipLash.currentTime = 0
|
||||
whipLash.play()
|
||||
|
||||
pfp.style.animationName = "unset"
|
||||
pfp.style.scale = "1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function socketeer() {
|
||||
|
|
@ -44,7 +71,7 @@ function socketeer() {
|
|||
}
|
||||
|
||||
var discStatusHTML = await (await fetch("/discHTML")).text();
|
||||
|
||||
|
||||
var activityDiv = document.querySelector("#activityHTML")
|
||||
activityDiv.innerHTML = discStatusHTML
|
||||
})
|
||||
|
|
|
|||
5
static/noScript.css
Normal file
5
static/noScript.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.pfp:active {
|
||||
rotate: 7200deg;
|
||||
transform: scale(1.15);
|
||||
transition: all 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
|
||||
}
|
||||
|
|
@ -54,12 +54,10 @@
|
|||
transform: scale(0.9);
|
||||
border-radius: 50%;
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
.pfp:active {
|
||||
rotate: 7200deg;
|
||||
transform: scale(1.1);
|
||||
transition: all 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.CLAlign {
|
||||
|
|
|
|||
Loading…
Reference in a new issue