<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Thumbnail Downloader - Free HD Quality Tool</title>
<meta name="description" content="Download YouTube thumbnails in Full HD, SD, Medium, and Low quality instantly. Free, fast, and responsive tool.">
<link rel="icon" href="🎬">
<style>
/* ---------- VARIABLES ---------- */
:root {
--bg-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
--card-gradient: linear-gradient(145deg, rgba(0,255,255,0.1), rgba(255,0,255,0.08));
--text-color: #ffffff;
--accent: #00fff7;
--accent-hover: #ff00ff;
--secondary: #8a2be2;
--glow: 0 0 15px rgba(0,255,247,0.8), 0 0 30px rgba(0,255,247,0.4);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
/* ---------- RESET & BASE STYLES ---------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Poppins', system-ui, sans-serif;
}
body {
background: var(--bg-gradient);
color: var(--text-color);
min-height: 100vh;
display: flex;
flex-direction: column;
line-height: 1.6;
}
/* ---------- ENHANCED SPLASH SCREEN ---------- */
#splash {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-gradient);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
color: #fff;
pointer-events: none;
overflow: hidden;
}
.splash-container {
text-align: center;
position: relative;
z-index: 2;
padding: 0 1rem;
}
.logo-container {
position: relative;
width: 180px;
height: 180px;
margin: 0 auto 2.5rem;
}
.logo-outer-ring {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid rgba(0, 255, 247, 0.3);
border-radius: 50%;
animation: rotate 8s linear infinite;
}
.logo-middle-ring {
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
border: 2px solid rgba(255, 0, 255, 0.4);
border-radius: 50%;
animation: rotate 6s linear infinite reverse;
}
.logo-inner-ring {
position: absolute;
width: 60%;
height: 60%;
top: 20%;
left: 20%;
border: 2px solid rgba(0, 255, 247, 0.5);
border-radius: 50%;
animation: rotate 4s linear infinite;
}
.logo-icon {
position: absolute;
width: 40%;
height: 40%;
top: 30%;
left: 30%;
background: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
animation: pulse 2s infinite alternate;
box-shadow: 0 0 30px var(--accent);
}
.splash-title {
font-size: clamp(2rem, 8vw, 3rem);
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(90deg, var(--accent), var(--accent-hover), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px rgba(0, 255, 247, 0.5);
animation: textGlow 2s infinite alternate;
letter-spacing: 1px;
}
.splash-subtitle {
font-size: clamp(1rem, 4vw, 1.3rem);
margin-bottom: 2.5rem;
opacity: 0.9;
font-weight: 300;
}
.splash-loader {
width: min(280px, 90%);
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
margin: 0 auto;
overflow: hidden;
position: relative;
box-shadow: 0 0 10px rgba(0, 255, 247, 0.2);
}
.splash-progress {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
border-radius: 10px;
animation: loadingProgress 4s ease-in-out forwards;
box-shadow: 0 0 15px var(--accent);
}
.splash-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--accent);
border-radius: 50%;
opacity: 0;
animation: float 6s infinite linear;
}
/* ---------- ENHANCED HEADER ---------- */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem clamp(1rem, 3vw, 2rem);
position: sticky;
top: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-content {
display: flex;
align-items: center;
gap: 1rem;
}
.logo {
width: 40px;
height: 40px;
background: var(--accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--glow);
}
header h1 {
font-size: clamp(1.1rem, 4vw, 1.5rem);
font-weight: 700;
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.5px;
}
.header-stats {
display: flex;
gap: clamp(0.8rem, 2vw, 1.5rem);
font-size: 0.9rem;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-value {
font-weight: 700;
color: var(--accent);
font-size: clamp(0.9rem, 3vw, 1.1rem);
}
.stat-label {
font-size: clamp(0.7rem, 2.5vw, 0.8rem);
opacity: 0.8;
}
/* ---------- ADVERTISEMENT CONTAINERS ---------- */
.ad-container {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 1rem 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.ad-label {
position: absolute;
top: 5px;
right: 5px;
background: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.7);
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 4px;
z-index: 1;
}
.ad-banner {
width: 100%;
height: 90px;
position: relative;
}
.ad-rectangle {
width: 300px;
height: 250px;
position: relative;
}
.ad-square {
width: 250px;
height: 250px;
position: relative;
}
.ad-large-rectangle {
width: 336px;
height: 280px;
position: relative;
}
.ad-leaderboard {
width: 728px;
height: 90px;
position: relative;
}
.ad-mobile-banner {
width: 320px;
height: 100px;
position: relative;
display: none;
}
/* Ad placeholder styling */
.ad-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, rgba(0, 255, 247, 0.1), rgba(255, 0, 255, 0.1));
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.ad-placeholder i {
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--accent);
}
/* ---------- MAIN LAYOUT ---------- */
main {
display: flex;
gap: 2rem;
max-width: 1400px;
margin: 2rem auto;
padding: 0 clamp(1rem, 3vw, 2rem);
flex: 1;
width: 100%;
}
.content {
flex: 3;
display: flex;
flex-direction: column;
gap: 2rem;
}
.sidebar {
flex: 1;
display: flex;
flex-direction: column;
gap: 2rem;
}
@media (max-width: 1024px) {
.sidebar {
display: none;
}
}
/* ---------- HERO SECTION ---------- */
.hero {
text-align: center;
padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 2rem);
background: var(--card-gradient);
border-radius: 20px;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at top right, rgba(0,255,247,0.1), transparent 70%);
pointer-events: none;
}
.hero h2 {
font-size: clamp(1.8rem, 6vw, 2.5rem);
margin-bottom: 1rem;
font-weight: 700;
}
.hero p {
font-size: clamp(1rem, 3vw, 1.2rem);
max-width: 700px;
margin: 0 auto 2rem;
opacity: 0.9;
}
.features {
display: flex;
justify-content: center;
gap: clamp(1rem, 3vw, 2rem);
flex-wrap: wrap;
margin-top: 2rem;
}
.feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
min-width: 140px;
}
.feature-icon {
width: 50px;
height: 50px;
background: rgba(0, 255, 247, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--accent);
}
/* ---------- ENHANCED INPUT CARD ---------- */
.card {
background: var(--card-gradient);
padding: clamp(1.5rem, 4vw, 2rem);
border-radius: 20px;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.4s, box-shadow 0.4s;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at bottom left, rgba(255,0,255,0.05), transparent 70%);
pointer-events: none;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.card-icon {
width: 50px;
height: 50px;
background: rgba(0, 255, 247, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--accent);
}
.card-title {
font-size: clamp(1.2rem, 4vw, 1.5rem);
font-weight: 600;
}
.input-box {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
input {
flex: 1;
padding: 1rem 1.5rem;
border: none;
border-radius: 12px;
outline: none;
font-size: 1rem;
background: rgba(255, 255, 255, 0.08);
color: #fff;
transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.1);
min-width: 0; /* Important for flexbox shrinking */
}
input:focus {
box-shadow: 0 0 0 2px var(--accent);
background: rgba(255, 255, 255, 0.12);
}
input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.primary-btn {
background: var(--accent);
color: #000;
border: none;
padding: 1rem clamp(1.5rem, 3vw, 2rem);
border-radius: 12px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
box-shadow: var(--glow);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 1rem;
flex-shrink: 0;
}
.primary-btn:hover {
background: var(--accent-hover);
color: #fff;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 0 25px var(--accent-hover), 0 0 50px var(--accent-hover);
}
/* ---------- ERROR STYLING ---------- */
.error {
color: #ff5555;
font-size: 1rem;
margin-top: 1rem;
display: none;
text-align: center;
padding: 1rem;
background: rgba(255, 85, 85, 0.1);
border-radius: 10px;
border: 1px solid rgba(255, 85, 85, 0.3);
}
.error.shake {
animation: shake 0.5s;
}
/* ---------- ENHANCED LOADING ANIMATIONS ---------- */
.loading-box {
display: none;
flex-direction: column;
align-items: center;
margin: 2rem auto;
color: var(--accent);
padding: 2rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
width: 100%;
}
.spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(255, 255, 255, 0.1);
border-top: 4px solid var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 1rem;
position: relative;
box-shadow: 0 0 20px rgba(0, 255, 247, 0.3);
}
.spinner::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 4px solid transparent;
border-top: 4px solid var(--accent-hover);
border-radius: 50%;
animation: spin 1.5s linear infinite;
}
.youtube-loader {
display: flex;
justify-content: center;
align-items: center;
margin: 1.5rem 0;
}
.youtube-loader .dot {
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--accent);
margin: 0 6px;
animation: pulse 1.5s infinite ease-in-out;
box-shadow: 0 0 10px var(--accent);
}
.youtube-loader .dot:nth-child(1) { animation-delay: 0s; }
.youtube-loader .dot:nth-child(2) { animation-delay: 0.2s; }
.youtube-loader .dot:nth-child(3) { animation-delay: 0.4s; }
.youtube-loader .dot:nth-child(4) { animation-delay: 0.6s; }
.loading-text {
font-size: 1.2rem;
text-shadow: 0 0 10px var(--accent);
position: relative;
font-weight: 500;
}
.loading-text::after {
content: '...';
animation: dots 1.5s infinite;
}
/* ---------- ENHANCED RESULT SECTION ---------- */
.result {
text-align: center;
margin-top: 1rem;
display: none;
opacity: 0;
animation: fadeIn 0.8s forwards;
background: var(--card-gradient);
padding: clamp(1.5rem, 4vw, 2rem);
border-radius: 20px;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.result-header {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.result-title {
font-size: clamp(1.4rem, 4vw, 1.8rem);
font-weight: 600;
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.result img {
max-width: 100%;
border-radius: 15px;
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), 0 0 60px rgba(255, 0, 255, 0.2);
transition: transform 0.4s;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.result img:hover {
transform: scale(1.02);
}
.downloads {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.quality-btn {
background: rgba(255, 255, 255, 0.1);
color: var(--text-color);
border: none;
padding: 0.8rem 1.5rem;
border-radius: 10px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 200px;
justify-content: center;
}
.quality-btn:hover {
background: var(--accent);
color: #000;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 255, 247, 0.3);
}
/* ---------- SIDEBAR COMPONENTS ---------- */
.sidebar-card {
background: var(--card-gradient);
padding: 1.5rem;
border-radius: 15px;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-title {
font-size: 1.2rem;
margin-bottom: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tips-list {
list-style: none;
}
.tips-list li {
padding: 0.7rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 0.7rem;
}
.tips-list li:last-child {
border-bottom: none;
}
.tip-icon {
color: var(--accent);
font-size: 1.1rem;
}
/* ---------- FOOTER ---------- */
footer {
text-align: center;
padding: 2rem;
font-size: 1rem;
margin-top: 3rem;
background: rgba(0, 0, 0, 0.4);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.footer-links {
display: flex;
justify-content: center;
gap: clamp(1rem, 3vw, 2rem);
flex-wrap: wrap;
}
.footer-link {
color: var(--text-color);
text-decoration: none;
transition: color 0.3s;
cursor: pointer;
font-weight: 500;
}
.footer-link:hover {
color: var(--accent);
}
/* ---------- POLICY MODAL ---------- */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
backdrop-filter: blur(10px);
padding: 1rem;
}
.modal-content {
background: var(--card-gradient);
padding: clamp(1.5rem, 4vw, 2.5rem);
border-radius: 20px;
max-width: 800px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 0 50px rgba(0, 255, 255, 0.4);
position: relative;
animation: popupAppear 0.5s ease-out;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-close {
position: absolute;
top: 15px;
right: 20px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: var(--text-color);
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
background: var(--accent);
color: #000;
}
.modal-title {
font-size: clamp(1.5rem, 5vw, 2rem);
margin-bottom: 1.5rem;
color: var(--accent);
text-shadow: var(--glow);
text-align: center;
}
.modal-section {
margin-bottom: 2rem;
}
.modal-section h3 {
color: var(--accent);
margin-bottom: 1rem;
font-size: 1.3rem;
}
.modal-section p {
margin-bottom: 1rem;
line-height: 1.6;
}
.modal-section ul {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
.modal-section li {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1.5rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.contact-icon {
color: var(--accent);
font-size: 1.2rem;
width: 30px;
}
/* ---------- PROMOTIONAL POPUP ---------- */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
backdrop-filter: blur(10px);
padding: 1rem;
}
.popup-content {
background: var(--card-gradient);
padding: clamp(1.5rem, 4vw, 2.5rem);
border-radius: 20px;
text-align: center;
max-width: 500px;
width: 90%;
box-shadow: 0 0 50px rgba(0, 255, 255, 0.4);
position: relative;
animation: popupAppear 0.5s ease-out;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.popup-close {
position: absolute;
top: 15px;
right: 20px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: var(--text-color);
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.popup-close:hover {
background: var(--accent);
color: #000;
}
.popup-title {
font-size: clamp(1.5rem, 5vw, 1.8rem);
margin-bottom: 1rem;
color: var(--accent);
text-shadow: var(--glow);
}
.popup-message {
margin-bottom: 2rem;
line-height: 1.6;
font-size: 1.1rem;
}
.popup-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
}
.popup-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 1rem 1.5rem;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s;
color: #000;
background: var(--accent);
box-shadow: var(--glow);
font-size: 1rem;
}
.popup-btn:hover {
background: var(--accent-hover);
color: #fff;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 0 25px var(--accent-hover), 0 0 50px var(--accent-hover);
}
.popup-btn.youtube {
background: #ff0000;
color: white;
}
.popup-btn.telegram {
background: #0088cc;
color: white;
}
/* ---------- MOBILE-SPECIFIC STYLES ---------- */
@media (max-width: 768px) {
/* Header adjustments */
header {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.header-stats {
width: 100%;
justify-content: space-around;
}
/* Main layout adjustments */
main {
margin: 1rem auto;
gap: 1.5rem;
}
/* Input box adjustments */
.input-box {
flex-direction: column;
}
.primary-btn {
width: 100%;
}
/* Feature adjustments */
.features {
gap: 1rem;
}
.feature {
min-width: 120px;
}
/* Quality buttons adjustments */
.quality-btn {
min-width: 100%;
}
/* Card header adjustments */
.card-header {
flex-direction: column;
text-align: center;
gap: 0.8rem;
}
/* Result header adjustments */
.result-header {
flex-direction: column;
gap: 0.8rem;
}
/* Footer adjustments */
footer {
padding: 1.5rem 1rem;
}
.footer-links {
flex-direction: column;
gap: 1rem;
}
/* Ad adjustments for mobile */
.ad-leaderboard, .ad-large-rectangle, .ad-rectangle {
display: none;
}
.ad-mobile-banner {
display: flex;
}
.ad-banner {
height: 70px;
}
}
@media (max-width: 480px) {
.feature {
min-width: 100px;
}
.card-icon, .feature-icon {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.modal-content, .popup-content {
padding: 1.5rem;
}
}
/* ---------- ANIMATIONS ---------- */
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.7; }
}
@keyframes textGlow {
0% { text-shadow: 0 0 10px rgba(0, 255, 247, 0.5); }
100% { text-shadow: 0 0 20px rgba(255, 0, 255, 0.7); }
}
@keyframes loadingProgress {
0% { width: 0%; }
20% { width: 25%; }
40% { width: 50%; }
60% { width: 75%; }
80% { width: 90%; }
100% { width: 100%; }
}
@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes progress {
0% { width: 0%; }
50% { width: 70%; }
100% { width: 100%; }
}
@keyframes dots {
0%, 20% { content: '.'; }
40% { content: '..'; }
60%, 100% { content: '...'; }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@keyframes fadeIn {
to { opacity: 1; }
}
@keyframes popupAppear {
from {
opacity: 0;
transform: scale(0.8) translateY(-20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- Enhanced Splash Screen -->
<div id="splash">
<div class="splash-particles" id="particlesContainer"></div>
<div class="splash-container">
<div class="logo-container">
<div class="logo-outer-ring"></div>
<div class="logo-middle-ring"></div>
<div class="logo-inner-ring"></div>
<div class="logo-icon">
<i class="fas fa-play"></i>
</div>
</div>
<h1 class="splash-title">YouTube Thumbnail Downloader</h1>
<p class="splash-subtitle">Download High Quality Thumbnails Instantly</p>
<div class="splash-loader">
<div class="splash-progress"></div>
</div>
</div>
</div>
<!-- Enhanced Header -->
<header>
<div class="header-content">
<div class="logo">
<i class="fas fa-play"></i>
</div>
<h3>YT Thumbnail Downloader</h3>
</div>
<div class="header-stats">
<div class="stat">
<div class="stat-value">10K+</div>
<div class="stat-label">Downloads</div>
</div>
<div class="stat">
<div class="stat-value">99%</div>
<div class="stat-label">Success Rate</div>
</div>
<div class="stat">
<div class="stat-value">24/7</div>
<div class="stat-label">Available</div>
</div>
</div>
</header>
<!-- Top Banner Ad -->
<div class="ad-container ad-banner">
<div class="ad-label">Advertisement</div>
<div class="ad-placeholder">
<i class="fas fa-ad"></i>
<span><script type="text/javascript">
atOptions = {
'key' : 'dfbda8b203dcf5a313b3a995d760e3a8',
'format' : 'iframe',
'height' : 90,
'width' : 728,
'params' : {}
};
</script>
<script type="text/javascript" src="//geologycontentillegally.com/dfbda8b203dcf5a313b3a995d760e3a8/invoke.js"></script></span>
</div>
</div>
<!-- Mobile Banner Ad -->
<div class="ad-container ad-mobile-banner">
<div class="ad-label">Advertisement</div>
<div class="ad-placeholder">
<i class="fas fa-ad"></i>
<span>Mobile Banner (320x100)</span>
</div>
</div>
<main>
<div class="content">
<!-- Hero Section -->
<section class="hero">
<h2>Download YouTube Thumbnails in HD Quality</h2>
<p>Get high-resolution thumbnails from any YouTube video instantly. Our tool supports multiple quality options and is completely free to use.</p>
<div class="features">
<div class="feature">
<div class="feature-icon">
<i class="fas fa-bolt"></i>
</div>
<div class="feature-text">Instant Download</div>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-hd"></i>
</div>
<div class="feature-text">HD Quality</div>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<div class="feature-text">Safe & Secure</div>
</div>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<div class="feature-text">Mobile Friendly</div>
</div>
</div>
</section>
<!-- Input Card -->
<div class="card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-link"></i>
</div>
<div class="card-title">Paste YouTube URL</div>
</div>
<div class="input-box">
<input type="text" id="videoUrl" placeholder="Paste YouTube video URL here (e.g., https://www.youtube.com/watch?v=...)">
<button class="primary-btn" onclick="getThumbnail()">
<i class="fas fa-download"></i> Get Thumbnail
</button>
</div>
<div class="error" id="errorMsg">
<i class="fas fa-exclamation-circle"></i> Invalid YouTube URL! Please check and try again.
</div>
<!-- Enhanced loading animation -->
<div class="loading-box" id="loading">
<div class="spinner"></div>
<div class="youtube-loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="loading-text">Loading Thumbnail</div>
</div>
</div>
<!-- In-content Rectangle Ad -->
<div class="ad-container ad-rectangle">
<div class="ad-label">Advertisement</div>
<div class="ad-placeholder">
<i class="fas fa-ad"></i>
<span><script type="text/javascript">
atOptions = {
'key' : '0146a0a0f4f0d0678b5b40eb1e211501',
'format' : 'iframe',
'height' : 250,
'width' : 300,
'params' : {}
};
</script>
<script type="text/javascript" src="//geologycontentillegally.com/0146a0a0f4f0d0678b5b40eb1e211501/invoke.js"></script></span>
</div>
</div>
<!-- Result Section -->
<div class="result" id="result">
<div class="result-header">
<div class="card-icon">
<i class="fas fa-image"></i>
</div>
<div class="result-title">Thumbnail Preview</div>
</div>
<img id="thumbPreview" alt="Thumbnail Preview">
<div class="downloads" id="downloadBtns"></div>
</div>
<!-- How It Works Card -->
<div class="card">
<div class="card-header">
<div class="card-icon">
<i class="fas fa-info-circle"></i>
</div>
<div class="card-title">How It Works</div>
</div>
<p>This tool extracts publicly available thumbnails from YouTube videos. We respect copyright and do not host any content. Simply paste the YouTube URL, click "Get Thumbnail", and download your preferred quality.</p>
</div>
</div>
<!-- Sidebar -->
<aside class="sidebar">
<!-- Sidebar Square Ad -->
<div class="ad-container ad-square">
<div class="ad-label">Advertisement</div>
<div class="ad-placeholder">
<i class="fas fa-ad"></i>
<span>Square Ad (250x250)</span>
</div>
</div>
<div class="sidebar-card">
<h3 class="sidebar-title"><i class="fas fa-lightbulb"></i> Pro Tips</h3>
<ul class="tips-list">
<li>
<i class="fas fa-check-circle tip-icon"></i>
<span>Use Full HD for best quality</span>
</li>
<li>
<i class="fas fa-check-circle tip-icon"></i>
<span>Works with all YouTube videos</span>
</li>
<li>
<i class="fas fa-check-circle tip-icon"></i>
<span>No registration required</span>
</li>
<li>
<i class="fas fa-check-circle tip-icon"></i>
<span>Completely free to use</span>
</li>
</ul>
</div>
<!-- Sidebar Large Rectangle Ad -->
<div class="ad-container ad-large-rectangle">
<div class="ad-label">Advertisement</div>
<div class="ad-placeholder">
<i class="fas fa-ad"></i>
<span>Large Rectangle (336x280)</span>
</div>
</div>
<div class="sidebar-card">
<h3 class="sidebar-title"><i class="fas fa-question-circle"></i> FAQ</h3>
<ul class="tips-list">
<li>
<i class="fas fa-arrow-right tip-icon"></i>
<span>Is this tool free? Yes, completely free!</span>
</li>
<li>
<i class="fas fa-arrow-right tip-icon"></i>
<span>Works on mobile? Yes, fully responsive</span>
</li>
<li>
<i class="fas fa-arrow-right tip-icon"></i>
<span>Quality options? 4 different qualities</span>
</li>
</ul>
</div>
</aside>
</main>
<!-- Bottom Leaderboard Ad -->
<div class="ad-container ad-leaderboard">
<div class="ad-label">Advertisement</div>
<div class="ad-placeholder">
<i class="fas fa-ad"></i>
<span>Leaderboard Ad (728x90)</span>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-links">
<a class="footer-link" onclick="showModal('privacy')">Privacy Policy</a>
<a class="footer-link" onclick="showModal('terms')">Terms of Service</a>
<a class="footer-link" onclick="showModal('contact')">Contact</a>
<a class="footer-link" onclick="showModal('about')">About</a>
</div>
<p>© 2025 YouTube Thumbnail Downloader. All rights reserved.</p>
</div>
</footer>
<!-- Policy Modals -->
<div class="modal-overlay" id="privacyModal">
<div class="modal-content">
<button class="modal-close" onclick="closeModal('privacyModal')">×</button>
<h2 class="modal-title">Privacy Policy</h2>
<div class="modal-section">
<h3>Information We Collect</h3>
<p>We value your privacy and are committed to protecting your personal information. Our YouTube Thumbnail Downloader operates with minimal data collection:</p>
<ul>
<li><strong>YouTube URLs:</strong> We process the YouTube video URLs you provide to extract thumbnail images</li>
<li><strong>Usage Analytics:</strong> Anonymous usage data to improve our service</li>
<li><strong>Technical Information:</strong> Browser type, device information, and IP address for security purposes</li>
</ul>
</div>
<div class="modal-section">
<h3>How We Use Your Information</h3>
<p>We use the collected information solely for the purpose of providing our thumbnail download service:</p>
<ul>
<li>To process your YouTube URL and generate thumbnail download links</li>
<li>To improve our service quality and user experience</li>
<li>To ensure the security and proper functioning of our website</li>
</ul>
</div>
<div class="modal-section">
<h3>Data Storage and Security</h3>
<p>We do not permanently store any YouTube URLs or personal information. All processing happens in real-time, and data is immediately discarded after serving your request.</p>
<p>We implement appropriate security measures to protect against unauthorized access, alteration, disclosure, or destruction of your personal information.</p>
</div>
<div class="modal-section">
<h3>Third-Party Services</h3>
<p>Our service interacts with YouTube's servers to fetch thumbnail images. We do not share your data with any other third parties except as required by law.</p>
</div>
<div class="modal-section">
<h3>Your Rights</h3>
<p>You have the right to:</p>
<ul>
<li>Access any personal information we hold about you</li>
<li>Request correction of inaccurate information</li>
<li>Request deletion of your personal data</li>
<li>Object to processing of your personal data</li>
</ul>
</div>
<div class="modal-section">
<h3>Changes to This Policy</h3>
<p>We may update this privacy policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last Updated" date.</p>
<p><strong>Last Updated:</strong> January 1, 2025</p>
</div>
</div>
</div>
<div class="modal-overlay" id="termsModal">
<div class="modal-content">
<button class="modal-close" onclick="closeModal('termsModal')">×</button>
<h2 class="modal-title">Terms of Service</h2>
<div class="modal-section">
<h3>Acceptance of Terms</h3>
<p>By accessing and using the YouTube Thumbnail Downloader, you accept and agree to be bound by the terms and provision of this agreement.</p>
</div>
<div class="modal-section">
<h3>Service Description</h3>
<p>Our service provides users with the ability to download thumbnail images from YouTube videos. The service is provided "as is" and we make no warranties regarding its availability or functionality.</p>
</div>
<div class="modal-section">
<h3>User Responsibilities</h3>
<p>As a user of our service, you agree to:</p>
<ul>
<li>Use the service only for lawful purposes</li>
<li>Respect YouTube's terms of service and copyright policies</li>
<li>Not use the service to download thumbnails for illegal or infringing content</li>
<li>Not attempt to disrupt or compromise the service's security</li>
</ul>
</div>
<div class="modal-section">
<h3>Intellectual Property</h3>
<p>Thumbnail images are the property of their respective owners. Our service merely provides access to publicly available images. You are responsible for ensuring you have the right to use downloaded thumbnails.</p>
</div>
<div class="modal-section">
<h3>Limitation of Liability</h3>
<p>We shall not be held liable for any indirect, incidental, special, consequential or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses.</p>
</div>
<div class="modal-section">
<h3>Service Modifications</h3>
<p>We reserve the right to modify or discontinue, temporarily or permanently, the service with or without notice. We shall not be liable to you or to any third party for any modification, suspension, or discontinuance of the service.</p>
</div>
<div class="modal-section">
<h3>Governing Law</h3>
<p>These terms shall be governed and construed in accordance with the laws of the United States, without regard to its conflict of law provisions.</p>
</div>
</div>
</div>
<div class="modal-overlay" id="contactModal">
<div class="modal-content">
<button class="modal-close" onclick="closeModal('contactModal')">×</button>
<h2 class="modal-title">Contact Us</h2>
<div class="modal-section">
<h3>Get In Touch</h3>
<p>We'd love to hear from you! Whether you have questions, feedback, or need support, please don't hesitate to reach out to us.</p>
</div>
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div>
<strong>Email</strong><br>
support@thumbnaildownloader.com
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fab fa-telegram"></i>
</div>
<div>
<strong>Telegram</strong><br>
@thumbnaildownloader
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fab fa-youtube"></i>
</div>
<div>
<strong>YouTube</strong><br>
YouTube Thumbnail Downloader Channel
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-clock"></i>
</div>
<div>
<strong>Response Time</strong><br>
We typically respond within 24 hours
</div>
</div>
</div>
<div class="modal-section">
<h3>Common Questions</h3>
<p><strong>Q: Is this service really free?</strong><br>
A: Yes, completely free! We don't charge for any features.</p>
<p><strong>Q: Why do thumbnails sometimes not load?</strong><br>
A: This can happen if the video is private, deleted, or if YouTube's servers are temporarily unavailable.</p>
<p><strong>Q: Can I use this on mobile?</strong><br>
A: Absolutely! Our website is fully responsive and works on all devices.</p>
</div>
</div>
</div>
<div class="modal-overlay" id="aboutModal">
<div class="modal-content">
<button class="modal-close" onclick="closeModal('aboutModal')">×</button>
<h2 class="modal-title">About Us</h2>
<div class="modal-section">
<h3>Our Mission</h3>
<p>We created YouTube Thumbnail Downloader to provide a simple, fast, and reliable tool for content creators, marketers, and YouTube enthusiasts to download high-quality thumbnails from any YouTube video.</p>
</div>
<div class="modal-section">
<h3>What We Offer</h3>
<p>Our service stands out because we:</p>
<ul>
<li>Provide multiple quality options (HD, SD, Medium, Low)</li>
<li>Offer instant downloads without registration</li>
<li>Maintain a clean, ad-free user experience</li>
<li>Ensure complete privacy and security</li>
<li>Support all devices with a responsive design</li>
</ul>
</div>
<div class="modal-section">
<h3>Our Values</h3>
<p><strong>Simplicity:</strong> We believe tools should be easy to use and accessible to everyone.</p>
<p><strong>Privacy:</strong> We don't store your data or require personal information.</p>
<p><strong>Reliability:</strong> We maintain high uptime and fast response times.</p>
<p><strong>Innovation:</strong> We continuously improve our service based on user feedback.</p>
</div>
<div class="modal-section">
<h3>Technical Details</h3>
<p>Our service works by extracting publicly available thumbnail images from YouTube's servers. We don't host any content ourselves and respect all copyright laws.</p>
<p>The tool is built with modern web technologies to ensure fast performance and compatibility with all major browsers.</p>
</div>
<div class="modal-section">
<h3>Support Our Work</h3>
<p>If you find our tool helpful, please consider supporting us by:</p>
<ul>
<li>Sharing our website with others</li>
<li>Subscribing to our YouTube channel</li>
<li>Joining our Telegram community</li>
<li>Providing feedback and suggestions</li>
</ul>
</div>
</div>
</div>
<!-- Promotional Popup -->
<div class="popup-overlay" id="popupOverlay">
<div class="popup-content">
<button class="popup-close" id="popupClose">×</button>
<h2 class="popup-title">Support Us! 🙏</h2>
<p class="popup-message">If you find this tool helpful, please consider supporting us by subscribing to our YouTube channel and joining our Telegram community for more useful tools and updates!</p>
<div class="popup-buttons">
<a href="https://www.youtube.com/@h4xhunterdev" target="_blank" class="popup-btn youtube">
<i class="fab fa-youtube"></i> Subscribe to our YouTube Channel
</a>
<a href="https://t.me/h4xhunterdevyt" target="_blank" class="popup-btn telegram">
<i class="fab fa-telegram"></i> Join our Telegram Group
</a>
<a href="https://t.me/h4xhuntertech" target="_blank" class="popup-btn telegram">
<i class="fab fa-telegram"></i> Join our Telegram Channel
</a>
</div>
</div>
</div>
<script>
// Create floating particles for splash screen
function createParticles() {
const container = document.getElementById('particlesContainer');
const particleCount = 30;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// Random position and animation delay
const left = Math.random() * 100;
const delay = Math.random() * 6;
const duration = 4 + Math.random() * 4;
particle.style.left = `${left}%`;
particle.style.animationDelay = `${delay}s`;
particle.style.animationDuration = `${duration}s`;
// Random size
const size = 2 + Math.random() * 4;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Random color (accent or accent-hover)
const color = Math.random() > 0.5 ? 'var(--accent)' : 'var(--accent-hover)';
particle.style.background = color;
container.appendChild(particle);
}
}
// Hide splash screen after 4 seconds
function hideSplashScreen() {
setTimeout(() => {
const splash = document.getElementById('splash');
splash.style.animation = 'fadeOut 1s ease forwards';
// Remove splash screen from DOM after animation completes
setTimeout(() => {
splash.remove();
}, 1000);
}, 4000);
}
// Modal functions
function showModal(type) {
let modalId;
switch(type) {
case 'privacy':
modalId = 'privacyModal';
break;
case 'terms':
modalId = 'termsModal';
break;
case 'contact':
modalId = 'contactModal';
break;
case 'about':
modalId = 'aboutModal';
break;
}
document.getElementById(modalId).style.display = 'flex';
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}
// Initialize splash screen
document.addEventListener('DOMContentLoaded', () => {
createParticles();
hideSplashScreen();
// Set up popup close functionality
const popupOverlay = document.getElementById('popupOverlay');
const popupClose = document.getElementById('popupClose');
popupClose.addEventListener('click', closePopup);
// Close popup when clicking outside the content
popupOverlay.addEventListener('click', function(e) {
if (e.target === popupOverlay) {
closePopup();
}
});
// Close modals when clicking outside
document.querySelectorAll('.modal-overlay').forEach(modal => {
modal.addEventListener('click', function(e) {
if (e.target === modal) {
modal.style.display = 'none';
}
});
});
});
function getThumbnail(){
const url=document.getElementById("videoUrl").value.trim();
const error=document.getElementById("errorMsg");
const result=document.getElementById("result");
const preview=document.getElementById("thumbPreview");
const buttons=document.getElementById("downloadBtns");
const loading=document.getElementById("loading");
error.style.display="none";result.style.display="none";buttons.innerHTML="";
if(!url){showError();return;}
const videoId=extractVideoId(url);
if(!videoId){showError();return;}
loading.style.display="flex";
const qualities={
"Full HD (1280x720)":"maxresdefault.jpg",
"Standard (640x480)":"sddefault.jpg",
"Medium (320x180)":"mqdefault.jpg",
"Low (120x90)":"default.jpg"
};
const hdUrl=`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
preview.src=hdUrl;
preview.onload=()=>{
loading.style.display="none";
result.style.display="block";
for(const [label,file] of Object.entries(qualities)){
const thumbUrl=`https://img.youtube.com/vi/${videoId}/${file}`;
const btn=document.createElement("button");
btn.className = "quality-btn";
btn.innerHTML = `<i class="fas fa-download"></i> ${label}`;
btn.onclick=()=>downloadImage(thumbUrl,`thumbnail_${file}_${videoId}.jpg`);
buttons.appendChild(btn);
}
// Show promotional popup after successful thumbnail load
showPromotionalPopup();
};
preview.onerror=()=>{loading.style.display="none";showError();}
}
function showPromotionalPopup() {
const popupOverlay = document.getElementById('popupOverlay');
// Show the popup - it will stay until user closes it
popupOverlay.style.display = 'flex';
}
function closePopup() {
const popupOverlay = document.getElementById('popupOverlay');
popupOverlay.style.display = 'none';
}
function showError(){
const error=document.getElementById("errorMsg");
error.style.display="block";error.classList.add("shake");
setTimeout(()=>error.classList.remove("shake"),300);
}
function extractVideoId(url){
try{
const patterns=[
/v=([^&]+)/,
/youtu\.be\/([^?]+)/,
/embed\/([^?]+)/,
];
for(const p of patterns){
const match=url.match(p);
if(match)return match[1];
}
return null;
}catch{return null;}
}
async function downloadImage(url,filename){
const res=await fetch(url);
const blob=await res.blob();
const a=document.createElement("a");
a.href=URL.createObjectURL(blob);
a.download=filename;
document.body.appendChild(a);
a.click();
a.remove();
}
document.getElementById("videoUrl").addEventListener("keypress",e=>{
if(e.key==="Enter") getThumbnail();
});
</script>
</body>
</html>
Click Hear To Downloade Button
Social Plugin