Style updates
Style updates
This commit is contained in:
Eriks Karls
parent
9bb104073f
commit
83930abc09
@ -6,7 +6,7 @@ end_of_line = lf
|
|||||||
indent_size = 4
|
indent_size = 4
|
||||||
indent_style = space
|
indent_style = space
|
||||||
insert_final_newline = false
|
insert_final_newline = false
|
||||||
max_line_length = 160
|
max_line_length = 200
|
||||||
tab_width = 4
|
tab_width = 4
|
||||||
|
|
||||||
[*.vue]
|
[*.vue]
|
||||||
|
|||||||
203
dynamic.html
203
dynamic.html
@ -11,114 +11,115 @@
|
|||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||||
<link href='https://fonts.googleapis.com/css?family=Nunito&display=swap' rel='stylesheet'>
|
<link href='https://fonts.googleapis.com/css?family=Nunito&display=swap' rel='stylesheet'>
|
||||||
<style>body {font-family: 'Nunito';font-size: 22px;}</style>
|
<style>body {font-family: 'Nunito', sans-serif, system-ui;}</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body id="fromBrutto">
|
||||||
|
|
||||||
<div class="container pt-5">
|
<div class="container pt-5">
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 col-md-6">
|
|
||||||
<form class="row" id="fromBrutto">
|
|
||||||
|
|
||||||
<div class="mb-3 col-12 col-md">
|
|
||||||
<label for="idBruttoInput" class="form-label text-bold">Brutto salary*:</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-text">€</span>
|
|
||||||
<input id="idBruttoInput" type="number" class="form-control" v-model="bruttoSalary" placeholder="700" min="0" step="10">
|
|
||||||
<span class="input-group-text">.00</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label for="idDependentsInput" class="form-label text-bold">Dependents:</label>
|
<form class="row">
|
||||||
<select id="idDependentsInput" class="form-select" v-model="dependentCount">
|
<div class="col-12 col-md-5 mb-3">
|
||||||
<option value="0">0</option>
|
<div class="mb-3">
|
||||||
<option v-for="num in 6" :value="num">{{ num }}</option>
|
<label for="idBruttoInput" class="form-label text-bold">Brutto salary*:</label>
|
||||||
</select>
|
<div class="input-group">
|
||||||
<label><input type="checkbox" id="idTaxBookSubmitted" v-model="taxBookSubmitted" checked> Salary tax book has been submitted to
|
<span class="input-group-text">€</span>
|
||||||
the employer</label><br>
|
<input id="idBruttoInput" type="number" class="form-control" v-model="bruttoSalary" placeholder="700" min="0" step="10">
|
||||||
|
<span class="input-group-text">.00</span>
|
||||||
<label for="idExtraTaxDiscount" class="form-label text-bold">Extra tax-free amount:</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-text">€</span>
|
|
||||||
<input type="number" class="form-control" id="idExtraTaxDiscount" v-model="extraTaxDiscount" placeholder="0" min="0" step="0.01">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
<div class="mb-3">
|
||||||
<ul class="list-group">
|
<label for="idDependentsInput" class="form-label text-bold">Dependents:</label>
|
||||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
<select id="idDependentsInput" class="form-select" v-model="dependentCount">
|
||||||
<div class="ms-2 me-auto">
|
<option value="0">0</option>
|
||||||
<div class="fw-bold">Brutto salary</div>
|
<option v-for="num in 6" :value="num">{{ num }}</option>
|
||||||
</div>
|
</select>
|
||||||
<span id="idBruttoSalaryDisplay">{{bruttoSalary}}€</span>
|
<label><input type="checkbox" id="idTaxBookSubmitted" v-model="taxBookSubmitted" checked> Salary tax book has been submitted to the employer</label><br>
|
||||||
</li>
|
</div>
|
||||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
<div class="mb-3">
|
||||||
<div class="ms-2 me-auto">
|
<label for="idExtraTaxDiscount" class="form-label text-bold">Extra tax-free amount:</label>
|
||||||
<div class="fw-bold">Social security tax</div>
|
<div class="input-group">
|
||||||
</div>
|
<span class="input-group-text">€</span>
|
||||||
<span class="text-danger">{{socialInsuranceAmount}}€</span>
|
<input type="number" class="form-control" id="idExtraTaxDiscount" v-model="extraTaxDiscount" placeholder="0" min="0" step="0.01">
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
||||||
<div class="ms-2 me-auto">
|
|
||||||
<div class="fw-bold">Income tax</div>
|
|
||||||
</div>
|
|
||||||
<span class="text-danger">{{incomeTax}}€</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
||||||
<div class="ms-2 me-auto">
|
|
||||||
<div class="fw-bold">Net salary</div>
|
|
||||||
</div>
|
|
||||||
<span class="text-primary">{{netSalary}}€</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
||||||
<div class="ms-2 me-auto">
|
|
||||||
<div class="fw-bold">Employer tax</div>
|
|
||||||
</div>
|
|
||||||
<span class="text-warning">{{employersSocialInsuranceAmount}}€</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
||||||
<div class="ms-2 me-auto">
|
|
||||||
<div class="fw-bold">Employer total cost</div>
|
|
||||||
</div>
|
|
||||||
<span>{{employerTotalCost}}€</span>
|
|
||||||
</li>
|
|
||||||
<li class="list-group-item d-flex justify-content-between align-items-start">
|
|
||||||
<table class="table table-sm table-striped table-hover">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th></th>
|
|
||||||
<th class="text-end">Hourly</th>
|
|
||||||
<th class="text-end">Daily</th>
|
|
||||||
<th class="text-end">Yearly</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th>Net</th>
|
|
||||||
<td class="text-end font-monospace">{{hourlyNet}}€</td>
|
|
||||||
<td class="text-end font-monospace">{{dailyNet}}€</td>
|
|
||||||
<td class="text-end font-monospace">{{yearlyNet}}€</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Brutto</th>
|
|
||||||
<td class="text-end font-monospace">{{hourlyBrutto}}€</td>
|
|
||||||
<td class="text-end font-monospace">{{dailyBrutto}}€</td>
|
|
||||||
<td class="text-end font-monospace">{{yearlyBrutto}}€</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th>Employer</th>
|
|
||||||
<td class="text-end font-monospace">{{hourlyEmployer}}€</td>
|
|
||||||
<td class="text-end font-monospace">{{dailyEmployer}}€</td>
|
|
||||||
<td class="text-end font-monospace">{{yearlyEmployer}}€</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="col-12 col-md-7">
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="ms-2 me-auto">
|
||||||
|
<div class="fw-bold">Brutto salary</div>
|
||||||
|
</div>
|
||||||
|
<span id="idBruttoSalaryDisplay">{{bruttoSalary}}€</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="ms-2 me-auto">
|
||||||
|
<div class="fw-bold">Social security tax</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-danger">{{socialInsuranceAmount}}€</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="ms-2 me-auto">
|
||||||
|
<div class="fw-bold">Income tax</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-danger">{{incomeTax}}€</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="ms-2 me-auto">
|
||||||
|
<div class="fw-bold">Net salary</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-primary">{{netSalary}}€</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="ms-2 me-auto">
|
||||||
|
<div class="fw-bold">Employer tax</div>
|
||||||
|
</div>
|
||||||
|
<span class="text-warning">{{employersSocialInsuranceAmount}}€</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="ms-2 me-auto">
|
||||||
|
<div class="fw-bold">Employer total cost</div>
|
||||||
|
</div>
|
||||||
|
<span>{{employerTotalCost}}€</span>
|
||||||
|
</li>
|
||||||
|
<li class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="table-responsive-lg" style="width: 100%">
|
||||||
|
<table class="table table-sm table-striped table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th class="text-end">Hourly</th>
|
||||||
|
<th class="text-end">Daily</th>
|
||||||
|
<th class="text-end">Yearly</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Net</th>
|
||||||
|
<td class="text-end font-monospace">{{hourlyNet}}€</td>
|
||||||
|
<td class="text-end font-monospace">{{dailyNet}}€</td>
|
||||||
|
<td class="text-end font-monospace">{{yearlyNet}}€</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Brutto</th>
|
||||||
|
<td class="text-end font-monospace">{{hourlyBrutto}}€</td>
|
||||||
|
<td class="text-end font-monospace">{{dailyBrutto}}€</td>
|
||||||
|
<td class="text-end font-monospace">{{yearlyBrutto}}€</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Employer</th>
|
||||||
|
<td class="text-end font-monospace">{{hourlyEmployer}}€</td>
|
||||||
|
<td class="text-end font-monospace">{{dailyEmployer}}€</td>
|
||||||
|
<td class="text-end font-monospace">{{yearlyEmployer}}€</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user