Very Good Version !
This commit is contained in:
Wind
@@ -1,22 +0,0 @@
|
||||
version: '3.8'
|
||||
services:
|
||||
# 1. 관리 도구 (Nginx Proxy Manager)
|
||||
npm:
|
||||
image: 'jc21/nginx-proxy-manager:latest'
|
||||
container_name: npm-admin
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- '80:80' # HTTP 외부 접속용
|
||||
- '81:81' # 관리자 화면 접속용 (HMI 역할)
|
||||
- '443:443' # HTTPS 보안 접속용
|
||||
volumes:
|
||||
- ./npm/data:/data
|
||||
- ./npm/letsencrypt:/etc/letsencrypt
|
||||
|
||||
# 2. 실제 홈페이지 (공사 중 페이지)
|
||||
web-server:
|
||||
image: nginx:alpine
|
||||
container_name: hanmo-home
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
- ./html:/usr/share/nginx/html:ro
|
||||
@@ -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);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 2.4 MiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 2.5 MiB After Width: | Height: | Size: 2.5 MiB |
|
Before Width: | Height: | Size: 521 KiB After Width: | Height: | Size: 521 KiB |
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
56
.Backup/html /assets/images/icons/icons.svg
Normal file
56
.Backup/html /assets/images/icons/icons.svg
Normal file
@@ -0,0 +1,56 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<defs>
|
||||
<!-- Control Valve Icon - 512x512 viewBox -->
|
||||
<symbol id="icon-cv" viewBox="0 0 512 512">
|
||||
<g fill="currentColor">
|
||||
<!-- 왼쪽 액추에이터 (삼각형) -->
|
||||
<path d="M 120 310 L 120 490 L 246 400 Z"/>
|
||||
|
||||
<!-- 오른쪽 액추에이터 (삼각형) -->
|
||||
<path d="M 392 310 L 392 490 L 266 400 Z"/>
|
||||
|
||||
<!-- 중앙 스템 (두꺼운 선) -->
|
||||
<rect x="246" y="230" width="20" height="170" rx="10"/>
|
||||
|
||||
<!-- 밸브 본체 (아치형) -->
|
||||
<path d="M 100 230 Q 256 24, 412 230"
|
||||
stroke="currentColor"
|
||||
stroke-width="30"
|
||||
fill="none"
|
||||
stroke-linecap="round"/>
|
||||
|
||||
<!-- 밸브 본체 하단 -->
|
||||
<path d="M 100 230 L 100 250 L 412 250 L 412 230"
|
||||
fill="currentColor"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<!-- XV Valve Icon - 512x512 viewBox -->
|
||||
<symbol id="icon-xv" viewBox="0 0 512 512">
|
||||
<g fill="currentColor">
|
||||
<!-- 왼쪽 액추에이터 -->
|
||||
<path d="M 120 290 L 120 470 L 246 380 Z"/>
|
||||
|
||||
<!-- 오른쪽 액추에이터 -->
|
||||
<path d="M 392 290 L 392 470 L 266 380 Z"/>
|
||||
|
||||
<!-- 중앙 스템 -->
|
||||
<rect x="246" y="240" width="20" height="150" rx="10"/>
|
||||
|
||||
<!-- 상단 사각형 케이스 (외곽) -->
|
||||
<rect x="156" y="80" width="200" height="160"
|
||||
stroke="currentColor"
|
||||
stroke-width="20"
|
||||
fill="none"
|
||||
rx="10"/>
|
||||
|
||||
<!-- 내부 사각형 -->
|
||||
<rect x="156" y="80" width="200" height="50"
|
||||
stroke="currentColor"
|
||||
stroke-width="15"
|
||||
fill="none"
|
||||
rx="5"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
243
.Backup/html /assets/images/icons/orginalSVG/CV.svg
Normal file
243
.Backup/html /assets/images/icons/orginalSVG/CV.svg
Normal file
@@ -0,0 +1,243 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 8.4666662 8.4666662"
|
||||
version="1.1"
|
||||
id="CV"
|
||||
sodipodi:docname="CV.svg"
|
||||
inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="true"
|
||||
showguides="true"
|
||||
inkscape:lockguides="true"
|
||||
inkscape:zoom="16"
|
||||
inkscape:cx="21.4375"
|
||||
inkscape:cy="18.53125"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1406"
|
||||
inkscape:window-x="-11"
|
||||
inkscape:window-y="-11"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="icon-cv">
|
||||
<inkscape:grid
|
||||
id="grid2"
|
||||
units="px"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingx="0.26458332"
|
||||
spacingy="0.26458332"
|
||||
empcolor="#0099e5"
|
||||
empopacity="0.30196078"
|
||||
color="#0099e5"
|
||||
opacity="0.14901961"
|
||||
empspacing="5"
|
||||
enabled="true"
|
||||
visible="true" />
|
||||
<sodipodi:guide
|
||||
position="4.2627494,9.4789286"
|
||||
orientation="1,0"
|
||||
id="guide2"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="0.51737855,-0.29502712"
|
||||
orientation="1,0"
|
||||
id="guide3"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-0.65234687,-0.63244791"
|
||||
orientation="0.70710678,-0.70710678"
|
||||
id="guide4"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="7.9518834,9.523918"
|
||||
orientation="1,0"
|
||||
id="guide5"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="9.0991141,4.2601536"
|
||||
orientation="0,-1"
|
||||
id="guide6"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="8.784188,7.9267929"
|
||||
orientation="0,-1"
|
||||
id="guide7"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-1.6983513,0.78471943"
|
||||
orientation="0,-1"
|
||||
id="guide8"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-1.8670617,0.51478279"
|
||||
orientation="0,-1"
|
||||
id="guide9"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="4.4652019,4.0464538"
|
||||
orientation="-0.70710678,-0.70710678"
|
||||
id="guide10"
|
||||
inkscape:locked="true" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs1">
|
||||
<linearGradient
|
||||
id="swatch6"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch5"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop5" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch4"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch3"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop3" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch2"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop2" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch1"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop1" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch18"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop18" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch16"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop16" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch15"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop15" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch14"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#2864eb;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop14" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient18"
|
||||
x1="1.7277834"
|
||||
y1="5.9455218"
|
||||
x2="8.4411774"
|
||||
y2="5.9455218"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0.66393903,0,0,0.85634804,2.3787064,1.2196347)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient1"
|
||||
x1="4.0094132"
|
||||
y1="5.0275702"
|
||||
x2="4.5385804"
|
||||
y2="5.0275702"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-0.02338608)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient5"
|
||||
x1="0.96664286"
|
||||
y1="-2.2531047"
|
||||
x2="7.6929812"
|
||||
y2="-2.2531047"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0.95980837,0,0,-0.92117588,0.10386417,0.02559155)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient6"
|
||||
x1="0.84656554"
|
||||
y1="6.2969909"
|
||||
x2="4.0181665"
|
||||
y2="6.2969909"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-0.02338609,-0.02338608)" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="icon-cv">
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient18);stroke-width:0.529167;stroke-dasharray:none"
|
||||
d="M 7.6511642,4.8306254 V 7.7779116 L 4.4998531,6.2561101 Z"
|
||||
id="path14-1" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 0.83074929,4.7858732 V 7.7610021 L 3.977069,6.2248243 Z"
|
||||
id="path14-1-7" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient1);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 4.2506107,3.8353499 V 6.2197903"
|
||||
id="path19" />
|
||||
<path
|
||||
id="path4"
|
||||
style="fill:none;stroke:url(#linearGradient5);stroke-width:0.497572"
|
||||
d="m 7.2337027,3.69276 a 2.9740486,3.1851437 0 0 0 -1.4870244,-2.7584154 2.9740486,3.1851437 0 0 0 -2.9740486,7e-8 A 2.9740486,3.1851437 0 0 0 1.2856054,3.69276 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.0 KiB |
227
.Backup/html /assets/images/icons/orginalSVG/XV.svg
Normal file
227
.Backup/html /assets/images/icons/orginalSVG/XV.svg
Normal file
@@ -0,0 +1,227 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 8.4666662 8.4666662"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="XV.svg"
|
||||
inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="true"
|
||||
showguides="true"
|
||||
inkscape:lockguides="true"
|
||||
inkscape:zoom="18.234375"
|
||||
inkscape:cx="9.5972581"
|
||||
inkscape:cy="15.218509"
|
||||
inkscape:window-width="1138"
|
||||
inkscape:window-height="1240"
|
||||
inkscape:window-x="646"
|
||||
inkscape:window-y="16"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="icon-XV">
|
||||
<inkscape:grid
|
||||
id="grid2"
|
||||
units="px"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingx="0.26458332"
|
||||
spacingy="0.26458332"
|
||||
empcolor="#0099e5"
|
||||
empopacity="0.30196078"
|
||||
color="#0099e5"
|
||||
opacity="0.14901961"
|
||||
empspacing="5"
|
||||
enabled="true"
|
||||
visible="true" />
|
||||
<sodipodi:guide
|
||||
position="4.2627494,9.4789286"
|
||||
orientation="1,0"
|
||||
id="guide2"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="0.51737855,-0.29502712"
|
||||
orientation="1,0"
|
||||
id="guide3"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-0.65234687,-0.63244791"
|
||||
orientation="0.70710678,-0.70710678"
|
||||
id="guide4"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="7.9518834,9.523918"
|
||||
orientation="1,0"
|
||||
id="guide5"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="9.0991141,4.2601536"
|
||||
orientation="0,-1"
|
||||
id="guide6"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="8.784188,7.9267929"
|
||||
orientation="0,-1"
|
||||
id="guide7"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-1.6983513,0.78471943"
|
||||
orientation="0,-1"
|
||||
id="guide8"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-1.8670617,0.51478279"
|
||||
orientation="0,-1"
|
||||
id="guide9"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="4.4652019,4.0464538"
|
||||
orientation="-0.70710678,-0.70710678"
|
||||
id="guide10"
|
||||
inkscape:locked="true" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs1">
|
||||
<linearGradient
|
||||
id="swatch4"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch3"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop3" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch2"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop2" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch1"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop1" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch18"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop18" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch16"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop16" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch15"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop15" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch14"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#2864eb;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop14" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient16"
|
||||
x1="1.4266078"
|
||||
y1="2.1372342"
|
||||
x2="7.144485"
|
||||
y2="2.1372342"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0.87269478,0,0,1.0101615,0.51750303,0.21044164)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient1"
|
||||
x1="4.0094132"
|
||||
y1="5.0275702"
|
||||
x2="4.5385804"
|
||||
y2="5.0275702"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient2"
|
||||
x1="1.973379"
|
||||
y1="1.8645531"
|
||||
x2="6.5005426"
|
||||
y2="1.8645531"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(0,0.0725507)" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="icon-XV">
|
||||
<ellipse
|
||||
style="fill:none;fill-opacity:1;stroke-width:0.265;stroke-dasharray:none"
|
||||
id="path10"
|
||||
cx="4.2402544"
|
||||
cy="4.1840181"
|
||||
rx="2.901819"
|
||||
ry="2.9917979" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient16);stroke-width:0.496843;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 1.8622283,0.77852414 6.6375951,0.75580052 6.6521989,3.9370624 1.8622288,3.9825089 Z"
|
||||
id="path12" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#2864eb;stroke-width:0.52916667;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 7.5471292,4.78219 V 7.7294762 L 4.3958181,6.2076747 Z"
|
||||
id="path14-1" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#2864eb;stroke-width:0.52916667;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 0.89517625,4.7887389 V 7.7638678 L 4.041496,6.22769 Z"
|
||||
id="path14-1-7" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient1);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 4.2739968,3.8353499 V 6.2197903"
|
||||
id="path19" />
|
||||
<path
|
||||
style="fill:none;stroke:url(#linearGradient2);stroke-width:0.264583"
|
||||
d="m 1.973379,1.9516138 c 4.5271635,-0.02902 4.5271635,-0.02902 4.5271635,-0.02902"
|
||||
id="path1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
BIN
.Backup/html /assets/images/icons/path.png
Normal file
BIN
.Backup/html /assets/images/icons/path.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
26
.Backup/html /assets/images/icons/path좌표문자.md
Normal file
26
.Backup/html /assets/images/icons/path좌표문자.md
Normal file
@@ -0,0 +1,26 @@
|
||||
이제 SVG 명령어들을 한눈에 볼 수 있는 요약표를 만들어드릴게요. 과 처럼 대문자/소문자의 차이는 절대 좌표 vs 상대 좌표라는 점을 기억하시면 됩니다.
|
||||
|
||||
🔹 주요 Path 명령어 요약표
|
||||
|
||||
|
||||
|
||||
🔹 주요 Path 명령어 요약표
|
||||
|
||||
| 명령어 | 의미 | 대문자(절대) | 소문자(상대) | 예시 |
|
||||
|--------|------|--------------|--------------|------|
|
||||
| **M / m** | Move To (좌표 이동) | 지정한 좌표로 이동 | 현재 위치 기준으로 이동 | `M 10 20` / `m 10 20` |
|
||||
| **L / l** | Line To (직선 그리기) | 지정 좌표까지 직선 | 현재 위치에서 상대 이동 직선 | `L 30 40` / `l 30 40` |
|
||||
| **H / h** | Horizontal Line | 지정 x좌표까지 수평선 | 현재 위치에서 x축 상대 이동 | `H 50` / `h 50` |
|
||||
| **V / v** | Vertical Line | 지정 y좌표까지 수직선 | 현재 위치에서 y축 상대 이동 | `V 60` / `v 60` |
|
||||
| **C / c** | Cubic Bézier Curve | 절대 좌표로 곡선 제어점 지정 | 상대 좌표로 곡선 제어점 지정 | `C x1 y1, x2 y2, x y` |
|
||||
| **Q / q** | Quadratic Bézier Curve | 절대 좌표로 곡선 제어점 지정 | 상대 좌표로 곡선 제어점 지정 | `Q x1 y1, x y` |
|
||||
| **A / a** | Arc (호 그리기) | 절대 좌표로 원호 | 상대 좌표로 원호 | `A rx ry x-axis-rotation large-arc-flag sweep-flag x y` |
|
||||
| **Z / z** | Close Path | 현재 경로를 시작점과 연결해 닫기 | 동일 | `Z` |
|
||||
|
||||
|
||||
|
||||
|
||||
🔹 핵심 정리
|
||||
• 대문자 → 절대 좌표 (캔버스 기준)
|
||||
• 소문자 → 상대 좌표 (현재 위치 기준)
|
||||
• /은 시작점 이동, /은 직선, /는 곡선, 는 닫기
|
||||
|
Before Width: | Height: | Size: 338 KiB After Width: | Height: | Size: 338 KiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
@@ -12,7 +12,7 @@ const translations = {
|
||||
'nav.services' : 'References',
|
||||
'nav.about' : 'About',
|
||||
'nav.contact' : 'Contact',
|
||||
'nav.quote' : 'Request Quote',
|
||||
'nav.quote' : 'Inquiry',
|
||||
|
||||
// HERO
|
||||
'hero.badge' : 'Precision Industrial Control',
|
||||
@@ -68,23 +68,23 @@ const translations = {
|
||||
'db.btn' : 'Get Infrastructure Consultation',
|
||||
|
||||
// INSTRUMENTS
|
||||
'inst.badge' : 'Precision Measurement',
|
||||
'inst.badge' : 'Precision Measurement & Actuation',
|
||||
'inst.title' : 'Control Instruments',
|
||||
'inst.desc' : 'Smart field instruments engineered for accuracy and reliability in demanding industrial environments.',
|
||||
'inst.desc' : 'Optimal Precision Starts with Understanding of Your Environment',
|
||||
'inst.i1.title' : 'Flow Transmitters',
|
||||
'inst.i1.desc' : 'Magnetic, Coriolis, and vortex flow meters with ±0.5% accuracy',
|
||||
'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, and capacitive level sensors',
|
||||
'inst.i4.desc' : 'Ultrasonic, radar, capacitive and float level sensors',
|
||||
'inst.i5.title' : 'Analytical Sensors',
|
||||
'inst.i5.desc' : 'pH, conductivity, oxygen, and dissolved gas analyzers',
|
||||
'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' : 'Vibration Monitors',
|
||||
'inst.i7.desc' : 'Accelerometers and velocity sensors for predictive maintenance',
|
||||
'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',
|
||||
@@ -94,30 +94,30 @@ const translations = {
|
||||
|
||||
// REFERENCES
|
||||
'svc.badge' : 'Referenced Plant Varieties',
|
||||
'svc.title' : 'Versatile Automation References',
|
||||
'svc.desc' : 'From Deep Understanding of various industry references to Seamless Execution.',
|
||||
'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.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.s2.link' : 'Case Studies',
|
||||
|
||||
'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.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.',
|
||||
@@ -127,7 +127,7 @@ const translations = {
|
||||
'svc.s4.item4' : 'Flownics',
|
||||
'svc.s4.item5' : 'Komoto - (Motoyama Korea)',
|
||||
'svc.s4.item6' : 'Autonics - (Konics)',
|
||||
'svc.s4.link' : 'Product Catalog',
|
||||
//'svc.s4.link' : 'Product Catalog',
|
||||
|
||||
// ABOUT
|
||||
'about.badge' : 'About Hanmo',
|
||||
@@ -164,10 +164,10 @@ const translations = {
|
||||
'nav.batch' : '배치 프로세스',
|
||||
'nav.dbsvr' : '데이터베이스 서버',
|
||||
'nav.products' : '계측기기',
|
||||
'nav.services' : '실적 플랜트 분야',
|
||||
'nav.services' : '실적 플랜트',
|
||||
'nav.about' : '회사소개',
|
||||
'nav.contact' : '문의하기',
|
||||
'nav.quote' : '견적 요청',
|
||||
'nav.quote' : '상담 신청',
|
||||
|
||||
// HERO
|
||||
'hero.badge' : '정밀 공정 제어 시스템',
|
||||
@@ -238,14 +238,14 @@ const translations = {
|
||||
'inst.i5.desc' : 'pH, 전도도, 산소, 용존 가스 분석기',
|
||||
'inst.i6.title' : '컨트롤 밸브',
|
||||
'inst.i6.desc' : 'HART 통신 지원 스마트 포지셔너',
|
||||
'inst.i7.title' : '진동 모니터',
|
||||
'inst.i7.desc' : '예측 유지보수를 위한 가속도계 및 속도 센서',
|
||||
'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' : '견적 요청 →',
|
||||
'inst.quote' : '상담 신청 →',
|
||||
|
||||
// REFERENCES
|
||||
'svc.badge' : '실적 플랜트 분야',
|
||||
@@ -257,20 +257,20 @@ const translations = {
|
||||
'svc.s1.item2' : '80% 하이드라진 플랜트',
|
||||
'svc.s1.item3' : '발전소 SNCR & SCR 플랜트',
|
||||
'svc.s1.item4' : '오일 탱크 터미널 플랜트',
|
||||
'svc.s1.link' : '자세히 보기',
|
||||
// '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.s2.link' : '사례 연구',
|
||||
'svc.s3.title' : '기타 프로젝트',
|
||||
'svc.s3.desc' : '기타 핵심 산업 자동화',
|
||||
'svc.s3.item1' : '쓰레기 소각장 플랜트',
|
||||
'svc.s3.item2' : '구리 환재 연속 주조로',
|
||||
'svc.s3.item3' : '베어링 연속 열처리로 플랜트',
|
||||
'svc.s3.item4' : '고속 냉간 연속 주조로 플랜트',
|
||||
'svc.s3.link' : '데이터 보안',
|
||||
'svc.s3.item4' : '가성소다, 염소 전해 플랜트',
|
||||
// 'svc.s3.link' : '데이터 보안',
|
||||
'svc.s4.title' : '제어 계측기기 협력사',
|
||||
'svc.s4.desc' : '고객 현장에 대한 깊은 이해를 바탕으로 최적 계측기 선정',
|
||||
'svc.s4.item1' : '한국하니웰(주)',
|
||||
@@ -279,16 +279,16 @@ const translations = {
|
||||
'svc.s4.item4' : '플로우닉스(주)',
|
||||
'svc.s4.item5' : '(주)코모토',
|
||||
'svc.s4.item6' : '오토닉스(주)',
|
||||
'svc.s4.link' : '제품 카탈로그',
|
||||
// 'svc.s4.link' : '제품 카탈로그',
|
||||
|
||||
// ABOUT
|
||||
'about.badge' : '회사 소개',
|
||||
'about.title' : '공정 자동화의 신뢰할 수 있는 파트너',
|
||||
'about.p1' : '(주)한모씨앤앤는 창립 이래 공정 자동화 엔지니어링의 최전선에서 활동하고 있습니다. 세계에서 가장 까다로운 공정 현장을 위한 미션 크리티컬 제어 시스템 설계, 구현 및 유지보수를 전문으로 합니다.',
|
||||
'about.p2' : 'DCS, SCADA, 계측기기, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
|
||||
'about.p2' : 'DCS, SCADA, 계측기기, 제어반 설계 및 제작, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
|
||||
'about.cert' : '인증',
|
||||
'about.support' : '지원',
|
||||
'about.years' : '여년간의 공정 제어 전문성',
|
||||
'about.years' : 'Years of Industrial Excellence',
|
||||
|
||||
// CONTACT
|
||||
'contact.badge' : '문의하기',
|
||||
@@ -329,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);
|
||||
@@ -343,4 +345,5 @@ function switchLang(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을 제어하지 않아서 메뉴가 계속 숨겨진 상태입니다!
|
||||
@@ -3,7 +3,9 @@
|
||||
<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>
|
||||
<meta name="description" content="한모씨앤앤은 공정제어 전문 기업입니다. 다양한 정보를 확인하세요.">
|
||||
|
||||
<title>한모씨앤앤 | Hanmo Control & Network - DCS SCADA 자동제어</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">
|
||||
@@ -36,27 +38,27 @@
|
||||
</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-black/40">
|
||||
<!--<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>
|
||||
<button onclick="location.href='#contact'" 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">Inquiry</button>
|
||||
</div>
|
||||
|
||||
<button id="mobile-menu-btn" class="md:hidden text-white p-2">
|
||||
<button id="mobile-menu-btn" class="menu-btn md:hidden text-white p-2">
|
||||
|
||||
<i class="fas fa-bars text-2xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
@@ -66,9 +68,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>
|
||||
@@ -81,7 +83,7 @@
|
||||
<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>
|
||||
<button onclick="location.href='#contact'" 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">Inquiry</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -127,47 +129,95 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DCS SECTION -->
|
||||
<!-- DCS Section -->
|
||||
<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" 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>
|
||||
<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="assets/images/dcsintegration.png?auto=format&fit=crop&q=80&w=1000" alt="DCS Control Room" class="w-full h-full object-cover"></div>
|
||||
<!-- 이미지 -->
|
||||
<div class="aspect-square rounded-[2.5rem] overflow-hidden shadow-2xl">
|
||||
<img src="assets/images/dcsintegration.png?auto=format&fit=crop&q=80&w=1000" alt="DCS Control Room" class="w-full h-full object-cover">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="space-y-18">
|
||||
<!-- Honeywell 로고 이미지 추가 -->
|
||||
<!-- Honeywell 로고 + 설명 (맨 위로 이동) -->
|
||||
<div class="mb-12">
|
||||
<img src="assets/images/honeywell-logo.svg" alt="Honeywell Logo" class="h-8 w-auto mb-4 object-contain">
|
||||
<p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f0.desc">
|
||||
Reliable DCS solutions with Honeywell's Experion PKS, ensuring seamless integration and optimal performance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 아이콘 리스트 -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex gap-6">
|
||||
<p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f0.desc">Reliable DCS solutions with Honeywell's Experion PKS, ensuring seamless integration and optimal performance</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-shield-alt"></i></div></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" 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 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" 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-lock"></i></div></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 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" 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" 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" data-i18n="dcs.btn">Request Technical Specs</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>
|
||||
</section>
|
||||
|
||||
<!-- BATCH PROCESS SECTION -->
|
||||
<section id="batch" class="pt-24 pb-32 bg-slate-50">
|
||||
<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-8"> <!--아래 내용과의 간겨 mb-16에서 줄임-->
|
||||
<div class="text-center max-w-3xl mx-auto mb-8"> <!--아래 내용과의 간격 mb-16에서 줄임-->
|
||||
<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">Not only precision control, but also production planning,process data & historical lot management, you can get it by our Batch Manager software.</p>
|
||||
@@ -202,7 +252,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATABASE SERVER SECTION -->
|
||||
<section id="dbsvr" class="py-32 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
@@ -243,97 +292,97 @@
|
||||
</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" data-i18n="db.btn">Get Infrastructure Consultation</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>
|
||||
|
||||
<!-- INSTRUMENTS SECTION -->
|
||||
<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">
|
||||
<div class="text-center max-w-3xl mx-auto mb-12">
|
||||
<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>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="inst.desc">Optimal Precision Starts with Understanding of Your Environment</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="h-32 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" 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" data-i18n="inst.quote">Get Quote →</a>
|
||||
<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> Endress+Hauser</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Flownics</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Azbil , Honeywell</div></div>
|
||||
<!-- <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="h-32 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" 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" data-i18n="inst.quote">Get Quote →</a>
|
||||
<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> Azbil</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Honeywell</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Autonics , Endress+Hauser</div></div>
|
||||
<!-- <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="h-32 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" 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" data-i18n="inst.quote">Get Quote →</a>
|
||||
<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> Autonics</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Azbil</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Honeywell , Endress+Hauser</div></div>
|
||||
<!-- <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" 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" data-i18n="inst.quote">Get Quote →</a>
|
||||
<div class="h-32 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" 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, capacitive and float 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> Endress+Hauser</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Seojin Instec</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Hanil Level</div></div>
|
||||
<!-- <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="h-32 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" 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" data-i18n="inst.quote">Get Quote →</a>
|
||||
<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> Honeywell Analytics</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Toa DKK</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Gastron</div></div>
|
||||
<!-- <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="h-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-faucet 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" 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" data-i18n="inst.quote">Get Quote →</a>
|
||||
<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> Komoto (Motoyama Korea)</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Azbil</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Honeywell</div></div>
|
||||
<!-- <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" 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" data-i18n="inst.quote">Get Quote →</a>
|
||||
<div class="h-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><svg class="w-16 h-16 text-blue-300 group-hover:text-blue-600 transition-colors"><use href="assets/images/icons/icons.svg#icon-xv"></use></svg></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i7.title">Shutoff Valves</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> Automa</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Proval</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Flowserve</div></div>
|
||||
<!-- <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="h-32 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" 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" data-i18n="inst.quote">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">
|
||||
<!-- <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" 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> -->
|
||||
</div>
|
||||
</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">
|
||||
<div class="text-center max-w-5xl mx-auto mb-8">
|
||||
<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>
|
||||
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="svc.title">Versatile Process 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">
|
||||
<div class="h-56 overflow-hidden"><img src="assets/images/dcsintegration.png?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>
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-2 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 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
|
||||
@@ -366,13 +415,13 @@
|
||||
</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>
|
||||
<!-- <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="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>
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-2 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>-->
|
||||
<ul class="text-slate-500 text-xs md:text-sm
|
||||
@@ -398,13 +447,13 @@
|
||||
</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>
|
||||
<!-- <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="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>
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-2 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>-->
|
||||
<ul class="text-slate-500 text-xs md:text-sm
|
||||
@@ -433,13 +482,13 @@
|
||||
<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>
|
||||
<!-- <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="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>
|
||||
<div class="w-14 h-14 bg-white rounded-2xl shadow-sm flex items-center justify-center mb-2 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>-->
|
||||
<ul class="text-slate-500 text-xs md:text-sm
|
||||
@@ -476,7 +525,7 @@
|
||||
<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>
|
||||
<!-- <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>
|
||||
@@ -489,16 +538,16 @@
|
||||
<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="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="absolute -bottom-10 -right-10 p-8 bg-blue-600 text-white rounded-[2rem] shadow-2xl max-w-xs">
|
||||
<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>
|
||||
<div class="pt-10">
|
||||
<div class="mt-10">
|
||||
<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>
|
||||
<p class="text-slate-500 leading-relaxed mb-6 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>
|
||||
@@ -558,7 +607,7 @@
|
||||
<script src="assets/js/i18n.js"></script>
|
||||
<script src="assets/js/script.js"></script>
|
||||
|
||||
<!-- RIGHT-CLICK & COPY PROTECTION
|
||||
RIGHT-CLICK & COPY PROTECTION
|
||||
<script>
|
||||
// 우클릭 방지
|
||||
document.addEventListener('contextmenu', function(e) {
|
||||
@@ -601,6 +650,6 @@
|
||||
return false;
|
||||
}
|
||||
});
|
||||
</script> -->
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
.Backup/html /status.json
Normal file
1
.Backup/html /status.json
Normal file
@@ -0,0 +1 @@
|
||||
{"cpu_temp": "40", "nvme_temp": "33", "uptime_days": 6, "last_update": "11:54:01"}
|
||||
@@ -1,50 +0,0 @@
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { HashRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
|
||||
import Header from './components/Header';
|
||||
import Hero from './components/Hero';
|
||||
import Services from './components/Services';
|
||||
import About from './components/About';
|
||||
import Contact from './components/Contact';
|
||||
import Footer from './components/Footer';
|
||||
import ChatBot from './components/ChatBot';
|
||||
|
||||
const ScrollToTop = () => {
|
||||
const { pathname } = useLocation();
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [pathname]);
|
||||
return null;
|
||||
};
|
||||
|
||||
const HomePage = () => (
|
||||
<>
|
||||
<Hero />
|
||||
<Services />
|
||||
<About />
|
||||
<Contact />
|
||||
</>
|
||||
);
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<Router>
|
||||
<ScrollToTop />
|
||||
<div className="min-h-screen flex flex-col relative">
|
||||
<Header />
|
||||
<main className="flex-grow">
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/services" element={<div className="pt-24"><Services /></div>} />
|
||||
<Route path="/about" element={<div className="pt-24"><About /></div>} />
|
||||
<Route path="/contact" element={<div className="pt-24"><Contact /></div>} />
|
||||
</Routes>
|
||||
</main>
|
||||
<Footer />
|
||||
<ChatBot />
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -1,20 +0,0 @@
|
||||
<div align="center">
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
</div>
|
||||
|
||||
# Run and deploy your AI Studio app
|
||||
|
||||
This contains everything you need to run your app locally.
|
||||
|
||||
View your app in AI Studio: https://ai.studio/apps/drive/12rxvTk7cfpawzA-KqF6Z1AfiIdHEhLqT
|
||||
|
||||
## Run Locally
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
|
||||
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||
3. Run the app:
|
||||
`npm run dev`
|
||||
@@ -1,89 +0,0 @@
|
||||
// ============================================================
|
||||
// ★ 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');
|
||||
|
||||
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'));
|
||||
}
|
||||
});
|
||||
|
||||
// ── 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')));
|
||||
@@ -1,57 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const About: React.FC = () => {
|
||||
return (
|
||||
<section id="about" className="py-24 bg-slate-50">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div className="order-2 lg:order-1 relative">
|
||||
<div className="aspect-[4/3] md:aspect-square rounded-[2rem] overflow-hidden shadow-2xl">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=1000"
|
||||
alt="Our Engineering Facility"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -bottom-6 -left-6 md:-bottom-10 md:-left-10 p-6 md:p-8 bg-blue-600 text-white rounded-3xl shadow-2xl max-w-[200px] md:max-w-[240px]">
|
||||
<div className="text-4xl md:text-5xl font-bold mb-2">15+</div>
|
||||
<div className="text-sm font-semibold opacity-90 uppercase tracking-widest leading-tight">Years of Industrial Excellence</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="order-1 lg:order-2">
|
||||
<h2 className="text-blue-600 font-bold uppercase tracking-widest text-sm mb-3">Our Identity</h2>
|
||||
<h3 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-8 leading-tight">
|
||||
Designing the Future of Industrial Frameworks
|
||||
</h3>
|
||||
<p className="text-slate-600 mb-6 text-lg leading-relaxed">
|
||||
Hanmo Control & Network Co., Ltd. was established on the foundation that industrial automation must be inherently reliable, perfectly integrated, and intelligently scalable.
|
||||
</p>
|
||||
<p className="text-slate-600 mb-10 leading-relaxed">
|
||||
As strategic partners for global leaders transitioning into Industry 4.0, our experts specialize in everything from site-wide instrumentation to enterprise-grade data management.
|
||||
</p>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
{[
|
||||
{ title: 'Reliability Focused', icon: 'fa-shield-halved' },
|
||||
{ title: 'Global Standards', icon: 'fa-globe' },
|
||||
{ title: '24/7 Support', icon: 'fa-clock' },
|
||||
{ title: 'Custom R&D', icon: 'fa-flask' },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-4 p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
||||
<div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600">
|
||||
<i className={`fas ${item.icon}`}></i>
|
||||
</div>
|
||||
<span className="font-bold text-slate-800 text-sm">{item.title}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@@ -1,100 +0,0 @@
|
||||
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { chatWithExpert } from '../services/geminiService';
|
||||
import { Message } from '../types';
|
||||
|
||||
const ChatBot: React.FC = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [input, setInput] = useState('');
|
||||
const [messages, setMessages] = useState<Message[]>([
|
||||
{ role: 'model', text: "Welcome to Hanmo! I'm your Technical Assistant. How can I help you with our DCS, SCADA, or field instrument solutions today?" }
|
||||
]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
}, [messages, isOpen]);
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!input.trim() || isLoading) return;
|
||||
|
||||
const userMsg = input.trim();
|
||||
setInput('');
|
||||
setMessages(prev => [...prev, { role: 'user', text: userMsg }]);
|
||||
setIsLoading(true);
|
||||
|
||||
const history = messages.map(m => ({ role: m.role, text: m.text }));
|
||||
const responseText = await chatWithExpert(userMsg, history);
|
||||
|
||||
setMessages(prev => [...prev, { role: 'model', text: responseText }]);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-6 right-6 z-[60]">
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="w-14 h-14 md:w-16 md:h-16 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-2xl flex items-center justify-center transition-transform hover:scale-110 active:scale-95"
|
||||
>
|
||||
{isOpen ? <i className="fas fa-times text-2xl"></i> : <i className="fas fa-robot text-2xl"></i>}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute bottom-20 right-0 w-[calc(100vw-3rem)] md:w-96 h-[500px] max-h-[70vh] bg-white rounded-3xl shadow-2xl flex flex-col overflow-hidden border border-slate-200 animate-in fade-in slide-in-from-bottom-5">
|
||||
<div className="p-5 bg-blue-600 text-white font-bold flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<i className="fas fa-microchip"></i>
|
||||
<span>Tech Advisor</span>
|
||||
</div>
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
|
||||
<div ref={scrollRef} className="flex-1 overflow-y-auto p-5 space-y-4 bg-slate-50">
|
||||
{messages.map((m, i) => (
|
||||
<div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
|
||||
<div className={`max-w-[85%] p-4 rounded-2xl text-sm leading-relaxed ${
|
||||
m.role === 'user'
|
||||
? 'bg-blue-600 text-white rounded-tr-none shadow-md'
|
||||
: 'bg-white text-slate-700 shadow-sm border border-slate-100 rounded-tl-none'
|
||||
}`}>
|
||||
{m.text}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{isLoading && (
|
||||
<div className="flex justify-start">
|
||||
<div className="bg-white p-4 rounded-2xl border border-slate-100 rounded-tl-none flex gap-1.5 shadow-sm">
|
||||
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce"></div>
|
||||
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce [animation-delay:0.2s]"></div>
|
||||
<div className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce [animation-delay:0.4s]"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-white border-t border-slate-100 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSend()}
|
||||
placeholder="Ask a technical question..."
|
||||
className="flex-1 bg-slate-100 text-sm p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-600/20"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSend}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-xl flex items-center justify-center transition-colors"
|
||||
>
|
||||
<i className="fas fa-paper-plane"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChatBot;
|
||||
@@ -1,123 +0,0 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const Contact: React.FC = () => {
|
||||
const [status, setStatus] = useState<'idle' | 'sending' | 'success'>('idle');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setStatus('sending');
|
||||
setTimeout(() => setStatus('success'), 1500);
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-24 bg-white">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="max-w-6xl mx-auto bg-slate-900 rounded-[2rem] md:rounded-[3rem] overflow-hidden shadow-2xl flex flex-col lg:flex-row">
|
||||
{/* Information Section */}
|
||||
<div className="lg:w-5/12 p-8 md:p-16 bg-blue-600 text-white flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="text-3xl md:text-4xl font-bold mb-6">Get in Touch</h3>
|
||||
<p className="text-blue-100 mb-12 text-lg">
|
||||
Ready to optimize your industrial infrastructure? Our engineering team is standing by to assist with your technical inquiries.
|
||||
</p>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="flex gap-5 items-start">
|
||||
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
|
||||
<i className="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold">Headquarters</h4>
|
||||
<p className="text-blue-100 text-sm">Industrial Hub B123, Gangnam District<br />Seoul, South Korea</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-5 items-start">
|
||||
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
|
||||
<i className="fas fa-phone-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold">Phone</h4>
|
||||
<p className="text-blue-100 text-sm">+82 2-1234-5678</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-5 items-start">
|
||||
<div className="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center shrink-0">
|
||||
<i className="fas fa-envelope"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold">Email</h4>
|
||||
<p className="text-blue-100 text-sm">solutions@hanmocontrol.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-16 flex gap-4">
|
||||
<a href="#" className="w-12 h-12 bg-white/10 hover:bg-white/30 rounded-full flex items-center justify-center transition-all">
|
||||
<i className="fab fa-linkedin-in text-xl"></i>
|
||||
</a>
|
||||
<a href="#" className="w-12 h-12 bg-white/10 hover:bg-white/30 rounded-full flex items-center justify-center transition-all">
|
||||
<i className="fab fa-twitter text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Section */}
|
||||
<div className="lg:w-7/12 p-8 md:p-16 bg-white">
|
||||
{status === 'success' ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-center space-y-6">
|
||||
<div className="w-24 h-24 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-4xl">
|
||||
<i className="fas fa-check"></i>
|
||||
</div>
|
||||
<h4 className="text-3xl font-extrabold text-slate-900">Inquiry Received</h4>
|
||||
<p className="text-slate-500 text-lg">Thank you for reaching out. An automation consultant will review your request and contact you within 24 hours.</p>
|
||||
<button
|
||||
onClick={() => setStatus('idle')}
|
||||
className="text-blue-600 font-bold hover:underline"
|
||||
>
|
||||
Send another request
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Full Name</label>
|
||||
<input required type="text" className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="John Doe" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Work Email</label>
|
||||
<input required type="email" className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="j.doe@company.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Requirement Type</label>
|
||||
<select className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all">
|
||||
<option>DCS Architecture Design</option>
|
||||
<option>SCADA System Integration</option>
|
||||
<option>Database & Historian Setup</option>
|
||||
<option>Field Instrumentation Supply</option>
|
||||
<option>Technical Support</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-500 uppercase tracking-widest">Project Details</label>
|
||||
<textarea required rows={5} className="w-full bg-slate-50 border border-slate-200 p-4 rounded-xl outline-none focus:ring-4 focus:ring-blue-500/10 focus:border-blue-500 transition-all" placeholder="Tell us about your technical requirements..."></textarea>
|
||||
</div>
|
||||
<button
|
||||
disabled={status === 'sending'}
|
||||
className="w-full bg-slate-900 hover:bg-blue-600 text-white font-bold py-5 rounded-xl shadow-lg transition-all active:scale-[0.98] disabled:opacity-50"
|
||||
>
|
||||
{status === 'sending' ? 'Processing...' : 'Submit Inquiry'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
@@ -1,74 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<footer className="bg-slate-900 text-white pt-20 pb-10">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
|
||||
<div className="lg:col-span-1">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="bg-blue-600 w-10 h-10 rounded-lg flex items-center justify-center shrink-0 shadow-lg">
|
||||
<span className="text-white font-bold text-xl font-industrial">H</span>
|
||||
</div>
|
||||
<div className="flex flex-col leading-none">
|
||||
<span className="font-bold text-xl tracking-tight font-industrial text-white">
|
||||
HANMO
|
||||
</span>
|
||||
<span className="text-[9px] font-bold uppercase tracking-[0.2em] mt-1 text-blue-500">
|
||||
Control & Network
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-slate-400 leading-relaxed mb-8 max-w-sm">
|
||||
Providing resilient, high-precision control and networking solutions for the world's most demanding industrial environments.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold text-lg mb-6 border-b border-slate-800 pb-2 font-industrial tracking-wide">Solutions</h4>
|
||||
<ul className="space-y-4 text-slate-400">
|
||||
<li><a href="#" className="hover:text-blue-500 transition-colors">DCS Integration</a></li>
|
||||
<li><a href="#" className="hover:text-blue-500 transition-colors">SCADA Design</a></li>
|
||||
<li><a href="#" className="hover:text-blue-500 transition-colors">Industrial Historians</a></li>
|
||||
<li><a href="#" className="hover:text-blue-500 transition-colors">Smart Field Devices</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold text-lg mb-6 border-b border-slate-800 pb-2 font-industrial tracking-wide">Resources</h4>
|
||||
<ul className="space-y-4 text-slate-400">
|
||||
<li><a href="#" className="hover:text-blue-500 transition-colors">Technical Docs</a></li>
|
||||
<li><a href="#" className="hover:text-blue-500 transition-colors">Case Studies</a></li>
|
||||
<li><a href="#" className="hover:text-blue-500 transition-colors">Security Updates</a></li>
|
||||
<li><a href="#" className="hover:text-blue-500 transition-colors">Training Portal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-bold text-lg mb-6 border-b border-slate-800 pb-2 font-industrial tracking-wide">Connect</h4>
|
||||
<div className="flex gap-4 mb-6">
|
||||
<a href="#" className="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-all">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-all">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm">Subscribe to our newsletter for automation insights.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-10 border-t border-slate-800 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-500 text-xs uppercase tracking-widest font-bold">
|
||||
<p>© 2024 Hanmo Control & Network Co., Ltd.</p>
|
||||
<div className="flex gap-8">
|
||||
<a href="#" className="hover:text-slate-300">Privacy Policy</a>
|
||||
<a href="#" className="hover:text-slate-300">Terms & Conditions</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -1,88 +0,0 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setIsScrolled(window.scrollY > 20);
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', href: '#/' },
|
||||
{ name: 'Services', href: '#/services' },
|
||||
{ name: 'About', href: '#/about' },
|
||||
{ name: 'Contact', href: '#/contact' },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'glass-effect shadow-md py-3' : 'bg-transparent py-6'}`}>
|
||||
<div className="container mx-auto px-6 flex justify-between items-center">
|
||||
<a href="#/" className="flex items-center gap-3 group">
|
||||
<div className="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 className="text-white font-bold text-xl font-industrial">H</span>
|
||||
</div>
|
||||
<div className="flex flex-col leading-none">
|
||||
<span className={`font-bold text-xl tracking-tight font-industrial ${isScrolled ? 'text-slate-900' : 'text-slate-900 md:text-white'}`}>
|
||||
HANMO
|
||||
</span>
|
||||
<span className={`text-[9px] font-bold uppercase tracking-[0.2em] mt-1 ${isScrolled ? 'text-blue-600' : 'text-blue-500'}`}>
|
||||
Control & Network
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<nav className="hidden md:flex gap-8">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className={`text-sm font-semibold hover:text-blue-600 transition-colors ${isScrolled ? 'text-slate-700' : 'text-slate-100'}`}
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="hidden md:block">
|
||||
<button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg transition-all active:scale-95 font-industrial tracking-wide">
|
||||
REQUEST QUOTE
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className={`md:hidden p-2 rounded-lg transition-colors ${isScrolled ? 'text-slate-900' : 'text-slate-100'}`}
|
||||
>
|
||||
<i className={`fas ${isMobileMenuOpen ? 'fa-times' : 'fa-bars'} text-2xl`}></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Drawer */}
|
||||
<div className={`md:hidden absolute top-full left-0 right-0 bg-white border-t border-slate-100 shadow-2xl transition-all duration-300 ${isMobileMenuOpen ? 'opacity-100 translate-y-0 visible' : 'opacity-0 -translate-y-4 invisible'}`}>
|
||||
<nav className="flex flex-col p-6 space-y-4">
|
||||
{navItems.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="text-lg font-medium text-slate-800 hover:text-blue-600 border-b border-slate-50 pb-2"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
<button className="w-full bg-blue-600 text-white py-4 rounded-xl font-bold font-industrial tracking-widest">
|
||||
REQUEST QUOTE
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -1,55 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
return (
|
||||
<section id="home" className="relative min-h-screen flex items-center pt-20 overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=2000"
|
||||
alt="Control Room"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-slate-900/80 md:bg-transparent md:bg-gradient-to-r md:from-slate-900/90 md:to-slate-900/20"></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
<div className="max-w-5xl">
|
||||
<div className="inline-block px-4 py-1.5 mb-6 rounded-full bg-blue-600/20 border border-blue-400/30 text-blue-400 text-[10px] font-bold uppercase industrial-tracking animate-pulse font-industrial">
|
||||
Next-Gen Industrial Solutions
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-8xl font-extralight text-white mb-8 leading-[1.05] premium-kerning font-premium">
|
||||
Engineering <span className="text-blue-500 font-normal">Precision</span> <br className="hidden md:block"/> for Industrial Networks
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl text-slate-300 mb-10 leading-relaxed max-w-2xl font-premium font-light opacity-80">
|
||||
Hanmo Control & Network Co., Ltd. delivers global-standard DCS and SCADA infrastructure for mission-critical industrial ecosystems and digital transformation.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#services" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold shadow-xl transition-all hover:-translate-y-1 text-center font-industrial text-xs tracking-widest uppercase">
|
||||
Our Expertise
|
||||
</a>
|
||||
<a href="#contact" className="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-md px-8 py-4 rounded-xl font-bold transition-all text-center font-industrial text-xs tracking-widest uppercase">
|
||||
Schedule Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-20 grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8 max-w-5xl">
|
||||
{[
|
||||
{ label: 'Installed Nodes', value: '1,500+' },
|
||||
{ label: 'Uptime', value: '99.99%' },
|
||||
{ label: 'Certified Experts', value: '60+' },
|
||||
{ label: 'Years Active', value: '15' },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="p-6 bg-white/5 backdrop-blur-xl rounded-2xl border border-white/10 group hover:bg-white/10 transition-colors">
|
||||
<div className="text-3xl md:text-4xl font-extralight text-white mb-2 font-premium premium-kerning">{stat.value}</div>
|
||||
<div className="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -1,78 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
import { ServiceItem } from '../types';
|
||||
|
||||
const SERVICES: ServiceItem[] = [
|
||||
{
|
||||
id: 'dcs',
|
||||
title: 'Distributed Control (DCS)',
|
||||
description: 'Advanced, redundant control architectures designed for continuous process industries including power generation and chemicals.',
|
||||
icon: 'fa-network-wired',
|
||||
image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800'
|
||||
},
|
||||
{
|
||||
id: 'scada',
|
||||
title: 'SCADA Solutions',
|
||||
description: 'High-performance monitoring platforms with cutting-edge HMI, real-time analytics, and secure remote access protocols.',
|
||||
icon: 'fa-chart-line',
|
||||
image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800'
|
||||
},
|
||||
{
|
||||
id: 'database',
|
||||
title: 'Industrial Historians',
|
||||
description: 'Mission-critical database servers and SQL infrastructure optimized for heavy manufacturing data and regulatory compliance.',
|
||||
icon: 'fa-database',
|
||||
image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=800'
|
||||
},
|
||||
{
|
||||
id: 'instruments',
|
||||
title: 'Control Instruments',
|
||||
description: 'Precision field instruments including flow, pressure, and temperature transmitters and smart control valves.',
|
||||
icon: 'fa-gauge-high',
|
||||
image: 'https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&q=80&w=800'
|
||||
}
|
||||
];
|
||||
|
||||
const Services: React.FC = () => {
|
||||
return (
|
||||
<section id="services" className="py-24 bg-white">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 className="text-blue-600 font-bold uppercase tracking-widest text-sm mb-3">Capabilities</h2>
|
||||
<h3 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-6">World-Class Automation</h3>
|
||||
<p className="text-slate-600 text-lg leading-relaxed">
|
||||
We bridge the gap between heavy physical operations and digital intelligence through robust networking and control systems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{SERVICES.map((service) => (
|
||||
<div key={service.id} className="group flex flex-col h-full bg-slate-50 border border-slate-100 rounded-3xl overflow-hidden hover:border-blue-200 transition-all hover:shadow-2xl hover:-translate-y-2">
|
||||
<div className="h-48 overflow-hidden">
|
||||
<img
|
||||
src={service.image}
|
||||
alt={service.title}
|
||||
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-8 flex-grow flex flex-col">
|
||||
<div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 group-hover:bg-blue-600 transition-colors">
|
||||
<i className={`fas ${service.icon} text-blue-600 group-hover:text-white text-xl`}></i>
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-slate-900 mb-4">{service.title}</h4>
|
||||
<p className="text-slate-600 text-sm leading-relaxed mb-8 flex-grow">
|
||||
{service.description}
|
||||
</p>
|
||||
<a href="#" className="text-blue-600 font-bold text-sm inline-flex items-center gap-2 group-hover:gap-4 transition-all">
|
||||
Technical Specs <i className="fas fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
@@ -1,16 +0,0 @@
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"name": "Hanmo Control & Network Co., Ltd.",
|
||||
"description": "Premium industrial automation solutions provider specializing in DCS, SCADA, Database Servers, and Control Instruments.",
|
||||
"requestFramePermissions": [
|
||||
"camera"
|
||||
]
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
{
|
||||
"name": "hanmo-control-&-network-co.,-ltd.",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"@google/genai": "^1.41.0",
|
||||
"react-router-dom": "^7.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
|
||||
import { GoogleGenAI } from "@google/genai";
|
||||
|
||||
const SYSTEM_INSTRUCTION = `You are the primary AI Technical Consultant for "Hanmo Control & Network Co., Ltd.".
|
||||
Hanmo is a global leader specializing in:
|
||||
1. DCS (Distributed Control Systems): High-availability process automation for utility-scale industries.
|
||||
2. SCADA (Supervisory Control and Data Acquisition): Real-time remote operations and monitoring.
|
||||
3. Database & Historian Servers: Secure, high-speed industrial data management.
|
||||
4. Precision Control Instruments: Smart sensors and actuators for flow, pressure, and thermal management.
|
||||
|
||||
Tone: Professional, highly technical, authoritative, and helpful.
|
||||
Language: You must respond in English at all times.
|
||||
Guidance: Provide expert advice on automation architecture and integration. For pricing or project-specific quotes, instruct the user to use the official contact form on the website.`;
|
||||
|
||||
export async function chatWithExpert(message: string, history: {role: 'user' | 'model', text: string}[]) {
|
||||
try {
|
||||
const ai = new GoogleGenAI({ apiKey: process.env.API_KEY || '' });
|
||||
|
||||
const response = await ai.models.generateContent({
|
||||
model: 'gemini-3-flash-preview',
|
||||
contents: [
|
||||
...history.map(h => ({ role: h.role === 'user' ? 'user' : 'model', parts: [{ text: h.text }] })),
|
||||
{ role: 'user', parts: [{ text: message }] }
|
||||
],
|
||||
config: {
|
||||
systemInstruction: SYSTEM_INSTRUCTION,
|
||||
temperature: 0.7,
|
||||
},
|
||||
});
|
||||
|
||||
return response.text || "I apologize, but I am unable to process your technical inquiry right now. Please try again later.";
|
||||
} catch (error) {
|
||||
console.error("Gemini API Error:", error);
|
||||
return "Our technical advisor is currently offline. Please contact our support team directly via email.";
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
{"cpu_temp": "39", "nvme_temp": "33", "uptime_days": 4, "last_update": "10:51:01"}
|
||||
@@ -1,29 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
|
||||
export interface Message {
|
||||
role: 'user' | 'model';
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface ServiceItem {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export interface ContactFormData {
|
||||
name: string;
|
||||
email: string;
|
||||
subject: string;
|
||||
message: string;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import path from 'path';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
plugins: [react()],
|
||||
define: {
|
||||
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -1,58 +1,655 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>한모CNN - 서비스 준비 중</title>
|
||||
<style>
|
||||
body { background-color: #0b0e14; color: #d1d5db; font-family: sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
|
||||
.main-box { text-align: center; border: 1px solid #1f2937; background: #111827; padding: 40px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); width: 350px; }
|
||||
h1 { color: #60a5fa; margin-bottom: 5px; letter-spacing: -1px; }
|
||||
.sub-text { color: #9ca3af; margin-bottom: 30px; font-size: 0.9rem; }
|
||||
.hmi-panel { background: #000; border-radius: 8px; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; border-left: 4px solid #60a5fa; }
|
||||
.sensor { display: flex; flex-direction: column; align-items: center; }
|
||||
.s-label { font-size: 0.7rem; color: #6b7280; margin-bottom: 5px; text-transform: uppercase; }
|
||||
.s-value { font-family: 'Courier New', monospace; font-size: 1.6rem; color: #10b981; font-weight: bold; }
|
||||
.full-width { grid-column: span 2; border-top: 1px solid #1f2937; padding-top: 10px; margin-top: 5px; }
|
||||
.update-time { font-size: 0.7rem; color: #374151; margin-top: 25px; }
|
||||
.blink { animation: fade 2s infinite; }
|
||||
@keyframes fade { 50% { opacity: 0.3; } }
|
||||
</style>
|
||||
<meta name="description" content="한모씨앤앤은 공정제어 전문 기업입니다. 다양한 정보를 확인하세요.">
|
||||
|
||||
<title>한모씨앤앤 | Hanmo Control & Network - DCS SCADA 자동제어</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">
|
||||
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-box">
|
||||
<h1>HANMO CONTROL & NETWORK CO., LTD.</h1>
|
||||
<p class="sub-text">시스템 정식 서비스 준비 중입니다.</p>
|
||||
<div class="hmi-panel">
|
||||
<div class="sensor">
|
||||
<span class="s-label">CPU</span>
|
||||
<span class="s-value"><span id="cpu">--</span>°C</span>
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- RIGHT-CLICK PROTECTION OVERLAY -->
|
||||
<!-- <div id="no-rightclick-overlay" style="
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 9999;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
"></div> -->
|
||||
|
||||
<!-- 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 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 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 onclick="location.href='#contact'" 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">Inquiry</button>
|
||||
</div>
|
||||
|
||||
<button id="mobile-menu-btn" class="menu-btn md:hidden text-white p-2">
|
||||
|
||||
<i class="fas fa-bars text-2xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sensor">
|
||||
<span class="s-label">NVMe</span>
|
||||
<span class="s-value"><span id="nvme">--</span>°C</span>
|
||||
</div>
|
||||
<div class="sensor full-width">
|
||||
<span class="s-label">UPTIME</span>
|
||||
<span class="s-value"><span id="days">--</span> DAYS</span>
|
||||
</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 overflow-y-auto">
|
||||
<div class="flex justify-between items-center mb-12">
|
||||
<!-- 모바일 언어 전환 -->
|
||||
<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>
|
||||
<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" 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 onclick="location.href='#contact'" 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">Inquiry</button>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="update-time">
|
||||
<span class="blink" style="color:#10b981">●</span> LIVE SCAN: <span id="time">--</span>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function update() {
|
||||
fetch('status.json?t=' + Date.now())
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
document.getElementById('cpu').innerText = d.cpu_temp;
|
||||
document.getElementById('nvme').innerText = d.nvme_temp;
|
||||
document.getElementById('days').innerText = d.uptime_days;
|
||||
document.getElementById('time').innerText = d.last_update;
|
||||
}).catch(() => console.log("Waiting for data..."));
|
||||
}
|
||||
setInterval(update, 10000); update();
|
||||
</script>
|
||||
|
||||
<!-- 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" 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" 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" 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">100+</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.nodes">Reference Projects</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">0.01%</div>
|
||||
<div class="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold" data-i18n="stat.uptime">downtime</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" data-i18n="stat.engineers">Partners</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" data-i18n="stat.years">Years Excellence</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- DCS Section -->
|
||||
<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" 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="assets/images/dcsintegration.png?auto=format&fit=crop&q=80&w=1000" alt="DCS Control Room" class="w-full h-full object-cover">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<!-- Honeywell 로고 + 설명 (맨 위로 이동) -->
|
||||
<div class="mb-12">
|
||||
<img src="assets/images/honeywell-logo.svg" alt="Honeywell Logo" class="h-8 w-auto mb-4 object-contain">
|
||||
<p class="text-slate-500 leading-relaxed font-light" data-i18n="dcs.f0.desc">
|
||||
Reliable DCS solutions with Honeywell's Experion PKS, ensuring seamless integration and optimal performance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 아이콘 리스트 -->
|
||||
<div class="space-y-6">
|
||||
<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" 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" 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" 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" data-i18n="dcs.btn">
|
||||
Request Technical Specs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- BATCH PROCESS SECTION -->
|
||||
<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-8"> <!--아래 내용과의 간격 mb-16에서 줄임-->
|
||||
<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">Not only precision control, but also production planning,process data & historical lot management, you can get it by our Batch Manager software.</p>
|
||||
</div>
|
||||
<div class="grid lg:grid-cols-2 gap-8 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" data-i18n="batch.f1.title">Batch Manager Software</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-tasks"></i></div></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="batch.f2.title">HC-900 Controller</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f2.desc">Advanced batch control with integrated HART communication and real-time 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-tasks"></i></div></div>
|
||||
<div><h4 class="text-xl font-semibold text-slate-900 mb-2 font-premium" data-i18n="batch.f3.title">Process Data Management</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f3.desc">Comprehensive process data collection, storage, and analysis for batch operations</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" data-i18n="batch.f4.title">Quick Production Setup</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f4.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" data-i18n="batch.f5.title">Easy Historical Tracking</h4><p class="text-slate-500 leading-relaxed font-light" data-i18n="batch.f5.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" data-i18n="batch.btn">Start Implementation</a></div>-->
|
||||
</div>
|
||||
<div class="aspect-square rounded-[2.5rem] overflow-hidden shadow-2xl"><img src="assets/images/BatchControl.png" alt="Batch Process" class="w-full h-full object-cover"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- DATABASE SERVER SECTION -->
|
||||
<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-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" 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>
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Hot-cold storage</li>
|
||||
</ul>
|
||||
</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" 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>
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Zero data loss</li>
|
||||
</ul>
|
||||
</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" 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>
|
||||
<li class="flex gap-3"><i class="fas fa-check text-blue-600 mt-1"></i> Immutable logs</li>
|
||||
</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" data-i18n="db.btn">Get Infrastructure Consultation</a></div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- INSTRUMENTS SECTION -->
|
||||
<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-12">
|
||||
<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">Optimal Precision Starts with Understanding of Your Environment</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-32 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" 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> Endress+Hauser</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Flownics</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Azbil , Honeywell</div></div>
|
||||
<!-- <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-32 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" 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> Azbil</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Honeywell</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Autonics , Endress+Hauser</div></div>
|
||||
<!-- <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-32 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" 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> Autonics</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Azbil</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Honeywell , Endress+Hauser</div></div>
|
||||
<!-- <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-32 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" 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, capacitive and float 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> Endress+Hauser</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Seojin Instec</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Hanil Level</div></div>
|
||||
<!-- <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-32 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" 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> Honeywell Analytics</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Toa DKK</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Gastron</div></div>
|
||||
<!-- <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-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-faucet 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" 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> Komoto (Motoyama Korea)</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Azbil</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Honeywell</div></div>
|
||||
<!-- <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-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><svg class="w-16 h-16 text-blue-300 group-hover:text-blue-600 transition-colors"><use href="assets/images/icons/icons.svg#icon-xv"></use></svg></div>
|
||||
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i7.title">Shutoff Valves</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> Automa</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Proval</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Flowserve</div></div>
|
||||
<!-- <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-32 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" 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" 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" 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>
|
||||
|
||||
<!-- REFERENCES SECTION -->
|
||||
<section id="services" class="py-32 bg-white">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="text-center max-w-5xl mx-auto mb-8">
|
||||
<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 Process 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">
|
||||
<div class="h-56 overflow-hidden"><img src="assets/images/dcsintegration.png?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-2 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 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="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-2 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>-->
|
||||
<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="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-2 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>-->
|
||||
<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="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-2 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>-->
|
||||
<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>
|
||||
</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="assets/images/ControlRoom7.png" alt="About Hanmo" class="w-full h-full object-cover"></div>
|
||||
<div class="absolute -bottom-10 -right-10 p-8 bg-blue-600 text-white rounded-[2rem] shadow-2xl max-w-xs">
|
||||
<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>
|
||||
<div class="mt-10">
|
||||
<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-6 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" 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" data-i18n="about.support">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" 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" 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" 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>
|
||||
</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" 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>
|
||||
|
||||
<!-- RIGHT-CLICK & COPY PROTECTION
|
||||
<script>
|
||||
// 우클릭 방지
|
||||
document.addEventListener('contextmenu', function(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
// 드래그 선택 방지
|
||||
document.addEventListener('selectstart', function(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
// 키보드 단축키 방지 (F12, Ctrl+U, Ctrl+S, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+Shift+C)
|
||||
document.addEventListener('keydown', function(e) {
|
||||
// F12
|
||||
if (e.key === 'F12') {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
// Ctrl 조합 단축키
|
||||
if (e.ctrlKey) {
|
||||
const blocked = ['u', 's', 'p'];
|
||||
if (blocked.includes(e.key.toLowerCase())) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
// Ctrl+Shift 조합
|
||||
if (e.shiftKey && ['i', 'j', 'c'].includes(e.key.toLowerCase())) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 이미지 드래그 방지
|
||||
document.addEventListener('dragstart', function(e) {
|
||||
if (e.target.tagName === 'IMG') {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
</script> -->
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{"cpu_temp": "40", "nvme_temp": "33", "uptime_days": 2, "last_update": "18:31:01"}
|
||||
@@ -1,42 +0,0 @@
|
||||
# 파일 경로: ~/services/hanmocnn/update_status.py
|
||||
import json
|
||||
import os
|
||||
import time
|
||||
|
||||
def get_temp(name_keyword):
|
||||
"""hwmon 폴더에서 이름 키워드로 온도를 찾아 반환 (milli-degree to degree)"""
|
||||
try:
|
||||
base_path = "/sys/class/hwmon"
|
||||
for folder in os.listdir(base_path):
|
||||
with open(os.path.join(base_path, folder, "name"), "r") as f:
|
||||
if name_keyword in f.read():
|
||||
with open(os.path.join(base_path, folder, "temp1_input"), "r") as t:
|
||||
return int(t.read()) // 1000
|
||||
except:
|
||||
return "N/A"
|
||||
return "N/A"
|
||||
|
||||
def get_hw_info():
|
||||
# 1. CPU 온도 (가장 부하가 큰 bigcore0 기준)
|
||||
cpu_temp = get_temp("bigcore0_thermal")
|
||||
|
||||
# 2. NVMe 온도
|
||||
nvme_temp = get_temp("nvme")
|
||||
|
||||
# 3. 가동 시간 (Uptime)
|
||||
with open("/proc/uptime", "r") as f:
|
||||
uptime_days = int(float(f.readline().split()[0]) // 86400)
|
||||
|
||||
return {
|
||||
"cpu_temp": str(cpu_temp),
|
||||
"nvme_temp": str(nvme_temp),
|
||||
"uptime_days": uptime_days,
|
||||
"last_update": time.strftime("%H:%M:%S")
|
||||
}
|
||||
|
||||
if __name__ == "__main__":
|
||||
status = get_hw_info()
|
||||
# 저장 경로: ~/services/hanmocnn/html/status.json
|
||||
base_dir = os.path.dirname(os.path.abspath(__file__))
|
||||
with open(os.path.join(base_dir, "html", "status.json"), "w") as f:
|
||||
json.dump(status, f)
|
||||
Reference in New Issue
Block a user