commit 15b454f66ed3e77ca733785bdd0f5c05770b4f34 Author: trinkey <97406176+trinkey@users.noreply.github.com> Date: Fri Dec 13 23:26:07 2024 -0500 Initial commit diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..3735069 --- /dev/null +++ b/css/base.css @@ -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; + } +} diff --git a/css/font/UbuntuMono-Bold.ttf b/css/font/UbuntuMono-Bold.ttf new file mode 100644 index 0000000..01ad81b Binary files /dev/null and b/css/font/UbuntuMono-Bold.ttf differ diff --git a/css/font/UbuntuMono-BoldItalic.ttf b/css/font/UbuntuMono-BoldItalic.ttf new file mode 100644 index 0000000..731884e Binary files /dev/null and b/css/font/UbuntuMono-BoldItalic.ttf differ diff --git a/css/font/UbuntuMono-Italic.ttf b/css/font/UbuntuMono-Italic.ttf new file mode 100644 index 0000000..b89338d Binary files /dev/null and b/css/font/UbuntuMono-Italic.ttf differ diff --git a/css/font/UbuntuMono-Regular.ttf b/css/font/UbuntuMono-Regular.ttf new file mode 100644 index 0000000..4977028 Binary files /dev/null and b/css/font/UbuntuMono-Regular.ttf differ diff --git a/img/88x31.png b/img/88x31.png new file mode 100644 index 0000000..f8ba000 Binary files /dev/null and b/img/88x31.png differ diff --git a/img/cat.jpg b/img/cat.jpg new file mode 100644 index 0000000..e184593 Binary files /dev/null and b/img/cat.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..cb9c898 --- /dev/null +++ b/index.html @@ -0,0 +1,206 @@ + + + + + trinkey's website!!! + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + My cat + + + + + + + + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..32f8085 --- /dev/null +++ b/js/index.js @@ -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 = ` + + + + ${config.title} + + + + `; + + 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("\"trinkey's"); +}