-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
147 lines (124 loc) · 4.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ASLearn</title>
<!-- Adding CSS-->
<link rel="stylesheet" href="/ASLearn/css/stylesheet.css" />
<link rel="stylesheet" href="/ASLearn/css/game.css" />
<link rel="stylesheet" href="/ASLearn/css/aboutStylesheet.css" />
<link rel="stylesheet" href="/ASLearn/css/alphabets.css" />
<link rel="stylesheet" href="/ASLearn/css/contactAndFoundation.css" />
<!-- Adding Assets-->
<link rel="icon" href="/ASLearn/assets/ASLearn_Icon1616.png" />
<!-- Adding JavaScript-->
<script src="/ASLearn/script.js" defer></script>
</head>
<body>
<!-- Main Div-->
<div class="main">
<!-- Nav Bar-->
<div class="navbar">
<img class="logo" src="/ASLearn/assets/ASLearn_Logo.png" alt="" />
<div class="pushLeft">
<nav>
<ul>
<li><a class="smoothscroll" href="#game">Game</a></li>
<li><a class="smoothscroll" href="#alphabets">Alphabet</a></li>
<li><a class="smoothscroll" href="#contact">Contact</a></li>
<li><a class="smoothscroll" href="#newspaper">Foundation</a></li>
</ul>
</nav>
</div>
</div>
<div class="content">
<form id="gettingInput">
<label for="textBox"></label>
<input id="textContainer" type="text" placeholder="Enter text here" />
</form>
<div id="buttons">
<button id="submitButtom" class="formButton" type="button" onclick="inputChecker()">
Convert To ASL
</button>
<button id="resetButton" class="formButton" type="button" onclick="clearing()">
Reset
</button>
</div>
<div id="signsContainer"></div>
</div>
</div>
<!-- Mini Game Number 1 -->
<div class="game" id="game">
<div class="intro">
<h1>ASL Quiz</h1>
</div>
<div class="locationImage" id="showImage"></div>
<div class="gameStart">
<div class="buttonsGame">
<div class="response" id="response"></div>
<input id="textContainer2" type="text" placeholder="Enter character" />
<button id="playButton2"type="button" onclick="runGame()"> Click to Play </button>
<button id="playButton"type="button" onclick="answerCheck()"> Check </button>
<button id="playButton"type="button" onclick="kill()"> Replay </button>
</div>
</div>
</div>
<!-- Alphabet Image-->
<div class="grow" id="alphabets">
<h1 class="head2">ASL Alphabet</h1>
<br>
<br>
<img class="asl_logo" src="/ASLearn/assets/Alphabet_Black.png" alt="" />
</div>
<!-- Foundation -->
<div class="newspaper" id="newspaper">
American Sign Language (ASL) is the predominant sign language used by the deaf community in the United States. ASL uses the expression of hand gestures and movements to produce meaning. This provides a full range of communication to those with hearing disabilities.
There are roughly 250,000 to 500,000 fluent signers of American Sign Language. This accounts to around 1% of the United States population. This reveals there is a clear language barrier between Americans. Increasing our knowledge of American Sign Language allows us to better communicate with Americans who have impaired hearing and utilize American Sign Language on a daily basis.
ASLearn helps translate text to ASL signs. The use of this tool can help someone learn the ASL alphabet to make it easier to communicate with those who have hearing disabilities. Furthermore, the use of ASLearn helps promote awareness about the deaf or hard hearing community.
</div>
<!-- Contacts -->
<div class="main_contact" id="contact">
<div class="row">
<div class="column">
<div class="card">
<div class="container">
<h2>Arshdeep Singh</h2>
<p class="title">Product Manager & Back-end</p>
<p>[email protected]</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="container">
<h2>Rahat Khandokar</h2>
<p class="title">Front-End Developer & UI/UX Designer</p>
<p>[email protected]</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="container">
<h2>Prabhjott Singh Kusrath</h2>
<p class="title">Front-End Developer & UI/UX Designer</p>
<p>[email protected]</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="container">
<h2>Steven Sikorski</h2>
<p class="title">Front-End Developer & UI/UX Designer</p>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
<!-- Main Div Ends -->
</div>
</body>
</html>