-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (94 loc) · 3.52 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UpTick Web</title>
<script src="./wordlist.js"></script>
<script src="./bofftime.js"></script>
<script>
let base = 10
let power = 5
let inst = setInterval(updateTimeText, timerInterval(base, power));
function updateRadix() {
let baseSlider = document.getElementById('radixSlider');
base = baseSlider.value;
document.getElementById('radixSliderLabel').innerHTML = base;
}
function updateDigits() {
let digitsSlider = document.getElementById('digitsSlider');
power = digitsSlider.value;
document.getElementById('digitsSliderLabel').innerHTML = power;
}
function updateTimeText() {
let timeText = document.getElementById("time");
let dayLength = document.getElementById("dayLength");
let tickDuration = document.getElementById("tickDuration");
let systemName = document.getElementById("systemName")
const base = document.getElementById("radixSlider").value
const power = document.getElementById("digitsSlider").value
timeText.innerHTML = boffTime(getTime(), base, power);
dayLength.innerHTML = "1 day = 1" + "0".repeat(power) + " ticks";
tickDuration.innerHTML = "1 tick = " + secondDayEquivalence(base, power).toFixed(3) + " seconds";
systemName.innerHTML = "r" + base + "d" + power;
}
function toggleHiddenExplanation() {
let explanationTitle = document.getElementById("explanation-title");
let explanationText = document.getElementById("explanation-text");
toggleHiddenClass(explanationTitle);
toggleHiddenClass(explanationText);
}
function toggleHiddenClass(element) {
if (element.classList.contains("hidden")) {
element.classList.remove("hidden");
} else {
element.classList.add("hidden")
}
}
</script>
<style>
body {
text-align: center;
background: black;
}
#explanation-text {
margin: auto;
width: 70%;
text-align: left;
}
#toggle-explanation {
margin: 20px;
}
.hidden {
display: none;
}
.white {
color: white;
}
</style>
</head>
<body>
<h1 class="white">Uptick Demonstration</h1>
<h2 class="white" id="time" style="font-size: 60px; margin: 0;"></h2>
<p class="white"><span>Name: </span><span id="systemName">r10d5</span></p>
<p class="white" id="dayLength"></p>
<p class="white" id="tickDuration"></p>
<div class="slider">
<p class="white"><span>Radix: </span><span id="radixSliderLabel">10</span></p>
<input type="range" min="2" max="36" value="10" step="1" class="slider" oninput="updateRadix()" id="radixSlider">
</div>
<div class="slider">
<p class="white"><span>Digits: </span><span id="digitsSliderLabel">5</span></p>
<input type="range" min="1" max="8" value="5" step="1" class="slider" oninput="updateDigits()" id="digitsSlider">
</div>
<button id="toggle-explanation" onclick="toggleHiddenExplanation()">Show/Hide Explanation</button>
<h2 class="white" id="explanation-title">Explanation</h2>
<p class="white" id="explanation-text">Uptick shows you the current time of day. Time in Uptick looks different because it's not counting up to 12 or 24 hours. By default, it counts up to 100,000 ticks.
<br><br>
Uptick uses Uniform Place-value Time, so it represents the time of day as a simple place-value number, a number of ticks.
<br><br>
By default, there are 100,000 ticks in a day and each tick lasts 0.864 seconds. I call this pattern r10d5 since it uses a radix of 10 and represents all whole-number times of the day with 5 digits.
<br><br>
You can use the sliders to change the clock's configuration. Hide this explanation by clicking the Show/Hide Explanation button.
</p>
</body>
</html>