Tik Tok Profile Component - Copy this Html, Tailwind Component to your project
I make a simple website that fetch tiktok users data from api i made, i have the website code and its mh 6/10 but i want make it better it use catpuccin mocha colors and it's fine but look the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>TikTok User Info</title> <link rel="icon" href="https://i.imgur.com/kgsfk22.png" type="image/png"> <style> /* Import Google Fonts Lato */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); :root { /* Catppuccin Mocha Colors */ ctp rosewater: #f5e0dc; ctp flamingo: #f2cdcd; ctp pink: #f5c2e7; ctp mauve: #cba6f7; ctp red: #f38ba8; ctp maroon: #eba0ac; ctp peach: #fab387; ctp yellow: #f9e2af; ctp green: #a6e3a1; ctp teal: #94e2d5; ctp sky: #89dceb; ctp sapphire: #74c7ec; ctp blue: #89b4fa; ctp lavender: #b4befe; ctp text: #cdd6f4; ctp subtext1: #bac2de; ctp subtext0: #a6adc8; ctp overlay2: #9399b2; ctp overlay1: #7f849c; ctp overlay0: #6c7086; ctp surface2: #585b70; ctp surface1: #45475a; ctp surface0: #313244; ctp base: #1e1e2e; ctp mantle: #181825; ctp crust: #11111b; } body { background color: var( ctp base); color: var( ctp text); font family: 'Lato', sans serif; display: flex; flex direction: column; align items: center; justify content: center; padding: 20px; margin: 0; min height: 100vh; text align: center; } .container { width: 100%; max width: 600px; margin: auto; padding: 30px; border radius: 25px; background color: var( ctp mantle); box shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); } .header { display: flex; align items: center; justify content: center; margin bottom: 20px; } .header img { width: 50px; height: 50px; margin right: 15px; } h1 { color: var( ctp blue); font size: 2.5rem; font weight: 700; margin: 0; } h2 { color: var( ctp lavender); margin bottom: 30px; font size: 1.8rem; font weight: 400; } .results display { white space: pre wrap; word wrap: break word; background color: var( ctp crust); padding: 20px; border radius: 15px; overflow x: auto; margin bottom: 20px; line height: 1.8; text align: left; font size: 1.1rem; } .input container { display: flex; width: 100%; margin top: 30px; border radius: 15px; overflow: hidden; } input[type="text"] { flex grow: 1; padding: 15px; border: none; background color: var( ctp surface0); color: var( ctp subtext1); font size: 1rem; } input[type="text"]::placeholder { color: var( ctp overlay2); } button { background color: var( ctp blue); color: var( ctp crust); border: none; padding: 15px 25px; cursor: pointer; font size: 1rem; font weight: 700; transition: background color 0.3s ease, transform 0.2s ease; } button:hover { background color: var( ctp sapphire); transform: translateY( 2px); } .avatar wrapper { display: flex; justify content: center; align items: center; margin bottom: 30px; } #avatar { max width: 150px; max height: 150px; border radius: 50%; margin top: 10px; box shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; cursor: pointer; } #avatar:hover { transform: scale(1.05); } .modal { display: none; position: fixed; z index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background color: rgba(0, 0, 0, 0.8); } .modal content { margin: 15% auto; display: block; width: 80%; max width: 700px; } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font size: 40px; font weight: bold; transition: 0.3s; cursor: pointer; } .close:hover, .close:focus { color: #bbb; text decoration: none; cursor: pointer; } .error message { color: var( ctp red); margin top: 10px; } .credits { margin top: 40px; color: var( ctp subtext0); font size: 0.9rem; } .credits a { color: var( ctp sky); text decoration: none; } .credits a:hover { text decoration: underline; } #downloadButton { margin top: 10px; background color: var( ctp green); } #downloadButton:hover { background color: var( ctp teal); } .flag { width: 20px; height: 14px; vertical align: middle; margin left: 5px; } .cooldown timer { margin top: 10px; color: var( ctp yellow); font size: 1.2rem; font weight: 700; } .copy buttons { display: flex; justify content: space between; margin top: 20px; display: none; /* Initially hidden */ } .copy buttons button { flex grow: 1; margin: 0 5px; background color: var( ctp blue); color: var( ctp crust); border: none; padding: 10px 20px; cursor: pointer; font size: 1rem; font weight: 700; transition: background color 0.3s ease, transform 0.2s ease; } .copy buttons button:hover { background color: var( ctp sapphire); transform: translateY( 2px); } .copy status { display: none; margin top: 10px; color: var( ctp green); font size: 1rem; } .faq button { background color: var( ctp mauve); color: var( ctp crust); border: none; padding: 8px 15px; border radius: 15px; cursor: pointer; font size: 0.9rem; font weight: 700; margin left: 10px; transition: background color 0.3s ease, transform 0.2s ease; } .faq button:hover { background color: var( ctp pink); transform: translateY( 2px); } </style> </head> <body> <div class="container"> <div class="header"> <img src="https://i.imgur.com/kgsfk22.png" alt="TikTok Icon"> <h1>TikTok User Finder</h1> </div> <h2>Check out user stats and profile pics</h2> <div class="avatar wrapper"> <img id="avatar" src="" alt="User Avatar" style="display: none;"> </div> <div id="downloadContainer" style="display: none;"> <button id="downloadButton" aria label="Download avatar">Download Avatar</button> </div> <div class="results display" id="responseDisplay" aria live="polite">Enter a username and click the button...</div> <div class="input container"> <input type="text" id="usernameInput" placeholder="Enter TikTok username" aria label="TikTok username input"> <button id="fetchButton" aria label="Fetch user data">Fetch Data</button> </div> <div class="cooldown timer" id="cooldownTimer" style="display: none;"></div> <div class="copy buttons" id="copyButtons"> <button id="copyAllButton" aria label="Copy all info">Copy All Info</button> <button id="copyUsernameRegionButton" aria label="Copy username and region">Copy Username & Region</button> </div> <div class="copy status" id="copyStatus">Done copy</div> <div class="credits"> Made with <span style="color: var( ctp red);">♥</span> by <a href="https://www.instagram.com/motherfuckergotfuckedup/" target="_blank">jamie</a> | Using <a href="https://github.com/catppuccin/catppuccin" target="_blank">Catppuccin</a> colors <button onclick="window.open('https://omar thing.nekoweb.org/faq.html', '_blank')" class="faq button">FAQ</button> </div> </div> <! Modal for full avatar preview > <div id="avatarModal" class="modal"> <span class="close">×</span> <img class="modal content" id="fullAvatar"> </div> <script> async function getCountryName(countryCode) { const response = await fetch(`https://restcountries.com/v3.1/alpha/${countryCode}`); const data = await response.json(); return data[0]?.name?.common || countryCode; } function getFlagImageUrl(countryCode) { return `https://flagcdn.com/w20/${countryCode.toLowerCase()}.png`; } function unixToReadableTime(unixTimestamp) { const date = new Date(unixTimestamp * 1000); return date.toLocaleString(); } function startCooldown(seconds) { const fetchButton = document.getElementById('fetchButton'); const usernameInput = document.getElementById('usernameInput'); const cooldownTimer = document.getElementById('cooldownTimer'); fetchButton.disabled = true; usernameInput.disabled = true; cooldownTimer.style.display = 'block'; let remainingTime = seconds; cooldownTimer.textContent = `Cooldown period active. Please wait ${remainingTime} seconds.`; const interval = setInterval(() => { remainingTime = 1; cooldownTimer.textContent = `Cooldown period active. Please wait ${remainingTime} seconds.`; if (remainingTime <= 0) { clearInterval(interval); fetchButton.disabled = false; usernameInput.disabled = false; cooldownTimer.style.display = 'none'; } }, 1000); } document.getElementById('fetchButton').addEventListener('click', async () => { const username = document.getElementById('usernameInput').value.trim(); const avatarImg = document.getElementById('avatar'); const responseDisplay = document.getElementById('responseDisplay'); const downloadContainer = document.getElementById('downloadContainer'); const copyButtons = document.getElementById('copyButtons'); const copyStatus = document.getElementById('copyStatus'); avatarImg.style.display = 'none'; downloadContainer.style.display = 'none'; copyButtons.style.display = 'none'; copyStatus.style.display = 'none'; responseDisplay.innerHTML = ` <div style="text align: center;"> <img src="https://media.tenor.com/wpSo 8CrXqUAAAAi/loading loading forever.gif" alt="Loading..." style="width: 100px; height: 100px; display: block; margin: 10px auto;"> <span style="font size: 14px; color: gray;">Fetching data, It may take 5 seconds</span> </div>`; if (!username) { responseDisplay.textContent = "Please enter a username."; return; } if (!/^[a zA Z0 9._]+$/.test(username)) { responseDisplay.textContent = "Invalid username format."; return; } // Disable fetch button for 4 seconds const fetchButton = document.getElementById('fetchButton'); fetchButton.disabled = true; setTimeout(() => { fetchButton.disabled = false; }, 4700); const workerUrl = `https://cool api.9f45zxhnvv.workers.dev/?username=${encodeURIComponent(username)}`; try { const response = await fetch(workerUrl, { method: 'GET' }); if (!response.ok) { if (response.status === 429) { startCooldown(4); // Start cooldown for 8 seconds } else { responseDisplay.textContent = "Error: Please ensure the username is correct, with no '@' symbol.\n"; } throw new Error(`HTTP error! status: ${response.status}`); } else { const data = await response.json(); let displayText = ''; if (data.nickname) { const regionImageUrl = data.region ? getFlagImageUrl(data.region) : ''; const countryName = data.region ? await getCountryName(data.region) : ''; displayText += `š¤ Nickname: ${data.nickname}\n`; displayText += `š¤ Username: ${data.uniqueId}\n`; // Display uniqueId as "username" displayText += `š Region: ${data.region} ${regionImageUrl ? `<img src="${regionImageUrl}" class="flag" alt="Flag">` : ''} (${countryName})\n`; displayText += `š Language He Uses: ${data.language}\n`; displayText += `š About: ${data.signature ? data.signature : 'user has no about'}\n`; // Display signature as "about" or "user has no about" displayText += `š User ID: ${data.id}\n`; displayText += `š Account Created: ${data.createTime ? unixToReadableTime(data.createTime) : ''}\n`; displayText += `š Nickname Modified: ${data.nickNameModifyTime ? unixToReadableTime(data.nickNameModifyTime) : ''}\n\n`; if (data.stats) { displayText += `š Stats:\n`; displayText += `š„ Followers: ${data.stats.followers.toLocaleString()}\n`; displayText += `š¤ Following: ${data.stats.following.toLocaleString()}\n`; displayText += `ā¤ļø Hearts: ${data.stats.hearts.toLocaleString()}\n`; displayText += `š„ Videos: ${data.stats.videos.toLocaleString()}\n`; displayText += `š« Friends: ${data.stats.friends.toLocaleString()}\n`; } } else if (data.error) { displayText += `Error: ${data.error}\n`; } if (data.avatar) { avatarImg.src = data.avatar; avatarImg.style.display = 'block'; downloadContainer.style.display = 'block'; downloadButton.onclick = () => downloadImage(data.avatar, `${username} avatar`); } else if (data.avatarError) { displayText += `\nAvatar Error: ${data.avatarError}`; } responseDisplay.innerHTML = displayText; // Show copy buttons copyButtons.style.display = 'flex'; // Copy buttons functionality document.getElementById('copyAllButton').onclick = () => { copyToClipboard(displayText); showCopyStatus(); }; document.getElementById('copyUsernameRegionButton').onclick = () => { const usernameRegionText = `š¤ Username: ${data.uniqueId}\nš Region: ${data.region}`; copyToClipboard(usernameRegionText); showCopyStatus(); }; } } catch (error) { console.error("Fetch error:", error); } }); function downloadImage(url, filename) { fetch(url) .then(response => response.blob()) .then(blob => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); }) .catch(error => console.error('Error downloading image:', error)); } function copyToClipboard(text) { const textarea = document.createElement('textarea'); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); } function showCopyStatus() { const copyStatus = document.getElementById('copyStatus'); copyStatus.style.display = 'block'; setTimeout(() => { copyStatus.style.display = 'none'; }, 7000); } // Modal functionality const modal = document.getElementById('avatarModal'); const modalImg = document.getElementById('fullAvatar'); const avatarImg = document.getElementById('avatar'); const closeModal = document.getElementsByClassName('close')[0]; avatarImg.onclick = function () { modal.style.display = 'block'; modalImg.src = this.src; } closeModal.onclick = function () { modal.style.display = 'none'; } window.onclick = function (event) { if (event.target == modal) { modal.style.display = 'none'; } } document.addEventListener('keydown', function (event) { if (event.key === 'Escape') { modal.style.display = 'none'; } }); </script> </body> </html>
