<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Football Player Search 3D</title>
<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=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--neon-green: #00ff88;
--neon-blue: #00d8ff;
--neon-pink: #ff0055;
--gold: #ffd700;
--glass: rgba(15, 23, 42, 0.88);
--border-glow: rgba(0, 255, 136, 0.4);
}
body {
font-family: 'Rajdhani', sans-serif;
background: #030712 url('https://images.unsplash.com/photo-1508098682722-e99c43a406b2?auto=format&fit=crop&w=1920&q=80') no-repeat center center fixed;
background-size: cover;
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
body::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(180deg, rgba(3, 7, 18, 0.88) 0%, rgba(5, 15, 30, 0.95) 100%);
z-index: -1;
}
.container { width: 100%; max-width: 900px; padding: 20px; text-align: center; }
.hero-title h1 {
font-family: 'Orbitron', sans-serif;
font-size: 2.8rem;
background: linear-gradient(45deg, #fff, var(--neon-green), var(--neon-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-top: 20px;
}
.search-wrapper { position: relative; margin: 30px 0; }
.search-input {
width: 100%;
padding: 18px 150px 18px 25px;
font-family: 'Orbitron', sans-serif;
border-radius: 50px;
border: 2px solid var(--neon-green);
background: rgba(15, 23, 42, 0.9);
color: #fff;
outline: none;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}
.search-btn {
position: absolute; right: 8px; top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, var(--neon-green), #00b359);
border: none; padding: 12px 28px;
border-radius: 40px;
font-family: 'Orbitron', sans-serif;
font-weight: 900; cursor: pointer;
box-shadow: 0 0 15px var(--neon-green);
}
.loader {
display: none;
color: var(--neon-blue);
font-size: 1.2rem;
margin: 20px 0;
font-family: 'Orbitron', sans-serif;
}
.player-3d-card {
background: var(--glass);
border: 2px solid var(--border-glow);
border-radius: 25px;
padding: 30px;
display: none;
gap: 30px;
text-align: left;
box-shadow: 0 0 35px rgba(0, 255, 136, 0.2);
backdrop-filter: blur(20px);
}
.avatar-frame {
width: 180px; height: 180px;
border-radius: 50%;
padding: 5px;
background: linear-gradient(45deg, var(--neon-green), var(--neon-blue));
box-shadow: 0 0 25px var(--neon-green);
}
.avatar-frame img {
width: 100%; height: 100%;
border-radius: 50%; object-fit: cover;
}
.cyber-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px; margin-top: 15px;
}
.cyber-stat {
background: rgba(3, 7, 18, 0.8);
border: 1px solid rgba(0, 255, 136, 0.2);
padding: 12px; border-radius: 12px;
}
.cyber-stat label { font-size: 11px; color: #94a3b8; display: block; }
.cyber-stat value { font-family: 'Orbitron', sans-serif; color: var(--neon-green); font-size: 15px; font-weight: 700; }
</style>
</head>
<body>
<div class="container">
<div class="hero-title">
<h1>ग्लोबल फुटबॉल प्लेयर डेटाबेस</h1>
<p>दुनिया के किसी भी फुटबॉल खिलाड़ी को लाइव खोजें</p>
</div>
<div class="search-wrapper">
<input type="text" id="searchInput" class="search-input" placeholder="खिलाड़ी का नाम लिखें (उदा: Messi, Rashford)...">
<button onclick="fetchGlobalPlayer()" class="search-btn">SEARCH</button>
</div>
<div id="loader" class="loader">
<i class="fa-solid fa-spinner fa-spin"></i> इंटरनेट से डेटा खोजा जा रहा है...
</div>
<div id="playerCard" class="player-3d-card">
<div>
<div class="avatar-frame">
<img id="pImg" src="" alt="Player Avatar">
</div>
</div>
<div style="flex: 1;">
<h2 id="pName" style="font-family: 'Orbitron'; font-size: 2rem;">-</h2>
<div id="pTeam" style="color: var(--neon-blue); font-weight: 700; margin-bottom: 15px;">-</div>
<div class="cyber-grid">
<div class="cyber-stat"><label>देश (Country)</label><value id="pCountry">-</value></div>
<div class="cyber-stat"><label>पोजीशन (Position)</label><value id="pPos">-</value></div>
<div class="cyber-stat"><label>टीम/क्लब (Club)</label><value id="pClub">-</value></div>
<div class="cyber-stat"><label>जर्सी नंबर (Jersey)</label><value id="pNumber">-</value></div>
</div>
<p id="pBio" style="margin-top: 15px; font-size: 0.95rem; color: #cbd5e1; max-height: 120px; overflow-y: auto;"></p>
</div>
</div>
</div>
<script>
async function fetchGlobalPlayer() {
const query = document.getElementById('searchInput').value.trim();
const loader = document.getElementById('loader');
const card = document.getElementById('playerCard');
if (!query) return;
loader.style.display = 'block';
card.style.display = 'none';
try {
const response = await fetch(`https://www.thesportsdb.com/api/v1/json/3/searchplayers.php?p=${encodeURIComponent(query)}`);
const data = await response.json();
loader.style.display = 'none';
if (data.player && data.player.length > 0) {
const player = data.player[0];
document.getElementById('pName').innerText = player.strPlayer || "N/A";
document.getElementById('pTeam').innerText = (player.strTeam || "Free Agent") + " / " + (player.strNationality || "");
document.getElementById('pCountry').innerText = player.strNationality || "N/A";
document.getElementById('pPos').innerText = player.strPosition || "N/A";
document.getElementById('pClub').innerText = player.strTeam || "N/A";
document.getElementById('pNumber').innerText = player.strNumber ? `#${player.strNumber}` : "N/A";
document.getElementById('pBio').innerText = player.strDescriptionEN || "विवरण उपलब्ध है।";
document.getElementById('pImg').src = player.strCutout || player.strThumb || "https://images.unsplash.com/photo-1518091043644-c1d4457512c6?auto=format&fit=crop&w=500&q=80";
card.style.display = 'flex';
} else {
alert("खिलाड़ी नहीं मिला! कृपया स्पेलिंग चेक करें।");
}
} catch (error) {
loader.style.display = 'none';
alert("इंटरनेट कनेक्शन चेक करें।");
}
}
document.getElementById('searchInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') fetchGlobalPlayer();
});
</script>
</body>
</html>