humanize-time-tool
Version:
A simple and lightweight Node.js library for human-friendly time formatting and localization.
151 lines (134 loc) • 4.02 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Humanize-time Tool Demo</title>
<style>
:root {
--bg-color: #121212;
--text-color: #e0e0e0;
--accent-color: #1db954;
--border-color: #333;
--select-bg: #1e1e1e;
--select-hover-bg: #333;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
padding: 2rem;
max-width: 600px;
margin: auto;
user-select: none;
}
h1 {
color: var(--accent-color);
text-align: center;
font-weight: 700;
letter-spacing: 1.2px;
margin-bottom: 1.5rem;
}
#output {
margin-top: 1.5rem;
font-size: 1.5rem;
color: var(--accent-color);
text-align: center;
min-height: 2.5em;
font-weight: 600;
background-color: #222;
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 0 10px var(--accent-color);
user-select: text;
}
#languageSelector {
display: block;
margin: 0 auto;
margin-top: 1rem;
padding: 0.6rem 1rem;
font-size: 1rem;
border-radius: 8px;
border: 1px solid var(--border-color);
background-color: var(--select-bg);
color: var(--text-color);
cursor: pointer;
transition: background-color 0.3s ease, border-color 0.3s ease;
user-select: none;
width: 180px;
text-align-last: center;
}
#languageSelector:hover,
#languageSelector:focus {
background-color: var(--select-hover-bg);
border-color: var(--accent-color);
outline: none;
}
footer {
margin-top: 4rem;
font-size: 0.9rem;
color: #888; /* Slightly brighter than #777 for better contrast */
text-align: center;
font-style: italic;
user-select: none;
letter-spacing: 0.05em;
font-weight: 500;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #1a1a1a; /* subtle dark background behind footer */
padding: 1rem 0;
border-radius: 8px;
box-shadow: inset 0 0 5px #222;
transition: color 0.3s ease;
}
footer a {
color: var(--accent-color);
font-weight: 700;
text-decoration: none;
margin-left: 0.25rem;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
footer a:hover,
footer a:focus {
color: #60d36f; /* lighter green on hover */
text-decoration: underline;
outline: none;
}
</style>
</head>
<body>
<h1>Lang Time Formatter</h1>
<select id="languageSelector" aria-label="Select language">
<option value="en" selected>English</option> <!-- Default language -->
<option value="sv">Swedish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="es">Spanish</option>
<!-- Add more languages here if you want -->
</select>
<div id="output">Loading...</div>
<footer>
Made by <a href="https://github.com/FelixLind1" target="_blank" rel="noopener noreferrer">Felix Lind</a>
</footer>
<script type="module">
import { loadTranslations, timeAgo } from '/src/index.js';
const output = document.getElementById('output');
const languageSelector = document.getElementById('languageSelector');
async function updateTimeAgo(lang) {
output.textContent = 'Loading...';
await loadTranslations();
const date = new Date(Date.now() - 3 * 60 * 1000);
try {
const result = timeAgo(date, lang);
output.textContent = result;
} catch (e) {
output.textContent = 'Error: Invalid date';
console.error(e);
}
}
languageSelector.addEventListener('change', (e) => {
updateTimeAgo(e.target.value);
});
updateTimeAgo(languageSelector.value);
</script>
</body>
</html>