add web search

sanwebinfo · Mar 5, 2024 · 272dbd6 · 272dbd6
1 parent ce4d8d8
commit 272dbd6
Showing 1 changed file with 194 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="HandheldFriendly" content="True" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="theme-color" content="#c7ecee">
+<link rel="shortcut icon" href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABqklEQVQ4jZ2Tv0scURDHP7P7SGWh14mkuXJZEH8cgqUWcklAsLBbCEEJSprkD7hD/4BUISHEkMBBiivs5LhCwRQBuWgQji2vT7NeYeF7GxwLd7nl4knMwMDMfL8z876P94TMLt+8D0U0EggQSsAjwMvga8ChJAqxqjTG3m53AQTg4tXHDRH9ABj+zf6oytbEu5d78nvzcyiivx7QXBwy46XOi5z1jbM+Be+nqVfP8yzuD3FM6rzIs9YE1hqGvDf15cVunmdx7w5eYJw1pcGptC9CD4gBUuef5Ujq/BhAlTLIeFYuyfmTZgeYv+2nPt1a371P+Hm1WUPYydKf0lnePwVmh3hnlcO1uc7yvgJUDtdG8oy98kduK2KjeHI0fzCQINSXOk/vlXBUOaihAwnGWd8V5r1uhe1VIK52V6JW2D4FqHZX5lphuwEE7ooyaN7gjLMmKSwYL+pMnV+MA/6+g8RYa2Lg2RBQbj4+rll7uymLy3coiuXb5PdQVf7rKYvojAB8Lf3YUJUHfSYR3XqeLO5JXvk0dhKqSqQQoCO+s5AIxCLa2Lxc6ALcAPwS26XFskWbAAAAAElFTkSuQmCC" />
+
+<title>Country Timezone Search</title>
+<meta name="description" content="Search the country name or timezone to get the current date and time."/>
+
+<link rel="preconnect" href="https://cdn.jsdelivr.net">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/[email protected]/css/pico.min.css" integrity="sha256-3V/VWRr9ge4h3MEXrYXAFNw/HxncLXt9EB6grMKSdMI=" crossorigin="anonymous">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+SC:[email protected]&display=swap" rel="stylesheet">
+
+<style>
+    body {
+        background-color: #fff;
+        color: #333;
+        font-family: "Encode Sans SC", sans-serif;
+        font-weight: 600;
+        height: 100vh;
+    }
+
+    h1, h2 {
+        color: #333;
+        font-family: "Encode Sans SC", sans-serif;
+    }
+
+    input[type="text"] {
+        font-family: "Encode Sans SC", sans-serif;
+        border-radius: 20px;
+        padding: 10px 20px;
+        border: 1px solid #fffc00;
+        background-color: #fff;
+        color: #333;
+    }
+
+    .container {
+        max-width: 600px;
+        margin: 1px auto;
+        padding: 20px;
+        border-radius: 10px;
+        font-family: "Encode Sans SC", sans-serif;
+    }
+
+    .form-card {
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        background-color: #fffc00;
+        font-family: "Encode Sans SC", sans-serif;
+    }
+
+    .btn-primary {
+        border-radius: 20px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        font-family: "Encode Sans SC", sans-serif;
+        background-color: #8334eb;
+        color: #ecdfdf;
+        font-weight: 700;
+    }
+
+    .btn-primary:hover {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .error {
+        color: #dc3545;
+        font-size: 14px;
+        margin-top: 10px;
+        font-family: "Encode Sans SC", sans-serif;
+        font-weight: 700;
+        text-align: center;
+    }
+
+    .result-card {
+        font-family: "Encode Sans SC", sans-serif;
+        padding: 20px;
+        margin-top: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        background-color: #c1f1e9;
+    }
+</style>
+
+</head>
+<body>
+<div class="container">
+    <h1 class="text-center">Country Timezone Search</h1>
+    <div class="form-card">
+        <form onsubmit="searchTime(); return false;">
+            <div class="input-group">
+                <input type="text" id="searchInput" class="form-control" pattern="[a-zA-Z, ]+" title="Enter only letters, spaces, and commas" placeholder="Country or Zone Name">
+                <div class="input-group-append">
+                    <button type="submit" class="btn btn-primary">Search</button>
+                </div>
+            </div>
+            <p id="errorMsg" class="error"></p>
+        </form>
+    </div>
+
+    <div id="results" class="mt-2"></div><br>
+</div>
+
+<script>
+
+const canonicalLink = document.createElement('link');
+canonicalLink.rel = 'canonical';
+canonicalLink.href = window.location.href;
+document.head.appendChild(canonicalLink);
+
+function searchTime() {
+    const searchValue = document.getElementById('searchInput').value.trim().toLowerCase();
+    const errorMsgElement = document.getElementById('errorMsg');
+    const resultsContainer = document.getElementById('results');
+
+    resultsContainer.innerHTML = '';
+    errorMsgElement.textContent = '';
+
+    if (searchValue === '') {
+        errorMsgElement.textContent = 'Please enter a country name.';
+        return;
+    }
+
+    fetch('https://sanwebinfo.github.io/timezone/database/country.json')
+        .then(response => response.json())
+        .then(data => {
+            const matches = [];
+            Object.entries(data).forEach(([country, timezones]) => {
+                if (country.toLowerCase().includes(searchValue) || timezones.some(tz => tz.toLowerCase().includes(searchValue))) {
+                    matches.push({ country, timezones });
+                }
+            });
+
+            if (matches.length > 0) {
+                matches.forEach(match => {
+                    const resultElement = document.createElement('div');
+                    resultElement.classList.add('result-card');
+                    resultElement.innerHTML = `<h2>${match.country}</h2>`;
+
+                    match.timezones.forEach(timezone => {
+                        const currentTime = new Date().toLocaleString("en-US", {timeZone: timezone});
+                        const timeZoneName = Intl.DateTimeFormat(undefined, {timeZoneName: 'long'}).formatToParts(new Date()).find(({type}) => type === 'timeZoneName').value;
+                        const day = new Date().toLocaleString("en-US", {timeZone: timezone, weekday: 'long'});
+                        const emoji = getEmojiForDay(day);
+                        const timezoneList = `<strong>${timezone}</strong>`;
+                        resultElement.innerHTML += `<br><p>${emoji} ${day}, ${currentTime} - ${timezoneList}</p><br>`;
+                    });
+                    resultsContainer.appendChild(resultElement);
+                });
+            } else {
+                errorMsgElement.textContent = 'No matching countries found.';
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+            errorMsgElement.textContent = 'An error occurred while fetching data.';
+        });
+}
+
+function getEmojiForDay(day) {
+    switch(day.toLowerCase()) {
+        case 'monday':
+            return '📅';
+        case 'tuesday':
+            return '📆';
+        case 'wednesday':
+            return '📇';
+        case 'thursday':
+            return '📈';
+        case 'friday':
+            return '📉';
+        case 'saturday':
+            return '📊';
+        case 'sunday':
+            return '📋';
+        default:
+            return '';
+    }
+}
+
+document.getElementById('searchInput').addEventListener('input', function() {
+    document.getElementById('errorMsg').textContent = '';
+});
+</script>
+
+</body>
+</html>