diff --git a/index.html b/index.html index d0d719d..aa9c494 100644 --- a/index.html +++ b/index.html @@ -8,100 +8,52 @@ - + - + - + - + - caodoc + caodoc's exozyme site - +
-
- - Main page at caodoc.is-a.dev. - exozyme: caodoc:exozy.me -
- osu! - GitHub - Discord -
+ -
- -
-
Global: #
-
VN : #
-
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
- PP: - Ranked Score: - Total Score: - Play Count: - Total Hit: - Hit Accuracy: -
-
- Maximum Combo: - - - -
-
-
-
- Level -
-
%
-
- Total play time: +
+ + caodoc + caodoc's exozyme page +
+ + + + +
+ Visitor Count:
diff --git a/osu.html b/osu.html new file mode 100644 index 0000000..1a78275 --- /dev/null +++ b/osu.html @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + caodoc's osu! profile + + + + + + + + + +
+
+ + Main page at caodoc.is-a.dev. + exozyme: caodoc:exozy.me +
+ osu! + GitHub + Discord +
+
+
+ +
+
Global: #
+
VN : #
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ PP: + Ranked Score: + Total Score: + Play Count: + Total Hit: + Hit Accuracy: +
+
+ Maximum Combo: + + + +
+
+
+
+ Level +
+
%
+
+ Total play time: +
+
+
+ + + + \ No newline at end of file diff --git a/static/avatar.png b/static/avatar.png new file mode 100644 index 0000000..1f2c1c0 Binary files /dev/null and b/static/avatar.png differ diff --git a/static/contact/discord.png b/static/contact/discord.png new file mode 100644 index 0000000..75c59c7 Binary files /dev/null and b/static/contact/discord.png differ diff --git a/static/contact/forgejo.png b/static/contact/forgejo.png new file mode 100644 index 0000000..34e41e4 Binary files /dev/null and b/static/contact/forgejo.png differ diff --git a/static/contact/github.png b/static/contact/github.png new file mode 100644 index 0000000..6ced044 Binary files /dev/null and b/static/contact/github.png differ diff --git a/static/contact/osu.png b/static/contact/osu.png new file mode 100644 index 0000000..83c43a5 Binary files /dev/null and b/static/contact/osu.png differ diff --git a/static/css/osu.css b/static/css/osu.css new file mode 100644 index 0000000..5a2e152 --- /dev/null +++ b/static/css/osu.css @@ -0,0 +1,249 @@ +@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; + } +} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 5a2e152..1de9fc3 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -6,6 +6,7 @@ --container: var(--base02); --text: var(--base07); --link: var(--base0D); + --linkHover: var(--base09); } * @@ -38,212 +39,99 @@ 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; + 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 { - padding: 20px; + width: 100%; + display: flex; + flex-direction: column; + gap: 50px; + font-size: 24px; +} + +#containerTop +{ display: flex; flex-direction: row; - gap: 50px; - border-radius: 15px; - background-color: var(--container); + 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: 100%; - border-radius: 50px; + width: 250px; + border-radius: 50%; } -.textBold +#name { - 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-weight: 750; font-size: 32px; } -#rank +#containerBot { + position: relative; + left: 5px; display: flex; flex-direction: row; - justify-content: space-between; - font-size: 20px; + gap: 25px; } -.box-2 +.contact { - width: 200px; - display: flex; - flex-direction: column; - gap: 7.5px; + width: 35px; + border-radius: 50%; + filter: contrast(125%); + transition: transform 0.2s; } -#box-3 +.contact:hover { - 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; - } + transform: scale(1.5); } \ No newline at end of file diff --git a/static/js/osu.js b/static/js/osu.js new file mode 100644 index 0000000..f3a3f36 --- /dev/null +++ b/static/js/osu.js @@ -0,0 +1,53 @@ +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(); \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index f3a3f36..0ed966d 100644 --- a/static/js/script.js +++ b/static/js/script.js @@ -1,53 +1,34 @@ -function numberSeparator(x) +const visitorCount = document.getElementById("visitor-count"); + +if (!localStorage.getItem("lastVisited")) { - return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + const date = new Date(); + console.log(date); + localStorage.setItem("lastVisited", date.getDate()); } -function getInformation() +if (!localStorage.getItem("count")) { - fetch("https://caodoc-api.exozy.me/osu") + fetch("https://caodoc-api.exozy.me/new_visitor/exozyme") .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); + localStorage.setItem("count", data.count); + visitorCount.textContent = data.count; }); } -getInformation(); \ No newline at end of file +visitorCount.textContent = localStorage.getItem("count"); + +const date = new Date(); +if (date.getDate() != localStorage.getItem("lastVisited")) +{ + fetch("https://caodoc-api.exozy.me/new_visitor/exozyme") + .then(reponse => reponse.json()) + .then(data => { + visitorCount.textContent = data.count; + }); + + const date = new Date(); + console.log(date); + localStorage.setItem("lastVisited", date.getDate()); +} \ No newline at end of file diff --git a/static/preview/preview.png b/static/preview/osu.png similarity index 100% rename from static/preview/preview.png rename to static/preview/osu.png