1
0
forked from javalsai/website

first commit

This commit is contained in:
javalsai 2024-09-30 19:36:00 +02:00
commit ae59cb7ed9
Signed by: javalsai
SSH Key Fingerprint: SHA256:3G83yKhBUWVABVX/vPWH88xnK4+ptMtHkZGCRXD4Mk8
35 changed files with 9562 additions and 0 deletions

1
assets/discord.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>

After

Width:  |  Height:  |  Size: 749 B

1
assets/github.svg Normal file
View File

@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 960 B

41
assets/gitlab.svg Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 192.04616 184.94542"
version="1.1"
id="svg1"
sodipodi:docname="gitlab.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
width="192.04616"
height="184.94542"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="1.004836"
inkscape:cx="172.1674"
inkscape:cy="160.22515"
inkscape:window-width="1837"
inkscape:window-height="1038"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<defs
id="defs1">
<style
id="style1">.cls-1{fill:#171321;}</style>
</defs>
<path
class="cls-1"
d="m 188.85676,73.212737 -0.27,-0.69 -26.14,-68.2200004 a 6.81,6.81 0 0 0 -2.69,-3.24 7,7 0 0 0 -8,0.43 7,7 0 0 0 -2.32,3.52 l -17.65,54.0000004 H 60.316756 l -17.65,-54.0000004 a 6.86,6.86 0 0 0 -2.32,-3.53 7,7 0 0 0 -8,-0.43 6.87,6.87 0 0 0 -2.69,3.24 L 3.4667565,72.482737 l -0.26,0.69 A 48.54,48.54 0 0 0 19.306756,129.27274 l 0.09,0.07 0.24,0.17 39.82,29.82 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.760004,0 l 12,-9.06 19.7,-14.91 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.08,-56.040003 z"
id="path1" />
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

4
assets/link.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.16488 17.6505C8.92513 17.8743 8.73958 18.0241 8.54996 18.1336C7.62175 18.6695 6.47816 18.6695 5.54996 18.1336C5.20791 17.9361 4.87912 17.6073 4.22153 16.9498C3.56394 16.2922 3.23514 15.9634 3.03767 15.6213C2.50177 14.6931 2.50177 13.5495 3.03767 12.6213C3.23514 12.2793 3.56394 11.9505 4.22153 11.2929L7.04996 8.46448C7.70755 7.80689 8.03634 7.47809 8.37838 7.28062C9.30659 6.74472 10.4502 6.74472 11.3784 7.28061C11.7204 7.47809 12.0492 7.80689 12.7068 8.46448C13.3644 9.12207 13.6932 9.45086 13.8907 9.7929C14.4266 10.7211 14.4266 11.8647 13.8907 12.7929C13.7812 12.9825 13.6314 13.1681 13.4075 13.4078M10.5919 10.5922C10.368 10.8319 10.2182 11.0175 10.1087 11.2071C9.57284 12.1353 9.57284 13.2789 10.1087 14.2071C10.3062 14.5492 10.635 14.878 11.2926 15.5355C11.9502 16.1931 12.279 16.5219 12.621 16.7194C13.5492 17.2553 14.6928 17.2553 15.621 16.7194C15.9631 16.5219 16.2919 16.1931 16.9495 15.5355L19.7779 12.7071C20.4355 12.0495 20.7643 11.7207 20.9617 11.3787C21.4976 10.4505 21.4976 9.30689 20.9617 8.37869C20.7643 8.03665 20.4355 7.70785 19.7779 7.05026C19.1203 6.39267 18.7915 6.06388 18.4495 5.8664C17.5212 5.3305 16.3777 5.3305 15.4495 5.8664C15.2598 5.97588 15.0743 6.12571 14.8345 6.34955" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

9
assets/matrix.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<title>Matrix (protocol) logo</title>
<g transform="translate(-.095 .005)" fill="#040404">
<path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
<path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
<path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

1
assets/protonmail.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="100px" height="100px"><path d="M 5.1308594 8.0273438 C 4.0740398 7.9629954 3 8.773714 3 9.9414062 L 3 15.544922 L 3 35.275391 C 3 37.899239 5.1735938 40.033203 7.8105469 40.033203 L 40.189453 40.033203 C 42.826723 40.033203 45 37.898503 45 35.275391 L 45 9.9941406 C 45 8.4210183 43.051515 7.504901 41.826172 8.4824219 L 34.380859 14.414062 A 1.0001 1.0001 0 0 0 34.376953 14.417969 L 25.732422 21.306641 L 25.728516 21.310547 C 24.692126 22.133581 23.213281 22.127971 22.181641 21.298828 L 6.1523438 8.4101562 L 6.140625 8.4023438 C 5.8323754 8.1674634 5.4831326 8.0487931 5.1308594 8.0273438 z M 5 10.050781 L 20.927734 22.857422 C 21.456264 23.282215 22.057937 23.564 22.683594 23.734375 L 21.015625 25.064453 C 19.979172 25.889914 18.503138 25.887182 17.46875 25.058594 L 5 15.066406 L 5 10.050781 z M 43 10.103516 L 43 35.275391 C 43 36.802278 41.760183 38.033203 40.189453 38.033203 L 36 38.033203 L 36 15.681641 L 43 10.103516 z M 34 17.275391 L 34 38.033203 L 7.8105469 38.033203 C 6.2395 38.033203 5 36.803542 5 35.275391 L 5 17.628906 L 16.216797 26.619141 A 1.0001 1.0001 0 0 0 16.21875 26.619141 C 17.978362 28.028593 20.498172 28.033411 22.261719 26.628906 L 26.978516 22.869141 L 34 17.275391 z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

4
assets/reddit.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg">
<path d="M248,104a31.99228,31.99228,0,0,0-52.9375-24.19043c-16.75439-8.90112-36.76172-14.279-57.666-15.52539l5.19581-31.17578,21.83105,3.3584a24.00409,24.00409,0,1,0,2.43506-15.814l-29.64209-4.56006a7.996,7.996,0,0,0-9.10742,6.5918l-6.91309,41.478c-21.83887.94165-42.813,6.37891-60.2583,15.647a31.99266,31.99266,0,0,0-42.59229,47.74024A59.04669,59.04669,0,0,0,16,144c0,21.93457,12.042,42.35156,33.90723,57.48926C70.875,216.00588,98.60938,224,128,224s57.125-7.99414,78.09277-22.51074C227.958,186.35158,240,165.93459,240,144a59.01726,59.01726,0,0,0-2.3457-16.44922A32.17163,32.17163,0,0,0,248,104ZM72,132a16,16,0,1,1,16,16A16.01833,16.01833,0,0,1,72,132Zm92.69629,51.10938a80.122,80.122,0,0,1-73.39209,0,8,8,0,0,1,7.34033-14.2168,64.09433,64.09433,0,0,0,58.71094,0,8.00008,8.00008,0,0,1,7.34082,14.2168ZM168,148a16,16,0,1,1,16-16A16.01833,16.01833,0,0,1,168,148Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

8
components/header.html Normal file
View File

@ -0,0 +1,8 @@
<header>
<nav>
<ul class="row-ul">
<li><a href="/">home</a></li>
<li><a href="https://git.javalsai.dynv6.net/">gitea</a></li>
</ul>
</nav>
</header>

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

101
index.html Normal file
View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javalsai's Website</title>
<meta name="author" content="javalsai" />
<meta name="description" content="🐧javalsai's personal website" />
<meta name="theme-color" content="#dd5555" />
<meta name="og:url" content="https://javalsai.dynv6.net/" />
<meta name="og:type" content="profile" />
<meta name="og:title" content="Javalsai's Website" />
<meta property="og:description" content="🐧javalsai's personal website" />
<meta property="og:image" content="https://javalsai.dynv6.net/logo.png">
<meta property="og:image:width" content="864">
<meta property="og:image:height" content="864">
<meta name="profile:username" content="javalsai" />
<meta name="profile:gender" content="male" />
<meta property="twitter:image" content="https://javalsai.dynv6.net/logo.png">
<link rel="stylesheet" href="style.css">
</head>
<body class="flex column">
<!--# include virtual="/components/header.html" -->
<main>
<div class="intro-container flex row wrappable">
<div>
<h1><a class="reference" id="" href="#">Javalsai's Website</a></h1>
<p>I really don't know what to put, but yeah, this is my website, still working on it :P</p>
<p>Self-hosted, so it will work as long as my ISP doesn't troll me with an IP change. The DynDNS provider also
has big downtimes sometimes.</p>
<p>Not much to see, there's some subdomains in the top corner and this is just an intro to the domain and myself
in a way, but hey, it's responsive and clean. No JS, pure clean HTML structure and simple CSS.
<b><u>Unless</u></b> it's an interactive thing, but that will only be for some optional perks.</p>
</div>
<div>
<a href="/logo.png" target="_blank" style="display: inline-block;">
<img class="logo" src="/logo.png" />
</a>
</div>
</div>
<div class="flex row wrappable same-width sections">
<div>
<h2><a class="reference" id="myself" href="#myself">Myself :P</a></h2>
<p>So I guess I'll start talking a little bit about myself (go to my <a
href="https://github.com/javalsai">github</a>, <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd>,
<kbd><kbd>Ctrl</kbd> + <kbd>V</kbd></kbd>)
</p>
<p>I'm javalsai, I enjoy developing backend, terminal apps or network stuff. While I try to avoid web, mobile
and game dev (I just don't like the complexity of building GUIs).</p>
<p>I'm a huge Linux nerd and love messing around with the internals of my system, like filesystems, init
systems, network settings...</p>
<p>I also love hosting my own stuff like gitea, email, file server or http/s servers.</p>
<p>And about myself, well idk, I live in Spain 🇪🇸, I love skiing, and I also like maths and physics. Generally a
nerd of any scientific branch.</p>
</div>
<div>
<h2><a class="reference" id="socials" href="#socials">Socials</a></h2>
<p>Some of my social profiles too, you can contact me or anything there:</p>
<ul class="row-ul">
<li><a href="https://github.com/javalsai" target="_blank" class="pre-icon"
style="--pre-icon: url(/assets/github.svg); --scale-x: 0.93;">github</a></li>
<li><a href="https://gitlab.com/javalsai" target="_blank" class="pre-icon"
style="--pre-icon: url(/assets/gitlab.svg);">gitlab</a></li>
<li><a href="mailto:javalsai@proton.me" target="_blank" class="pre-icon"
style="--pre-icon: url(/assets/protonmail.svg);">protonmail</a></li>
<li><a href="https://matrix.to/#/@javalsai:matrix.org" target="_blank" class="pre-icon"
style="--pre-icon: url(/assets/matrix.svg); --scale-x: 0.78;">matrix</a></li>
<li><a href="https://discordapp.com/users/773579140951179305" target="_blank" class="pre-icon"
style="--pre-icon: url(/assets/discord.svg); --scale-x: 1.2;">discord</a></li>
<li><a href="https://reddit.com/user/javalsai/" target="_blank" class="pre-icon"
style="--pre-icon: url(/assets/reddit.svg);">reddit</a></li>
</ul>
<p>Also, not really socials but related:</p>
<ul>
<li>GPG: <code class="break-word-all">
E8887EE656F96E6535AAA08047F1C0AA01A08F39
</code></li>
<li>XMR: <code class="break-word-all">
48gGNbMVP2BZErXXB49AjVJvQDGFbyUyZd7fEMQe1weuPsrydbcaPftBggJddQP81U2ShS5Gju28oFhBGuhXiuMR8rsGZ4R
</code></li>
</ul>
</div>
</div>
</main>
<footer>
<p>
I hate web-dev, but ig it's cool to have a website
<br />
and no, no <i>light</i> mode, I have enough with this
</p>
</footer>
</body>
</html>

BIN
logo-round.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 298 KiB

BIN
logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 425 KiB

62
style.css Normal file
View File

@ -0,0 +1,62 @@
@import url('/styles/common.css');
@import url('/styles/classes/breaks.css');
@import url('/styles/classes/flex.css');
@import url('/styles/classes/ul-directions.css');
@import url('/styles/components/footer.css');
@import url('/styles/components/header.css');
@import url('/styles/components/pre-icon.css');
@import url('/styles/components/reference.css');
body {
max-width: 1300px;
min-width: 300px;
padding: 2em;
margin: 4.5em auto auto;
background: var(--background);
font-family: var(--mono-font);
font-weight: 400;
font-size: 15px;
color: var(--text);
caret-color: var(--primary);
}
*, *::before, *::after {
transition: all .3s ease-out;
}
.into-container {
align-items: center;
}
.intro-container,
.sections {
column-gap: 2em;
}
.intro-container > *:first-child {
max-width: 55em;
margin-bottom: 2em;
}
.logo {
margin: 2.5em;
width: 20em;
border-radius: 50%;
box-shadow: .5em .5em 50px #fff5;
}
@media (any-hover: hover) {
.logo:hover {
width: 25em;
margin: 0;
border-radius: 15%;
}
}
.sections > * {
max-width: 35em;
}

View File

@ -0,0 +1,27 @@
@import url('/styles/common.css');
@import url('/styles/classes/breaks.css');
@import url('/styles/classes/flex.css');
@import url('/styles/classes/ul-directions.css');
@import url('/styles/components/footer.css');
@import url('/styles/components/header.css');
@import url('/styles/components/pre-icon.css');
@import url('/styles/components/reference.css');
body {
max-width: 1300px;
min-width: 300px;
padding: 2em;
margin: 4.5em auto auto;
background: var(--background);
font-family: var(--mono-font);
font-weight: 400;
font-size: 15px;
color: var(--text);
caret-color: var(--primary);
}
*, *::before, *::after {
transition: all .3s ease-out;
}

View File

@ -0,0 +1,3 @@
.break-word-all {
word-break: break-all;
}

19
styles/classes/flex.css Normal file
View File

@ -0,0 +1,19 @@
.flex {
display: flex;
justify-content: space-around;
}
.flex.row {
flex-direction: row;
}
.flex.column {
flex-direction: column;
}
.flex.wrappable {
flex-wrap: wrap;
}
.flex.same-width {
flex: 1;
}

View File

@ -0,0 +1,11 @@
.row-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.row-ul > li {
margin: 0 .5em;
display: inline;
margin: 0;
}

68
styles/common.css Normal file
View File

@ -0,0 +1,68 @@
@import url('/styles/variables.css');
@import url('/styles/scrollbar.css');
h1, h2, h3, h4, h5 {
font-family: var(--font);
font-weight: 700;
}
html {font-size: 100%;} /* 16px */
h1 {font-size: 4.210rem; /* 67.36px */}
h2 {font-size: 3.158rem; /* 50.56px */}
h3 {font-size: 2.369rem; /* 37.92px */}
h4 {font-size: 1.777rem; /* 28.48px */}
h5 {font-size: 1.333rem; /* 21.28px */}
small {font-size: 0.750rem; /* 12px */}
a:link {
color: var(--primary);
}
a:visited {
color: var(--secondary);
}
@media (any-hover: hover) {
a:visited:hover,
a:link:hover {
color: var(--accent);
}
}
::selection {
background: var(--primary);
color: var(--primary-complementary);
}
kbd > kbd, code {
background: var(--background-lighter);
font-size: .8em;
padding: .1em .4em;
border: 1px solid white;
border-radius: .5em;
font-family: var(--mono-font);
letter-spacing: .1em;
}
input {
background: var(--background-lighter);
color: var(--text);
}
@media (any-hover: hover) {
p:hover,
*:hover::before {
filter: brightness(1.35);
}
}
*:focus {
outline: double var(--primary);
border: 2px solid #0000;
}

View File

@ -0,0 +1,7 @@
@import url('/styles/common.css');
footer {
margin-top: 1em;
color: var(--dark-text);
text-align: center;
font-size: .7em;
}

View File

@ -0,0 +1,26 @@
@import url('/styles/common.css');
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: min-content;
border-bottom: 1px solid var(--dark);
padding: .7em;
backdrop-filter: blur(10px);
}
@media (any-hover: hover) {
header:hover {
padding: 1em;
}
}
header a:link,
header a:visited
{
color: var(--primary);
}

