-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPage three.html
379 lines (348 loc) · 13.4 KB
/
Page three.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
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
<!DOCTYPE html>
<html>
<head>
<title>My Projects</title>
<link rel="stylesheet" href="portfolio design.css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300&display=swap" rel="stylesheet">
<script src="scripts.js"></script>
<script src="text-to-speech.js"></script>
</head>
<body>
<!-- First section; header & navigation links. Fixed in all pages -->
<header>
<h1>My Projects</h1>
<nav class = "topnav">
<ul>
<li><a href="index.html">About Me</a></li>
<li><a href="Page two.html">My modules</a></li>
<li><a href="Page three.html">My Projects</a></li>
<li><a href="Page four.html">Ask me a Question</a></li>
</ul>
</nav>
</header>
<!-- end first section -->
<!-- second section: voice synthesis -->
<section>
<div id="SpeechSynthesis">
<div>
<button id=play></button>
<button id=pause></button>
<button id=stop></button>
</div>
<select id="voices">
</select>
</div>
<p id="texttospeech">
Hello. You are now at my projects page and here I present to you some of the best projects that I've accomplished whilst doing my course. </br>
I hope some of my projects amused you as they're all a result of hard work and dedication.</br>
Keep a look out for buttons as there are slide shows and videos to explore that you won't want to miss out! </br>
Enjoy!
</p>
</section>
<!-- third section; ADOBE PHOTOSHOP -->
<section>
<div class="twoColumn">
<h2 class="glow">Adobe Photoshop projects >>> </h2>
<p class="paraBG1">
A background image is applied vanishing point map and
textures are laid onto the plane. And then applied “Multiply”
filter and opacity is also reduced in the pattern texture to
create a realistic look. The background image is also applied
a brightness and contrast adjustment layer.
</p>
<p class="paraBG2">
Software: Adobe Photoshop CC</br>
technique used: texture maps and vanishing point
</p>
<p class="paraBG3">
Original image source: Benyounes, H., 2019. stairs beside purple flowers during daytime. [Online]
Available <a href="https://unsplash.com/photos/E9OroT91NlA">here</a>
</p>
</div>
<div class="twoColumn">
<div class="toolTipText">
<img src="resources/bitmap 4.1.jpg" width="220" height="100%"/>
<span>before image manipulation</span>
</div>
<div class="toolTipText">
<img src="resources/bitmap 4.2.jpg" width="220" height="100%"/>
<span>after image manipulation</span>
</div>
</div>
</section>
<!-- fourth section; ADOBE ILLUSTRATOR -->
<section>
<div class="twoColumn">
<div class="toolTipText">
<img src="resources/Vector Image 1.gif" width="230" height="160"/>
<span>Treats display</span>
</div>
<div class="toolTipText">
<img src="resources/Vector Image 2.gif"width="230" height="160"/>
<span>sushi</span>
</div>
<div class="toolTipText">
<img src="resources/Vector Image 3.jpg"width="230" height="160"/>
<span>cat wallpaper</span>
</div>
<div class="toolTipText">
<img src="resources/Vector Image 4.jpg"width="230" height="160"/>
<span>cafe</span>
</div>
</div>
<div class="twoColumn">
<h2 class="glow"> <<< Adobe Illustrator projects</h2>
<p class="paraBG1">
top left: Main tool used for this graphic is pen tool
(for the main shape), gradient tool (for the tones), and brush
tool (for details and final touch). A group of shapes are
duplicated and given different colours, details, and textures to
create different variety of a same food. The top of the food
display is applied gradient of white and blue colour and reduced
opacity to create a smooth glass texture.
</p>
<p class="paraBG2">
top right: Ellipse and pen tool is used to draw the shapes, gradients are
used to tone the objects, while brush tool is used to give finer
details. The main colours used here are neutral tones such as dull
purple, black, white, and grey. A few bright colours are added to
make the graphic more interesting than dull.
</p>
<p class="paraBG3">
bottom left: This graphic is made out of solely Ellipse tool. The ellipse is
distorted at their anchor points to create desired shape which is
composited into a cat using shape builder tool. A gradient background
is applied and the paw is duplicated repeatedly, arranged, grouped,
before toning down the opacity to create a Japanese-style minimal background
</p>
</div>
</section>
<!-- Fifth section; TIMELINE ANIMATION -->
<section>
<div class="twoColumn">
<h2 class="glow">Timeline Animation >>> </h2>
<p class="paraBG1">
A vector graphic is created in Adobe Illustrator. The Christmas
tree is a series of triangles merged together by shape builder
tool. The snowman is ellipse tool distorted to create a less
perfect circle for a more natural look. The snow-coloured ground
is drawn using pen tool and the snowflakes and blinking lights
on the trees are created using brush tool. Everything is applied
gradient effect, including the background.
</p>
<p class="paraBG2">
softwares: Adobe Photoshop CC and Adobe Illustrator CC.</br>
Font chosen: Brush Script MT Italic to give it an informal, holiday feel.
</p>
<p class="paraBG3">
Experienced working as sales promoter, telemarketer, and
corporate customer service cum event coordinator with two
years of experience in the field of food and beverages.
Currently advancing studies in Multimedia Computing (Hons).
</p>
</div>
<div class="twoColumn">
<video src="resources/Merry Christmas.mp4" width="400" height="400" controls loop></video>
</div>
</section>
<!-- sixth section; FRAME ANIMATION -->
<section>
<div class="twoColumn">
<video src="resources/cat.mp4" width="400" height="400" controls loop></video>
</div>
<div class="twoColumn">
<h2 class="glow"> <<< Frame Animation </h2>
<p class="paraBG1">
Technique: A vector image of a cat walking frame by frame
is downloaded and cropped out using selection tool and each
frame are pasted on separate layers.
</p>
<p class="paraBG2">
12 new frames are created on the animation timeline and
each frame shows only show one layer so that when played,
gives an illusion of a walking cat.
The 12 frames are duplicated twice to make 36 frames. Gradient tool
is used to create the background and a soft-edged brush to create
clouds. The leaf and grass are made from the brush presets available.
</p>
<p class="paraBG3">
softwares: Adobe Illustrator CC.
</p>
</div>
</section>
<!-- seventh section; VISUAL BASIC -->
<section>
<div class="twoColumn">
<h2 class="glow">Visual Basic Project >>></h2>
<p class="paraBG1">
The information was saved in an Access database and users can edit the details and update it
depending on whether they log in as customer or admin
</p>
<p class="paraBG2">
Edit button comes with Calculate, Confirm, Clear, and show summary button.
Confirm and show summary buttons are disabled until users calculate the price of their order
This is because we don’t want users to confirm empty orders.
</p>
<p class="paraBG3">
Data validation: users have to select at least one item to buy and include the quantity
to be able to confirm an order. Users need to fully fill up the form to be able to submit their order.
And orders can’t be confirmed unless all particulars are filled up.
This is to avoid the database receiving empty or incomplete orders.
</p>
</div>
<div class="twoColumn">
<img class="VisualBasic" src="resources/order1.png" width="100%" height="300"/>
<img class="VisualBasic" src="resources/order2.png" width="100%" height="300"/>
<img class="VisualBasic" src="resources/summary.png" width="100%" height="300"/>
<img class="VisualBasic" src="resources/about.png" width="100%" height="300"/>
<img class="VisualBasic" src="resources/validation.png" width="100%" height="300"/>
<img class="VisualBasic" src="resources/loading1.png" width="100%" height="300"/>
<img class="VisualBasic" src="resources/loading2.png" width="100%" height="300"/>
<button class="btnLeft" onclick="plusDivs(-1)">❮</button>
<button class="btnRight" onclick="plusDivs(+1)">❯</button>
</div>
</section>
<!-- last section; footer, contains student info. Fixed in all pages -->
<footer>
Keoy Shon Tzu | YPC ID: BMC1904254 | LJMU ID: 897147 | Wallpaper: created on Adobe Photoshop
</footer>
</body>
<script>
var navbar = document.querySelector("nav");
var sticky = navbar.offsetTop;
window.onscroll = function () {
if (window.pageYOffset >= sticky-50) {
navbar.classList.add("effect"); <!--apply sticky effect to topnav class-->
target.css('background-color', 'rgba(255, 255, 255, 1)');
} else {
navbar.classList.remove("effect");
target.css('background-color', 'rgba(255, 255, 255, 1)');
}
};
<!-- MANUAL SLIDESHOW for visual basic project -->
var slideIndex = 1; <!-- start at index 1-->
showDivs(slideIndex); <!-- show the image of the currect index-->
function plusDivs(n) { <!-- button click calls this increment function -->
showDivs(slideIndex += n);
}
function showDivs(n) { <!-- hide all images, except for the one with the current index-->
var i;
var x = document.getElementsByClassName("VisualBasic");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
//SPEECH SYNTHESIS CODE//
onload = function() {
if ('speechSynthesis' in window){
var synth = speechSynthesis;
var flag = false;
//stop when change page ???(not sure)
if(synth.speaking){ /* stop narration */
/* for safari */
flag = false;
synth.cancel();
}
/* references to the buttons */
var playEle = document.querySelector('#play');
var pauseEle = document.querySelector('#pause');
var stopEle = document.querySelector('#stop');
/* click event handlers for the buttons */
playEle.addEventListener('click', onClickPlay);
pauseEle.addEventListener('click', onClickPause);
stopEle.addEventListener('click', onClickStop);
// select voices////
//var synth = window.speechSynthesis;
var voiceSelect = document.querySelector('#voices');
var voices = [];
function populateVoiceList() {
voices = synth.getVoices().sort(function (a, b) {
const aname = a.name.toUpperCase(), bname = b.name.toUpperCase();
if ( aname < bname ) return -1;
else if ( aname == bname ) return 0;
else return +1;
});
var selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
voiceSelect.innerHTML = '';
for(i = 0; i < voices.length ; i++) {
var option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
if(voices[i].default) {
option.textContent += ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
voiceSelect.selectedIndex = selectedIndex;
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
//end select voices
function onClickPlay() {
if(!flag){
flag = true;
utterance = new SpeechSynthesisUtterance(document.querySelector('#texttospeech').textContent);
//utterance.voice = synth.getVoices()[0];
//add voice//
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(i = 0; i < voices.length ; i++) {
//if(voices[i].name === 'Google UK English Female') {
if(voices[i].name === selectedOption) {
utterance.voice = voices[i];
break;
}
}
voiceSelect.onchange = function(){
onClickStop();
onClickPlay();
}
//and add voice
utterance.onend = function(){
flag = false;
};
synth.speak(utterance);
//fix stop after a while bug
let r = setInterval(() => {
console.log(speechSynthesis.speaking);
if (!speechSynthesis.speaking) {
clearInterval(r);
} else {
speechSynthesis.resume();
}
}, 14000);
//end fix stop after a while bug
}
if(synth.paused) { /* unpause/resume narration */
synth.resume();
}
}
function onClickPause() {
if(synth.speaking && !synth.paused){ /* pause narration */
synth.pause();
}
}
function onClickStop() {
if(synth.speaking){ /* stop narration */
/* for safari */
flag = false;
synth.cancel();
}
}
} else {
msg = document.createElement('h5');
msg.textContent = "Detected no support for Speech Synthesis";
msg.style.textAlign = 'center';
msg.style.backgroundColor = 'red';
msg.style.color = 'white';
msg.style.marginTop = msg.style.marginBottom = 0;
document.body.insertBefore(msg, document.querySelector('#SpeechSynthesis'));
}
}
</script>
</html>