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