gopalasu/nevercry
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>ytdlp by nauval</title>7 <style>8 body {9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;10 margin: 0;11 background-color: #181818;12 color: #e0e0e0;13 display: flex;14 flex-direction: column;15 align-items: center;16 justify-content: center;17 min-height: 100vh;18 overflow: hidden;19 }20 21 .container {22 text-align: center;23 padding: 60px;24 background-color: #2c2c2c;25 border-radius: 12px;26 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);27 transition: transform 0.3s ease-in-out;28 }29 30 .container:hover {31 transform: translateY(-5px);32 }33 34 .logo-text {35 font-size: 3em;36 font-weight: bold;37 margin-bottom: 30px;38 color: #64b5f6;39 text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);40 animation: fadeInUp 1s ease-out;41 }42 43 .button-group {44 display: flex;45 flex-direction: column;46 gap: 15px;47 margin-top: 40px;48 animation: fadeInUp 1.2s ease-out 0.2s;49 width: 280px;50 }51 52 .button {53 background-color: #42a5f5;54 color: #fff;55 border: none;56 padding: 15px 30px;57 border-radius: 8px;58 cursor: pointer;59 font-size: 1.1em;60 transition: background-color 0.3s ease, transform 0.2s ease-in-out;61 text-decoration: none;62 display: flex;63 align-items: center;64 justify-content: center;65 }66 67 .button:hover {68 background-color: #1e88e5;69 transform: scale(1.05);70 }71 72 .whatsapp-button {73 background-color: #4caf50;74 }75 76 .whatsapp-button:hover {77 background-color: #388e3c;78 }79 80 .button svg {81 margin-right: 10px;82 width: 20px; /* Ukuran ikon disesuaikan */83 height: 20px;84 fill: currentColor; /* Warna ikon mengikuti warna teks */85 }86 87 .source-code {88 margin-top: 50px;89 animation: fadeInUp 1.4s ease-out 0.4s;90 }91 92 .source-code a {93 color: #64b5f6;94 text-decoration: none;95 transition: color 0.3s ease;96 display: inline-flex; /* Agar ikon dan teks sejajar */97 align-items: center;98 }99 100 .source-code a:hover {101 color: #1e88e5;102 }103 104 .source-code a svg {105 margin-right: 8px; /* Jarak antara ikon dan teks */106 width: 20px; /* Ukuran ikon disesuaikan */107 height: 20px;108 fill: currentColor; /* Warna ikon mengikuti warna teks */109 }110 111 /* Animated Background */112 .background-animation {113 position: absolute;114 top: 0;115 left: 0;116 width: 100%;117 height: 100%;118 z-index: -1;119 overflow: hidden;120 background: linear-gradient(to bottom right, #212121, #181818);121 }122 123 .particle {124 position: absolute;125 border-radius: 50%;126 background: #42a5f5;127 opacity: 0.6;128 animation: float 6s infinite linear, pulse 1.5s infinite alternate;129 }130 131 @keyframes fadeInUp {132 from {133 opacity: 0;134 transform: translateY(30px);135 }136 to {137 opacity: 1;138 transform: translateY(0);139 }140 }141 142 @keyframes float {143 0% {144 transform: translateY(0) scale(1);145 opacity: 0.6;146 }147 50% {148 transform: translateY(-20px) scale(1.1);149 opacity: 0.8;150 }151 100% {152 transform: translateY(0) scale(1);153 opacity: 0.6;154 }155 }156 157 @keyframes pulse {158 from {159 opacity: 0.6;160 transform: scale(1);161 }162 to {163 opacity: 0.8;164 transform: scale(1.05);165 }166 }167 </style>168</head>169<body>170 <div class="background-animation" id="backgroundAnimation">171 </div>172 <div class="container">173 <div class="logo-text">ytdlp by nauval</div>174 <div class="button-group">175 <a href="/docs" class="button">176 <svg viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6m2 16H8v-2h8v2m-2-5H8v-2h6v2m-2-5H8V7h4v2l4-4v5z"/></svg>177 View API Documentation178 </a>179 <a href="https://donasi.nvlgroup.my.id" class="button">180 <svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3c3.08 0 5.5 2.42 5.5 5.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>181 Donate182 </a>183 <a href="https://wa.me/6285336580720" target="_blank" class="button whatsapp-button">184 <svg viewBox="0 0 24 24"><path fill="currentColor" d="M19.08 11.86c.83.83.83 2.17 0 3l-1.16 1.16c-.83.83-2.17.83-3 0l-4.17-4.17c-.83-.83-.83-2.17 0-3l1.16-1.16c.83-.83 2.17-.83 3 0l4.17 4.17m-7.08 7.08c-1.66 0-3-1.34-3-3l.01-11.59c0-1.66 1.34-3 3-3l11.59-.01c1.66 0 3 1.34 3 3l-.01 11.59c0 1.66-1.34 3-3 3L12 18.94z"/></svg>185 WhatsApp186 </a>187 </div>188 <div class="source-code">189 <a href="https://github.com/Nauvalunesa/Apiytdlp" target="_blank">190 <svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12c0 4.42 2.87 8.17 6.84 9.54.5.09.68-.22.68-.49V21c-2.78.6-5.67-1.34-5.67-1.34-.55-1.92-1.33-2.43-1.33-2.43-1.08-.74.08-.72.08-.72 1.2.08 1.84 1.24 1.84 1.24 1.07 1.81 2.8 1.3 3.49 1 .06-.49.42-.83.76-1.01-2.66-.3-5.46-1.33-5.46-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.12-3.17 0 0 1.01-.32 3.3 1.23-.96-.3-1.98-.46-3-.46 0 0 2.71.9 5.26 2.29 1.54-.21 3.09-.32 4.62-.32.4 1.56 1.6 2.29 3.3 1.23.66 1.65.25 2.87.12 3.17.77.84 1.24 1.91 1.24 3.22 0 4.61-2.8 5.63-5.47 5.92.42.36.81.98.81 1.63v2.24c0 .27.18.59.69.49C19.13 20.17 22 16.42 22 12c0-5.53-4.47-10-10-10z"/></svg>191 Source Code on GitHub192 </a>193 </div>194 </div>195 196 <script>197 const backgroundAnimation = document.getElementById('backgroundAnimation');198b const numberOfParticles = 15;199 200 function createParticle() {201 const particle = document.createElement('div');202 particle.classList.add('particle');203 const size = Math.random() * 20 + 8;204 particle.style.width = `${size}px`;205 particle.style.height = `${size}px`;206 particle.style.left = `${Math.random() * 100}vw`;207 particle.style.top = `${Math.random() * 100}vh`;208 particle.style.animationDelay = `${Math.random() * 3}s`;209 backgroundAnimation.appendChild(particle);210 211 particle.addEventListener('animationiteration', () => {212 particle.remove();213 createParticle();214 });215 }216 217 for (let i = 0; i < numberOfParticles; i++) {218 createParticle();219 }220 </script>221</body>222</html>223