Unix Timestamp Converter Tool with colorful styling and all its features use any free library

 

Unix Timestamp Converter

Enter Unix Timestamp

Converted Date and Time:

/* Global styles */ body { font-family: 'Arial', sans-serif; background-color: #f4f7fa; margin: 0; padding: 0; height: 100vh; } /* Container styles */ .container { max-width: 600px; padding-top: 30px; } /* Card styling */ .card { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; } .card-body { background: #ffffff; border-radius: 10px; } /* Button Styling */ button { font-size: 16px; padding: 10px; } button:hover { background-color: #007bff; } button i { margin-left: 8px; } /* Result display */ .result { background-color: #fff3cd; border: 1px solid #ffeeba; padding: 10px; border-radius: 5px; margin-top: 20px; } #convertedDate { font-size: 18px; color: #28a745; } document.getElementById('convertBtn').addEventListener('click', function() { const timestampInput = document.getElementById('timestampInput').value; const convertedDate = document.getElementById('convertedDate'); if (timestampInput === '') { convertedDate.innerHTML = 'Please enter a valid Unix timestamp.'; } else { const unixTimestamp = parseInt(timestampInput); if (isNaN(unixTimestamp)) { convertedDate.innerHTML = 'Please enter a valid number.'; } else { // Use moment.js to convert Unix timestamp const date = moment.unix(unixTimestamp).format('MMMM Do YYYY, h:mm:ss a'); convertedDate.innerHTML = date; } } });

YouTube Thumbnail Downloader Tool with colorful styling and all its features use any free library

 

YouTube Thumbnail Downloader

Enter the YouTube video URL to download its thumbnail

© 2024 YouTube Thumbnail Downloader

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; background-color: #f7f7f7; color: #333; padding: 20px; } .container { max-width: 600px; margin: 0 auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; } header { margin-bottom: 20px; } header h1 { color: #ff4d4d; font-size: 2.5rem; margin-bottom: 10px; } header p { font-size: 1rem; color: #555; } .input-container { display: flex; justify-content: center; gap: 10px; } #videoURL { width: 70%; padding: 10px; border: 2px solid #ff4d4d; border-radius: 8px; font-size: 1rem; } #downloadBtn { padding: 10px 20px; background-color: #ff4d4d; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; } #downloadBtn:hover { background-color: #ff6666; } #thumbnailResult { margin-top: 30px; } .thumbnail-box { margin-bottom: 20px; } #thumbnailImage { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #218838; } footer { margin-top: 40px; font-size: 0.8rem; color: #aaa; } .hidden { display: none; } @media screen and (max-width: 480px) { .container { padding: 15px; } header h1 { font-size: 2rem; } .input-container { flex-direction: column; } #videoURL { width: 100%; } #downloadBtn { width: 100%; } } document.getElementById("downloadBtn").addEventListener("click", function() { const videoURL = document.getElementById("videoURL").value; if (!videoURL) { alert("Please enter a valid YouTube URL"); return; } // Extract the video ID from the YouTube URL const videoId = getYouTubeVideoId(videoURL); if (!videoId) { alert("Invalid YouTube URL. Please try again."); return; } // Generate thumbnail URL (largest resolution) const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`; // Show the thumbnail and download link document.getElementById("thumbnailResult").classList.remove("hidden"); document.getElementById("thumbnailImage").src = thumbnailUrl; document.getElementById("downloadLink").href = thumbnailUrl; }); function getYouTubeVideoId(url) { const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[^\s]*)/; const matches = url.match(regex); return matches && matches[1]; }