Skip to content

Commit 947d338

Browse files
devsai9devsai9
committed
Added Original FTA (yet to be modified) & Modified Options Page
1 parent 2c60452 commit 947d338

7 files changed

Lines changed: 587 additions & 15 deletions

File tree

‎full_typing_area/fta.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wdth,wght@100.7,517&display=swap');
2+
3+
body {
4+
background-color: #1c1d25;
5+
color: white;
6+
}
7+
8+
.container {
9+
text-align: center;
10+
}
11+
12+
.title, .subtitle {
13+
font-family: 'Fredoka', sans-serif;
14+
font-size: 20px;
15+
font-weight: bold;
16+
}
17+
18+
.light-mode {
19+
background-color: #Bec7c9;
20+
}
21+
22+
.dark-mode {
23+
background-color: #1c1d25;
24+
}
25+
26+
.input-button {
27+
font-family: 'Fredoka', sans-serif;
28+
font-size: 20px;
29+
font-weight: bold;
30+
margin-right: 5px;
31+
}
32+
33+
#type-textbox {
34+
font-family: 'Fredoka', sans-serif;
35+
font-size: 20px;
36+
font-weight: normal;
37+
}
38+
39+
.type-textbox {
40+
text-align: center;
41+
margin-top: 10px;
42+
}
43+
44+
::-webkit-scrollbar {
45+
width: 10px;
46+
}
47+
48+
::-webkit-scrollbar-track {
49+
background: transparent;
50+
}
51+
52+
::-webkit-scrollbar-thumb {
53+
background: #888;
54+
border-radius: 10px;
55+
}
56+
57+
::-webkit-scrollbar-thumb:hover {
58+
background: #555;
59+
}

‎full_typing_area/fta.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Full Typing Area - Spanish Input Tools (Extension)</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9+
<link rel="stylesheet" href="fta.css">
10+
</head>
11+
<body>
12+
<div class="container" id="spanish-container">
13+
<br>
14+
<div class="title">
15+
<h1>Type Spanish</h1>
16+
</div>
17+
<div class="subtitle">
18+
<h2>Multi-Lingual Input Tools (Extension)</h2>
19+
</div>
20+
<div class="type-spanish-container">
21+
<div class="type-spanish-input-buttons">
22+
<input type="checkbox" id="uppercase" class="btn-check" name="uppercase-letters" value=" Uppercase">
23+
<label for="uppercase" id="uppercase-label" class="btn btn-outline-primary mb-2"> uppercase</label><br>
24+
<button class="input-button btn btn-light" id="accent-a">á</button>
25+
<button class="input-button btn btn-light" id="accent-e">é</button>
26+
<button class="input-button btn btn-light" id="accent-i">í</button>
27+
<button class="input-button btn btn-light" id="accent-n">ñ</button>
28+
<button class="input-button btn btn-light" id="accent-o">ó</button>
29+
<button class="input-button btn btn-light" id="accent-u">ú</button>
30+
<button class="input-button btn btn-light" id="upsidedown-questionmark">¿</button>
31+
<button class="input-button btn btn-light" id="upsidedown-exclamationmark">¡</button>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="container" id="french-container">
36+
<br>
37+
<div class="title">
38+
<h1>Type French</h1>
39+
</div>
40+
<div class="subtitle">
41+
<h2>Multi-Lingual Input Tools (Extension)</h2>
42+
</div>
43+
<div class="type-french-container">
44+
<div class="type-french-input-buttons">
45+
<input type="checkbox" id="uppercase2" class="btn-check" name="uppercase-letters" value=" uppercase" autofocus>
46+
<label for="uppercase2" id="uppercase-label2" class="btn btn-outline-primary mb-2"> uppercase</label><br>
47+
<button id="accent-a-backward" class="input-button btn btn-light">à</button>
48+
<button id="accent-a-hat" class="input-button btn btn-light">â</button>
49+
<button id="combined-ae" class="input-button btn btn-light">æ</button>
50+
<button id="accent-c-lower" class="input-button btn btn-light">ç</button>
51+
<button id="accent-e2" class="input-button btn btn-light">é</button>
52+
<button id="accent-e-backward" class="input-button btn btn-light">è</button>
53+
<button id="accent-e-hat" class="input-button btn btn-light">ê</button>
54+
<button id="accent-e-doubledot" class="input-button btn btn-light">ë</button>
55+
<button id="accent-i-doubledot" class="input-button btn btn-light">ï</button>
56+
<button id="accent-i-hat" class="input-button btn btn-light">î</button>
57+
<button id="accent-o-hat" class="input-button btn btn-light">ô</button>
58+
<button id="combined-oe" class="input-button btn btn-light">œ</button>
59+
</div>
60+
</div>
61+
</div>
62+
<div class="type-textbox">
63+
<textarea id="textbox" rows="22" cols="70" placeholder="Type ⌨️ normally here and use the buttons above ⬆️ to insert áccéñted spanish letters and symbols¡" autofocus></textarea>
64+
</div>
65+
<script src="fta.js"></script>
66+
</body>
67+
</html>

0 commit comments

Comments
 (0)