View File

@ -0,0 +1,20 @@
@import url('/styles/common.css');
.pre-icon {
display: inline-flex;
align-items: center;
height: 1em;
--scale-x: 1;
--scale-y: 1;
}
.pre-icon::before {
content: '';
mask: var(--pre-icon);
mask-size: cover;
background: var(--dark);
width: calc(1em * var(--scale-x));
height: calc(1em * var(--scale-y));
margin-right: .3em;
display: inline-block;
}

View File

@ -0,0 +1,41 @@
@import url('/styles/common.css');
a.reference:link,
a.reference:visited {
color: inherit;
text-decoration: inherit;
}
@media (any-hover: hover) {
a.reference:hover:link,
a.reference:hover:visited {
color: var(--accent);
}
}
a.reference {
display: inline-flex;
align-items: center;
}
a.reference::before {
content: '';
mask: url('/assets/link.svg');
mask-size: cover;
background: var(--dark);
opacity: 0;
width: 0;
height: 1em;
transform: scale(0);
display: inline-block;
}
@media (any-hover: hover) {
a.reference:hover::before {
opacity: 1;
width: 1em;
height: 1em;
margin-right: -.1em;
transform: scale(.7);
}
}

20
styles/scrollbar.css Normal file
View File

@ -0,0 +1,20 @@
/* width */
::-webkit-scrollbar {
width: 4px;
}
/* Track */
::-webkit-scrollbar-track {
background: #0000;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #fff;
}

17
styles/variables.css Normal file
View File

@ -0,0 +1,17 @@
/* ew google, I know, but I want easy fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Oxygen%20Mono:400');
:root {
--text: #ddd3d5;
--dark-text: #8d8385;
--dark: #4d4345;
--background: #0f0a0b;
--background-lighter: #2f2a2b;
--primary: #dd5555;
--primary-complementary: #55dddd;
--secondary: #606b33;
--accent: #d1985c;
--font: 'Montserrat', Arial;
--mono-font: 'Oxygen Mono', monospace;
}

22
tools/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javalsai's Website - Tools</title>
<link rel="stylesheet" href="/styles/bundles/complete.css">
</head>
<body class="flex column">
<!--# include virtual="/components/header.html" -->
<main>
<h1><a class="reference" id="tools" href="#tools">Tools</a></h1>
<p>This is just a collection of tools or stuff I've made, out there for any to use.</p>
<ul>
<li><a href="qalc">qalc</a> - Popular libqalculate tool compiled for the web</li>
</ul>
</main>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

View File

@ -0,0 +1,55 @@
let pendingRequests = [];
self.addEventListener('message', ({ data }) => {
if (pendingRequests) {
// gnuplot not loaded yet
pendingRequests.push(data);
} else {
doPlot(data);
}
});
var Module = {
noInitialRun: true,
postRun: () => {
shouldRunNow = true;
pendingRequests.forEach(doPlot);
pendingRequests = null;
},
print: (s) => {
console.log('GNUPLOT LOG: ' + s);
},
printErr: (s) => {
console.warn('GNUPLOT ERR: ' + s);
},
};
function doPlot({
fix_cmd = true,
data_files = {},
commands,
id,
// TODO: do something with these...?
extra_commandline,
persist,
}) {
const files = Object.keys(data_files);
for (const [file, data] of Object.entries(data_files)) {
FS.writeFile(file, data);
}
const cmd = fix_cmd
? commands.replace(
'set terminal pop',
"set terminal svg; set output '/output'"
)
: commands;
FS.writeFile('/commands', cmd);
callMain(['/commands']);
const output = FS.readFile('/output', { encoding: 'utf8' });
for (const file of ['/commands', '/output', ...files]) {
FS.unlink(file);
}
self.postMessage({ id, output });
}
importScripts('gnuplot.js');

File diff suppressed because it is too large Load Diff

BIN
tools/qalc/flaviut/gnuplot.wasm Executable file

Binary file not shown.

View File

@ -0,0 +1,53 @@
<!doctype html>
<html lang="en-us" style="margin: 2em;">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel='icon' type='image/png' href='favicon.png'>
<title>Qalculate Web</title>
<link rel="preload" href="qalc.js" as="script">
<link rel="preload" href="qalc.wasm" as="fetch">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Qalculate!</h1>
<p>This page is designed to test running Qalculate in the browser using
WASM. At the moment, currencies are not supported, as they require
external resources.</p>
<p>Plotting works, try <code>plot(3x^2; -10; 10)</code></p>
<p>The source code for this tool <a
href="https://github.com/flaviut/qalculate-wasm">can be found on
GitHub</a></p>
<div id="status">Downloading...</div>
<div class="hide" id="cell-template">
<div class="cell">
<input type="text" class="cell-input" placeholder="2x + 5 = 9">
<div class="cell-result"></div>
</div>
</div>
<div class="hide" id="plot-template">
<div class="plot-err">
<h2>Unable to plot</h2>
</div>
</div>
<div id="cells">
</div>
<script type='text/javascript' src='main.js'></script>
<script async type="text/javascript" src="qalc.js"></script>
<script data-goatcounter="https://j88og8.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
</body>
</html>

185
tools/qalc/flaviut/main.js Normal file
View File

@ -0,0 +1,185 @@
const statusElement = document.getElementById('status');
const cellTmpl = document.querySelector('#cell-template .cell');
const plotErrTmpl = document.querySelector('#plot-template .plot-err');
const cells = document.getElementById('cells');
/** @typedef {node: HTMLElement, input: HTMLInputElement, result: HTMLElement} Cell */
/** @type {Cell} */
let curCell;
/** @returns {Cell} */
const getCell = (cellNode) => ({
node: cellNode,
input: cellNode.querySelector('.cell-input'),
result: cellNode.querySelector('.cell-result'),
});
let cellNum = 0;
function newCell() {
if (curCell) {
curCell.input.readOnly = true;
}
curCell = getCell(cellTmpl.cloneNode(true));
cellNum += 1;
curCell.node.id = 'cell_' + cellNum;
curCell.input.addEventListener('keydown', onKey);
cells.append(curCell.node);
focusCell(curCell);
}
/** @param {Cell} cell */
function focusCell(cell) {
cell.input.focus({ preventScroll: true });
if (cell.input.readOnly) {
cell.input.select();
}
cell.node.scrollIntoView({ behavior: 'smooth' });
}
/** @param {KeyboardEvent} ev */
function onKey(ev) {
/** @type {HTMLInputElement} */
const inp = ev.target;
if (ev.key === 'Enter') {
const text = inp.value;
if (inp === curCell.input) {
if (text.trim() !== '') {
curCell.result.textContent = calc.calculateAndPrint(text, 1000);
}
newCell();
} else {
if (text.trim() !== '') {
curCell.input.value = text;
}
focusCell(curCell);
}
} else if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
const cellNode = inp.parentElement;
const adjacent =
ev.key === 'ArrowUp'
? 'previousElementSibling'
: 'nextElementSibling';
let adjacentCellNode = cellNode;
do {
// this would be null if e.g. we're at the top and try to go up
adjacentCellNode = adjacentCellNode[adjacent];
} while (
adjacentCellNode != null &&
!adjacentCellNode.classList.contains('cell')
);
if (adjacentCellNode) {
focusCell(getCell(adjacentCellNode));
}
ev.preventDefault();
}
}
const emptySvg = `<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg
width="600" height="480"
viewBox="0 0 600 480"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
/>`;
let emptySvgUrl;
let plot_id = 0;
let gnuplotWorker;
const makeSvgUrl = (data) =>
URL.createObjectURL(new Blob([data], { type: 'image/svg+xml' }));
function runGnuplot(data_files, commands, extra_commandline, persist) {
if (!gnuplotWorker) {
gnuplotWorker = new Worker('gnuplot-worker.js');
gnuplotWorker.addEventListener('message', (ev) => {
const { id, output } = ev.data;
const plot = document.getElementById('plot_' + id);
if (output) {
plot.src = makeSvgUrl(output);
setTimeout(() => {
focusCell(curCell);
}, 10);
} else {
plot.replaceWith(plotErrTmpl.cloneNode(true));
}
});
}
if (!emptySvgUrl) {
emptySvgUrl = makeSvgUrl(emptySvg);
}
const img = new Image();
img.classList.add('plot');
img.src = emptySvgUrl;
const id = plot_id++;
img.id = 'plot_' + id;
curCell.node.insertAdjacentElement('afterend', img);
gnuplotWorker.postMessage({
data_files,
commands,
extra_commandline,
persist,
id,
});
return true;
}
var Module = {
postRun: () => {
console.time('new');
window.calc = new Module.Calculator();
calc.loadGlobalDefinitions();
console.timeEnd('new');
newCell();
},
print: function (text) {
if (arguments.length > 1)
text = Array.prototype.slice.call(arguments).join(' ');
console.log(text);
},
printErr: function (text) {
if (arguments.length > 1)
text = Array.prototype.slice.call(arguments).join(' ');
console.error(text);
},
setStatus: function (text) {
if (!Module.setStatus.last)
Module.setStatus.last = { time: Date.now(), text: '' };
if (text === Module.setStatus.last.text) return;
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var now = Date.now();
if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
Module.setStatus.last.time = now;
Module.setStatus.last.text = text;
if (m) {
text = m[1];
}
statusElement.innerHTML = text;
},
totalDependencies: 0,
monitorRunDependencies: function (left) {
this.totalDependencies = Math.max(this.totalDependencies, left);
Module.setStatus(
left
? 'Preparing... (' +
(this.totalDependencies - left) +
'/' +
this.totalDependencies +
')'
: 'All downloads complete.'
);
},
};
Module.setStatus('Downloading...');
window.onerror = function (event) {
// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
Module.setStatus('Exception thrown, see JavaScript console');
Module.setStatus = function (text) {
if (text) Module.printErr('[post-exception status] ' + text);
};
};

