trinkey/website
1
0
Fork 0
Code Issues Pull requests Activity

Initial commit

Browse source
This commit is contained in:
trinkey 2024-12-13 23:26:07 -05:00
commit 15b454f66e
9 changed files with 642 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

245
css/base.css Normal file
View 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
View file

Binary file not shown.

BIN
css/font/UbuntuMono-BoldItalic.ttf Normal file
View file

Binary file not shown.

BIN
css/font/UbuntuMono-Italic.ttf Normal file
View file

Binary file not shown.

BIN
css/font/UbuntuMono-Regular.ttf Normal file
View file

Binary file not shown.

BIN
img/88x31.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
img/cat.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 MiB

206
index.html Normal file
View 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 &quot;Micro&quot;" title="a non-spinning demigirl blobcat angled slightly with a black border to the left of &quot;Micro&quot;"></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
View 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>");
}