heonian.org/heonian-ime
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ok! it's pretty now~

Browse Source
This commit is contained in:
remi 2022-05-27 21:37:31 +02:00
parent 190249a3aa
commit 8e479d31b3
1 changed files with 106 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
h2i.html
View File

@ -14,32 +14,95 @@
/* nooo remi dont do that */
}
:root {
--bg: #00000000;
--fg: #000000;
}
body {
font-family: Arial;
overflow: hidden;
margin-right: 0;
margin-bottom: 0;
margin: 0;
color: var(--fg);
background-color: var(--bg);
}
input {
border-radius: 0;
border: 0;
background: transparent;
color: var(--fg);
}
#hinput {
font-family: 'heonian';
width: 100%;
font-size: 24px;
padding: 8px;
}
#hinput::placeholder {
color: var(--fg);
opacity: 0.5;
}
canvas {
width: 100%;
height: 100%;
margin-left: 8px;
}
#heeheefunnyfloat {
max-width: 700px;
display: flex;
flex-flow: row wrap;
padding: 8px;
align-items: center;
justify-content: space-between;
}
span {
opacity: 0.5;
}
input:focus {
outline: 0px;
}
a {
color: var(--fg);
border: 0;
font-size: 12px;
opacity: 0.5;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
heonian: <input type="text" name="hinput" id="hinput"><br>
text color: <input type="text" name="tcolor" value="#000000"><br>
background color: <input type="text" name="bcolor" value="#00000000"><br>
font size: <input type="text" name="fsize" value="16"><br>
<button>save as image</button>
<input type="text" name="hinput" id="hinput" placeholder="heonian text goes here~"><br>
<div id="heeheefunnyfloat">
<div>
<span>text color:</span><br>
<input type="text" name="tcolor" value="#000000">
</div>
<div>
<span>background color:</span><br>
<input type="text" name="bcolor" value="#00000000">
<canvas width="800" height="800" id="c"></canvas>
</div>
<div>
<span>font size:</span><br>
<input type="text" name="fsize" value="24">
</div>
<a>[ save as image ]</a>
</div>
<canvas id="c"></canvas>
<script src="/ime.js"></script>
<script>
let ctx = document.getElementById('c').getContext('2d');
@ -48,13 +111,29 @@
let bcolor = document.getElementsByName('bcolor')[0];
let fsize = document.getElementsByName('fsize')[0];
//if darkmode
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
tcolor.value = '#ffffff';
bcolor.value = '#000000';
update();
}
function update() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
if (validateColor(bcolor.value)) {
ctx.fillStyle = bcolor.value;
ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.height);
document.documentElement.style.setProperty('--bg', bcolor.value);
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
if (validateColor(tcolor.value)) {
ctx.fillStyle = tcolor.value;
document.documentElement.style.setProperty('--fg', tcolor.value);
}
ctx.font = fsize.value + "px heonian";
ctx.fillText(hinput.value, 0, fsize.value);
}
@ -105,7 +184,20 @@
update();
}
document.querySelector("button").addEventListener("click", () => {saveAsImage();});
function validateColor(c) {
//also blatantly stolen from SO
var litmus = 'red';
var d = document.createElement('div');
d.style.color = litmus;
d.style.color = c;
//Element's style.color will be reverted to litmus or set to '' if an invalid color is given
if (c !== litmus && (d.style.color === litmus || d.style.color === '')) {
return false;
}
return true;
}
document.querySelector("a").addEventListener("click", () => { saveAsImage(); });
</script>
</body>