From edefca1e8a00a0549a490c9767dc718152947b68 Mon Sep 17 00:00:00 2001
From: vv01f <vv01f@users.noreply.github.com>
Date: Wed, 29 Mar 2023 17:59:11 +0200
Subject: [PATCH] + add accesskey for submit + add some css + add noscript text
 to show for js blockers

---
 kole.html | 49 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 4 deletions(-)
diff --git a/kole.html b/kole.html
index a6437b4..1dbd71e 100644
--- a/kole.html
+++ b/kole.html
@@ -1,13 +1,52 @@
 <!DOCTYPE html>
 <html>
 <head>
+	<title>Rechner zwischen Brutto-Netto-Kole</title>
+	<link rel="stylesheet" href="https://wtf-eg.de/css/style.css?h=56fa462e"/>
 <style>
+<!--
+	@media only screen {
+	}
+	@media only screen and (max-width: 600px){
+		body #wrap { font-size: 2.1em; }
+	}
+	@media only screen and (min-width: 768px){
+		label { display:inline-block;width: 12ex; }
+		body #wrap { font-size: 1.2em; width: 80%; }
+	}
+-->
+<!--
+	body { font-family: sans-serif; }
+-->
+	#wrap {
+		display: inline-block;
+	}
+	fieldset{
+		margin: 0 auto;
+		max-width: 50ex;
+		padding: 2ex;
+	}
+	legend{
+		margin-bottom: 0px;
+	}
+	label{ width: auto !important; }
 	input[type='number']{text-align:right;}
 	input[readonly='readonly']{background-color:#eee;}
+	h1{
+		font-size: 2em;
+		text-align: center;
+		margin: 1ex auto 2ex auto;
+	}
 </style>
 </head>
 <body>
-   <h1>Rechner zwischen Brutto-Netto-Kole</h1>
+	<div id="#wrap">
+	<h1>Rechner zwischen Brutto-Netto-Kole</h1>
+	<noscript>
+		Dieser Rechner ist auf JavaScript angewiesen!
+	</noscript>
+	<fieldset>
+		<legend></legend>
 	<table>
 		<tr><td>Eingangsgröße:</td><td><input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/><label for="bb"><u>B</u>rutto</label><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/><label for="bn"><u>N</u>etto</label><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/><label for="bk"><u>K</u>oLe</label></td></tr>
 		<tr><td>Br<u>u</u>tto</td><td><input accesskey="u" type="number" step="0.01" id="e" value="100.00"/>&thinsp;€</td></tr>
@@ -17,8 +56,9 @@
 		<tr><td>Entropieumlagesatz</td><td><input type="number" step="0.01" id="z" value="23.00"/>&thinsp;%</td></tr>
 		<tr><td>Entropieumlage</td><td><input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/>&thinsp;€</td></tr>
 		<tr><td>K<u>o</u>Le</td><td><input accesskey="o" type="number" step="0.01" id="k" value="0.00"/>&thinsp;€</td></tr>
-		<tr><td>&nbsp;</td><td><input value="Berechnen" id="b" type="button"/></td></tr>
+		<tr><td>&nbsp;</td><td><button accesskey="c" id="b" type="button">Bere<u>c</u>hnen</button></td></tr>
 	</table>
+	</fieldset>
 	<script>
 		var e=document.getElementById('e');
 		var u=document.getElementById('u');
@@ -50,12 +90,13 @@
 				e.value = roundCents( getFormFloat(n) * ( 1 + getFormFloat(u) / 100 ) );
 				k.value = roundCents( getFormFloat(n) * ( 1 - getFormFloat(z) / 100 ) );
 			}
-         us.value = roundCents(e.value * getFormFloat(u) / 100 );
-         eu.value = roundCents(n.value * getFormFloat(z) / 100 );
+			us.value = roundCents(e.value * getFormFloat(u) / 100 );
+			eu.value = roundCents(n.value * getFormFloat(z) / 100 );
 		});
 		e.addEventListener('change', function(){bb.checked = true;});
 		n.addEventListener('change', function(){bn.checked = true;});
 		s.click();
 	</script>
+	</div>
 </body>
 </html>

Eingangsgröße:	BruttoNettoKoLe
Brutto	€
Entropieumlagesatz	%
Entropieumlage	€
KoLe	€