-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
218 lines (164 loc) · 9.06 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
<!DOCTYPE html>
<html lang="en-GB">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
content="Home page for Milburn Parish Council : About, Minutes, Agendas, Policies, Financial Statements, Sundry">
<meta name="keywords"
content="About, minutes, agendas, policies, financial statements, sundry">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- open-iconic-bootstrap (icon set for bootstrap) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />
<title>Home - Parish Council Website template</title>
</head>
<body>
<style>
body {
color: black;
}
:focus { /* accessibiity issue */
outline: 3px solid red !important;
}
.sectionheader {
margin-top: 4vh;
font-weight: bold;
font-size: larger;
}
.carousel-control-prev{ /* override standard position of carousel icons */
left: -10%;
top: 50%;
bottom: unset;
width: unset;
}
.carousel-control-next{
right: -10%;
top: 50%;
bottom: unset;
width: unset;
}
</style>
<form id = 'dummyform'>
</form>
<!--The aim here is to produce an interface that is both attractive and practical
on even the smallest device. Bootstrap is used because it makes it easy to apply
css grid for layout and also to implement useful effects such as modal box
Although it is anticipated that Parish Council websites will mainly be viewed on
smartphones, the design tries to stop the display looking too silly on desktop
devices. This is chieved by reducing the width of the site container to just 2/3rd
of the body width by introducing dummy columns to left and right-->
<div class = 'container-fluid' style="background-color: wheat;">
<div class ="row">
<div class= "col-lg-3 col-xs-12" style="min-height: 0;">
<!-- on small (xs-12) screens the empty sidebar column will stack to the top.
the min-height style over-rides the default 1px min height for a column class-->
</div>
<div class = "col-lg-6 col-xs-12" style="background-color: white;">
<!-- ++++++++++++ Carousel ++++++++++++++++++++++++++ -->
<div id = 'carousel-slides' class='carousel' data-interval="false"
style ='width: 80%; margin: 2vh auto 0 auto;'>
<!--All pics should be 16/9 ratio width/height- say 1600*900 -->
<div id = "carouselslides" class="carousel-inner">
</div>
<!-- Left and right controls -->
<a id="firstfocusablelement" class="carousel-control-prev" href="#carousel-slides" data-slide="prev">
<span class="carousel-control-next-icon oi oi-chevron-left" aria-hidden="true" style="color:red;"></span>
<span class="sr-only">Previous</span> <!-- show only on screen readers -->
</a>
<a class="carousel-control-next" href="#carousel-slides" data-slide="next">
<span class="carousel-control-next-icon oi oi-chevron-right" aria-hidden="true" style="color:red;"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- ++++++++++++ Sections and Entries ++++++++++++++++++++++++++ -->
<div id = 'sectionsviewdiv' style = 'text-align: center;'>
</div>
<span tabindex = "0" id = "lastfocusablelement" onfocus = "gotoTop();"></span>
<br><br>
</div>
<div class= "col-lg-3 col-xs-12" style="min-height: 0;"> <!-- on small (xs-12) screens the empty sidebar column will stack to the bottom -->
</div>
</div>
<script>
function displayCarousel() {
var form = document.forms.namedItem("dummyform");
var oData = new FormData(form);
oData.append("helper_type", "build_carousel");
var oReq = new XMLHttpRequest();
oReq.open("POST", "php/index_helpers.php", true);
oReq.onload = function (oEvent) {
if (oReq.status == 200) {
var response = oReq.responseText;
if (response.indexOf("%failed%") != -1) {
alert(response);
} else {
document.getElementById('carouselslides').innerHTML = response;
}
}
};
oReq.send(oData);
}
function displaySectionsView() {
var form = document.forms.namedItem("dummyform");
var oData = new FormData(form);
oData.append("helper_type", "build_sections_view_table");
var oReq = new XMLHttpRequest();
oReq.open("POST", "php/index_helpers.php", true);
oReq.onload = function (oEvent) {
if (oReq.status == 200) {
var response = oReq.responseText;
if (response.indexOf("%failed%") != -1) {
alert(response);
} else {
document.getElementById('sectionsviewdiv').innerHTML = response;
}
}
};
oReq.send(oData);
}
function togglesubdiv(sectionId, ev) {
// ignore if the (keyboard) event that launched this function call was a tab tab/shift ctrl/+ ctrl/- character
if (ev.keyCode === 9 || ev.keyCode === 16 ||
ev.keyCode === 17 || ev.keyCode === 187 || ev.keyCode === 189) {
return;
}
var subSectionIdA = sectionId + "a";
var subSectionIdB = sectionId + "b";
if (document.getElementById(subSectionIdA).style.display == "block") {
document.getElementById(subSectionIdA).style.display = "none";
document.getElementById(subSectionIdB).style.display = "block";
} else {
document.getElementById(subSectionIdA).style.display = "block";
document.getElementById(subSectionIdB).style.display = "none";
}
}
function linkto(target, ev) {
// ignore if the (keyboard) event that launched this function call was a tab tab/shift ctrl/+ ctrl/- character
if (ev.keyCode === 9 || ev.keyCode === 16 ||
ev.keyCode === 17 || ev.keyCode === 187 || ev.keyCode === 189) {
return;
}
// Chrome won't let us connect to local resources so to provide a stopgap for testing
// we link to server resources. All that's different between local and live running is
// the form of the hreflink Add a parameter to force reload
dateObject = new Date();
currentTime = dateObject.getTime();
var hreflink = 'entries/' + target + "?" + currentTime;
// ope links in new window unless this already exists, in which case overwrite
window.open(hreflink, "milburnpc")
}
function gotoTop() {
window.scrollTo(0, 0);
document.getElementById("firstfocusablelement").focus();
}
window.onload = function () {
displayCarousel();
displaySectionsView();
}
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>