improve example page

This commit is contained in:
Daniella / Tove 2022-07-07 14:13:51 +02:00
parent 1228c17d0c
commit c1b8e59da6
2 changed files with 37 additions and 24 deletions

View file

@ -11,32 +11,30 @@
<br/>
<br/>
<div class=content>
<h2>Get:</h2>
<form onsubmit="try{document.getElementById('value').value = data[document.getElementById('name').value].toString()}catch(e){} ; return false;">
<input type="text" id="name">=
<input readonly type="text" id="value">
<input type="submit" value="Get!">
</form>
<h2>Get:</h2>
<form onsubmit="try{document.getElementById('value').value = data[document.getElementById('name').value].toString()}catch(e){} ; return false;">
<input type="text" id="name"> =
<input readonly type="text" id="value">
<input class=button type="submit" value="Get!">
</form>
<h2>Server-side set:</h2>
<form method="post">
<input type="text" name="name">=
<input type="text" name="value">
<input type="submit" value="Set!">
</form>
<h2>Server-side set:</h2>
<form method="post">
<input type="text" name="name"> =
<input type="text" name="value">
<input class=button type="submit" value="Set!">
</form>
<h2>Client-side set:</h2>
<form onsubmit="try{data[document.getElementById('sname').value] = document.getElementById('svalue').value}catch(e){} ; return false;">
<input type="text" id="sname">=
<input type="text" id="svalue">
<input type="submit" value="Set!">
<button onclick="data.save()" type="button">Save!</button>
</form>
<h2>Client-side set:</h2>
<form onsubmit="try{data[document.getElementById('sname').value] = document.getElementById('svalue').value}catch(e){} ; return false;">
<input type="text" id="sname"> =
<input type="text" id="svalue">
<input class=button type="submit" value="Set!">
<button onclick="data.save()" type="button">Save!</button>
</form>
<h2>Your fingerprint</h2>
<div id="fingerprint"></div>
</div>
<h2>Your fingerprint</h2>
<div id="fingerprint"></div>
</body>
</html>

View file

@ -2,9 +2,24 @@ center {
text-align: center;
}
.content {
body {
font-family: sans-serif;
background-color: #222828;
color: #cdd;
margin: auto;
display: block;
max-width: 700px;
padding: 20px;
word-wrap: break-word;
text-align: justify;
}
input,button {
background-color: #222828;
color: #cdd;
border: 2px dashed #cdd;
}
input.button,button {
border: 1px solid #cdd;
}