html code for something

-----------------------------------------------------------------------
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HR Recruiter Pro | Pranav Shelke</title>

<script src="https://cdn.tailwindcss.com"></script>

<script>

tailwind.config = {

darkMode: 'class',

}

</script>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>

body {

font-family: 'Inter', sans-serif;

position: relative;

min-height: 100vh;

}

/* Background Image with Reduced Blur */

body::before {

content: "";

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-image: url('https://media.licdn.com/dms/image/v2/D560BAQGD6VXF5i4IsA/company-logo_200_200/company-logo_200_200/0/1694499606054?e=2147483647&v=beta&t=r2qWM7BhHVv9D1ywAhiUCDar_LgDw0Jd8UAT5GM0df0');

background-size: cover;

background-position: center;

background-attachment: fixed;

filter: blur(1px); /* Reduced Blur */

opacity: 0.18; /* Slightly higher opacity for visibility */

z-index: -1;

}

html.dark body::before {

opacity: 0.1;

filter: blur(1px) grayscale(30%);

}

.glass-card {

background: rgba(255, 255, 255, 0.9);

backdrop-filter: blur(4px); /* Reduced blur for the cards too */

border: 1px solid rgba(255, 255, 255, 0.4);

}

html.dark .glass-card {

background: rgba(15, 23, 42, 0.85);

border: 1px solid rgba(255, 255, 255, 0.05);

}

.dot { transition: all 0.3s ease-in-out; }

input:checked ~ .dot { transform: translateX(100%); }

</style>

</head>

<body class="bg-slate-50 dark:bg-slate-950 flex flex-col transition-colors duration-300">

<div class="max-w-5xl mx-auto w-full px-4 py-8 flex-grow z-10">

<div class="flex flex-col md:flex-row justify-between items-center mb-10 gap-6">

<div>

<h1 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight flex items-center gap-3">

<span class="bg-blue-600 p-2 rounded-xl shadow-lg shadow-blue-500/30">

<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">

</svg>

</span>

Recruiter Match Engine

</h1>

<p class="text-slate-600 dark:text-slate-400 mt-2 font-semibold">Smart Placement Directory</p>

</div>

<div class="flex items-center gap-3 glass-card p-2 px-4 rounded-full shadow-sm">

<span class="text-[10px] font-bold uppercase text-slate-500">Light</span>

<label for="themeToggle" class="flex items-center cursor-pointer">

<div class="relative">

<input type="checkbox" id="themeToggle" class="sr-only" onchange="toggleDarkMode()">

<div class="block bg-slate-300 dark:bg-slate-600 w-12 h-7 rounded-full transition"></div>

<div class="dot absolute left-1 top-1 bg-white w-5 h-5 rounded-full shadow transition"></div>

</div>

</label>

<span class="text-[10px] font-bold uppercase text-slate-500">Dark</span>

</div>

<div class="glass-card p-3 rounded-2xl shadow-xl mb-2">

<div class="relative flex items-center group">

<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">

<svg class="h-6 w-6 text-slate-400 group-focus-within:text-blue-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />

</svg>

</div>

<input type="text" id="searchInput" onkeyup="filterData()"

autofocus

placeholder="Search candidate location (e.g. Kalyan, Vashi, Malad)..."

class="block w-full pl-14 pr-6 py-5 bg-transparent border-none focus:ring-0 text-slate-800 dark:text-slate-100 text-xl placeholder-slate-400 outline-none">

</div>

<div class="px-4 mb-8">

<span class="text-sm font-bold text-blue-700 dark:text-blue-400 bg-blue-100/50 dark:bg-blue-900/40 px-4 py-1.5 rounded-full border border-blue-200 dark:border-blue-800">

Total Matches Found: <span id="companyCount">0</span>

</span>

</div>

<div class="glass-card rounded-2xl shadow-lg overflow-hidden border border-white/20">

<div class="overflow-x-auto">

<table class="w-full text-left">

<thead>

<tr class="bg-slate-100/50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">

<th class="px-8 py-5 text-[11px] font-bold text-slate-500 uppercase tracking-[0.2em]">Work Hub</th>

<th class="px-8 py-5 text-[11px] font-bold text-slate-500 uppercase tracking-[0.2em]">Hiring Companies</th>

<th class="px-8 py-5 text-[11px] font-bold text-slate-500 uppercase tracking-[0.2em]">Nearby Match Areas</th>

</tr>

</thead>

<tbody id="tableBody" class="divide-y divide-slate-200 dark:divide-slate-700"></tbody>

</table>

</div>

<div id="noResults" class="hidden py-24 text-center">

<p class="text-slate-500 dark:text-slate-400 text-lg font-medium italic">No matches found.</p>

</div>

<footer class="py-10 border-t border-slate-200 dark:border-slate-800 glass-card mt-auto transition-colors">

<div class="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center px-6 gap-6">

<p class="text-slate-600 dark:text-slate-400 text-sm font-medium italic">Empowering Recruiters Everywhere.</p>

<div class="flex items-center gap-3">

<span class="text-slate-500 dark:text-slate-500 text-xs uppercase font-bold tracking-widest">Developed by</span>

