mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-05 22:10:31 +02:00
typewriter and lil ui change
This commit is contained in:
zyqunix
parent
fac92c3d72
commit
9f802381a2
4 changed files with 66 additions and 159 deletions
|
|
@ -60,6 +60,7 @@ strong {
|
|||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #bac2de;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cards {
|
||||
|
|
|
|||
|
|
@ -251,6 +251,62 @@ function fetchWeather(location) {
|
|||
});
|
||||
}
|
||||
|
||||
const messages = [
|
||||
"Coding",
|
||||
"Listening to Music",
|
||||
"Reverse Engineering",
|
||||
"Playing Counter-Strike",
|
||||
"swagman",
|
||||
];
|
||||
|
||||
let currentMessageIndex = 0;
|
||||
let currentCharIndex = 0;
|
||||
let isDeleting = false;
|
||||
|
||||
function typeWriter() {
|
||||
const currentMessage = messages[currentMessageIndex];
|
||||
let displayText = '';
|
||||
|
||||
if (isDeleting) {
|
||||
displayText = currentMessage.substring(0, currentCharIndex - 1);
|
||||
currentCharIndex--;
|
||||
} else {
|
||||
displayText = currentMessage.substring(0, currentCharIndex + 1);
|
||||
currentCharIndex++;
|
||||
}
|
||||
|
||||
displayText += "<span id='typewriter-line'>|</span>";
|
||||
document.getElementById('hobbies').innerHTML = displayText;
|
||||
|
||||
if (!isDeleting && currentCharIndex === currentMessage.length + 1) {
|
||||
isDeleting = true;
|
||||
setTimeout(typeWriter, 1000);
|
||||
} else if (isDeleting && currentCharIndex === 0) {
|
||||
isDeleting = false;
|
||||
currentMessageIndex = (currentMessageIndex + 1) % messages.length;
|
||||
setTimeout(typeWriter, 1000);
|
||||
} else {
|
||||
setTimeout(typeWriter, isDeleting ? 40 : 75);
|
||||
}
|
||||
}
|
||||
|
||||
let cursorOpacity = 0;
|
||||
let fadeDirection = 1;
|
||||
|
||||
setInterval(() => {
|
||||
const cursorElement = document.getElementById("typewriter-line");
|
||||
|
||||
if (cursorElement) {
|
||||
cursorElement.style.opacity = cursorOpacity;
|
||||
cursorOpacity += 0.1 * fadeDirection;
|
||||
|
||||
if (cursorOpacity <= 0 || cursorOpacity >= 1) {
|
||||
fadeDirection *= -1;
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
|
||||
typeWriter();
|
||||
fetchWeather();
|
||||
fetchSong();
|
||||
|
||||
|
|
|
|||
160
global.css
160
global.css
|
|
@ -1,148 +1,3 @@
|
|||
: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-family: 'Hack';
|
||||
src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype');
|
||||
|
|
@ -153,7 +8,6 @@
|
|||
src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -162,8 +16,8 @@ body {
|
|||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
background-color: var(--maroon);
|
||||
color: var(--subtext1);
|
||||
background-color: #2a2a2a;
|
||||
color: #f0f0f0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -171,20 +25,16 @@ body {
|
|||
font-family: 'Hack', 'JetBrainsMono', monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--subtext1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a:hover, svg:hover {
|
||||
color: var(--teal);
|
||||
color: #c099ff;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--red);
|
||||
background-color: #252525;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
width: 600px !important;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js"></script>
|
||||
<title>zyq's Portfolio</title>
|
||||
<link href="assets/css/style.css" rel="stylesheet" />
|
||||
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
<h1 class="name tooltip" data-tooltip="zyqunix / Fabio / fentboiswag / монгол">zyqunix</h1>
|
||||
<span><div class="time tooltip" id="time"></div><div class="weather" id="weather"></div></span></span>
|
||||
<div class="age" id="age"></div>
|
||||
<div class="hobbies" id="hobbies">
|
||||
<span class="hobbies" id="hobbies">
|
||||
Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="discord cards">
|
||||
<h2>Discord</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue