-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
85 lines (85 loc) · 7.08 KB
/
Copy pathindex.html
File metadata and controls
85 lines (85 loc) · 7.08 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Simple online conversion tool. Reformat durations from D⁺-H⁺:M⁺:S⁺ to H⁺[.H⁺], e.g. 42-1:33:7 ↦ 1009.5519444…">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#171717">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap" rel="stylesheet">
<style>body,button,input{line-height:inherit}a,button,input{color:inherit}body,h1,h2,h3,h4,h5,h6,p{margin:0}*{box-sizing:border-box;border:0 solid #e5e7eb}h1,h2,h3,h4,h5,h6{font-size:inherit}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}input::placeholder{opacity:1;color:#9ca3af}.mx-auto{margin-left:auto;margin-right:auto}.max-w-7xl{max-width:80rem}.tracking-widest{letter-spacing:.1em}body,h1{color:rgb(245 245 245)}body{background-color:rgb(23 23 23)}[type=button],[type=reset],[type=submit],button{background-color:transparent;background-image:none}.dedicatedButton,.innerButton,input{background-color:rgba(64,64,64,.4)}button:hover{background-color:rgba(64,64,64,.8)}.place-items-center{place-items:center}.h-6{height:1.5rem}.h-7{height:1.75rem}.w-10{width:2.5rem}.h-10{height:2.5rem}.w-14{width:3.5rem}.h-14{height:3.5rem}.rounded-lg{border-radius:.5rem}.top-2{top:.5rem}.right-2{right:.5rem}.right-12{right:3rem}.flex-1{flex:1 1 0}.h-full{height:100%}.relative{position:relative}.self-center{align-self:center}.gap-x-2{column-gap:.5rem}.absolute{position:absolute}.border{border-width:1px}.w-full{width:100%}.p-4{padding:1rem}button,input{font-family:inherit}svg{vertical-align:middle}[role=button],button{cursor:pointer}#input button:hover{transform:scale(1.05)}.flex-col{flex-direction:column}.min-h-screen{min-height:100vh}.flex{display:flex}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Comfortaa,sans-serif,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal}h1{line-height:1;font-size:3rem}.mt-1{margin-top:.25rem}@media (min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:768px){.md\:w-4\/5{width:80%}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:mb-16{margin-bottom:4rem}.lg\:mt-8{margin-top:2rem}}.actR:active{color:#f00}.actB:active{color:#57b9ff}.actG:active{color:#0f0}</style>
<script>
window.onload = function() {
document.getElementById("btnClear").addEventListener("click", function() {
const txtInput = document.getElementById("txtInput");
txtInput.focus();
txtInput.selectionStart = 0;
txtInput.selectionEnd = txtInput.value.length;
document.execCommand("delete", null, false);
document.getElementById("error").style.display = "none";
});
document.getElementById("btnCopy").addEventListener("click", function() {
navigator.clipboard.writeText(document.getElementById("txtInput").value);
});
document.getElementById("btnApply").addEventListener("click", function() {
const txtInput = document.getElementById("txtInput");
const timeString = txtInput.value;
try {
const [daysStr, remStr] = timeString.split('-');
const days = Number(daysStr);
const [hours, minutes, seconds] = remStr.split(':').map(Number);
if (isNaN(days) || isNaN(hours) || isNaN(minutes) || isNaN(seconds))
throw "";
console.log(timeString + " ↦ " + (24 * days + hours + minutes / 60 + seconds / 3600));
txtInput.focus();
txtInput.selectionStart = 0;
txtInput.selectionEnd = txtInput.value.length;
document.execCommand("insertText", false, 24 * days + hours + minutes / 60 + seconds / 3600);
document.getElementById("error").style.display = "none";
} catch (e) {
console.error("Failed to parse '" + timeString + "'.");
document.getElementById("error").style.display = "block";
}
});
document.getElementById('input').addEventListener('keypress', function(e) {
if (e.key === 'Enter')
document.getElementById("btnApply").click();
});
}
</script>
<title>Duration Converter (Days-Hours:Minutes:Seconds to Hours)</title>
</head>
<body class="flex flex-col min-h-screen">
<header class="w-full lg:mb-16 lg:mt-8 max-w-7xl mx-auto sm:px-6">
<h1>Duration Converter</h1>
<br>
<code style="margin-left:6px">D⁺-H⁺:M⁺:S⁺ ↦ H⁺[.H⁺], e.g. 42-1:33:7 ↦ 1009.5519444…</code>
</header>
<div class="flex flex-col">
<div class="flex gap-x-2 h-14 md:w-4/5 self-center w-full">
<div id="input" class="flex-1 h-full relative">
<input id="txtInput" class="rounded-lg border h-full md:text-lg p-4 text-md tracking-widest w-full" placeholder="Enter expression..." spellcheck="false" style="background-color:rgba(64,64,64,.4)">
<button id="btnClear" title="Clear input" class="actR innerButton rounded-lg grid place-items-center absolute h-10 top-2 w-10 right-12">
<svg class="h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
</svg>
</button>
<button id="btnCopy" title="Copy expression" class="actB innerButton rounded-lg grid place-items-center absolute h-10 top-2 w-10 right-2">
<svg class="h-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/>
</svg>
</button>
</div>
<button id="btnApply" title="Apply input" class="actG dedicatedButton rounded-lg grid place-items-center border h-14 w-14">
<svg class="h-7" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M6.023 2.701c-1.229.038-2.324 1.019-2.324 2.332v13.934c0 1.75 1.945 2.913 3.563 2.033l12.813-6.967a2.3 2.3 0 0 0 0-4.066L7.262 3a2.42 2.42 0 0 0-1.238-.299zm.002.098a2.33 2.33 0 0 1 1.189.289l12.813 6.967c1.568.853 1.568 3.038 0 3.891L7.215 20.912c-1.555.846-3.414-.269-3.414-1.945V5.033c0-1.257 1.046-2.199 2.225-2.234z"/>
</svg>
</button>
</div>
<div id="error" style="display:none" class="mt-1 h-7 self-center">
<span style="color:rgb(248 113 113)">Invalid input.</span>
</div>
</div>
</body>
</html>