-
Notifications
You must be signed in to change notification settings - Fork 0
/
inspector.html
125 lines (124 loc) · 11.1 KB
/
inspector.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
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Float Inspector</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔎</text></svg>">
</head>
<body>
<div class="container">
<img class="logo" src="assets/images/inspector.svg">
<div class="subtitle">Based on <a href="https://github.com/giuscris/floatinfo/">floatinfo.js</a></div>
<section>
<div class="caption">Decimal number</div>
<div class="subcaption">Type to change</div>
<input class="number-input" id="numberInput">
</section>
<section>
<div class="caption">Exponential Notation</div>
<div class="exponential">-1<sup class="sign" id="expSign"></sup> × <span id="expBase">2</span><sup class="exponent" id="expExponent"></sup> × <span class="significand" id="expSignificand"></span> = <span id="expNum"></span></div>
</section>
<section>
<div class="caption">Machine bits (32-bit words)</div>
<div class="subcaption">Click to flip bits</div>
<div class="words words-bin">
<div class="word">
<span class="bit sign"><input type="checkbox" id="bit63"><label for="bit63"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit62"><label for="bit62"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit61"><label for="bit61"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit60"><label for="bit60"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit59"><label for="bit59"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit58"><label for="bit58"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit57"><label for="bit57"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit56"><label for="bit56"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit55"><label for="bit55"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit54"><label for="bit54"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit53"><label for="bit53"></label></span>
<span class="bit exponent"><input type="checkbox" id="bit52"><label for="bit52"></label></span>
<span class="bit significand"><input type="checkbox" id="bit51"><label for="bit51"></label></span>
<span class="bit significand"><input type="checkbox" id="bit50"><label for="bit50"></label></span>
<span class="bit significand"><input type="checkbox" id="bit49"><label for="bit49"></label></span>
<span class="bit significand"><input type="checkbox" id="bit48"><label for="bit48"></label></span>
<span class="bit significand"><input type="checkbox" id="bit47"><label for="bit47"></label></span>
<span class="bit significand"><input type="checkbox" id="bit46"><label for="bit46"></label></span>
<span class="bit significand"><input type="checkbox" id="bit45"><label for="bit45"></label></span>
<span class="bit significand"><input type="checkbox" id="bit44"><label for="bit44"></label></span>
<span class="bit significand"><input type="checkbox" id="bit43"><label for="bit43"></label></span>
<span class="bit significand"><input type="checkbox" id="bit42"><label for="bit42"></label></span>
<span class="bit significand"><input type="checkbox" id="bit41"><label for="bit41"></label></span>
<span class="bit significand"><input type="checkbox" id="bit40"><label for="bit40"></label></span>
<span class="bit significand"><input type="checkbox" id="bit39"><label for="bit39"></label></span>
<span class="bit significand"><input type="checkbox" id="bit38"><label for="bit38"></label></span>
<span class="bit significand"><input type="checkbox" id="bit37"><label for="bit37"></label></span>
<span class="bit significand"><input type="checkbox" id="bit36"><label for="bit36"></label></span>
<span class="bit significand"><input type="checkbox" id="bit35"><label for="bit35"></label></span>
<span class="bit significand"><input type="checkbox" id="bit34"><label for="bit34"></label></span>
<span class="bit significand"><input type="checkbox" id="bit33"><label for="bit33"></label></span>
<span class="bit significand"><input type="checkbox" id="bit32"><label for="bit32"></label></span>
</div>
<div class="word word-lo">
<span class="bit significand"><input type="checkbox" id="bit31"><label for="bit31"></label></span>
<span class="bit significand"><input type="checkbox" id="bit30"><label for="bit30"></label></span>
<span class="bit significand"><input type="checkbox" id="bit29"><label for="bit29"></label></span>
<span class="bit significand"><input type="checkbox" id="bit28"><label for="bit28"></label></span>
<span class="bit significand"><input type="checkbox" id="bit27"><label for="bit27"></label></span>
<span class="bit significand"><input type="checkbox" id="bit26"><label for="bit26"></label></span>
<span class="bit significand"><input type="checkbox" id="bit25"><label for="bit25"></label></span>
<span class="bit significand"><input type="checkbox" id="bit24"><label for="bit24"></label></span>
<span class="bit significand"><input type="checkbox" id="bit23"><label for="bit23"></label></span>
<span class="bit significand"><input type="checkbox" id="bit22"><label for="bit22"></label></span>
<span class="bit significand"><input type="checkbox" id="bit21"><label for="bit21"></label></span>
<span class="bit significand"><input type="checkbox" id="bit20"><label for="bit20"></label></span>
<span class="bit significand"><input type="checkbox" id="bit19"><label for="bit19"></label></span>
<span class="bit significand"><input type="checkbox" id="bit18"><label for="bit18"></label></span>
<span class="bit significand"><input type="checkbox" id="bit17"><label for="bit17"></label></span>
<span class="bit significand"><input type="checkbox" id="bit16"><label for="bit16"></label></span>
<span class="bit significand"><input type="checkbox" id="bit15"><label for="bit15"></label></span>
<span class="bit significand"><input type="checkbox" id="bit14"><label for="bit14"></label></span>
<span class="bit significand"><input type="checkbox" id="bit13"><label for="bit13"></label></span>
<span class="bit significand"><input type="checkbox" id="bit12"><label for="bit12"></label></span>
<span class="bit significand"><input type="checkbox" id="bit11"><label for="bit11"></label></span>
<span class="bit significand"><input type="checkbox" id="bit10"><label for="bit10"></label></span>
<span class="bit significand"><input type="checkbox" id="bit9"><label for="bit9"></label></span>
<span class="bit significand"><input type="checkbox" id="bit8"><label for="bit8"></label></span>
<span class="bit significand"><input type="checkbox" id="bit7"><label for="bit7"></label></span>
<span class="bit significand"><input type="checkbox" id="bit6"><label for="bit6"></label></span>
<span class="bit significand"><input type="checkbox" id="bit5"><label for="bit5"></label></span>
<span class="bit significand"><input type="checkbox" id="bit4"><label for="bit4"></label></span>
<span class="bit significand"><input type="checkbox" id="bit3"><label for="bit3"></label></span>
<span class="bit significand"><input type="checkbox" id="bit2"><label for="bit2"></label></span>
<span class="bit significand"><input type="checkbox" id="bit1"><label for="bit1"></label></span>
<span class="bit significand"><input type="checkbox" id="bit0"><label for="bit0"></label></span>
</div>
</div>
<div class="words words-hex">
<div class="word" id="hexHiWord"></div>
<div class="word word-lo" id="hexLoWord"></div>
</div>
<div class="legend">
<span class="l l-sign">Sign</span> <span class="l l-exponent">Exponent</span> <span class="l l-significand">Significand</span>
</div>
</section>
<section>
<div class="caption">Previous/next float</div>
<div class="button-group">
<button class="button-red" id="prevFloat">← Prev</button>
<button class="button-red" id="nextFloat">Next →</button>
</div>
</section>
<section>
<div class="caption">Presets</div>
<div class="button-group" id="presetButtons"></div>
</section>
<section>
<div class="caption">Options</div>
<label class="option-control"><input type="checkbox" id="expandExp"> Expand exponential notation</label>
<label class="option-control"><input type="checkbox" id="binExp"> Display exponential notation as binary</label>
<label class="option-control"><input type="checkbox" id="displayCheckboxes"> Display checkboxes</label>
<label class="option-control"><input type="checkbox" id="displayMachineOrder"> Display words in current machine order (<span class="text-bold" id="endianness">big</span> endian)</label>
</section>
</div>
<script type="module" src="assets/js/script.js"></script>
</body>
</html>