항목수정 및 언어버튼 가시성 수정
This commit is contained in:
Wind
165
html/index.html
165
html/index.html
@@ -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">×</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>
|
||||
|
||||
Reference in New Issue
Block a user