Spaces:

abidlabs
/

yourtimezone

Running

App Files Files Community

abidlabs HF Staff commited on Aug 29

Commit

d380d44

verified ·

1 Parent(s): 0547a6c

Update index.html

Browse files

Files changed (1) hide show

index.html +448 -18

index.html CHANGED Viewed

@@ -1,19 +1,449 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Time Zone - Share Times Across Timezones</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            padding: 40px;
+            max-width: 600px;
+            width: 100%;
+            text-align: center;
+        }
+        h1 {
+            color: #000;
+            margin-bottom: 30px;
+            font-size: 2.5rem;
+            font-weight: 700;
+        }
+        .time-input-section {
+            margin-bottom: 30px;
+        }
+        .input-group {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 20px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        input[type="time"] {
+            padding: 15px;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            font-size: 1.1rem;
+            outline: none;
+            transition: border-color 0.3s ease;
+        }
+        input[type="time"]:focus {
+            border-color: #f7931e;
+        }
+        select {
+            padding: 15px;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            font-size: 1.1rem;
+            outline: none;
+            background: white;
+            cursor: pointer;
+            transition: border-color 0.3s ease;
+        }
+        select:focus {
+            border-color: #f7931e;
+        }
+        .generate-btn {
+            background: linear-gradient(135deg, #000 0%, #333 100%);
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 10px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+            margin-bottom: 20px;
+        }
+        .generate-btn:hover {
+            transform: translateY(-2px);
+        }
+        .shareable-url {
+            background: #f8f9fa;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+            word-break: break-all;
+        }
+        .shareable-url a {
+            color: #f7931e;
+            text-decoration: none;
+            font-weight: 600;
+        }
+        .shareable-url a:hover {
+            text-decoration: underline;
+        }
+        .copy-btn {
+            background: #ff6b35;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .copy-btn:hover {
+            background: #e55a2b;
+        }
+        .conversion-result {
+            background: #f8f9fa;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            padding: 30px;
+            margin-top: 20px;
+            display: none;
+        }
+        .conversion-result.show {
+            display: block;
+        }
+        .original-time {
+            font-size: 1.2rem;
+            color: #666;
+            margin-bottom: 15px;
+        }
+        .converted-time {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #000;
+            margin-bottom: 10px;
+        }
+        .timezone-info {
+            font-size: 1rem;
+            color: #666;
+        }
+        .hidden {
+            display: none;
+        }
+        @media (max-width: 600px) {
+            .container {
+                padding: 20px;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+            .input-group {
+                flex-direction: column;
+                align-items: center;
+            }
+            input[type="time"], select {
+                width: 100%;
+                max-width: 200px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Your Time Zone</h1>
+        <div class="time-input-section">
+            <div class="input-group">
+                <input type="time" id="timeInput" value="09:00" required>
+                <select id="timezoneSelect">
+                    <option value="">Select your timezone</option>
+                </select>
+            </div>
+            <button class="generate-btn" onclick="generateShareableUrl()">Generate Shareable Link</button>
+        </div>
+        <div id="shareableUrlSection" class="hidden">
+            <h3>Share this link with others:</h3>
+            <div class="shareable-url">
+                <a id="shareableUrl" href="#" target="_blank"></a>
+            </div>
+            <button class="copy-btn" onclick="copyToClipboard()">Copy Link</button>
+        </div>
+        <div id="conversionResult" class="conversion-result">
+            <div class="original-time" id="originalTime"></div>
+            <div class="converted-time" id="convertedTime"></div>
+            <div class="timezone-info" id="timezoneInfo"></div>
+        </div>
+    </div>
+    <script>
+        const timezones = [
+            // Americas
+            { value: 'Pacific/Honolulu', label: 'Hawaii Time (HST) GMT-10' },
+            { value: 'America/Anchorage', label: 'Alaska Time (AKT) GMT-9' },
+            { value: 'America/Los_Angeles', label: 'Pacific Time (PT) GMT-8' },
+            { value: 'America/Phoenix', label: 'Arizona Time (MST) GMT-7' },
+            { value: 'America/Denver', label: 'Mountain Time (MT) GMT-7' },
+            { value: 'America/Chicago', label: 'Central Time (CT) GMT-6' },
+            { value: 'America/Mexico_City', label: 'Mexico City (CST) GMT-6' },
+            { value: 'America/New_York', label: 'Eastern Time (ET) GMT-5' },
+            { value: 'America/Toronto', label: 'Toronto (EST) GMT-5' },
+            { value: 'America/Caracas', label: 'Caracas (VET) GMT-4' },
+            { value: 'America/Santiago', label: 'Santiago (CLT) GMT-3' },
+            { value: 'America/Sao_Paulo', label: 'São Paulo (BRT) GMT-3' },
+            { value: 'America/Argentina/Buenos_Aires', label: 'Buenos Aires (ART) GMT-3' },
+            { value: 'Atlantic/Azores', label: 'Azores (AZOT) GMT-1' },
+            // Europe & Africa
+            { value: 'Europe/London', label: 'London (GMT) GMT+0' },
+            { value: 'Europe/Dublin', label: 'Dublin (IST) GMT+1' },
+            { value: 'Europe/Lisbon', label: 'Lisbon (WET) GMT+0' },
+            { value: 'Africa/Lagos', label: 'Lagos (WAT) GMT+1' },
+            { value: 'Europe/Paris', label: 'Paris (CET) GMT+1' },
+            { value: 'Europe/Berlin', label: 'Berlin (CET) GMT+1' },
+            { value: 'Europe/Rome', label: 'Rome (CET) GMT+1' },
+            { value: 'Europe/Madrid', label: 'Madrid (CET) GMT+1' },
+            { value: 'Europe/Amsterdam', label: 'Amsterdam (CET) GMT+1' },
+            { value: 'Europe/Brussels', label: 'Brussels (CET) GMT+1' },
+            { value: 'Europe/Vienna', label: 'Vienna (CET) GMT+1' },
+            { value: 'Europe/Warsaw', label: 'Warsaw (CET) GMT+1' },
+            { value: 'Africa/Cairo', label: 'Cairo (EET) GMT+2' },
+            { value: 'Africa/Johannesburg', label: 'Johannesburg (SAST) GMT+2' },
+            { value: 'Europe/Athens', label: 'Athens (EET) GMT+2' },
+            { value: 'Europe/Helsinki', label: 'Helsinki (EET) GMT+2' },
+            { value: 'Europe/Istanbul', label: 'Istanbul (TRT) GMT+3' },
+            { value: 'Europe/Moscow', label: 'Moscow (MSK) GMT+3' },
+            { value: 'Africa/Nairobi', label: 'Nairobi (EAT) GMT+3' },
+            // Middle East & Asia
+            { value: 'Asia/Dubai', label: 'Dubai (GST) GMT+4' },
+            { value: 'Asia/Karachi', label: 'Karachi (PKT) GMT+5' },
+            { value: 'Asia/Kolkata', label: 'India (IST) GMT+5:30' },
+            { value: 'Asia/Dhaka', label: 'Dhaka (BST) GMT+6' },
+            { value: 'Asia/Bangkok', label: 'Bangkok (ICT) GMT+7' },
+            { value: 'Asia/Jakarta', label: 'Jakarta (WIB) GMT+7' },
+            { value: 'Asia/Singapore', label: 'Singapore (SGT) GMT+8' },
+            { value: 'Asia/Hong_Kong', label: 'Hong Kong (HKT) GMT+8' },
+            { value: 'Asia/Shanghai', label: 'Beijing/Shanghai (CST) GMT+8' },
+            { value: 'Asia/Taipei', label: 'Taipei (CST) GMT+8' },
+            { value: 'Asia/Seoul', label: 'Seoul (KST) GMT+9' },
+            { value: 'Asia/Tokyo', label: 'Tokyo (JST) GMT+9' },
+            // Oceania
+            { value: 'Australia/Perth', label: 'Perth (AWST) GMT+8' },
+            { value: 'Australia/Adelaide', label: 'Adelaide (ACST) GMT+9:30' },
+            { value: 'Australia/Brisbane', label: 'Brisbane (AEST) GMT+10' },
+            { value: 'Australia/Sydney', label: 'Sydney (AEDT) GMT+11' },
+            { value: 'Australia/Melbourne', label: 'Melbourne (AEDT) GMT+11' },
+            { value: 'Pacific/Auckland', label: 'Auckland (NZDT) GMT+13' },
+            { value: 'Pacific/Fiji', label: 'Fiji (FJT) GMT+12' }
+        ];
+        function populateTimezones() {
+            const select = document.getElementById('timezoneSelect');
+            timezones.forEach(tz => {
+                const option = document.createElement('option');
+                option.value = tz.value;
+                option.textContent = tz.label;
+                select.appendChild(option);
+            });
+            const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            const matchingOption = Array.from(select.options).find(option => option.value === userTimezone);
+            if (matchingOption) {
+                matchingOption.selected = true;
+            }
+        }
+        function generateShareableUrl() {
+            const time = document.getElementById('timeInput').value;
+            const timezone = document.getElementById('timezoneSelect').value;
+            if (!time || !timezone) {
+                alert('Please select both time and timezone');
+                return;
+            }
+            const url = new URL(window.location.href);
+            url.searchParams.set('time', time);
+            url.searchParams.set('tz', timezone);
+            document.getElementById('shareableUrl').href = url.toString();
+            document.getElementById('shareableUrl').textContent = url.toString();
+            document.getElementById('shareableUrlSection').classList.remove('hidden');
+        }
+        function copyToClipboard() {
+            const url = document.getElementById('shareableUrl').href;
+            navigator.clipboard.writeText(url).then(() => {
+                const btn = document.querySelector('.copy-btn');
+                const originalText = btn.textContent;
+                btn.textContent = 'Copied!';
+                setTimeout(() => {
+                    btn.textContent = originalText;
+                }, 2000);
+            });
+        }
+        function convertTime() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const time = urlParams.get('time');
+            const timezone = urlParams.get('tz');
+            if (time && timezone) {
+                const resultDiv = document.getElementById('conversionResult');
+                const originalTimeDiv = document.getElementById('originalTime');
+                const convertedTimeDiv = document.getElementById('convertedTime');
+                const timezoneInfoDiv = document.getElementById('timezoneInfo');
+                const [hours, minutes] = time.split(':');
+                // Get current date
+                const now = new Date();
+                // Create a date string for today in the format that works universally
+                const year = now.getFullYear();
+                const month = String(now.getMonth() + 1).padStart(2, '0');
+                const day = String(now.getDate()).padStart(2, '0');
+                // Build a date-time string
+                const dateTimeString = `${year}-${month}-${day} ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00`;
+                // Create dates for multiple possible interpretations and find the right one
+                // Try creating dates at different hours to find which one matches our target time in the source timezone
+                let correctDate = null;
+                // We'll iterate through possible UTC times to find the one that matches our target time in the source timezone
+                // Search around today's date
+                const baseTime = Date.UTC(year, now.getMonth(), now.getDate(), 12, 0, 0);
+                // First try hourly increments
+                for (let offsetHours = -24; offsetHours <= 24; offsetHours++) {
+                    const testTime = baseTime + (offsetHours * 60 * 60 * 1000);
+                    const testDate = new Date(testTime);
+                    // Check what time this UTC time appears as in the source timezone
+                    const testTimeInSourceTz = testDate.toLocaleTimeString('en-US', {
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        hour12: false,
+                        timeZone: timezone
+                    });
+                    const targetTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+                    if (testTimeInSourceTz === targetTime) {
+                        correctDate = testDate;
+                        break;
+                    }
+                }
+                // If we couldn't find an exact match with hourly search, try with finer granularity
+                if (!correctDate) {
+                    for (let offsetMinutes = -1440; offsetMinutes <= 1440; offsetMinutes += 15) {
+                        const testTime = baseTime + (offsetMinutes * 60 * 1000);
+                        const testDate = new Date(testTime);
+                        const testTimeInSourceTz = testDate.toLocaleTimeString('en-US', {
+                            hour: '2-digit',
+                            minute: '2-digit',
+                            hour12: false,
+                            timeZone: timezone
+                        });
+                        const targetTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+                        if (testTimeInSourceTz === targetTime) {
+                            correctDate = testDate;
+                            break;
+                        }
+                    }
+                }
+                // Display the original time exactly as entered
+                const originalHour = parseInt(hours);
+                const originalTimeString = `${originalHour % 12 || 12}:${String(minutes).padStart(2, '0')} ${originalHour >= 12 ? 'PM' : 'AM'}`;
+                const originalTimezoneAbbr = getTimezoneAbbr(timezone);
+                originalTimeDiv.textContent = `Original time: ${originalTimeString} ${originalTimezoneAbbr}`;
+                // Get user's timezone
+                const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+                const userTimezoneAbbr = getTimezoneAbbr(userTimezone);
+                // Convert to user's timezone if we found a valid date
+                if (correctDate) {
+                    const convertedTimeString = correctDate.toLocaleTimeString('en-US', {
+                        hour: 'numeric',
+                        minute: '2-digit',
+                        hour12: true,
+                        timeZone: userTimezone
+                    });
+                    convertedTimeDiv.textContent = `${convertedTimeString} ${userTimezoneAbbr} for you!`;
+                } else {
+                    // Fallback if conversion failed
+                    convertedTimeDiv.textContent = `Unable to convert time accurately`;
+                }
+                timezoneInfoDiv.textContent = `Your timezone: ${userTimezone}`;
+                resultDiv.classList.add('show');
+                document.querySelector('.time-input-section').style.display = 'none';
+                document.getElementById('shareableUrlSection').style.display = 'none';
+            }
+        }
+        function getTimezoneAbbr(timezone) {
+            const date = new Date();
+            const abbr = date.toLocaleString('en-US', {
+                timeZone: timezone,
+                timeZoneName: 'short'
+            }).split(' ').pop();
+            return abbr;
+        }
+        window.onload = function() {
+            populateTimezones();
+            convertTime();
+        };
+    </script>
+</body>
 </html>