-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (98 loc) · 4.38 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tetra-sexagesimal Translator</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' href='./main.css'>
</head>
<body>
<div class='header' style='background-color: #dee2e6;'>
<h1 class='title is-pulled-left'>Tetra-sexagesimal Translator</h1>
<h2 class='subtitle is-4 is-pulled-right' style='margin: 0;'>
<a href='https://github.com/sophieball/tetra-sexagesimal#what-is-tetra-sexagesimal' target='_blank'>Tetra-what?</a>
</h2>
</div>
<div class='columns' style='margin: 0;'>
<div class='column' style='background-color: #dee2e6; border-right: 3px solid white;'>
<div class='column-header'>
<div class='select-container'>
<div class='select'>
<select id='left-lang'>
<option value='dec'>Decimal</option>
<option value='alternating'>Tetra-sexagesimal (alternating)</option>
<option value='alphabetical'>Tetra-sexagesimal (alphabetical)</option>
<option value='reversed_alpha'>Tetra-sexagesimal (reversed-alphabetical)</option>
</select>
</div>
</div>
<label id='left-checkbox-label' class='checkbox'>
<input name='left-checkbox' type='checkbox' autocomplete='off'>
Ace High
</label>
</div>
<div class='textarea-container'>
<textarea id='left-textarea-input'
class='textarea'
rows='3'
placeholder='Input a tetra-sexagesimal number'
autocomplete='off'></textarea>
</div>
<div class='box-container'>
<div id='left-box-display' class='box'></div>
</div>
</div>
<div class='column' style='background-color: #dee2e6;'>
<div class='column-header'>
<div class='select-container'>
<div class='select'>
<select id='right-lang'>
<option value='dec'>Decimal</option>
<option value='alternating'>Tetra-sexagesimal (alternating)</option>
<option value='alphabetical'>Tetra-sexagesimal (alphabetical)</option>
<option value='reversed_alpha'>Tetra-sexagesimal (reversed-alphabetical)</option>
</select>
</div>
</div>
<label id='right-checkbox-label' class='checkbox'>
<input name='right-checkbox' type='checkbox' autocomplete='off'>
<span>Ace High</span>
</label>
</div>
<div class='textarea-container'>
<textarea id='right-textarea-output'
class='textarea'
rows='3'
placeholder=''
readonly
disabled
autocomplete='off'></textarea>
</div>
<div class='box-container'>
<div id='right-box-display' class='box'></div>
</div>
</div>
<button id='btn-translate'
class='button is-success is-light'
style='position: absolute; width: 10%; top: 32%;'>Translate <i class="fa fa-globe fa-fw" aria-hidden="true"></i></button>
<button id='btn-swap'
class='button is-link is-light'
style='position: absolute; width: 10%; top: 42%;'>Swap <i class="fa fa-exchange fa-fw" aria-hidden="true"></i></button>
</div>
<script>
const header_height_ratio = 0.1;
document.querySelector('div[class="header"]').style.height = parseInt(parseInt(window.innerHeight) * header_height_ratio) + 'px';
document.querySelector('div[class="columns"]').style.height = parseInt(parseInt(window.innerHeight) * (1 - header_height_ratio)) + 'px';
document.querySelectorAll('div[class="column"]').forEach(e => { e.style.height = '100%'; });
</script>
<script src='ui.js'></script>
<script src='parse.js'></script>
<script src='display.js'></script>
<script src='convertor.js'></script>
</body>
</html>