<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Pexstar L47 ϟ</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"/>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
        .menu {
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
        }
        .menu-open {
            transform: translateX(0);
        }
        .input-container {
            position: relative;
        }
        .paste-icon {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        #download-mp3-link { 
            font-size: 15px; /* Ubah ukuran teks tombol */ 
            padding: 9px 25px; /* Ubah ukuran padding tombol */ 
            margin: 5px; /* Ubah margin tombol */ 
            width: 100%;
            height: 30px;
            background-color: white;
            border: 1px solid black;
            border-radius: 5px;
            display: block;
            text-align: center;
            line-height: 30px; /* Vertically center the text */
        }
        audio {
            display: block;
            width: 100%;
            height: 30px;
            border: 1px solid #d1d5db; /* Tailwind's gray-300 */
            border-radius: 5px;
            background-color: white;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none;
        }
        .loading-overlay.active {
            display: flex;
        }
        .loading-box {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgb(0, 255, 13);
            text-align: center;
        }
        .progress-bar {
            width: 100%;
            height: 10px;
            background: #e5e7eb; /* Tailwind's gray-200 */
            border-radius: 5px;
            overflow: hidden;
            margin-top: 10px;
        }
        .progress-bar-inner {
            height: 100%;
            background: #4bf63b; /* Tailwind's blue-500 */
            width: 0;
            transition: width 0.2s;
        }
      .hasilnyaaa {
        
        width:100%;
      }
    .bagiannya {
      overflow-y: auto;
      border:1px solid #00000025;
     margin-bottom:4px;
     margin-top:4px; 
    }
    
    .video-container {
  position: relative;
  width: 100%;
  height: auto;
}
    
    .video-container video {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.divideonya {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Agar overlay tidak menghalangi klik */
}
.induknya {
   position: relative
}
.divideonya .huhu {
  height:60px;
  width:96%;
  pointer-events: auto; /* Agar teks tetap bisa diinteraksi */
  position: absolute;
  bottom: 7px; /* Posisi teks di tengah secara vertikal */
  left: 3%; /* Posisi teks di tengah secara horizontal */
  overflow-y:auto;
  color: #fff;
  background-color: rgb(21, 255, 0); /* Background semi-transparan untuk teks */
  padding: 1px 1px;
  border-radius: 3px;
  text-align: center;
}

.hahaha {
position: absolute;
  top: 0px; /* Jarak dari atas */
  right: 5px; /* Jarak dari kanan */
  display: flex;
  justify-content: center; /* Teks di tengah horizontal */
  align-items: center; /* Teks di tengah vertikal */
  
 }
 .jarakTextAuthor {
 position: relative;
     top: -4px;
   margin-top:0;
 }
    </style>
</head>
<body class="bg-gray-100 text-gray-900">
<header class="bg-blue-600 text-white p-2 fixed w-full top-0 z-50">
    <div class="container mx-auto flex justify-between items-center">
        <button class="text-2xl" id="menu-button">
            <i class="fas fa-bars"></i>
        </button>
        <h1 class="text-xl font-bold mx-auto">Pexstar L47 ϟ</h1>
    </div>
</header>
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" id="overlay"></div>
<aside class="fixed inset-y-0 left-0 bg-white w-64 p-4 shadow-lg z-50 menu" id="sidebar">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Menu</h2>
        <button class="text-2xl" id="close-button">
            <i class="fas fa-times"></i>
        </button>
    </div>
    <nav>
        <ul class="space-y-4">
            <li><a class="text-gray-900 hover:text-blue-600" href="https://www.youtube.com/@pexstarl47">Youtube</a></li>
            <li><a class="text-gray-900 hover:text-blue-600" href="https://www.instagram.com/pexstarl47/">Instagram</a></li>
            <li><a class="text-gray-900 hover:text-blue-600" href="https://tiktok.com/@basepocean">Tiktok</a></li>
            <li><a class="text-gray-900 hover:text-blue-600" href="https://t.me/pexstarl4c">Channel Telegram</a></li>
            <li><a class="text-gray-900 hover:text-blue-600" href="https://chat.whatsapp.com/KxCfVmxMHTm9u0HMVxaUJy">Grup WhatsApp</a></li>
        </ul>
    </nav>
</aside>
<main class="container mx-auto p-4 mt-16">
    <section class="text-center my-8">
        <h2 class="text-3xl font-bold mb-4"><p class="text-xl font-semibold">Unduh dengan Cepat, Nikmati Tanpa Batas!</p>
        </h2>
        <p class="text-lg mb-6"><p class="text-lg font-mono">Letakkan link video TikTok di bawah untuk mengunduh video kesukaanmu.</p>
 
        </p>
    
        <div class="flex justify-center">
            <div class="input-container w-full max-w-lg">
                <input id="video-url" class="w-full p-2 border border-gray-300 rounded-l-md" placeholder="Paste TikTok video link here" type="text"/>
                <i class="fas fa-paste paste-icon text-gray-600" id="paste-icon"></i>
            </div>
            <button id="download-button" class="bg-blue-600 text-white p-2 rounded-r-md hover:bg-blue-700">Download</button>
        </div>
    </section>
    <section id="result-section" class="my-8 hidden">
        <h3 class="text-2xl font-bold mb-4">Download Result</h3>
        
        
        
        
        
        <div class="bg-white p-2 rounded-lg shadow-md inline-block hasilnyaaa">
            <div class="flex items-center mb-4 induknya">
                <img id="author-avatar" alt="Author avatar" class="w-12 h-12 rounded-full mr-4"/>
                <div>
                <font size="3">
                    <p id="video-name" class="font-semibold"></p>
                    </font>
                    <p id="video-author" class="text-gray-600 jarakTextAuthor"></p>
                </div>
          <div class="hahaha">
      <font color="#7e7e7e" size="2px">
          <p id="tanggalnya"></p>
          
      </font>
          </div>
            </div>
            <div class="video-container">
            <video id="video-player" controls></video>
    <div class="divideonya">
        <font color="white">
        <p id="negara"></p></font>
      <div class="huhu">
         <p id="desc-title"></p>
      </div>
    </div>     
        </div>
        
        
        
        
            <div class="flex justify-between items-center bagiannya">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-eye text-gray-600"></i>
                    <span id="video-views" class="text-gray-600"></span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-heart text-red-600"></i>
                    <span id="video-likes" class="text-gray-600"></span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-comment text-gray-600"></i>
                    <span id="video-comments" class="text-gray-600"></span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-star text-yellow-500"></i>
                    <span id="video-favorites" class="text-gray-600"></span>
                </div>
                <div class="flex items-center space-x-2">
                    <i class="fas fa-share text-gray-600"></i>
                    <span id="video-shares" class="text-gray-600"></span>
                </div>
            </div>
            
            
            <div class="flex justify-between items-center space-x-3 mb-4">
                <button id="download-video" class="bg-white text-black p-2 rounded-md border border-black hover:bg-gray-200">Download Video</button>
                <button id="download-hd-video" class="bg-white text-black p-2 rounded-md border border-black hover:bg-gray-200">Download Video HD</button>
                <button id="download-wm-video" class="bg-white text-black p-2 rounded-md border border-black hover:bg-gray-200">Download Video WM</button>
            </div>
            <div class="flex items-center mb-4">
                <i class="fas fa-music text-gray-600 text-2xl mr-4"></i>
                <div>
                    <font size="3px">
                    <p id="music-title" class="font-semibold"></p></font>
            <font size="2px">
                    <p id="music-author" class="text-gray-600 jarakTextAuthor"></p></font>
                </div>
            </div>
            <audio id="music-player" class="w-full mb-4 custom-audio" style="background-color: #F2F3F5;" controls></audio>

            <button id="download-mp3" class="bg-white text-black p-2 rounded-md border border-black hover:bg-gray-200 w-full">Download MP3</button>
        </div>
    </section>
    
    
    
    <section class="my-8">
        <h3 class="text-2xl font-bold mb-4">How It Works</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-md">
                <img alt="Step 1: Copy the TikTok video link" class="w-full h-48 object-cover rounded-md mb-4" height="200" src="https://i.pinimg.com/736x/c0/ec/36/c0ec3620057d1d0fc8e6ec5b2dc6a114.jpg" width="300"/>
                <h4 class="text-xl font-semibold mb-2">Step 1</h4>
                <p>Copy the link of the TikTok video you want to download.</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
                <video alt="Step 2: Paste the link in the input field" class="w-full h-48 object-cover rounded-md mb-4" height="200" width="300" controls>
                    <source src="https://cdn.videy.co/iA54GJSe.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <h4 class="text-xl font-semibold mb-2">Step 2</h4>
                <p>Ini adalah geng yang ada di gta san andreas.</p>
            </div>            
            <div class="bg-white p-4 rounded-lg shadow-md">
                <img alt="Step 3: Click the download button" class="w-full h-48 object-cover rounded-md mb-4" height="200" src="https://i.pinimg.com/736x/25/64/74/25647455fef1c9ea183d73faa9b14877.jpg" width="300"/>
                <h4 class="text-xl font-semibold mb-2">Step 3</h4>
                <p>Click the download button to save the video to your device.</p>
            </div>
        </div>
    </section>
    <section class="my-8">
        <center><h3 class="text-2xl font-bold mb-4">Features</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-md">
                <i class="fas fa-download text-blue-600 text-4xl mb-4"></i>
                <h4 class="text-xl font-semibold mb-2">High Quality</h4>
                <p>Download videos in the highest quality available.</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
                <i class="fas fa-lock text-blue-600 text-4xl mb-4"></i>
                <h4 class="text-xl font-semibold mb-2">Secure</h4>
                <p>Your downloads are safe and secure with us.</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow-md">
                <i class="fas fa-bolt text-blue-600 text-4xl mb-4"></i>
                <h4 class="text-xl font-semibold mb-2">Fast</h4>
                <p>Experience lightning-fast download speeds.</p>
            </div>
        </div></center>
    </section>
</main>
<footer class="bg-blue-600 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2024 Pexstar L47 ϟ. All rights reserved.</p>
    </div>
</footer>
<div class="loading-overlay" id="loading-overlay">
    <div class="loading-box">
        <div class="text-gray-900 text-2xl">Loading...</div>
        <div id="speed-display">Kecepatan: 0 MB/s</div>
        
        <div class="progress-bar">
            <div class="progress-bar-inner" id="progress-bar-inner"></div>

            
        </div>
    </div>
</div>
<script>
    const menuButton = document.getElementById('menu-button');
    const closeButton = document.getElementById('close-button');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const downloadButton = document.getElementById('download-button');
    const videoUrlInput = document.getElementById('video-url');
    const pasteIcon = document.getElementById('paste-icon');
    const resultSection = document.getElementById('result-section');
    const videoPlayer = document.getElementById('video-player');
    const videoAuthor = document.getElementById('video-author');
    const videoName = document.getElementById('video-name');
    const downloadVideoButton = document.getElementById('download-video');
    const downloadHdVideoButton = document.getElementById('download-hd-video');
    const downloadWmVideoButton = document.getElementById('download-wm-video');
    const downloadMp3Button = document.getElementById('download-mp3');
    const authorAvatar = document.getElementById('author-avatar');
    const videoViews = document.getElementById('video-views');
    const videoLikes = document.getElementById('video-likes');
    const videoComments = document.getElementById('video-comments');
    const videoFavorites = document.getElementById('video-favorites');
    const videoShares = document.getElementById('video-shares');
    const musicTitle = document.getElementById('music-title');
    const musicAuthor = document.getElementById('music-author');
    const musicPlayer = document.getElementById('music-player');
    const loadingOverlay = document.getElementById('loading-overlay');
    const progressBarInner = document.getElementById('progress-bar-inner');
    const deskripsi = document.getElementById('desc-title');
    const kapandipost = document.getElementById('tanggalnya');
   const negaranya = document.getElementById('negara');
    menuButton.addEventListener('click', () => {
        sidebar.classList.toggle('menu-open');
        overlay.classList.toggle('hidden');
    });

    closeButton.addEventListener('click', () => {
        sidebar.classList.remove('menu-open');
        overlay.classList.add('hidden');
    });

    overlay.addEventListener('click', () => {
        sidebar.classList.remove('menu-open');
        overlay.classList.add('hidden');
    });

    pasteIcon.addEventListener('click', async () => {
        try {
            const text = await navigator.clipboard.readText();
            videoUrlInput.value = text;
        } catch (err) {
            console.error('Failed to read clipboard contents: ', err);
        }
    });





   const downloadFile = async (url, fileName) => {
    const speedDisplay = document.getElementById('speed-display'); // Ambil elemen untuk menampilkan kecepatan
    loadingOverlay.classList.add('active');
    const response = await fetch(url);
    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');

    let receivedLength = 0;
    const chunks = [];
    const startTime = Date.now(); // Catat waktu awal

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        const elapsedTime = (Date.now() - startTime) / 1000; // Waktu berlalu dalam detik
        receivedLength += value.length;
        const speed = (receivedLength / elapsedTime) / (1024 * 1024); // Kecepatan dalam MB/s

        // Update teks kecepatan di HTML
        speedDisplay.textContent = `Kecepatan: ${speed.toFixed(2)} MB/s`;

        // Update progress bar
        progressBarInner.style.width = `${(receivedLength / contentLength) * 100}%`;
        chunks.push(value);
    }

    const blob = new Blob(chunks);
    const objectURL = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = objectURL;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(objectURL);
    loadingOverlay.classList.remove('active');

    // Reset kecepatan ke default setelah download selesai
    speedDisplay.textContent = `Kecepatan: 0 MB/s`;
};








    downloadButton.addEventListener('click', async () => {
        const videoUrl = videoUrlInput.value;
        if (!videoUrl) {
            alert('Please enter a TikTok video URL');
            return;
        }

        try {
            const response = await fetch(`https://aabbcc.vercel.app/tikwm/download?url=${encodeURIComponent(videoUrl)}`);
            const data = await response.json();

            if (data.success) {
                videoPlayer.src = data.data.video.noWatermark;
                videoPlayer.style.width = '100%';
                videoPlayer.style.height = 'auto';
                videoAuthor.textContent = data.data.author;
                videoName.textContent = data.data.name || 'No name';
                authorAvatar.src = data.data.avatar;
                videoViews.textContent = data.data.videoInfo.view;
                videoLikes.textContent = data.data.videoInfo.like;
                videoComments.textContent = data.data.videoInfo.comment;
                videoFavorites.textContent = data.data.videoInfo.collect;
                videoShares.textContent = data.data.videoInfo.share;
                musicTitle.textContent = data.data.musicInfo.title;
                musicAuthor.textContent = data.data.musicInfo.author;
                musicPlayer.src = data.data.musicInfo.play;
                deskripsi.textContent = data.data.title;
                kapandipost.textContent = data.data.videoInfo.createTime;
                negaranya.textContent = data.data.region;
                const currentDate = new Date();
                const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;
                const formattedTime = `${String(currentDate.getHours()).padStart(2, '0')}-${String(currentDate.getMinutes()).padStart(2, '0')}-${String(currentDate.getSeconds()).padStart(2, '0')}`;

                downloadVideoButton.onclick = () => downloadFile(data.data.video.noWatermark, `TikDL_${formattedDate}_${formattedTime}.mp4`);
                downloadHdVideoButton.onclick = () => downloadFile(data.data.video.videoHd, `TikDL_HD_${formattedDate}_${formattedTime}.mp4`);
                downloadWmVideoButton.onclick = () => downloadFile(data.data.video.watermark, `TikDL_WM_${formattedDate}_${formattedTime}.mp4`);
                downloadMp3Button.onclick = () => downloadFile(data.data.musicInfo.play, `TikDL_${formattedDate}_${formattedTime}.mp3`);

                resultSection.classList.remove('hidden');
            } else {
                alert('Failed to download video');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('An error occurred while downloading the video');
        }
    });
</script>
</body>
</html>
