142 lines
5.9 KiB
HTML
142 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ALAN460</title>
|
|
<link rel="stylesheet" href="/src/css/style.css">
|
|
<link rel="shortcut icon" href="/src/svg/favicon_homepage.svg" type="image/svg+xml">
|
|
<link rel="stylesheet" href="https://teethinvitro.neocities.org/webring/linuxring/script/onionring.css">
|
|
<style>
|
|
#logo{
|
|
text-align: center;
|
|
font-size: min(7vw, 5rem);
|
|
padding-bottom: 12px;
|
|
color: var(--clr-accent-dark)
|
|
}
|
|
#fcusa, #linuxring{max-width: 16rem;}
|
|
section ul{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
section ul li{
|
|
width: fit-content;
|
|
margin: calc(var(--marginpad)/2);
|
|
}
|
|
@media screen and (min-width: 34rem){
|
|
main{
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
section{
|
|
grid-column: 3/5;
|
|
}
|
|
}
|
|
li table{display: inline-block;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div>
|
|
<header>
|
|
<div id="logo">ALAN460.NEOCITIES.ORG</div>
|
|
</header>
|
|
<div id="main-window">
|
|
<main>
|
|
<nav>
|
|
<h1>Navigation</h1>
|
|
<ul>
|
|
<li><a href="blog">Blog</a></li>
|
|
<li><a href="works/">Works</a></li>
|
|
<li><a href="https://alan460.123guestbook.com/">Guestbook</a></li>
|
|
</ul>
|
|
</nav>
|
|
<section class="section-dark">
|
|
<h1 style="text-align: center;">Webrings</h1>
|
|
<ul class="notlist">
|
|
<li id="transring">
|
|
<script type="text/javascript" src="https://transring.neocities.org/onionring-variables.js"></script>
|
|
<script type="text/javascript" src="https://transring.neocities.org/nb-widget.js"></script>
|
|
</li>
|
|
<li id="linuxring">
|
|
<script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-variables.js"></script>
|
|
<script type="text/javascript" src="https://teethinvitro.neocities.org/webring/linuxring/script/onionring-widget.js"></script>
|
|
</li>
|
|
<li>
|
|
<a href="https://isaacfish.neocities.org/webring/2.html"><img src="https://isaacfish.neocities.org/webring/left.png"></a>
|
|
<a href="https://isaacfish.neocities.org/webring/"><img src="https://isaacfish.neocities.org/webring/queercoded.png"></a>
|
|
<a href="https://isaacfish.neocities.org/webring/4.html"><img src="https://isaacfish.neocities.org/webring/right.png"></a>
|
|
</li>
|
|
<li id="fcusa">
|
|
<script type="text/javascript" src="https://worldsaddress.neocities.org/webring/onionring-variables.js"></script>
|
|
<script type="text/javascript" src="https://worldsaddress.neocities.org/webring/onionring-widget.js"></script>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
<footer><p>Thank you for <span id="viewcount"></span> views!</p></footer>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
//Title shadow effect
|
|
const r = getComputedStyle(document.querySelector(':root'));
|
|
const backgroundPrim = parseInt(r.getPropertyValue('--clr-neutral').slice(1), 16);
|
|
const selectionBackground = parseInt(r.getPropertyValue('--clr-accent-light').slice(1), 16);
|
|
|
|
let titleGradient = [
|
|
[Math.floor(selectionBackground/65536), Math.floor(selectionBackground%65536/256), Math.floor(selectionBackground%65536%256)],
|
|
[Math.floor(backgroundPrim/65536), Math.floor(backgroundPrim%65536/256), Math.floor(backgroundPrim%65536%256)]
|
|
];
|
|
|
|
for(let i=0; i<3; i++)
|
|
{
|
|
let j=0;
|
|
while(j<titleGradient.length-1)
|
|
{
|
|
titleGradient.splice(j+1, 0,
|
|
[Math.round((titleGradient[j][0]+titleGradient[j+1][0])/2), Math.round((titleGradient[j+1][1]+titleGradient[j][1])/2), Math.round((titleGradient[j][2]+titleGradient[j+1][2])/2)]
|
|
);
|
|
titleGradient.length<4 ? j++ : j+=2;
|
|
}
|
|
}
|
|
titleGradient.pop();
|
|
|
|
let textShadowInput = `2px 0 ${r.getPropertyValue('--clr-neutral')}, -2px 0 ${r.getPropertyValue('--clr-neutral')}, 0 2px ${r.getPropertyValue('--clr-neutral')}, 0 -2px ${r.getPropertyValue('--clr-neutral')}, 1px 1px ${r.getPropertyValue('--clr-neutral')}, -1px -1px ${r.getPropertyValue('--clr-neutral')}, 1px -1px ${r.getPropertyValue('--clr-neutral')}, -1px 1px ${r.getPropertyValue('--clr-neutral')}, `;
|
|
titleGradient.forEach( (hex, i)=>
|
|
{
|
|
textShadowInput +=`0 ${(i+1)*3}px rgb(${hex[0]},${hex[1]},${hex[2]})`;
|
|
if(i<titleGradient.length-1)
|
|
{textShadowInput+=', ';}
|
|
})
|
|
|
|
document.querySelector('#logo').style.textShadow = textShadowInput;
|
|
|
|
</script>
|
|
<script>
|
|
let p = new Promise ((resolve, reject) => {
|
|
const jsonRequest = new XMLHttpRequest();
|
|
jsonRequest.onload = () =>{
|
|
if(jsonRequest.status == 200){
|
|
resolve(JSON.parse(jsonRequest.responseText));
|
|
}
|
|
}
|
|
jsonRequest.open("get", "https://weirdscifi.ratiosemper.com/neocities.php?sitename=alan460");
|
|
jsonRequest.send();
|
|
})
|
|
|
|
p.then(response => {
|
|
const num_arr = response.info.views.toString().split("");
|
|
let num_str = "";
|
|
for (i = 0; i < num_arr.length; i++) {
|
|
num_str += num_arr[i];
|
|
if ( (num_arr.length-1 - i) % 3 == 0 && (num_arr.length-1 - i) != 0 ) {num_str += ".";}
|
|
}
|
|
document.getElementById("viewcount").innerHTML = num_str;
|
|
}).catch(() => {
|
|
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html> |