Very Good Version !
This commit is contained in:
Wind
349
.Backup/html /assets/js/i18n.js
Normal file
349
.Backup/html /assets/js/i18n.js
Normal file
@@ -0,0 +1,349 @@
|
||||
// ============================================================
|
||||
// 다국어 지원 (한국어 / 영어)
|
||||
// ============================================================
|
||||
const translations = {
|
||||
en: {
|
||||
// NAV
|
||||
'nav.home' : 'Home',
|
||||
'nav.dcs' : 'DCS',
|
||||
'nav.batch' : 'Batch Process',
|
||||
'nav.dbsvr' : 'Database Server',
|
||||
'nav.products' : 'Instruments',
|
||||
'nav.services' : 'References',
|
||||
'nav.about' : 'About',
|
||||
'nav.contact' : 'Contact',
|
||||
'nav.quote' : 'Inquiry',
|
||||
|
||||
// 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' : 'Reference Projects',
|
||||
'stat.uptime' : 'Downtime',
|
||||
'stat.engineers': 'Partners',
|
||||
'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.f0.title' : 'Honeywell Experion PKS',
|
||||
'dcs.f0.desc' : 'Reliable DCS solutions with Honeywell\'s Experion PKS, ensuring seamless integration and optimal performance',
|
||||
'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' : '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 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',
|
||||
'batch.f3.desc' : 'Setpoint scheduling & recipe for various products, lot management with single mouse click',
|
||||
'batch.f4.title': 'Quick Production Setup',
|
||||
'batch.f4.desc' : 'Real-time batch tracking with predictive quality monitoring',
|
||||
'batch.f5.title': 'Easy Historical Tracking',
|
||||
'batch.f5.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 & Actuation',
|
||||
'inst.title' : 'Control Instruments',
|
||||
'inst.desc' : 'Optimal Precision Starts with Understanding of Your Environment',
|
||||
'inst.i1.title' : 'Flow Transmitters',
|
||||
'inst.i1.desc' : 'Magnetic, Coriolis, and Vortex, traditional flowmeters',
|
||||
'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, capacitive and float level sensors',
|
||||
'inst.i5.title' : 'Analytical Sensors',
|
||||
'inst.i5.desc' : 'pH, conductivity, oxygen, and dissolved gas analyzer',
|
||||
'inst.i6.title' : 'Control Valves',
|
||||
'inst.i6.desc' : 'Smart positioners with HART communication',
|
||||
'inst.i7.title' : 'Shutoff Valves',
|
||||
'inst.i7.desc' : 'Pneumatic, Electrical on/off valves with Explosion proof',
|
||||
'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 →',
|
||||
|
||||
// REFERENCES
|
||||
'svc.badge' : 'Referenced Plant Varieties',
|
||||
'svc.title' : 'Versatile Process 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' : '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' : 'Other Projects',
|
||||
'svc.s3.desc' : 'Various industrial automation projects.',
|
||||
'svc.s3.item1' : 'Waste to Energy Incinerator Plant',
|
||||
'svc.s3.item2' : 'Copper Continuous Casting Plant',
|
||||
'svc.s3.item3' : 'Bearing Heat Treatment Plant',
|
||||
'svc.s3.item4' : 'Chlor-Alkali 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 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',
|
||||
|
||||
// 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.f0.title' : 'Honeywell Experion',
|
||||
'dcs.f0.desc' : 'Honeywell Experion 플랫폼을 기반으로 한 안정적이고 다양한 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': '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
|
||||
'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.1% 정확도의 코리올리 질량 유량계, 마그네틱, 볼텍스 유량계',
|
||||
'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' : '상담 신청 →',
|
||||
|
||||
// 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' : '배치 플랜트',
|
||||
'svc.s2.desc' : '실시간 모니터링 플랫폼과 고급 HMI, 안전한 원격 액세스 프로토콜을 갖춘 배치 플랜트 제어 시스템',
|
||||
'svc.s2.item1' : '마이크로 캡슐 발포제 플랜트',
|
||||
'svc.s2.item2' : 'ADCA,HDCA 플랜트',
|
||||
'svc.s2.item3' : '진공 열처리로 플랜트',
|
||||
// 'svc.s2.link' : '사례 연구',
|
||||
'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.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' : 'DCS, SCADA, 계측기기, 제어반 설계 및 제작, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
|
||||
'about.cert' : '인증',
|
||||
'about.support' : '지원',
|
||||
'about.years' : 'Years of Industrial Excellence',
|
||||
|
||||
// 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' : '© (주)한모씨앤앤. 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();
|
||||
}
|
||||
|
||||
// DOMContentLoaded 시 번역 적용
|
||||
document.addEventListener('DOMContentLoaded', applyTranslations);
|
||||
149
.Backup/html /assets/js/script.js
Normal file
149
.Backup/html /assets/js/script.js
Normal file
@@ -0,0 +1,149 @@
|
||||
// ============================================================
|
||||
// ★ 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;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 메인 스크립트 (전체 기능 포함)
|
||||
// ============================================================
|
||||
|
||||
// DOMContentLoaded 이벤트
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// ============================================================
|
||||
// 메뉴 토글
|
||||
// ============================================================
|
||||
const menuBtn = document.querySelector('#mobile-menu-btn');
|
||||
const navMenu = document.querySelector('#mobile-menu');
|
||||
const closeBtn = document.querySelector('#close-menu-btn');
|
||||
if (menuBtn && navMenu) {
|
||||
// 메뉴열기
|
||||
menuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.remove('translate-x-full');
|
||||
menuBtn.classList.toggle('open');
|
||||
});
|
||||
//메뉴닫기
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
navMenu.classList.add('translate-x-full');
|
||||
});
|
||||
}
|
||||
//메뉴 링크 클릭 시 닫기
|
||||
navMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click',() => {
|
||||
navMenu.classList.add('translate-x-full');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 스크롤 애니메이션
|
||||
// ============================================================
|
||||
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');
|
||||
});
|
||||
});
|
||||
});
|
||||
198
.Backup/html /assets/js/모바일메뉴 사라짐.md
Normal file
198
.Backup/html /assets/js/모바일메뉴 사라짐.md
Normal file
@@ -0,0 +1,198 @@
|
||||
모바일 메뉴가 동작하지 않는 문제를 찾았습니다! 🔍
|
||||
🔴 문제점 발견
|
||||
1. 클래스명 불일치 (가장 큰 문제!)
|
||||
script.js:
|
||||
javascriptconst menuBtn = document.querySelector('.menu-btn'); // ❌ .menu-btn
|
||||
const navMenu = document.querySelector('.nav-menu'); // ❌ .nav-menu
|
||||
index.html:
|
||||
html<button id="mobile-menu-btn" class="md:hidden text-white p-2">
|
||||
<!-- ❌ 클래스가 없고 ID만 있음 -->
|
||||
</button>
|
||||
|
||||
<div id="mobile-menu" class="fixed inset-0 z-[60] ...">
|
||||
<!-- ❌ 클래스가 없고 ID만 있음 -->
|
||||
</div>
|
||||
→ .menu-btn과 .nav-menu 클래스가 HTML에 없습니다!
|
||||
|
||||
2. 닫기 버튼도 작동 안 함
|
||||
script.js:
|
||||
javascriptdocument.querySelectorAll('.modal .close-btn').forEach(btn => {
|
||||
// ❌ .close-btn 클래스를 찾지만...
|
||||
});
|
||||
index.html:
|
||||
html<button id="close-menu-btn" class="text-white text-3xl">×</button>
|
||||
<!-- ❌ .close-btn 클래스가 없음 -->
|
||||
|
||||
3. 이벤트 핸들러 중복
|
||||
script.js 하단:
|
||||
javascript// 메뉴 토글 코드가 있는데...
|
||||
const menuBtn = document.querySelector('.menu-btn');
|
||||
index.html 하단:
|
||||
html<!-- 하지만 HTML에 별도의 스크립트는 없음 (좋음) -->
|
||||
|
||||
📋 문제 요약
|
||||
요소script.js에서 찾는 것index.html 실제메뉴 버튼.menu-btn#mobile-menu-btn (클래스 없음)메뉴.nav-menu#mobile-menu (클래스 없음)닫기 버튼.modal .close-btn#close-menu-btn (클래스 없음)
|
||||
|
||||
✅ 해결 방법 (3가지 옵션)
|
||||
옵션 1: script.js 수정 (권장)
|
||||
ID로 찾도록 변경:
|
||||
javascriptconst menuBtn = document.querySelector('#mobile-menu-btn'); // ID로 변경
|
||||
const navMenu = document.querySelector('#mobile-menu'); // ID로 변경
|
||||
옵션 2: index.html 수정
|
||||
클래스 추가:
|
||||
html<button id="mobile-menu-btn" class="menu-btn md:hidden text-white p-2">
|
||||
<div id="mobile-menu" class="nav-menu fixed inset-0 z-[60] ...">
|
||||
<button id="close-menu-btn" class="close-btn text-white text-3xl">
|
||||
옵션 3: 둘 다 수정
|
||||
|
||||
HTML에 클래스 추가 + script.js도 ID로 변경
|
||||
|
||||
|
||||
🎯 추가 문제점
|
||||
4. 메뉴 링크 클릭 시 닫기 기능 없음
|
||||
모바일 메뉴에서 링크 클릭해도 메뉴가 안 닫힙니다:
|
||||
javascript// 이 기능이 script.js에 없음!
|
||||
// 메뉴 내부 링크 클릭 시 메뉴 닫기
|
||||
5. translate-x-full 제어 없음
|
||||
html<div id="mobile-menu" class="... translate-x-full ...">
|
||||
이 translate-x-full 클래스를 제거/추가하는 JavaScript가 없습니다!
|
||||
|
||||
🔧 수정이 필요한 부분 정리
|
||||
script.js 수정 필요:
|
||||
|
||||
Line 74-75: .menu-btn → #mobile-menu-btn
|
||||
Line 75: .nav-menu → #mobile-menu
|
||||
Line 76-79: translate-x-full 제어 추가
|
||||
닫기 버튼 이벤트 추가
|
||||
메뉴 링크 클릭 시 닫기 추가
|
||||
|
||||
index.html (선택사항):
|
||||
|
||||
클래스 추가하면 더 좋지만, script.js만 수정해도 됨
|
||||
|
||||
|
||||
💡 결론
|
||||
가장 큰 문제: script.js가 존재하지 않는 .menu-btn과 .nav-menu 클래스를 찾고 있어서 menuBtn과 navMenu가 모두 null이 되고, 이벤트가 등록되지 않습니다.
|
||||
→ ID로 찾도록 변경하면 해결됩니다! 👍<div id="mobile-menu" class="... translate-x-full ...">
|
||||
이부분 상세하게 다시 알려줘오전 7:37translate-x-full 부분을 상세하게 설명드릴게요!
|
||||
🔍 현재 상황 분석
|
||||
index.html 67번 라인:
|
||||
html<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">
|
||||
|
||||
📐 translate-x-full의 의미
|
||||
Tailwind CSS 클래스:
|
||||
csstranslate-x-full {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
```
|
||||
|
||||
**의미**: 화면 밖 오른쪽으로 완전히 이동 (숨김 상태)
|
||||
|
||||
### 시각적 설명:
|
||||
```
|
||||
[화면] [메뉴]
|
||||
┌─────┐ ┌─────┐
|
||||
│ │ │메뉴 │ ← 100% 오른쪽으로 이동
|
||||
│ │ │숨김 │ (보이지 않음)
|
||||
└─────┘ └─────┘
|
||||
|
||||
❌ 현재 문제점
|
||||
1. 항상 숨겨진 상태
|
||||
htmltranslate-x-full ← 이 클래스가 계속 있으면 메뉴가 계속 숨겨짐
|
||||
2. JavaScript가 이 클래스를 제어하지 않음
|
||||
script.js 현재 코드:
|
||||
javascriptmenuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('open'); // ❌ 'open' 클래스만 토글
|
||||
menuBtn.classList.toggle('open'); // ❌ 의미 없음
|
||||
});
|
||||
```
|
||||
|
||||
**문제**: `open` 클래스가 CSS에 정의되어 있지 않음!
|
||||
|
||||
---
|
||||
|
||||
## ✅ 올바른 동작 방식
|
||||
|
||||
### 작동 원리:
|
||||
```
|
||||
닫힌 상태: translate-x-full (오른쪽 밖에 숨김)
|
||||
↓ (버튼 클릭)
|
||||
열린 상태: translate-x-full 제거 (화면에 표시)
|
||||
필요한 JavaScript:
|
||||
javascriptmenuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('translate-x-full');
|
||||
// ↑
|
||||
// 이 클래스를 추가/제거해야 함!
|
||||
});
|
||||
|
||||
🎯 정확한 수정 방법
|
||||
script.js 74-79 라인을 이렇게 수정해야 합니다:
|
||||
javascript// ❌ 현재 (작동 안 함)
|
||||
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'); // ❌ 의미 없음
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ 수정 (올바른 방법)
|
||||
const menuBtn = document.querySelector('#mobile-menu-btn');
|
||||
const navMenu = document.querySelector('#mobile-menu');
|
||||
const closeBtn = document.querySelector('#close-menu-btn');
|
||||
|
||||
if (menuBtn && navMenu) {
|
||||
// 메뉴 열기
|
||||
menuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.remove('translate-x-full'); // ← 이게 핵심!
|
||||
});
|
||||
|
||||
// 메뉴 닫기
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
navMenu.classList.add('translate-x-full'); // ← 다시 숨김
|
||||
});
|
||||
}
|
||||
|
||||
// 메뉴 링크 클릭 시 닫기
|
||||
navMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navMenu.classList.add('translate-x-full');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
🎬 애니메이션 동작 순서
|
||||
1. 초기 상태 (페이지 로드):
|
||||
html<div id="mobile-menu" class="... translate-x-full ...">
|
||||
↑
|
||||
메뉴가 오른쪽 밖에 숨겨짐
|
||||
2. 햄버거 버튼 클릭:
|
||||
javascriptnavMenu.classList.remove('translate-x-full');
|
||||
```
|
||||
```
|
||||
화면 밖 → 화면 안으로 슬라이드 (0.5초 duration-500)
|
||||
3. X 버튼 클릭 또는 링크 클릭:
|
||||
javascriptnavMenu.classList.add('translate-x-full');
|
||||
```
|
||||
```
|
||||
화면 안 → 화면 밖으로 슬라이드
|
||||
|
||||
📊 클래스 상태 변화
|
||||
상태translate-x-full위치보임닫힘✅ 있음화면 오른쪽 밖 (+100%)❌ 안 보임열림❌ 없음화면 안 (0%)✅ 보임
|
||||
|
||||
🎨 CSS 트랜지션
|
||||
htmltransition-transform duration-500
|
||||
↑ ↑
|
||||
변환 애니메이션 0.5초 동안
|
||||
이 두 클래스 덕분에 부드럽게 슬라이드됩니다!
|
||||
|
||||
🔑 핵심 정리
|
||||
|
||||
translate-x-full: 메뉴를 오른쪽 밖으로 숨김
|
||||
remove('translate-x-full'): 메뉴를 화면에 표시
|
||||
add('translate-x-full'): 메뉴를 다시 숨김
|
||||
transition-transform duration-500: 부드러운 애니메이션
|
||||
|
||||
현재 문제: JavaScript가 translate-x-full을 제어하지 않아서 메뉴가 계속 숨겨진 상태입니다!
|
||||
Reference in New Issue
Block a user