66 lines
1.9 KiB
HTML
66 lines
1.9 KiB
HTML
|
{{ define "content" }}
|
||
|
|
<style>
|
||
|
|
#minty {
|
||
|
|
padding: .5em;
|
||
|
|
background-color: azure;
|
||
|
|
border: 1px solid midnightblue;
|
||
|
|
}
|
||
|
|
|
||
|
|
#minty-username {
|
||
|
|
margin-bottom: .5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#minty-content {
|
||
|
|
margin: 0 1em 0.5em 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 650px) {
|
||
|
|
.cols {
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
grid-gap: 2em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="cols">
|
||
|
|
<div>
|
||
|
|
<h1>Status widget</h1>
|
||
|
|
<form method="get" action="/current-status">
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<td>name:</td>
|
||
|
|
<td><input type="text" name="name" id="name" value="{{ .name }}"/></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td></td>
|
||
|
|
<td><input type="submit" value="create HTML"/></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</form>
|
||
|
|
<p>Past this code into your HTML file:</p>
|
||
|
|
<textarea style="width: 100%; max-width: 500px; height: 75px;"><div id="minty"><div id="minty-username"></div><div id="minty-content"></div></div><script src="https://minty.anteater.monster/current-status.js?name={{ .name }}" defer></script></textarea>
|
||
|
|
<p>Past this code into your CSS file:</p>
|
||
|
|
<textarea style="width: 100%; max-width: 500px; height: 175px;">#minty {
|
||
|
|
padding: .5em;
|
||
|
|
background-color: #bdffe4;
|
||
|
|
border: 1px solid hotpink;
|
||
|
|
}
|
||
|
|
#minty-username {
|
||
|
|
margin-bottom: .5em;
|
||
|
|
}
|
||
|
|
#minty-content {
|
||
|
|
margin: 0 1em 0.5em 1em;
|
||
|
|
}</textarea>
|
||
|
|
<p>Make it your own! The CSS above is only an example. Tweak it so that it integrates well with your sites's colors.</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2>Preview</h2>
|
||
|
|
{{ if .name }}
|
||
|
|
<script src="https://minty.anteater.monster/current-status.js?name={{ .name }}"></script>
|
||
|
|
{{ else }}
|
||
|
|
<p>Add your name and click "generate HTML" to see a preview.</p>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|