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

120
h2i.html
View File

@ -14,32 +14,95 @@
/* nooo remi dont do that */ /* nooo remi dont do that */
} }
:root {
--bg: #00000000;
--fg: #000000;
}
body { body {
font-family: Arial; font-family: Arial;
overflow: hidden; overflow: hidden;
margin-right: 0; margin: 0;
margin-bottom: 0; color: var(--fg);
background-color: var(--bg);
}
input {
border-radius: 0;
border: 0;
background: transparent;
color: var(--fg);
} }
#hinput { #hinput {
font-family: 'heonian'; font-family: 'heonian';
width: 100%;
font-size: 24px;
padding: 8px;
}
#hinput::placeholder {
color: var(--fg);
opacity: 0.5;
} }
canvas { canvas {
width: 100%; width: 100%;
height: 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> </style>
</head> </head>
<body> <body>
heonian: <input type="text" name="hinput" id="hinput"><br> <input type="text" name="hinput" id="hinput" placeholder="heonian text goes here~"><br>
text color: <input type="text" name="tcolor" value="#000000"><br> <div id="heeheefunnyfloat">
background color: <input type="text" name="bcolor" value="#00000000"><br> <div>
font size: <input type="text" name="fsize" value="16"><br> <span>text color:</span><br>
<button>save as image</button> <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 src="/ime.js"></script>
<script> <script>
let ctx = document.getElementById('c').getContext('2d'); let ctx = document.getElementById('c').getContext('2d');
@ -48,13 +111,29 @@
let bcolor = document.getElementsByName('bcolor')[0]; let bcolor = document.getElementsByName('bcolor')[0];
let fsize = document.getElementsByName('fsize')[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() { function update() {
ctx.canvas.width = window.innerWidth; ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight; 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);
ctx.fillStyle = bcolor.value;
ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.height); if (validateColor(bcolor.value)) {
ctx.fillStyle = tcolor.value; ctx.fillStyle = bcolor.value;
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.font = fsize.value + "px heonian";
ctx.fillText(hinput.value, 0, fsize.value); ctx.fillText(hinput.value, 0, fsize.value);
} }
@ -101,11 +180,24 @@
link.href = image; link.href = image;
link.download = "heonian.png"; link.download = "heonian.png";
link.innerHTML = "remi doing hacky solutions? NEVER"; link.innerHTML = "remi doing hacky solutions? NEVER";
link.click(); link.click();
update(); 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> </script>
</body> </body>