Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Spinny pfp

Browse source
This commit is contained in:
bingus_violet 2024-04-18 23:50:10 -05:00
parent ace19a693d
commit 689e66e1d5
8 changed files with 44 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/Sounds/cats on mars.mp3 Normal file
View file

Binary file not shown.

BIN
assets/Sounds/johnny-test-whip-crack.mp3 Normal file
View file

Binary file not shown.

1
index.js
View file

@ -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)

2
static/faq/index.html
View file

@ -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>

9
static/index.html
View file

@ -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}

29
static/main.js
View file

@ -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
View 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;
}

8
static/root.css
View file

@ -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 {