-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathpageEditor_ST1.html
More file actions
394 lines (369 loc) · 17.5 KB
/
pageEditor_ST1.html
File metadata and controls
394 lines (369 loc) · 17.5 KB
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Editor Student - Imayuru</title>
<link rel="icon" type="image/x-icon" href="images/global/favicon.ico" />
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/pageEditor_validator.css" />
</head>
<body>
<!-- Main Navigation Bar -->
<header class="main-nav">
<div class="nav-top">
<div class="logo">
<a href="home.html">
<img src="images/global/logo.png" alt="TECHASTRIS" />
</a>
</div>
<div class="hamburger-menu" id="hamburger-menu">☰</div>
<nav id="nav-links">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="home.html#gallery">Overview</a></li>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="teampage.html">Team</a></li>
<li><button id="search-expand">🔍</button></li>
</ul>
</nav>
</div>
<a href="profile.html"
><img
src="images/global/profile_icon.ico"
alt="profile"
class="profile-icon"
/></a>
<button id="themeToggle" class="theme-button"></button>
<!-- Search Bar (Hidden Initially) -->
<div class="search-container" id="search-bar">
<input type="text" placeholder="Search" />
<button id="search-btn">Search</button>
<button id="close-search">✖</button>
</div>
</header>
<div id="content">
<section class="stud">
<h2>Vidath Imayuru - 1</h2>
</section>
<div class="container">
<!-- Main content area -->
<main>
<!-- Update those first three sections for the pages you were responsible to implement -->
<section>
<h2 id="splash">Splash page</h2>
<h3>Technical Description</h3>
<p>
The splash screen is designed to provide a visually appealing page
while the main content is loading. The background of the page is
set using background-image css property on the body to a image of
underwater animals aligning with the style & theme of the website.
The text content is then centered within the page using flexbox.
Furthermore, a GIF is used to indicate that the page is loading to
the user. Semi-transparent overlay is used to make the loading
icon and text content more visible and readable.
<br />
<br />
Finally, a 5-second delayed redirect to the home (home.html) page
has been implemented using the http-equiv attribute on a meta tag.
</p>
<h3>Accessibility</h3>
<p>
The splash page ensures accessibility by providing high contrast
between text and background using a dark overlay, and a simple
layout. The loading icon is animated to provide visual feedback to
users while the page is loading, and features an alt attribute for
screen readers. The text content is centered and easy to read,
ensuring a positive user experience. The 5-second delay before
redirecting to the home page gives users enough time to view the
splash screen content.
</p>
<h3>Link to the validation page</h3>
<!-- Update the path to link the Page Editor with the splash page -->
<p>
<a href="validation_ST1.html#splashVal"
>Splash Page Validation Report</a
>
</p>
<!-- Update the path to link the Page Editor with the validation page and make it jump to the marker that contains a snapshot for the splash page -->
<h3>Link to the page</h3>
<p><a href="splash.html">Splash Page</a></p>
</section>
<section>
<h2 id="volunteer">Volunteer Page</h2>
<h3>Technical Description</h3>
<p>
The volunteer page is designed to provide information about
programs and opportunities for users to get involved in
volunteering efforts. The program filter is created using a html
select element. The pagination bar is structured using Flexbox,
utilizing the justify-content property to align the current page
indicator to left and the page number and navigation buttons to
the right.
<br />
<br />
Volunteer cards are aligned using the grid layout. The card
themselves are styled using a box-shadow, border-radius, and
padding to make them visually appealing. The card feature a
Thumbnail image at the top, followed by the title & description.
The footer uses flexbox and justify-content to align the rating
and country to the left and apply and View project buttons to the
right
<br />
<br />
Registration, Overall ratings and the feedback form is present at
the end of the page
</p>
<h3>Accessibility</h3>
<p>
The volunteer page ensures accessibility by providing high
contrast between text and background, readable font sizes, and a
clean layout. The program filter is easy to use and navigate, and
the pagination bar is clearly labeled. Volunteer cards are
visually appealing and easy to read, with alt text for images and
descriptive text for links. Furthermore, the card grid adapts it
number of columns using css media queries for different sizes
screens. The registration form and feedback form are accessible to
users with screen readers and keyboards, with proper labels and
input fields. The page is responsive and adapts well to different
screen sizes, ensuring a positive user experience for all users.
</p>
<h3>Link to the validation page</h3>
<!-- Update the path to link the Page Editor with the splash page -->
<p>
<a href="validation_ST1.html#volunteerVal"
>Volunteer Page Validation Report</a
>
</p>
<!-- Update the path to link the Page Editor with the validation page and make it jump to the marker that contains a snapshot for the splash page -->
<h3>Link to the page</h3>
<p><a href="volunteer.html">Volunteer Page</a></p>
</section>
<section>
<h2 id="contents_page">
Content Page 1 - Conservation and Sustainability
</h2>
<h3>Technical Description</h3>
<p>
The content page is designed to provide information about
conservation and sustainability efforts that are currently
ongoing. The page contains a Header Thumbnail image added using
the background-image CSS property. The content is then centered
within the page using flexbox. Furthermore, the page contains a
sticky side navigation bar that allows users to navigate between
different sections of the page. The hover effect on navigation
links provides a visual indicator of interactivity.
</p>
<h3>Accessibility</h3>
<p>
Proper accessibility features have been implemented on the content
page to ensure a positive user experience. The page provides high
contrast between text and background, readable font sizes, and a
clean layout. The sticky side navigation bar is easy to use and
navigate, with clear labels for each section. The hover effect on
navigation links provides a visual indicator of interactivity,
making it easier for users to understand the page structure. The
page is responsive and adapts well to different screen sizes,
ensuring a positive user experience for all users.
</p>
<h3>Link to the validation page</h3>
<!-- Update the path to link the Page Editor with the splash page -->
<p>
<a href="validation_ST1.html#contentVal">
Content Page 1 Validation Report
</a>
</p>
<!-- Update the path to link the Page Editor with the validation page and make it jump to the marker that contains a snapshot for the splash page -->
<h3>Link to the page</h3>
<p>
<a href="content_ST1.html">
Content Page 1
</a>
</p>
</section>
<section>
<h2 id="challenge">Challenges and Lessons Learned</h2>
<p>
During the development of my assigned pages, i faced several
challenges. The most significant challenge was ensuring that the
pages were responsive on all types of devices and screen sizes.
This required testing and debugging each of my assigned page on
different screen sizes using the browser dev tools. Furthermore,
ensuring that the pages were accessible to all users was another
challenge. I had to make sure that the pages had proper alt text
for images, readable font sizes, and high contrast between text
and background. This required me to research accessibility best
practices and implement them throughout the pages.
</p>
</section>
<section>
<h2 id="compliance">Janet Compliance</h2>
<p>
According to the janet compliance copyright laws have been assured as the images used in the
above pages are referenced and attributed to, moreover, the accessibility measures have been
assured (for instance alt text), and other such minor laws have been assured.
</p>
</section>
<section>
<h2 id="ref">References</h2>
<p>
The following references & copyrighted material were used during
the development of my assigned pages:
</p>
<ul class="ref">
<li id="ref-1">
ThatDania. (2019, May 20). Untitled image. Episode 32: How CSS
works and what we aim for with CSS. Medium.
<a
href="https://medium.com/hackernoon/episode-32-how-css-works-and-what-we-aim-for-with-css-ecf2304904a9"
>https://medium.com/hackernoon/episode-32-how-css-works-and-what-we-aim-for-with-css-ecf2304904a9</a
>
</li>
<li>
Jensen, N. B. (2021, September 21). A group of garbage floating
in the ocean. Unsplash.
<a
href="https://unsplash.com/photos/a-group-of-garbage-floating-in-the-ocean-FxnqdmKBJps"
>
https://unsplash.com/photos/a-group-of-garbage-floating-in-the-ocean-FxnqdmKBJps
</a>
</li>
<li>
Wimmerlin, J. (2018, January 24). School of fish under body of
water. Unsplash.
<a
href="https://unsplash.com/photos/school-of-fish-under-body-of-water-ePvBOHsAA54"
>
https://unsplash.com/photos/school-of-fish-under-body-of-water-ePvBOHsAA54
</a>
</li>
<li>
Taylor, C. (2020, June 12). White and black sea turtle under
water. Unsplash.
<a
href="https://unsplash.com/photos/white-and-black-sea-turtle-under-water-TLxTFr9AoO0"
>
https://unsplash.com/photos/white-and-black-sea-turtle-under-water-TLxTFr9AoO0
</a>
</li>
<li>
Yoshii, H. (2020, March 3). school of fish in body of water.
Unsplash.
<a
href="https://unsplash.com/photos/school-of-fish-in-body-of-water-9y7y26C-l4Y"
>
https://unsplash.com/photos/school-of-fish-in-body-of-water-9y7y26C-l4Y
</a>
</li>
<li>
Jnr, T. (2017, October 18). landscape photography of sailing
boats during golden hour. Unsplash.
<a
href="https://unsplash.com/photos/landscape-photography-of-sailing-boats-during-golden-hour-oOFN-dSZRaE"
>
https://unsplash.com/photos/landscape-photography-of-sailing-boats-during-golden-hour-oOFN-dSZRaE
</a>
</li>
<li id="ref-martin-2023">
Martin. (2023, October 20). Oceans - United Nations Sustainable
Development. United Nations Sustainable Development.
<a href="https://www.un.org/sustainabledevelopment/oceans/">
https://www.un.org/sustainabledevelopment/oceans/
</a>
</li>
<li id="ref-igini-2024">
Igini, M. (2024, March 4). 7 solutions to overfishing we need
right now. Earth.Org.
<a href="https://earth.org/solutions-to-overfishing/">
https://earth.org/solutions-to-overfishing/
</a>
</li>
<li id="ref-encounter-edu-2019">
Encounter edu. (2019, November 20). Who protects the Great Barrier Reef
and how? Encounter Edu.
<a
href="https://encounteredu.com/cpd/subject-updates/learn-more-how-is-the-great-barrier-reef-being-protected"
>
https://encounteredu.com/cpd/subject-updates/learn-more-how-is-the-great-barrier-reef-being-protected
</a>
</li>
<li>Weerawala, W.K.V.I. (2025). [Sustainable Fishing] [AI-generated image using Adobe Express].</li>
<li>
Kristian Pettyjohn, Avatar, profile, profile page icon
<a href="https://www.iconfinder.com/icons/2624626/avatar_profile_profile_page_user_icon">
https://www.iconfinder.com/icons/2624626/avatar_profile_profile_page_user_icon
</a>
</li>
<li>
All sustainable development goal icons/logos used in the pages were taken from
United Nations. (n.d). Communications Material. United Nations.
<a href="https://www.un.org/sustainabledevelopment/news/communications-material/">
https://www.un.org/sustainabledevelopment/news/communications-material/
</a>
</li>
</ul>
</section>
<p class="top"><a href="#top">Go top</a></p>
</main>
<!-- Sidebar area -->
<aside>
<h3>Core pages developed:</h3>
<!-- Customize this to the role you undertook. Keep only the list items you were responsible to develop, delete the rest -->
<ul class="top-level-ul">
<!-- Keep only the list items you were responsible to develop, delete the rest and update the links to the corresponding markers -->
<li>Student 1</li>
<ul>
<li><a href="#splash">Splash page</a></li>
<li><a href="#volunteer">Volunteer page</a></li>
<li><a href="#contents_page">Content page</a></li>
</ul>
<li><a href="#challenge">Challenges and Lessons Learned</a></li>
<li><a href="#compliance">Compliance</a></li>
<li><a href="#ref">References</a></li>
</ul>
</aside>
</div>
</div>
<!-- Footer Section -->
<footer class="footer">
<a href="https://sdgs.un.org/" target="_blank">
<div class="image-container">
<img src="images/global/image.png" alt="Image 1" />
<img src="images/global/logo2.png" alt="Image 2" />
</div>
</a>
<!-- Accessibility Links in the center -->
<div class="links">
<a href="home.html">HOME</a>
<a href="about.html">ABOUT US</a>
<a href="home.html#gallery">OVERVIEW</a>
<a href="volunteer.html">VOLUNTEER</a>
<a href="teampage.html">TEAM</a>
<a href="sitemap.html">SITEMAP</a>
<a href="feedback.html">FEEDBACK</a>
<a href="https://sdgs.un.org/goals/goal14" target="_blank">SDG</a>
</div>
<!-- Line below the links -->
<hr />
<!-- Bottom sections -->
<div class="bottom-text">
<div class="membership">
<a href="table.html">Membership</a>
</div>
<div class="extra-links">
<a href="#" onclick="redirect('Kevin')" class="btn">Kevin</a>
<a href="#" onclick="redirect('Avaneesh')" class="btn">Avaneesh</a>
<a href="#" onclick="redirect('Pangajan')" class="btn">Pangajan</a>
<a href="#" onclick="redirect('Imayuru')" class="btn">Imayuru</a>
</div>
<div class="copyright">
<p>© 2025 TECHASTRIS.</p>
</div>
</div>
</footer>
<!-- JavaScript Files -->
<script src="js/nav-search.js"></script>
<script src="js/redirect.js" defer></script>
</body>
</html>