mirror of
https://github.com/tobspr/shapez.io.git
synced 2024-10-27 20:34:29 +00:00
73 lines
1.8 KiB
HTML
73 lines
1.8 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
#result {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
margin-top: 10px;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
#code {
|
||
|
|
width: 600px;
|
||
|
|
font-family: monospace;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
background: #fff;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#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>
|
||
|
|
<input
|
||
|
|
id="code"
|
||
|
|
placeholder="shape code"
|
||
|
|
onkeypress="debounce(generate)"
|
||
|
|
onkeydown="debounce(generate)"
|
||
|
|
onkeyup="debounce(generate)"
|
||
|
|
onchange="debounce(generate)"
|
||
|
|
/>
|
||
|
|
<div id="error">Error</div>
|
||
|
|
<br />
|
||
|
|
<canvas id="result" width="512" height="512"></canvas>
|
||
|
|
</body>
|
||
|
|
</html>
|