mobiilit
This commit is contained in:
122
index.html
122
index.html
@@ -5,41 +5,41 @@
|
||||
<meta name="theme-color" content="lightcyan">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<STYLE type="text/css">
|
||||
BODY {
|
||||
BODY {
|
||||
font-family: sans-serif;
|
||||
background-color: lightcyan;
|
||||
}
|
||||
TEXTAREA { font-family: sans-serif; width: 100%;
|
||||
TEXTAREA { font-family: sans-serif; width: 100%;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
background: transparent;
|
||||
}
|
||||
#block {
|
||||
#block {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 69%;
|
||||
min-width: 69%;
|
||||
max-width: 100%; }
|
||||
LABEL {
|
||||
LABEL {
|
||||
width: 25ex;
|
||||
display: inline-block;
|
||||
}
|
||||
.error {
|
||||
}
|
||||
.error {
|
||||
color: salmon;
|
||||
}
|
||||
.hidden {
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#barcode {
|
||||
}
|
||||
#barcode {
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0em;
|
||||
width: 80%;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
#barcodePNG {
|
||||
}
|
||||
#barcodePNG {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
width: 25%;
|
||||
@@ -48,67 +48,67 @@
|
||||
display:block;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
#barcodeBW {
|
||||
}
|
||||
#barcodeBW {
|
||||
display: none;
|
||||
}
|
||||
#barcodes {
|
||||
}
|
||||
#barcodes {
|
||||
margin: 1em;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
#barcodes.fade {
|
||||
}
|
||||
#barcodes.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Lasku */
|
||||
/* Lasku */
|
||||
|
||||
#lasku {
|
||||
#lasku {
|
||||
border: 1px solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
#lasku th, #lasku td {
|
||||
}
|
||||
#lasku th, #lasku td {
|
||||
border: 1px solid;
|
||||
padding: 1ex;
|
||||
vertical-align: top;
|
||||
}
|
||||
#lasku .col1 { width: 10%; }
|
||||
#lasku .col2 { width: 40%; }
|
||||
#lasku .col3 { width: 10%; }
|
||||
#lasku .col4 { width: 20%; }
|
||||
#lasku .col5 { width: 20%; }
|
||||
#lasku_summa {
|
||||
}
|
||||
#lasku .col1 { width: 10%; }
|
||||
#lasku .col2 { width: 40%; }
|
||||
#lasku .col3 { width: 10%; }
|
||||
#lasku .col4 { width: 20%; }
|
||||
#lasku .col5 { width: 20%; }
|
||||
#lasku_summa {
|
||||
text-align: right;
|
||||
|
||||
}
|
||||
#lasku_summa::after {
|
||||
}
|
||||
#lasku_summa::after {
|
||||
content: " €";
|
||||
padding-right: 8px;
|
||||
}
|
||||
#lasku_barcode {
|
||||
}
|
||||
#lasku_barcode {
|
||||
text-align:center;
|
||||
}
|
||||
.print_help {
|
||||
}
|
||||
.print_help {
|
||||
display: none;
|
||||
}
|
||||
.arvo {
|
||||
}
|
||||
.arvo {
|
||||
font-family: monospace;
|
||||
}
|
||||
.kayttaja {
|
||||
}
|
||||
.kayttaja {
|
||||
font-family: monospace;
|
||||
}
|
||||
.kayttaja_pdf {
|
||||
}
|
||||
.kayttaja_pdf {
|
||||
display: none;
|
||||
font-family: monospace;
|
||||
}
|
||||
.print_help_pdf {
|
||||
}
|
||||
.print_help_pdf {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
font-family: monospace;
|
||||
}
|
||||
@media print {
|
||||
}
|
||||
@media print {
|
||||
.no-print, .no-print * {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -128,9 +128,15 @@
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
#block {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%; }
|
||||
}
|
||||
</STYLE>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
@@ -142,6 +148,7 @@ let state = {
|
||||
'paiva': null,
|
||||
'summa': null,
|
||||
'viite': null,
|
||||
'virtuaali': null,
|
||||
'jaettu': null
|
||||
}
|
||||
|
||||
@@ -164,13 +171,14 @@ function generate(final = true) {
|
||||
return
|
||||
}
|
||||
document.getElementById('virtuaali').value = code;
|
||||
state['virtuaali'] = code;
|
||||
JsBarcode("#barcode", code, {
|
||||
format: "CODE128",
|
||||
lineColor: "#404",
|
||||
background: "transparent",
|
||||
width: 2,
|
||||
height: 80,
|
||||
displayValue: true
|
||||
displayValue: false
|
||||
});
|
||||
JsBarcode("#barcodeBW", code, {
|
||||
format: "CODE128",
|
||||
@@ -306,10 +314,16 @@ function parse_virtual() {
|
||||
let kuu = vkoodi.substring(50,52);
|
||||
let paiva = vkoodi.substring(52,54);
|
||||
let paivays = `${vuosisata}${vuosi}-${kuu}-${paiva}`;
|
||||
|
||||
|
||||
document.getElementById('iban').value = iban;
|
||||
document.getElementById('summa').value = summa;
|
||||
document.getElementById('viite').value = viite;
|
||||
document.getElementById('paiva').value = paivays;
|
||||
state['iban'] = vkoodi.substring(1,17);
|
||||
state['summa'] = summa;
|
||||
state['viite'] = viite;
|
||||
state['paiva'] = paivays;
|
||||
flash_generate();
|
||||
}
|
||||
|
||||
@@ -332,7 +346,7 @@ function print_help() {
|
||||
modify_request();
|
||||
}
|
||||
function modify_lasku() {
|
||||
let fields = ['iban','summa','viite','paiva'];
|
||||
let fields = ['iban','summa','viite','paiva','virtuaali'];
|
||||
for (let i = 0; i < fields.length; i++) {
|
||||
try {
|
||||
document.getElementById('lasku_' + fields[i]).innerHTML = document.getElementById(fields[i]).value;
|
||||
@@ -434,7 +448,7 @@ function reversed(str) {
|
||||
<label> </label><span id="iban_error" class="error" ></span><br>
|
||||
<label>Summa: </label><br><input type="number" id="summa" size=10 value=10 onblur="generate()" onkeyup="generate(false)" />€<br>
|
||||
<label> </label><span id="summa_error" class="error" ></span><br>
|
||||
<label>Viite: </label><br><input pattern="[0-9 ]+" id="viite" size=20 value=1054 onblur="generate()" onkeyup="generate(false)" /> Viite pakollinen, esim 1054 jos et keksi<br>
|
||||
<label>Viite: </label><br><input pattern="[0-9 ]+" id="viite" size=20 value=1054 onblur="generate()" onkeyup="generate(false)" placeholder=1054/> Viite pakollinen.<br>
|
||||
<label> </label><span id="viite_error" class="error" ></span><br>
|
||||
<label>Eräpäivä: </label><br><input type="text" pattern="[0-9\-]+" id="paiva" size=10 onblur="generate()" onkeyup="generate(false)" placeholder="VVVV-KK-PP"/><br>
|
||||
<label> </label><span id="paiva_error" class="error" ></span><br>
|
||||
@@ -462,7 +476,9 @@ function reversed(str) {
|
||||
<td class=col3>Eräpäivä</td><td class="col4, arvo" id="lasku_paiva">[paiva]</td><td class="col5, arvo" id="lasku_summa">[summa]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan=5 id=lasku_barcode><svg id="barcode"></svg></td>
|
||||
<td colspan=5 id=lasku_barcode><svg id="barcode"></svg>
|
||||
<p id="lasku_virtuaali" class="arvo">[virtuaaliviivakoodi]</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user