3955
tools/qalc/flaviut/qalc.js Normal file

File diff suppressed because it is too large Load Diff

BIN
tools/qalc/flaviut/qalc.wasm Executable file

Binary file not shown.

View File

@ -0,0 +1,81 @@
@import url("/styles/common.css");
body {
max-width: 1300px;
min-width: 300px;
background: var(--background);
font-family: var(--mono-font);
font-weight: 400;
font-size: 15px;
color: var(--text);
caret-color: var(--primary);
}
*, *::before, *::after {
transition: all .3s ease-out;
}
.cell-result {
background: var(--background-lighter) !important;
}
img {
background: var(--background-lighter);
border-radius: 10px;
}
img:hover {
filter: brightness(1.5);
}
input {
border-radius: 5px;
}
/* original (except padding) */
.cell {
margin: 1em 0;
border-radius: 0.5em;
border: 1px solid black;
padding: 1em;
}
.cell-input {
width: 100%;
box-sizing: border-box;
margin-bottom: 1em;
padding: 0.6em;
}
.cell-result {
border-radius: 0.75em;
background: #eee;
padding: 0.75em;
}
.cell-input,
.cell-result {
font-family: sans-serif;
font-size: 0.9em;
}
body {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hide {
display: none;
}
.plot {
display: block;
}
.plot-err {
color: red;
width: 600px;
height: 480px;
display: flex;
flex-direction: column;
justify-content: center;
}
.plot-err h2 {
text-align: center;
}

24
tools/qalc/index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javalsai's Website - Tools::Qalc</title>
<link rel="stylesheet" href="/styles/bundles/complete.css">
</head>
<body class="flex column">
<!--# include virtual="/components/header.html" -->
<main>
<h1><a class="reference" id="qalc" href="#qalc">Qalc</a></h1>
<p>Popular libqalculate tool compiled for the web, I wanna wrap the library for with own style, but I'll also
leave the default example from <a
href="https://github.com/flaviut/qalculate-wasm">flaviut/qalculate-wasm</a> as it supports graphs too,
I'll just inject some CSS for dark mode:
<a href="flaviut">live example</a>
</p>
</main>
</body>
</html>