mirror of
https://github.com/aljazceru/timeconvert.org.git
synced 2025-12-17 06:04:27 +01:00
206 lines
7.4 KiB
HTML
206 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Convert timestamps and dates into multiple formats instantly. Supports Unix, ISO 8601, UTC, and more.">
|
|
<title>Time Format Converter | Convert Timestamps Instantly</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: auto;
|
|
padding: 20px;
|
|
background-color: #121212;
|
|
color: #e0e0e0;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
.container {
|
|
background-color: #1e1e1e;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
}
|
|
.input-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
.input-wrapper {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-top: 5px;
|
|
border: 1px solid #555;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
background-color: #333;
|
|
color: #e0e0e0;
|
|
}
|
|
.formats {
|
|
margin-top: 20px;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.format-item {
|
|
background: #222;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
border: 1px solid #444;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.copy-button {
|
|
background: none;
|
|
border: none;
|
|
color: #bbb;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.copy-button:hover {
|
|
color: #fff;
|
|
}
|
|
.footer {
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
.footer a {
|
|
color: #3b82f6;
|
|
text-decoration: none;
|
|
margin: 0 10px;
|
|
}
|
|
.footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
#nowButton {
|
|
background-color: #3b82f6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 0 15px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
#nowButton:hover {
|
|
background-color: #2563eb;
|
|
}
|
|
</style>
|
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XF1NXK6FL0"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-XF1NXK6FL0');
|
|
</script>
|
|
|
|
<script defer data-domain="timeconvert.org" src="https://analytics.cypherpunk.cloud/js/script.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Time Format Converter</h1>
|
|
<p>Convert timestamps and dates into various formats, including Unix, ISO 8601, UTC, and more.</p>
|
|
|
|
<div class="input-group">
|
|
<label for="timeInput">Enter Timestamp / Date:</label>
|
|
<div class="input-wrapper">
|
|
<input type="text" id="timeInput" placeholder="Enter timestamp or date (YYYY-MM-DD, MM/DD/YYYY)">
|
|
<button id="nowButton" title="Insert current timestamp">Now</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="formats" id="result"></div>
|
|
|
|
<div class="footer">
|
|
<a href="https://x.com/aaaljaz" target="_blank">Twitter</a> |
|
|
<a href="https://github.com/aljazceru/timeconvert.org" target="_blank">GitHub</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function convertTime(value) {
|
|
if (!value) return;
|
|
let date;
|
|
if (/^\d{19}$/.test(value)) {
|
|
date = new Date(Number(BigInt(value) / 1000000n)); // Nanoseconds -> Milliseconds
|
|
} else if (/^\d{16}$/.test(value)) {
|
|
date = new Date(Number(BigInt(value) / 1000n)); // Microseconds -> Milliseconds
|
|
} else if (/^\d{13}$/.test(value)) {
|
|
date = new Date(parseInt(value)); // Milliseconds
|
|
} else if (/^\d{10}$/.test(value)) {
|
|
date = new Date(parseInt(value) * 1000); // Seconds
|
|
} else {
|
|
date = new Date(value);
|
|
}
|
|
|
|
if (isNaN(date.getTime())) {
|
|
document.getElementById('result').innerHTML = "Invalid date format.";
|
|
return;
|
|
}
|
|
|
|
const formats = {
|
|
'ISO 8601': date.toISOString(),
|
|
'Unix Timestamp (seconds)': Math.floor(date.getTime() / 1000),
|
|
'Unix Timestamp (mili)': date.getTime(),
|
|
'Unix Timestamp (micro)': (BigInt(date.getTime()) * 1000n).toString(),
|
|
'Unix Timestamp (nano)': (BigInt(date.getTime()) * 1000000n).toString(),
|
|
'UTC': date.toUTCString(),
|
|
'Local': date.toString(),
|
|
'RFC 2822': date.toUTCString(),
|
|
'Short Date': date.toLocaleDateString(),
|
|
'Long Date': date.toLocaleString(),
|
|
'Time Only': date.toLocaleTimeString(),
|
|
'European Format (DD/MM/YYYY)': date.toLocaleDateString('en-GB'),
|
|
'American Format (MM/DD/YYYY)': date.toLocaleDateString('en-US'),
|
|
'ISO Week Date': date.toISOString().split('T')[0] + ' (Week ' + getISOWeek(date) + ')',
|
|
'Full Date with Timezone': date.toUTCString(),
|
|
'24-Hour Format': date.getHours().toString().padStart(2, '0') + ':' + date.getMinutes().toString().padStart(2, '0'),
|
|
'12-Hour Format': date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true })
|
|
};
|
|
|
|
let resultHtml = '';
|
|
for (const [label, value] of Object.entries(formats)) {
|
|
resultHtml += `<div class="format-item"><strong>${label}:</strong> <span>${value.toString()}</span><button class="copy-button" onclick="copyToClipboard('${value.toString()}')">📋</button></div>`;
|
|
}
|
|
|
|
document.getElementById('result').innerHTML = resultHtml;
|
|
}
|
|
|
|
function getISOWeek(date) {
|
|
const target = new Date(date.valueOf());
|
|
const dayNumber = (date.getDay() + 6) % 7;
|
|
target.setDate(target.getDate() - dayNumber + 3);
|
|
const firstThursday = target.valueOf();
|
|
target.setMonth(0, 1);
|
|
if (target.getDay() !== 4) {
|
|
target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
|
|
}
|
|
return 1 + Math.ceil((firstThursday - target) / 604800000);
|
|
}
|
|
|
|
function copyToClipboard(value) {
|
|
navigator.clipboard.writeText(value).catch(err => {
|
|
console.error('Failed to copy: ', err);
|
|
});
|
|
}
|
|
|
|
document.getElementById('nowButton').addEventListener('click', () => {
|
|
const now = Date.now();
|
|
document.getElementById('timeInput').value = now;
|
|
convertTime(now);
|
|
});
|
|
|
|
document.getElementById('timeInput').addEventListener('input', (e) => convertTime(e.target.value));
|
|
</script>
|
|
</body>
|
|
</html>
|