windpacer/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

항목수정 및 언어버튼 가시성 수정

Browse Source
This commit is contained in:
Wind
2026-02-17 11:36:09 +09:00
parent b288a964d1
commit fd51c36120
30 changed files with 4227 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
html/assets/css/style.css
View File

@@ -38,16 +38,70 @@ body {
filter: grayscale(0);
}
/* ── 헤더 & 네비게이션 ───────────────────────────────────── */
/* 기본 상태: 투명 배경 위 (흰색 텍스트) */
.nav-link {
color: white;
}
#brand-name {
color: white;
}
/* 스크롤 시: 흰색 배경 (어두운 텍스트) */
#main-header.scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
#main-header.scrolled .nav-link {
color: #1e293b;
}
#main-header.scrolled #brand-name {
color: #1e293b;
}
/* ── 언어 전환 버튼 ───────────────────────────────────────── */
/* 기본 상태: 투명 배경 위 (흰색) */
.lang-btn {
background: transparent;
opacity: 0.5;
transition: all 0.2s;
color: white;
opacity: 0.85;
transition: all 0.3s;
}
.lang-btn:hover {
opacity: 0.8;
}
.lang-btn.active-lang {
background: #2563eb;
opacity: 1;
}
.lang-btn.active-lang {
background: rgba(37, 99, 235, 0.9);
opacity: 1;
}
/* 스크롤 시: 흰색 배경 (어두운 텍스트) */
#main-header.scrolled .lang-btn {
color: #1e293b;
opacity: 0.7;
}
#main-header.scrolled .lang-btn:hover {
opacity: 1;
}
#main-header.scrolled .lang-btn.active-lang {
background: #2563eb;
color: white;
opacity: 1;
}
/* 언어 버튼 컨테이너 테두리 */
#lang-container {
border-color: rgba(255, 255, 255, 0.3);
}
#main-header.scrolled #lang-container {
border-color: rgba(0, 0, 0, 0.15);
}

BIN
html/assets/images/bearing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
html/assets/images/instrument.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

BIN
html/assets/images/reactor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

132
html/assets/js/i18n.js
View File

