Add more info in html

This commit is contained in:
Gabriel Augendre 2022-10-09 11:35:30 +02:00
parent a3118bb780
commit 4114cce429
2 changed files with 26 additions and 3 deletions

2
CNAME
View file

@ -1 +1 @@
doses.augendre.info doses.augendre.info

View file

@ -8,11 +8,20 @@
html { html {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
} }
footer {
margin-top: 3em;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Doses converter</h1> <h1>Doses converter</h1>
<p>
Given an alcohol proof in percent, compute the number of alcohol doses in a volume
or the volume for a number of doses.
</p>
<p> <p>
<label for="proof">Proof (%)</label> <label for="proof">Proof (%)</label>
<input type="number" id="proof" value="40"> <input type="number" id="proof" value="40">
@ -21,15 +30,29 @@
<p> <p>
<label for="volume">Volume (cl)</label> <label for="volume">Volume (cl)</label>
<input type="number" id="volume" value="10"> <input type="number" id="volume" value="10">
<button id="compute-volume">Compute</button> <button id="compute-volume"
title="Compute the volume given the proof and the number of doses">
Compute
</button>
</p> </p>
<p> <p>
<label for="dose">Dose</label> <label for="dose">Dose</label>
<input type="number" id="dose" value="3.2"> <input type="number" id="dose" value="3.2">
<button id="compute-dose">Compute</button> <button id="compute-dose"
title="Compute the number of doses given the proof and the volume">
Compute
</button>
</p> </p>
<footer>
<p>
Checkout the code on <a href="https://github.com/Crocmagnon/doses">GitHub</a>.<br>
This piece of code is released in the public domain. See the <a href="https://github.com/Crocmagnon/doses/blob/master/LICENSE">license</a> for
more details.
</p>
</footer>
<script src="main.js" defer></script> <script src="main.js" defer></script>
</body> </body>
</html> </html>