-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfine.html
101 lines (88 loc) · 4.85 KB
/
fine.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
94
95
96
97
98
99
100
101
<!doctype html>
<html class="no-js">
<head>
<title>Fines</title>
<link type="text/css" rel="stylesheet" href="content/css/topcoat-mobile-light.css" />
<link type="text/css" rel="stylesheet" href="content/fonts/stylesheet.css" />
<script type="text/javascript" src="scripts/knockout-3.0.0.min.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Fines</h1>
<div>
<!-- Rounding -->
<label class="topcoat-checkbox"><input type="checkbox" name="rounding" data-bind="checked: rounding" /><div class="topcoat-checkbox__checkmark"></div>Rounding</label>
</div>
<div>
<h2>Fine Band</h2>
<!-- Fine Band -->
<label class="topcoat-radio-button"><input type="radio" name="band" value="0.5" data-bind="checked: percentage" /><div class="topcoat-radio-button__checkmark"></div>A</label>
<label class="topcoat-radio-button"><input type="radio" name="band" value="1.0" data-bind="checked: percentage" /><div class="topcoat-radio-button__checkmark"></div>B</label>
<label class="topcoat-radio-button"><input type="radio" name="band" value="1.5" data-bind="checked: percentage" /><div class="topcoat-radio-button__checkmark"></div>C</label>
<label class="topcoat-radio-button"><input type="radio" name="band" value="2.5" data-bind="checked: percentage" /><div class="topcoat-radio-button__checkmark"></div>D</label>
<label class="topcoat-radio-button"><input type="radio" name="band" value="4.0" data-bind="checked: percentage" /><div class="topcoat-radio-button__checkmark"></div>E</label>
</div>
<div>
<h2>Fine Level</h2>
<!-- Fine Level -->
<label><input type="radio" name="level" value="1" data-bind="checked: fineLevel" />1</label>
<label><input type="radio" name="level" value="2" data-bind="checked: fineLevel" />2</label>
<label><input type="radio" name="level" value="3" data-bind="checked: fineLevel" />3</label>
<label><input type="radio" name="level" value="4" data-bind="checked: fineLevel" />4</label>
<label><input type="radio" name="level" value="5" data-bind="checked: fineLevel" />5</label>
</div>
<div>
<label>Income
<input type="number" data-bind="value: income"/>
</label>
</div>
<div>
<!-- Income buttons -->
<label><input type="radio" name="incomePeriod" value="annual" data-bind="checked: incomePeriod" />Annual</label>
<label><input type="radio" name="incomePeriod" value="monthly" data-bind="checked: incomePeriod" />Monthly</label>
<label><input type="radio" name="incomePeriod" value="weekly" data-bind="checked: incomePeriod" />Weekly</label>
<button data-bind="click: defaultIncome">£400</button>
<button data-bind="click: defaultUnemployedIncome">£110</button>
</div>
<div>
<label>Multiplier
<input type="number" data-bind="value: percentage"/>
</label>
</div>
<div>
<!-- Discount -->
<label><input type="radio" name="discount" value="0.6666666666" data-bind="checked: discount" />33%</label>
<label><input type="radio" name="discount" value="0.75" data-bind="checked: discount" />25%</label>
<label><input type="radio" name="discount" value="0.9" data-bind="checked: discount" />10%</label>
<label><input type="radio" name="discount" value="1.0" data-bind="checked: discount" />Not Guilty</label>
</div>
<div>
<label>Fine before discount</label>
<span data-bind="text: fineBeforeDiscount"></span>
</div>
<div>
<label>Fine</label>
<span data-bind="text: fine"></span>
</div>
<div>
<!-- Other eg. compensation -->
<label>Other
<input type="number" data-bind="value: other"/>
</label>
</div>
<div>
<label>Court Costs</label>
<input type="number" data-bind="value: courtCosts"/>
</div>
<div>
<label>Victim Surcharge</label>
<span data-bind="text: victimSurcharge"/>
</div>
<div>
<label>Total</label>
<span data-bind="text: total"></span>
</div>
</div>
<script type="text/javascript" src="scripts/application/fine.js"></script>
</body>
</html>