@@ -9,7 +9,7 @@ const translations = {
'nav.batch' : 'Batch Process',
'nav.dbsvr' : 'Database Server',
'nav.products' : 'Instruments',
'nav.services' : 'Services',
'nav.services' : 'References',
'nav.about' : 'About',
'nav.contact' : 'Contact',
'nav.quote' : 'Request Quote',
@@ -43,8 +43,8 @@ const translations = {
'batch.badge' : 'Process Automation',
'batch.title' : 'Batch Process Control',
'batch.desc' : 'Not only precision control, but also production planning, process data & historical lot management, you can get it by our Batch Manager software.',
'batch.f1.title': 'Batch Manager System',
'batch.f1.desc' : 'Process control & data, production scheduling, and productionlot management in a software platform for HC900',
'batch.f1.title': 'Batch Manager Software',
'batch.f1.desc' : 'Process control data and production data management per lot no. in a software platform',
'batch.f2.title': 'ControlEdge HC900',
'batch.f2.desc' : 'Over the PLC for continuous and batch process control, Hybrid Controller from Honeywell. it is perfect solution of batch plant',
'batch.f3.title': 'Process Data Management',
@@ -92,28 +92,48 @@ const translations = {
'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.',
// REFERENCES
'svc.badge' : 'Referenced Plant Varieties',
'svc.title' : 'Versatile Automation References',
'svc.desc' : 'From Deep Understanding of various industry references to Seamless Execution.',
'svc.s1.title' : 'DCS / SCADA',
'svc.s1.desc' : 'Semiconductor Solvent Recovery Plant., 80% Hydrazin Plant, SNCR & SCR Envirionmental Plant, etc',
'svc.s1.item1' : 'Semiconductor Solvent Recovery Plant',
'svc.s1.item2' : '80% Hydrazin Plant',
'svc.s1.item3' : 'SNCR & SCR in Power Plant',
'svc.s1.item4' : 'Oil Tank Terminal',
'svc.s1.link' : 'Learn More',
'svc.s2.title' : 'SCADA Design',
'svc.s2.title' : 'Batch Plant',
'svc.s2.desc' : 'Real-time monitoring platforms with advanced HMI and secure remote access protocols.',
'svc.s2.item1' : 'Micro Capsule forming agent plant',
'svc.s2.item2' : 'ADCA,HDCA Plant',
'svc.s2.item3' : 'Vacuum Furnace Plant - Decorative Stainless Plate',
'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.s3.title' : 'Other Projects',
'svc.s3.desc' : 'Various industrial automation projects.',
'svc.s3.item1' : 'Waste to Energy Incineration Plant',
'svc.s3.item2' : 'Copper Rod Continuous Casting Plant',
'svc.s3.item3' : 'Bearing Continuous Heat Treatment Plant',
'svc.s3.item4' : 'High Speed Cold Rolling Continuous Casting Plant',
'svc.s3.link' : 'CASE STUDIES',
'svc.s4.title' : 'Instruments',
'svc.s4.desc' : 'Smart field sensors for flow, pressure, and temperature with high-accuracy calibration.',
'svc.s4.item1' : 'Honeywell',
'svc.s4.item2' : 'Azbil',
'svc.s4.item3' : 'Endress Hauser',
'svc.s4.item4' : 'Flownics',
'svc.s4.item5' : 'Komoto - (Motoyama Korea)',
'svc.s4.item6' : 'Autonics - (Konics)',
'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.p2' : 'Our certified engineers brings decades of combined experience in DCS, SCADA, instrumentation and industrial networking, ensuring your operations run with unmatched precision and reliability.',
'about.cert' : 'Certified',
'about.support' : 'Support',
'about.years' : 'Years of Industrial Excellence',
@@ -144,7 +164,7 @@ const translations = {
'nav.batch' : '배치 프로세스',
'nav.dbsvr' : '데이터베이스 서버',
'nav.products' : '계측기기',
'nav.services' : '서비스',
'nav.services' : '실적 플랜트 분야',
'nav.about' : '회사소개',
'nav.contact' : '문의하기',
'nav.quote' : '견적 요청',
@@ -161,13 +181,13 @@ const translations = {
'stat.years' : '년 업계 경력',
// DCS
'dcs.badge' : '고급 제어 시스템',
'dcs.badge' : '공정 제어 시스템',
'dcs.title' : 'DCS 통합 솔루션',
'dcs.desc' : '가장 중요한 공정 현장을 위한 엔터프라이즈급 분산 제어 시스템(DCS) 아키텍처를 설계합니다.',
'dcs.f0.title' : 'Honeywell Experion PKS',
'dcs.f0.desc' : 'Honeywell Experion PKS 플랫폼을 기반으로 한 안정적인 DCS 솔루션',
'dcs.desc' : '중요한 공정 현장을 위한 엔터프라이즈급 분산 제어 시스템(DCS) 아키텍처를 설계합니다.',
'dcs.f0.title' : 'Honeywell Experion',
'dcs.f0.desc' : 'Honeywell Experion 플랫폼을 기반으로 한 안정적이고 다양한 DCS 솔루션을 제공합니다.',
'dcs.f1.title' : '이중화 아키텍처',
'dcs.f1.desc' : '이중화 서버로 99.99% 가동률을 보장하는 내결함성 시스템',
'dcs.f1.desc' : '이중화 서버 & 컨트롤러,통신으로 99.99% 가동률을 보장하는 내결함성 시스템',
'dcs.f2.title' : '실시간 통신',
'dcs.f2.desc' : '밀리초 미만의 응답 시간으로 다중 노드 간 동기화된 제어 실현',
'dcs.f3.title' : '보안 인증',
@@ -175,15 +195,19 @@ const translations = {
'dcs.btn' : '기술 사양 요청',
// BATCH
'batch.badge' : '프로세스 자동화',
'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.desc' : '배치 프로세스 자동화는 생산 제품의 다양성을 위한 정밀제어 및 제품별 설정 데이터 생성 및 관리, 생산 로트 이력관리가 하나의 시스템에서 실현됩니다. 반응기, 산업로(배치,연속 혼재공정) 등의 배치 플랜트에 최적화된 제어 시스템과 소프트웨어 솔루션을 제공합니다.',
'batch.f1.title': '배치 매니저 소프트웨어',
'batch.f1.desc' : '제품별 설정값 패턴 ,레시피, 로트관리 등의 제어와 생산 데이터베이스가 하나의 시스템에서 제공됩니다',
'batch.f2.title': 'ControlEdge HC900',
'batch.f2.desc' : '설정값 패턴 프로그램, 레시피, 정밀 PID 제어, PLC를 넘어서는 하이브리드 컨트롤러로 배치 플랜트에 최적화된 솔루션',
'batch.f3.title': 'MES,ERP 연동',
'batch.f3.desc' : '자사 데이터베이스 서버를 통한, 손쉬운 MES, ERP 연동으로 생산 스케쥴 관리 지원 가능',
'batch.f4.title': '신속한 운전 설정',
'batch.f4.desc' : '단 한번의 다운로드로, 제품별 생산 환경 설정이 초단위로 완료됩니다',
'batch.f5.title': '생산 로트 이력 관리',
'batch.f5.desc' : '생산 로트 관리 및 로트별 차트 그래프를 제공하여 이력 데이터 분석에 탁월.',
'batch.btn' : '구축 상담 신청',
// DBSVR
@@ -223,31 +247,48 @@ const translations = {
'inst.custom.btn' : '맞춤 구성 요청',
'inst.quote' : '견적 요청 →',
// SERVICES
'svc.badge' : '서비스 역량',
'svc.title' : '세계 최고 수준의 자동화',
'svc.desc' : '고급 데이터 통합 및 분산 제어 시스템을 통해 복잡한 공정 공정을 위한 특화된 엔지니어링을 제공합니다.',
'svc.s1.title' : 'DCS 통합',
'svc.s1.desc' : '발전소, 화학 플랜트 등 대규모 공정을 위한 이중화 제어 아키텍처',
// REFERENCES
'svc.badge' : '실적 플랜트 분야',
'svc.title' : '다양한 산업 분야의 자동화 실적',
'svc.desc' : '공정에 대한 깊이있는 이해와 경험을 바탕으로 복잡한 공정을 위한 특화된 엔지니어링을 제공합니다.',
'svc.s1.title' : 'DCS / SCADA',
'svc.s1.desc' : '반도체용 솔벤트 회수 플랜트, 발전소, 화학 플랜트 등 대규모 공정을 위한 이중화 제어 아키텍처',
'svc.s1.item1' : '반도체용 솔벤트 회수 플랜트',
'svc.s1.item2' : '80% 하이드라진 플랜트',
'svc.s1.item3' : '발전소 SNCR & SCR 플랜트',
'svc.s1.item4' : '오일 탱크 터미널 플랜트',
'svc.s1.link' : '자세히 보기',
'svc.s2.title' : 'SCADA 설계',
'svc.s2.desc' : '고급 HMI 및 보안 원격 접속 프로토콜을 갖춘 실시간 모니터링 플랫폼',
'svc.s2.title' : '배치 플랜트',
'svc.s2.desc' : '실시간 모니터링 플랫폼과 고급 HMI, 안전한 원격 액세스 프로토콜을 갖춘 배치 플랜트 제어 시스템',
'svc.s2.item1' : '마이크로 캡슐 발포제 플랜트',
'svc.s2.item2' : 'ADCA,HDCA 플랜트',
'svc.s2.item3' : '진공 열처리로 플랜트',
'svc.s2.link' : '사례 연구',
'svc.s3.title' : '데이터 히스토리안',
'svc.s3.desc' : '대규모 공정 시계열 데이터 저장에 최적화된 미션 크리티컬 SQL 인프라',
'svc.s3.title' : '기타 프로젝트',
'svc.s3.desc' : '기타 핵심 산업 자동화',
'svc.s3.item1' : '쓰레기 소각장 플랜트',
'svc.s3.item2' : '구리 환재 연속 주조로',
'svc.s3.item3' : '베어링 연속 열처리로 플랜트',
'svc.s3.item4' : '고속 냉간 연속 주조로 플랜트',
'svc.s3.link' : '데이터 보안',
'svc.s4.title' : '제어 계측기기',
'svc.s4.desc' : '고정밀 교정을 통한 유량, 압력, 온도 스마트 현장 센서',
'svc.s4.title' : '제어 계측기기 협력사',
'svc.s4.desc' : '고객 현장에 대한 깊은 이해를 바탕으로 최적 계측기 선정',
'svc.s4.item1' : '한국하니웰(주)',
'svc.s4.item2' : '한국아즈빌(주)',
'svc.s4.item3' : '엔드레스하우저',
'svc.s4.item4' : '플로우닉스(주)',
'svc.s4.item5' : '(주)코모토',
'svc.s4.item6' : '오토닉스(주)',
'svc.s4.link' : '제품 카탈로그',
// ABOUT
'about.badge' : '회사 소개',
'about.title' : '공정 자동화의 신뢰할 수 있는 파트너',
'about.p1' : '(주)한모씨앤앤는 창립 이래 공정 자동화 엔지니어링의 최전선에서 활동하고 있습니다. 세계에서 가장 까다로운 공정 현장을 위한 미션 크리티컬 제어 시스템 설계, 구현 및 유지보수를 전문으로 합니다.',
'about.p2' : '60여 명의 공인 엔지니어로 구성된 팀이 DCS, SCADA, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
'about.p2' : 'DCS, SCADA, 계측기기, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
'about.cert' : '인증',
'about.support' : '지원',
'about.years' : '년 공정 분야 우수성',
'about.years' : '여년간의 공정 제어 전문성',
// CONTACT
'contact.badge' : '문의하기',
@@ -265,7 +306,7 @@ const translations = {
'contact.error.fail' : '❌ 전송에 실패했습니다. 잠시 후 다시 시도해 주세요.',
// FOOTER
'footer.copy' : '© 2024 (주)한모씨앤앤. All rights reserved.',
'footer.copy' : '© (주)한모씨앤앤. All rights reserved.',
}
};
@@ -288,8 +329,10 @@ function applyTranslations() {
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);
@@ -302,4 +345,5 @@ function switchLang(lang) {
applyTranslations();
}
// DOMContentLoaded 시 번역 적용
document.addEventListener('DOMContentLoaded', applyTranslations);

150
html/assets/js/script.js
View File

@@ -1,89 +1,75 @@
// ============================================================
// ★ EmailJS 설정 - 아래 3가지 값을 본인 계정으로 교체하세요 ★
// ============================================================
const EMAILJS_PUBLIC_KEY = 'HO6i369gX6X5HEXtJ';
const EMAILJS_SERVICE_ID = 'service_4ur5lqd';
const EMAILJS_TEMPLATE_ID = 'template_jp0v5qv';
// 메인 스크립트 (전체 기능 포함)
// ============================================================
emailjs.init(EMAILJS_PUBLIC_KEY);
// DOMContentLoaded 이벤트
document.addEventListener('DOMContentLoaded', () => {
// ── 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');
// ============================================================
// 메뉴 토글
// ============================================================
const menuBtn = document.querySelector('.menu-btn');
const navMenu = document.querySelector('.nav-menu');
if (menuBtn && navMenu) {
menuBtn.addEventListener('click', () => {
navMenu.classList.toggle('open');
menuBtn.classList.toggle('open');
});
});
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');
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'));
} 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'));
}
// ============================================================
// 스크롤 애니메이션
// ============================================================
const scrollElems = document.querySelectorAll('[data-scroll]');
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const scrollObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
observer.unobserve(entry.target);
}
});
}, observerOptions);
scrollElems.forEach(el => scrollObserver.observe(el));
// ============================================================
// 상단 버튼/헤더 스크롤 효과
// ============================================================
const header = document.querySelector('header');
const topBtn = document.querySelector('.back-to-top');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
header?.classList.add('scrolled');
topBtn?.classList.add('visible');
} else {
header?.classList.remove('scrolled');
topBtn?.classList.remove('visible');
}
});
topBtn?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
// ============================================================
// 기타 커스텀 이벤트/버튼
// ============================================================
// 예: 상담 신청 모달 열기
document.querySelectorAll('.open-consult').forEach(btn => {
btn.addEventListener('click', () => {
const modal = document.querySelector('#consult-modal');
modal?.classList.add('open');
});
});
// 예: 모달 닫기
document.querySelectorAll('.modal .close-btn').forEach(btn => {
btn.addEventListener('click', () => {
const modal = btn.closest('.modal');
modal?.classList.remove('open');
});
});
});
// ── Mobile menu ───────────────────────────────────────────────
const mobileMenuBtn = document.getElementById('mobile-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 (closeMenuBtn) closeMenuBtn.addEventListener('click', () => mobileMenu.classList.add('translate-x-full'));
const mobileNavLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];
mobileNavLinks.forEach(link => link.addEventListener('click', () => mobileMenu.classList.add('translate-x-full')));

