-
Notifications
You must be signed in to change notification settings - Fork 0
/
introMu.html
78 lines (57 loc) · 2.36 KB
/
introMu.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onboarding</title>
<!--import font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Rozha+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body class="mu-bg">
<main class='fade'>
<div class = "page-container">
<div class="container-xxbig">
<p class="paragraphs">Let's start by learning some basic Hanzi...</p>
<div class="container-xbig">
<img src="assets/wood.png" class="hanziImg" alt="wood 3D illustration that looks like a tree">
<div class="container-big">
<div class="container-med">
<img src="assets/mu-hanzi.png" class="gridImg" alt ='hanzi mu on the grid'>
<div class = 'container-small'>
<div class="heading">WOOD</div>
<button id="muButton" class = 'audio-button'>mù
<img src="assets/sound-icon.png" class="speaker-icon" alt="speaker-icon">
</button>
</div>
</div>
<p class ='paragraphs'>In Chinese, '木' stands for trees and wood, symbolizing nature. But there's more to '木'. It's a building block for more complex characters,
like '林' (forest, made of two '木') and '森' (dense forest, with three '木'). Through these words,
we understand how Chinese characters combine elements to convey complex ideas!
</p>
</div>
</div>
</div>
<button type= "button" id= "nextButton" class = 'arrowButtons orange'></button>
<button type= "button" id= "backButton" class = 'arrowButtons black'></button>
</div>
</main>
<footer>
</footer>
<script>
document.getElementById('muButton').addEventListener('click', function() {
var audio = new Audio('assets/mu.mp3');
audio.play().catch(e => console.error(e));
});
/*
document.getElementById('kou2').addEventListener('click', function() {
var audio = new Audio('/assets/kou.mp3');
audio.play().catch(e => console.error(e));
});
*/
</script>
</body>
</html>