Initial commit
This commit is contained in:
trinkey
commit
15b454f66e
9 changed files with 642 additions and 0 deletions
245
css/base.css
Normal file
245
css/base.css
Normal file
|
|
@ -0,0 +1,245 @@
|
||||||
|
/* Load fonts */
|
||||||
|
@font-face { font-family: "Ubuntu Mono"; font-display: block; font-weight: 400; font-style: normal; src: url("font/UbuntuMono-Regular.ttf") format("truetype"); }
|
||||||
|
@font-face { font-family: "Ubuntu Mono"; font-display: block; font-weight: 400; font-style: italic; src: url("font/UbuntuMono-Italic.ttf") format("truetype"); }
|
||||||
|
@font-face { font-family: "Ubuntu Mono"; font-display: block; font-weight: 700; font-style: normal; src: url("font/UbuntuMono-Bold.ttf") format("truetype"); }
|
||||||
|
@font-face { font-family: "Ubuntu Mono"; font-display: block; font-weight: 700; font-style: italic; src: url("font/UbuntuMono-BoldItalic.ttf") format("truetype"); }
|
||||||
|
|
||||||
|
/* Define variables */
|
||||||
|
html { --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; --base-low-op: #1e1e2ed0 }
|
||||||
|
html[data-light] { --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; --base-low-op: #eff1f5b0}
|
||||||
|
|
||||||
|
/* Actual styles */
|
||||||
|
:root {
|
||||||
|
font-size: 18px;
|
||||||
|
background-color: var(--base);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: var(--text);
|
||||||
|
color: var(--base);
|
||||||
|
text-decoration-color: var(--base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.green { color: var(--green); }
|
||||||
|
.blue { color: var(--blue); }
|
||||||
|
.pink { color: var(--pink); }
|
||||||
|
|
||||||
|
a:link,
|
||||||
|
a:visited {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
outline: 1px solid var(--pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.green::selection, .green ::selection { background-color: var(--green); }
|
||||||
|
.blue::selection, .blue ::selection { background-color: var(--blue); }
|
||||||
|
|
||||||
|
.cursor::selection {
|
||||||
|
color: var(--text);
|
||||||
|
background-color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link::selection,
|
||||||
|
a:visited::selection,
|
||||||
|
.pink::selection,
|
||||||
|
a:link ::selection,
|
||||||
|
a:visited ::selection,
|
||||||
|
.pink ::selection {
|
||||||
|
background-color: var(--pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Ubuntu Mono";
|
||||||
|
min-height: calc(100vh + 40px);
|
||||||
|
max-width: 100vw;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
noscript {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: calc(100vw - 60px);
|
||||||
|
padding: 10px 30px;
|
||||||
|
min-height: 40px;
|
||||||
|
display: block;
|
||||||
|
background-color: var(--crust);
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
width: calc(100vw - 60px);
|
||||||
|
min-height: 40px;
|
||||||
|
max-width: 1500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor {
|
||||||
|
color: var(--text);
|
||||||
|
background-color: var(--text);
|
||||||
|
animation: cursor-blink 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cursor-blink {
|
||||||
|
0% { opacity: 100%; }
|
||||||
|
50% { opacity: 100%; }
|
||||||
|
50.001% { opacity: 0%; }
|
||||||
|
100% { opacity: 0%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
margin-right: auto;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cat {
|
||||||
|
position: absolute;
|
||||||
|
top: 25vh;
|
||||||
|
left: 25vw;
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vh;
|
||||||
|
object-fit: contain;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -1;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-container {
|
||||||
|
--window-border-radius: 15px;
|
||||||
|
background-color: var(--base-low-op);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
position: absolute;
|
||||||
|
border-radius: var(--window-border-radius);
|
||||||
|
border: 1px solid var(--surface0);
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-container:hover,
|
||||||
|
.window-container:focus,
|
||||||
|
.window-container:focus-within {
|
||||||
|
border-color: var(--pink);
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-outer {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: var(--mantle);
|
||||||
|
height: 35px;
|
||||||
|
font-size: 14px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-top-left-radius: var(--window-border-radius);
|
||||||
|
border-top-right-radius: var(--window-border-radius);
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-header-title {
|
||||||
|
text-wrap: nowrap;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-x: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-header-button {
|
||||||
|
background-color: var(--surface2);
|
||||||
|
border-radius: 8px;
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
min-width: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
transition: background-color 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-header-button.blank {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-container:hover .window-header-button,
|
||||||
|
.window-container:focus .window-header-button,
|
||||||
|
.window-container:focus-within .window-header-button {
|
||||||
|
transition: background-color 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-container:hover .window-header-button.minimize,
|
||||||
|
.window-container:focus .window-header-button.minimize,
|
||||||
|
.window-container:focus-within .window-header-button.minimize {
|
||||||
|
background-color: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-container:hover .window-header-button.fullscreen,
|
||||||
|
.window-container:focus .window-header-button.fullscreen,
|
||||||
|
.window-container:focus-within .window-header-button.fullscreen {
|
||||||
|
background-color: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-container:hover .window-header-button.close,
|
||||||
|
.window-container:focus .window-header-button.close,
|
||||||
|
.window-container:focus-within .window-header-button.close {
|
||||||
|
background-color: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window {
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-88x31 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: calc(100vw - 100px);
|
||||||
|
background-color: var(--crust);
|
||||||
|
padding: 10px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 810px) {
|
||||||
|
footer {
|
||||||
|
width: calc(100vw - 20px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav {
|
||||||
|
display: block;
|
||||||
|
width: calc(100vw - 20px);
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div.hyphen {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div:not(.header-title, .hyphen) {
|
||||||
|
display: inline-block;
|
||||||
|
text-wrap: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
css/font/UbuntuMono-Bold.ttf
Normal file
BIN
css/font/UbuntuMono-Bold.ttf
Normal file
Binary file not shown.
BIN
css/font/UbuntuMono-BoldItalic.ttf
Normal file
BIN
css/font/UbuntuMono-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
css/font/UbuntuMono-Italic.ttf
Normal file
BIN
css/font/UbuntuMono-Italic.ttf
Normal file
Binary file not shown.
BIN
css/font/UbuntuMono-Regular.ttf
Normal file
BIN
css/font/UbuntuMono-Regular.ttf
Normal file
Binary file not shown.
BIN
img/88x31.png
Normal file
BIN
img/88x31.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/cat.jpg
Normal file
BIN
img/cat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
206
index.html
Normal file
206
index.html
Normal file
|
|
@ -0,0 +1,206 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>trinkey's website!!!</title>
|
||||||
|
<link rel="stylesheet" href="css/base.css">
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<meta name="pronouns" content="she/her">
|
||||||
|
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="author" content="trinkey's website!!!">
|
||||||
|
<meta property="og:title" content="trinkey's website!!!">
|
||||||
|
<meta name="twitter:title" content="trinkey's website!!!">
|
||||||
|
<meta name="description" content="meoww :3">
|
||||||
|
<meta property="og:description" content="meoww :3">
|
||||||
|
<meta name="twitter:description" content="meoww :3">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let _themeMM = matchMedia("(prefers-color-scheme: light)");
|
||||||
|
let light = _themeMM.matches;
|
||||||
|
let useAutoTheme = true;
|
||||||
|
|
||||||
|
function setTheme() {
|
||||||
|
if (light) {
|
||||||
|
document.documentElement.setAttribute("data-light", "");
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute("data-light");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_themeMM.addEventListener("change", function() {
|
||||||
|
light = _themeMM.matches;
|
||||||
|
setTheme();
|
||||||
|
});
|
||||||
|
|
||||||
|
setTheme();
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<div class="header-title">trinkey's website!</div>
|
||||||
|
<div><a href="javascript:windowPreset('about')">about me</a></div>
|
||||||
|
<div class="hyphen">-</div>
|
||||||
|
<div><a href="javascript:windowPreset('socials')">my socials</a></div>
|
||||||
|
<div class="hyphen">-</div>
|
||||||
|
<div><a href="javascript:windowPreset('88x31')">88x31</a></div>
|
||||||
|
<div class="hyphen">-</div>
|
||||||
|
<div><a href="javascript:windowPreset('projects')">projects</a></div>
|
||||||
|
<div class="hyphen">-</div>
|
||||||
|
<div><a href="javascript:windowPreset('testimonials')">testimonials</a></div>
|
||||||
|
<div class="hyphen">-</div>
|
||||||
|
<div><a href="javascript:windowPreset('specs')">specs</a></div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<noscript>
|
||||||
|
this website heavily relies on javascript! for a no-js version with less fun, visit
|
||||||
|
<a href="no-js.html">this page</a> instead
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<img class="cat" src="img/cat.jpg" alt="My cat">
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
access the compatibility version <a href="no-js.html">here</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<div hidden id="window-templates">
|
||||||
|
<div data-template-id="about">
|
||||||
|
<div data-template-field="title">~/about</div>
|
||||||
|
<div data-template-field="content">
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/about</b>$ cat about-me.txt</div>
|
||||||
|
<div><b>hi there! i'm trinkey!</b></div>
|
||||||
|
<div>--------------------</div>
|
||||||
|
<div>i'm a silly little kitty cat who lives in the usa.</div>
|
||||||
|
<div>i'm <span class="blue">t</span><span class="pink">r</span>a<span class="pink">n</span><span class="blue">s</span> (she/her, they/them and it/its are also fine) and a bit gay sometimes.</div>
|
||||||
|
<div>i'm not actively in a relationship, however i'm also not looking to get into one either.</div>
|
||||||
|
<div>--------------------</div>
|
||||||
|
<div>i like to code stuff (mostly websites)! some of my programs can be found on the <a href="javascript:windowPreset('projects')">projects page</a>. i know a few languages, those being python, javascript/typescript, html/css (if you count those), and a little bit of java.</div>
|
||||||
|
<div>--------------------</div>
|
||||||
|
<div>well, that's about it! i hope you like my website!</div>
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/about</b>$ <i class="cursor">.</i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-template-id="socials">
|
||||||
|
<div data-template-field="title">~/socials</div>
|
||||||
|
<div data-template-field="content">
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/socials</b>$ cat socials.html</div>
|
||||||
|
<div>- fedi - <b>@trinkey@trinkey.com</b> (or @trinkey@is.trinkey.com)</div>
|
||||||
|
<div>- github - <a href="https://github.com/trinkey/" target="_blank"><b>trinkey</b></a></div>
|
||||||
|
<div>- git.gay - <a href="https://git.gay/trinkey/" target="_blank"><b>trinkey</b></a></div>
|
||||||
|
<div>- smiggins - <a href="https://trinkey.pythonanywhere.com/u/trinkey/" target="_blank"><b>trinkey</b></a></div>
|
||||||
|
<div>- signal - <b>@trinkey.01</b></div>
|
||||||
|
<div>- email - <b>trinkey [at] proton [dot] me</b></div>
|
||||||
|
<div>- youtube - <a href="https://youtube.com/@trinkey" target="_blank"><b>@trinkey</b></a> (inactive)</div>
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/socials</b>$ <i class="cursor">.</i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-template-id="88x31">
|
||||||
|
<div data-template-field="title">~/buttons</div>
|
||||||
|
<div data-template-field="content">
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/buttons</b>$ cat 88x31.html</div>
|
||||||
|
<div><b>my button:</b> (click to copy html)</div>
|
||||||
|
<div><img style="cursor: pointer;" src="img/88x31.png" alt="trinkey's 88x31. image of my cat on the right with the word trinkey name taking up the rest of the button." title="trinkey's 88x31. image of my cat on the right with the word trinkey name taking up the rest of the button." onclick="copyButton()"></div>
|
||||||
|
<div>--------------------</div>
|
||||||
|
<div><b>cool people:</b></div>
|
||||||
|
<div class="buttons-88x31">
|
||||||
|
<a href="https://notfire.cc" target="_blank"><img src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af.gif" alt="notfire.cc"></a>
|
||||||
|
<a href="https://micro.niko.lgbt" target="_blank"><img src="https://micro.niko.lgbt/static/button_2.png" alt="a non-spinning demigirl blobcat angled slightly with a black border to the left of "Micro"" title="a non-spinning demigirl blobcat angled slightly with a black border to the left of "Micro""></a>
|
||||||
|
<a href="https://w.on-t.work" target="_blank"><img src="https://w.on-t.work/assets/88x31.png" alt="kopper's button" title="kopper's button"></a>
|
||||||
|
</div>
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/buttons</b>$ <i class="cursor">.</i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-template-id="projects">
|
||||||
|
<div data-template-field="title">~/projects</div>
|
||||||
|
<div data-template-field="content">
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/projects</b>$ cat projects.html</div>
|
||||||
|
<div><b>projects</b> - the things i made</div>
|
||||||
|
<div>- <a href="https://github.com/jerimiah-smiggins/smiggins/" target="_blank"><b>smiggins</b></a> (<a href="https://trinkey.pythonanywhere.com/" target="_blank">website</a>) - a social media platform i made</div>
|
||||||
|
<div>- <a href="https://git.gay/trinkey/website/" target="_blank"><b>this website</b></a> - check out the code</div>
|
||||||
|
<div>- <a href="https://git.gay/trinkey/dotindex/" target="_blank"><b>dotindex</b></a> (<a href="https://pypi.org/project/DotIndex/" target="_blank">pypi</a>) - a python library that lets you access dicts using the dot notation (dict.key) instead of whatever python does (dict["key"])</div>
|
||||||
|
<div>- <a href="https://git.gay/trinkey/infopage/" target="_blank"><b>infopage</b></a> (<a href="https://infpg.pythonanywhere.com/" target="_blank">website</a>) - my very own pronouns.page clone</div><br>
|
||||||
|
<div>i'll likely add more in the future, these are just the ones i'm most proud of at the moment.</div>
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/projects</b>$ <i class="cursor">.</i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-template-id="testimonials">
|
||||||
|
<div data-template-field="title">~/testimonials</div>
|
||||||
|
<div data-template-field="content">
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/testimonials</b>$ cat testimonials.html</div>
|
||||||
|
<div>"warning: this user is trinkey"</div>
|
||||||
|
<div>- <a href="https://booping.synth.download/@breaadyboy" target="_blank">bread</a></div><br>
|
||||||
|
<div>"This user is only slightly crazy once was I. 10/10 would recommend"</div>
|
||||||
|
<div>- <a href="https://lea.pet/@subroutine" target="_blank">subroutine</a></div><br>
|
||||||
|
<div>"the f slur but repeated 36 times"</div>
|
||||||
|
<div>- <a href="https://oomfie.city/@cornfields74">corn fields seventy four</a></div>
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~/testimonials</b>$ <i class="cursor">.</i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div data-template-id="specs">
|
||||||
|
<div data-template-field="title">~</div>
|
||||||
|
<div data-template-field="content">
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~</b>$ ssh trinkey@laptop</div>
|
||||||
|
<div>Last login: Tue Sep 11 8:46:40 2001 from 192.168.1.254</div>
|
||||||
|
<div><b class="green">trinkey@laptop</b>:<b class="blue">~</b>$ neofetch</div>
|
||||||
|
|
||||||
|
<pre> <b>...-:::::-...</b> <b class="green">trinkey</b>@<b class="green">laptop</b>
|
||||||
|
<b>.-MMMMMMMMMMMMMMM-.</b> ---------------
|
||||||
|
<b>.-MMMM<span class="green">`..-:::::::-..`</span>MMMM-.</b> <b class="green">OS</b>: Linux Mint 21.2 x86_64
|
||||||
|
<b>.:MMMM<span class="green">.:MMMMMMMMMMMMMMM:.</span>MMMM:.</b> <b class="green">Host</b>: Dell G15 5510
|
||||||
|
<b>-MMM<span class="green">-M---MMMMMMMMMMMMMMMMMMM.</span>MMM-</b> <b class="green">Uptime</b>: 11 hours, 9 mins
|
||||||
|
<b>`:MMM<span class="green">:MM` :MMMM:....::-...-MMMM:</span>MMM:`</b> <b class="green">Packages</b>: 2001 (dpkg), 11 (flatpak)
|
||||||
|
<b>:MMM<span class="green">:MMM` :MM:` `` `` `:MMM:</span>MMM:</b> <b class="green">Resolution</b>: 2560x1440, 1920x1080, 1680x1050
|
||||||
|
<b>.MMM<span class="green">.MMMM` :MM. -MM. .MM- `MMMM.</span>MMM.</b> <b class="green">DE</b>: Cinnamon 5.8.4
|
||||||
|
<b>:MMM<span class="green">:MMMM` :MM. -MM- .MM: `MMMM-</span>MMM:</b> <b class="green">WM</b>: Mutter (Muffin)
|
||||||
|
<b>:MMM<span class="green">:MMMM` :MM. -MM- .MM: `MMMM:</span>MMM:</b> <b class="green">CPU</b>: Intel i5-10500H (12) @ 4.500GHz
|
||||||
|
<b>:MMM<span class="green">:MMMM` :MM. -MM- .MM: `MMMM-</span>MMM:</b> <b class="green">GPU</b>: NVIDIA GeForce RTX 3050 Ti Mobile
|
||||||
|
<b>.MMM<span class="green">.MMMM` :MM:--:MM:--:MM: `MMMM.</span>MMM.</b> <b class="green">GPU</b>: Intel CometLake-H GT2 [UHD Graphics]
|
||||||
|
<b>:MMM<span class="green">:MMM- `-MMMMMMMMMMMM-` -MMM-</span>MMM:</b> <b class="green">Memory</b>: 2001MiB / 15765MiB
|
||||||
|
<b>:MMM<span class="green">:MMM:` `:MMM:</span>MMM:</b>
|
||||||
|
<b>.MMM<span class="green">.MMMM:--------------:MMMM.</span>MMM.</b>
|
||||||
|
<b>'-MMMM<span class="green">.-MMMMMMMMMMMMMMM-.</span>MMMM-'</b>
|
||||||
|
<b>'.-MMMM<span class="green">``--:::::--``</span>MMMM-.'</b>
|
||||||
|
<b>'-MMMMMMMMMMMMM-'</b>
|
||||||
|
<b>``-:::::-``</b></pre>
|
||||||
|
|
||||||
|
<div><b class="green">trinkey@laptop</b>:<b class="blue">~</b>$ exit</div>
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~</b>$ ssh trinkey@server</div>
|
||||||
|
<div>Last login: Tue Sep 11 9:03:02 2001 from 192.168.1.254</div>
|
||||||
|
<div><b class="green">trinkey@server</b>:<b class="blue">~</b>$ neofetch</div>
|
||||||
|
<pre> <b>...-:::::-...</b> <b class="green">trinkey</b>@<b class="green">server</b>
|
||||||
|
<b>.-MMMMMMMMMMMMMMM-.</b> ---------------
|
||||||
|
<b>.-MMMM<span class="green">`..-:::::::-..`</span>MMMM-.</b> <b class="green">OS</b>: Linux Mint 21.2 x86_64
|
||||||
|
<b>.:MMMM<span class="green">.:MMMMMMMMMMMMMMM:.</span>MMMM:.</b> <b class="green">Host</b>: Macmini7,1 1.0
|
||||||
|
<b>-MMM<span class="green">-M---MMMMMMMMMMMMMMMMMMM.</span>MMM-</b> <b class="green">Uptime</b>: 2001 days, 9 hours, 11 mins
|
||||||
|
<b>`:MMM<span class="green">:MM` :MMMM:....::-...-MMMM:</span>MMM:`</b> <b class="green">Packages</b>: 2116 (dpkg)
|
||||||
|
<b>:MMM<span class="green">:MMM` :MM:` `` `` `:MMM:</span>MMM:</b> <b class="green">CPU</b>: Intel i5-4278U (4) @ 3.100GHz
|
||||||
|
<b>.MMM<span class="green">.MMMM` :MM. -MM. .MM- `MMMM.</span>MMM.</b> <b class="green">GPU</b>: Intel Haswell-ULT
|
||||||
|
<b>:MMM<span class="green">:MMMM` :MM. -MM- .MM: `MMMM-</span>MMM:</b> <b class="green">Memory</b>: 9011MiB / 15866MiB
|
||||||
|
<b>:MMM<span class="green">:MMMM` :MM. -MM- .MM: `MMMM:</span>MMM:</b>
|
||||||
|
<b>:MMM<span class="green">:MMMM` :MM. -MM- .MM: `MMMM-</span>MMM:</b>
|
||||||
|
<b>.MMM<span class="green">.MMMM` :MM:--:MM:--:MM: `MMMM.</span>MMM.</b>
|
||||||
|
<b>:MMM<span class="green">:MMM- `-MMMMMMMMMMMM-` -MMM-</span>MMM:</b>
|
||||||
|
<b>:MMM<span class="green">:MMM:` `:MMM:</span>MMM:</b>
|
||||||
|
<b>.MMM<span class="green">.MMMM:--------------:MMMM.</span>MMM.</b>
|
||||||
|
<b>'-MMMM<span class="green">.-MMMMMMMMMMMMMMM-.</span>MMMM-'</b>
|
||||||
|
<b>'.-MMMM<span class="green">``--:::::--``</span>MMMM-.'</b>
|
||||||
|
<b>'-MMMMMMMMMMMMM-'</b>
|
||||||
|
<b>``-:::::-``</b></pre>
|
||||||
|
|
||||||
|
<div><b class="green">trinkey@server</b>:<b class="blue">~</b>$ exit</div>
|
||||||
|
<div><b class="green">trinkey@website</b>:<b class="blue">~</b>$ <i class="cursor">.</i></div>
|
||||||
|
</div>
|
||||||
|
<div data-template-field="width" data-is-number>1000</div>
|
||||||
|
<div data-template-field="height" data-is-number>800</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
191
js/index.js
Normal file
191
js/index.js
Normal file
|
|
@ -0,0 +1,191 @@
|
||||||
|
/* config: {
|
||||||
|
title: string,
|
||||||
|
content: string,
|
||||||
|
id: string,
|
||||||
|
width?: number = 400,
|
||||||
|
height?: number = 400,
|
||||||
|
minWidth?: number = 200,
|
||||||
|
minHeight?: number = 200,
|
||||||
|
posX?: number = null, // automatically centers window based on w/h
|
||||||
|
posY?: number = null,
|
||||||
|
postCreation?: () => void
|
||||||
|
} */
|
||||||
|
|
||||||
|
let WINDOWS = {};
|
||||||
|
let MOUSE_MOVE_PROCESSING = {};
|
||||||
|
let globalIncrement = 1;
|
||||||
|
|
||||||
|
function createWindow(config) {
|
||||||
|
if (document.getElementById(config.id)) {
|
||||||
|
WINDOWS[config.id].element.style.zIndex = globalIncrement;
|
||||||
|
globalIncrement++;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1 - border
|
||||||
|
// 10 - padding
|
||||||
|
// 35 - header
|
||||||
|
let _windowPaddingX = 1*2 + 10*2;
|
||||||
|
let _windowPaddingY = 1*2 + 10*2 + 35;
|
||||||
|
|
||||||
|
config.width = config.width || 600;
|
||||||
|
config.height = config.height || 400;
|
||||||
|
config.minWidth = config.minWidth || 200;
|
||||||
|
config.minHeight = config.minHeight || 200;
|
||||||
|
|
||||||
|
let realWidth = Math.max(config.minWidth, Math.min(config.width, innerWidth - _windowPaddingX - 20));
|
||||||
|
let realHeight = Math.max(config.minHeight, Math.min(config.height, innerHeight - _windowPaddingY - 20));
|
||||||
|
|
||||||
|
let posX = config.posX || Math.round((innerWidth / 2) - ((realWidth + _windowPaddingX) / 2));
|
||||||
|
let posY = config.posY || Math.round((innerHeight / 2) - ((realHeight + _windowPaddingY) / 2));
|
||||||
|
|
||||||
|
let wO = document.createElement("div");
|
||||||
|
wO.classList.add("window-outer");
|
||||||
|
|
||||||
|
let w = document.createElement("div");
|
||||||
|
w.classList.add("window");
|
||||||
|
w.style.width = `${realWidth}px`;
|
||||||
|
w.style.height = `${realHeight}px`;
|
||||||
|
w.innerHTML = config.content;
|
||||||
|
|
||||||
|
let wH = document.createElement("div");
|
||||||
|
wH.classList.add("window-header");
|
||||||
|
wH.innerHTML = `
|
||||||
|
<i class="window-header-button blank"></i>
|
||||||
|
<i class="window-header-button blank"></i>
|
||||||
|
<i class="window-header-button blank"></i>
|
||||||
|
<strong class="window-header-title">${config.title}</strong>
|
||||||
|
<i data-no-move class="window-header-button minimize"></i>
|
||||||
|
<i data-no-move class="window-header-button fullscreen"></i>
|
||||||
|
<i data-no-move class="window-header-button close"></i>
|
||||||
|
`;
|
||||||
|
|
||||||
|
let wC = document.createElement("div");
|
||||||
|
wC.classList.add("window-container");
|
||||||
|
wC.style.left = `${posX}px`;
|
||||||
|
wC.style.top = `${posY}px`;
|
||||||
|
wC.id = config.id;
|
||||||
|
wC.style.zIndex = globalIncrement;
|
||||||
|
wC.style.width = `${realWidth + _windowPaddingX - 2}px`;
|
||||||
|
|
||||||
|
wO.append(w)
|
||||||
|
wC.append(wH, wO);
|
||||||
|
|
||||||
|
document.body.append(wC);
|
||||||
|
WINDOWS[config.id] = {
|
||||||
|
element: wC,
|
||||||
|
height: realHeight,
|
||||||
|
width: realWidth,
|
||||||
|
posX: posX,
|
||||||
|
posY: posY,
|
||||||
|
mouseDown: false,
|
||||||
|
fullscreen: false,
|
||||||
|
vars: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
function mouseMoveEvent(x, y) {
|
||||||
|
WINDOWS[config.id].posX = Math.max(0, Math.min(innerWidth - WINDOWS[config.id].width - _windowPaddingX, x - WINDOWS[config.id].vars.mouseOffsetX));
|
||||||
|
WINDOWS[config.id].posY = Math.max(0, Math.min(innerHeight - WINDOWS[config.id].height - _windowPaddingY, y - WINDOWS[config.id].vars.mouseOffsetY));
|
||||||
|
wC.style.left = `${WINDOWS[config.id].posX}px`;
|
||||||
|
wC.style.top = `${WINDOWS[config.id].posY}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
wC.addEventListener("mousedown", function() {
|
||||||
|
wC.style.zIndex = globalIncrement;
|
||||||
|
globalIncrement++;
|
||||||
|
})
|
||||||
|
|
||||||
|
wH.addEventListener("mousedown", function(e) {
|
||||||
|
if (e.target.dataset.noMove !== undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
WINDOWS[config.id].mouseDown = true;
|
||||||
|
WINDOWS[config.id].vars.mouseOffsetX = e.clientX - WINDOWS[config.id].posX;
|
||||||
|
WINDOWS[config.id].vars.mouseOffsetY = e.clientY - WINDOWS[config.id].posY;
|
||||||
|
MOUSE_MOVE_PROCESSING[config.id] = {
|
||||||
|
callback: mouseMoveEvent,
|
||||||
|
mouseUp: true
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
wH.querySelector(".close").addEventListener("click", function() {
|
||||||
|
delete WINDOWS[config.id];
|
||||||
|
delete MOUSE_MOVE_PROCESSING[config.id];
|
||||||
|
wC.remove();
|
||||||
|
});
|
||||||
|
|
||||||
|
wH.querySelector(".fullscreen").addEventListener("click", function() {
|
||||||
|
if (WINDOWS[config.id].fullscreen) {
|
||||||
|
WINDOWS[config.id].posX = WINDOWS[config.id].vars.oldPosX;
|
||||||
|
WINDOWS[config.id].posY = WINDOWS[config.id].vars.oldPosY;
|
||||||
|
WINDOWS[config.id].width = WINDOWS[config.id].vars.oldWidth;
|
||||||
|
WINDOWS[config.id].height = WINDOWS[config.id].vars.oldHeight;
|
||||||
|
WINDOWS[config.id].fullscreen = false;
|
||||||
|
delete WINDOWS[config.id].vars.oldPosX;
|
||||||
|
delete WINDOWS[config.id].vars.oldPosY;
|
||||||
|
delete WINDOWS[config.id].vars.oldWidth;
|
||||||
|
delete WINDOWS[config.id].vars.oldHeight;
|
||||||
|
wC.style.left = `${WINDOWS[config.id].posX}px`;
|
||||||
|
wC.style.top = `${WINDOWS[config.id].posY}px`;
|
||||||
|
wC.style.width = `${WINDOWS[config.id].width + _windowPaddingX - 2}px`;
|
||||||
|
w.style.width = `${WINDOWS[config.id].width}px`;
|
||||||
|
w.style.height = `${WINDOWS[config.id].height}px`;
|
||||||
|
} else {
|
||||||
|
WINDOWS[config.id].vars.oldPosX = WINDOWS[config.id].posX;
|
||||||
|
WINDOWS[config.id].vars.oldPosY = WINDOWS[config.id].posY;
|
||||||
|
WINDOWS[config.id].vars.oldWidth = WINDOWS[config.id].width;
|
||||||
|
WINDOWS[config.id].vars.oldHeight = WINDOWS[config.id].height;
|
||||||
|
WINDOWS[config.id].fullscreen = true;
|
||||||
|
WINDOWS[config.id].posX = 0;
|
||||||
|
WINDOWS[config.id].posY = 0;
|
||||||
|
WINDOWS[config.id].width = innerWidth;
|
||||||
|
WINDOWS[config.id].height = innerHeight;
|
||||||
|
wC.style.left = "0px";
|
||||||
|
wC.style.top = "0px";
|
||||||
|
wC.style.width = `${WINDOWS[config.id].width}px`;
|
||||||
|
w.style.width = `${WINDOWS[config.id].width - _windowPaddingX}px`;
|
||||||
|
w.style.height = `${WINDOWS[config.id].height - _windowPaddingY}px`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
globalIncrement++;
|
||||||
|
|
||||||
|
if (typeof config.postCreation == "function") {
|
||||||
|
config.postCreation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("mousemove", function(e) {
|
||||||
|
for (const key of Object.keys(MOUSE_MOVE_PROCESSING)) {
|
||||||
|
MOUSE_MOVE_PROCESSING[key].callback(e.clientX, e.clientY);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("mouseup", function() {
|
||||||
|
for (const key of Object.keys(MOUSE_MOVE_PROCESSING)) {
|
||||||
|
if (MOUSE_MOVE_PROCESSING[key].mouseUp) {
|
||||||
|
delete MOUSE_MOVE_PROCESSING[key];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function windowPreset(template) {
|
||||||
|
let el = document.querySelector(`#window-templates > [data-template-id="${template}"]`);
|
||||||
|
|
||||||
|
if (!el) { return; }
|
||||||
|
|
||||||
|
let config = {
|
||||||
|
id: template
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const field of el.querySelectorAll("[data-template-field]")) {
|
||||||
|
config[field.dataset.templateField] = field.dataset.isNumber === "" ? +field.innerText : field.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
createWindow(config);
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyButton() {
|
||||||
|
navigator.clipboard.writeText("<a href=\"https://trinkey.com/\" target=\"_blank\"><img src=\"https://trinkey.com/img/88x31.png\" alt=\"trinkey's 88x31. image of her cat on the right with the word trinkey name taking up the rest of the button.\" title=\"trinkey's 88x31. image of her cat on the right with the word trinkey name taking up the rest of the button.\"></a>");
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue