2.0
This commit is contained in:
parent
df6a8597d6
commit
062004c1e4
BIN
JetBrainsMono-Light.woff2
Normal file
BIN
JetBrainsMono-Light.woff2
Normal file
Binary file not shown.
65
index.html
65
index.html
|
|
@ -1,59 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta name="title" content="caodoc">
|
||||
<meta name="author" content="caodoc">
|
||||
<meta name="description" content="caodoc's exozyme site.">
|
||||
<meta name="description" content=""You&#39;re a wanderer, just like me."">
|
||||
|
||||
<meta itemprop="name" content="caodoc">
|
||||
<meta itemprop="description" content="caodoc's exozyme site.">
|
||||
<meta itemprop="image" content="/static/preview/preview.png">
|
||||
<meta itemprop="description" content=""You&#39;re a wanderer, just like me."">
|
||||
<meta itemprop="image" content="https://caodoc.exozy.me/preview.png">
|
||||
|
||||
<meta name="twitter:title" content="caodoc">
|
||||
<meta name="twitter:creator" content="caodoc">
|
||||
<meta name="twitter:description" content="caodoc's exozyme site.">
|
||||
<meta name="twitter:description" content=""You&#39;re a wanderer, just like me."">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="/static/preview/preview.png">
|
||||
<meta name="twitter:url" content="https://caodoc.exozy.me/">
|
||||
<meta name="twitter:image" content="https://caodoc.exozy.me/preview.png">
|
||||
<meta name="twitter:url" content="https://caodoc.exozy.me">
|
||||
|
||||
<meta property="og:title" content="caodoc">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:description" content="caodoc's exozyme site.">
|
||||
<meta property="og:image" content="/static/preview/preview.png">
|
||||
<meta property="og:url" content="https://caodoc.exozy.me/">
|
||||
<meta property="og:description" content=""You&#39;re a wanderer, just like me."">
|
||||
<meta property="og:image" content="https://caodoc.exozy.me/preview.png">
|
||||
<meta property="og:url" content="https://caodoc.exozy.me">
|
||||
|
||||
<title> caodoc </title>
|
||||
<title> guest@local </title>
|
||||
|
||||
<link rel="canonical" href=" ">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./static/logo/favicon-16px.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./static/logo/favicon-32px.png">
|
||||
<link rel="apple-touch-icon" sizes="192x192" href="./static/logo/favicon-192px.png">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link rel="canonical" href="https://caodoc.exozy.me">
|
||||
<link rel="icon" type=image/png sizes="16x16" href="https://caodoc.is-a.dev/logo/favicon-16px.png">
|
||||
<link rel="icon" type=image/png sizes="32x32" href="https://caodoc.is-a.dev/logo/favicon-32px.png">
|
||||
<link rel="apple-touch-icon" sizes="192x192" href="https://caodoc.is-a.dev/logo/favicon-192px.png">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<a href=""> <img id="icon" src="./static/avatar.webp"> </a>
|
||||
<a id="containerTopText" href=""> caodoc </a>
|
||||
</div>
|
||||
<div id="containerBody">
|
||||
<img id="avatar" src="./static/avatar.webp">
|
||||
<text id="name"> caodoc </text>
|
||||
<text> caodoc's exozyme page for random things. </text>
|
||||
<div id="containerBot">
|
||||
<a href="https://caodoc.is-a.dev"> <img class="contact" src="https://caodoc.is-a.dev/logo/favicon-192px.png"> </a>
|
||||
<a href="https://discord.com/users/800173074166710282"> <img class="contact" src="./static/contact/discord.png"> </a>
|
||||
<a href="https://github.com/caodoc"> <img class="contact" src="./static/contact/github.png"> </a>
|
||||
<a href="https://git.exozy.me/caodoc"> <img class="contact" src="./static/contact/forgejo.png"> </a>
|
||||
<a href="https://osu.ppy.sh/users/21126929"> <img class="contact" src="./static/contact/osu.png"> </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pre id="logo">
|
||||
______ ______ ______ _____ ______ ______
|
||||
/\ ___\ /\ __ \ /\ __ \ /\ __-. /\ __ \ /\ ___\
|
||||
\ \ \____ \ \ __ \ \ \ \/\ \ \ \ \/\ \ \ \ \/\ \ \ \ \____
|
||||
\ \_____\ \ \_\ \_\ \ \_____\ \ \____- \ \_____\ \ \_____\
|
||||
\/_____/ \/_/\/_/ \/_____/ \/____/ \/_____/ \/_____/ </pre>
|
||||
<text id="version"> Version 1.0 - Last updated: April 24th 2024 </text>
|
||||
<br/>
|
||||
<div id="output"> </div>
|
||||
<text class="newCmd"> <text id="currentTime" class="currentTimeClass"> </text> <text class="user"> guest</text>@local <text class="symbol">$</text> <input autofocus id="input" maxlength="20"> </text>
|
||||
<text id="warning"> There are no commands this long! <br/> </text>
|
||||
</body>
|
||||
|
||||
<script src="./script.js"> </script>
|
||||
</html>
|
||||
110
osu.html
110
osu.html
|
|
@ -1,110 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta name="title" content="caodoc">
|
||||
<meta name="author" content="caodoc">
|
||||
<meta name="description" content="caodoc's osu! profile.">
|
||||
|
||||
<meta itemprop="name" content="caodoc">
|
||||
<meta itemprop="description" content="caodoc's osu! profile.">
|
||||
<meta itemprop="image" content="/static/preview/osu.png">
|
||||
|
||||
<meta name="twitter:title" content="caodoc">
|
||||
<meta name="twitter:creator" content="caodoc">
|
||||
<meta name="twitter:description" content="caodoc's osu! profile.">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="/static/preview/osu.png">
|
||||
<meta name="twitter:url" content="https://caodoc.exozy.me/">
|
||||
|
||||
<meta property="og:title" content="caodoc">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:description" content="caodoc's osu! profile.">
|
||||
<meta property="og:image" content="/static/preview/osu.png">
|
||||
<meta property="og:url" content="https://caodoc.exozy.me/">
|
||||
|
||||
<title> caodoc's osu! profile </title>
|
||||
|
||||
<link rel="canonical" href=" ">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./static/logo/favicon-16px.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./static/logo/favicon-32px.png">
|
||||
<link rel="apple-touch-icon" sizes="192x192" href="./static/logo/favicon-192px.png">
|
||||
<link rel="stylesheet" href="/static/css/osu.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="box-0">
|
||||
<img id="avatar" src="https://a.ppy.sh/21126929?1707889867.jpeg">
|
||||
<text class="boxSmall"> Main page at <a href="https://caodoc.is-a.dev" target="_blank">caodoc.is-a.dev</a>. </text>
|
||||
<text class="boxSmall"> <a href="https://exozy.me">exozyme</a>: caodoc:exozy.me </text>
|
||||
<div id="box-0-1">
|
||||
<text> <a href="https://osu.ppy.sh/users/21126929" target="_blank">osu!</a> </text>
|
||||
<text> <a href="https://github.com/caodoc" target="_blank">GitHub</a> </text>
|
||||
<text> <a href="https://discord.com/users/800173074166710282" target="_blank">Discord</a> </text>
|
||||
</div>
|
||||
</div>
|
||||
<div id="box-1">
|
||||
<text id="username"> </text>
|
||||
<div id="rank">
|
||||
<div> <text class="textBold">Global</text>: #<text id="globalRank"></text> </div>
|
||||
<div> <text class="textBold" id="countryCode"> VN </text>: #<text id="countryRank"></text> </div>
|
||||
</div>
|
||||
<div class="line"> </div>
|
||||
<div id="box-4">
|
||||
<div>
|
||||
<img class="image-rank" src="./static/ranking/ranking-XH-small@2x.png">
|
||||
<text id="ssh" class="count-text textBold"> </text>
|
||||
</div>
|
||||
<div>
|
||||
<img class="image-rank" src="./static/ranking/ranking-X-small@2x.png">
|
||||
<text id="ss" class="count-text textBold"> </text>
|
||||
</div>
|
||||
<div>
|
||||
<img class="image-rank" src="./static/ranking/ranking-SH-small@2x.png">
|
||||
<text id="sh" class="count-text textBold"> </text>
|
||||
</div>
|
||||
<div>
|
||||
<img class="image-rank" src="./static/ranking/ranking-S-small@2x.png">
|
||||
<text id="s" class="count-text textBold"> </text>
|
||||
</div>
|
||||
<div>
|
||||
<img class="image-rank" src="./static/ranking/ranking-A-small@2x.png">
|
||||
<text id="a" class="count-text textBold"> </text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"> </div>
|
||||
<div id="other">
|
||||
<div class="box-2">
|
||||
<text> <text class="textBold"> PP: </text> <text id="pp"> </text> </text>
|
||||
<text> <text class="textBold"> Ranked Score: </text> <text id="rankedScore"> </text> </text>
|
||||
<text> <text class="textBold"> Total Score: </text> <text id="totalScore"> </text> </text>
|
||||
<text> <text class="textBold"> Play Count: </text> <text id="playCount"> </text> </text>
|
||||
<text> <text class="textBold"> Total Hit: </text> <text id="totalHits"> </text> </text>
|
||||
<text> <text class="textBold"> Hit Accuracy: </text> <text id="hitAccuracy"> </text> </text>
|
||||
</div>
|
||||
<div class="box-2">
|
||||
<text> <text class="textBold"> Maximum Combo: </text> <text id="maximumCombo"> </text> </text>
|
||||
<text> <img class="image-point" src="./static/point/hit300.png"> <text id="count_300" class="count-text"> </text> </text>
|
||||
<text> <img class="image-point" src="./static/point/hit100.png"> <text id="count_100" class="count-text"> </text> </text>
|
||||
<text> <img class="image-point" src="./static/point/hit50.png"> <text id="count_50" class="count-text"> </text> </text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"> </div>
|
||||
<div id="box-3">
|
||||
<text> <text class="textBold"> Level </text> <text id="userLevel"> </text> </text>
|
||||
<div id="boxProgress">
|
||||
<div id="progress"> <text class="textBold" id="levelProgress">% </text> </div>
|
||||
</div>
|
||||
<text> <text class="textBold"> Total play time:</text> <text id="playTime"> </text> </text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./static/js/osu.js"> </script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
preview.png
Normal file
BIN
preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
78
script.js
Normal file
78
script.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
const input = document.getElementById("input");
|
||||
const output = document.getElementById("output");
|
||||
const logo = document.getElementById("logo");
|
||||
const version = document.getElementById("version");
|
||||
const currentTime = document.getElementById("currentTime");
|
||||
|
||||
const unknownCmdText = `Unknown command! Write <code class="help">help</code> for the full list.`;
|
||||
const whoIsText = `Hello! I’m <a href="https://git.exozy.me/caodoc" target="_blank">caodoc</a>, the creator of this terminal design based website. <br/>
|
||||
Source code can be found <a href="https://git.exozy.me/caodoc/terminal" target="_blank">here</a>.`;
|
||||
const helpCmdText = `
|
||||
<code class="help">clear</code> Clear the terminal. <br/>
|
||||
<code class="help">help</code> Display this. <br/>
|
||||
<code class="help">social</code> My social media accounts. <br/>
|
||||
<code class="help">whois</code> Information about the creator & this website.
|
||||
`;
|
||||
const socialText = `
|
||||
<text class="socialHighLight"> git.exozy.me </text> <a href="https://git.exozy.me/caodoc">caodoc</a> <br/>
|
||||
<text class="socialHighLight"> GitHub </text> <a href="https://github.com/caodoc">caodoc</a> <br/>
|
||||
<text class="socialHighLight"> Discord </text> <a href="https://discord.com/users/800173074166710282">caodoc</a> <br/>
|
||||
<text class="socialHighLight"> Matrix </text> <a href="">@caodoc:exozy.me</a>
|
||||
`;
|
||||
|
||||
function helpCmd()
|
||||
{
|
||||
output.innerHTML += `${helpCmdText}`;
|
||||
}
|
||||
|
||||
function unknownCmd()
|
||||
{
|
||||
output.innerHTML += `${unknownCmdText}`;
|
||||
}
|
||||
|
||||
function whoIs()
|
||||
{
|
||||
output.innerHTML += `${whoIsText}`;
|
||||
}
|
||||
|
||||
function social()
|
||||
{
|
||||
output.innerHTML += `${socialText}`;
|
||||
}
|
||||
|
||||
function clearCmd()
|
||||
{
|
||||
output.innerHTML = "";
|
||||
logo.style.display = "none";
|
||||
version.style.display = "none";
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
if (input.value.length === 20)
|
||||
{
|
||||
document.getElementById("warning").style.display = "block";
|
||||
}
|
||||
else
|
||||
{
|
||||
document.getElementById("warning").style.display = "none";
|
||||
}
|
||||
const time = new Date();
|
||||
currentTime.innerHTML = `[${time.getHours()}:${time.getMinutes()}]`;
|
||||
}, 10);
|
||||
|
||||
|
||||
input.addEventListener("keypress", function(e) {
|
||||
if (e.key === "Enter")
|
||||
{
|
||||
const time = new Date();
|
||||
const inputCmd = input.value;
|
||||
output.innerHTML += `<text class="newCmd"> <text class="currentTimeClass"> [${time.getHours()}:${time.getMinutes()}] </text> <text class="user"> guest</text>@local <text class="symbol">$</text> ${inputCmd} </text> <br/>`;
|
||||
if (inputCmd === "help") helpCmd();
|
||||
else if (inputCmd === "whois") whoIs();
|
||||
else if (inputCmd === "clear") clearCmd();
|
||||
else if (inputCmd === "social") social();
|
||||
else unknownCmd();
|
||||
output.innerHTML += `<br/>`;
|
||||
input.value = "";
|
||||
}
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
|
|
@ -1,249 +0,0 @@
|
|||
@import "mocha.css";
|
||||
|
||||
:root
|
||||
{
|
||||
--bg: var(--base00);
|
||||
--container: var(--base02);
|
||||
--text: var(--base07);
|
||||
--link: var(--base0D);
|
||||
}
|
||||
|
||||
*
|
||||
{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar
|
||||
{
|
||||
background-color: transparent;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track
|
||||
{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb
|
||||
{
|
||||
border-radius: 20px;
|
||||
border: 4px solid transparent;
|
||||
background-color: var(--base04);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
@font-face
|
||||
{
|
||||
font-family: Aller;
|
||||
src: url("../font/Aller.ttf");
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: var(--link);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--link);
|
||||
}
|
||||
|
||||
a:visited
|
||||
{
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
max-width: 50rem;
|
||||
margin: 2rem auto;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 16px;
|
||||
font-family: Aller;
|
||||
}
|
||||
|
||||
#container
|
||||
{
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 50px;
|
||||
border-radius: 15px;
|
||||
background-color: var(--container);
|
||||
}
|
||||
|
||||
#avatar
|
||||
{
|
||||
width: 100%;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.textBold
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.image-rank
|
||||
{
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-point
|
||||
{
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.count-text
|
||||
{
|
||||
position: relative;
|
||||
top: -7.5px;
|
||||
}
|
||||
|
||||
#box-0
|
||||
{
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#box-0-1
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#box-1
|
||||
{
|
||||
width: 100%;
|
||||
padding: 10px 10px 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.line
|
||||
{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 5px;
|
||||
background-color: var(--base04);
|
||||
}
|
||||
|
||||
#username
|
||||
{
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#rank
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.box-2
|
||||
{
|
||||
width: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7.5px;
|
||||
}
|
||||
|
||||
#box-3
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#box-4
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#other
|
||||
{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#boxProgress
|
||||
{
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
#progress
|
||||
{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
background-color: var(--base0C);
|
||||
}
|
||||
|
||||
#levelProgress
|
||||
{
|
||||
width: 100%;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 14px;
|
||||
color: var(--base00);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
{
|
||||
body
|
||||
{
|
||||
margin: 0 0;
|
||||
padding: 10px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#container
|
||||
{
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 25px;
|
||||
background-color: var(--container);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#box-0-1
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#box-0
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#box-1
|
||||
{
|
||||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
#avatar
|
||||
{
|
||||
position: relative;
|
||||
top: 20px;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.boxSmall
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
@import "mocha.css";
|
||||
|
||||
:root
|
||||
{
|
||||
--bg: var(--base00);
|
||||
--container: var(--base02);
|
||||
--text: var(--base07);
|
||||
--link: var(--base0D);
|
||||
--linkHover: var(--base09);
|
||||
}
|
||||
|
||||
*
|
||||
{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar
|
||||
{
|
||||
background-color: transparent;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track
|
||||
{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb
|
||||
{
|
||||
border-radius: 20px;
|
||||
border: 4px solid transparent;
|
||||
background-color: var(--base04);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
@font-face
|
||||
{
|
||||
font-family: Aller;
|
||||
src: url("../font/Aller.ttf");
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
margin: 2rem 2rem;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 16px;
|
||||
font-family: Aller;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited
|
||||
{
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
color: var(--linkHover);
|
||||
}
|
||||
|
||||
#container
|
||||
{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#containerTop
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#icon
|
||||
{
|
||||
width: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#containerTopText
|
||||
{
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
#containerBody
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#avatar
|
||||
{
|
||||
width: 250px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#name
|
||||
{
|
||||
font-weight: 750;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#containerBot
|
||||
{
|
||||
position: relative;
|
||||
left: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.contact
|
||||
{
|
||||
width: 35px;
|
||||
border-radius: 50%;
|
||||
filter: contrast(125%);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.contact:hover
|
||||
{
|
||||
transform: scale(1.5);
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,53 +0,0 @@
|
|||
function numberSeparator(x)
|
||||
{
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
|
||||
function getInformation()
|
||||
{
|
||||
fetch("https://caodoc-api.exozy.me/osu")
|
||||
.then(reponse => reponse.json())
|
||||
.then(data => {
|
||||
|
||||
//console.log(data);
|
||||
|
||||
document.getElementById("username").textContent = data.username;
|
||||
document.getElementById("avatar").src = data.avatarURL;
|
||||
document.getElementById("countryCode").textContent = data.userCountry;
|
||||
document.getElementById("globalRank").textContent = numberSeparator(data.globalRank);
|
||||
document.getElementById("countryRank").textContent = numberSeparator(data.countryRank);
|
||||
document.getElementById("userLevel").textContent = numberSeparator(data.userLevel);
|
||||
document.getElementById("pp").textContent = Math.round(data.pp);
|
||||
document.getElementById("rankedScore").textContent = numberSeparator(data.rankedScore);
|
||||
document.getElementById("totalScore").textContent = numberSeparator(data.totalScore);
|
||||
|
||||
let playTime = data.playTime;
|
||||
let secondADay = 86400;
|
||||
let secondAHour = 3600;
|
||||
let day = Math.floor(playTime / secondADay);
|
||||
playTime = playTime - secondADay * day;
|
||||
let hour = Math.floor(playTime / secondAHour);
|
||||
playTime = playTime - secondAHour * hour;
|
||||
//console.log(day);
|
||||
//console.log(hour);
|
||||
//console.log(playTime);
|
||||
document.getElementById("playTime").textContent = `${day}d ${hour}hrs`;
|
||||
|
||||
document.getElementById("playCount").textContent = numberSeparator(data.playCount);
|
||||
document.getElementById("totalHits").textContent = numberSeparator(data.totalHits);
|
||||
document.getElementById("hitAccuracy").textContent = `${data.hitAccuracy.toFixed(2)}%`;
|
||||
document.getElementById("maximumCombo").textContent = numberSeparator(data.maximumCombo);
|
||||
document.getElementById("count_300").textContent = numberSeparator(data.count_300);
|
||||
document.getElementById("count_100").textContent = numberSeparator(data.count_100);
|
||||
document.getElementById("count_50").textContent = numberSeparator(data.count_50);
|
||||
document.getElementById("progress").style.width = `${data.levelProgress}%`;
|
||||
document.getElementById("levelProgress").textContent = `${data.levelProgress}%`;
|
||||
document.getElementById("ssh").textContent = numberSeparator(data.SSH);
|
||||
document.getElementById("ss").textContent = numberSeparator(data.SS);
|
||||
document.getElementById("sh").textContent = numberSeparator(data.SH);
|
||||
document.getElementById("s").textContent = numberSeparator(data.S);
|
||||
document.getElementById("a").textContent = numberSeparator(data.A);
|
||||
});
|
||||
}
|
||||
|
||||
getInformation();
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 946 B |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 462 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB |
133
style.css
Normal file
133
style.css
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
@import "mocha.css";
|
||||
|
||||
@font-face
|
||||
{
|
||||
font-family: font;
|
||||
src: url(./JetBrainsMono-Light.woff2);
|
||||
}
|
||||
|
||||
:root
|
||||
{
|
||||
--bg: var(--base00);
|
||||
--text: var(--base05);
|
||||
--user: var(--base09);
|
||||
--help: var(--base08);
|
||||
--code: var(--base04);
|
||||
--link: var(--base0B);
|
||||
--socialHighlight: var(--base06);
|
||||
--version: var(--base06);
|
||||
--symbol: var(--base08);
|
||||
--logo: var(--base08);
|
||||
--warning: var(--base0E);
|
||||
--currentTime: var(--base0D);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar
|
||||
{
|
||||
background-color: transparent;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track
|
||||
{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb
|
||||
{
|
||||
border-radius: 20px;
|
||||
border: 4px solid transparent;
|
||||
background-color: var(--base04);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
padding: 0px 20px 0px 20px;
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: font;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
text-decoration: underline;
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.socialHighLight
|
||||
{
|
||||
color: var(--socialHighlight);
|
||||
}
|
||||
|
||||
input
|
||||
{
|
||||
width: 200px;
|
||||
background-color: var(--bg);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text);
|
||||
font-family: font;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#logo
|
||||
{
|
||||
color: var(--logo);
|
||||
}
|
||||
|
||||
#warning
|
||||
{
|
||||
color: var(--warning);
|
||||
text-transform: uppercase;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.user
|
||||
{
|
||||
color: var(--user);
|
||||
}
|
||||
|
||||
.help
|
||||
{
|
||||
padding: 0px 2.5px 0px 2.5px;
|
||||
background-color: var(--code);
|
||||
border-radius: 2.5px;
|
||||
color: var(--help);
|
||||
}
|
||||
|
||||
.currentTimeClass
|
||||
{
|
||||
color: var(--currentTime);
|
||||
}
|
||||
|
||||
.symbol
|
||||
{
|
||||
color: var(--symbol);
|
||||
}
|
||||
|
||||
#version
|
||||
{
|
||||
color: var(--base06);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px)
|
||||
{
|
||||
body
|
||||
{
|
||||
padding: 0px 5px 0px 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
input
|
||||
{
|
||||
width: 50vw;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#logo
|
||||
{
|
||||
font-size: 2vw;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue