메일송신 mailJS , 영/한 전환 적용ㅁ
This commit is contained in:
Wind
@@ -37,3 +37,17 @@ body {
|
||||
transform: scale(1.1);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
/* ── 언어 전환 버튼 ───────────────────────────────────────── */
|
||||
.lang-btn {
|
||||
background: transparent;
|
||||
opacity: 0.5;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.lang-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.lang-btn.active-lang {
|
||||
background: #2563eb;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
297
html/assets/js/i18n.js
Normal file
297
html/assets/js/i18n.js
Normal file
@@ -0,0 +1,297 @@
|
||||
// ============================================================
|
||||
// 다국어 지원 (한국어 / 영어)
|
||||
// ============================================================
|
||||
const translations = {
|
||||
en: {
|
||||
// NAV
|
||||
'nav.home' : 'Home',
|
||||
'nav.dcs' : 'DCS',
|
||||
'nav.batch' : 'Batch Process',
|
||||
'nav.dbsvr' : 'Database Server',
|
||||
'nav.products' : 'Instruments',
|
||||
'nav.services' : 'Services',
|
||||
'nav.about' : 'About',
|
||||
'nav.contact' : 'Contact',
|
||||
'nav.quote' : 'Request Quote',
|
||||
|
||||
// HERO
|
||||
'hero.badge' : 'Precision Industrial Control',
|
||||
'hero.title' : 'Engineering <span class="text-blue-500 font-normal">Precision</span> <br class="hidden md:block"/> Industrial Control',
|
||||
'hero.desc' : 'Hanmo Control & Network Co., Ltd. provides elite-tier DCS and SCADA architectures for critical infrastructure and modern digital transformation.',
|
||||
'hero.btn1' : 'Explore Expertise',
|
||||
'hero.btn2' : 'Consultation',
|
||||
'stat.nodes' : 'Active Nodes',
|
||||
'stat.uptime' : 'System Uptime',
|
||||
'stat.engineers': 'Engineers',
|
||||
'stat.years' : 'Years Excellence',
|
||||
|
||||
// DCS
|
||||
'dcs.badge' : 'Advanced Control Systems',
|
||||
'dcs.title' : 'DCS Integration',
|
||||
'dcs.desc' : 'Enterprise-grade Distributed Control System architecture designed for the most critical industrial applications.',
|
||||
'dcs.f1.title' : 'Redundant Architecture',
|
||||
'dcs.f1.desc' : 'Fault-tolerant systems with dual processing units ensuring 99.99% uptime',
|
||||
'dcs.f2.title' : 'Real-time Communication',
|
||||
'dcs.f2.desc' : 'Sub-millisecond response times with synchronized control across multiple nodes',
|
||||
'dcs.f3.title' : 'Security Certified',
|
||||
'dcs.f3.desc' : 'IEC 62443 compliance with military-grade encryption protocols',
|
||||
'dcs.btn' : 'Request Technical Specs',
|
||||
|
||||
// BATCH
|
||||
'batch.badge' : 'Process Automation',
|
||||
'batch.title' : 'Batch Process Control',
|
||||
'batch.desc' : 'Sophisticated batch automation for pharmaceutical, chemical, and specialty manufacturing operations.',
|
||||
'batch.f1.title': 'Recipe Management',
|
||||
'batch.f1.desc' : 'Dynamic recipe engine with version control and audit trail capabilities',
|
||||
'batch.f2.title': 'Performance Analytics',
|
||||
'batch.f2.desc' : 'Real-time batch tracking with predictive quality monitoring',
|
||||
'batch.f3.title': 'GMP Compliant',
|
||||
'batch.f3.desc' : 'FDA 21 CFR Part 11 compliance and complete data integrity',
|
||||
'batch.btn' : 'Start Implementation',
|
||||
|
||||
// DBSVR
|
||||
'db.badge' : 'Data Infrastructure',
|
||||
'db.title' : 'Database Server Solutions',
|
||||
'db.desc' : 'Mission-critical historian and data management infrastructure for continuous industrial operations.',
|
||||
'db.c1.title' : 'High-Performance Historian',
|
||||
'db.c1.desc' : 'SQL Server-based architecture optimized for 1M+ data points per second with sub-second query response',
|
||||
'db.c2.title' : 'Disaster Recovery',
|
||||
'db.c2.desc' : 'Geo-redundant replication with RTO < 15 minutes and RPO < 5 minutes',
|
||||
'db.c3.title' : 'Security & Compliance',
|
||||
'db.c3.desc' : 'Role-based access control, encryption at rest/transit, and full audit logging',
|
||||
'db.btn' : 'Get Infrastructure Consultation',
|
||||
|
||||
// INSTRUMENTS
|
||||
'inst.badge' : 'Precision Measurement',
|
||||
'inst.title' : 'Control Instruments',
|
||||
'inst.desc' : 'Smart field instruments engineered for accuracy and reliability in demanding industrial environments.',
|
||||
'inst.i1.title' : 'Flow Transmitters',
|
||||
'inst.i1.desc' : 'Magnetic, Coriolis, and vortex flow meters with ±0.5% accuracy',
|
||||
'inst.i2.title' : 'Pressure Transmitters',
|
||||
'inst.i2.desc' : 'Differential and absolute pressure sensors for ultra-high sensitivity',
|
||||
'inst.i3.title' : 'Temperature Sensors',
|
||||
'inst.i3.desc' : 'RTD, thermocouple, and infrared temperature measurement',
|
||||
'inst.i4.title' : 'Level Transmitters',
|
||||
'inst.i4.desc' : 'Ultrasonic, radar, and capacitive level sensors',
|
||||
'inst.i5.title' : 'Analytical Sensors',
|
||||
'inst.i5.desc' : 'pH, conductivity, oxygen, and dissolved gas analyzers',
|
||||
'inst.i6.title' : 'Control Valves',
|
||||
'inst.i6.desc' : 'Smart positioners with HART communication',
|
||||
'inst.i7.title' : 'Vibration Monitors',
|
||||
'inst.i7.desc' : 'Accelerometers and velocity sensors for predictive maintenance',
|
||||
'inst.i8.title' : 'Smart Data Loggers',
|
||||
'inst.i8.desc' : 'IoT-enabled data acquisition units with cloud connectivity',
|
||||
'inst.custom.title' : 'Custom Integration Available',
|
||||
'inst.custom.desc' : 'All instruments integrate seamlessly with our DCS and SCADA platforms. Custom configurations available for specialized applications.',
|
||||
'inst.custom.btn' : 'Request Custom Configuration',
|
||||
'inst.quote' : 'Get Quote →',
|
||||
|
||||
// SERVICES
|
||||
'svc.badge' : 'Our Capabilities',
|
||||
'svc.title' : 'World-Class Automation',
|
||||
'svc.desc' : 'Specialized engineering for complex physical operations through advanced data integration and distributed control systems.',
|
||||
'svc.s1.title' : 'DCS Integration',
|
||||
'svc.s1.desc' : 'Redundant control architectures for utility-scale industries including power and chemical plants.',
|
||||
'svc.s1.link' : 'Learn More',
|
||||
'svc.s2.title' : 'SCADA Design',
|
||||
'svc.s2.desc' : 'Real-time monitoring platforms with advanced HMI and secure remote access protocols.',
|
||||
'svc.s2.link' : 'Case Studies',
|
||||
'svc.s3.title' : 'Data Historians',
|
||||
'svc.s3.desc' : 'Mission-critical SQL infrastructure optimized for massive industrial time-series data storage.',
|
||||
'svc.s3.link' : 'Data Security',
|
||||
'svc.s4.title' : 'Control Instruments',
|
||||
'svc.s4.desc' : 'Smart field sensors for flow, pressure, and temperature with high-accuracy calibration.',
|
||||
'svc.s4.link' : 'Product Catalog',
|
||||
|
||||
// ABOUT
|
||||
'about.badge' : 'About Hanmo',
|
||||
'about.title' : 'Trusted Partner in Industrial Automation',
|
||||
'about.p1' : 'Since our founding, Hanmo Control & Network Co., Ltd. has been at the forefront of industrial automation engineering. We specialize in designing, implementing, and maintaining mission-critical control systems for the world\'s most demanding industries.',
|
||||
'about.p2' : 'Our team of 60+ certified engineers brings decades of combined experience in DCS, SCADA, and industrial networking, ensuring your operations run with unmatched precision and reliability.',
|
||||
'about.cert' : 'Certified',
|
||||
'about.support' : 'Support',
|
||||
'about.years' : 'Years of Industrial Excellence',
|
||||
|
||||
// CONTACT
|
||||
'contact.badge' : 'Get In Touch',
|
||||
'contact.title' : 'Start Your Project',
|
||||
'contact.desc' : 'Contact our engineering team for a detailed consultation and project assessment.',
|
||||
'contact.name' : 'Full Name',
|
||||
'contact.email' : 'Email Address',
|
||||
'contact.company': 'Company Name',
|
||||
'contact.msg' : 'Describe your project requirements...',
|
||||
'contact.btn' : 'Send Message',
|
||||
'contact.sending': 'Sending...',
|
||||
'contact.success': '✅ Message sent successfully. We will get back to you shortly.',
|
||||
'contact.error.required': '⚠ Name, email, and message are required.',
|
||||
'contact.error.email' : '⚠ Please enter a valid email address.',
|
||||
'contact.error.fail' : '❌ Failed to send. Please try again later.',
|
||||
|
||||
// FOOTER
|
||||
'footer.copy' : '© 2024 Hanmo Control & Network Co., Ltd. All rights reserved.',
|
||||
},
|
||||
|
||||
ko: {
|
||||
// NAV
|
||||
'nav.home' : '홈',
|
||||
'nav.dcs' : 'DCS',
|
||||
'nav.batch' : '배치 프로세스',
|
||||
'nav.dbsvr' : '데이터베이스 서버',
|
||||
'nav.products' : '계측기기',
|
||||
'nav.services' : '서비스',
|
||||
'nav.about' : '회사소개',
|
||||
'nav.contact' : '문의하기',
|
||||
'nav.quote' : '견적 요청',
|
||||
|
||||
// HERO
|
||||
'hero.badge' : '정밀 공정 제어 시스템',
|
||||
'hero.title' : '<span class="text-blue-500 font-normal">정밀함</span>을 설계하는<br class="hidden md:block"/> 공정 제어 전문기업',
|
||||
'hero.desc' : '(주)한모씨앤앤은 핵심 인프라와 디지털 전환을 위한 최고 수준의 DCS 및 SCADA BATCH CONTROL 시스템을 제공합니다.',
|
||||
'hero.btn1' : '전문 분야 보기',
|
||||
'hero.btn2' : '상담 신청',
|
||||
'stat.nodes' : '운영 노드',
|
||||
'stat.uptime' : '시스템 가동률',
|
||||
'stat.engineers': '전문 엔지니어',
|
||||
'stat.years' : '년 업계 경력',
|
||||
|
||||
// DCS
|
||||
'dcs.badge' : '고급 제어 시스템',
|
||||
'dcs.title' : 'DCS 통합 솔루션',
|
||||
'dcs.desc' : '가장 중요한 공정 현장을 위한 엔터프라이즈급 분산 제어 시스템(DCS) 아키텍처를 설계합니다.',
|
||||
'dcs.f1.title' : '이중화 아키텍처',
|
||||
'dcs.f1.desc' : '듀얼 처리 장치로 99.99% 가동률을 보장하는 내결함성 시스템',
|
||||
'dcs.f2.title' : '실시간 통신',
|
||||
'dcs.f2.desc' : '밀리초 미만의 응답 시간으로 다중 노드 간 동기화된 제어 실현',
|
||||
'dcs.f3.title' : '보안 인증',
|
||||
'dcs.f3.desc' : 'IEC 62443 준수 및 군사 수준 암호화 프로토콜 적용',
|
||||
'dcs.btn' : '기술 사양 요청',
|
||||
|
||||
// BATCH
|
||||
'batch.badge' : '프로세스 자동화',
|
||||
'batch.title' : '배치 프로세스 제어',
|
||||
'batch.desc' : '제약, 화학 및 특수 제조 공정을 위한 정교한 배치 자동화 시스템을 구축합니다.',
|
||||
'batch.f1.title': '레시피 관리',
|
||||
'batch.f1.desc' : '버전 관리 및 감사 추적 기능을 갖춘 동적 레시피 엔진',
|
||||
'batch.f2.title': '성능 분석',
|
||||
'batch.f2.desc' : '예측 품질 모니터링을 통한 실시간 배치 추적',
|
||||
'batch.f3.title': 'GMP 준수',
|
||||
'batch.f3.desc' : 'FDA 21 CFR Part 11 준수 및 완전한 데이터 무결성 보장',
|
||||
'batch.btn' : '구축 상담 신청',
|
||||
|
||||
// DBSVR
|
||||
'db.badge' : '데이터 인프라',
|
||||
'db.title' : '데이터베이스 서버 솔루션',
|
||||
'db.desc' : '지속적인 공정 운영을 위한 미션 크리티컬 히스토리안 및 데이터 관리 인프라를 제공합니다.',
|
||||
'db.c1.title' : '고성능 히스토리안',
|
||||
'db.c1.desc' : '초당 100만+ 데이터 포인트를 처리하는 SQL Server 기반 아키텍처',
|
||||
'db.c2.title' : '재해 복구',
|
||||
'db.c2.desc' : 'RTO 15분 미만, RPO 5분 미만의 지역 이중화 복제 시스템',
|
||||
'db.c3.title' : '보안 및 컴플라이언스',
|
||||
'db.c3.desc' : '역할 기반 접근 제어, 저장/전송 암호화 및 완전한 감사 로깅',
|
||||
'db.btn' : '인프라 상담 신청',
|
||||
|
||||
// INSTRUMENTS
|
||||
'inst.badge' : '정밀 계측',
|
||||
'inst.title' : '계측 제어 기기',
|
||||
'inst.desc' : '가혹한 공정 환경에서도 정확성과 신뢰성을 발휘하는 스마트 현장 계측기기를 공급합니다.',
|
||||
'inst.i1.title' : '유량 변환기',
|
||||
'inst.i1.desc' : '±0.5% 정확도의 전자식, 코리올리스, 와류식 유량계',
|
||||
'inst.i2.title' : '압력 변환기',
|
||||
'inst.i2.desc' : '초고감도 차압 및 절대압력 센서',
|
||||
'inst.i3.title' : '온도 센서',
|
||||
'inst.i3.desc' : 'RTD, 열전대, 적외선 온도 측정기',
|
||||
'inst.i4.title' : '레벨 트랜스미터',
|
||||
'inst.i4.desc' : '초음파, 레이더, 정전용량식 레벨 센서',
|
||||
'inst.i5.title' : '분석 센서',
|
||||
'inst.i5.desc' : 'pH, 전도도, 산소, 용존 가스 분석기',
|
||||
'inst.i6.title' : '컨트롤 밸브',
|
||||
'inst.i6.desc' : 'HART 통신 지원 스마트 포지셔너',
|
||||
'inst.i7.title' : '진동 모니터',
|
||||
'inst.i7.desc' : '예측 유지보수를 위한 가속도계 및 속도 센서',
|
||||
'inst.i8.title' : '스마트 데이터 로거',
|
||||
'inst.i8.desc' : '클라우드 연결 기능을 갖춘 IoT 데이터 수집 장치',
|
||||
'inst.custom.title' : '맞춤형 통합 솔루션 제공',
|
||||
'inst.custom.desc' : '모든 계측기기는 당사의 DCS 및 SCADA 플랫폼과 원활하게 통합됩니다. 특수 응용 분야에 맞는 커스텀 구성이 가능합니다.',
|
||||
'inst.custom.btn' : '맞춤 구성 요청',
|
||||
'inst.quote' : '견적 요청 →',
|
||||
|
||||
// SERVICES
|
||||
'svc.badge' : '서비스 역량',
|
||||
'svc.title' : '세계 최고 수준의 자동화',
|
||||
'svc.desc' : '고급 데이터 통합 및 분산 제어 시스템을 통해 복잡한 공정 공정을 위한 특화된 엔지니어링을 제공합니다.',
|
||||
'svc.s1.title' : 'DCS 통합',
|
||||
'svc.s1.desc' : '발전소, 화학 플랜트 등 대규모 공정을 위한 이중화 제어 아키텍처',
|
||||
'svc.s1.link' : '자세히 보기',
|
||||
'svc.s2.title' : 'SCADA 설계',
|
||||
'svc.s2.desc' : '고급 HMI 및 보안 원격 접속 프로토콜을 갖춘 실시간 모니터링 플랫폼',
|
||||
'svc.s2.link' : '사례 연구',
|
||||
'svc.s3.title' : '데이터 히스토리안',
|
||||
'svc.s3.desc' : '대규모 공정 시계열 데이터 저장에 최적화된 미션 크리티컬 SQL 인프라',
|
||||
'svc.s3.link' : '데이터 보안',
|
||||
'svc.s4.title' : '제어 계측기기',
|
||||
'svc.s4.desc' : '고정밀 교정을 통한 유량, 압력, 온도 스마트 현장 센서',
|
||||
'svc.s4.link' : '제품 카탈로그',
|
||||
|
||||
// ABOUT
|
||||
'about.badge' : '회사 소개',
|
||||
'about.title' : '공정 자동화의 신뢰할 수 있는 파트너',
|
||||
'about.p1' : '(주)한모씨앤앤는 창립 이래 공정 자동화 엔지니어링의 최전선에서 활동하고 있습니다. 세계에서 가장 까다로운 공정 현장을 위한 미션 크리티컬 제어 시스템 설계, 구현 및 유지보수를 전문으로 합니다.',
|
||||
'about.p2' : '60여 명의 공인 엔지니어로 구성된 팀이 DCS, SCADA, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
|
||||
'about.cert' : '인증',
|
||||
'about.support' : '지원',
|
||||
'about.years' : '년 공정 분야 우수성',
|
||||
|
||||
// CONTACT
|
||||
'contact.badge' : '문의하기',
|
||||
'contact.title' : '프로젝트를 시작하세요',
|
||||
'contact.desc' : '엔지니어링 팀에 문의하여 상세 상담 및 프로젝트 평가를 받아보세요.',
|
||||
'contact.name' : '성명',
|
||||
'contact.email' : '이메일 주소',
|
||||
'contact.company': '회사명',
|
||||
'contact.msg' : '프로젝트 요구사항을 설명해 주세요...',
|
||||
'contact.btn' : '메시지 보내기',
|
||||
'contact.sending': '전송 중...',
|
||||
'contact.success': '✅ 메시지가 성공적으로 전송되었습니다. 빠른 시일 내에 회신 드리겠습니다.',
|
||||
'contact.error.required': '⚠ 이름, 이메일, 메시지는 필수 항목입니다.',
|
||||
'contact.error.email' : '⚠ 올바른 이메일 주소를 입력해 주세요.',
|
||||
'contact.error.fail' : '❌ 전송에 실패했습니다. 잠시 후 다시 시도해 주세요.',
|
||||
|
||||
// FOOTER
|
||||
'footer.copy' : '© 2024 (주)한모씨앤앤. All rights reserved.',
|
||||
}
|
||||
};
|
||||
|
||||
// ── 현재 언어 (로컬스토리지 유지) ──────────────────────────
|
||||
let currentLang = localStorage.getItem('hmLang') || 'en';
|
||||
|
||||
function t(key) {
|
||||
return translations[currentLang][key] || translations['en'][key] || key;
|
||||
}
|
||||
|
||||
function applyTranslations() {
|
||||
document.querySelectorAll('[data-i18n]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n');
|
||||
const type = el.getAttribute('data-i18n-type') || 'text';
|
||||
if (type === 'html') {
|
||||
el.innerHTML = t(key);
|
||||
} else if (type === 'placeholder') {
|
||||
el.setAttribute('placeholder', t(key));
|
||||
} else {
|
||||
el.textContent = t(key);
|
||||
}
|
||||
});
|
||||
// <html lang> 업데이트
|
||||
document.documentElement.lang = currentLang;
|
||||
// 버튼 활성 상태 업데이트
|
||||
document.querySelectorAll('.lang-btn').forEach(btn => {
|
||||
btn.classList.toggle('active-lang', btn.dataset.lang === currentLang);
|
||||
});
|
||||
}
|
||||
|
||||
function switchLang(lang) {
|
||||
currentLang = lang;
|
||||
localStorage.setItem('hmLang', lang);
|
||||
applyTranslations();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', applyTranslations);
|
||||
@@ -1,123 +1,89 @@
|
||||
// Header scroll effect
|
||||
// ============================================================
|
||||
// ★ EmailJS 설정 - 아래 3가지 값을 본인 계정으로 교체하세요 ★
|
||||
// ============================================================
|
||||
const EMAILJS_PUBLIC_KEY = 'HO6i369gX6X5HEXtJ';
|
||||
const EMAILJS_SERVICE_ID = 'service_4ur5lqd';
|
||||
const EMAILJS_TEMPLATE_ID = 'template_jp0v5qv';
|
||||
// ============================================================
|
||||
|
||||
emailjs.init(EMAILJS_PUBLIC_KEY);
|
||||
|
||||
// ── Contact Form ─────────────────────────────────────────────
|
||||
document.getElementById('contact-submit').addEventListener('click', function () {
|
||||
const name = document.getElementById('contact-name').value.trim();
|
||||
const email = document.getElementById('contact-email').value.trim();
|
||||
const company = document.getElementById('contact-company').value.trim();
|
||||
const message = document.getElementById('contact-message').value.trim();
|
||||
const btn = document.getElementById('contact-submit');
|
||||
|
||||
if (!name || !email || !message) {
|
||||
showStatus('error', t('contact.error.required')); return;
|
||||
}
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
showStatus('error', t('contact.error.email')); return;
|
||||
}
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = t('contact.sending');
|
||||
|
||||
const templateParams = {
|
||||
name : name,
|
||||
message : 'Email : ' + email + '\nCompany : ' + (company || 'N/A') + '\n\n' + message,
|
||||
reply_to : email
|
||||
};
|
||||
|
||||
emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams)
|
||||
.then(function () {
|
||||
showStatus('success', t('contact.success'));
|
||||
document.getElementById('contact-name').value = '';
|
||||
document.getElementById('contact-email').value = '';
|
||||
document.getElementById('contact-company').value = '';
|
||||
document.getElementById('contact-message').value = '';
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error('EmailJS error:', error);
|
||||
showStatus('error', t('contact.error.fail'));
|
||||
})
|
||||
.finally(function () {
|
||||
btn.disabled = false;
|
||||
btn.textContent = t('contact.btn');
|
||||
});
|
||||
});
|
||||
|
||||
function showStatus(type, msg) {
|
||||
const status = document.getElementById('contact-status');
|
||||
status.classList.remove('hidden', 'bg-green-500/20', 'text-green-400', 'bg-red-500/20', 'text-red-400');
|
||||
status.classList.add(type === 'success' ? 'bg-green-500/20' : 'bg-red-500/20',
|
||||
type === 'success' ? 'text-green-400' : 'text-red-400');
|
||||
status.textContent = msg;
|
||||
}
|
||||
|
||||
// ── Header scroll ────────────────────────────────────────────
|
||||
const mainHeader = document.getElementById('main-header');
|
||||
const brandName = document.getElementById('brand-name');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const brandName = document.getElementById('brand-name');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
mainHeader.classList.add('glass-effect', 'py-3');
|
||||
mainHeader.classList.remove('py-6');
|
||||
if (brandName) brandName.classList.replace('text-white', 'text-slate-900');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.replace('text-slate-100', 'text-slate-700');
|
||||
});
|
||||
navLinks.forEach(link => link.classList.replace('text-slate-100', 'text-slate-700'));
|
||||
} else {
|
||||
mainHeader.classList.remove('glass-effect', 'py-3');
|
||||
mainHeader.classList.add('py-6');
|
||||
if (brandName) brandName.classList.replace('text-slate-900', 'text-white');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.replace('text-slate-700', 'text-slate-100');
|
||||
});
|
||||
navLinks.forEach(link => link.classList.replace('text-slate-700', 'text-slate-100'));
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile menu open
|
||||
// ── Mobile menu ───────────────────────────────────────────────
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const closeMenuBtn = document.getElementById('close-menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const closeMenuBtn = document.getElementById('close-menu-btn');
|
||||
|
||||
if (mobileMenuBtn) {
|
||||
mobileMenuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.remove('translate-x-full');
|
||||
});
|
||||
}
|
||||
if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', () => mobileMenu.classList.remove('translate-x-full'));
|
||||
if (closeMenuBtn) closeMenuBtn.addEventListener('click', () => mobileMenu.classList.add('translate-x-full'));
|
||||
|
||||
// Mobile menu close
|
||||
if (closeMenuBtn) {
|
||||
closeMenuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('translate-x-full');
|
||||
});
|
||||
}
|
||||
|
||||
// Close on nav link click
|
||||
const mobileNavLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];
|
||||
mobileNavLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenu.classList.add('translate-x-full');
|
||||
});
|
||||
});
|
||||
|
||||
// Contact form handler
|
||||
const contactSubmitBtn = document.getElementById('contact-submit');
|
||||
const contactForm = {
|
||||
name: document.getElementById('contact-name'),
|
||||
email: document.getElementById('contact-email'),
|
||||
company: document.getElementById('contact-company'),
|
||||
message: document.getElementById('contact-message')
|
||||
};
|
||||
const contactStatus = document.getElementById('contact-status');
|
||||
|
||||
if (contactSubmitBtn) {
|
||||
contactSubmitBtn.addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// 폼 데이터 수집
|
||||
const formData = {
|
||||
name: contactForm.name.value,
|
||||
email: contactForm.email.value,
|
||||
company: contactForm.company.value,
|
||||
message: contactForm.message.value
|
||||
};
|
||||
|
||||
// 로딩 상태 표시
|
||||
contactSubmitBtn.disabled = true;
|
||||
contactSubmitBtn.textContent = 'Sending...';
|
||||
contactStatus.classList.add('hidden');
|
||||
|
||||
try {
|
||||
// FastAPI 엔드포인트로 요청 (nginx 프록시를 통함)
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
mode: 'cors',
|
||||
credentials: 'omit'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// 응답 처리
|
||||
contactStatus.classList.remove('hidden');
|
||||
|
||||
if (response.ok && result.success !== false) {
|
||||
// 성공 메시지
|
||||
contactStatus.classList.remove('bg-red-900/50', 'text-red-200');
|
||||
contactStatus.classList.add('bg-green-900/50', 'text-green-200');
|
||||
contactStatus.textContent = result.message;
|
||||
|
||||
// 폼 초기화
|
||||
contactForm.name.value = '';
|
||||
contactForm.email.value = '';
|
||||
contactForm.company.value = '';
|
||||
contactForm.message.value = '';
|
||||
} else {
|
||||
// 오류 메시지
|
||||
contactStatus.classList.remove('bg-green-900/50', 'text-green-200');
|
||||
contactStatus.classList.add('bg-red-900/50', 'text-red-200');
|
||||
contactStatus.textContent = result.detail || result.message || 'Failed to send message';
|
||||
}
|
||||
} catch (error) {
|
||||
// 네트워크 오류
|
||||
contactStatus.classList.remove('hidden', 'bg-green-900/50', 'text-green-200');
|
||||
contactStatus.classList.add('bg-red-900/50', 'text-red-200');
|
||||
contactStatus.textContent = 'Error: Could not send message. Please try again later.';
|
||||
console.error('Contact form error:', error);
|
||||
} finally {
|
||||
// 버튼 상태 복구
|
||||
contactSubmitBtn.disabled = false;
|
||||
contactSubmitBtn.textContent = 'Send Message';
|
||||
}
|
||||
});
|
||||
}
|
||||
mobileNavLinks.forEach(link => link.addEventListener('click', () => mobileMenu.classList.add('translate-x-full')));
|
||||
|
||||
260
html/index.html
260
html/index.html
@@ -19,30 +19,29 @@
|
||||
<span class="text-white font-bold text-xl font-industrial">H</span>
|
||||
</div>
|
||||
<div class="flex flex-col leading-none">
|
||||
<span id="brand-name" class="font-bold text-xl tracking-tight font-industrial text-white transition-colors duration-300">
|
||||
HANMO
|
||||
</span>
|
||||
<span id="brand-sub" class="text-[9px] font-bold uppercase tracking-[0.2em] mt-1 text-blue-500">
|
||||
Control & Network
|
||||
</span>
|
||||
<span id="brand-name" class="font-bold text-xl tracking-tight font-industrial text-white transition-colors duration-300">HANMO</span>
|
||||
<span id="brand-sub" class="text-[9px] font-bold uppercase tracking-[0.2em] mt-1 text-blue-500">Control & Network</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<nav class="hidden md:flex gap-10">
|
||||
<a href="#home" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Home</a>
|
||||
<a href="#dcs" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">DCS</a>
|
||||
<a href="#batch" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Batch Process</a>
|
||||
<a href="#dbsvr" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Database Server</a>
|
||||
<a href="#products" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Instruments</a>
|
||||
<a href="#services" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Services</a>
|
||||
<a href="#about" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">About</a>
|
||||
<a href="#contact" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Contact</a>
|
||||
<a href="#home" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.home">Home</a>
|
||||
<a href="#dcs" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.dcs">DCS</a>
|
||||
<a href="#batch" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.batch">Batch Process</a>
|
||||
<a href="#dbsvr" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.dbsvr">Database Server</a>
|
||||
<a href="#products" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.products">Instruments</a>
|
||||
<a href="#services" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.services">Services</a>
|
||||
<a href="#about" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.about">About</a>
|
||||
<a href="#contact" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors" data-i18n="nav.contact">Contact</a>
|
||||
</nav>
|
||||
|
||||
<div class="hidden md:block">
|
||||
<button class="bg-blue-600 hover:bg-blue-700 text-white px-7 py-2.5 rounded-full text-xs font-bold shadow-xl transition-all active:scale-95 font-industrial tracking-widest uppercase">
|
||||
Request Quote
|
||||
</button>
|
||||
<div class="hidden md:flex items-center gap-3">
|
||||
<!-- 언어 전환 버튼 -->
|
||||
<div class="flex rounded-full overflow-hidden border border-white/20">
|
||||
<button onclick="switchLang('en')" data-lang="en" class="lang-btn active-lang px-3 py-1.5 text-[10px] font-bold font-industrial text-white transition-all">EN</button>
|
||||
<button onclick="switchLang('ko')" data-lang="ko" class="lang-btn px-3 py-1.5 text-[10px] font-bold font-industrial text-white transition-all">KO</button>
|
||||
</div>
|
||||
<button class="bg-blue-600 hover:bg-blue-700 text-white px-7 py-2.5 rounded-full text-xs font-bold shadow-xl transition-all active:scale-95 font-industrial tracking-widest uppercase" data-i18n="nav.quote">Request Quote</button>
|
||||
</div>
|
||||
|
||||
<button id="mobile-menu-btn" class="md:hidden text-white p-2">
|
||||
@@ -53,19 +52,24 @@
|
||||
|
||||
<!-- MOBILE MENU -->
|
||||
<div id="mobile-menu" class="fixed inset-0 z-[60] bg-slate-900 flex flex-col p-8 transition-transform translate-x-full duration-500 overflow-y-auto">
|
||||
<div class="flex justify-end mb-12">
|
||||
<div class="flex justify-between items-center mb-12">
|
||||
<!-- 모바일 언어 전환 -->
|
||||
<div class="flex rounded-full overflow-hidden border border-white/20">
|
||||
<button onclick="switchLang('en')" data-lang="en" class="lang-btn active-lang px-4 py-2 text-xs font-bold font-industrial text-white transition-all">EN</button>
|
||||
<button onclick="switchLang('ko')" data-lang="ko" class="lang-btn px-4 py-2 text-xs font-bold font-industrial text-white transition-all">KO</button>
|
||||
</div>
|
||||
<button id="close-menu-btn" class="text-white text-3xl">×</button>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-8 text-center">
|
||||
<a href="#home" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors">Home</a>
|
||||
<a href="#dcs" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors">DCS</a>
|
||||
<a href="#batch" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors">Batch Process</a>
|
||||
<a href="#dbsvr" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors">Database Server</a>
|
||||
<a href="#products" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors">Instruments</a>
|
||||
<a href="#services" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors">Services</a>
|
||||
<a href="#about" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors">About</a>
|
||||
<a href="#contact" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors">Contact</a>
|
||||
<button class="mt-8 bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold font-industrial tracking-widest uppercase transition-colors">Request Quote</button>
|
||||
<a href="#home" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.home">Home</a>
|
||||
<a href="#dcs" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.dcs">DCS</a>
|
||||
<a href="#batch" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.batch">Batch Process</a>
|
||||
<a href="#dbsvr" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.dbsvr">Database Server</a>
|
||||
<a href="#products" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.products">Instruments</a>
|
||||
<a href="#services" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.services">Services</a>
|
||||
<a href="#about" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.about">About</a>
|
||||
<a href="#contact" class="text-2xl font-light text-white font-premium hover:text-blue-400 transition-colors" data-i18n="nav.contact">Contact</a>
|
||||
<button class="mt-8 bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold font-industrial tracking-widest uppercase transition-colors" data-i18n="nav.quote">Request Quote</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -77,44 +81,36 @@
|
||||
<img src="assets/images/ControlRoom3.png" alt="Industrial Facility" class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900/80 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<div class="max-w-5xl animate-fade-in">
|
||||
<div class="inline-block px-4 py-1.5 mb-8 rounded-full bg-blue-600/20 border border-blue-400/30 text-blue-400 text-[10px] font-bold uppercase industrial-tracking font-industrial">
|
||||
Precision Industrial Control
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-8xl font-extralight text-white mb-8 hero-title premium-kerning font-premium">
|
||||
<div class="inline-block px-4 py-1.5 mb-8 rounded-full bg-blue-600/20 border border-blue-400/30 text-blue-400 text-[10px] font-bold uppercase industrial-tracking font-industrial" data-i18n="hero.badge">Precision Industrial Control</div>
|
||||
<h1 class="text-5xl md:text-8xl font-extralight text-white mb-8 hero-title premium-kerning font-premium" data-i18n="hero.title" data-i18n-type="html">
|
||||
Engineering <span class="text-blue-500 font-normal">Precision</span> <br class="hidden md:block"/> Industrial Control
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-slate-300 mb-12 leading-relaxed max-w-2xl font-premium font-light opacity-80">
|
||||
<p class="text-lg md:text-xl text-slate-300 mb-12 leading-relaxed max-w-2xl font-premium font-light opacity-80" data-i18n="hero.desc">
|
||||
Hanmo Control & Network Co., Ltd. provides elite-tier DCS and SCADA architectures for critical infrastructure and modern digital transformation.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5">
|
||||
<a href="#services" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-2xl font-bold shadow-2xl transition-all hover:-translate-y-1 text-center font-industrial text-xs tracking-widest uppercase">
|
||||
Explore Expertise
|
||||
</a>
|
||||
<a href="#contact" class="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-md px-10 py-5 rounded-2xl font-bold transition-all text-center font-industrial text-xs tracking-widest uppercase">
|
||||
Consultation
|
||||
</a>
|
||||
<a href="#services" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-2xl font-bold shadow-2xl transition-all hover:-translate-y-1 text-center font-industrial text-xs tracking-widest uppercase" data-i18n="hero.btn1">Explore Expertise</a>
|
||||
<a href="#contact" class="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-md px-10 py-5 rounded-2xl font-bold transition-all text-center font-industrial text-xs tracking-widest uppercase" data-i18n="hero.btn2">Consultation</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-24 grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-10 max-w-5xl animate-fade-in" style="animation-delay: 0.3s">
|
||||
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
||||
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">1,500+</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">Active Nodes</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.nodes">Active Nodes</div>
|
||||
</div>
|
||||
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
||||
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">99.99%</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">System Uptime</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.uptime">System Uptime</div>
|
||||
</div>
|
||||
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
||||
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">60+</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">Engineers</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.engineers">Engineers</div>
|
||||
</div>
|
||||
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
||||
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">15</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">Years Excellence</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.years">Years Excellence</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -124,9 +120,9 @@
|
||||
<section id="dcs" class="py-32 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-24">
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">Advanced Control Systems</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium">DCS Integration</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light">Enterprise-grade Distributed Control System architecture designed for the most critical industrial applications.</p>
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="dcs.badge">Advanced Control Systems</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="dcs.title">DCS Integration</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="dcs.desc">Enterprise-grade Distributed Control System architecture designed for the most critical industrial applications.</p>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto">
|
||||
<div class="aspect-square rounded-[2.5rem] overflow-hidden shadow-2xl"><img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=1000" alt="DCS Control Room" class="w-full h-full object-cover"></div>
|
||||
@@ -134,18 +130,18 @@
|
||||
<div class="space-y-8">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-shield-alt"></i></div></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium">Redundant Architecture</h4><p class="text-slate-500 leading-relaxed font-light">Fault-tolerant systems with dual processing units ensuring 99.99% uptime</p></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="dcs.f1.title">Redundant Architecture</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f1.desc">Fault-tolerant systems with dual processing units ensuring 99.99% uptime</p></div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-network-wired"></i></div></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium">Real-time Communication</h4><p class="text-slate-500 leading-relaxed font-light">Sub-millisecond response times with synchronized control across multiple nodes</p></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="dcs.f2.title">Real-time Communication</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f2.desc">Sub-millisecond response times with synchronized control across multiple nodes</p></div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-lock"></i></div></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium">Security Certified</h4><p class="text-slate-500 leading-relaxed font-light">IEC 62443 compliance with military-grade encryption protocols</p></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="dcs.f3.title">Security Certified</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f3.desc">IEC 62443 compliance with military-grade encryption protocols</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase">Request Technical Specs <i class="fas fa-arrow-right"></i></a></div>
|
||||
<div class="mt-12"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase" data-i18n="dcs.btn">Request Technical Specs</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,27 +151,27 @@
|
||||
<section id="batch" class="py-32 bg-slate-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-24">
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">Process Automation</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium">Batch Process Control</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light">Sophisticated batch automation for pharmaceutical, chemical, and specialty manufacturing operations.</p>
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="batch.badge">Process Automation</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="batch.title">Batch Process Control</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="batch.desc">Sophisticated batch automation for pharmaceutical, chemical, and specialty manufacturing operations.</p>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto">
|
||||
<div>
|
||||
<div class="space-y-8">
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-tasks"></i></div></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium">Recipe Management</h4><p class="text-slate-500 leading-relaxed font-light">Dynamic recipe engine with version control and audit trail capabilities</p></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="batch.f1.title">Recipe Management</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f1.desc">Dynamic recipe engine with version control and audit trail capabilities</p></div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-chart-bar"></i></div></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium">Performance Analytics</h4><p class="text-slate-500 leading-relaxed font-light">Real-time batch tracking with predictive quality monitoring</p></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="batch.f2.title">Performance Analytics</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f2.desc">Real-time batch tracking with predictive quality monitoring</p></div>
|
||||
</div>
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0"><div class="flex items-center justify-center h-12 w-12 rounded-xl bg-blue-600 text-white"><i class="fas fa-check-circle"></i></div></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium">GMP Compliant</h4><p class="text-slate-500 leading-relaxed font-light">FDA 21 CFR Part 11 compliance and complete data integrity</p></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="batch.f3.title">GMP Compliant</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f3.desc">FDA 21 CFR Part 11 compliance and complete data integrity</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase">Start Implementation <i class="fas fa-arrow-right"></i></a></div>
|
||||
<div class="mt-12"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase" data-i18n="batch.btn">Start Implementation</a></div>
|
||||
</div>
|
||||
<div class="aspect-square rounded-[2.5rem] overflow-hidden shadow-2xl"><img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?auto=format&fit=crop&q=80&w=1000" alt="Batch Process" class="w-full h-full object-cover"></div>
|
||||
</div>
|
||||
@@ -186,15 +182,15 @@
|
||||
<section id="dbsvr" class="py-32 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-24">
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">Data Infrastructure</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium">Database Server Solutions</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light">Mission-critical historian and data management infrastructure for continuous industrial operations.</p>
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="db.badge">Data Infrastructure</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="db.title">Database Server Solutions</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="db.desc">Mission-critical historian and data management infrastructure for continuous industrial operations.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<div class="bg-slate-50 rounded-[2.5rem] p-10 border border-slate-100 hover:border-blue-200 transition-all hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 text-white text-2xl"><i class="fas fa-database"></i></div>
|
||||
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium">High-Performance Historian</h4>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light">SQL Server-based architecture optimized for 1M+ data points per second with sub-second query response</p>
|
||||
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium" data-i18n="db.c1.title">High-Performance Historian</h4>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light" data-i18n="db.c1.desc">SQL Server-based architecture optimized for 1M+ data points per second with sub-second query response</p>
|
||||
<ul class="space-y-3 text-sm text-slate-600">
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Time-series optimization</li>
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Automatic compression</li>
|
||||
@@ -203,8 +199,8 @@
|
||||
</div>
|
||||
<div class="bg-slate-50 rounded-[2.5rem] p-10 border border-slate-100 hover:border-blue-200 transition-all hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 text-white text-2xl"><i class="fas fa-shield-alt"></i></div>
|
||||
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium">Disaster Recovery</h4>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light">Geo-redundant replication with RTO < 15 minutes and RPO < 5 minutes</p>
|
||||
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium" data-i18n="db.c2.title">Disaster Recovery</h4>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light" data-i18n="db.c2.desc">Geo-redundant replication with RTO < 15 minutes and RPO < 5 minutes</p>
|
||||
<ul class="space-y-3 text-sm text-slate-600">
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Multi-site failover</li>
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Continuous backup</li>
|
||||
@@ -213,8 +209,8 @@
|
||||
</div>
|
||||
<div class="bg-slate-50 rounded-[2.5rem] p-10 border border-slate-100 hover:border-blue-200 transition-all hover:shadow-xl">
|
||||
<div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 text-white text-2xl"><i class="fas fa-lock"></i></div>
|
||||
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium">Security & Compliance</h4>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light">Role-based access control, encryption at rest/transit, and full audit logging</p>
|
||||
<h4 class="text-2xl font-semibold text-slate-900 mb-4 font-premium" data-i18n="db.c3.title">Security & Compliance</h4>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light" data-i18n="db.c3.desc">Role-based access control, encryption at rest/transit, and full audit logging</p>
|
||||
<ul class="space-y-3 text-sm text-slate-600">
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> ISO 27001 certified</li>
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> CCPA/GDPR compliant</li>
|
||||
@@ -222,7 +218,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-16"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase">Get Infrastructure Consultation <i class="fas fa-arrow-right"></i></a></div>
|
||||
<div class="text-center mt-16"><a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-2xl font-bold shadow-lg transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase" data-i18n="db.btn">Get Infrastructure Consultation</a></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -230,72 +226,72 @@
|
||||
<section id="products" class="py-32 bg-slate-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-24">
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">Precision Measurement</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium">Control Instruments</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light">Smart field instruments engineered for accuracy and reliability in demanding industrial environments.</p>
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="inst.badge">Precision Measurement</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="inst.title">Control Instruments</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="inst.desc">Smart field instruments engineered for accuracy and reliability in demanding industrial environments.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-water text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium">Flow Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light">Magnetic, Coriolis, and vortex flow meters with ±0.5% accuracy</p>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i1.title">Flow Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i1.desc">Magnetic, Coriolis, and vortex flow meters with ±0.5% accuracy</p>
|
||||
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Range: 0-1000 m³/h</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> 4-20mA / Pulse output</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> IP67 rated</div></div>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700">Get Quote →</a>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-gauge-high text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium">Pressure Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light">Differential and absolute pressure sensors for ultra-high sensitivity</p>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i2.title">Pressure Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i2.desc">Differential and absolute pressure sensors for ultra-high sensitivity</p>
|
||||
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Range: -1 to 1000 bar</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ±0.1% accuracy</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ATEX certified</div></div>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700">Get Quote →</a>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-thermometer-half text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium">Temperature Sensors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light">RTD, thermocouple, and infrared temperature measurement</p>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i3.title">Temperature Sensors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i3.desc">RTD, thermocouple, and infrared temperature measurement</p>
|
||||
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Range: -50 to +300°C</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ±0.3°C accuracy</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Fast response time</div></div>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700">Get Quote →</a>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-fill-drip text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium">Level Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light">Ultrasonic, radar, and capacitive level sensors</p>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i4.title">Level Transmitters</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i4.desc">Ultrasonic, radar, and capacitive level sensors</p>
|
||||
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Range: 0-30 meters</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ±2mm repeatability</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Dust-proof design</div></div>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700">Get Quote →</a>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-flask text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium">Analytical Sensors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light">pH, conductivity, oxygen, and dissolved gas analyzers</p>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i5.title">Analytical Sensors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i5.desc">pH, conductivity, oxygen, and dissolved gas analyzers</p>
|
||||
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Multi-parameter capability</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Automatic calibration</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Real-time data logging</div></div>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700">Get Quote →</a>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-sliders-h text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium">Valve Positioners</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light">Smart positioners with HART communication</p>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i6.title">Control Valves</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i6.desc">Smart positioners with HART communication</p>
|
||||
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> ±0.5% repeatability</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> HART protocol</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Self-tuning algorithm</div></div>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700">Get Quote →</a>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-wave-square text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium">Vibration Monitors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light">Accelerometers and velocity sensors for predictive maintenance</p>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i7.title">Vibration Monitors</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i7.desc">Accelerometers and velocity sensors for predictive maintenance</p>
|
||||
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Frequency: 0-20 kHz</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Wireless capability</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> FFT analysis ready</div></div>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700">Get Quote →</a>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
|
||||
<div class="h-48 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-microchip text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium">Smart Data Loggers</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light">IoT-enabled data acquisition units with cloud connectivity</p>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i8.title">Smart Data Loggers</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i8.desc">IoT-enabled data acquisition units with cloud connectivity</p>
|
||||
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> 16-32 analog channels</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> 4G/WiFi/Ethernet</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Local data storage</div></div>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700">Get Quote →</a>
|
||||
<a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-20 p-12 bg-gradient-to-r from-blue-600 to-blue-700 rounded-[2.5rem] text-white text-center">
|
||||
<h3 class="text-3xl font-semibold mb-4 font-premium">Custom Integration Available</h3>
|
||||
<p class="text-white/90 mb-8 max-w-2xl mx-auto font-light">All instruments integrate seamlessly with our DCS and SCADA platforms. Custom configurations available for specialized applications.</p>
|
||||
<a href="#contact" class="bg-white text-blue-600 hover:bg-slate-100 px-8 py-3 rounded-2xl font-bold transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase">Request Custom Configuration <i class="fas fa-arrow-right"></i></a>
|
||||
<h3 class="text-3xl font-semibold mb-4 font-premium" data-i18n="inst.custom.title">Custom Integration Available</h3>
|
||||
<p class="text-white/90 mb-8 max-w-2xl mx-auto font-light" data-i18n="inst.custom.desc">All instruments integrate seamlessly with our DCS and SCADA platforms.</p>
|
||||
<a href="#contact" class="bg-white text-blue-600 hover:bg-slate-100 px-8 py-3 rounded-2xl font-bold transition-all inline-flex items-center gap-3 font-industrial text-xs tracking-widest uppercase" data-i18n="inst.custom.btn">Request Custom Configuration</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -304,53 +300,45 @@
|
||||
<section id="services" class="py-32 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-24">
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">Our Capabilities</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium">World-Class Automation</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light">Specialized engineering for complex physical operations through advanced data integration and distributed control systems.</p>
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="svc.badge">Our Capabilities</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="svc.title">World-Class Automation</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="svc.desc">Specialized engineering for complex physical operations through advanced data integration and distributed control systems.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
||||
<div class="h-56 overflow-hidden"><img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800" alt="DCS" class="service-image w-full h-full object-cover grayscale transition-all duration-700"></div>
|
||||
<div class="p-10 flex-grow flex flex-col">
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500">
|
||||
<i class="fas fa-network-wired text-blue-600 group-hover:text-white text-xl"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium">DCS Integration</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">Redundant control architectures for utility-scale industries including power and chemical plants.</p>
|
||||
<a href="#dcs" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">Learn More <i class="fas fa-arrow-right"></i></a>
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500"><i class="fas fa-network-wired text-blue-600 group-hover:text-white text-xl"></i></div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium" data-i18n="svc.s1.title">DCS Integration</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow" data-i18n="svc.s1.desc">Redundant control architectures for utility-scale industries including power and chemical plants.</p>
|
||||
<a href="#dcs" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3" data-i18n="svc.s1.link">Learn More <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
||||
<div class="h-56 overflow-hidden"><img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800" alt="SCADA" class="service-image w-full h-full object-cover grayscale transition-all duration-700"></div>
|
||||
<div class="p-10 flex-grow flex flex-col">
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500">
|
||||
<i class="fas fa-chart-line text-blue-600 group-hover:text-white text-xl"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium">SCADA Design</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">Real-time monitoring platforms with advanced HMI and secure remote access protocols.</p>
|
||||
<a href="#services" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">Case Studies <i class="fas fa-arrow-right"></i></a>
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500"><i class="fas fa-chart-line text-blue-600 group-hover:text-white text-xl"></i></div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium" data-i18n="svc.s2.title">SCADA Design</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow" data-i18n="svc.s2.desc">Real-time monitoring platforms with advanced HMI and secure remote access protocols.</p>
|
||||
<a href="#services" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3" data-i18n="svc.s2.link">Case Studies <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
||||
<div class="h-56 overflow-hidden"><img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=800" alt="Historian" class="service-image w-full h-full object-cover grayscale transition-all duration-700"></div>
|
||||
<div class="p-10 flex-grow flex flex-col">
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500">
|
||||
<i class="fas fa-database text-blue-600 group-hover:text-white text-xl"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium">Data Historians</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">Mission-critical SQL infrastructure optimized for massive industrial time-series data storage.</p>
|
||||
<a href="#dbsvr" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">Data Security <i class="fas fa-arrow-right"></i></a>
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500"><i class="fas fa-database text-blue-600 group-hover:text-white text-xl"></i></div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium" data-i18n="svc.s3.title">Data Historians</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow" data-i18n="svc.s3.desc">Mission-critical SQL infrastructure optimized for massive industrial time-series data storage.</p>
|
||||
<a href="#dbsvr" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3" data-i18n="svc.s3.link">Data Security <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
||||
<div class="h-56 overflow-hidden"><img src="https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&q=80&w=800" alt="Instruments" class="service-image w-full h-full object-cover grayscale transition-all duration-700"></div>
|
||||
<div class="p-10 flex-grow flex flex-col">
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500">
|
||||
<i class="fas fa-gauge-high text-blue-600 group-hover:text-white text-xl"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium">Control Instruments</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">Smart field sensors for flow, pressure, and temperature with high-accuracy calibration.</p>
|
||||
<a href="#products" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">Product Catalog <i class="fas fa-arrow-right"></i></a>
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500"><i class="fas fa-gauge-high text-blue-600 group-hover:text-white text-xl"></i></div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium" data-i18n="svc.s4.title">Control Instruments</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow" data-i18n="svc.s4.desc">Smart field sensors for flow, pressure, and temperature with high-accuracy calibration.</p>
|
||||
<a href="#products" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3" data-i18n="svc.s4.link">Product Catalog <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -365,22 +353,22 @@
|
||||
<div class="aspect-square rounded-[3rem] overflow-hidden shadow-2xl"><img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=1000" alt="About Hanmo" class="w-full h-full object-cover"></div>
|
||||
<div class="absolute -bottom-10 -right-10 p-10 bg-blue-600 text-white rounded-[2rem] shadow-2xl max-w-xs">
|
||||
<div class="text-6xl font-extralight mb-4 font-premium">15+</div>
|
||||
<div class="text-xs font-bold uppercase tracking-widest leading-loose">Years of Industrial Excellence</div>
|
||||
<div class="text-xs font-bold uppercase tracking-widest leading-loose" data-i18n="about.years">Years of Industrial Excellence</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-10">
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">About Hanmo</h2>
|
||||
<h3 class="text-4xl md:text-5xl font-light text-slate-900 mb-8 premium-kerning font-premium">Trusted Partner in Industrial Automation</h3>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light">Since our founding, Hanmo Control & Network Co., Ltd. has been at the forefront of industrial automation engineering. We specialize in designing, implementing, and maintaining mission-critical control systems for the world's most demanding industries.</p>
|
||||
<p class="text-slate-500 leading-relaxed mb-12 font-light">Our team of 60+ certified engineers brings decades of combined experience in DCS, SCADA, and industrial networking, ensuring your operations run with unmatched precision and reliability.</p>
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="about.badge">About Hanmo</h2>
|
||||
<h3 class="text-4xl md:text-5xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="about.title">Trusted Partner in Industrial Automation</h3>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light" data-i18n="about.p1">Since our founding, Hanmo Control & Network Co., Ltd. has been at the forefront of industrial automation engineering.</p>
|
||||
<p class="text-slate-500 leading-relaxed mb-12 font-light" data-i18n="about.p2">Our team of 60+ certified engineers brings decades of combined experience in DCS, SCADA, and industrial networking.</p>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||
<div class="text-3xl font-light text-slate-900 mb-1 font-premium">ISO 9001</div>
|
||||
<div class="text-xs text-slate-400 uppercase tracking-widest font-industrial font-semibold">Certified</div>
|
||||
<div class="text-xs text-slate-400 uppercase tracking-widest font-industrial font-semibold" data-i18n="about.cert">Certified</div>
|
||||
</div>
|
||||
<div class="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||
<div class="text-3xl font-light text-slate-900 mb-1 font-premium">24 / 7</div>
|
||||
<div class="text-xs text-slate-400 uppercase tracking-widest font-industrial font-semibold">Support</div>
|
||||
<div class="text-xs text-slate-400 uppercase tracking-widest font-industrial font-semibold" data-i18n="about.support">Support</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -392,19 +380,19 @@
|
||||
<section id="contact" class="py-32 bg-slate-900">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 class="text-blue-400 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">Get In Touch</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-white mb-8 premium-kerning font-premium">Start Your Project</h3>
|
||||
<p class="text-slate-400 text-lg leading-relaxed font-light">Contact our engineering team for a detailed consultation and project assessment.</p>
|
||||
<h2 class="text-blue-400 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="contact.badge">Get In Touch</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-white mb-8 premium-kerning font-premium" data-i18n="contact.title">Start Your Project</h3>
|
||||
<p class="text-slate-400 text-lg leading-relaxed font-light" data-i18n="contact.desc">Contact our engineering team for a detailed consultation and project assessment.</p>
|
||||
</div>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="grid grid-cols-1 gap-5">
|
||||
<div class="grid grid-cols-2 gap-5">
|
||||
<input type="text" id="contact-name" placeholder="Full Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
<input type="email" id="contact-email" placeholder="Email Address" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
<input type="text" id="contact-name" data-i18n="contact.name" data-i18n-type="placeholder" placeholder="Full Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
<input type="email" id="contact-email" data-i18n="contact.email" data-i18n-type="placeholder" placeholder="Email Address" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
</div>
|
||||
<input type="text" id="contact-company" placeholder="Company Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
<textarea rows="5" id="contact-message" placeholder="Describe your project requirements..." class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors resize-none font-light"></textarea>
|
||||
<button id="contact-submit" class="bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold transition-all hover:-translate-y-0.5 font-industrial text-xs tracking-widest uppercase shadow-2xl">Send Message</button>
|
||||
<input type="text" id="contact-company" data-i18n="contact.company" data-i18n-type="placeholder" placeholder="Company Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
<textarea rows="5" id="contact-message" data-i18n="contact.msg" data-i18n-type="placeholder" placeholder="Describe your project requirements..." class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors resize-none font-light"></textarea>
|
||||
<button id="contact-submit" class="bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold transition-all hover:-translate-y-0.5 font-industrial text-xs tracking-widest uppercase shadow-2xl" data-i18n="contact.btn">Send Message</button>
|
||||
<div id="contact-status" class="hidden p-5 rounded-2xl text-center font-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -422,10 +410,14 @@
|
||||
<span class="text-white font-bold font-industrial text-sm">HANMO</span>
|
||||
<span class="text-slate-500 text-xs font-industrial">Control & Network Co., Ltd.</span>
|
||||
</div>
|
||||
<p class="text-slate-600 text-xs font-light">© 2024 Hanmo Control & Network Co., Ltd. All rights reserved.</p>
|
||||
<p class="text-slate-600 text-xs font-light" data-i18n="footer.copy">© 2024 Hanmo Control & Network Co., Ltd. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- EmailJS SDK -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
|
||||
<!-- i18n 먼저 로드 후 script.js -->
|
||||
<script src="assets/js/i18n.js"></script>
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,287 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hanmo Control & Network Co., Ltd. | Control Precision</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">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header id="main-header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-6">
|
||||
<div class="container mx-auto px-6 flex justify-between items-center">
|
||||
<a href="#home" class="flex items-center gap-3 group">
|
||||
<div class="bg-blue-600 w-10 h-10 rounded-lg flex items-center justify-center shrink-0 shadow-lg group-hover:bg-blue-700 transition-colors">
|
||||
<span class="text-white font-bold text-xl font-industrial">H</span>
|
||||
</div>
|
||||
<div class="flex flex-col leading-none">
|
||||
<span id="brand-name" class="font-bold text-xl tracking-tight font-industrial text-white transition-colors duration-300">
|
||||
HANMO
|
||||
</span>
|
||||
<span id="brand-sub" class="text-[9px] font-bold uppercase tracking-[0.2em] mt-1 text-blue-500">
|
||||
Control & Network
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<nav class="hidden md:flex gap-10">
|
||||
<a href="#home" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Home</a>
|
||||
<a href="#dcs" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">DCS</a>
|
||||
<a href="#batch" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Batch Process</a>
|
||||
<a href="#dbsvr" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Database Server</a>
|
||||
<a href="#products" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Instruments</a>
|
||||
<a href="#services" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Services</a>
|
||||
<a href="#about" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">About</a>
|
||||
<a href="#contact" class="nav-link text-sm font-semibold text-slate-100 hover:text-blue-500 transition-colors">Contact</a>
|
||||
</nav>
|
||||
|
||||
<div class="hidden md:block">
|
||||
<button class="bg-blue-600 hover:bg-blue-700 text-white px-7 py-2.5 rounded-full text-xs font-bold shadow-xl transition-all active:scale-95 font-industrial tracking-widest uppercase">
|
||||
Request Quote
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button id="mobile-menu-btn" class="md:hidden text-white p-2">
|
||||
<i class="fas fa-bars text-2xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- MOBILE MENU -->
|
||||
<div id="mobile-menu" class="fixed inset-0 z-[60] bg-slate-900 flex flex-col p-8 transition-transform translate-x-full duration-500">
|
||||
<div class="flex justify-end mb-12">
|
||||
<button id="close-menu-btn" class="text-white text-3xl">×</button>
|
||||
</div>
|
||||
<nav class="flex flex-col gap-8 text-center">
|
||||
<a href="#home" class="text-2xl font-light text-white font-premium">Home</a>
|
||||
<a href="#services" class="text-2xl font-light text-white font-premium">Services</a>
|
||||
<a href="#about" class="text-2xl font-light text-white font-premium">About</a>
|
||||
<a href="#contact" class="text-2xl font-light text-white font-premium">Contact</a>
|
||||
<button class="mt-8 bg-blue-600 text-white py-5 rounded-2xl font-bold font-industrial tracking-widest uppercase">Request Quote</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<main>
|
||||
<!-- HERO SECTION -->
|
||||
<section id="home" class="relative min-h-screen flex items-center pt-20 overflow-hidden bg-slate-900">
|
||||
<div class="absolute inset-0 z-0 opacity-50">
|
||||
<img src="assets/images/ControlRoom3.png" alt="Industrial Facility" class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900/80 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-6 relative z-10">
|
||||
<div class="max-w-5xl animate-fade-in">
|
||||
<div class="inline-block px-4 py-1.5 mb-8 rounded-full bg-blue-600/20 border border-blue-400/30 text-blue-400 text-[10px] font-bold uppercase industrial-tracking font-industrial">
|
||||
Precision Industrial Control
|
||||
</div>
|
||||
<h1 class="text-5xl md:text-8xl font-extralight text-white mb-8 hero-title premium-kerning font-premium">
|
||||
Engineering <span class="text-blue-500 font-normal">Precision</span> <br class="hidden md:block"/> Industrial Control
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-slate-300 mb-12 leading-relaxed max-w-2xl font-premium font-light opacity-80">
|
||||
Hanmo Control & Network Co., Ltd. provides elite-tier DCS and SCADA architectures for critical infrastructure and modern digital transformation.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-5">
|
||||
<a href="#services" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-2xl font-bold shadow-2xl transition-all hover:-translate-y-1 text-center font-industrial text-xs tracking-widest uppercase">
|
||||
Explore Expertise
|
||||
</a>
|
||||
<a href="#contact" class="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-md px-10 py-5 rounded-2xl font-bold transition-all text-center font-industrial text-xs tracking-widest uppercase">
|
||||
Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-24 grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-10 max-w-7xl animate-fade-in" style="animation-delay: 0.3s">
|
||||
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
||||
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">100+</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">SITES Experiences</div>
|
||||
</div>
|
||||
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
||||
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">Honeywell</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">SI Partner</div>
|
||||
</div>
|
||||
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
||||
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">Precision</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">Instrumentation design</div>
|
||||
</div>
|
||||
<div class="p-8 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/10">
|
||||
<div class="text-3xl md:text-5xl font-extralight text-white mb-2 font-premium premium-kerning">20+</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">Years Excellence</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SERVICES SECTION -->
|
||||
<section id="services" class="py-32 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-24">
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">Our Capabilities</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium">World-Class Automation</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light">
|
||||
Specialized engineering for complex physical operations through advanced data integration and distributed control systems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- DCS -->
|
||||
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
||||
<div class="h-56 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800" alt="DCS" class="service-image w-full h-full object-cover grayscale transition-all duration-700">
|
||||
</div>
|
||||
<div class="p-10 flex-grow flex flex-col">
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500">
|
||||
<i class="fas fa-network-wired text-blue-600 group-hover:text-white text-xl"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium">DCS Integration</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">
|
||||
Redundant control architectures for utility-scale industries including power and chemical plants.
|
||||
</p>
|
||||
<a href="#" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">
|
||||
Technical Specs <i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SCADA -->
|
||||
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
||||
<div class="h-56 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800" alt="SCADA" class="service-image w-full h-full object-cover grayscale transition-all duration-700">
|
||||
</div>
|
||||
<div class="p-10 flex-grow flex flex-col">
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500">
|
||||
<i class="fas fa-chart-line text-blue-600 group-hover:text-white text-xl"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium">SCADA Design</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">
|
||||
Real-time monitoring platforms with advanced HMI and secure remote access protocols.
|
||||
</p>
|
||||
<a href="#" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">
|
||||
Case Studies <i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Database -->
|
||||
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
||||
<div class="h-56 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=800" alt="Historian" class="service-image w-full h-full object-cover grayscale transition-all duration-700">
|
||||
</div>
|
||||
<div class="p-10 flex-grow flex flex-col">
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500">
|
||||
<i class="fas fa-database text-blue-600 group-hover:text-white text-xl"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium">Data Historians</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">
|
||||
Mission-critical SQL infrastructure optimized for massive industrial time-series data storage.
|
||||
</p>
|
||||
<a href="#" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">
|
||||
Data Security <i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Instruments -->
|
||||
<div class="service-card group flex flex-col h-full bg-slate-50 rounded-[2.5rem] overflow-hidden border border-transparent hover:border-blue-100 transition-all duration-500 hover:shadow-2xl">
|
||||
<div class="h-56 overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&q=80&w=800" alt="Instruments" class="service-image w-full h-full object-cover grayscale transition-all duration-700">
|
||||
</div>
|
||||
<div class="p-10 flex-grow flex flex-col">
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-8 group-hover:bg-blue-600 transition-all duration-500">
|
||||
<i class="fas fa-gauge-high text-blue-600 group-hover:text-white text-xl"></i>
|
||||
</div>
|
||||
<h4 class="text-2xl font-normal text-slate-900 mb-4 font-premium">Control Instruments</h4>
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flex-grow">
|
||||
Smart field sensors for flow, pressure, and temperature with high-accuracy calibration.
|
||||
</p>
|
||||
<a href="#" class="text-blue-600 font-bold text-xs uppercase tracking-widest flex items-center gap-3">
|
||||
Product Catalog <i class="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT SECTION -->
|
||||
<section id="about" class="py-32 bg-slate-50">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="grid lg:grid-cols-2 gap-20 items-center">
|
||||
<div class="relative">
|
||||
<div class="aspect-square rounded-[3rem] overflow-hidden shadow-2xl">
|
||||
<img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=1000" alt="About Hanmo" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<div class="absolute -bottom-10 -right-10 p-10 bg-blue-600 text-white rounded-[2rem] shadow-2xl max-w-xs">
|
||||
<div class="text-6xl font-extralight mb-4 font-premium">15+</div>
|
||||
<div class="text-xs font-bold uppercase tracking-widest leading-loose">Years of Industrial Excellence</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-10">
|
||||
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">About Hanmo</h2>
|
||||
<h3 class="text-4xl md:text-5xl font-light text-slate-900 mb-8 premium-kerning font-premium">Trusted Partner in Industrial Automation</h3>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 font-light">
|
||||
Since our founding, Hanmo Control & Network Co., Ltd. has been at the forefront of industrial automation engineering. We specialize in designing, implementing, and maintaining mission-critical control systems for the world's most demanding industries.
|
||||
</p>
|
||||
<p class="text-slate-500 leading-relaxed mb-12 font-light">
|
||||
Our team of 60+ certified engineers brings decades of combined experience in DCS, SCADA, and industrial networking, ensuring your operations run with unmatched precision and reliability.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||
<div class="text-3xl font-light text-slate-900 mb-1 font-premium">ISO 9001</div>
|
||||
<div class="text-xs text-slate-400 uppercase tracking-widest font-industrial font-semibold">Certified</div>
|
||||
</div>
|
||||
<div class="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||
<div class="text-3xl font-light text-slate-900 mb-1 font-premium">24 / 7</div>
|
||||
<div class="text-xs text-slate-400 uppercase tracking-widest font-industrial font-semibold">Support</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT SECTION -->
|
||||
<section id="contact" class="py-32 bg-slate-900">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 class="text-blue-400 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial">Get In Touch</h2>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-white mb-8 premium-kerning font-premium">Start Your Project</h3>
|
||||
<p class="text-slate-400 text-lg leading-relaxed font-light">
|
||||
Contact our engineering team for a detailed consultation and project assessment.
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="grid grid-cols-1 gap-5">
|
||||
<div class="grid grid-cols-2 gap-5">
|
||||
<input type="text" placeholder="Full Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
<input type="email" placeholder="Email Address" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
</div>
|
||||
<input type="text" placeholder="Company Name" class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors font-light">
|
||||
<textarea rows="5" placeholder="Describe your project requirements..." class="bg-white/5 border border-white/10 text-white placeholder-slate-500 px-6 py-5 rounded-2xl focus:outline-none focus:border-blue-500 transition-colors resize-none font-light"></textarea>
|
||||
<button class="bg-blue-600 hover:bg-blue-700 text-white py-5 rounded-2xl font-bold transition-all hover:-translate-y-0.5 font-industrial text-xs tracking-widest uppercase shadow-2xl">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="bg-slate-950 py-12 border-t border-white/5">
|
||||
<div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-blue-600 w-8 h-8 rounded-lg flex items-center justify-center">
|
||||
<span class="text-white font-bold text-sm font-industrial">H</span>
|
||||
</div>
|
||||
<span class="text-white font-bold font-industrial text-sm">HANMO</span>
|
||||
<span class="text-slate-500 text-xs font-industrial">Control & Network Co., Ltd.</span>
|
||||
</div>
|
||||
<p class="text-slate-600 text-xs font-light">© 2024 Hanmo Control & Network Co., Ltd. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1 +1 @@
|
||||
{"cpu_temp": "43", "nvme_temp": "35", "uptime_days": 2, "last_update": "06:45:01"}
|
||||
{"cpu_temp": "39", "nvme_temp": "33", "uptime_days": 2, "last_update": "11:11:01"}
|
||||
Reference in New Issue
Block a user