165
html/index.html
View File

@@ -36,21 +36,21 @@
</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" 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>
<a href="#home" class="nav-link text-sm font-semibold hover:text-blue-500 transition-colors" data-i18n="nav.home">Home</a>
<a href="#dcs" class="nav-link text-sm font-semibold hover:text-blue-500 transition-colors" data-i18n="nav.dcs">DCS</a>
<a href="#batch" class="nav-link text-sm font-semibold hover:text-blue-500 transition-colors" data-i18n="nav.batch">Batch Process</a>
<a href="#dbsvr" class="nav-link text-sm font-semibold hover:text-blue-500 transition-colors" data-i18n="nav.dbsvr">Database Server</a>
<a href="#products" class="nav-link text-sm font-semibold hover:text-blue-500 transition-colors" data-i18n="nav.products">Instruments</a>
<a href="#services" class="nav-link text-sm font-semibold hover:text-blue-500 transition-colors" data-i18n="nav.services">Services</a>
<a href="#about" class="nav-link text-sm font-semibold hover:text-blue-500 transition-colors" data-i18n="nav.about">About</a>
<a href="#contact" class="nav-link text-sm font-semibold hover:text-blue-500 transition-colors" data-i18n="nav.contact">Contact</a>
</nav>
<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 id="lang-container" class="flex rounded-full overflow-hidden border border-white/30 transition-colors duration-300">
<button onclick="switchLang('en')" data-lang="en" class="lang-btn px-3 py-1.5 text-[10px] font-bold font-industrial">EN</button>
<button onclick="switchLang('ko')" data-lang="ko" class="lang-btn px-3 py-1.5 text-[10px] font-bold font-industrial">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>
@@ -65,9 +65,9 @@
<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-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 class="flex rounded-full overflow-hidden border border-white/30">
<button onclick="switchLang('en')" data-lang="en" class="lang-btn px-4 py-2 text-xs font-bold font-industrial">EN</button>
<button onclick="switchLang('ko')" data-lang="ko" class="lang-btn px-4 py-2 text-xs font-bold font-industrial">KO</button>
</div>
<button id="close-menu-btn" class="text-white text-3xl">&times;</button>
</div>
@@ -320,13 +320,13 @@
</div>
</section>
<!-- SERVICES SECTION -->
<!-- REFERENCES 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" 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>
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="svc.badge">Referenced Plant Varieties</h2>
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="svc.title">Versatile Automation References</h3>
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="svc.desc">From Deep Understanding of various industry references to Seamless Execution.</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">
@@ -334,34 +334,147 @@
<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" 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>
<!--<p class="text-slate-500 text-sm leading-relaxed mb-10 font-light flx-grow" data-i18n="svc.s1.desc">Semiconductor Solvent Recovery & Production Plant., 80% Hydragin Plant, SNCR & SCR Envirionmental Plant, etc</p>-->
<ul class="text-slate-500 text-xs md:text-sm
leading-relaxed
mb-8 md:mb-10
font-light
flex-grow
space-y-3">
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s1.item1"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s1.item2"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s1.item3"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s1.item4"></span>
</li>
</ul>
<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="h-56 overflow-hidden"><img src="assets/images/reactor.png?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" 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>
<!--<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>-->
<ul class="text-slate-500 text-xs md:text-sm
leading-relaxed
mb-8 md:mb-10
font-light
flex-grow
space-y-3">
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s2.item1"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s2.item2"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s2.item3"></span>
</li>
</ul>
<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="h-56 overflow-hidden"><img src="assets/images/bearing.png" 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-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>
<!--<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>-->
<ul class="text-slate-500 text-xs md:text-sm
leading-relaxed
mb-8 md:mb-10
font-light
flex-grow
space-y-3">
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s3.item1"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s3.item2"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s3.item3"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s3.item4"></span>
</li>
</ul>
<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="h-56 overflow-hidden"><img src="assets/images/instrument.png" 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" 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>
<!--<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>-->
<ul class="text-slate-500 text-xs md:text-sm
leading-relaxed
mb-8 md:mb-10
font-light
flex-grow
space-y-3">
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s4.item1"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s4.item2"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s4.item3"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s4.item4"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s4.item5"></span>
</li>
<li class="flex items-start gap-3">
<i class="fas fa-check text-blue-600 mt-1 text-[10px] md:text-xs"></i>
<span data-i18n="svc.s4.item6"></span>
</li>
</ul>
<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>
@@ -376,7 +489,7 @@
<div class="relative">
<div class="aspect-square rounded-[3rem] overflow-hidden shadow-2xl"><img src="assets/images/ControlRoom7.png" 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-6xl font-extralight mb-4 font-premium">20+</div>
<div class="text-xs font-bold uppercase tracking-widest leading-loose" data-i18n="about.years">Years of Industrial Excellence</div>
</div>
</div>

2
html/status.json
View File

@@ -1 +1 @@
{"cpu_temp": "43", "nvme_temp": "33", "uptime_days": 4, "last_update": "21:04:02"}
{"cpu_temp": "41", "nvme_temp": "33", "uptime_days": 4, "last_update": "11:35:01"}