add previously made stuff
This commit is contained in:
185
index.html
Normal file
185
index.html
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>MiningTcup</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="centerer">
|
||||||
|
<div id="content">
|
||||||
|
<div id="title-1">
|
||||||
|
<h1>
|
||||||
|
Ted Pier<span class="subtitle"
|
||||||
|
> a.k.a MiningTcup</span
|
||||||
|
>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<h2>Things I've Done</h2>
|
||||||
|
<!--
|
||||||
|
1. explain terms / concepts
|
||||||
|
2. explain my relation to the concepts
|
||||||
|
3. explain what i did / the evidence
|
||||||
|
!-->
|
||||||
|
<h3><a target="_blank" href="/youclient">YouClient</a></h3>
|
||||||
|
<p>
|
||||||
|
My middle school gave each student an incredibly weak
|
||||||
|
Chromebook infested with blockers and spyware, and
|
||||||
|
didn't allow us to bring our own computers. Since one of
|
||||||
|
my strongest skills at the time was web dev, I made an
|
||||||
|
alternative YouTube client. The entire thing is a single
|
||||||
|
html file, making it easy to distribute and run.
|
||||||
|
Advantages over using the official YouTube website are
|
||||||
|
faster loading, no ads, tab customization, anti-unload,
|
||||||
|
no browser history, and no spyware spying.
|
||||||
|
</p>
|
||||||
|
<h3>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://git.miningtcup.me/MiningTcup/dotfiles/"
|
||||||
|
>Linux</a
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
The kernel is the core of the operating system. Linux is
|
||||||
|
an alternative operating system kernel, similar to the
|
||||||
|
Windows or MacOS kernels. It can run on nearly any
|
||||||
|
device (including PCs and Macs), and is used by Android.
|
||||||
|
One of my favorite things to do is mess with
|
||||||
|
configuration files on my
|
||||||
|
<a target="_blank" href="https://archlinux.org"
|
||||||
|
>Arch Linux</a
|
||||||
|
>
|
||||||
|
+
|
||||||
|
<a target="_blank" href="https://hypr.land">Hyprland</a>
|
||||||
|
system. Over the last more than a year, I've settled on
|
||||||
|
an (in my opinion) nearly <i>perfect</i> configuration.
|
||||||
|
</p>
|
||||||
|
<h3>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://git.miningtcup.me/MiningTcup/noteserver"
|
||||||
|
>Notes</a
|
||||||
|
>
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
I'd always wanted to use a notes app, but I never liked
|
||||||
|
any of the options. Instead of paying with my
|
||||||
|
information, time, or money for one that someone else
|
||||||
|
made, I decided to make my own. I wrote the server in
|
||||||
|
Go, the language which I believe is best for anything to
|
||||||
|
do with servers, and the app in Android Studio using
|
||||||
|
Kotlin. After completing the server, I accidentally
|
||||||
|
deleted the source code, prompting me to recode it. It's
|
||||||
|
finished now, and you can view the most likely terrible
|
||||||
|
source code for the server
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://git.miningtcup.me/MiningTcup/noteserver"
|
||||||
|
>here</a
|
||||||
|
>. Although I don't plan on giving out the source code
|
||||||
|
for the app because it's so terrible, you can download
|
||||||
|
the APK file <a download href="notes.apk">here</a>.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="overlay" class="absolute-fill">
|
||||||
|
<div id="spinner-container">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 210 210"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<defs id="defs1">
|
||||||
|
<linearGradient id="linearGradient12">
|
||||||
|
<stop
|
||||||
|
style="stop-color: #ffffff; stop-opacity: 1"
|
||||||
|
offset="0"
|
||||||
|
id="stop12"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
style="stop-color: #5f44f4; stop-opacity: 1"
|
||||||
|
offset="1"
|
||||||
|
id="stop13"
|
||||||
|
/>
|
||||||
|
</linearGradient>
|
||||||
|
<mask maskUnits="userSpaceOnUse" id="mask12">
|
||||||
|
<path
|
||||||
|
style="
|
||||||
|
fill: #ffffff;
|
||||||
|
fill-opacity: 1;
|
||||||
|
stroke-width: 0;
|
||||||
|
stroke-dasharray: none;
|
||||||
|
stroke-opacity: 1;
|
||||||
|
"
|
||||||
|
id="path12"
|
||||||
|
d="M -28.173904,109.3663 -289.08685,35.251708 -94.445259,-153.64823 Z"
|
||||||
|
transform="matrix(0.80486618,0,0,0.79843498,122.67622,12.678124)"
|
||||||
|
/>
|
||||||
|
</mask>
|
||||||
|
<radialGradient
|
||||||
|
xlink:href="#linearGradient12"
|
||||||
|
id="radialGradient13"
|
||||||
|
cx="105"
|
||||||
|
cy="105"
|
||||||
|
fx="105"
|
||||||
|
fy="105"
|
||||||
|
r="100.1663"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
/>
|
||||||
|
</defs>
|
||||||
|
<g id="layer1">
|
||||||
|
<circle
|
||||||
|
style="
|
||||||
|
fill: none;
|
||||||
|
stroke: url(#radialGradient13);
|
||||||
|
stroke-width: 28;
|
||||||
|
stroke-dasharray: none;
|
||||||
|
stroke-opacity: 1;
|
||||||
|
"
|
||||||
|
id="path1"
|
||||||
|
cx="105"
|
||||||
|
cy="105"
|
||||||
|
r="90.166298"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
style="
|
||||||
|
fill: none;
|
||||||
|
stroke: #f5f445;
|
||||||
|
stroke-width: 29;
|
||||||
|
stroke-dasharray: none;
|
||||||
|
stroke-opacity: 1;
|
||||||
|
"
|
||||||
|
id="path1-3"
|
||||||
|
cx="105"
|
||||||
|
cy="105"
|
||||||
|
r="90.166298"
|
||||||
|
mask="url(#mask12)"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
style="
|
||||||
|
fill: none;
|
||||||
|
stroke: #f5c945;
|
||||||
|
stroke-width: 29;
|
||||||
|
stroke-dasharray: none;
|
||||||
|
stroke-opacity: 1;
|
||||||
|
"
|
||||||
|
id="path1-4"
|
||||||
|
cx="105"
|
||||||
|
cy="105"
|
||||||
|
r="90.166298"
|
||||||
|
mask="url(#mask12)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
106
style.css
Normal file
106
style.css
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
@keyframes spinner-a {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spinner-b {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#path1-3 {
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-name: spinner-a;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-direction: alternate;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
#path1-4 {
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
animation-duration: 1.1s;
|
||||||
|
animation-name: spinner-b;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-direction: alternate;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spinner-container {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
background: #88888888;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
max-width: 512px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centerer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
color: grey;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute-fill {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title-1 {
|
||||||
|
background-image: url(lulu.webp);
|
||||||
|
background-size: 60%;
|
||||||
|
background-position: 100% 35%;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title-1 * {
|
||||||
|
margin: 0;
|
||||||
|
padding: 16px;
|
||||||
|
background: #000000;
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
BIN
text-to-image/gg-sans.woff2
Normal file
BIN
text-to-image/gg-sans.woff2
Normal file
Binary file not shown.
24
text-to-image/index.html
Normal file
24
text-to-image/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>Text to Image</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<select id="background">
|
||||||
|
<option value="#00000000">Transparent</option>
|
||||||
|
<option value="#1A1A1E">Dark</option>
|
||||||
|
<option value="#323339">Ash</option>
|
||||||
|
<option value="#070709">Onyx</option>
|
||||||
|
<option value="#FBFBFB">Light</option>
|
||||||
|
</select>
|
||||||
|
<textarea id="input" autofocus></textarea>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
<img alt="preview" id="preview" />
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
66
text-to-image/script.js
Normal file
66
text-to-image/script.js
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
const $ = (x) => document.getElementById(x);
|
||||||
|
|
||||||
|
const input = $("input");
|
||||||
|
const canvas = $("canvas");
|
||||||
|
const preview = $("preview");
|
||||||
|
const background = $("background");
|
||||||
|
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const lineHeight = 22;
|
||||||
|
|
||||||
|
let height = 0;
|
||||||
|
let line = 0;
|
||||||
|
|
||||||
|
input.addEventListener("input", () => {
|
||||||
|
const lines = input.value.split("\n");
|
||||||
|
height = lines.length;
|
||||||
|
canvas.width = 512;
|
||||||
|
ctx.font =
|
||||||
|
'16px "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
|
||||||
|
ctx.textBaseline = "hanging";
|
||||||
|
line = 0;
|
||||||
|
lines.forEach(renderText);
|
||||||
|
canvas.height = 22 * height;
|
||||||
|
ctx.fillStyle = background.value;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.fillStyle = "#EFEFF0";
|
||||||
|
ctx.font =
|
||||||
|
'16px "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
|
||||||
|
ctx.textBaseline = "hanging";
|
||||||
|
line = 0;
|
||||||
|
lines.forEach(renderText);
|
||||||
|
preview.src = canvas.toDataURL();
|
||||||
|
canvas.toBlob((blob) => {
|
||||||
|
const item = new ClipboardItem({ "image/png": blob });
|
||||||
|
navigator.clipboard.write([item]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
input.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key == "c" && e.ctrlKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderText(item, i) {
|
||||||
|
line++;
|
||||||
|
if (ctx.measureText(item).width > canvas.width) {
|
||||||
|
let rn = ctx.measureText(item).width;
|
||||||
|
let goal = canvas.width;
|
||||||
|
let len = item.length;
|
||||||
|
while (rn > goal) {
|
||||||
|
len--;
|
||||||
|
rn = ctx.measureText(item.slice(0, len)).width;
|
||||||
|
}
|
||||||
|
ctx.fillText(
|
||||||
|
item.slice(0, len),
|
||||||
|
0,
|
||||||
|
(line - 1) * lineHeight + 2,
|
||||||
|
canvas.width,
|
||||||
|
);
|
||||||
|
renderText(item.slice(len), line);
|
||||||
|
height++;
|
||||||
|
} else {
|
||||||
|
ctx.fillText(item, 0, (line - 1) * lineHeight + 2, canvas.width);
|
||||||
|
}
|
||||||
|
}
|
||||||
28
text-to-image/style.css
Normal file
28
text-to-image/style.css
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "gg sans";
|
||||||
|
src: url(gg-sans.woff2);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
outline: none;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family:
|
||||||
|
"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 22px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
resize: none;
|
||||||
|
height: max-content;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 512px;
|
||||||
|
background: #aaaaaa;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user