huyuanxiang
4 weeks ago
parent
106bf38909
commit
720866e042
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,678 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html class=" overflow-x-hidden" lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
||||||
|
<title>Join Us - TechCorp</title>
|
||||||
|
|
||||||
|
<!-- Google Fonts & Icons -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||||
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Montserrat:wght@400;500;700;800;900&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet"/>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
||||||
|
<!-- AOS Animation Library -->
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
||||||
|
<!-- Tailwind & Config -->
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
"primary": "#13eca4",
|
||||||
|
"background-light": "#f8fcfa",
|
||||||
|
"background-dark": "#10221c",
|
||||||
|
"pearlescent": "#f0f7f5",
|
||||||
|
"silver-accent": "#e2e8f0",
|
||||||
|
"about-us": "#ff6b00"
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
"display": ["Montserrat", "sans-serif"],
|
||||||
|
"sans": ["Montserrat", "sans-serif"],
|
||||||
|
"mono": ["JetBrains Mono", "Montserrat"],
|
||||||
|
"inter": ["Inter", "Montserrat"],
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
"DEFAULT": "0.5rem",
|
||||||
|
"lg": "1rem",
|
||||||
|
"xl": "1.5rem",
|
||||||
|
"2xl": "2rem",
|
||||||
|
"3xl": "3rem",
|
||||||
|
"full": "9999px"
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
|
||||||
|
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
|
||||||
|
'aurora': 'linear-gradient(135deg, rgba(19,236,164,0.1) 0%, rgba(13,166,112,0.05) 50%, rgba(248,252,250,0) 100%)',
|
||||||
|
'mesh': 'radial-gradient(at 40% 20%, rgba(19,236,164,0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(16,34,28,0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(19,236,164,0.05) 0px, transparent 50%)',
|
||||||
|
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
// 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
|
||||||
|
'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
|
||||||
|
'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
|
||||||
|
'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
|
||||||
|
'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.15), 0 0 0 1px rgba(19,236,164,0.3)',
|
||||||
|
'bento-dark': '0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
fadeIn: {
|
||||||
|
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
||||||
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||||
|
},
|
||||||
|
scan: {
|
||||||
|
'0%': { top: '-10%', opacity: '0' },
|
||||||
|
'10%': { opacity: '1' },
|
||||||
|
'90%': { opacity: '1' },
|
||||||
|
'100%': { top: '110%', opacity: '0' },
|
||||||
|
},
|
||||||
|
rotateGlobe: {
|
||||||
|
'0%': { transform: 'rotate(0deg)' },
|
||||||
|
'100%': { transform: 'rotate(360deg)' },
|
||||||
|
},
|
||||||
|
dash: {
|
||||||
|
'0%': { strokeDashoffset: '1000' },
|
||||||
|
'100%': { strokeDashoffset: '0' },
|
||||||
|
},
|
||||||
|
globePulse: {
|
||||||
|
'0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
||||||
|
'50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
|
||||||
|
'100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
||||||
|
},
|
||||||
|
// 高级交互动画
|
||||||
|
pulseGlow: {
|
||||||
|
'0%': { textShadow: '0 0 10px rgba(19, 236, 164, 0.4)' },
|
||||||
|
'100%': { textShadow: '0 0 30px #ff6b00' }
|
||||||
|
},
|
||||||
|
sweep: { '100%': { left: '200%' } },
|
||||||
|
cardFlip: {
|
||||||
|
'0%': { opacity: '0', transform: 'rotateY(-90deg) translateZ(50px)' },
|
||||||
|
'100%': { opacity: '1', transform: 'rotateY(0deg) translateZ(0)' }
|
||||||
|
},
|
||||||
|
floatY: {
|
||||||
|
'0%, 100%': { transform: 'translateY(0)' },
|
||||||
|
'50%': { transform: 'translateY(-15px)' }
|
||||||
|
},
|
||||||
|
textShimmer: {
|
||||||
|
'0%': { backgroundPosition: '0% 50%' },
|
||||||
|
'100%': { backgroundPosition: '100% 50%' },
|
||||||
|
},
|
||||||
|
blobSpin: {
|
||||||
|
'0%': { transform: 'rotate(0deg) scale(1)' },
|
||||||
|
'50%': { transform: 'rotate(180deg) scale(1.1)' },
|
||||||
|
'100%': { transform: 'rotate(360deg) scale(1)' },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'fade-in': 'fadeIn 0.5s ease-out forwards',
|
||||||
|
'scan-slow': 'scan 6s linear infinite',
|
||||||
|
'spin-slow': 'rotateGlobe 60s linear infinite',
|
||||||
|
'dash-flow': 'dash 3s linear infinite',
|
||||||
|
'globe-select': 'globePulse 0.8s ease-out',
|
||||||
|
'pulse-glow': 'pulseGlow 2s infinite alternate',
|
||||||
|
'sweep': 'sweep 3s infinite',
|
||||||
|
'flip-in': 'cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
||||||
|
'float-1': 'floatY 3s ease-in-out infinite',
|
||||||
|
'float-2': 'floatY 3s ease-in-out infinite 1s',
|
||||||
|
'float-3': 'floatY 3s ease-in-out infinite 2s',
|
||||||
|
'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
|
||||||
|
'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Swiper CSS -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||||
|
|
||||||
|
<!-- AOS Animation CSS -->
|
||||||
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
width: 100%;
|
||||||
|
font-family: "Inter", "JetBrains Mono","sans-serif";
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
height: auto;
|
||||||
|
transform: translateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-wrapper {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-scrollbar {
|
||||||
|
background: rgba(0, 0, 0, 0.06) !important;
|
||||||
|
height: 6px !important;
|
||||||
|
border-radius: 999px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.dark .swiper-scrollbar {
|
||||||
|
background: rgba(255, 255, 255, 0.1) !important;
|
||||||
|
}
|
||||||
|
.swiper-scrollbar-drag {
|
||||||
|
background: #2b8cee !important;
|
||||||
|
border-radius: 9999px;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-disabled {
|
||||||
|
opacity: 0.3 !important;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
pointer-events: none;
|
||||||
|
box-shadow: none !important;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
transform: none !important;
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .swiper-button-disabled {
|
||||||
|
opacity: 0.2 !important;
|
||||||
|
background-color: #1f2937 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container:focus-within {
|
||||||
|
box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff), 0 0 0 4px rgba(43, 140, 238, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image-bg {
|
||||||
|
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||||
|
}
|
||||||
|
.group:hover .card-image-bg {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Styles */
|
||||||
|
.modal-overlay {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.modal-overlay.open {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
transform: translateY(20px) scale(0.95);
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
}
|
||||||
|
.modal-overlay.open .modal-container {
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏滚动条但保留功能 */
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.no-scrollbar {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-background-light dark:bg-background-dark text-[#111418] dark:text-white font-display antialiased w-screen overflow-x-hidden">
|
||||||
|
|
||||||
|
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<!-- <header class="sticky top-0 z-40 flex items-center justify-between border-b border-solid border-[#e5e7eb] dark:border-gray-800 bg-white/80 dark:bg-[#101922]/80 backdrop-blur-md px-4 sm:px-6 lg:px-10 py-3 transition-all duration-300">
|
||||||
|
<div class="flex items-center gap-4 text-[#111418] dark:text-white">
|
||||||
|
<div class="size-8 flex items-center justify-center text-primary flex-shrink-0">
|
||||||
|
<span class="material-symbols-outlined text-3xl"></span>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-[#111418] dark:text-white text-lg leading-tight tracking-[-0.015em] truncate">TechCorp</h2>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:flex flex-1 justify-end gap-8">
|
||||||
|
<div class="flex items-center gap-9">
|
||||||
|
<a class="text-[#111418] dark:text-gray-200 text-sm font-medium hover:text-primary transition-colors" href="#">Jobs</a>
|
||||||
|
<a class="text-[#111418] dark:text-gray-200 text-sm font-medium hover:text-primary transition-colors" href="#">Culture</a>
|
||||||
|
<a class="text-[#111418] dark:text-gray-200 text-sm font-medium hover:text-primary transition-colors" href="#">About Us</a>
|
||||||
|
</div>
|
||||||
|
<button class="flex min-w-[84px] items-center justify-center rounded-lg h-10 px-6 bg-primary text-white text-sm hover:bg-blue-600 transition-colors shadow-sm">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="md:hidden p-2 -mr-2 cursor-pointer text-[#111418] dark:text-white">
|
||||||
|
<span class="material-symbols-outlined text-2xl"></span>
|
||||||
|
</div>
|
||||||
|
</header> -->
|
||||||
|
|
||||||
|
<main class="layout-container flex h-full grow flex-col pt-6 sm:pt-10 pb-20 w-full overflow-x-hidden">
|
||||||
|
<div class="w-full flex flex-1 justify-center">
|
||||||
|
<div class="layout-content-container flex flex-col w-full max-w-[1400px] flex-1">
|
||||||
|
|
||||||
|
<!-- Heading & Search Section -->
|
||||||
|
<div class="flex flex-col gap-6 px-4 sm:px-6 lg:px-40 mb-6 sm:mb-8 w-full max-w-[100vw] overflow-hidden">
|
||||||
|
<div class="flex flex-wrap items-end justify-between gap-6">
|
||||||
|
<div class="flex min-w-full md:min-w-[400px] flex-col gap-3 max-w-2xl" data-aos="fade-right" data-aos-duration="1000">
|
||||||
|
<h1 class="text-[#111418] dark:text-white text-4xl md:text-[2.66rem] leading-tight tracking-[-0.033em]">
|
||||||
|
Shape the future <br/><span class="text-primary bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-cyan-400">with us.</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-[#617589] dark:text-gray-400 text-[1rem] leading-normal max-w-lg mt-1 sm:mt-2">
|
||||||
|
We are looking for thinkers, makers, and doers to join our high-energy team.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col sm:flex-row items-end sm:items-center gap-4 w-full sm:w-auto" data-aos="fade-left" data-aos-delay="200">
|
||||||
|
<div class="search-container relative w-full sm:w-64 group transition-all duration-300 rounded-full">
|
||||||
|
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-primary transition-colors"></span>
|
||||||
|
<input id="job-search" type="text" placeholder="Search positions..."
|
||||||
|
class="w-full h-11 sm:h-12 pl-12 pr-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-full text-sm outline-none focus:border-primary dark:focus:border-primary transition-colors text-[#111418] dark:text-white shadow-sm"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hidden sm:flex gap-3">
|
||||||
|
<button class="swiper-button-prev-custom size-12 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-primary/50 text-[#111418] dark:text-white transition-all duration-300 shadow-sm hover:shadow-md active:scale-95 z-10 group cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined group-hover:text-primary transition-colors"></span>
|
||||||
|
</button>
|
||||||
|
<button class="swiper-button-next-custom size-12 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-primary/50 text-[#111418] dark:text-white transition-all duration-300 shadow-sm hover:shadow-md active:scale-95 z-10 group cursor-pointer">
|
||||||
|
<span class="material-symbols-outlined group-hover:text-primary transition-colors"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Job Slider Area -->
|
||||||
|
<div class="relative w-full min-h-[400px]">
|
||||||
|
<div class="swiper mySwiper w-full pb-14 !overflow-visible">
|
||||||
|
<div class="swiper-wrapper" id="jobs-container">
|
||||||
|
<!-- JS will inject slides here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="no-results" class="hidden absolute inset-0 flex flex-col items-center justify-center text-center p-8 z-0 mt-12">
|
||||||
|
<span class="material-symbols-outlined text-5xl sm:text-6xl text-gray-300 dark:text-gray-700 mb-4"></span>
|
||||||
|
<h3 class="text-lg sm:text-xl text-[#111418] dark:text-white">No positions found</h3>
|
||||||
|
<p class="text-sm sm:text-base text-[#617589] dark:text-gray-400 mt-2">Try adjusting your search criteria</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Progress Section -->
|
||||||
|
<div class="w-full flex justify-center px-4 sm:px-6 lg:px-40 mt-4 max-w-[100vw]" data-aos="fade-in" data-aos-delay="500">
|
||||||
|
<div class="w-full flex flex-col gap-4">
|
||||||
|
<div class="flex justify-between items-end">
|
||||||
|
<div class="flex flex-col gap-0.5">
|
||||||
|
<p class="text-[10px] sm:text-xs tracking-[0.15em] text-primary uppercase">Explore</p>
|
||||||
|
<p class="text-[#111418] dark:text-white text-sm sm:text-base ">Open Positions</p>
|
||||||
|
</div>
|
||||||
|
<p class="text-[#617589] dark:text-gray-400 text-sm sm:text-base font-medium tabular-nums font-mono">
|
||||||
|
<span id="slide-current" class="text-[#111418] dark:text-white text-lg">01</span>
|
||||||
|
<span class="mx-1 text-gray-300 dark:text-gray-600">/</span>
|
||||||
|
<span id="slide-total">00</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-full h-1.5 rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden relative">
|
||||||
|
<div class="swiper-scrollbar !static !w-full !h-full !bg-transparent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- [New] Job Detail Modal -->
|
||||||
|
<div id="job-detail-modal" class="modal-overlay fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm p-0 sm:p-4">
|
||||||
|
<div class="absolute inset-0 cursor-pointer" onclick="closeJobModal()"></div>
|
||||||
|
|
||||||
|
<div class="modal-container relative w-full max-w-2xl bg-white dark:bg-[#1a2632] rounded-t-2xl sm:rounded-2xl shadow-2xl flex flex-col max-h-[90vh] sm:max-h-[85vh] border border-white/10 overflow-hidden">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-start justify-between p-6 border-b border-gray-100 dark:border-gray-700 bg-white/50 dark:bg-[#1a2632]/50 backdrop-blur-sm sticky top-0 z-10">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-3 mb-2">
|
||||||
|
<span id="modal-tag" class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary/20 text-primary border border-primary/10">Product</span>
|
||||||
|
<span class="text-xs text-gray-400 font-mono" id="modal-location">Remote</span>
|
||||||
|
</div>
|
||||||
|
<h2 id="modal-title" class="text-2xl text-[#111418] dark:text-white leading-tight">Senior Product Designer</h2>
|
||||||
|
</div>
|
||||||
|
<button onclick="closeJobModal()" class="size-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-xl"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Body (Scrollable) -->
|
||||||
|
<!-- [修复] 添加 ID 'modal-body' 用于 JS 控制 -->
|
||||||
|
<div id="modal-body" class="p-6 overflow-y-auto no-scrollbar flex-1 scroll-smooth">
|
||||||
|
<div class="prose dark:prose-invert max-w-none">
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-lg text-[#111418] dark:text-white mb-2">About the Role</h3>
|
||||||
|
<p id="modal-desc" class="text-[#617589] dark:text-gray-400 text-sm leading-relaxed">
|
||||||
|
Lead design initiatives across our core products...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-lg text-[#111418] dark:text-white mb-2">Key Responsibilities</h3>
|
||||||
|
<ul id="modal-responsibilities" class="list-disc pl-5 text-[#617589] dark:text-gray-400 text-sm leading-relaxed space-y-1"></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-lg text-[#111418] dark:text-white mb-2">Requirements</h3>
|
||||||
|
<ul id="modal-requirements" class="list-disc pl-5 text-[#617589] dark:text-gray-400 text-sm leading-relaxed space-y-1"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<!-- Job Detail Modal Footer (修改部分) -->
|
||||||
|
<div class="p-5 border-t border-gray-100 dark:border-gray-700 bg-gray-50/80 dark:bg-[#151f28]/80 backdrop-blur-md flex flex-col gap-3">
|
||||||
|
<!-- 主按钮 -->
|
||||||
|
<a id="modal-apply-btn" href="#" class="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg h-12 bg-primary hover:bg-blue-600 text-white text-base transition-all shadow-md active:scale-[0.98] group">
|
||||||
|
<span class="material-symbols-outlined"></span>
|
||||||
|
Apply via Email
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 新增：邮箱文本提示 (兜底方案) -->
|
||||||
|
<p class="text-center text-xs text-[#617589] dark:text-gray-400">
|
||||||
|
Or email us directly at
|
||||||
|
<!-- select-all 允许用户点击一次即可全选邮箱 -->
|
||||||
|
<span class="text-[#111418] dark:text-white font-mono font-medium select-all cursor-text hover:text-primary transition-colors" id="email-link">zhoushu@nenghui.com</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scripts -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- Enhanced Data Source ---
|
||||||
|
const jobsData = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Photovoltaic Field Engineer",
|
||||||
|
type: "Engineering",
|
||||||
|
dept: "Eng",
|
||||||
|
location: "Iraq",
|
||||||
|
image: "https://nenghui.com/wp-content/uploads/2026/02/job-1.avif",
|
||||||
|
color: "bg-primary/90 border-white/10 text-white",
|
||||||
|
desc: "",
|
||||||
|
responsibilities: ["Responsible for on-site supervision, installation guidance, and problem-solving for photovoltaic and energy storage projects, ensuring construction complies with design specifications and safety standards.",
|
||||||
|
"Inspect the construction site, coordinate the installation team, and conduct system commissioning and performance testing.",
|
||||||
|
"Collect on-site data and report project progress, quality issues, and customer feedback.",
|
||||||
|
"Provide customer training and technical support to ensure normal system operation and customer satisfaction.",
|
||||||
|
"Responsible for site surveys and technical solution design.",
|
||||||
|
"xResponsible for after-sales troubleshooting."
|
||||||
|
],
|
||||||
|
requirements: [
|
||||||
|
"Full-time college diploma or above, majoring in electrical engineering or related fields, with basic conversational English skills;",
|
||||||
|
"At least 1 year of experience in photovoltaic construction, understanding of photovoltaic construction details, and experience in on-site construction guidance;",
|
||||||
|
"Responsible, meticulous, and with good professional ethics and communication and coordination skills;",
|
||||||
|
"Able to accept long-term relocation to the Middle East; the company provides accommodation and overseas commercial insurance."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
title: "Overseas Sales Manager",
|
||||||
|
type: "Sales",
|
||||||
|
dept: "Sale",
|
||||||
|
location: "ShangHai",
|
||||||
|
image: "https://nenghui.com/wp-content/uploads/2026/02/job-2.avif",
|
||||||
|
color: "bg-primary/90 border-white/10 text-white",
|
||||||
|
desc: "",
|
||||||
|
responsibilities: ["Develop the commercial and industrial energy storage and large-scale energy storage markets in Europe, identify and secure overseas energy storage orders and projects, and achieve company business goals, in accordance with the company's business strategy.",
|
||||||
|
"Travel overseas as arranged by the company and as needed to conduct market research and customer visits, track and evaluate customer creditworthiness and purchasing intentions, and establish and maintain a regional customer resource pool.",
|
||||||
|
"Participate in overseas industry exhibitions and seminars to develop customer resources and expand business channels.",
|
||||||
|
"Assist the company in organizing overseas product launches and promoting brand marketing.",
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
requirements: [
|
||||||
|
"Bachelor's degree or above, with preference given to candidates majoring in international trade, English, or German.",
|
||||||
|
"At least 3 years of experience in the new energy industry trade, with preference given to candidates with experience in electrical, photovoltaic, or lithium battery energy storage related products.",
|
||||||
|
"Fluent in spoken English and proficient in written communication, including international business emails.",
|
||||||
|
"Familiar with various international trade terms and risk control, and proficient in using international social media and foreign trade customer acquisition software.",
|
||||||
|
"Excellent communication and teamwork skills.",
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// id: 2,
|
||||||
|
// title: "Lead Backend Engineer",
|
||||||
|
// type: "Engineering",
|
||||||
|
// dept: "Eng",
|
||||||
|
// location: "San Francisco",
|
||||||
|
// image: "https://images.unsplash.com/photo-1555099962-4199c345e5dd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||||||
|
// color: "bg-emerald-500/20 border-white/10 text-emerald-100",
|
||||||
|
// desc: "Join our backend team to architect scalable systems that handle millions of requests. You will be responsible for the core infrastructure and API development.",
|
||||||
|
// responsibilities: ["Design and implement scalable APIs.", "Optimize database performance and queries.", "Mentor junior engineers and review code."],
|
||||||
|
// requirements: ["Strong proficiency in Python, Go, or Java.", "Experience with distributed systems and microservices.", "Familiarity with AWS or Google Cloud."]
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "Business Development Manager ",
|
||||||
|
type: "Development",
|
||||||
|
dept: "Development",
|
||||||
|
location: "Cambodia",
|
||||||
|
image: "https://nenghui.com/wp-content/uploads/2026/02/job-3.avif",
|
||||||
|
color: "bg-purple-500/90 border-white/10 text-purple-100",
|
||||||
|
desc: "",
|
||||||
|
responsibilities: ["Develop commercial and industrial photovoltaic (PV) projects within the assigned region, establishing strong client relationships, in accordance with the company's business strategy and development requirements.",
|
||||||
|
"Handle all necessary procedures for project approval and grid connection, including preliminary data collection, site visits, and initial assessments of compliance and economic feasibility.",
|
||||||
|
"Establish and improve distribution channels for commercial and industrial PV and energy storage projects within the assigned region, fostering a favorable development environment.",
|
||||||
|
"Maintain relationships with local government/power grid authorities and relevant departments to promote project cooperation."
|
||||||
|
],
|
||||||
|
requirements: ["Bachelor's degree or above, any major, at least 2 years of experience in PV projects; experienced business professionals with large-scale project development experience are preferred.",
|
||||||
|
"Familiar with the local/industry PV market and proficient in the development process of commercial and industrial power plants.",
|
||||||
|
"Strong communication and execution skills, and excellent teamwork ability.",
|
||||||
|
"Keen market insight, existing social or industry client resources, and strong ability to acquire project opportunities/leads are preferred."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// id: 4,
|
||||||
|
// title: "Financing Director/Manager",
|
||||||
|
// type: "Financing",
|
||||||
|
// dept: "Financing",
|
||||||
|
// location: "ShangHai",
|
||||||
|
// image: "https://nenghui.com/wp-content/uploads/2026/02/job-1.avif",
|
||||||
|
// color: "bg-blue-500/90 border-white/10 text-blue-100",
|
||||||
|
// desc: "",
|
||||||
|
// responsibilities: ["Build and deploy machine learning models.", "Perform exploratory data analysis.", "Create data visualizations for stakeholders."],
|
||||||
|
// requirements: ["Master's or PhD in Statistics, CS, or related field.", "Proficiency in Python, R, and SQL.", "Experience with TensorFlow or PyTorch."]
|
||||||
|
// }
|
||||||
|
];
|
||||||
|
const email = 'zhoushu@nenghui.com'
|
||||||
|
const emailLink = document.getElementById('email-link');
|
||||||
|
if (emailLink) {
|
||||||
|
emailLink.innerText = email;
|
||||||
|
}
|
||||||
|
let swiperInstance = null;
|
||||||
|
const container = document.getElementById('jobs-container');
|
||||||
|
const noResultsEl = document.getElementById('no-results');
|
||||||
|
const searchInput = document.getElementById('job-search');
|
||||||
|
|
||||||
|
const modal = document.getElementById('job-detail-modal');
|
||||||
|
|
||||||
|
function openJobModal(jobId) {
|
||||||
|
const job = jobsData.find(j => j.id === jobId);
|
||||||
|
if (!job) return;
|
||||||
|
|
||||||
|
// Populate Data
|
||||||
|
document.getElementById('modal-title').textContent = job.title;
|
||||||
|
document.getElementById('modal-location').textContent = job.location;
|
||||||
|
document.getElementById('modal-desc').textContent = job.desc;
|
||||||
|
|
||||||
|
const tag = document.getElementById('modal-tag');
|
||||||
|
tag.textContent = job.type;
|
||||||
|
tag.className = `inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-semibold border ${job.color}`;
|
||||||
|
|
||||||
|
const respList = document.getElementById('modal-responsibilities');
|
||||||
|
respList.innerHTML = job.responsibilities.map(item => `<li>${item}</li>`).join('');
|
||||||
|
|
||||||
|
const reqList = document.getElementById('modal-requirements');
|
||||||
|
reqList.innerHTML = job.requirements.map(item => `<li>${item}</li>`).join('');
|
||||||
|
|
||||||
|
const subject = encodeURIComponent(`Application for ${job.title} - [Your Name]`);
|
||||||
|
const body = encodeURIComponent(`Dear Hiring Team,\n\nI am writing to express my interest in the ${job.title} position.\n\nPlease find my resume attached.\n\nBest regards,\n[Your Name]`);
|
||||||
|
document.getElementById('modal-apply-btn').href = `mailto:${email}?subject=${subject}&body=${body}`;
|
||||||
|
|
||||||
|
// [修复] 强制重置滚动条位置到顶部
|
||||||
|
document.getElementById('modal-body').scrollTop = 0;
|
||||||
|
|
||||||
|
modal.classList.add('open');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeJobModal() {
|
||||||
|
modal.classList.remove('open');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape' && modal.classList.contains('open')) {
|
||||||
|
closeJobModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderJobs(data) {
|
||||||
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
noResultsEl.classList.remove('hidden');
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
noResultsEl.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
data.forEach((job, index) => {
|
||||||
|
const slide = document.createElement('div');
|
||||||
|
slide.className = 'swiper-slide w-[85vw] sm:w-[320px] md:w-[380px]';
|
||||||
|
slide.setAttribute('data-aos', 'fade-up');
|
||||||
|
slide.setAttribute('data-aos-delay', window.innerWidth < 640 ? 0 : (index % 5) * 100);
|
||||||
|
|
||||||
|
slide.innerHTML = `
|
||||||
|
<div class="flex flex-col h-full rounded-xl bg-white dark:bg-[#1a2632] shadow-[0_4px_20px_rgb(0,0,0,0.06)] hover:shadow-[0_20px_40px_rgb(0,0,0,0.1)] dark:shadow-none dark:hover:shadow-[0_20px_40px_rgba(0,0,0,0.4)] overflow-hidden group transition-all duration-300 border border-gray-100 dark:border-gray-800 hover:border-gray-200 dark:hover:border-gray-700">
|
||||||
|
<div class="h-40 sm:h-48 w-full relative overflow-hidden">
|
||||||
|
<div class="card-image-bg absolute inset-0 bg-cover bg-center" style='background-image: url("${job.image}");'></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
|
||||||
|
<div class="absolute bottom-4 left-4 z-10">
|
||||||
|
<span class="inline-flex items-center justify-center px-2.5 py-0.5 sm:px-3 sm:py-1 rounded-full text-xs font-semibold ${job.color} backdrop-blur-md shadow-sm border border-white/10">${job.type}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-5 sm:p-6 flex flex-col flex-1 gap-3 sm:gap-4">
|
||||||
|
<div class="flex-1">
|
||||||
|
<h3 class="text-xl sm:text-2xl text-[#111418] dark:text-white leading-tight mb-2 group-hover:text-primary transition-colors">${job.title}</h3>
|
||||||
|
<div class="flex items-center gap-2 text-[#617589] dark:text-gray-400 text-xs sm:text-sm mb-3 sm:mb-4">
|
||||||
|
<span class="material-symbols-outlined text-sm sm:text-base"></span><span>${job.location}</span>
|
||||||
|
<span class="w-1 h-1 bg-gray-300 rounded-full mx-1"></span>
|
||||||
|
<span class="material-symbols-outlined text-sm sm:text-base"></span><span>Full-time</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-[#617589] dark:text-gray-400 text-sm line-clamp-2 leading-relaxed">${job.desc}</p>
|
||||||
|
</div>
|
||||||
|
<button onclick="openJobModal(${job.id})" class="mt-auto w-full flex items-center justify-center gap-2 rounded-lg h-10 sm:h-12 bg-white dark:bg-gray-800 border-2 border-gray-100 dark:border-gray-700 text-[#111418] dark:text-white text-sm hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-primary transition-all duration-300 group/btn active:scale-95">
|
||||||
|
View Details
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
container.appendChild(slide);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initSwiper() {
|
||||||
|
if (swiperInstance) {
|
||||||
|
swiperInstance.destroy(true, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
swiperInstance = new Swiper(".mySwiper", {
|
||||||
|
slidesPerView: "auto",
|
||||||
|
centeredSlides: window.innerWidth < 640,
|
||||||
|
spaceBetween: 16,
|
||||||
|
grabCursor: true,
|
||||||
|
speed: 600,
|
||||||
|
resistance: true,
|
||||||
|
resistanceRatio: 0.65,
|
||||||
|
observer: true,
|
||||||
|
observeParents: true,
|
||||||
|
breakpoints: {
|
||||||
|
640: {
|
||||||
|
centeredSlides: false,
|
||||||
|
spaceBetween: 24,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next-custom",
|
||||||
|
prevEl: ".swiper-button-prev-custom",
|
||||||
|
},
|
||||||
|
scrollbar: {
|
||||||
|
el: ".swiper-scrollbar",
|
||||||
|
draggable: true,
|
||||||
|
snapOnRelease: false,
|
||||||
|
},
|
||||||
|
mousewheel: {
|
||||||
|
forceToAxis: true,
|
||||||
|
},
|
||||||
|
keyboard: {
|
||||||
|
enabled: true,
|
||||||
|
onlyInViewport: true,
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
init: function(sw) { updateCounter(sw); },
|
||||||
|
slideChange: function(sw) { updateCounter(sw); },
|
||||||
|
slidesLengthChange: function(sw) { updateCounter(sw); },
|
||||||
|
resize: function(sw) {
|
||||||
|
sw.params.centeredSlides = window.innerWidth < 640;
|
||||||
|
sw.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCounter(sw) {
|
||||||
|
const currentEl = document.getElementById('slide-current');
|
||||||
|
const totalEl = document.getElementById('slide-total');
|
||||||
|
|
||||||
|
let count = sw.slides.length;
|
||||||
|
if(count === 0) {
|
||||||
|
currentEl.textContent = "00";
|
||||||
|
totalEl.textContent = "00";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let current = sw.activeIndex + 1;
|
||||||
|
currentEl.textContent = String(current).padStart(2, '0');
|
||||||
|
totalEl.textContent = String(count).padStart(2, '0');
|
||||||
|
}
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', (e) => {
|
||||||
|
const query = e.target.value.toLowerCase().trim();
|
||||||
|
const filtered = jobsData.filter(job =>
|
||||||
|
job.title.toLowerCase().includes(query) ||
|
||||||
|
job.type.toLowerCase().includes(query)
|
||||||
|
);
|
||||||
|
renderJobs(filtered);
|
||||||
|
initSwiper();
|
||||||
|
setTimeout(() => { AOS.refresh(); }, 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
AOS.init({
|
||||||
|
once: true,
|
||||||
|
offset: 30,
|
||||||
|
duration: 800,
|
||||||
|
easing: 'ease-out-cubic',
|
||||||
|
});
|
||||||
|
renderJobs(jobsData);
|
||||||
|
initSwiper();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue