112 lines
4.1 KiB
HTML
112 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Picvatar</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
width: min(calc(100% - 16px), 50em);
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-wrapper {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-field {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-wrapper {
|
||
|
|
width: 50%;
|
||
|
|
margin: auto;
|
||
|
|
padding: 3em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.output-img {
|
||
|
|
border-radius: 2em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Picvatar</h1>
|
||
|
|
<p>Generate unique avatars from a Picrew - Like Gravatar, but cooler!</p>
|
||
|
|
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field">
|
||
|
|
<label for="email-input">Email address</label>
|
||
|
|
<input id="email-input" type="text" placeholder="webmistress@amogus.cloud" />
|
||
|
|
</div>
|
||
|
|
<div class="input-field">
|
||
|
|
<label for="maker-input">Picrew maker ID</label>
|
||
|
|
<input id="maker-input" type="text" placeholder="47882" value="47882" />
|
||
|
|
</div>
|
||
|
|
<button style="height: 50%; align-self: flex-end;" onclick="generate()">Generate!</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="image-wrapper">
|
||
|
|
<img
|
||
|
|
class="output-img"
|
||
|
|
id="output-img"
|
||
|
|
src="/kitty.png"
|
||
|
|
style="width: 100%; height: auto;"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 id="api">API</h3>
|
||
|
|
|
||
|
|
<h4 id="api-from-sha256">Generate an image from a sha256 hash</h4>
|
||
|
|
<b><code>/generate/:makerid/:hash?gravatar=bool</code></b>
|
||
|
|
<p>
|
||
|
|
<b>Returns:</b> The generated image in png format.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>:makerid</code> - The ID of the Picrew maker you want to use. You can get this from the Picrew URL: <code>https://picrew.me/en/image_maker/000000</code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>:hash</code> - Hex-encoded sha256 hash of the email address (or whatever other identifier you want to use).
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>?gravatar=bool</code> - If this is set to <code>true</code> or <code>1</code>, and the provided hash belongs to an email on Gravatar that has a custom avatar set, a redirect to that avatar will be returned and no Picrew will be generated. Any other value will disable this behaviour.
|
||
|
|
<br />
|
||
|
|
Note that this will slow down load times.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h4 id="api-from-email">Generate an image from an email address</h4>
|
||
|
|
<b><code>/generate/:makerid/:email</code></b>
|
||
|
|
<p>
|
||
|
|
<b>Returns:</b> a redirect to <code>/generate/:makerid/:hash</code>, where <code>:hash</code> is a sha256 hash created from the provided email address. This is useful when you don't have access to relevant APIs to generate a sha256 hash, such as on a vanilla JS website without external dependencies.
|
||
|
|
<br />
|
||
|
|
Query parameters will be forwarded, so any parameters for <code>/generate/:makerid/:hash</code> are available.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>:makerid</code> - <a href="#api-from-sha256">See above.</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>:email</code> - The email address you want to generate an avatar for. Make sure this is URL-encoded!
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const outputImg = document.getElementById("output-img");
|
||
|
|
|
||
|
|
outputImg.onerror = (event) => {
|
||
|
|
if (outputImg.src != '/kitty.png') outputImg.src = '/kitty.png';
|
||
|
|
alert(`Ooprs! That didn't work: ${JSON.stringify(event)}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
function generate() {
|
||
|
|
const email = document.getElementById("email-input").value;
|
||
|
|
const maker = document.getElementById("maker-input").value;
|
||
|
|
|
||
|
|
if (!email || !maker) return;
|
||
|
|
|
||
|
|
const url = `/generate-by-email/${encodeURIComponent(maker)}/${encodeURIComponent(email)}`;
|
||
|
|
outputImg.src = url;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</html>
|