trunkless/templates/index.tmpl
2024-02-24 13:15:47 -08:00

78 lines
2.0 KiB
Cheetah

<!DOCTYPE html>
<html>
<head>
<title>Trunkless</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<style>
@font-face {
font-family: "cutive";
src: url("/cutive.ttf");
}
body {
font-family: "cutive", monospace;
font-size:125%;
background-color: black;
color: white;
background-image: url("/bg_dark.gif");
}
a {
color: white;
}
div.line:not(.unpinned) > .linetext {
font-weight: bold;
}
span.linetext {
background-color: black;
}
.controls {
margin: 0;
margin-bottom:4px;
}
.controls span {
font-size: 80%;
}
</style>
</head>
<body>
<template id="line-editor-tmpl">
<form style="display:inline">
<input type="text" name="editedLine" style="min-width: 50em">
<input type="submit" style="display: none">
</form>
</template>
<template id="linetmpl">
<span>
<button is="line-pinner">pin</button><button is="line-editor">✎</button><button is="line-upper">↑</button><button is="line-downer">↓</button><button is="source-shower"></button><button is="line-remover">X</button>
</span>
<span class="linetext"></span>
<p is="source-text"></p>
</template>
<script src="/main.js"></script>
<h1 style="display:block;margin:0">Trunkless</h1>
<p style="margin-top:0;font-size:80%">
<a href="/about">about</a>
<a is="theme-toggler"></a>
</p>
<p class="controls">
<button is="poem-resetter"></button>
<!--<span>source:</span><select><option>gutenberg</option></select>-->
<span>save:</span><button>as text</button><button>as image</button><input type="checkbox"/><span>include sources</span>
</p>
<div style="border: 1px solid grey; padding: 5px">
<div style="margin-bottom: 5px">
<button is="poem-regenner">↺</button>
</div>
<div is="poem-lines"></div>
<div>
<button is="line-adder" title="add line">+</button>
</div>
</div>
</body>
</html>