<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GigHub | AI-Powered Job & Blog Portal</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome & Google Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-slate-50 font-['Plus_Jakarta_Sans'] text-slate-900">
<!-- Sticky Navigation -->
<nav class="sticky top-0 z-[100] bg-white/80 backdrop-blur-xl border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4 h-20 flex justify-between items-center">
<div class="flex items-center gap-2 cursor-pointer" onclick="navigate('home')">
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
<i class="fas fa-bolt text-white text-xl"></i>
</div>
<span class="text-2xl font-extrabold tracking-tight text-blue-600">GigHub</span>
</div>
<div class="hidden md:flex items-center gap-8 font-semibold text-slate-600">
<a href="javascript:void(0)" onclick="navigate('home')" class="hover:text-blue-600 transition">Home</a>
<a href="javascript:void(0)" onclick="navigate('jobs')" class="hover:text-blue-600 transition">Jobs</a>
<a href="javascript:void(0)" onclick="navigate('blog')" class="hover:text-blue-600 transition">Blog</a>
<a href="javascript:void(0)" onclick="navigate('contact')" class="hover:text-blue-600 transition">Contact</a>
<button onclick="navigate('admin-auth')" class="bg-slate-100 p-2.5 rounded-full hover:bg-slate-200 transition">
<i class="fas fa-lock"></i>
</button>
</div>
<button class="md:hidden text-2xl" onclick="toggleMobileMenu()"><i class="fas fa-bars"></i></button>
</div>
</nav>
<!-- Content Sections -->
<main id="view-container">
<!-- HOME: 3D HERO SECTION -->
<section id="home" class="page active">
<div class="relative h-[85vh] flex items-center overflow-hidden bg-slate-900">
<div id="canvas-container" class="absolute inset-0 z-0 opacity-60"></div>
<div class="relative z-10 max-w-7xl mx-auto px-4 w-full text-center">
<h1 class="text-5xl md:text-8xl font-extrabold text-white mb-6 leading-tight">
Find your dream job <br><span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-400">Powered by AI</span>
</h1>
<p class="text-lg md:text-xl text-slate-300 mb-10 max-w-2xl mx-auto">
GigHub uses advanced client-side matching to connect you with 50,000+ real-time global opportunities.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button onclick="navigate('jobs')" class="px-8 py-4 bg-blue-600 text-white rounded-2xl font-bold text-lg hover:bg-blue-700 transition transform hover:scale-105 shadow-xl">
Explore Jobs <i class="fas fa-arrow-right ml-2 text-sm"></i>
</button>
<button onclick="navigate('about')" class="px-8 py-4 bg-white/10 text-white border border-white/20 rounded-2xl font-bold text-lg hover:bg-white/20 transition backdrop-blur-md">
Our Mission
</button>
</div>
</div>
</div>
</section>
<!-- JOBS: FEED + AI SUGGESTIONS -->
<section id="jobs" class="page py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="mb-12 text-center">
<h2 class="text-4xl font-extrabold mb-4">Global Job Feed</h2>
<p class="text-slate-500">Real-time data from JSearch API with built-in AI match ranking.</p>
</div>
<!-- AI Matching Input -->
<div class="bg-white p-6 rounded-3xl shadow-xl border border-slate-100 mb-12 flex flex-col md:flex-row gap-4 items-center">
<div class="w-full relative">
<i class="fas fa-brain absolute left-4 top-4 text-blue-500"></i>
<input type="text" id="ai-skills-input" placeholder="Type skills (e.g. React, Python, Remote)..." class="w-full pl-12 pr-4 py-3 bg-slate-50 border rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none">
</div>
<button id="job-search-btn" class="w-full md:w-auto px-8 py-3 bg-slate-900 text-white rounded-2xl font-bold hover:bg-black transition whitespace-nowrap">
Update Matches
</button>
</div>
<div id="jobs-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Jobs Injected Here -->
</div>
<div id="jobs-loading" class="hidden text-center py-20">
<div class="inline-block animate-spin text-4xl text-blue-600"><i class="fas fa-circle-notch"></i></div>
</div>
</div>
</section>
<!-- BLOG: FIREBASE CRUD -->
<section id="blog" class="page py-20 px-4 bg-slate-50">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-extrabold text-center mb-12">Career Insights</h2>
<div id="blog-grid" class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Blogs Injected Here -->
</div>
</div>
</section>
<!-- ABOUT & LEGAL -->
<section id="about" class="page py-20 px-4">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-4xl font-extrabold mb-8">Redefining the Job Search</h2>
<p class="text-lg text-slate-600 leading-relaxed mb-12">
GigHub was founded in 2026 to simplify the technical job market. We believe that every developer deserves to find their perfect role without endless scrolling. Our AI logic ranks jobs based on your actual tech stack, ensuring relevance first.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-left">
<div class="p-8 bg-white rounded-3xl shadow-lg">
<h3 class="font-bold text-xl mb-4">Privacy Policy</h3>
<p class="text-sm text-slate-500">We do not store your search history. All AI filtering happens locally on your browser.</p>
</div>
<div class="p-8 bg-white rounded-3xl shadow-lg">
<h3 class="font-bold text-xl mb-4">Terms of Use</h3>
<p class="text-sm text-slate-500">Jobs are pulled from verified third-party providers via JSearch. GigHub is a discovery platform.</p>
</div>
</div>
</div>
</section>
<!-- CONTACT: FORMSPREE -->
<section id="contact" class="page py-20 px-4">
<div class="max-w-2xl mx-auto bg-white rounded-[2.5rem] p-10 shadow-2xl border border-slate-100">
<h2 class="text-3xl font-extrabold mb-6 text-center">Get in Touch</h2>
<form id="contact-form" action="https://formspree.io/f/mykzbdbz" method="POST" class="space-y-4">
<input type="text" name="name" placeholder="Your Name" required class="w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:ring-2 focus:ring-blue-500">
<input type="email" name="_replyto" placeholder="Email Address" required class="w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:ring-2 focus:ring-blue-500">
<textarea name="message" placeholder="How can we help?" rows="4" required class="w-full p-4 bg-slate-50 border rounded-2xl outline-none focus:ring-2 focus:ring-blue-500"></textarea>
<button type="submit" class="w-full py-4 bg-blue-600 text-white rounded-2xl font-bold hover:bg-blue-700 transition">Send Message</button>
<p id="form-msg" class="text-center mt-4 hidden"></p>
</form>
</div>
</section>
<!-- ADMIN AUTH -->
<section id="admin-auth" class="page py-20 px-4">
<div class="max-w-md mx-auto bg-white p-10 rounded-3xl shadow-xl text-center">
<i class="fas fa-shield-halved text-5xl text-blue-600 mb-6"></i>
<h2 class="text-2xl font-bold mb-6">Admin Login</h2>
<input type="password" id="admin-passcode" placeholder="Enter Passcode" class="w-full p-4 border rounded-2xl mb-4 text-center">
<button onclick="handleAdminLogin()" class="w-full py-4 bg-slate-900 text-white rounded-2xl font-bold">Access Dashboard</button>
</div>
</section>
<!-- ADMIN DASHBOARD -->
<section id="admin-dashboard" class="page py-20 px-4">
<div class="max-w-5xl mx-auto">
<div class="flex justify-between items-center mb-10">
<h2 class="text-3xl font-bold">GigHub Admin</h2>
<button onclick="navigate('home')" class="text-red-600 font-bold">Logout</button>
</div>
<div class="bg-white p-8 rounded-3xl shadow-lg border mb-10">
<h3 class="font-bold text-xl mb-6">Create New Blog Post</h3>
<input type="text" id="post-title" placeholder="Article Title" class="w-full p-4 border rounded-2xl mb-4">
<textarea id="post-body" rows="6" placeholder="Article Content..." class="w-full p-4 border rounded-2xl mb-4"></textarea>
<button onclick="publishPost()" class="px-8 py-3 bg-green-600 text-white rounded-2xl font-bold hover:bg-green-700">Publish to Firebase</button>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-slate-200 py-12 px-4 mt-20">
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-10 items-center">
<div>
<span class="text-xl font-extrabold text-blue-600">GigHub</span>
<p class="text-slate-500 text-sm mt-2">© 2026 GigHub — AI Powered Job Platform | Hosted on Cloudflare Pages</p>
</div>
<div class="flex gap-6 justify-center text-slate-400">
<a href="#" class="hover:text-blue-600"><i class="fab fa-linkedin-in text-xl"></i></a>
<a href="#" class="hover:text-blue-600"><i class="fab fa-github text-xl"></i></a>
<a href="#" class="hover:text-blue-600"><i class="fab fa-twitter text-xl"></i></a>
</div>
<div class="text-right">
<button onclick="navigate('about')" class="text-slate-600 hover:text-blue-600 font-semibold text-sm">Privacy & Terms</button>
</div>
</div>
</footer>
<!-- Three.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- Firebase Compat SDKs -->
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
<script src="script.js"></script>
</body>
</html>