Spaces:

suryalokula
/

deepseek

Running

App Files Files Community

suryalokula commited on Apr 2, 2025

Commit

d120441

verified ·

1 Parent(s): e4bcb3e

Add 1 files

Browse files

Files changed (1) hide show

index.html +581 -43

index.html CHANGED Viewed

@@ -1,46 +1,584 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
-        text-align: center;
-      }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
-      }
-      h1 {
-        font-size: 50px;
-      }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
-      }
-      @media screen and (max-width: 640px) {
-        .arrow {
-          display: none;
-        }
-      }
     </style>
-  </head>
-  <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
-    <script></script>
-  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=suryalokula/deepseek" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CareerConnect - Job & Internship Alerts</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        /* Custom animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Pulse animation for notifications */
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
+            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
     </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- Header -->
+    <header class="bg-white shadow-sm sticky top-0 z-10">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-briefcase text-blue-500 text-2xl"></i>
+                <h1 class="text-xl font-bold text-gray-800">CareerConnect</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="notificationBtn" class="relative p-2 rounded-full hover:bg-gray-100">
+                    <i class="fas fa-bell text-gray-600"></i>
+                    <span id="notificationCount" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
+                </button>
+                <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
+                    <i class="fas fa-user-plus mr-2"></i>Sign Up
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-6">
+        <!-- Hero Section -->
+        <section class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl p-6 mb-8 text-white">
+            <div class="max-w-2xl">
+                <h2 class="text-3xl font-bold mb-4">Find Your Dream Job or Internship</h2>
+                <p class="mb-6">Get personalized job and internship notifications based on your skills and preferences.</p>
+                <div class="flex flex-col sm:flex-row gap-3">
+                    <input type="text" placeholder="Job title, keywords" class="flex-grow px-4 py-3 rounded-lg text-gray-800 focus:outline-none">
+                    <input type="text" placeholder="Location" class="flex-grow px-4 py-3 rounded-lg text-gray-800 focus:outline-none">
+                    <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-200">
+                        <i class="fas fa-search mr-2"></i>Search
+                    </button>
+                </div>
+            </div>
+        </section>
+        <!-- Filter Section -->
+        <section class="bg-white rounded-xl shadow-sm p-4 mb-8">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-600">Filter by:</span>
+                    <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300">
+                        <option>All Types</option>
+                        <option>Full-time</option>
+                        <option>Part-time</option>
+                        <option>Internship</option>
+                        <option>Contract</option>
+                    </select>
+                    <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300">
+                        <option>All Industries</option>
+                        <option>Technology</option>
+                        <option>Finance</option>
+                        <option>Healthcare</option>
+                        <option>Education</option>
+                        <option>Marketing</option>
+                    </select>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-600">Sort by:</span>
+                    <select class="border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300">
+                        <option>Most Recent</option>
+                        <option>Relevance</option>
+                        <option>Salary: High to Low</option>
+                        <option>Deadline</option>
+                    </select>
+                </div>
+            </div>
+        </section>
+        <!-- Job Listings -->
+        <section class="mb-8">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold text-gray-800">Latest Opportunities</h2>
+                <div class="flex space-x-2">
+                    <button id="showJobs" class="px-4 py-2 bg-blue-500 text-white rounded-lg">Jobs</button>
+                    <button id="showInternships" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300">Internships</button>
+                </div>
+            </div>
+            <div id="jobListings" class="grid gap-4">
+                <!-- Jobs will be loaded here -->
+            </div>
+            <div id="internshipListings" class="grid gap-4 hidden">
+                <!-- Internships will be loaded here -->
+            </div>
+            <div class="mt-6 text-center">
+                <button class="px-6 py-2 border border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition duration-200">
+                    Load More
+                </button>
+            </div>
+        </section>
+        <!-- Features Section -->
+        <section class="bg-white rounded-xl shadow-sm p-6 mb-8">
+            <h2 class="text-xl font-bold text-gray-800 mb-6">Why Choose CareerConnect?</h2>
+            <div class="grid md:grid-cols-3 gap-6">
+                <div class="bg-blue-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-3">
+                        <div class="bg-blue-100 p-3 rounded-full mr-3">
+                            <i class="fas fa-bell text-blue-500"></i>
+                        </div>
+                        <h3 class="font-semibold">Instant Alerts</h3>
+                    </div>
+                    <p class="text-gray-600">Get real-time notifications for new job postings that match your profile.</p>
+                </div>
+                <div class="bg-purple-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-3">
+                        <div class="bg-purple-100 p-3 rounded-full mr-3">
+                            <i class="fas fa-filter text-purple-500"></i>
+                        </div>
+                        <h3 class="font-semibold">Smart Filters</h3>
+                    </div>
+                    <p class="text-gray-600">Customize your search with advanced filters for location, salary, and more.</p>
+                </div>
+                <div class="bg-green-50 p-4 rounded-lg">
+                    <div class="flex items-center mb-3">
+                        <div class="bg-green-100 p-3 rounded-full mr-3">
+                            <i class="fas fa-chart-line text-green-500"></i>
+                        </div>
+                        <h3 class="font-semibold">Career Growth</h3>
+                    </div>
+                    <p class="text-gray-600">Discover opportunities that align with your long-term career goals.</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Notification Panel (Hidden by default) -->
+    <div id="notificationPanel" class="fixed top-16 right-4 w-80 bg-white rounded-xl shadow-lg z-20 hidden transform transition-all duration-300 ease-in-out">
+        <div class="p-4 border-b border-gray-200 flex justify-between items-center">
+            <h3 class="font-semibold">Notifications</h3>
+            <button id="closeNotifications" class="text-gray-500 hover:text-gray-700">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div id="notificationContent" class="max-h-96 overflow-y-auto">
+            <!-- Notifications will be loaded here -->
+            <div class="p-4 text-center text-gray-500">
+                No new notifications
+            </div>
+        </div>
+        <div class="p-3 border-t border-gray-200 text-center">
+            <button class="text-blue-500 text-sm font-medium hover:text-blue-600">View All</button>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">CareerConnect</h3>
+                    <p class="text-gray-400">Connecting talent with opportunity since 2023.</p>
+                    <div class="flex space-x-4 mt-4">
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">For Job Seekers</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Browse Jobs</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Browse Internships</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Job Alerts</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Career Advice</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">For Employers</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-white">Post a Job</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Post an Internship</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Browse Candidates</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
+                    <ul class="space-y-2">
+                        <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> support@careerconnect.com</li>
+                        <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> +1 (555) 123-4567</li>
+                        <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Career St, San Francisco, CA</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
+                <p>&copy; 2023 CareerConnect. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Sample data for jobs and internships
+        const jobData = [
+            {
+                id: 1,
+                title: "Frontend Developer",
+                company: "TechCorp",
+                location: "San Francisco, CA",
+                type: "Full-time",
+                salary: "$90,000 - $120,000",
+                posted: "2 days ago",
+                description: "We're looking for a skilled Frontend Developer with experience in React and modern JavaScript frameworks.",
+                logo: "💻",
+                urgent: true
+            },
+            {
+                id: 2,
+                title: "UX Designer",
+                company: "DesignHub",
+                location: "Remote",
+                type: "Full-time",
+                salary: "$85,000 - $110,000",
+                posted: "1 week ago",
+                description: "Join our design team to create beautiful and intuitive user experiences for our products.",
+                logo: "🎨",
+                urgent: false
+            },
+            {
+                id: 3,
+                title: "Data Scientist",
+                company: "AnalyticsPro",
+                location: "New York, NY",
+                type: "Full-time",
+                salary: "$100,000 - $140,000",
+                posted: "3 days ago",
+                description: "Work with large datasets to derive insights and build predictive models for our clients.",
+                logo: "📊",
+                urgent: true
+            },
+            {
+                id: 4,
+                title: "Marketing Manager",
+                company: "GrowthMarketing",
+                location: "Chicago, IL",
+                type: "Full-time",
+                salary: "$75,000 - $95,000",
+                posted: "5 days ago",
+                description: "Lead our marketing team and develop strategies to grow our customer base.",
+                logo: "📈",
+                urgent: false
+            }
+        ];
+        const internshipData = [
+            {
+                id: 101,
+                title: "Software Engineering Intern",
+                company: "TechStart",
+                location: "Austin, TX",
+                type: "Internship",
+                duration: "3 months",
+                stipend: "$4,000/month",
+                posted: "1 day ago",
+                description: "Gain hands-on experience working on real projects with our engineering team.",
+                logo: "👨‍💻",
+                deadline: "2023-12-15"
+            },
+            {
+                id: 102,
+                title: "Marketing Intern",
+                company: "BrandBoost",
+                location: "Remote",
+                type: "Internship",
+                duration: "6 months",
+                stipend: "$2,500/month",
+                posted: "4 days ago",
+                description: "Assist with social media campaigns, content creation, and market research.",
+                logo: "📢",
+                deadline: "2023-12-20"
+            },
+            {
+                id: 103,
+                title: "Data Analyst Intern",
+                company: "DataInsights",
+                location: "Boston, MA",
+                type: "Internship",
+                duration: "4 months",
+                stipend: "$3,500/month",
+                posted: "1 week ago",
+                description: "Work with our analytics team to process and visualize data for clients.",
+                logo: "🔍",
+                deadline: "2023-12-10"
+            }
+        ];
+        const notifications = [
+            {
+                id: 1,
+                title: "New job matches your profile",
+                content: "Frontend Developer at TechCorp matches your skills",
+                time: "2 hours ago",
+                read: false,
+                type: "job"
+            },
+            {
+                id: 2,
+                title: "Application deadline reminder",
+                content: "Software Engineering Intern at TechStart closes in 3 days",
+                time: "1 day ago",
+                read: false,
+                type: "internship"
+            },
+            {
+                id: 3,
+                title: "Profile viewed",
+                content: "Your profile was viewed by 3 recruiters this week",
+                time: "3 days ago",
+                read: true,
+                type: "update"
+            }
+        ];
+        // DOM Elements
+        const jobListingsEl = document.getElementById('jobListings');
+        const internshipListingsEl = document.getElementById('internshipListings');
+        const showJobsBtn = document.getElementById('showJobs');
+        const showInternshipsBtn = document.getElementById('showInternships');
+        const notificationBtn = document.getElementById('notificationBtn');
+        const notificationPanel = document.getElementById('notificationPanel');
+        const closeNotificationsBtn = document.getElementById('closeNotifications');
+        const notificationContent = document.getElementById('notificationContent');
+        const notificationCount = document.getElementById('notificationCount');
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', function() {
+            renderJobListings();
+            renderInternshipListings();
+            renderNotifications();
+            updateNotificationCount();
+        });
+        // Render job listings
+        function renderJobListings() {
+            jobListingsEl.innerHTML = '';
+            jobData.forEach(job => {
+                const jobEl = document.createElement('div');
+                jobEl.className = 'bg-white rounded-xl shadow-sm p-6 fade-in hover:shadow-md transition duration-200';
+                jobEl.innerHTML = `
+                    <div class="flex flex-col sm:flex-row sm:items-center gap-4">
+                        <div class="flex-shrink-0 w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center text-2xl">
+                            ${job.logo}
+                        </div>
+                        <div class="flex-grow">
+                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                                <div>
+                                    <h3 class="font-bold text-lg text-gray-800">${job.title}</h3>
+                                    <p class="text-gray-600">${job.company} • ${job.location}</p>
+                                </div>
+                                ${job.urgent ? '<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Urgent</span>' : ''}
+                            </div>
+                            <div class="mt-3 flex flex-wrap gap-2">
+                                <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">${job.type}</span>
+                                <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">${job.salary}</span>
+                                <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Posted ${job.posted}</span>
+                            </div>
+                            <p class="mt-3 text-gray-700">${job.description}</p>
+                            <div class="mt-4 flex justify-between items-center">
+                                <button class="text-blue-500 hover:text-blue-700 font-medium">Save</button>
+                                <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
+                                    Apply Now
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                jobListingsEl.appendChild(jobEl);
+            });
+        }
+        // Render internship listings
+        function renderInternshipListings() {
+            internshipListingsEl.innerHTML = '';
+            internshipData.forEach(internship => {
+                const internshipEl = document.createElement('div');
+                internshipEl.className = 'bg-white rounded-xl shadow-sm p-6 fade-in hover:shadow-md transition duration-200';
+                internshipEl.innerHTML = `
+                    <div class="flex flex-col sm:flex-row sm:items-center gap-4">
+                        <div class="flex-shrink-0 w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center text-2xl">
+                            ${internship.logo}
+                        </div>
+                        <div class="flex-grow">
+                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                                <div>
+                                    <h3 class="font-bold text-lg text-gray-800">${internship.title}</h3>
+                                    <p class="text-gray-600">${internship.company} • ${internship.location}</p>
+                                </div>
+                                <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Deadline: ${formatDate(internship.deadline)}</span>
+                            </div>
+                            <div class="mt-3 flex flex-wrap gap-2">
+                                <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">${internship.type}</span>
+                                <span class="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">${internship.duration}</span>
+                                <span class="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">${internship.stipend}</span>
+                                <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Posted ${internship.posted}</span>
+                            </div>
+                            <p class="mt-3 text-gray-700">${internship.description}</p>
+                            <div class="mt-4 flex justify-between items-center">
+                                <button class="text-blue-500 hover:text-blue-700 font-medium">Save</button>
+                                <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
+                                    Apply Now
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                internshipListingsEl.appendChild(internshipEl);
+            });
+        }
+        // Format date
+        function formatDate(dateString) {
+            const options = { year: 'numeric', month: 'short', day: 'numeric' };
+            return new Date(dateString).toLocaleDateString('en-US', options);
+        }
+        // Toggle between jobs and internships
+        showJobsBtn.addEventListener('click', function() {
+            showJobsBtn.classList.remove('bg-gray-200', 'text-gray-700');
+            showJobsBtn.classList.add('bg-blue-500', 'text-white');
+            showInternshipsBtn.classList.remove('bg-blue-500', 'text-white');
+            showInternshipsBtn.classList.add('bg-gray-200', 'text-gray-700');
+            jobListingsEl.classList.remove('hidden');
+            internshipListingsEl.classList.add('hidden');
+        });
+        showInternshipsBtn.addEventListener('click', function() {
+            showInternshipsBtn.classList.remove('bg-gray-200', 'text-gray-700');
+            showInternshipsBtn.classList.add('bg-blue-500', 'text-white');
+            showJobsBtn.classList.remove('bg-blue-500', 'text-white');
+            showJobsBtn.classList.add('bg-gray-200', 'text-gray-700');
+            internshipListingsEl.classList.remove('hidden');
+            jobListingsEl.classList.add('hidden');
+        });
+        // Notification functionality
+        notificationBtn.addEventListener('click', function() {
+            notificationPanel.classList.toggle('hidden');
+            // Mark notifications as read when panel is opened
+            if (!notificationPanel.classList.contains('hidden')) {
+                notifications.forEach(notification => notification.read = true);
+                updateNotificationCount();
+                renderNotifications();
+            }
+        });
+        closeNotificationsBtn.addEventListener('click', function() {
+            notificationPanel.classList.add('hidden');
+        });
+        // Render notifications
+        function renderNotifications() {
+            notificationContent.innerHTML = '';
+            if (notifications.length === 0) {
+                notificationContent.innerHTML = '<div class="p-4 text-center text-gray-500">No new notifications</div>';
+                return;
+            }
+            notifications.forEach(notification => {
+                const notificationEl = document.createElement('div');
+                notificationEl.className = `p-4 border-b border-gray-100 ${!notification.read ? 'bg-blue-50' : ''}`;
+                notificationEl.innerHTML = `
+                    <div class="flex items-start gap-3">
+                        <div class="mt-1 flex-shrink-0">
+                            ${getNotificationIcon(notification.type)}
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-gray-800">${notification.title}</h4>
+                            <p class="text-sm text-gray-600 mt-1">${notification.content}</p>
+                            <p class="text-xs text-gray-500 mt-2">${notification.time}</p>
+                        </div>
+                    </div>
+                `;
+                notificationContent.appendChild(notificationEl);
+            });
+        }
+        // Get appropriate icon for notification type
+        function getNotificationIcon(type) {
+            switch(type) {
+                case 'job':
+                    return '<i class="fas fa-briefcase text-blue-500"></i>';
+                case 'internship':
+                    return '<i class="fas fa-user-graduate text-purple-500"></i>';
+                default:
+                    return '<i class="fas fa-info-circle text-gray-500"></i>';
+            }
+        }
+        // Update notification badge count
+        function updateNotificationCount() {
+            const unreadCount = notifications.filter(n => !n.read).length;
+            if (unreadCount > 0) {
+                notificationCount.textContent = unreadCount;
+                notificationCount.classList.remove('hidden');
+                notificationBtn.classList.add('pulse');
+            } else {
+                notificationCount.classList.add('hidden');
+                notificationBtn.classList.remove('pulse');
+            }
+        }
+        // Close notification panel when clicking outside
+        document.addEventListener('click', function(event) {
+            if (!notificationPanel.contains(event.target) && !notificationBtn.contains(event.target)) {
+                notificationPanel.classList.add('hidden');
+            }
+        });
+        // Simulate new notification every 30 seconds for demo purposes
+        setInterval(function() {
+            const types = ['job', 'internship', 'update'];
+            const newNotification = {
+                id: Date.now(),
+                title: "New " + (Math.random() > 0.5 ? "job" : "internship") + " available",
+                content: "A new opportunity matches your profile",
+                time: "Just now",
+                read: false,
+                type: types[Math.floor(Math.random() * types.length)]
+            };
+            notifications.unshift(newNotification);
+            updateNotificationCount();
+            renderNotifications();
+        }, 30000);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=suryalokula/deepseek" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>