USER
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Job Board</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<style>
body {
font-family: "Roboto", sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
background: #ffffff;
border-radius: 10px;
box-shadow: 20px 20px 60px #d9d9d9, -20px -20px 60px #ffffff;
padding: 40px;
max-width: 1000px;
width: 100%;
}
h1 {
text-align: center;
margin-bottom: 30px;
background: linear-gradient(180deg, #904e95, #e96443);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 2em;
font-weight: bold;
}
.filters {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
select,
input[type="search"] {
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: inset 5px 5px 10px #d9d9d9, inset -5px -5px 10px #ffffff;
font-size: 1em;
outline: none;
}
select:focus,
input[type="search"]:focus {
box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
}
.job-listing {
background: #f0f0f0;
border-radius: 10px;
box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
padding: 20px;
margin-bottom: 20px;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.job-listing:hover {
transform: translateY(-5px);
box-shadow: 10px 10px 20px #d9d9d9, -10px -10px 20px #ffffff;
}
.job-title {
font-size: 1.2em;
font-weight: bold;
color: #333;
}
.job-details {
margin-top: 10px;
color: #666;
}
.job-details i {
margin-right: 5px;
}
/* Glow effect on hover */
.job-listing::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
background-size: 400% 400%;
animation: glow 5s ease infinite;
opacity: 0;
transition: opacity 0.2s ease;
z-index: -1;
}
.job-listing:hover::before {
opacity: 0.3;
}
@keyframes glow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#cursor, #trail {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
transition: transform 0.1s ease;
background: linear-gradient(to right, #1a2980, #26d0ce, #514a9d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#cursor {
z-index: 9999;
transform: translate(-50%, -50%);
}
#trail {
z-index: 9998;
opacity: 0.5;
transform: scale(0.8);
}
</style>
</head>
<body>
<div id="cursor"></div>
<div id="trail"></div>
<div class="container">
<h1>Job Listings</h1>
<div class="filters">
<select id="job-category" onchange="filterJobs()">
<option value="all">All Categories</option>
<option value="engineering">Engineering</option>
<option value="data-science">Data Science</option>
<option value="design">Design</option>
<option value="management">Management</option>
<option value="support">Support</option>
</select>
<input
type="search"
id="job-search"
oninput="searchJobs()"
placeholder="Search job titles..."
/>
</div>
<div id="job-listings">
<div class="job-listing" data-category="engineering">
<div class="job-title">Software Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Google</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Mountain View, CA
</div>
</div>
<div class="job-listing" data-category="data-science">
<div class="job-title">Data Scientist</div>
<div class="job-details"><i class="fas fa-building"></i> Amazon</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Seattle, WA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Web Developer</div>
<div class="job-details">
<i class="fas fa-building"></i> Facebook
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Menlo Park, CA
</div>
</div>
<div class="job-listing" data-category="management">
<div class="job-title">Product Manager</div>
<div class="job-details"><i class="fas fa-building"></i> Apple</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Cupertino, CA
</div>
</div>
<div class="job-listing" data-category="design">
<div class="job-title">UI/UX Designer</div>
<div class="job-details">
<i class="fas fa-building"></i> Microsoft
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Redmond, WA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">DevOps Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Netflix</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Los Gatos, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Mobile App Developer</div>
<div class="job-details"><i class="fas fa-building"></i> Uber</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Francisco, CA
</div>
</div>
<div class="job-listing" data-category="support">
<div class="job-title">System Administrator</div>
<div class="job-details"><i class="fas fa-building"></i> IBM</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Armonk, NY
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Network Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Cisco</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Jose, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Cloud Architect</div>
<div class="job-details"><i class="fas fa-building"></i> Oracle</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Redwood City, CA
</div>
</div>
<div class="job-listing" data-category="support">
<div class="job-title">Security Analyst</div>
<div class="job-details">
<i class="fas fa-building"></i> Symantec
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Mountain View, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Full Stack Developer</div>
<div class="job-details">
<i class="fas fa-building"></i> Salesforce
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Francisco, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">QA Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Adobe</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Jose, CA
</div>
</div>
<div class="job-listing" data-category="support">
<div class="job-title">Technical Support Specialist</div>
<div class="job-details"><i class="fas fa-building"></i> Dell</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Round Rock, TX
</div>
</div>
<div class="job-listing" data-category="management">
<div class="job-title">Business Analyst</div>
<div class="job-details"><i class="fas fa-building"></i> Intel</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Santa Clara, CA
</div>
</div>
<div class="job-listing" data-category="data-science">
<div class="job-title">Machine Learning Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Nvidia</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Santa Clara, CA
</div>
</div>
<div class="job-listing" data-category="management">
<div class="job-title">IT Project Manager</div>
<div class="job-details"><i class="fas fa-building"></i> HP</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Palo Alto, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Database Administrator</div>
<div class="job-details"><i class="fas fa-building"></i> Oracle</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Redwood City, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Cybersecurity Specialist</div>
<div class="job-details"><i class="fas fa-building"></i> Google</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Mountain View, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Blockchain Developer</div>
<div class="job-details"><i class="fas fa-building"></i> IBM</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Armonk, NY
</div>
</div>
<div class="job-listing" data-category="data-science">
<div class="job-title">AI Research Scientist</div>
<div class="job-details">
<i class="fas fa-building"></i> Facebook
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Menlo Park, CA
</div>
</div>
<div class="job-listing" data-category="consulting">
<div class="job-title">IT Consultant</div>
<div class="job-details">
<i class="fas fa-building"></i> Accenture
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> New York, NY
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Penetration Tester</div>
<div class="job-details"><i class="fas fa-building"></i> Amazon</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Seattle, WA
</div>
</div>
<div class="job-listing" data-category="data-science">
<div class="job-title">Big Data Engineer</div>
<div class="job-details">
<i class="fas fa-building"></i> Microsoft
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Redmond, WA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Technical Writer</div>
<div class="job-details"><i class="fas fa-building"></i> Oracle</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Redwood City, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Software Architect</div>
<div class="job-details"><i class="fas fa-building"></i> Netflix</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Los Gatos, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Cloud Security Engineer</div>
<div class="job-details">
<i class="fas fa-building"></i> Salesforce
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Francisco, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Embedded Systems Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Tesla</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Palo Alto, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Robotics Engineer</div>
<div class="job-details">
<i class="fas fa-building"></i> Boston Dynamics
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Waltham, MA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Game Developer</div>
<div class="job-details">
<i class="fas fa-building"></i> Electronic Arts
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Redwood City, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Cloud Operations Engineer</div>
<div class="job-details">
<i class="fas fa-building"></i> Amazon Web Services
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Seattle, WA
</div>
</div>
<div class="job-listing" data-category="data-science">
<div class="job-title">Data Analyst</div>
<div class="job-details"><i class="fas fa-building"></i> Twitter</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Francisco, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Systems Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Cisco</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Jose, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Network Administrator</div>
<div class="job-details">
<i class="fas fa-building"></i> Palo Alto Networks
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Santa Clara, CA
</div>
</div>
<div class="job-listing" data-category="management">
<div class="job-title">IT Manager</div>
<div class="job-details"><i class="fas fa-building"></i> IBM</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Armonk, NY
</div>
</div>
<div class="job-listing" data-category="data-science">
<div class="job-title">Business Intelligence Developer</div>
<div class="job-details"><i class="fas fa-building"></i> SAP</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Newtown Square, PA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Java Developer</div>
<div class="job-details"><i class="fas fa-building"></i> Oracle</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Redwood City, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Software Development Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Google</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Mountain View, CA
</div>
</div>
<div class="job-listing" data-category="data-science">
<div class="job-title">Senior Data Engineer</div>
<div class="job-details">
<i class="fas fa-building"></i> LinkedIn
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Sunnyvale, CA
</div>
</div>
<div class="job-listing" data-category="design">
<div class="job-title">Web Designer</div>
<div class="job-details">
<i class="fas fa-building"></i> Squarespace
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> New York, NY
</div>
</div>
<div class="job-listing" data-category="marketing">
<div class="job-title">Digital Marketing Specialist</div>
<div class="job-details"><i class="fas fa-building"></i> HubSpot</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Cambridge, MA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">AI Engineer</div>
<div class="job-details">
<i class="fas fa-building"></i> DeepMind
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> London, UK
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Frontend Developer</div>
<div class="job-details"><i class="fas fa-building"></i> Shopify</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Toronto, ON
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Backend Developer</div>
<div class="job-details"><i class="fas fa-building"></i> Stripe</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Francisco, CA
</div>
</div>
<div class="job-listing" data-category="data-science">
<div class="job-title">Data Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Dropbox</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Francisco, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Software Tester</div>
<div class="job-details">
<i class="fas fa-building"></i> Atlassian
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Sydney, AU
</div>
</div>
<div class="job-listing" data-category="design">
<div class="job-title">Game Designer</div>
<div class="job-details">
<i class="fas fa-building"></i> Blizzard Entertainment
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Irvine, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">IT Security Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> FireEye</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Milpitas, CA
</div>
</div>
<div class="job-listing" data-category="consulting">
<div class="job-title">Systems Analyst</div>
<div class="job-details">
<i class="fas fa-building"></i> Accenture
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Chicago, IL
</div>
</div>
<div class="job-listing" data-category="support">
<div class="job-title">IT Support Specialist</div>
<div class="job-details"><i class="fas fa-building"></i> Zendesk</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Francisco, CA
</div>
</div>
<div class="job-listing" data-category="management">
<div class="job-title">Technical Project Manager</div>
<div class="job-details"><i class="fas fa-building"></i> Google</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Mountain View, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">Infrastructure Engineer</div>
<div class="job-details">
<i class="fas fa-building"></i> LinkedIn
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Sunnyvale, CA
</div>
</div>
<div class="job-listing" data-category="consulting">
<div class="job-title">Cloud Consultant</div>
<div class="job-details">
<i class="fas fa-building"></i> Salesforce
</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> San Francisco, CA
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">QA Tester</div>
<div class="job-details"><i class="fas fa-building"></i> HP</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Palo Alto, CA
</div>
</div>
<div class="job-listing" data-category="consulting">
<div class="job-title">Integration Specialist</div>
<div class="job-details"><i class="fas fa-building"></i> SAP</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Newtown Square, PA
</div>
</div>
<div class="job-listing" data-category="support">
<div class="job-title">Application Support Analyst</div>
<div class="job-details"><i class="fas fa-building"></i> Dell</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Round Rock, TX
</div>
</div>
<div class="job-listing" data-category="engineering">
<div class="job-title">IoT Engineer</div>
<div class="job-details"><i class="fas fa-building"></i> Tesla</div>
<div class="job-details">
<i class="fas fa-map-marker-alt"></i> Palo Alto, CA
</div>
</div>
</div>
</div>
<script>
function filterJobs() {
const category = document.getElementById("job-category").value;
const jobs = document.querySelectorAll(".job-listing");
jobs.forEach((job) => {
if (category === "all" || job.dataset.category === category) {
job.style.display = "block";
} else {
job.style.display = "none";
}
});
}
function searchJobs() {
const searchQuery = document
.getElementById("job-search")
.value.toLowerCase();
const jobs = document.querySelectorAll(".job-listing");
jobs.forEach((job) => {
const title = job
.querySelector(".job-title")
.textContent.toLowerCase();
if (title.includes(searchQuery)) {
job.style.display = "block";
} else {
job.style.display = "none";
}
});
}
document.addEventListener('mousemove', function(e) {
const cursor = document.getElementById('cursor');
const trail = document.getElementById('trail');
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
trail.style.left = `${e.clientX}px`;
trail.style.top = `${e.clientY}px`;
// Move the trail slightly behind the cursor
setTimeout(() => {
trail.style.transform = `translate(${e.clientX - 10}px, ${e.clientY - 10}px) scale(0.8)`;
}, 50);
});
</script>
</body>
</html>
the trail effect is not coming correctly and their is no multiple circles to form trail and add smooth trail and just give me code snippet to add/modify/deleteASSISTANT
To achieve a smoother trail effect with multiple circles, you can create an array of div elements that follow each other, mimicking a trailing effect. Here’s the code snippet to modify and add to your existing JavaScript and CSS:
### CSS Changes:
Replace the existing cursor and trail styles with the following:
```css
#cursor {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(to right, #1a2980, #26d0ce);
position: fixed;
pointer-events: none;
z-index: 10000;
transition: transform 0.05s ease;
}
.trail-circle {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(26, 41, 128, 0.5);
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.1s ease;
}
```
### JS Changes:
Replace the existing JavaScript related to cursor and trail with the following code:
```js
const cursor = document.getElementById('cursor');
const numTrailCircles = 10;
const trailCircles = [];
// Create trail circles and add them to the document body
for (let i = 0; i < numTrailCircles; i++) {
const trailCircle = document.createElement('div');
trailCircle.classList.add('trail-circle');
document.body.appendChild(trailCircle);
trailCircles.push(trailCircle);
}
document.addEventListener('mousemove', function(e) {
const cursorX = e.clientX;
const cursorY = e.clientY;
cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
let offsetX = cursorX;
let offsetY = cursorY;
trailCircles.forEach((circle, index) => {
setTimeout(() => {
circle.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
offsetX -= 2;
offsetY -= 2;
}, index * 50); // Delay each circle slightly
});
});
```
### Explanation
1. **numberOfTrailCircles** is the number of circles in the trail.
2. **trailCircles** is an array to store each trail circle element.
3. For each circle in the trail (determined by `numTrailCircles`), a new `div` element is created, styled with the class `trail-circle`, and appended to the body.
4. **`mousemove` event listener** positions the main cursor element (`#cursor`) and each of the trail circles with a slight delay for a trailing effect.
This should give you a smooth trailing cursor effect with multiple circles forming the trail.