-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
291 lines (265 loc) · 12.5 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html>
<head>
<title>Credit decision explanations</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip2 {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip2 .tooltiptext {
visibility: hidden;
width: 200px;
background-color: gray;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip2 .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent gray transparent;
}
.tooltip:hover .tooltiptext, .tooltip2:hover .tooltiptext {
visibility: visible;
}
body {
font-family: "Lato", sans-serif;
}
#float{
background: WhiteSmoke;
width:220px;
height:600px;
position:fixed;
top:100px;
left:20;
font-size: 11px;
}
.main {
margin-left: 240px; /* Same as the width of the sidenav */
padding: 0px 10px;
}
h1{color: LightSteelBlue; text-align: center;}
.main h2 {color: LightBlue;}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<h1>Credit decision explanations</h1>
<div id="float">
<h2>Assessing Criteria:</h2>
<h3>Assessing compliance</h3>
<ul>
<li>Is it easy to understand?</li>
<li>Is the information concise and tailored to the recipient?</li>
<li>Is it easily accessible?</li>
<li>Is it user friendly?</li>
<li>Is it provided in time for the recipient to act?</li>
<li>Is it complete?</li>
</ul>
<h3>Assessing effectiveness</h3>
<ul>
<li>Is the information relevant and accurate?</li>
<li>Does it allow the recipient to take action?</li>
<li>Does it allow the recipient to access their data?</li>
<li>Does it allow the recipient to correct a decision as appropriate?</li>
<li>Does it allow the recipient to provide feedback?</li>
<li>Does it integrate with existing processes?</li>
</ul>
<h2>Explanation 1 legend:</h2>
<p style="border-left: 6px solid orange; ">Reasons for refusal</p>
<p style="border-left: 6px solid DodgerBlue;">Data from the bank</p>
<p style="border-left: 6px solid DarkTurquoise;">Data from the CRA</p>
<p style="border-left: 6px solid MediumSeaGreen;">Right to rectify inaccurate data</p>
<div style="border-left: 6px solid PaleVioletRed;">Right to request review
<p>Right to more information</p>
<p>Right to express point of view</p>
</div>
</div>
<div class="main">
<div>
<div class="tooltip"><span style="color: LightBlue; font-size:25px; font-style: italic;">Example Explanation 1</span>
<span class="tooltiptext">Reasons about the substance; reasons about the process; information about the recipients</span>
</div>
</div>
<div style="background-color: ghostwhite;">
<div class="tooltip2"><p style="border-left: 6px solid orange; background-color: ghostwhite;">Your application was screened by an automated system to provide you with an instant response. We regret to inform you that your application has not been successful, because of negative credit history information on your credit report.</p>
<span class="tooltiptext">Reasons for refusal</span>
</div>
<div class="tooltip2"><p style="border-left: 6px solid DodgerBlue; background-color: ghostwhite;">You had previously applied for our credit card plan <strong>CARD_PLAN</strong> on <strong>APPLICATION_DATE</strong>, which was refused by <strong>DECISION_NUM</strong> on grounds of affordability and has been taken into account here.</p>
<span class="tooltiptext">Data from the bank</span>
</div>
<div class="tooltip2"><div style="border-left: 6px solid DarkTurquoise; background-color: ghostwhite;">
<p>To perform identity matching, we received electoral register data last updated on <strong>DATE</strong> for your date of birth, and your current and previous addresses supplied by your telephone provider, last updated on <strong>DATE</strong>.</p>
<p>We also received a credit report and credit score from CRA, which were calculated based on data last updated on <strong>DATE</strong>. The late payments <strong>DATA_1</strong>, <strong>DATA_2</strong> that impacted your credit <a href="https://scorecounter.com/">score were</a> provided by your current account provider on <strong>DATE</strong>. The missed payment <strong>DATA_3</strong> was provided by your current account provider on <strong>DATE</strong> and updated on <strong>DATE</strong>.</p>
</div>
<span class="tooltiptext">Data from the CRA</span>
</div>
<div class="tooltip2"><div style="border-left: 6px solid MediumSeaGreen; background-color: ghostwhite;">
<p>If you believe there has been an issue with the data your first point of contact should be your current account provider. If you believe that the issue has been resolved but it is not yet reflected in your credit report, you may contact CRA at <strong>EMAIL_ADDR</strong>. Note that CRA advises that it can take up to 45 days for a change to be reflected in your file.</p>
<p>If the data are correct but you believe there are special circumstances that should have been taken into account, you can ask CRA to add a ‘notice of correction’ to your file including relevant information by clicking the button below.</p>
</div>
<span class="tooltiptext">Right to rectify inaccurate data</span>
</div>
<div class="tooltip2"><div style="border-left: 6px solid PaleVioletRed; background-color: ghostwhite;">
<p>You can request that one of our credit officers reviews this decision by clicking the button below. You will receive details of the responsible officer and the progress of the review once the process completes. If you disagree with the decision or you believe there are special circumstances that should be taken into account, you can contact us by clicking the button below. The decision number <strong>DECISION_NUM</strong> will be included in the request automatically.</p>
<div style="display: flex; justify-content: center;"><button type="button">Request human review</button><button type="button">Contact the bank!</button><button type="button">File a notice of correction</button></div>
</div>
<span class="tooltiptext">Right to request review
<p>Right to more information</p>
<p>Right to express point of view</p></span>
</div>
</div>
<p> </p>
<div class="tooltip"><span style="color: LightBlue; font-size:25px; font-style: italic;">Example Explanation 2.1</span>
<span class="tooltiptext">Fairness and non-discrimination</span>
</div>
<div style="background-color: ghostwhite;">
<p>Based on the information you have declared in your application and data that we received from our partner CRA, our recommendation is to refuse the credit agreement with the present commitments as there is high risk that it will negatively impact your finances. This recommendation did not take into account any of the protected characteristics, as defined in the Equality Act.</p>
<p>You can explore how our recommendation would change if any of the following factors evolve.</p>
<p><input id="Age" checked="checked" name="Age" type="checkbox" value="Age" />Age</p>
18<input list="tickmarks" name="age" type="range" value="25" />110
<datalist id="tickmarks">
<option label="0" value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option label="5" value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option label="10" value="100"></option>
</datalist>
<p><input id="sex" checked="checked" name="sex" type="checkbox" value="sex" />Sex</p>
<p><input id="male" name="male" type="radio" value="male" />Male <input id="female" checked="checked" name="female" type="radio" value="female" />Female <input id="other" name="other" type="radio" value="other" />Other <input id="na" name="na" type="radio" value="na" />Rather not say</p>
<p><input id="status" checked="checked" name="status" type="checkbox" value="sex" />Marital status</p>
<p><input id="married" name="married" type="radio" value="married" />Married <input id="single" checked="checked" name="single" type="radio" value="single" />Single <input id="partnership" name="partnership" type="radio" value="partnership" />In partnership <input id="na" name="na" type="radio" value="na" />Rather not say</p>
<div>
<div>
<div style="display: flex; justify-content: center;">
<table style="width: 29.26829268292683%; border-collapse: collapse; border-style: none;" border="0">
<tbody>
<tr>
<td style="width: 15.290806754221386%; text-align: right; font-size: 20px;">Verdict:</td>
<td style="width: 13.977485928705448%; background-color: tomato; color: red; font-size: 20px;"><strong>REJECT</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p> </p>
<div class="tooltip"><span style="color: LightBlue; font-size:25px; font-style: italic;">Example Explanation 2.2</span>
<span class="tooltiptext">Substantive reasons</span>
</div>
<div style="background-color: ghostwhite;">
Based on the information you have declared in your application and data that we received from our partner CRA, our recommendation is to refuse the credit agreement with the present commitments as there is high risk that it will negatively impact your finances. This recommendation is based on your current circumstances.
<p>You can explore how our recommendation would change if any of your circumstances change.</p>
<p><input id="income" checked="checked" name="income" type="checkbox" value="income" />Income</p>
£0<input list="tickmarks" name="age" type="range" value="28" />£100,000
<datalist id="tickmarks">
<option label="0" value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option label="5" value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option label="10" value="100"></option>
</datalist>
<p><input id="debt" checked="checked" name="debt" type="checkbox" value="debt" />Debt account types</p>
<p><input id="credit" name="credit" type="checkbox" value="credit" />Credit cards <input id="loan" checked="checked" name="loan" type="checkbox" value="loan" />Personal loans <input id="mortgage" name="mortgage" type="checkbox" value="mortgage" />Mortgages <input id="overdraft" name="overdraft" type="checkbox" value="overdraft" />Current account overdrafts</p>
<p>
<input id="debttotal" checked="checked" name="debttotal" type="checkbox" value="debttotal" />Accumulated debt</p>
£0<input list="tickmarks" name="age" type="range" value="15" />£100,000
<datalist id="tickmarks">
<option label="0" value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option label="5" value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option label="10" value="100"></option>
</datalist>
</p>
<div>
<div>
<div style="display: flex; justify-content: center;">
<table style="width: 29.26829268292683%; border-collapse: collapse; border-style: none;" border="0">
<tbody>
<tr>
<td style="width: 15.290806754221386%; text-align: right; font-size: 20px;">Verdict:</td>
<td style="width: 13.977485928705448%; background-color: tomato; color: red; font-size: 20px;"><strong>REJECT</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<hr>
<div>
<h1>Individual session scheduling</h2>
<p>You can schedule an online individual session below or by clicking <a href='https://outlook.office365.com/owa/calendar/PLEADproject1@sotonac.onmicrosoft.com/bookings/'>here</a> (opens in new web page)</p>
<iframe src='https://outlook.office365.com/owa/calendar/PLEADproject1@sotonac.onmicrosoft.com/bookings/' width='100%' height='1800' scrolling='yes' style='border:0'></iframe></div>
</div>
</body>
</html>