generated from tanikair/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mystory.html
274 lines (254 loc) · 16.7 KB
/
mystory.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/497e577645.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="icon" type="image/png" sizes="48x48" href="../assets/images/red_hand_favicon.jpg">
<meta name="description" content="The aim of Prevent is to stop people from becoming terrorists or supporting terrorism.">
<meta name="keywords" content="Prevent, radicalisation, terrorism">
<meta name="author" content="ShakaHacka">
<title>Prevent</title>
</head>
<body>
<!--Nav-->
<!-- Nav bar styles with responsive expansion and fixed positioning as well as colours -->
<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
<!-- Sends user back to home page when clicked -->
<a href="/index.html" class="navbar-brand"><strong>Prevent</strong></a>
<!-- Toggle navigation for smaller devices -->
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<!-- Toggle burger icon -->
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- Site pages linked in nav bar -->
<ul class="navbar-nav w-100 d-flex justify-content-between">
<!-- Home page -->
<li class="active nav-item mr-2"><a class="nav-link" href="index.html">Home</a></li>
<!-- Programmes page -->
<li class="nav-item mr-2"><a class="nav-link" href="programmes.html">Programmes</a></li>
<!-- Counter Narrative page leading straight to downloadable document in seperate tab -->
<li class="nav-item mr-2"><a class="nav-link"
href="assets/Radicalisation-the-counter-narrative-and-identifying-the-tipping-point-government-response-Eighth-Report-26-17-Cm-9555.pdf"
target="_blank">Counter
Narrative</a></li>
<!-- Get involved page -->
<li class="nav-item mr-2"><a class="nav-link" href="getinvolved.html">Get Involved</a></li>
<!-- My story page -->
<li class="nav-item mr-2"><a class="nav-link" href="mystory.html">My Story</a></li>
<!-- Gallery page -->
<li class="nav-item mr-2"><a class="nav-link" href="gallery.html">Gallery</a></li>
</ul>
<!-- Sign up button and label -->
<label class="label-button-spacing">Sign up for the Prevent newsletter</label>
<a href="#" id="signup-button" class="btn btn-secondary" data-toggle="modal" data-target="#signupModal">Sign Up</a>
</div>
</nav>
<!-- Sign Up Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signupModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Sign up form inside modal popup -->
<form>
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name"
placeholder="Enter your first name">
<div class="form-group">
<label for="last">Last Name</label>
<input type="text" class="form-control" id="last"
placeholder="Enter your last name">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email">
</div>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-secondary">Sign Up</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- copied in image styling from home page -->
<div class="container-fluid callout-container">
<div class="opaque-overlay"> </div>
<div class="row">
<div class="col-12">
<!-- jumbotron for Youtube embbedded link case study example, i wanted there to be an opening image or video for visual interest. -->
<section class="callout jumbotron text-center">
<h1 class="jumbotron-header" id="casestudy-title">Has Prevent Intervention ever stopped a young person from being radicalised?</h1>
<p class="lead">Watch this video to find out how a teenager in the UK was saved from radicalisation.</p>
<!-- classes for video centering -->
<div id="casestudy-video">
<iframe class="casestudy-video casestudyvideo" width="560" height="315" src="https://www.youtube.com/embed/udRpKAlu-Q8?si=45u457xJF5N2uVvW" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
</div>
</div>
</div>
<main class="main-container">
<!--case study 1 section-->
<article class="container-fluid casestudy1">
<div id="casestudy1">
<h2>Case Study 1: Abdu's Story</h2>
</div>
<!-- styled container making the div appear as a white box with a black border -->
<div class="container bg-white p-3 my-3 text-dark border container1">
<div class="container">
<h3>What Happened?</h3>
<p>Abdu is in year 7 and has been subject to bullying in the past. He agreed with Daesh’s views, including their use of violence, and had a strong dislike of Christians. The school referred Abdu to Prevent. Abdu’s online activity involved watching beheading videos. The school felt that he was at risk of being groomed online.</p>
</div>
<hr>
<div class="container">
<h3>Support Offered</h3>
<p>The designated safeguarding lead (DSL) attended the Channel panel, taking a proactive approach and engaging with the process. The Channel panel agreed upon an intervention provider to support Abdu. The intervention provider held monthly sessions with Abdu and was able to build a good relationship with him. Other forms of support included going to a youth club, offered through the Youth Service, and the National Citizenship Scheme, which made sure Abdu was less isolated and improved his confidence.</p>
</div>
<hr>
<div class="container">
<h3>Outcome</h3>
<p>Abdu’s first session with his intervention provider was very positive. The intervention provider was able to answer Abdu’s questions about his ideology and satisfy him with the answers. Abdu felt less isolated, partly due to joining the Youth Service and the National Citizenship Service, but also support from the school and his parents. Abdu was very grateful for the support he had received and commented that it had come to him ‘just in time’.</p>
</div>
</div>
</article>
<article class="container-fluid casestudy2">
<div id="casestudy2">
<h2>Case Study 2: Brian's Story</h2>
</div>
<div class="container bg-white p-3 my-3 text-dark border container2">
<div class="container">
<h3>What Happened?</h3>
<p>Brian was seen accessing inappropriate material on his computer. The teacher in the class saw this and feeling that the material was related to school massacres, shut down the website.The teacher decided to report the incident to their designated safeguarding lead (DSL) of which they sent the referral to Counter Terrorism Police because they had recieve a number of reports from other teachers at his school.</p>
</div>
<hr>
<div class="container">
<h3>Support Offered</h3>
<p>After the initial assessment, the police assessed whether the student would need further support, such as Channel support. The police found no vulnerability or ideological risks that might require Channel support.Although the police did not find any issues relating Prevent, information sharing did confirm that the student may have some mainstream safeguarding vulnerabilities in his home life. The Prevent police then referred the case to the multi-agency safeguarding hub or local equivalent.</p>
</div>
<hr>
<div class="container">
<h3>Outcome</h3>
<p>The mainstream safeguarding partner updated the school and they felt reassured that a full Prevent assessment had been completed. Police Prevent officers also gave the school advice about re-referral if they had further concerns in the future.</p>
</div>
</div>
</article>
<!-- Section for i need immediate help! -->
<section class="container-fluid immediatehelp">
<div>
<div><hr></div>
<div class="container bg-dark p-3 my-3 text-white">
<h2>I require immediate assistance!</h2>
<p>If you do not work for a sector that falls under the Prevent duty, but you have a
concern
<!-- embedded link in local council -->
about an individual that you would like to share, please contact your <a href="https://www.gov.uk/guidance/making-a-referral-to-prevent">local council</a>
or
call the national police Prevent advice line on 0800 011 3764.
If you're deaf, hard of hearing or have a speech impairment, a police non-emergency
number is available as a text phone service on 18001 101.
</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="text-center" style="background-color:#cccccc;">
<div class="container p-4">
<!-- Social Media contact links -->
<section class="mb-4">
<h6>Connect with us</h6>
<!-- Facebook styled link in footer -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #3b5998" href="https://en-gb.facebook.com/" target="_blank" role="button"><i class="fab fa-facebook-f"></i></a>
<!-- Twitter styled link in footer -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #55acee" href="https://x.com/?lang=en" target="_blank" role="button"><i class="fab fa-twitter"></i></a>
<!-- Instagram styled link in footer -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #ac2bac" href="https://www.instagram.com/" target="_blank" role="button"><i class="fab fa-instagram"></i></a>
<!-- Youtube styled link in footer -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #dd4b39" href="https://www.youtube.com/watch?v=Otc2eaRY32s&t=25s&pp=ygUccHJldmVudCByYWRpY2FsaXNhdGlvbiB2aWRlbw%3D%3D" target="_blank" role="button"><i class="fab fa-youtube"></i></a>
</section>
<!-- signup section of footer with a form for easy access on any page. -->
<section class="">
<h6>Sign-up</h6>
<form>
<!-- bootstrap styles added to layout the footer features -->
<div class="row d-flex justify-content-center">
<div class="col-auto">
<!-- Sign up form part of the footer -->
<p class="pt-2">
<strong>Sign up for our newsletter</strong>
</p>
</div>
<div class="col-md-5 col-12">
<div class="form-outline mb-4">
<input type="email" id="form5Example2" class="form-control">
<label class="form-label" for="form5Example2">Email address</label>
</div>
</div>
<!-- Signup submit button -->
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-4">Subscribe</button>
</div>
</div>
</form>
</section>
<!-- signup section of the footer, adding another accessible option on every page to easily sign up for more information -->
<section class="mb-4">
<h6>Keep informed</h6>
<p>If you would like to keep informed of all of our activities and latest advice in the combatting of radicalisation then sign up to our newsletter for all of your information.</p>
</section>
</div>
</footer>
<!-- modal section for signup -->
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- javascript links -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- script for field entry -->
<script>
document.getElementById('immediate-assistance-button').addEventListener('click', function () {
var textFieldGroup = document.getElementById('text-field-group');
if (textFieldGroup.style.display === 'none') {
textFieldGroup.style.display = 'block';
} else {
textFieldGroup.style.display = 'none';
}
});
</script>
</body>
</html>