-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
93 lines (87 loc) · 3.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Roboto:100,400" rel="stylesheet">
<link rel="stylesheet" href="./css/styles.css">
<title>David's Net Pay Calculator</title>
</head>
<body>
<div class="payroll">
<div class="payroll__header">
<header class="container">
<div class="payroll__header-heading">
<h3 class="payroll__header-heading-text">
David's Net Pay Calculator
</h3>
</div>
<div class="payroll__header-summary">
<p class="payroll__header-summary-text">
David's Net Pay Calculator is a tool that can be used to calculate the monthly take home (net) pay for employees (except part time employees) working in Zambia. All formulae are based on the 2017 NAPSA Ceiling, Income Tax Act and Statutory instruments as amended by the provisions of the 2017 Zambian National Budget. The tool is to be used as a guide only, Errors and Omissions expected. For any suggestions and / or querries, email
davidtheprogrammer42@gmail.com
</p>
</div>
</header>
</div>
<div class="payroll__main">
<main class="container">
<div class="payroll__main-instructions">
<h5 class="payroll__main-instructions-text">
Enter your name and total monthly income below, and then click calculate.
</h5>
</div>
<div class="payroll__main-form">
<div class="row">
<div class="input-field col s12 m6">
<i class="material-icons prefix move_down">account_circle</i>
<input id="userName" type="text">
<label for="icon_prefix">Your name (optional)</label>
</div>
<div class="input-field col s12 m6">
<i class="material-icons prefix move_down">local_atm</i>
<input id="userIncome" type="number" step=".01" min=10>
<label for="icon_telephone">Gross Income in Kwacha*</label>
</div>
</div>
</div>
<div class="payroll__main-calculate">
<button id="modal-trigger" class="waves-effect waves-light btn-large">
<i class="material-icons right">attach_money</i>Calculate
</button>
</div>
<!-- Response Modal -->
<div id="results-modal" class="modal payroll__results-modal">
<div class="modal-content">
<div class="payroll__results-modal-content">
<h5 class="payroll__results-modal-content__header">
Hello <span id="results-name"></span>.
</h5>
<p class="payroll__results-modal-content__content">
From your monthly income of
K<span id="results-user-income"></span>, Pay As You Earn (PAYE) Tax of
K<span id="results-paye"></span> and NAPSA contribution of
K<span id="results-napsa"></span> will be deducted. You will remain with a Net Pay of
K<span id="results-net"></span>.
</p>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect btn-flat">Close</a>
</div>
</div>
</main>
</div>
</div>
<!-- Scripts -->
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Materialize CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<!-- Our SCript -->
<script type="text/javascript" src="./custom.js"></script>
</body>
</html>