Skip to content

Instantly share code, notes, and snippets.

@simonw

simonw/timestamp.md Secret

Last active November 21, 2024 03:43
Show Gist options
  • Save simonw/8c04788c5e4db11f6324ef5962127ecb to your computer and use it in GitHub Desktop.
Save simonw/8c04788c5e4db11f6324ef5962127ecb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
timestamp.md

Unix Timestamp Converter

human (Nov 20, 2024, 07:32 PM)

Create an artifact where I can paste in a unix timestamp and it shows me what that is in UTC and what that is in my browser's local timezone, make it mobile friendly and use no react

assistant (Nov 20, 2024, 07:32 PM)

I'll create a simple, mobile-friendly HTML artifact that lets you convert Unix timestamps to both UTC and local time.

create Unix Timestamp Converter

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timestamp Converter</title>
</head>
<body class="p-4 bg-gray-50 min-h-screen">
    <div class="max-w-md mx-auto bg-white rounded-lg shadow-sm p-6">
        <h1 class="text-2xl font-bold mb-4 text-gray-800">Timestamp Converter</h1>
        
        <div class="space-y-4">
            <div>
                <label for="timestamp" class="block text-sm font-medium text-gray-700 mb-1">Unix Timestamp</label>
                <input 
                    type="text" 
                    id="timestamp" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="Enter Unix timestamp..."
                >
            </div>

            <div class="space-y-2">
                <div class="text-sm font-medium text-gray-700">UTC Time:</div>
                <div id="utcTime" class="p-3 bg-gray-100 rounded-md text-gray-800"></div>
            </div>

            <div class="space-y-2">
                <div class="text-sm font-medium text-gray-700">Local Time:</div>
                <div id="localTime" class="p-3 bg-gray-100 rounded-md text-gray-800"></div>
            </div>
        </div>
    </div>

    <script>
        const timestampInput = document.getElementById('timestamp');
        const utcTimeDiv = document.getElementById('utcTime');
        const localTimeDiv = document.getElementById('localTime');

        function formatDate(date) {
            return date.toLocaleString('en-US', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                timeZoneName: 'short'
            });
        }

        function updateTimes() {
            const timestamp = timestampInput.value.trim();
            
            if (!timestamp) {
                utcTimeDiv.textContent = '—';
                localTimeDiv.textContent = '—';
                return;
            }

            // Handle both seconds and milliseconds
            const ms = timestamp.length <= 10 ? timestamp * 1000 : timestamp;
            const date = new Date(Number(ms));

            if (isNaN(date.getTime())) {
                utcTimeDiv.textContent = 'Invalid timestamp';
                localTimeDiv.textContent = 'Invalid timestamp';
                return;
            }

            utcTimeDiv.textContent = formatDate(new Date(date.toUTCString()));
            localTimeDiv.textContent = formatDate(date);
        }

        timestampInput.addEventListener('input', updateTimes);
        
        // Initialize with current timestamp
        timestampInput.value = Math.floor(Date.now() / 1000);
        updateTimes();
    </script>
</body>
</html>

I've created a simple, mobile-friendly timestamp converter that:

  1. Shows the current Unix timestamp by default
  2. Automatically converts as you type
  3. Handles both second-based (10 digits) and millisecond-based (13 digits) Unix timestamps
  4. Displays both UTC and your local timezone
  5. Uses a clean, minimal design that works well on all screen sizes
  6. Requires no external dependencies

Just paste any Unix timestamp into the input field and you'll instantly see the converted times. Let me know if you'd like any adjustments to the format or styling!

human (Nov 20, 2024, 07:33 PM)

you forgot to add any CSS, don't use a CSS framework write the CSS from scratch

Also it showed this:

UTC Time: Thursday, November 21, 2024 at 04:43:35 PM PST Local Time: Thursday, November 21, 2024 at 04:43:35 PM PST

It's rendering the UTC time in my local timezone, I want that rendered as UTC

assistant (Nov 20, 2024, 07:33 PM)

You're absolutely right - I'll fix the UTC display and add proper CSS from scratch.

rewrite Unix Timestamp Converter

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timestamp Converter</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            line-height: 1.5;
            background-color: #f5f5f5;
            color: #333;
            padding: 1rem;
            min-height: 100vh;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: #1a1a1a;
        }

        .input-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #4a4a4a;
        }

        input {
            width: 100%;
            padding: 0.75rem;
            font-size: 1rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .time-display {
            margin-bottom: 1rem;
        }

        .time-display-label {
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #4a4a4a;
        }

        .time-display-value {
            background-color: #f8f9fa;
            padding: 0.75rem;
            border-radius: 4px;
            font-family: monospace;
            font-size: 0.875rem;
            word-wrap: break-word;
        }

        @media (max-width: 480px) {
            body {
                padding: 0.5rem;
            }

            .container {
                padding: 1rem;
            }

            input {
                font-size: 16px; /* Prevents zoom on mobile */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Timestamp Converter</h1>
        
        <div class="input-group">
            <label for="timestamp">Unix Timestamp</label>
            <input 
                type="text" 
                id="timestamp" 
                placeholder="Enter Unix timestamp..."
                autocomplete="off"
            >
        </div>

        <div class="time-display">
            <div class="time-display-label">UTC Time:</div>
            <div id="utcTime" class="time-display-value"></div>
        </div>

        <div class="time-display">
            <div class="time-display-label">Local Time:</div>
            <div id="localTime" class="time-display-value"></div>
        </div>
    </div>

    <script>
        const timestampInput = document.getElementById('timestamp');
        const utcTimeDiv = document.getElementById('utcTime');
        const localTimeDiv = document.getElementById('localTime');

        function formatUTCDate(date) {
            return date.toLocaleString('en-US', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                timeZone: 'UTC',
                timeZoneName: 'short'
            });
        }

        function formatLocalDate(date) {
            return date.toLocaleString('en-US', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                timeZoneName: 'short'
            });
        }

        function updateTimes() {
            const timestamp = timestampInput.value.trim();
            
            if (!timestamp) {
                utcTimeDiv.textContent = '—';
                localTimeDiv.textContent = '—';
                return;
            }

            // Handle both seconds and milliseconds
            const ms = timestamp.length <= 10 ? timestamp * 1000 : timestamp;
            const date = new Date(Number(ms));

            if (isNaN(date.getTime())) {
                utcTimeDiv.textContent = 'Invalid timestamp';
                localTimeDiv.textContent = 'Invalid timestamp';
                return;
            }

            utcTimeDiv.textContent = formatUTCDate(date);
            localTimeDiv.textContent = formatLocalDate(date);
        }

        timestampInput.addEventListener('input', updateTimes);
        
        // Initialize with current timestamp
        timestampInput.value = Math.floor(Date.now() / 1000);
        updateTimes();
    </script>
</body>
</html>

I've made the following changes:

  1. Added custom CSS from scratch with proper mobile responsiveness
  2. Fixed the UTC time display by adding timeZone: 'UTC' to the UTC formatter options
  3. Separated the formatting functions for UTC and local time
  4. Improved the styling with:
    • Better typography and spacing
    • Subtle shadows and borders
    • Focus states for the input
    • Monospace font for the time displays
    • Mobile optimizations
    • Proper container sizing

Now the UTC time should properly display in UTC regardless of your local timezone. Try entering a timestamp and you should see the difference between UTC and your local time.

Let me know if you'd like any adjustments to the styling or formatting!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment