first commit
1
assets/discord.svg
Normal 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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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
After Width: | Height: | Size: 200 KiB |
101
index.html
Normal 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
After Width: | Height: | Size: 298 KiB |
62
style.css
Normal 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;
|
||||
}
|
27
styles/bundles/complete.css
Normal 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;
|
||||
}
|
3
styles/classes/breaks.css
Normal file
@ -0,0 +1,3 @@
|
||||
.break-word-all {
|
||||
word-break: break-all;
|
||||
}
|
19
styles/classes/flex.css
Normal 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;
|
||||
}
|
11
styles/classes/ul-directions.css
Normal 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
@ -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;
|
||||
}
|
7
styles/components/footer.css
Normal file
@ -0,0 +1,7 @@
|
||||
@import url('/styles/common.css');
|
||||
footer {
|
||||
margin-top: 1em;
|
||||
color: var(--dark-text);
|
||||
text-align: center;
|
||||
font-size: .7em;
|
||||
}
|
26
styles/components/header.css
Normal 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);
|
||||
}
|
20
styles/components/pre-icon.css
Normal 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;
|
||||
}
|
41
styles/components/reference.css
Normal 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
@ -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
@ -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
@ -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>
|
BIN
tools/qalc/flaviut/favicon.png
Normal file
After Width: | Height: | Size: 9.5 KiB |
55
tools/qalc/flaviut/gnuplot-worker.js
Normal 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');
|
4696
tools/qalc/flaviut/gnuplot.js
Normal file
BIN
tools/qalc/flaviut/gnuplot.wasm
Executable file
53
tools/qalc/flaviut/index.html
Normal 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
@ -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
BIN
tools/qalc/flaviut/qalc.wasm
Executable file
81
tools/qalc/flaviut/style.css
Normal 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
@ -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>
|