Convertisseur de temps Wayback Machine HTML

25 gasfdsafdadf

Ouvrir dans l'éditeur Video Publiez votre code

Convertisseur de temps Wayback Machine HTML

Recommandé

15 May 2025

Formulaire de connexion et d'inscription HTML/CSS

25 May 2025

Un code par Liamgilles76

HTML

<!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>

Convertisseur de temps Wayback Machine HTML

Recommandé

Générateur de mot de passe

Formulaire de connexion et d'inscription HTML/CSS

Un code par Liamgilles76

HTML

CSS

JS

Recommandé

Générateur de mot de passe

Formulaire de connexion et d'inscription HTML/CSS

Un code par Liamgilles76

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS