From fa449b000437d777d2bb2255780c2f2a617051d4 Mon Sep 17 00:00:00 2001 From: "Glitch (t404null-unstable)" Date: Tue, 4 Feb 2025 18:51:15 +0000 Subject: [PATCH] New UI Update, still WIP --- activity/index.html | 2 +- assets/css/main.css | 33 ++- assets/css/old.css | 708 ++++++++++++++++++++++++++++++++++++++++++++ assets/js/index.js | 41 ++- index.html | 4 +- 5 files changed, 768 insertions(+), 20 deletions(-) create mode 100644 assets/css/old.css diff --git a/activity/index.html b/activity/index.html index 581ff11..8b73cf8 100644 --- a/activity/index.html +++ b/activity/index.html @@ -231,7 +231,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o Li4tLiAuLS0gLS4uIC0tLi4u
\-...-4buoe2v1qZuiULSrOPuzXZBn
YZt0ULSr9PuzvfuiaZwo5ZBseZB39
fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO

- +
=1335px)*/ +@media screen and (width >= 1125px) and (width<=1620px) { + /*if(width<1620px&&width>=1125px)*/ nav { .dropdown { @@ -666,8 +669,8 @@ nav { } } -@media screen and not (min-width: 1125px) { - /*if(width<1185px)*/ +@media screen and (width<1125px) { + /*if(width<1125px)*/ nav { font-size: 1.4rem; diff --git a/assets/css/old.css b/assets/css/old.css new file mode 100644 index 0000000..b04bfec --- /dev/null +++ b/assets/css/old.css @@ -0,0 +1,708 @@ +@import url("/assets/css/fonts/jost.css"); +@import url("/assets/css/fonts/noto-sans-jp.css"); +@import url("/assets/css/fonts/plus-jarkata-sans.css"); +body { + margin: 0px; + height: 100%; +} +main { + font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; + margin: 0.75rem; + height: 100%; + margin-bottom: 0; + margin-top: 0; + min-height: calc(100vh - 10vh); +} +hr { + margin: 2rem 0px; +} +nav { + z-index: 4; + position: -webkit-sticky; + position: sticky; + /* width:100%; + */ + top: 10px; + background-color: #f5f5f5; + font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, + --apple-system; + font-size: 1.25rem; + padding: 4px; + margin: 10px; + margin-top: 15px; + border-radius: 12px; + box-shadow: 0px 0px 12px 0.1px #d0d0d0; + display: grid; + grid-template-columns: auto 1fr auto; +} +nav ul { + padding-left: 15px; + list-style-type: none; + margin: 0px; + align-content: center; +} +nav ul li { + display: inline-block; + padding-right: 4px; + vertical-align: middle; +} +nav ul li p { + padding-top: 0.4rem; + vertical-align: middle; + margin: 0.5rem 1rem; +} +nav ul img { + margin-top: 0.25rem; + height: 1.5rem; + vertical-align: middle; + padding-right: 0.3rem; +} +nav a { + color: black; + text-decoration: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +nav .vertical-line { + width: 0.1rem; + background-color: black; + height: 100%; +} +nav .social { + font-size: 2.5rem; + padding-bottom: 0.4rem; + transition: 0.3s; +} +nav .social:hover { + opacity: 50%; +} +nav .dropdown { + margin: 0.75rem; + position: absolute; + background-color: #f5f5f5; + box-shadow: 0px 0px 12px 0.1px #d0d0d0; + padding: 0.25rem 0.5rem; + border-radius: 7px; + right: 0; + top: 6rem; + display: none; + opacity: 0; + transition: 0.3s; +} +.footer { + font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif; + position: sticky; + /* width: 100%; + */ + background-color: white; + /* bottom: 0; + */ + /* left:0; + */ + z-index: 3; + padding: 1rem; + background-color: #ddd; + margin: 0px; + text-align: center; + align-content: center; +} +/*---nav---*/ +.menu { + padding-top: 0.4rem; + padding-bottom: 0.8rem; +} +.menu p { + background-size: 0% 0.2em; + background-image: linear-gradient(#000, #000); + background-position-y: 104%; + background-position-x: 0%; + background-repeat: no-repeat; + transition: 0.3s ease-in-out; +} +.menu p:hover, +.menu .currentpage { + opacity: 60%; + background-size: 100% 0.2em; +} +.burger { + border: none; + display: none; + width: 70px; + height: 70px; + margin: 0 0; + position: relative; + position: relative; + cursor: pointer; + background-color: #f5f5f5; + border-radius: 12px; + transition: 0.2s ease-in-out; +} +.burger span { + transition: 0.2s ease-in-out; + box-sizing: border-box; + display: block; + background-color: #000; + border-radius: 2px; +} +.burger #hamburger { + position: absolute; + height: 100%; + width: 100%; + top: 0%; + left: 0%; +} +.burger #hamburger span { + width: 70%; + height: 5%; + top: 17.5%; + left: 16%; + position: relative; + margin: 12% 0; +} +.burger #hamburger span:nth-child(1) { + transition-delay: 0.2s; +} +.burger #hamburger span:nth-child(2) { + transition-delay: 0.3s; +} +.burger #hamburger span:nth-child(3) { + transition-delay: 0.4s; +} +.burger #cross { + position: absolute; + height: 100%; + width: 100%; + top: 0%; + left: 1.5%; + transform: rotate(45deg); +} +.burger #cross span:nth-child(1) { + height: 0%; + width: 5%; + position: absolute; + right: 46%; + /*a / */ + top: 10%; + transform: translate(-50%); + transition-delay: 0s; +} +.burger #cross span:nth-child(2) { + width: 0%; + height: 5%; + position: absolute; + right: 11%; + top: 48%; + transition-delay: 0s; +} +.burger:hover { + opacity: 40%; +} +.burger.open #hamburger span { + width: 0%; +} +.burger.open #hamburger span:nth-child(1) { + transition-delay: 0s; +} +.burger.open #hamburger span:nth-child(2) { + transition-delay: 0.1s; +} +.burger.open #hamburger span:nth-child(3) { + transition-delay: 0.2s; +} +.burger.open #cross span:nth-child(1) { + height: 80%; + transition-delay: 0.3s; +} +.burger.open #cross span:nth-child(2) { + width: 80%; + transition-delay: 0.3s; +} +.dropdown { + display: none; +} +/*---- main ----*/ +.container { + position: relative; + height: 50vw; + width: 100%; + margin: auto; + margin-top: 1rem; +} +.carousel { + z-index: 1; + width: 100%; + height: 100%; + border: 1px solid #ddd; + border-radius: 0.5rem; + position: relative; + overflow: hidden; +} +.slider-bg { + height: 100%; + width: 100%; + overflow: hidden; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + background-position: center; + filter: blur(5px) brightness(75%); + -webkit-filter: blur(5px) brightness(60%); + z-index: 1; + position: absolute; + display: flex; + justify-content: center; + align-content: center; + transition: 0.3s; + padding: auto; + border-radius: 0.5rem; + transform: scale(1.1); +} +.slider section { + overflow: hidden; + z-index: 1; + position: absolute; + display: flex; + justify-content: center; + align-content: center; + transition: 0.3s; + padding: auto; + width: 100%; + height: 100%; + border-radius: 0.5rem; + font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, + --apple-system; +} +.slider section div { + color: #fff; + position: relative; + z-index: 2; + margin: 0px; + display: grid; + justify-content: center; + grid-template-rows: 3.5fr 1fr 1fr 5rem; + grid-template-columns: 1fr auto 1fr; +} +.slider section h1 { + font-size: 2rem; + grid-row-start: 2; + grid-row-end: 3; +} +.slider section p { + font-size: 1.25rem; + grid-row-start: 3; + grid-row-end: 4; +} +.slider section p, +.slider section h1 { + width: 60vw; + text-align: center; + grid-column-start: 2; + /*|•|*/ + grid-column-end: 3; +} +.slider:hover { + cursor: pointer; +} +.prev, +.next { + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + position: absolute; + height: 5rem; + width: 5rem; + font-size: 4.5rem; + top: 50%; + transform: translate(0, -50%); + z-index: 2; + cursor: pointer; + border-radius: 0.5rem; + font-family: serif; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.next { + right: 1rem; +} +.prev { + left: 1rem; +} +.pgctrl { + font-family: sans-serif, --apple-system; + z-index: 1; + position: absolute; + bottom: 0.5rem; + left: 50%; + vertical-align: middle; + transform: translate(-50%); + padding: 0px 0.5rem; + margin: 0px 0px; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 10px; + list-style: none; + display: flex; + z-index: 2; + font-size: 4rem; + color: white; + cursor: pointer; + transition: 0.75s; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.control { + text-align: center; +} +/* Cards */ +.album-cards { + margin: auto; + margin-bottom: 2.5rem; + justify-content: center; + display: grid; + grid-template-rows: repeat(auto-fill, 23rem); + grid-template-columns: repeat(auto-fill, 23rem); + grid-gap: 1rem; +} +.album-cards .card { + transition: 0.75s; + color: black; + background-color: #ddd; + height: 23rem; + border-radius: 7px; + text-decoration: none; +} +.album-cards .card div { + z-index: 1; + position: inherit; + height: 100%; + width: 100%; + background-color: #ddd; + border-radius: 7px; + transition: 0.5s; +} +.album-cards .card h2 { + font-size: 1.9rem; +} +.album-cards .card p { + font-size: 1.2rem; +} +.album-cards .card h2, +.album-cards .card p { + color: white; + padding: 0.3rem 0.75rem 0.3rem 0.75rem; + position: relative; + z-index: 3; + opacity: 0; + transition: 0.5s; +} +.album-cards .card .bg-img { + /* background: url(/assets/img/t404_null-logo.png); + */ + background-size: cover; + position: absolute; + height: 23rem; + width: 23rem; +} +.album-cards .card:hover .bg-img { + filter: blur(5px) brightness(50%); + -webkit-filter: blur(5px) brightness(50%); +} +.album-cards .card:hover h2, +.album-cards .card:hover p { + filter: none; + opacity: 1; +} +.half-image-cards { + margin: auto; + margin-bottom: 2.5rem; + justify-content: center; + display: grid; + grid-template-rows: repeat(auto-fill, 30rem); + grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem)); + grid-gap: 1rem; +} +.half-image-cards .card { + transition: 0.75s; + color: black; + background-color: #ddd; + height: 30rem; + border-radius: 7px; + text-decoration: none; +} +.half-image-cards .card div { + z-index: 1; + position: inherit; + height: 100%; + width: 100%; + background-color: #ddd; + border-radius: 7px; + transition: 0.5s; +} +.half-image-cards .card h2 { + font-size: 1.9rem; +} +.half-image-cards .card p { + font-size: 1.1rem; +} +.half-image-cards .card h2, +.half-image-cards .card p { + /* color: black; + */ + padding: 0.3rem 10vw 0.3rem 5vw; + position: relative; + z-index: 3; + opacity: 0; + transition: 0.5s; +} +.half-image-cards .card .bg-img { + /* background: url(/assets/img/t404_null-logo.png); + */ + background-size: cover; + position: absolute; + background-position: center left; + height: 30rem; + width: 30rem; +} +.half-image-cards .card:hover .bg-img { + filter: brightness(40%); + -webkit-filter: brightness(40%); + width: 8vw; + border-radius: 7px 0px 0px 7px; +} +.half-image-cards .card:hover h2, +.half-image-cards .card:hover p { + padding: 0.3rem 5vw 0.3rem 10vw; + filter: none; + opacity: 1; +} +.contact-cards { + display: grid; + grid-template-columns: repeat(auto-fill, 23rem); + grid-gap: 1rem; + justify-content: center; + padding: 0; +} +.contact-cards li { + border-radius: 7px; + background-color: #ddd; +} +.topic { + padding: 1rem; + font-size: 3rem; + margin-top: 3vw; + margin-bottom: 7vw; +} +.topic a { + text-decoration: none; + color: black; + background-size: 0% 0.2em; + background-image: linear-gradient(black, black); + background-position-y: 104%; + background-position-x: 0%; + background-repeat: no-repeat; + transition: 0.3s ease-in-out; +} +.topic a:hover { + opacity: 70%; + background-size: 100% 0.2em; +} +/* overall */ +.icons { + font-size: 2.25rem; + font-weight: 500; +} +@font-face { + font-family: "NerdFontsSymbols Nerd Font"; + src: url("/assets/fonts/nf-symbols.woff2") format("woff2"); +} +.nf-icons { + font-family: "NerdFontsSymbols Nerd Font"; +} +/* Releases */ +.release-track { + background-size: cover; + background-position: center; + height: 100%; + min-height: calc(100vh - 25rem); + padding: 5vw 5vw; + border-radius: 10px; + border: 1px solid #ddd; +} +.release-track strong { + color: #fff; +} +.release-track .text-box { + margin: 25% 0; + background-color: rgba(0, 0, 0, 75); + height: 100%; + color: #ddd; + padding: 2rem; + border-radius: 7px; + font-size: 1.2rem; +} +.release-track .text-box a { + text-decoration: none; + color: #fff; + background-size: 0% 0.2em; + background-image: linear-gradient(#ccc, #ccc); + background-position-y: 104%; + background-position-x: 0%; + background-repeat: no-repeat; + transition: 0.3s ease-in-out; +} +.release-track .text-box a:hover { + color: #ccc; + background-size: 100% 0.2em; +} +/* info */ +.info { + text-decoration: none; + list-style-type: none; + font-size: 1.4rem; +} +.info li { + padding: 1rem; +} +.info a { + text-decoration: none; + color: #46f; + background-size: 0% 0.2em; + background-image: linear-gradient(#46f, #46f); + background-position-y: 104%; + background-position-x: 0%; + background-repeat: no-repeat; + transition: 0.3s ease-in-out; +} +.info a:hover { + opacity: 70%; + background-size: 100% 0.2em; +} +.info .title { + font-size: 1.6rem; +} +.subdiv { + padding: 1rem; +} +.long-br { + display: block; + height: 2rem; +} +@media screen and (width >= 1125px) and (width<=1620px) { + /*if(width<1620px&&width>=1125px)*/ + nav .dropdown .dropdown-social { + position: relative; + width: 17.5rem; + padding: 0rem 0rem; + } + nav .dropdown .dropdown-social a { + transition: 0.2s; + display: flex; + padding: 1rem; + border-radius: 7px; + margin: 0.3rem 0; + } + nav .dropdown .dropdown-social a:hover { + background-color: #ddd; + } + nav .dropdown .dropdown-social strong { + margin-left: auto; + margin-right: auto; + align-content: center; + } + nav .dropdown .dropdown-social p { + margin: 0.5rem 0; + } + nav .dropdown .dropdown-menu { + display: none; + } + nav .menu, + nav .dropdown-open.dropdown, + nav .dropdown-open.dropdown-social { + opacity: 1; + display: initial; + } + nav .social, + nav .dropdown-open.dropdown-menu { + opacity: 0; + display: none; + } + nav .burger { + display: block; + } +} +@media screen and (width<1125px) { + /*if(width<1125px)*/ + nav { + font-size: 1.4rem; + } + nav ul img { + height: 2.5rem; + } + nav .social { + font-size: 2rem; + } + nav .burger { + height: 100px; + width: 100px; + } + nav .dropdown .dropdown-social, + nav .dropdown .dropdown-menu { + position: relative; + } + nav .dropdown .dropdown-menu { + width: 18rem; + padding: 0rem 0rem; + } + nav .dropdown .dropdown-social { + display: flex; + flex-wrap: wrap; + } + nav .dropdown .dropdown-menu p, + nav .dropdown .dropdown-social a { + transition: 0.2s; + padding: 1rem; + border-radius: 7px; + margin: 0.3rem 0; + } + nav .dropdown .dropdown-menu p:hover { + background-color: #ddd; + } + nav .dropdown .dropdown-social a:hover { + opacity: 50%; + } + nav .dropdown hr { + margin: 0.75rem 0rem; + padding: 1rem; + border: 1px solid #aaa; + } + nav .social-name { + display: none; + } + nav .social, + nav .menu-item { + display: none; + } + nav .dropdown-open { + transition: 0.3s; + opacity: 1; + display: initial; + } + nav .dropdown-open .dropdown, + nav .dropdown-open .dropdown-social, + nav .dropdown-open .downdown-menu { + display: initial; + } + nav .burger { + display: block; + } +} diff --git a/assets/js/index.js b/assets/js/index.js index 169cc80..796bb52 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -6,12 +6,41 @@ let carousel = document.querySelector(".carousel"); let bg = document.querySelector(".slider-bg"); +/* + + + +*/ + let img = [ "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464", "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Oblitus_Requiem.png?v=1693055600835", - "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png?v=1683474226492", + "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png", ]; -let pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"]; +let pg = [ + "/", + "release/Oblitus_Requiem", + "release/A_Lake_With_Endless_Stars" +]; + if (!document) console.log("press f"); if (!next) console.log("Class next missing."); @@ -50,6 +79,14 @@ function set() { if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`; } + +// setInterval(getinfo, 60000); +// async function getinfo() { +// let res = await fetch(""); +// const info = await res.json(); +// if (bg) bg.style.backgroundImage = `url('${info.slider[1].img}')`; +// } + function reset() { for (var i = 0; i < slider.children.length; i++) { slider.children[i].style.opacity = 0; diff --git a/index.html b/index.html index b6f8c2f..8056f6a 100644 --- a/index.html +++ b/index.html @@ -192,7 +192,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o

This page is still under construction.

-

The page is still under development, in cases, this page will change after reload or after a few days and a reload.

+

The page is still under development. In cases, this page will change after reload or after a few days and a reload.

@@ -300,7 +300,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o

???

Li4tLiAuLS0gLS4uIC0tLi4u
\-...-4buoe2v1qZuiULSrOPuzXZBn
YZt0ULSr9PuzvfuiaZwo5ZBseZB39
fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO

- +