<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HireVibe | Premium Job Portal</title>
<style>
:root {
--primary: #0a66c2;
--primary-dark: #004182;
--bg: #f4f7fb;
--card-bg: #ffffff;
--text: #333333;
--text-light: #666666;
--shadow: 0 10px 30px rgba(0,0,0,0.08);
--border-radius: 12px;
--footer-bg: #0f172a;
--whatsapp: #25d366;
}
.dark-mode {
--bg: #0f172a;
--card-bg: #1e293b;
--text: #f1f5f9;
--text-light: #94a3b8;
--shadow: 0 10px 30px rgba(0,0,0,0.3);
--footer-bg: #020617;
}
* { box-sizing: border-box; transition: background 0.3s, color 0.3s; }
body { margin: 0; font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
/* ===== WHATSAPP FLOATING BUTTON ===== */
.whatsapp-float {
position: fixed;
bottom: 30px;
right: 30px;
background-color: var(--whatsapp);
color: white;
width: 60px;
height: 60px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
box-shadow: 2px 5px 15px rgba(0,0,0,0.3);
z-index: 10000;
cursor: pointer;
animation: pulse 2s infinite;
}
.whatsapp-float:hover { transform: scale(1.1); background-color: #128c7e; }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
/* ===== HEADER ===== */
header {
background: var(--card-bg);
padding: 1rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow);
}
header h2 { color: var(--primary); margin: 0; font-weight: 800; }
header nav a { color: var(--text); margin-left: 20px; font-weight: 500; font-size: 14px; }
.toggle-btn { cursor: pointer; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--primary); background: transparent; color: var(--primary); font-size: 1.1rem;}
/* ===== AD SPACES ===== */
.ad-top { text-align: center; padding: 10px 0; background: var(--bg); }
.ad-sidebar { position: sticky; top: 100px; margin-bottom: 20px; text-align: center; }
.ad-inline { grid-column: 1 / -1; text-align: center; margin: 20px 0; }
/* ===== HERO ===== */
.hero {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff;
padding: 60px 20px;
text-align: center;
}
.search-container {
max-width: 800px;
margin: 20px auto 0;
background: #fff;
padding: 8px;
border-radius: 50px;
display: flex;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.search-container input { flex: 1; border: none; padding: 12px 20px; outline: none; font-size: 16px; border-radius: 30px; }
.search-container button { background: var(--primary); color: white; border: none; padding: 12px 25px; border-radius: 30px; cursor: pointer; font-weight: 600; }
/* ===== LAYOUT ===== */
.page-container {
display: grid;
grid-template-columns: 160px 1fr 160px;
max-width: 1400px;
margin: 40px auto;
gap: 25px;
padding: 0 20px;
}
.category-chips { display: flex; justify-content: center; gap: 10px; margin: -25px auto 30px; flex-wrap: wrap; z-index: 10; position: relative; }
.chip { background: var(--card-bg); padding: 10px 20px; border-radius: 30px; box-shadow: var(--shadow); cursor: pointer; font-size: 14px; font-weight: 600; }
.chip.active { background: var(--primary); color: white; }
.jobs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.job-card { background: var(--card-bg); padding: 20px; border-radius: var(--border-radius); box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,0.05); }
.job-card h3 { margin: 10px 0; font-size: 18px; color: var(--text); }
.job-card .meta { font-size: 11px; color: var(--primary); font-weight: 700; text-transform: uppercase; }
.apply-btn { display: block; text-align: center; background: var(--primary); color: white; padding: 10px; border-radius: 8px; margin-top: 15px; font-weight: 600; }
/* ===== FOOTER ===== */
footer { background: var(--footer-bg); color: #cbd5e1; padding: 60px 5% 20px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto; }
.footer-col h4 { color: #fff; margin-bottom: 20px; font-size: 18px; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 12px; font-size: 14px; }
.footer-col ul li a:hover { color: var(--primary); padding-left: 5px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding-top: 20px; text-align: center; font-size: 13px; }
@media(max-width: 1024px) {
.page-container { grid-template-columns: 1fr; }
.left-ad, .right-ad { display: none; }
.whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 25px; }
}
</style>
</head>
<body>
<!-- WHATSAPP FLOATING ICON (Replace PHONE with your number) -->
<a href="https://wa.me/923000000000?text=Hi%20HireVibe!%20I%20want%20to%20request%20a%20job%20posting%20on%20your%20website.%20Please%20let%20me%20know%20the%20process." class="whatsapp-float" target="_blank">
<svg width="35" height="35" fill="white" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.319 1.592 5.448 0 9.886-4.438 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.735-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg>
</a>
<!-- ADSTERRA: Top Banner -->
<div class="ad-top">
<!-- Paste Adsterra 728x90 script here -->
<div style="background:#eee; height:90px; width:728px; margin:auto; line-height:90px; color:#666; border:1px dashed #ccc;">Top Banner Ad (728x90)</div>
</div>
<header>
<h2>HireVibe</h2>
<nav>
<a href="#">Jobs</a>
<!-- WhatsApp direct link for "Post Job" -->
<a href="https://wa.me/923000000000?text=Hi!%20I%20want%20to%20post%20a%20job." target="_blank" style="color:var(--primary); font-weight:bold;">Post Job ↗</a>
<button class="toggle-btn" onclick="toggleDark()" id="darkBtn">🌙</button>
</nav>
</header>
<section class="hero">
<h1>Find Your Dream Career</h1>
<p>Daily updates on Call Center, Bank, and IT Jobs</p>
<div class="search-container">
<input id="searchJob" type="text" placeholder="Job title...">
<input id="searchLoc" type="text" placeholder="Location">
<button onclick="filterSearch()">Search</button>
</div>
</section>
<div class="category-chips">
<div class="chip active" onclick="filterJobs('all', this)">All</div>
<div class="chip" onclick="filterJobs('call', this)">Call Center</div>
<div class="chip" onclick="filterJobs('bank', this)">Banking</div>
<div class="chip" onclick="filterJobs('it', this)">Tech/IT</div>
<div class="chip" onclick="filterJobs('gov', this)">Government</div>
</div>
<main class="page-container">
<aside class="left-ad ad-sidebar">
<!-- Paste Adsterra 160x600 script here -->
<div style="background:#eee; height:600px; width:160px; margin:auto; line-height:600px; color:#666; border:1px dashed #ccc;">Sidebar Ad</div>
</aside>
<section>
<div class="jobs-grid" id="jobs">
<!-- Jobs injected here -->
</div>
<div class="ad-inline">
<!-- Paste Adsterra Native script here -->
<div style="background:#eee; height:250px; width:100%; max-width:600px; margin:auto; line-height:250px; color:#666; border:1px dashed #ccc;">Inline Native Ad</div>
</div>
</section>
<aside class="right-ad ad-sidebar">
<!-- Paste Adsterra 160x600 script here -->
<div style="background:#eee; height:600px; width:160px; margin:auto; line-height:600px; color:#666; border:1px dashed #ccc;">Sidebar Ad</div>
</aside>
</main>
<footer>
<div class="footer-grid">
<div class="footer-col">
<h4>HireVibe</h4>
<p style="font-size:14px">The leading job portal for freshers and professionals. We provide the latest updates from top industries including Banking, BPO, and IT sectors.</p>
</div>
<div class="footer-col">
<h4>Popular Categories</h4>
<ul>
<li><a href="#" onclick="filterJobs('call')">Call Center Jobs</a></li>
<li><a href="#" onclick="filterJobs('bank')">Banking Careers</a></li>
<li><a href="#" onclick="filterJobs('it')">Software Engineering</a></li>
<li><a href="#" onclick="filterJobs('gov')">Government Jobs</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Employer Services</h4>
<ul>
<!-- WhatsApp Request Link -->
<li><a href="https://wa.me/923000000000?text=Job%20Posting%20Request" target="_blank" style="color:var(--whatsapp); font-weight:bold;">Request Job Add (WhatsApp)</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Stay Updated</h4>
<p style="font-size:13px">Join 10,000+ job seekers.</p>
<input type="email" placeholder="Your Email" style="width:100%; padding:10px; border-radius:5px; border:none; margin-top:10px;">
</div>
</div>
<div class="footer-bottom">
© 2025 HireVibe Portal. All rights reserved.
</div>
</footer>
<script>
let jobs = [];
let filteredJobs = [];
let currentIndex = 0;
const loadCount = 8;
const demoData = [
{ title: "Customer Support Executive", company: "Ibex", type: "call", date: "Today", desc: "Urgent hiring for US campaign. Night shifts.", link: "#" },
{ title: "Management Trainee Officer", company: "HBL Bank", type: "bank", date: "Yesterday", desc: "Fresh graduates encouraged to apply.", link: "#" },
{ title: "React Native Developer", company: "Systems Ltd", type: "it", date: "2 days ago", desc: "Remote work available. 2 years experience.", link: "#" },
{ title: "Data Entry Operator", company: "FBR", type: "gov", date: "1 week ago", desc: "Government sector contract based job.", link: "#" }
];
async function init() {
try {
const res = await fetch("YOUR_GOOGLE_SHEET_URL");
jobs = await res.json();
} catch (e) {
jobs = demoData;
}
filteredJobs = jobs;
renderJobs(true);
}
function renderJobs(reset = false) {
const container = document.getElementById('jobs');
if (reset) { container.innerHTML = ''; currentIndex = 0; }
const slice = filteredJobs.slice(currentIndex, currentIndex + loadCount);
slice.forEach(j => {
container.insertAdjacentHTML('beforeend', `
<div class="job-card">
<div class="meta">${j.company} • ${j.date}</div>
<h3>${j.title}</h3>
<p>${j.desc}</p>
<a href="${j.link}" class="apply-btn">Apply Now</a>
</div>
`);
});
currentIndex += slice.length;
}
function filterJobs(type, el) {
if(el) {
document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
el.classList.add('active');
}
filteredJobs = type === 'all' ? jobs : jobs.filter(j => j.type === type);
renderJobs(true);
}
function filterSearch() {
const k = document.getElementById('searchJob').value.toLowerCase();
const l = document.getElementById('searchLoc').value.toLowerCase();
filteredJobs = jobs.filter(j =>
(j.title.toLowerCase().includes(k) || j.desc.toLowerCase().includes(k)) &&
(j.company.toLowerCase().includes(l))
);
renderJobs(true);
}
function toggleDark() {
document.body.classList.toggle('dark-mode');
const isDark = document.body.classList.contains('dark-mode');
document.getElementById('darkBtn').textContent = isDark ? '☀️' : '🌙';
}
window.onscroll = () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 800) {
if (currentIndex < filteredJobs.length) renderJobs();
}
};
init();
</script>
</body>
</html>
0 Comments