82 lines
2.0 KiB
HTML
82 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>
|
|
shapez.io shape generator
|
|
</title>
|
|
|
|
<script async src="index.js"></script>
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
font-family: "Source Sans Pro", "Roboto", sans-serif;
|
|
background: #fafafa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#resultWrapper {
|
|
border: 1px solid #ccc;
|
|
margin-top: 10px;
|
|
background: #fff;
|
|
padding: 40px;
|
|
}
|
|
|
|
#resultWrapper #result {
|
|
}
|
|
|
|
#code {
|
|
width: 600px;
|
|
font-family: monospace;
|
|
padding: 30px;
|
|
border: 1px solid #ccc;
|
|
background: #fff;
|
|
font-size: 17px;
|
|
}
|
|
|
|
#code:focus {
|
|
outline: none;
|
|
border-color: #39f;
|
|
}
|
|
|
|
#error {
|
|
height: 40px;
|
|
color: #f77;
|
|
margin-top: 10px;
|
|
display: flex;
|
|
text-align: left;
|
|
align-items: center;
|
|
}
|
|
|
|
#error:not(.hasError) {
|
|
color: rgb(71, 179, 71);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Shape generator</h2>
|
|
<input
|
|
value="CuCuCuCu"
|
|
id="code"
|
|
placeholder="shape code"
|
|
onkeypress="debounce(generate)"
|
|
onkeydown="debounce(generate)"
|
|
onkeyup="debounce(generate)"
|
|
onchange="debounce(generate)"
|
|
/>
|
|
<div id="error">Error</div>
|
|
<br />
|
|
|
|
<div id="resultWrapper">
|
|
<canvas id="result" width="256" height="256"></canvas>
|
|
</div>
|
|
</body>
|
|
</html>
|