s1llyw0rdz/web/handler/html/current_status.html
2021-11-30 21:50:10 +01:00

56 lines
No EOL
1.7 KiB
HTML

{{ define "content" }}
<style>
#statuscafe {
padding: .5em;
background-color: lightblue;
border: 1px solid;
}
#statuscafe-username {
margin-bottom: .5em;
}
#statuscafe-content {
margin: 0 1em 0.5em 1em;
}
</style>
<div class="cols">
<section>
<h1>Current 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%; height: 75px;"><script src="https://status.cafe/current-status.js?name={{ .name }}"></script></textarea>
<p>Past this code into your CSS file:</p>
<textarea style="width: 100%; height: 75px;">#statuscafe {
padding: .5em;
background-color: lightblue;
border: 1px solid;
}
#statuscafe-username {
margin-bottom: .5em;
}
#statuscafe-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>
</section>
<section>
<h2>Preview</h2>
{{ if .name }}
<script src="https://status.cafe/current-status.js?name={{ .name }}"></script>
{{ else }}
<p>Add your name and click "generate HTML" to see a preview.</p>
{{ end }}
</section>
</div>
{{ end }}