<a href="https://www.linkedin.com/in/pranav-shelke-54ab28388/" class="bg-slate-900 dark:bg-blue-600 text-white px-5 py-2 rounded-lg text-sm font-bold shadow-md">Pranav Shelke</a>

<a href="https://github.com/pranav767yumm" class="bg-slate-900 dark:bg-blue-600 text-white px-5 py-2 rounded-lg text-sm font-bold shadow-md">Github</a>

</div>

</footer>

<script>

const companyData = [

{ loc: "Thane", names: "Qconnect-ETPL Tower Thane / Eureka / Qconnect-Ashar IT Park", nearby: "Titwala, Ambivli, Shahad, Kalyan, Diva, Dombivli, Kurla, Ambernath, Badlapur, Vikhroli, Mumbra, Kalwa, Airoli, Ghatkopar, Bhandup, Bhiwandi" },

{ loc: "Airoli", names: "Qconnect-Reliable Tech Park / Reliable Space / Reliable Plaza", nearby: "Thane, Ghansoli, Rabale, Koparkhairane, Vashi, Airoli" },

{ loc: "Ghansoli", names: "Finmech / Altruist", nearby: "Thane, Ghansoli, Rabale, Koparkhairane, Vashi, Airoli" },

{ loc: "Rabale", names: "Qconnect", nearby: "Thane, Ghansoli, Rabale, Koparkhairane, Vashi, Airoli" },

{ loc: "Turbhe", names: "One Point One Solutions / Qconnect", nearby: "Thane, Ghansoli, Rabale, Koparkhairane, Vashi, Airoli, Sanpada, Juinagar, Seawoods, Belapur, Govandi, Chembur, Mankhurd" },

{ loc: "Vashi", names: "ICICI Lombard", nearby: "Thane, Ghansoli, Rabale, Koparkhairane, Vashi, Airoli, Sanpada, Juinagar, Seawoods, Belapur, Panvel, Kamothe, Ulwe" },

{ loc: "Malad", names: "Call to Connect / Teleperformance / ICICI Lombard", nearby: "Borivali, Kandivali, Mira-Bhayandar, Goregaon, Bandra, Jogeshwari, Dahisar, Nalasopara, Santacruz, Vile-Parle" },

{ loc: "Virar", names: "Call to Connect", nearby: "Vasai, Virar, Palghar, Nalasopara, Naigaon, Vasai Road, Bhayander" },

{ loc: "Sakinaka", names: "Athena", nearby: "Powai, Chandivali, Ghatkopar, Sion, Kurla, Kanjurmarg, Dadar, Wadala, Subhash Nagar, Chakala, Airport Road" },

{ loc: "Chandivali", names: "Call to Connect", nearby: "Powai, Chandivali, Ghatkopar, Sion, Kurla, Kanjurmarg, Dadar, Wadala" },

{ loc: "Kanjurmarg", names: "Reliable Space", nearby: "Titwala, Ambivli, Shahad, Kalyan, Diva, Dombivli, Kurla, Ambernath, Badlapur, Vikhroli, Mumbra, Kalwa, Airoli, Ghatkopar, Bhandup" },

{ loc: "Palava", names: "Qconnect", nearby: "Titwala, Ambivli, Shahad, Kalyan, Diva, Dombivli, Kurla, Ambernath, Badlapur, Vikhroli, Mumbra, Kalwa, Airoli, Ghatkopar, Bhandup" }

];

function toggleDarkMode() {

document.documentElement.classList.toggle('dark', document.getElementById('themeToggle').checked);

}

function renderRows(data, highlight = "") {

const tbody = document.getElementById('tableBody');

const noResults = document.getElementById('noResults');

const countEl = document.getElementById('companyCount');

countEl.innerText = data.length;

if (data.length === 0) {

tbody.innerHTML = '';

noResults.classList.remove('hidden');

return;

}

noResults.classList.add('hidden');

tbody.innerHTML = data.map(item => {

let nearbyHTML = item.nearby;

if(highlight.length > 2) {

const reg = new RegExp(`(${highlight})`, 'gi');

nearbyHTML = item.nearby.replace(reg, `<span class="bg-yellow-200 dark:bg-blue-800/80 text-blue-900 dark:text-blue-100 font-bold px-1 rounded">$1</span>`);

}

return `

<tr class="hover:bg-white/50 dark:hover:bg-slate-800/40 transition-colors">

<td class="px-8 py-6 align-top">

<span class="text-xs font-bold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 px-3 py-1.5 rounded-lg border border-blue-200 dark:border-blue-800">${item.loc}</span>

</td>

<td class="px-8 py-6 align-top">

<div class="text-sm font-semibold text-slate-800 dark:text-slate-200">${item.names}</div>

</td>

<td class="px-8 py-6 align-top">

<div class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed">${nearbyHTML}</div>

</td>

</tr>

`}).join('');

}

function filterData() {

const query = document.getElementById('searchInput').value.trim().toLowerCase();

const filtered = companyData.filter(item =>

item.loc.toLowerCase().includes(query) ||

item.names.toLowerCase().includes(query) ||

item.nearby.toLowerCase().includes(query)

);

renderRows(filtered, query);

}

window.onload = () => renderRows(companyData);

</script>

</body>

</html>

Search This Blog

pranavthinks

html code for something

Popular posts from this blog

links

ATTENTION, PLEASE !!

thinking