mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-06 06:20:30 +02:00
catppuccin mocha theme change
This commit is contained in:
zyqunix
parent
4196c4127f
commit
fac92c3d72
7 changed files with 741 additions and 311 deletions
0
assets/css/frappe.css
Normal file
0
assets/css/frappe.css
Normal file
311
assets/css/latte.css
Normal file
311
assets/css/latte.css
Normal file
|
|
@ -0,0 +1,311 @@
|
||||||
|
@import url(/global.css);
|
||||||
|
|
||||||
|
img {
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: #4c4f69;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #eff1f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.languages {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 900;
|
||||||
|
color: #1e66f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#profile-picture {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time,
|
||||||
|
.weather,
|
||||||
|
.age,
|
||||||
|
.hobbies {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #5c5f77;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hobbies {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards {
|
||||||
|
background-color: #e6e9ef;
|
||||||
|
border: 2px solid #bcc0cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards:hover {
|
||||||
|
border: 2px solid #acb0be;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 10px 0 15px 10px;
|
||||||
|
color: #7287fd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#activity-name {
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: left;
|
||||||
|
color: #5c5f77;
|
||||||
|
}
|
||||||
|
|
||||||
|
#activity-image {
|
||||||
|
display: block;
|
||||||
|
height: 36px;
|
||||||
|
width: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.languages,
|
||||||
|
.contact,
|
||||||
|
.software {
|
||||||
|
margin-top: 30px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-item {
|
||||||
|
display: block;
|
||||||
|
background-color: #dde0e8;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: background-color 0.3s, transform 0.2s;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-item:hover {
|
||||||
|
background-color: #ccd0da;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-item:hover span,
|
||||||
|
.language-item:hover .language-name {
|
||||||
|
color: #1e66f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-percent-container {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[class="name-percent-container"] > img.image {
|
||||||
|
width: 30px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-item .language-name,
|
||||||
|
.language-item .percent {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #6c6f85;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.percentage-bar {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
background-color: #bcc0cc;
|
||||||
|
margin-top: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.percentage-bar .bar-after {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, #40a02b 0%, #a6e3a1 50%, #40a02b 100%);
|
||||||
|
border-radius: 5px;
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 2s infinite ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-item:hover .percentage-bar .bar-after {
|
||||||
|
background: linear-gradient(to right, #179299 0%, #04a5e5 50%, #179299 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip::after,
|
||||||
|
a[class="skill-item tooltip"]::after,
|
||||||
|
a[class^="software-item tooltip"]::after {
|
||||||
|
content: attr(data-tooltip);
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 125%;
|
||||||
|
background-color: #dce0e8;
|
||||||
|
border: 2px solid #ccd0da;
|
||||||
|
color: #4c4f69;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 0.3s, visibility 0.3s;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover::after {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: 100% 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: -100% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#skills-div:not(#skills-div > h2) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 15px;
|
||||||
|
margin: 20px auto 0 auto;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.software:not(.software > h2) {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-item,
|
||||||
|
.contact-item,
|
||||||
|
.software-item {
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #dde0e8;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: background-color 0.3s, transform 0.2s;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-item {
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-item:hover,
|
||||||
|
.software-item:hover {
|
||||||
|
background-color: #ccd0da;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
filter: brightness(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-item:hover .skill-name {
|
||||||
|
color: #1e66f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-item > .image,
|
||||||
|
.software-item > .image {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
filter: brightness(0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-item:hover > .image,
|
||||||
|
.software-item:hover > .image {
|
||||||
|
filter: brightness(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.software-item > .image {
|
||||||
|
height: 50px !important;
|
||||||
|
border-radius: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-name,
|
||||||
|
.contact-name,
|
||||||
|
.software-name {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #6c6f85;
|
||||||
|
transition: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
color: #4c4f69;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-item:hover .contact-name,
|
||||||
|
.software-item:hover .software-name {
|
||||||
|
color: #1e66f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-contact {
|
||||||
|
background-color: #dce0e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-contact:hover {
|
||||||
|
background-color: #ccd0da;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instagram-contact {
|
||||||
|
background-color: #f2d5cf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instagram-contact:hover {
|
||||||
|
background-color: #eebebe;
|
||||||
|
}
|
||||||
0
assets/css/mocha.css
Normal file
0
assets/css/mocha.css
Normal file
|
|
@ -1,19 +1,19 @@
|
||||||
@import url(/global.css);
|
@import url(/global.css);
|
||||||
|
|
||||||
img {
|
img {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: #ffffff;
|
color: #cdd6f4;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #2a2a2a;
|
background-color: #1e1e2e;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -24,7 +24,7 @@ body {
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #dddddd;
|
color: #cdd6f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
|
|
@ -35,7 +35,7 @@ strong {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 3px solid #80848e;
|
border: 3px solid #b4befe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
|
|
@ -45,47 +45,47 @@ strong {
|
||||||
|
|
||||||
.time,
|
.time,
|
||||||
.weather {
|
.weather {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
color: #cccccc;
|
color: #bac2de;
|
||||||
}
|
}
|
||||||
|
|
||||||
.age {
|
.age {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
color: #cccccc;
|
color: #bac2de;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hobbies {
|
.hobbies {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #cccccc;
|
color: #bac2de;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards {
|
.cards {
|
||||||
margin-top: 30px !important;
|
margin-top: 30px !important;
|
||||||
background-color: #252525;
|
background-color: #313244;
|
||||||
border: 2px solid #333;
|
border: 2px solid #45475a;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 600px !important;
|
width: 600px !important;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||||
transition: border 0.1s;
|
transition: border 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards:hover {
|
.cards:hover {
|
||||||
border: 2px solid #444;
|
border: 2px solid #585b70;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-bottom: 50px !important;
|
margin-bottom: 50px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#status {
|
#status {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 10px 0 15px 10px;
|
margin: 10px 0 15px 10px;
|
||||||
color: #cccccc;
|
color: #bac2de;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity {
|
.activity {
|
||||||
|
|
@ -100,7 +100,7 @@ footer {
|
||||||
#activity-name {
|
#activity-name {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #cccccc;
|
color: #bac2de;
|
||||||
}
|
}
|
||||||
|
|
||||||
#activity-image {
|
#activity-image {
|
||||||
|
|
@ -118,7 +118,7 @@ footer {
|
||||||
|
|
||||||
.language-item {
|
.language-item {
|
||||||
display: block;
|
display: block;
|
||||||
background-color: #2b2b2b;
|
background-color: #313244;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
transition: background-color 0.3s, transform 0.2s;
|
transition: background-color 0.3s, transform 0.2s;
|
||||||
|
|
@ -127,13 +127,13 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.language-item:hover {
|
.language-item:hover {
|
||||||
background-color: #3b3b3b;
|
background-color: #45475a;
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.language-item:hover span,
|
.language-item:hover span,
|
||||||
.language-item:hover .language-name {
|
.language-item:hover .language-name {
|
||||||
color: #f0f0f0;
|
color: #f5e0dc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name-percent-container {
|
.name-percent-container {
|
||||||
|
|
@ -149,18 +149,17 @@ div[class="name-percent-container"] > img.image {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.language-item .language-name {
|
.language-item .language-name {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #aaaaaa;
|
color: #a6adc8;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.language-item .percent {
|
.language-item .percent {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #aaaaaa;
|
color: #a6adc8;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -168,7 +167,7 @@ div[class="name-percent-container"] > img.image {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
background-color: #444;
|
background-color: #585b70;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -178,16 +177,15 @@ div[class="name-percent-container"] > img.image {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #00aa00;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: linear-gradient(to right, #005500 0%, #009900 50%, #005500 100%);
|
background: linear-gradient(to right, #b4befe 0%, #cba6f7 50%, #b4befe 100%);
|
||||||
background-size: 200% 100%;
|
background-size: 200% 100%;
|
||||||
animation: shimmer 2s infinite ease-in;
|
animation: shimmer 2s infinite ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
.language-item:hover .percentage-bar .bar-after {
|
.language-item:hover .percentage-bar .bar-after {
|
||||||
background: linear-gradient(to right, #008800 0%, #00ff00 50%, #008800 100%);
|
background: linear-gradient(to right, #cdd6f4 0%, #b4befe 50%, #cdd6f4 100%);
|
||||||
animation: shimmer 2s infinite ease-in;
|
animation: shimmer 2s infinite ease-in;
|
||||||
background-size: 200% 100%;
|
background-size: 200% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -197,15 +195,17 @@ div[class="name-percent-container"] > img.image {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip::after {
|
.tooltip::after,
|
||||||
|
a[class="skill-item tooltip"]::after,
|
||||||
|
a[class^="software-item tooltip"]::after {
|
||||||
content: attr(data-tooltip);
|
content: attr(data-tooltip);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
bottom: 125%;
|
bottom: 125%;
|
||||||
background-color: #2a2a2a;
|
background-color: #1e1e2e;
|
||||||
border: 2px solid rgba(150, 150, 150, 0.1);
|
border: 2px solid #6c7086;
|
||||||
color: #fff;
|
color: #cdd6f4;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -213,45 +213,16 @@ div[class="name-percent-container"] > img.image {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: opacity 0.3s, visibility 0.3s;
|
transition: opacity 0.3s, visibility 0.3s;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
a[class="skill-item tooltip"]::after {
|
a[class="skill-item tooltip"]::after {
|
||||||
content: attr(data-tooltip);
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
bottom: 110%;
|
bottom: 110%;
|
||||||
background-color: #2a2a2a;
|
|
||||||
border: 2px solid rgba(150, 150, 150, 0.1);
|
|
||||||
color: #fff;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 14px;
|
|
||||||
white-space: nowrap;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: opacity 0.3s, visibility 0.3s;
|
|
||||||
cursor: default;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a[class^="software-item tooltip"]::after {
|
a[class^="software-item tooltip"]::after {
|
||||||
content: attr(data-tooltip);
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
background-color: #2a2a2a;
|
|
||||||
border: 2px solid rgba(150, 150, 150, 0.1);
|
|
||||||
color: #fff;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
white-space: nowrap;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: opacity 0.3s, visibility 0.3s;
|
|
||||||
cursor: default;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip:hover::after {
|
.tooltip:hover::after {
|
||||||
|
|
@ -293,77 +264,53 @@ a[class^="software-item tooltip"]::after {
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-item {
|
.skill-item,
|
||||||
text-decoration: none;
|
.contact-item,
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #3b3b3b;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: background-color 0.3s, transform 0.2s;
|
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-item {
|
|
||||||
text-decoration: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #3b3b3b;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: background-color 0.3s, transform 0.2s;
|
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
text-align: center;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.software-item {
|
.software-item {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: #3b3b3b;
|
background-color: #313244;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
transition: background-color 0.3s, transform 0.2s;
|
transition: background-color 0.3s, transform 0.2s;
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill-item {
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-item:hover,
|
.skill-item:hover,
|
||||||
.software-item:hover {
|
.software-item:hover {
|
||||||
background-color: #4d4d4d;
|
background-color: #45475a;
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
filter: brightness(1);
|
filter: brightness(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-item:hover .skill-name {
|
.skill-item:hover .skill-name {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-item > .image,
|
.skill-item > .image,
|
||||||
.software-item > .image {
|
.software-item > .image {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
filter: brightness(0.75);
|
filter: brightness(0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-item:hover > .image,
|
.skill-item:hover > .image,
|
||||||
.software-item:hover> .image {
|
.software-item:hover > .image {
|
||||||
filter: brightness(1);
|
filter: brightness(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.software-item > .image {
|
.software-item > .image {
|
||||||
|
|
@ -373,25 +320,25 @@ a[class^="software-item tooltip"]::after {
|
||||||
|
|
||||||
.skill-name {
|
.skill-name {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #aaaaaa;
|
color: #a6adc8;
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-name,
|
.contact-name,
|
||||||
.software-name {
|
.software-name {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #ccc;
|
color: #bac2de;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-item > .image,
|
.contact-item > .image,
|
||||||
.software-item > .image {
|
.software-item > .image {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
color: white;
|
color: #cdd6f4;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
|
|
@ -399,151 +346,137 @@ a[class^="software-item tooltip"]::after {
|
||||||
|
|
||||||
.contact-item:hover .contact-name,
|
.contact-item:hover .contact-name,
|
||||||
.software-item:hover .software-name {
|
.software-item:hover .software-name {
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.github-contact {
|
.github-contact {
|
||||||
background-color: #040404;
|
background-color: #11111b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.github-contact:hover {
|
.github-contact:hover {
|
||||||
background-color: #080808;
|
background-color: #1e1e2e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.instagram-contact {
|
.instagram-contact {
|
||||||
background-color: #c13584;
|
background-color: #b4befe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instagram-contact > span,
|
||||||
|
.twitter-contact > span,
|
||||||
|
.youtube-contact > span {
|
||||||
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.instagram-contact:hover {
|
.instagram-contact:hover {
|
||||||
background-color: #d44190;
|
background-color: #cba6f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.twitter-contact {
|
.twitter-contact {
|
||||||
background-color: #1da1f2;
|
background-color: #89b4fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.twitter-contact:hover {
|
.twitter-contact:hover {
|
||||||
background-color: #33b2ff;
|
background-color: #b5befe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.youtube-contact {
|
.youtube-contact {
|
||||||
background-color: #e03535;
|
background-color: #f38ba8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.youtube-contact:hover {
|
.youtube-contact:hover {
|
||||||
background-color: #ff4444;
|
background-color: #eba0ac;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.cards {
|
.cards {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 80% !important;
|
max-width: 80% !important;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
.language-item {
|
||||||
.language-item {
|
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.language-item img.image {
|
.language-item img.image {
|
||||||
height: 1px;
|
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 17px;
|
height: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.language-item .language-name {
|
.language-item .language-name {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.language-item .percent {
|
.language-item .percent {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
a > img {
|
||||||
a > img {
|
height: 25px;
|
||||||
height: 25px;
|
}
|
||||||
}
|
.popup {
|
||||||
|
|
||||||
.music-pop {
|
|
||||||
width: 90%;
|
width: 90%;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#song-cover {
|
#song-cover {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top button,
|
.top button,
|
||||||
#song-url,
|
#song-url,
|
||||||
#refresh {
|
#refresh {
|
||||||
max-width: 28px;
|
max-width: 28px;
|
||||||
max-height: 28px;
|
max-height: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.cards {
|
.cards {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 80% !important;
|
max-width: 80% !important;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: 15px;
|
margin: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
.time,
|
||||||
.time, .age, .hobbies {
|
.age,
|
||||||
|
.hobbies {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#profile-picture {
|
#profile-picture {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
|
.stat-img {
|
||||||
.stat-img {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-item,
|
.skill-item,
|
||||||
.contact-item,
|
.contact-item,
|
||||||
.software-item {
|
.software-item {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
a > img {
|
||||||
a > img {
|
height: 25px;
|
||||||
height: 25px;
|
}
|
||||||
}
|
.popup {
|
||||||
|
|
||||||
.music-pop {
|
|
||||||
width: 95%;
|
width: 95%;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.song {
|
.song {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.song > div:nth-of-type(2) {
|
.song > div:nth-of-type(2) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#song-cover {
|
#song-cover {
|
||||||
width: 56px;
|
width: 56px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top button {
|
.top button {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
|
|
@ -555,62 +488,52 @@ a[class^="software-item tooltip"]::after {
|
||||||
.name {
|
.name {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
.time,
|
||||||
.time, .age, .hobbies {
|
.age,
|
||||||
|
.hobbies {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#profile-picture {
|
#profile-picture {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards {
|
.cards {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: 80% !important;
|
max-width: 80% !important;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill-item,
|
.skill-item,
|
||||||
.contact-item,
|
.contact-item,
|
||||||
.software-item {
|
.software-item {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
a > img {
|
||||||
a > img {
|
transform: scale(0.75);
|
||||||
transform: scale(0.75);
|
}
|
||||||
}
|
.software-name {
|
||||||
|
font-size: 10px;
|
||||||
.software-name {
|
}
|
||||||
font-size: 10px;
|
.popup {
|
||||||
}
|
|
||||||
|
|
||||||
.music-pop {
|
|
||||||
width: 95%;
|
width: 95%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.song {
|
.song {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.song > div:nth-of-type(2) {
|
.song > div:nth-of-type(2) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#song-cover {
|
#song-cover {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top button {
|
.top button {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -625,95 +548,94 @@ div[class="stats cards"] > h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
div[class="stats cards"] > p {
|
div[class="stats cards"] > p {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: #AAAAAA;
|
color: #a6adc8;
|
||||||
}
|
}
|
||||||
|
|
||||||
div[class="cards sitemap shadow"] > h3,
|
div[class="cards sitemap shadow"] > h3,
|
||||||
div[class="cards sitemap shadow"] > h4 {
|
div[class="cards sitemap shadow"] > h4 {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banan {
|
.banan {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 30px !important;
|
right: 30px !important;
|
||||||
bottom: 30px !important;
|
bottom: 30px !important;
|
||||||
width: 64px;
|
width: 64px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
pointer-events: all !important;
|
pointer-events: all !important;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banan:hover {
|
.banan:hover {
|
||||||
scale: 1.04;
|
transform: scale(1.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.banan:active {
|
.banan:active {
|
||||||
scale: 0.98;
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
.music-pop {
|
.popup {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
background-color: #202020ee;
|
background-color: #313244ee;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
border: 2px solid #333;
|
border: 2px solid #45475a;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.music-pop:hover {
|
.popup:hover {
|
||||||
border: 2px solid #444;
|
border: 2px solid #585b70;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top {
|
.top {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top button {
|
.top button {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
background-color: #ac2323;
|
background-color: #e06c75;
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: 0.1s;
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#refresh:hover {
|
#refresh:hover {
|
||||||
background-color: #67de50;
|
background-color: #67de50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top button:hover {
|
.top button:hover {
|
||||||
background-color: #bc3333;
|
background-color: #bc3333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.song {
|
.song {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.song > div {
|
.song > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.song > div:nth-of-type(2) {
|
.song > div:nth-of-type(2) {
|
||||||
width: 52px;
|
width: 52px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#artist {
|
#artist {
|
||||||
|
|
@ -721,59 +643,101 @@ div[class="cards sitemap shadow"] > h4 {
|
||||||
}
|
}
|
||||||
|
|
||||||
#artist:hover {
|
#artist:hover {
|
||||||
color: #c099ff;
|
color: #cba6f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
#song-cover {
|
#song-cover {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
width: 72px;
|
width: 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#song-url {
|
#song-url {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #0778B7;
|
background-color: #89b4fa;
|
||||||
padding: 4px 4px;
|
padding: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
max-width: 24px;
|
max-width: 24px;
|
||||||
max-height: 24px;
|
max-height: 24px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#refresh {
|
#refresh {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #57ce40;
|
background-color: #a6e3a1;
|
||||||
padding: 4px 4px;
|
padding: 4px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
max-width: 24px;
|
max-width: 24px;
|
||||||
max-height: 24px;
|
max-height: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#song-url:hover {
|
#song-url:hover {
|
||||||
background-color: #1078C7;
|
background-color: #89b4fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
#song-url:hover > svg {
|
#song-url:hover > svg {
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#overlay {
|
#overlay {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
background-color: #101010bb;
|
background-color: #101010bb;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette {
|
||||||
|
position: fixed;
|
||||||
|
right: 30px !important;
|
||||||
|
top: 30px !important;
|
||||||
|
width: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
pointer-events: all !important;
|
||||||
|
transition: transform 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette:hover {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.themes > button {
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #cdd6f4;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 4px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.themes {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-theme {
|
||||||
|
background: #313244;
|
||||||
|
border: 2px solid #45475a;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unselected-theme {
|
||||||
|
background: #252734;
|
||||||
|
border: 2px solid #353646;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -221,7 +221,6 @@ function fetchSong() {
|
||||||
fetch(url)
|
fetch(url)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
//console.log(data);
|
|
||||||
const track = data?.recenttracks?.track?.[0];
|
const track = data?.recenttracks?.track?.[0];
|
||||||
if (!track) return;
|
if (!track) return;
|
||||||
const artist = track.artist["#text"];
|
const artist = track.artist["#text"];
|
||||||
|
|
@ -240,42 +239,51 @@ function fetchSong() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function fetchWeather(location) {
|
function fetchWeather(location) {
|
||||||
if (!location) {
|
const target = document.getElementById('weather');
|
||||||
fetch(`https://wttr.in/muc?format=%t | %C`)
|
const query = location ? location : "muc";
|
||||||
|
fetch(`https://wttr.in/${query}?format=%t | %C`)
|
||||||
.then(response => response.text())
|
.then(response => response.text())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
document.getElementById('weather').innerText = data;
|
target.innerText = data;
|
||||||
})
|
})
|
||||||
} else {
|
.catch(() => {
|
||||||
fetch(`https://wttr.in/${location}?format=%t | %C`)
|
target.innerText = "Weather unavailable";
|
||||||
.then(data => {
|
});
|
||||||
document.getElementById('weather').innerText = data;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchWeather();
|
fetchWeather();
|
||||||
fetchSong();
|
fetchSong();
|
||||||
|
|
||||||
|
let countdown = 60;
|
||||||
|
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
fetchSong();
|
countdown--;
|
||||||
}, 60000)
|
if (countdown <= 0) {
|
||||||
|
countdown = 60;
|
||||||
|
fetchSong();
|
||||||
|
}
|
||||||
|
const refreshElem = document.getElementById('refresh');
|
||||||
|
if (refreshElem) refreshElem.dataset.tooltip = `Refresh in ${countdown}`;
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
function close() {
|
function closeOverlay(popupId, overlayId) {
|
||||||
document.getElementById('music-pop').style.opacity = '0';
|
document.getElementById(`${popupId}`).style.opacity = '0';
|
||||||
document.getElementById('overlay').style.opacity = '0';
|
document.getElementById(`${overlayId}`).style.opacity = '0';
|
||||||
document.getElementById('music-pop').style.visibility = 'hidden';
|
document.getElementById(`${popupId}`).style.visibility = 'hidden';
|
||||||
document.getElementById('overlay').style.visibility = 'hidden';
|
document.getElementById(`${overlayId}`).style.visibility = 'hidden';
|
||||||
}
|
}
|
||||||
|
|
||||||
function open() {
|
function openOverlay(popupId, overlayId) {
|
||||||
document.getElementById('music-pop').style.visibility = 'visible';
|
const popup = document.getElementById(popupId);
|
||||||
document.getElementById('overlay').style.visibility = 'visible';
|
const overlay = document.getElementById(overlayId);
|
||||||
document.getElementById('music-pop').style.opacity = '1';
|
|
||||||
document.getElementById('overlay').style.opacity = '1';
|
popup.style.visibility = 'visible';
|
||||||
|
overlay.style.visibility = 'visible';
|
||||||
|
popup.style.opacity = '1';
|
||||||
|
overlay.style.opacity = '1';
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('banan').addEventListener('click', open);
|
document.getElementById('banan').addEventListener('click', () => { openOverlay("music-pop", "overlay")});
|
||||||
document.getElementById('close').addEventListener('click', close);
|
document.getElementById('close').addEventListener('click', () => { closeOverlay("music-pop", "overlay")});
|
||||||
document.getElementById('overlay').addEventListener('click', close);
|
document.getElementById('overlay').addEventListener('click', () => { closeOverlay("music-pop", "overlay")});
|
||||||
document.getElementById('refresh').addEventListener('click', fetchSong);
|
document.getElementById('refresh').addEventListener('click', fetchSong);
|
||||||
|
|
|
||||||
156
global.css
156
global.css
|
|
@ -1,3 +1,148 @@
|
||||||
|
:root[theme=latte] {
|
||||||
|
--rosewater:#dc8a78;
|
||||||
|
--flamingo:#dd7878;
|
||||||
|
--pink:#ea76cb;
|
||||||
|
--mauve:#8839ef;
|
||||||
|
--red:#d20f39;
|
||||||
|
--maroon:#e64553;
|
||||||
|
--peach:#fe640b;
|
||||||
|
--yellow:#df8e1d;
|
||||||
|
--green:#40a02b;
|
||||||
|
--teal:#179299;
|
||||||
|
--sky:#04a5e5;
|
||||||
|
--sapphire:#209fb5;
|
||||||
|
--blue:#1e66f5;
|
||||||
|
--lavender:#7287fd;
|
||||||
|
--text:#4c4f69;
|
||||||
|
--subtext1:#5c5f77;
|
||||||
|
--subtext0:#6c6f85;
|
||||||
|
--overlay2:#7c7f93;
|
||||||
|
--overlay1:#8c8fa1;
|
||||||
|
--overlay0:#9ca0b0;
|
||||||
|
--surface2:#acb0be;
|
||||||
|
--surface1:#bcc0cc;
|
||||||
|
--surface0:#ccd0da;
|
||||||
|
--base:#eff1f5;
|
||||||
|
--mantle:#e6e9ef;
|
||||||
|
--crust:#dce0e8
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[theme=frappe] {
|
||||||
|
--rosewater:#f2d5cf;
|
||||||
|
--flamingo:#eebebe;
|
||||||
|
--pink:#f4b8e4;
|
||||||
|
--mauve:#ca9ee6;
|
||||||
|
--red:#e78284;
|
||||||
|
--maroon:#ea999c;
|
||||||
|
--peach:#ef9f76;
|
||||||
|
--yellow:#e5c890;
|
||||||
|
--green:#a6d189;
|
||||||
|
--teal:#81c8be;
|
||||||
|
--sky:#99d1db;
|
||||||
|
--sapphire:#85c1dc;
|
||||||
|
--blue:#8caaee;
|
||||||
|
--lavender:#babbf1;
|
||||||
|
--text:#c6d0f5;
|
||||||
|
--subtext1:#b5bfe2;
|
||||||
|
--subtext0:#a5adce;
|
||||||
|
--overlay2:#949cbb;
|
||||||
|
--overlay1:#838ba7;
|
||||||
|
--overlay0:#737994;
|
||||||
|
--surface2:#626880;
|
||||||
|
--surface1:#51576d;
|
||||||
|
--surface0:#414559;
|
||||||
|
--base:#303446;
|
||||||
|
--mantle:#292c3c;
|
||||||
|
--crust:#232634
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[theme=macchiato] {
|
||||||
|
--rosewater:#f4dbd6;
|
||||||
|
--flamingo:#f0c6c6;
|
||||||
|
--pink:#f5bde6;
|
||||||
|
--mauve:#c6a0f6;
|
||||||
|
--red:#ed8796;
|
||||||
|
--maroon:#ee99a0;
|
||||||
|
--peach:#f5a97f;
|
||||||
|
--yellow:#eed49f;
|
||||||
|
--green:#a6da95;
|
||||||
|
--teal:#8bd5ca;
|
||||||
|
--sky:#91d7e3;
|
||||||
|
--sapphire:#7dc4e4;
|
||||||
|
--blue:#8aadf4;
|
||||||
|
--lavender:#b7bdf8;
|
||||||
|
--text:#cad3f5;
|
||||||
|
--subtext1:#b8c0e0;
|
||||||
|
--subtext0:#a5adcb;
|
||||||
|
--overlay2:#939ab7;
|
||||||
|
--overlay1:#8087a2;
|
||||||
|
--overlay0:#6e738d;
|
||||||
|
--surface2:#5b6078;
|
||||||
|
--surface1:#494d64;
|
||||||
|
--surface0:#363a4f;
|
||||||
|
--base:#24273a;
|
||||||
|
--mantle:#1e2030;
|
||||||
|
--crust:#181926
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[theme=mocha] {
|
||||||
|
--rosewater:#f5e0dc;
|
||||||
|
--flamingo:#f2cdcd;
|
||||||
|
--pink:#f5c2e7;
|
||||||
|
--mauve:#cba6f7;
|
||||||
|
--red:#f38ba8;
|
||||||
|
--maroon:#eba0ac;
|
||||||
|
--peach:#fab387;
|
||||||
|
--yellow:#f9e2af;
|
||||||
|
--green:#a6e3a1;
|
||||||
|
--teal:#94e2d5;
|
||||||
|
--sky:#89dceb;
|
||||||
|
--sapphire:#74c7ec;
|
||||||
|
--blue:#89b4fa;
|
||||||
|
--lavender:#b4befe;
|
||||||
|
--text:#cdd6f4;
|
||||||
|
--subtext1:#bac2de;
|
||||||
|
--subtext0:#a6adc8;
|
||||||
|
--overlay2:#9399b2;
|
||||||
|
--overlay1:#7f849c;
|
||||||
|
--overlay0:#6c7086;
|
||||||
|
--surface2:#585b70;
|
||||||
|
--surface1:#45475a;
|
||||||
|
--surface0:#313244;
|
||||||
|
--base:#1e1e2e;
|
||||||
|
--mantle:#181825;
|
||||||
|
--crust:#11111b
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--rosewater:#f5e0dc;
|
||||||
|
--flamingo:#f2cdcd;
|
||||||
|
--pink:#f5c2e7;
|
||||||
|
--mauve:#cba6f7;
|
||||||
|
--red:#f38ba8;
|
||||||
|
--maroon:#eba0ac;
|
||||||
|
--peach:#fab387;
|
||||||
|
--yellow:#f9e2af;
|
||||||
|
--green:#a6e3a1;
|
||||||
|
--teal:#94e2d5;
|
||||||
|
--sky:#89dceb;
|
||||||
|
--sapphire:#74c7ec;
|
||||||
|
--blue:#89b4fa;
|
||||||
|
--lavender:#b4befe;
|
||||||
|
--text:#cdd6f4;
|
||||||
|
--subtext1:#bac2de;
|
||||||
|
--subtext0:#a6adc8;
|
||||||
|
--overlay2:#9399b2;
|
||||||
|
--overlay1:#7f849c;
|
||||||
|
--overlay0:#6c7086;
|
||||||
|
--surface2:#585b70;
|
||||||
|
--surface1:#45475a;
|
||||||
|
--surface0:#313244;
|
||||||
|
--base:#1e1e2e;
|
||||||
|
--mantle:#181825;
|
||||||
|
--crust:#11111b
|
||||||
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Hack';
|
font-family: 'Hack';
|
||||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||||
|
|
@ -8,6 +153,7 @@
|
||||||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -16,8 +162,8 @@ body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
background-color: #2a2a2a;
|
background-color: var(--maroon);
|
||||||
color: #f0f0f0;
|
color: var(--subtext1);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -30,15 +176,15 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #fff;
|
color: var(--subtext1);
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover, svg:hover {
|
a:hover, svg:hover {
|
||||||
color: #c099ff;
|
color: var(--teal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background-color: #252525;
|
background-color: var(--red);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 600px !important;
|
width: 600px !important;
|
||||||
|
|
|
||||||
|
|
@ -109,7 +109,7 @@
|
||||||
|
|
||||||
<div class="music">
|
<div class="music">
|
||||||
<img src="assets/img/dancing-banan.gif" class="banan" id="banan">
|
<img src="assets/img/dancing-banan.gif" class="banan" id="banan">
|
||||||
<div class="music-pop shadow" id="music-pop">
|
<div class="popup shadow" id="music-pop">
|
||||||
<div class="top"><h3 id="listening_to">Listening To <a id="artist" target="_blank">No one</a></h3>
|
<div class="top"><h3 id="listening_to">Listening To <a id="artist" target="_blank">No one</a></h3>
|
||||||
<button id="close"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Menu / Close_MD"> <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: var(--darkreader-text-ffffff, #e8e6e3);" data-darkreader-inline-stroke=""></path> </g> </g></svg></button></div>
|
<button id="close"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="Menu / Close_MD"> <path id="Vector" d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: var(--darkreader-text-ffffff, #e8e6e3);" data-darkreader-inline-stroke=""></path> </g> </g></svg></button></div>
|
||||||
<div class="song">
|
<div class="song">
|
||||||
|
|
@ -119,13 +119,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a id="song-url" class="tooltip" data-tooltip="Open in new tab" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-external-link "><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a>
|
<a id="song-url" class="tooltip" data-tooltip="Open in new tab" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-external-link "><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path><path d="M11 13l9 -9"></path><path d="M15 4h5v5"></path></svg></a>
|
||||||
<button id="refresh" class="msb tooltip" data-tooltip="Refresh"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.06189 13C4.02104 12.6724 4 12.3387 4 12C4 7.58172 7.58172 4 12 4C14.5006 4 16.7332 5.14727 18.2002 6.94416M19.9381 11C19.979 11.3276 20 11.6613 20 12C20 16.4183 16.4183 20 12 20C9.61061 20 7.46589 18.9525 6 17.2916M9 17H6V17.2916M18.2002 4V6.94416M18.2002 6.94416V6.99993L15.2002 7M6 20V17.2916" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: var(--darkreader-text-ffffff, #e8e6e3);" data-darkreader-inline-stroke=""></path> </g></svg></button>
|
<button id="refresh" class="msb tooltip" data-tooltip="Refresh in 30s"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.06189 13C4.02104 12.6724 4 12.3387 4 12C4 7.58172 7.58172 4 12 4C14.5006 4 16.7332 5.14727 18.2002 6.94416M19.9381 11C19.979 11.3276 20 11.6613 20 12C20 16.4183 16.4183 20 12 20C9.61061 20 7.46589 18.9525 6 17.2916M9 17H6V17.2916M18.2002 4V6.94416M18.2002 6.94416V6.99993L15.2002 7M6 20V17.2916" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="--darkreader-inline-stroke: var(--darkreader-text-ffffff, #e8e6e3);" data-darkreader-inline-stroke=""></path> </g></svg></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="overlay"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="overlay"></div>
|
||||||
|
|
||||||
<footer class="cards">
|
<footer class="cards">
|
||||||
<p id="copyright">© 2025 zyqunix - all rights reserved</p>
|
<p id="copyright">© 2025 zyqunix - all rights reserved</p>
|
||||||
<p id="foss">❤️ This website is open-source on <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a></p>
|
<p id="foss">❤️ This website is open-source on <a href="https://github.com/zyqunix/tools" target="_blank">GitHub</a></p>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue