Wayback Machine Time Converter HTML

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wayback Machine Time Converter</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .converter-card {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
        }
        h1 {
            font-size: 1.5rem;
            color: #333;
            margin-bottom: 1.5rem;
            text-align: center;
        }
        .field {
            margin-bottom: 1rem;
        }
        label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #666;
        }
        input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-family: monospace;
        }
        .button-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 1rem;
        }
        button {
            padding: 0.75rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.2s;
        }
        .btn-primary { background-color: #007bff; color: white; }
        .btn-primary:hover { background-color: #0056b3; }
        .btn-secondary { background-color: #6c757d; color: white; }
        .btn-secondary:hover { background-color: #5a6268; }
        #result-link {
            margin-top: 1.5rem;
            padding: 1rem;
            background: #e9ecef;
            border-radius: 4px;
            word-break: break-all;
            font-size: 0.9rem;
            display: none;
        }
        a { color: #007bff; text-decoration: none; }
        a:hover { text-decoration: underline; }
    </style>
</head>
<body>

<div class="converter-card">
    <h1>Wayback Time Converter</h1>
    
    <div class="field">
        <label>Target URL</label>
        <input type="text" id="targetUrl" placeholder="https://example.com" value="https://google.com">
    </div>

<div class="field">
        <label>Human Readable Date (Local)</label>
        <input type="datetime-local" id="humanDate">
    </div>

<div class="field">
        <label>Wayback Timestamp (YYYYMMDDhhmmss)</label>
        <input type="text" id="wbTimestamp" placeholder="20230101120000">
    </div>

<div class="button-group">
        <button class="btn-primary" onclick="convertToWayback()">Date to Timestamp</button>
        <button class="btn-secondary" onclick="convertFromWayback()">Timestamp to Date</button>
    </div>

<div id="result-link">
        <strong>Wayback URL:</strong><br>
        <a id="finalUrl" target="_blank" href="#"></a>
    </div>
</div>

// Set default date to now
    window.onload = () => {
        const now = new Date();
        now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
        humanDateInput.value = now.toISOString().slice(0, 16);
    };

function formatToWB(date) {
        const pad = (n) => n.toString().padStart(2, '0');
        return date.getUTCFullYear() +
               pad(date.getUTCMonth() + 1) +
               pad(date.getUTCDate()) +
               pad(date.getUTCHours()) +
               pad(date.getUTCMinutes()) +
               pad(date.getUTCSeconds());
    }

function convertToWayback() {
        const date = new Date(humanDateInput.value);
        if (isNaN(date.getTime())) return alert("Invalid Date");
        
        const ts = formatToWB(date);
        wbTimestampInput.value = ts;
        updateLink(ts);
    }

function convertFromWayback() {
        const ts = wbTimestampInput.value.trim();
        if (ts.length < 8) return alert("Timestamp too short");

const year = ts.substring(0, 4);
        const month = ts.substring(4, 6) - 1 || 0;
        const day = ts.substring(6, 8) || 1;
        const hour = ts.substring(8, 10) || 0;
        const min = ts.substring(10, 12) || 0;
        const sec = ts.substring(12, 14) || 0;

const date = new Date(Date.UTC(year, month, day, hour, min, sec));
        
        // Adjust for local display in datetime-local input
        const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000));
        humanDateInput.value = localDate.toISOString().slice(0, 16);
        updateLink(ts);
    }

</body>
</html>

Wayback Machine Time Converter HTML

Recommended

Virtual Keyboard HTML CSS JavaScript

CSS Animation Container HTML Structure

HTML Developer Portfolio Website

HTML

CSS

JS

Recommended

Virtual Keyboard HTML CSS JavaScript

CSS Animation Container HTML Structure

HTML Developer Portfolio Website

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS