Very Good Version !
This commit is contained in:
Wind
24
.Backup/html /.gitignore
vendored
Normal file
24
.Backup/html /.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
107
.Backup/html /assets/css/style.css
Normal file
107
.Backup/html /assets/css/style.css
Normal file
@@ -0,0 +1,107 @@
|
||||
:root {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
background-color: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
.font-industrial { font-family: 'Space Grotesk', sans-serif; }
|
||||
.font-premium { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||
|
||||
.glass-effect {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Premium Typography Styles */
|
||||
.premium-kerning { letter-spacing: -0.04em; }
|
||||
.industrial-tracking { letter-spacing: 0.15em; }
|
||||
.hero-title {
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
.service-card:hover .service-image {
|
||||
transform: scale(1.1);
|
||||
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;
|
||||
color: white;
|
||||
opacity: 0.85;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.lang-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lang-btn.active-lang {
|
||||
background: rgba(37, 99, 235, 0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 스크롤 시: 흰색 배경 (어두운 텍스트) */
|
||||
#main-header.scrolled .lang-btn {
|
||||
color: #1e293b;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#main-header.scrolled .lang-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#main-header.scrolled .lang-btn.active-lang {
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 언어 버튼 컨테이너 테두리 */
|
||||
#lang-container {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
#main-header.scrolled #lang-container {
|
||||
border-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
BIN
.Backup/html /assets/images/BatchControl.png
Normal file
BIN
.Backup/html /assets/images/BatchControl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
.Backup/html /assets/images/ControlRoom1.png
Normal file
BIN
.Backup/html /assets/images/ControlRoom1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
.Backup/html /assets/images/ControlRoom2.png
Normal file
BIN
.Backup/html /assets/images/ControlRoom2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
.Backup/html /assets/images/ControlRoom3.png
Normal file
BIN
.Backup/html /assets/images/ControlRoom3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
.Backup/html /assets/images/ControlRoom4.png
Normal file
BIN
.Backup/html /assets/images/ControlRoom4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
.Backup/html /assets/images/ControlRoom5.png
Normal file
BIN
.Backup/html /assets/images/ControlRoom5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
.Backup/html /assets/images/ControlRoom6.png
Normal file
BIN
.Backup/html /assets/images/ControlRoom6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
.Backup/html /assets/images/ControlRoom7.png
Normal file
BIN
.Backup/html /assets/images/ControlRoom7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
.Backup/html /assets/images/bearing.png
Normal file
BIN
.Backup/html /assets/images/bearing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
.Backup/html /assets/images/dcsintegration.png
Normal file
BIN
.Backup/html /assets/images/dcsintegration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 521 KiB |
BIN
.Backup/html /assets/images/favicon.ico
Normal file
BIN
.Backup/html /assets/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
3
.Backup/html /assets/images/honeywell-logo.svg
Normal file
3
.Backup/html /assets/images/honeywell-logo.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="153" height="28" viewBox="0 0 153 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.1958 0.0376587H19.0741V21.8852H12.1958V11.9031H6.86567V21.948H0.0380859V0.0376587H6.90374V9.15336H12.2338L12.1958 0.0376587ZM38.1863 9.5677C38.7946 10.7403 39.1534 12.0238 39.2408 13.339C39.3281 14.6542 39.1419 15.9731 38.6939 17.2143C38.0334 19.088 36.6704 20.6389 34.8867 21.5462C33.3694 22.2242 31.7157 22.5505 30.0515 22.5004C28.0303 22.5744 26.0381 22.0069 24.3661 20.8807C22.8654 19.8031 21.7783 18.2539 21.2823 16.4861C20.9055 15.1998 20.8182 13.8475 21.0265 12.5242C21.2348 11.2009 21.7336 9.9389 22.4879 8.8269C23.1494 7.94476 23.9835 7.20335 24.9406 6.64681C25.8978 6.09028 26.9583 5.73 28.0591 5.58744C28.6483 5.47201 29.2479 5.41731 29.8485 5.42421C31.2007 5.36704 32.5518 5.55862 33.8334 5.98923C35.6886 6.57531 37.2464 7.84244 38.1863 9.53004V9.5677ZM32.3866 11.765C32.4008 10.879 32.2679 9.99675 31.9932 9.15336C31.6633 8.33721 31.0795 7.42062 30.0896 7.42062H29.747C29.214 7.52107 28.719 8.07353 28.2495 9.06546C27.8691 10.3994 27.7316 11.7897 27.8434 13.1713C27.8434 13.7112 27.8434 14.3013 27.8434 14.9291C27.8434 17.8045 28.0464 18.696 28.6809 19.5874C28.8163 19.8179 28.9994 20.0176 29.218 20.1734C29.4367 20.3291 29.6861 20.4375 29.95 20.4915C30.1555 20.5128 30.3633 20.4914 30.5599 20.4287C30.7566 20.366 30.9379 20.2633 31.0922 20.1273C31.8718 19.2543 32.3205 18.1401 32.3612 16.9758C32.412 16.4484 32.412 13.8493 32.3866 11.7273V11.765ZM55.4456 6.01434C54.5147 5.64739 53.5164 5.47789 52.5152 5.51682C51.5139 5.55575 50.5321 5.80225 49.6333 6.24035C48.7844 6.70525 48.0448 7.34288 47.4631 8.1112V5.91389H41.1178V21.8852H47.4631V10.409C47.8319 9.72798 48.4035 9.17567 49.1002 8.8269C49.4547 8.63076 49.8616 8.54725 50.2657 8.58768C50.6698 8.62811 51.0516 8.79052 51.3592 9.05291C51.732 9.53331 51.9168 10.1308 51.8795 10.7354V21.8852H58.1614V9.73093C58.114 8.91506 57.8337 8.12922 57.353 7.46468C56.8723 6.80014 56.2109 6.28416 55.4456 5.97667V6.01434ZM77.2228 9.70582C77.981 11.3319 78.3294 13.1156 78.238 14.904H66.8164V18.1435C66.8777 18.4973 67.0023 18.8375 67.1845 19.148C67.451 19.487 68.3647 20.8179 71.4739 20.3282C74.9258 19.7883 74.8369 17.3399 74.9004 17.3399H77.6289C77.5816 18.3459 77.1667 19.3008 76.4613 20.0269C74.9693 21.3481 73.0965 22.1736 71.1059 22.3874C69.716 22.6346 68.2899 22.6008 66.9137 22.2879C65.5374 21.975 64.2394 21.3895 63.0981 20.5668C61.8901 19.5757 60.9849 18.2714 60.4838 16.8C59.7882 14.4682 59.987 11.9643 61.0422 9.7686C61.8924 8.32351 63.1416 7.14836 64.6432 6.38107C66.1447 5.61378 67.8364 5.2862 69.5195 5.43676C73.5298 5.58743 75.8141 7.01883 77.2228 9.66815V9.70582ZM71.6135 11.3381C71.6175 10.6363 71.5366 9.93655 71.3724 9.2538C71.2274 8.71848 70.9379 8.23232 70.5348 7.84752C70.2297 7.55511 69.8361 7.36975 69.4143 7.31985C68.9926 7.26996 68.5659 7.35829 68.1997 7.57129C67.5673 8.10426 67.1486 8.84365 67.0195 9.6556C66.9042 10.6306 66.8576 11.6123 66.8799 12.5937H71.6135C71.6008 12.443 71.6008 12.0789 71.6135 11.3381ZM135.143 9.69327C135.899 11.3193 136.239 13.1046 136.133 14.8915H124.787V18.1309C124.849 18.4865 124.978 18.8273 125.168 19.1354C125.422 19.4744 126.348 20.8054 129.458 20.3157C132.909 19.7758 132.808 17.3273 132.884 17.3273H135.613C135.559 18.3318 135.145 19.2845 134.445 20.0143C132.946 21.3542 131.059 22.1932 129.052 22.4125C126.805 22.6386 123.62 22.7013 121.056 20.5919C119.845 19.6011 118.936 18.2971 118.429 16.8251C117.734 14.4933 117.933 11.9894 118.988 9.79371C119.838 8.34863 121.087 7.17347 122.589 6.40618C124.09 5.63889 125.782 5.31131 127.465 5.46187C131.45 5.58743 133.734 7.01883 135.143 9.66815V9.69327ZM129.483 11.3381C129.492 10.6353 129.406 9.93447 129.229 9.2538C129.083 8.71607 128.789 8.22916 128.379 7.84752C128.066 7.5777 127.672 7.41588 127.258 7.38644C126.844 7.357 126.431 7.46153 126.082 7.6843C125.449 8.21727 125.031 8.95665 124.902 9.7686C124.781 10.7389 124.734 11.7169 124.762 12.6942H129.483C129.483 12.443 129.483 12.0789 129.483 11.3381ZM115.523 5.91389L113.074 14.8664L110.345 5.91389H104.749L102.211 14.8664L99.4061 5.91389H90.751L87.6038 13.5229L84.6341 5.91389H77.6796L84.1138 22.2368C84.0938 22.4457 84.0513 22.652 83.9869 22.852C83.7096 23.7546 83.2425 24.589 82.6163 25.3004C82.4192 25.5316 82.1644 25.7077 81.8772 25.8112C81.59 25.9148 81.2804 25.9421 80.9792 25.8906C81.2053 25.6767 81.3865 25.4206 81.5122 25.1372C81.6861 24.4681 81.5953 23.7585 81.2584 23.1534C80.9553 22.697 80.5101 22.3508 79.9903 22.1673C79.4704 21.9837 78.9043 21.9729 78.3776 22.1363C77.7125 22.2812 77.1309 22.6772 76.7564 23.24C76.3819 23.8029 76.2442 24.488 76.3725 25.1498C76.5248 26.4054 77.3878 27.5731 79.5325 27.9498C80.3689 28.1157 81.2341 28.0703 82.0481 27.818C82.8622 27.5656 83.5988 27.1143 84.19 26.5058C85.1381 25.395 85.8658 24.117 86.3347 22.739L93.048 6.41613L97.8198 21.8852H103.213L105.751 12.6188L108.67 21.8852H113.912L118.353 5.91389H115.523ZM138.036 21.8852H144.153V0.0376587H138.036V21.8852ZM146.057 0.0376587V21.8852H152.174V0.0376587H146.057Z" fill="#D22630"/>
|
||||
</svg>
|
||||
|
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` |
|
||||
|
||||
|
||||
|
||||
|
||||
🔹 핵심 정리
|
||||
• 대문자 → 절대 좌표 (캔버스 기준)
|
||||
• 소문자 → 상대 좌표 (현재 위치 기준)
|
||||
• /은 시작점 이동, /은 직선, /는 곡선, 는 닫기
|
||||
BIN
.Backup/html /assets/images/instrument.png
Normal file
BIN
.Backup/html /assets/images/instrument.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
BIN
.Backup/html /assets/images/reactor.png
Normal file
BIN
.Backup/html /assets/images/reactor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
349
.Backup/html /assets/js/i18n.js
Normal file
349
.Backup/html /assets/js/i18n.js
Normal file
@@ -0,0 +1,349 @@
|
||||
// ============================================================
|
||||
// 다국어 지원 (한국어 / 영어)
|
||||
// ============================================================
|
||||
const translations = {
|
||||
en: {
|
||||
// NAV
|
||||
'nav.home' : 'Home',
|
||||
'nav.dcs' : 'DCS',
|
||||
'nav.batch' : 'Batch Process',
|
||||
'nav.dbsvr' : 'Database Server',
|
||||
'nav.products' : 'Instruments',
|
||||
'nav.services' : 'References',
|
||||
'nav.about' : 'About',
|
||||
'nav.contact' : 'Contact',
|
||||
'nav.quote' : 'Inquiry',
|
||||
|
||||
// HERO
|
||||
'hero.badge' : 'Precision Industrial Control',
|
||||
'hero.title' : 'Engineering <span class="text-blue-500 font-normal">Precision</span> <br class="hidden md:block"/> Industrial Control',
|
||||
'hero.desc' : 'Hanmo Control & Network Co., Ltd. provides elite-tier DCS and SCADA architectures for critical infrastructure and modern digital transformation.',
|
||||
'hero.btn1' : 'Explore Expertise',
|
||||
'hero.btn2' : 'Consultation',
|
||||
'stat.nodes' : 'Reference Projects',
|
||||
'stat.uptime' : 'Downtime',
|
||||
'stat.engineers': 'Partners',
|
||||
'stat.years' : 'Years Excellence',
|
||||
|
||||
// DCS
|
||||
'dcs.badge' : 'Advanced Control Systems',
|
||||
'dcs.title' : 'DCS Integration',
|
||||
'dcs.desc' : 'Enterprise-grade Distributed Control System architecture designed for the most critical industrial applications.',
|
||||
'dcs.f0.title' : 'Honeywell Experion PKS',
|
||||
'dcs.f0.desc' : 'Reliable DCS solutions with Honeywell\'s Experion PKS, ensuring seamless integration and optimal performance',
|
||||
'dcs.f1.title' : 'Redundant Architecture',
|
||||
'dcs.f1.desc' : 'Fault-tolerant systems with dual processing units ensuring 99.99% uptime',
|
||||
'dcs.f2.title' : 'Real-time Communication',
|
||||
'dcs.f2.desc' : 'Sub-millisecond response times with synchronized control across multiple nodes',
|
||||
'dcs.f3.title' : 'Security Certified',
|
||||
'dcs.f3.desc' : 'IEC 62443 compliance with military-grade encryption protocols',
|
||||
'dcs.btn' : 'Request Technical Specs',
|
||||
|
||||
// BATCH
|
||||
'batch.badge' : 'Process Automation',
|
||||
'batch.title' : 'Batch Process Control',
|
||||
'batch.desc' : 'Not only precision control, but also production planning, process data & historical lot management, you can get it by our Batch Manager software.',
|
||||
'batch.f1.title': 'Batch Manager Software',
|
||||
'batch.f1.desc' : 'Process control data and production data management per lot no. in a software platform',
|
||||
'batch.f2.title': 'ControlEdge HC900',
|
||||
'batch.f2.desc' : 'Over the PLC for continuous and batch process control, Hybrid Controller from Honeywell. it is perfect solution of batch plant',
|
||||
'batch.f3.title': 'Process Data Management',
|
||||
'batch.f3.desc' : 'Setpoint scheduling & recipe for various products, lot management with single mouse click',
|
||||
'batch.f4.title': 'Quick Production Setup',
|
||||
'batch.f4.desc' : 'Real-time batch tracking with predictive quality monitoring',
|
||||
'batch.f5.title': 'Easy Historical Tracking',
|
||||
'batch.f5.desc' : 'FDA 21 CFR Part 11 compliance and complete data integrity',
|
||||
'batch.btn' : 'Start Implementation',
|
||||
|
||||
// DBSVR
|
||||
'db.badge' : 'Data Infrastructure',
|
||||
'db.title' : 'Database Server Solutions',
|
||||
'db.desc' : 'Mission-critical historian and data management infrastructure for continuous industrial operations.',
|
||||
'db.c1.title' : 'High-Performance Historian',
|
||||
'db.c1.desc' : 'SQL Server-based architecture optimized for 1M+ data points per second with sub-second query response',
|
||||
'db.c2.title' : 'Disaster Recovery',
|
||||
'db.c2.desc' : 'Geo-redundant replication with RTO < 15 minutes and RPO < 5 minutes',
|
||||
'db.c3.title' : 'Security & Compliance',
|
||||
'db.c3.desc' : 'Role-based access control, encryption at rest/transit, and full audit logging',
|
||||
'db.btn' : 'Get Infrastructure Consultation',
|
||||
|
||||
// INSTRUMENTS
|
||||
'inst.badge' : 'Precision Measurement & Actuation',
|
||||
'inst.title' : 'Control Instruments',
|
||||
'inst.desc' : 'Optimal Precision Starts with Understanding of Your Environment',
|
||||
'inst.i1.title' : 'Flow Transmitters',
|
||||
'inst.i1.desc' : 'Magnetic, Coriolis, and Vortex, traditional flowmeters',
|
||||
'inst.i2.title' : 'Pressure Transmitters',
|
||||
'inst.i2.desc' : 'Differential and absolute pressure sensors for ultra-high sensitivity',
|
||||
'inst.i3.title' : 'Temperature Sensors',
|
||||
'inst.i3.desc' : 'RTD, thermocouple, and infrared temperature measurement',
|
||||
'inst.i4.title' : 'Level Transmitters',
|
||||
'inst.i4.desc' : 'Ultrasonic, radar, capacitive and float level sensors',
|
||||
'inst.i5.title' : 'Analytical Sensors',
|
||||
'inst.i5.desc' : 'pH, conductivity, oxygen, and dissolved gas analyzer',
|
||||
'inst.i6.title' : 'Control Valves',
|
||||
'inst.i6.desc' : 'Smart positioners with HART communication',
|
||||
'inst.i7.title' : 'Shutoff Valves',
|
||||
'inst.i7.desc' : 'Pneumatic, Electrical on/off valves with Explosion proof',
|
||||
'inst.i8.title' : 'Smart Data Loggers',
|
||||
'inst.i8.desc' : 'IoT-enabled data acquisition units with cloud connectivity',
|
||||
'inst.custom.title' : 'Custom Integration Available',
|
||||
'inst.custom.desc' : 'All instruments integrate seamlessly with our DCS and SCADA platforms. Custom configurations available for specialized applications.',
|
||||
'inst.custom.btn' : 'Request Custom Configuration',
|
||||
'inst.quote' : 'Get Quote →',
|
||||
|
||||
// REFERENCES
|
||||
'svc.badge' : 'Referenced Plant Varieties',
|
||||
'svc.title' : 'Versatile Process References',
|
||||
'svc.desc' : 'From deep understanding of various industry references to Seamless Execution.',
|
||||
'svc.s1.title' : 'DCS / SCADA',
|
||||
'svc.s1.desc' : 'Semiconductor Solvent Recovery Plant., 80% Hydrazin Plant, SNCR & SCR Envirionmental Plant, etc',
|
||||
'svc.s1.item1' : 'Semiconductor Solvent Recovery Plant',
|
||||
'svc.s1.item2' : '80% Hydrazin Plant',
|
||||
'svc.s1.item3' : 'SNCR & SCR in Power Plant',
|
||||
'svc.s1.item4' : 'Oil Tank Terminal',
|
||||
//'svc.s1.link' : 'Learn More',
|
||||
|
||||
'svc.s2.title' : 'Batch Plant',
|
||||
'svc.s2.desc' : 'Real-time monitoring platforms with advanced HMI and secure remote access protocols.',
|
||||
'svc.s2.item1' : 'Micro Capsule forming agent plant',
|
||||
'svc.s2.item2' : 'ADCA,HDCA Plant',
|
||||
'svc.s2.item3' : 'Vacuum Furnace Plant - Decorative Stainless Plate',
|
||||
//'svc.s2.link' : 'Case Studies',
|
||||
|
||||
'svc.s3.title' : 'Other Projects',
|
||||
'svc.s3.desc' : 'Various industrial automation projects.',
|
||||
'svc.s3.item1' : 'Waste to Energy Incinerator Plant',
|
||||
'svc.s3.item2' : 'Copper Continuous Casting Plant',
|
||||
'svc.s3.item3' : 'Bearing Heat Treatment Plant',
|
||||
'svc.s3.item4' : 'Chlor-Alkali Plant',
|
||||
//'svc.s3.link' : 'CASE STUDIES',
|
||||
|
||||
'svc.s4.title' : 'Instruments',
|
||||
'svc.s4.desc' : 'Smart field sensors for flow, pressure, and temperature with high-accuracy calibration.',
|
||||
'svc.s4.item1' : 'Honeywell',
|
||||
'svc.s4.item2' : 'Azbil',
|
||||
'svc.s4.item3' : 'Endress Hauser',
|
||||
'svc.s4.item4' : 'Flownics',
|
||||
'svc.s4.item5' : 'Komoto - (Motoyama Korea)',
|
||||
'svc.s4.item6' : 'Autonics - (Konics)',
|
||||
//'svc.s4.link' : 'Product Catalog',
|
||||
|
||||
// ABOUT
|
||||
'about.badge' : 'About Hanmo',
|
||||
'about.title' : 'Trusted Partner in Industrial Automation',
|
||||
'about.p1' : 'Since our founding, Hanmo Control & Network Co., Ltd. has been at the forefront of industrial automation engineering. We specialize in designing, implementing, and maintaining mission-critical control systems for the world\'s most demanding industries.',
|
||||
'about.p2' : 'Our certified engineers brings decades of combined experience in DCS, SCADA, instrumentation and industrial networking, ensuring your operations run with unmatched precision and reliability.',
|
||||
'about.cert' : 'Certified',
|
||||
'about.support' : 'Support',
|
||||
'about.years' : 'Years of Industrial Excellence',
|
||||
|
||||
// CONTACT
|
||||
'contact.badge' : 'Get In Touch',
|
||||
'contact.title' : 'Start Your Project',
|
||||
'contact.desc' : 'Contact our engineering team for a detailed consultation and project assessment.',
|
||||
'contact.name' : 'Full Name',
|
||||
'contact.email' : 'Email Address',
|
||||
'contact.company': 'Company Name',
|
||||
'contact.msg' : 'Describe your project requirements...',
|
||||
'contact.btn' : 'Send Message',
|
||||
'contact.sending': 'Sending...',
|
||||
'contact.success': '✅ Message sent successfully. We will get back to you shortly.',
|
||||
'contact.error.required': '⚠ Name, email, and message are required.',
|
||||
'contact.error.email' : '⚠ Please enter a valid email address.',
|
||||
'contact.error.fail' : '❌ Failed to send. Please try again later.',
|
||||
|
||||
// FOOTER
|
||||
'footer.copy' : '© 2024 Hanmo Control & Network Co., Ltd. All rights reserved.',
|
||||
},
|
||||
|
||||
ko: {
|
||||
// NAV
|
||||
'nav.home' : '홈',
|
||||
'nav.dcs' : 'DCS',
|
||||
'nav.batch' : '배치 프로세스',
|
||||
'nav.dbsvr' : '데이터베이스 서버',
|
||||
'nav.products' : '계측기기',
|
||||
'nav.services' : '실적 플랜트',
|
||||
'nav.about' : '회사소개',
|
||||
'nav.contact' : '문의하기',
|
||||
'nav.quote' : '상담 신청',
|
||||
|
||||
// HERO
|
||||
'hero.badge' : '정밀 공정 제어 시스템',
|
||||
'hero.title' : '<span class="text-blue-500 font-normal">정밀함</span>을 설계하는<br class="hidden md:block"/> 공정 제어 전문기업',
|
||||
'hero.desc' : '(주)한모씨앤앤은 핵심 인프라와 디지털 전환을 위한 최고 수준의 DCS 및 SCADA BATCH CONTROL 시스템을 제공합니다.',
|
||||
'hero.btn1' : '전문 분야 보기',
|
||||
'hero.btn2' : '상담 신청',
|
||||
'stat.nodes' : '프로젝트 실적',
|
||||
'stat.uptime' : '시스템 가동률',
|
||||
'stat.engineers': '파트너사',
|
||||
'stat.years' : '년 업계 경력',
|
||||
|
||||
// DCS
|
||||
'dcs.badge' : '공정 제어 시스템',
|
||||
'dcs.title' : 'DCS 통합 솔루션',
|
||||
'dcs.desc' : '중요한 공정 현장을 위한 엔터프라이즈급 분산 제어 시스템(DCS) 아키텍처를 설계합니다.',
|
||||
'dcs.f0.title' : 'Honeywell Experion',
|
||||
'dcs.f0.desc' : 'Honeywell Experion 플랫폼을 기반으로 한 안정적이고 다양한 DCS 솔루션을 제공합니다.',
|
||||
'dcs.f1.title' : '이중화 아키텍처',
|
||||
'dcs.f1.desc' : '이중화 서버 & 컨트롤러,통신으로 99.99% 가동률을 보장하는 내결함성 시스템',
|
||||
'dcs.f2.title' : '실시간 통신',
|
||||
'dcs.f2.desc' : '밀리초 미만의 응답 시간으로 다중 노드 간 동기화된 제어 실현',
|
||||
'dcs.f3.title' : '보안 인증',
|
||||
'dcs.f3.desc' : 'IEC 62443 준수 및 군사 수준 암호화 프로토콜 적용',
|
||||
'dcs.btn' : '기술 사양 요청',
|
||||
|
||||
// BATCH
|
||||
'batch.badge' : '배치 프로세스 자동화',
|
||||
'batch.title' : '배치 프로세스 제어',
|
||||
'batch.desc' : '배치 프로세스 자동화는 생산 제품의 다양성을 위한 정밀제어 및 제품별 설정 데이터 생성 및 관리, 생산 로트 이력관리가 하나의 시스템에서 실현됩니다. 반응기, 산업로(배치,연속 혼재공정) 등의 배치 플랜트에 최적화된 제어 시스템과 소프트웨어 솔루션을 제공합니다.',
|
||||
'batch.f1.title': '배치 매니저 소프트웨어',
|
||||
'batch.f1.desc' : '제품별 설정값 패턴 ,레시피, 로트관리 등의 제어와 생산 데이터베이스가 하나의 시스템에서 제공됩니다',
|
||||
'batch.f2.title': 'ControlEdge HC900',
|
||||
'batch.f2.desc' : '설정값 패턴 프로그램, 레시피, 정밀 PID 제어, PLC를 넘어서는 하이브리드 컨트롤러로 배치 플랜트에 최적화된 솔루션',
|
||||
'batch.f3.title': 'MES,ERP 연동',
|
||||
'batch.f3.desc' : '자사 데이터베이스 서버를 통한, 손쉬운 MES, ERP 연동으로 생산 스케쥴 관리 지원 가능',
|
||||
'batch.f4.title': '신속한 운전 설정',
|
||||
'batch.f4.desc' : '단 한번의 다운로드로, 제품별 생산 환경 설정이 초단위로 완료됩니다',
|
||||
'batch.f5.title': '생산 로트 이력 관리',
|
||||
'batch.f5.desc' : '생산 로트 관리 및 로트별 차트 그래프를 제공하여 이력 데이터 분석에 탁월.',
|
||||
'batch.btn' : '구축 상담 신청',
|
||||
|
||||
// DBSVR
|
||||
'db.badge' : '데이터 인프라',
|
||||
'db.title' : '데이터베이스 서버 솔루션',
|
||||
'db.desc' : '지속적인 공정 운영을 위한 미션 크리티컬 히스토리안 및 데이터 관리 인프라를 제공합니다.',
|
||||
'db.c1.title' : '고성능 히스토리안',
|
||||
'db.c1.desc' : '초당 100만+ 데이터 포인트를 처리하는 SQL Server 기반 아키텍처',
|
||||
'db.c2.title' : '재해 복구',
|
||||
'db.c2.desc' : 'RTO 15분 미만, RPO 5분 미만의 지역 이중화 복제 시스템',
|
||||
'db.c3.title' : '보안 및 컴플라이언스',
|
||||
'db.c3.desc' : '역할 기반 접근 제어, 저장/전송 암호화 및 완전한 감사 로깅',
|
||||
'db.btn' : '인프라 상담 신청',
|
||||
|
||||
// INSTRUMENTS
|
||||
'inst.badge' : '정밀 계측',
|
||||
'inst.title' : '계측 제어 기기',
|
||||
'inst.desc' : '가혹한 공정 환경에서도 정확성과 신뢰성을 발휘하는 스마트 현장 계측기기를 공급합니다.',
|
||||
'inst.i1.title' : '유량 변환기',
|
||||
'inst.i1.desc' : '±0.1% 정확도의 코리올리 질량 유량계, 마그네틱, 볼텍스 유량계',
|
||||
'inst.i2.title' : '압력 트랜스미터',
|
||||
'inst.i2.desc' : '초고감도 차압 및 절대압, 리모트실 트랜스미터',
|
||||
'inst.i3.title' : '온도 센서',
|
||||
'inst.i3.desc' : 'RTD, 열전대, 적외선 온도 측정기',
|
||||
'inst.i4.title' : '레벨 트랜스미터',
|
||||
'inst.i4.desc' : '초음파, 레이더, 정전용량식 레벨 트랜스미터',
|
||||
'inst.i5.title' : '분석 센서',
|
||||
'inst.i5.desc' : 'pH, 전도도, 산소, 용존 가스 분석기',
|
||||
'inst.i6.title' : '컨트롤 밸브',
|
||||
'inst.i6.desc' : 'HART 통신 지원 스마트 포지셔너',
|
||||
'inst.i7.title' : '온오프 밸브',
|
||||
'inst.i7.desc' : '공압, 전기식 셧오프 밸브',
|
||||
'inst.i8.title' : '스마트 데이터 로거',
|
||||
'inst.i8.desc' : '클라우드 연결 기능을 갖춘 IoT 데이터 수집 장치',
|
||||
'inst.custom.title' : '맞춤형 통합 솔루션 제공',
|
||||
'inst.custom.desc' : '모든 계측기기는 당사의 DCS 및 SCADA 플랫폼과 원활하게 통합됩니다. 특수 응용 분야에 맞는 커스텀 구성이 가능합니다.',
|
||||
'inst.custom.btn' : '맞춤 구성 요청',
|
||||
'inst.quote' : '상담 신청 →',
|
||||
|
||||
// REFERENCES
|
||||
'svc.badge' : '실적 플랜트 분야',
|
||||
'svc.title' : '다양한 산업 분야의 자동화 실적',
|
||||
'svc.desc' : '공정에 대한 깊이있는 이해와 경험을 바탕으로 복잡한 공정을 위한 특화된 엔지니어링을 제공합니다.',
|
||||
'svc.s1.title' : 'DCS / SCADA',
|
||||
'svc.s1.desc' : '반도체용 솔벤트 회수 플랜트, 발전소, 화학 플랜트 등 대규모 공정을 위한 이중화 제어 아키텍처',
|
||||
'svc.s1.item1' : '반도체용 솔벤트 회수 플랜트',
|
||||
'svc.s1.item2' : '80% 하이드라진 플랜트',
|
||||
'svc.s1.item3' : '발전소 SNCR & SCR 플랜트',
|
||||
'svc.s1.item4' : '오일 탱크 터미널 플랜트',
|
||||
// 'svc.s1.link' : '자세히 보기',
|
||||
'svc.s2.title' : '배치 플랜트',
|
||||
'svc.s2.desc' : '실시간 모니터링 플랫폼과 고급 HMI, 안전한 원격 액세스 프로토콜을 갖춘 배치 플랜트 제어 시스템',
|
||||
'svc.s2.item1' : '마이크로 캡슐 발포제 플랜트',
|
||||
'svc.s2.item2' : 'ADCA,HDCA 플랜트',
|
||||
'svc.s2.item3' : '진공 열처리로 플랜트',
|
||||
// 'svc.s2.link' : '사례 연구',
|
||||
'svc.s3.title' : '기타 프로젝트',
|
||||
'svc.s3.desc' : '기타 핵심 산업 자동화',
|
||||
'svc.s3.item1' : '쓰레기 소각장 플랜트',
|
||||
'svc.s3.item2' : '구리 환재 연속 주조로',
|
||||
'svc.s3.item3' : '베어링 연속 열처리로 플랜트',
|
||||
'svc.s3.item4' : '가성소다, 염소 전해 플랜트',
|
||||
// 'svc.s3.link' : '데이터 보안',
|
||||
'svc.s4.title' : '제어 계측기기 협력사',
|
||||
'svc.s4.desc' : '고객 현장에 대한 깊은 이해를 바탕으로 최적 계측기 선정',
|
||||
'svc.s4.item1' : '한국하니웰(주)',
|
||||
'svc.s4.item2' : '한국아즈빌(주)',
|
||||
'svc.s4.item3' : '엔드레스하우저',
|
||||
'svc.s4.item4' : '플로우닉스(주)',
|
||||
'svc.s4.item5' : '(주)코모토',
|
||||
'svc.s4.item6' : '오토닉스(주)',
|
||||
// 'svc.s4.link' : '제품 카탈로그',
|
||||
|
||||
// ABOUT
|
||||
'about.badge' : '회사 소개',
|
||||
'about.title' : '공정 자동화의 신뢰할 수 있는 파트너',
|
||||
'about.p1' : '(주)한모씨앤앤는 창립 이래 공정 자동화 엔지니어링의 최전선에서 활동하고 있습니다. 세계에서 가장 까다로운 공정 현장을 위한 미션 크리티컬 제어 시스템 설계, 구현 및 유지보수를 전문으로 합니다.',
|
||||
'about.p2' : 'DCS, SCADA, 계측기기, 제어반 설계 및 제작, 공정 네트워킹 분야에서 수십 년의 경험을 바탕으로 최고의 정밀도와 신뢰성을 보장합니다.',
|
||||
'about.cert' : '인증',
|
||||
'about.support' : '지원',
|
||||
'about.years' : 'Years of Industrial Excellence',
|
||||
|
||||
// CONTACT
|
||||
'contact.badge' : '문의하기',
|
||||
'contact.title' : '프로젝트를 시작하세요',
|
||||
'contact.desc' : '엔지니어링 팀에 문의하여 상세 상담 및 프로젝트 평가를 받아보세요.',
|
||||
'contact.name' : '성명',
|
||||
'contact.email' : '이메일 주소',
|
||||
'contact.company': '회사명',
|
||||
'contact.msg' : '프로젝트 요구사항을 설명해 주세요...',
|
||||
'contact.btn' : '메시지 보내기',
|
||||
'contact.sending': '전송 중...',
|
||||
'contact.success': '✅ 메시지가 성공적으로 전송되었습니다. 빠른 시일 내에 회신 드리겠습니다.',
|
||||
'contact.error.required': '⚠ 이름, 이메일, 메시지는 필수 항목입니다.',
|
||||
'contact.error.email' : '⚠ 올바른 이메일 주소를 입력해 주세요.',
|
||||
'contact.error.fail' : '❌ 전송에 실패했습니다. 잠시 후 다시 시도해 주세요.',
|
||||
|
||||
// FOOTER
|
||||
'footer.copy' : '© (주)한모씨앤앤. All rights reserved.',
|
||||
}
|
||||
};
|
||||
|
||||
// ── 현재 언어 (로컬스토리지 유지) ──────────────────────────
|
||||
let currentLang = localStorage.getItem('hmLang') || 'en';
|
||||
|
||||
function t(key) {
|
||||
return translations[currentLang][key] || translations['en'][key] || key;
|
||||
}
|
||||
|
||||
function applyTranslations() {
|
||||
document.querySelectorAll('[data-i18n]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n');
|
||||
const type = el.getAttribute('data-i18n-type') || 'text';
|
||||
if (type === 'html') {
|
||||
el.innerHTML = t(key);
|
||||
} else if (type === 'placeholder') {
|
||||
el.setAttribute('placeholder', t(key));
|
||||
} else {
|
||||
el.textContent = t(key);
|
||||
}
|
||||
});
|
||||
|
||||
// <html lang> 업데이트
|
||||
document.documentElement.lang = currentLang;
|
||||
|
||||
// 버튼 활성 상태 업데이트
|
||||
document.querySelectorAll('.lang-btn').forEach(btn => {
|
||||
btn.classList.toggle('active-lang', btn.dataset.lang === currentLang);
|
||||
});
|
||||
}
|
||||
|
||||
function switchLang(lang) {
|
||||
currentLang = lang;
|
||||
localStorage.setItem('hmLang', lang);
|
||||
applyTranslations();
|
||||
}
|
||||
|
||||
// DOMContentLoaded 시 번역 적용
|
||||
document.addEventListener('DOMContentLoaded', applyTranslations);
|
||||
149
.Backup/html /assets/js/script.js
Normal file
149
.Backup/html /assets/js/script.js
Normal file
@@ -0,0 +1,149 @@
|
||||
// ============================================================
|
||||
// ★ EmailJS 설정 - 아래 3가지 값을 본인 계정으로 교체하세요 ★
|
||||
// ============================================================
|
||||
const EMAILJS_PUBLIC_KEY = 'HO6i369gX6X5HEXtJ';
|
||||
const EMAILJS_SERVICE_ID = 'service_4ur5lqd';
|
||||
const EMAILJS_TEMPLATE_ID = 'template_jp0v5qv';
|
||||
// ============================================================
|
||||
|
||||
emailjs.init(EMAILJS_PUBLIC_KEY);
|
||||
|
||||
// ── Contact Form ─────────────────────────────────────────────
|
||||
document.getElementById('contact-submit').addEventListener('click', function () {
|
||||
const name = document.getElementById('contact-name').value.trim();
|
||||
const email = document.getElementById('contact-email').value.trim();
|
||||
const company = document.getElementById('contact-company').value.trim();
|
||||
const message = document.getElementById('contact-message').value.trim();
|
||||
const btn = document.getElementById('contact-submit');
|
||||
|
||||
if (!name || !email || !message) {
|
||||
showStatus('error', t('contact.error.required')); return;
|
||||
}
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
showStatus('error', t('contact.error.email')); return;
|
||||
}
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = t('contact.sending');
|
||||
|
||||
const templateParams = {
|
||||
name : name,
|
||||
message : 'Email : ' + email + '\nCompany : ' + (company || 'N/A') + '\n\n' + message,
|
||||
reply_to : email
|
||||
};
|
||||
|
||||
emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams)
|
||||
.then(function () {
|
||||
showStatus('success', t('contact.success'));
|
||||
document.getElementById('contact-name').value = '';
|
||||
document.getElementById('contact-email').value = '';
|
||||
document.getElementById('contact-company').value = '';
|
||||
document.getElementById('contact-message').value = '';
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error('EmailJS error:', error);
|
||||
showStatus('error', t('contact.error.fail'));
|
||||
})
|
||||
.finally(function () {
|
||||
btn.disabled = false;
|
||||
btn.textContent = t('contact.btn');
|
||||
});
|
||||
});
|
||||
|
||||
function showStatus(type, msg) {
|
||||
const status = document.getElementById('contact-status');
|
||||
status.classList.remove('hidden', 'bg-green-500/20', 'text-green-400', 'bg-red-500/20', 'text-red-400');
|
||||
status.classList.add(type === 'success' ? 'bg-green-500/20' : 'bg-red-500/20',
|
||||
type === 'success' ? 'text-green-400' : 'text-red-400');
|
||||
status.textContent = msg;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 메인 스크립트 (전체 기능 포함)
|
||||
// ============================================================
|
||||
|
||||
// DOMContentLoaded 이벤트
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// ============================================================
|
||||
// 메뉴 토글
|
||||
// ============================================================
|
||||
const menuBtn = document.querySelector('#mobile-menu-btn');
|
||||
const navMenu = document.querySelector('#mobile-menu');
|
||||
const closeBtn = document.querySelector('#close-menu-btn');
|
||||
if (menuBtn && navMenu) {
|
||||
// 메뉴열기
|
||||
menuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.remove('translate-x-full');
|
||||
menuBtn.classList.toggle('open');
|
||||
});
|
||||
//메뉴닫기
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
navMenu.classList.add('translate-x-full');
|
||||
});
|
||||
}
|
||||
//메뉴 링크 클릭 시 닫기
|
||||
navMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click',() => {
|
||||
navMenu.classList.add('translate-x-full');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 스크롤 애니메이션
|
||||
// ============================================================
|
||||
const scrollElems = document.querySelectorAll('[data-scroll]');
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
const scrollObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
scrollElems.forEach(el => scrollObserver.observe(el));
|
||||
|
||||
// ============================================================
|
||||
// 상단 버튼/헤더 스크롤 효과
|
||||
// ============================================================
|
||||
const header = document.querySelector('header');
|
||||
const topBtn = document.querySelector('.back-to-top');
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
header?.classList.add('scrolled');
|
||||
topBtn?.classList.add('visible');
|
||||
} else {
|
||||
header?.classList.remove('scrolled');
|
||||
topBtn?.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
|
||||
topBtn?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
|
||||
|
||||
// ============================================================
|
||||
// 기타 커스텀 이벤트/버튼
|
||||
// ============================================================
|
||||
// 예: 상담 신청 모달 열기
|
||||
document.querySelectorAll('.open-consult').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const modal = document.querySelector('#consult-modal');
|
||||
modal?.classList.add('open');
|
||||
});
|
||||
});
|
||||
|
||||
// 예: 모달 닫기
|
||||
document.querySelectorAll('.modal .close-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const modal = btn.closest('.modal');
|
||||
modal?.classList.remove('open');
|
||||
});
|
||||
});
|
||||
});
|
||||
198
.Backup/html /assets/js/모바일메뉴 사라짐.md
Normal file
198
.Backup/html /assets/js/모바일메뉴 사라짐.md
Normal file
@@ -0,0 +1,198 @@
|
||||
모바일 메뉴가 동작하지 않는 문제를 찾았습니다! 🔍
|
||||
🔴 문제점 발견
|
||||
1. 클래스명 불일치 (가장 큰 문제!)
|
||||
script.js:
|
||||
javascriptconst menuBtn = document.querySelector('.menu-btn'); // ❌ .menu-btn
|
||||
const navMenu = document.querySelector('.nav-menu'); // ❌ .nav-menu
|
||||
index.html:
|
||||
html<button id="mobile-menu-btn" class="md:hidden text-white p-2">
|
||||
<!-- ❌ 클래스가 없고 ID만 있음 -->
|
||||
</button>
|
||||
|
||||
<div id="mobile-menu" class="fixed inset-0 z-[60] ...">
|
||||
<!-- ❌ 클래스가 없고 ID만 있음 -->
|
||||
</div>
|
||||
→ .menu-btn과 .nav-menu 클래스가 HTML에 없습니다!
|
||||
|
||||
2. 닫기 버튼도 작동 안 함
|
||||
script.js:
|
||||
javascriptdocument.querySelectorAll('.modal .close-btn').forEach(btn => {
|
||||
// ❌ .close-btn 클래스를 찾지만...
|
||||
});
|
||||
index.html:
|
||||
html<button id="close-menu-btn" class="text-white text-3xl">×</button>
|
||||
<!-- ❌ .close-btn 클래스가 없음 -->
|
||||
|
||||
3. 이벤트 핸들러 중복
|
||||
script.js 하단:
|
||||
javascript// 메뉴 토글 코드가 있는데...
|
||||
const menuBtn = document.querySelector('.menu-btn');
|
||||
index.html 하단:
|
||||
html<!-- 하지만 HTML에 별도의 스크립트는 없음 (좋음) -->
|
||||
|
||||
📋 문제 요약
|
||||
요소script.js에서 찾는 것index.html 실제메뉴 버튼.menu-btn#mobile-menu-btn (클래스 없음)메뉴.nav-menu#mobile-menu (클래스 없음)닫기 버튼.modal .close-btn#close-menu-btn (클래스 없음)
|
||||
|
||||
✅ 해결 방법 (3가지 옵션)
|
||||
옵션 1: script.js 수정 (권장)
|
||||
ID로 찾도록 변경:
|
||||
javascriptconst menuBtn = document.querySelector('#mobile-menu-btn'); // ID로 변경
|
||||
const navMenu = document.querySelector('#mobile-menu'); // ID로 변경
|
||||
옵션 2: index.html 수정
|
||||
클래스 추가:
|
||||
html<button id="mobile-menu-btn" class="menu-btn md:hidden text-white p-2">
|
||||
<div id="mobile-menu" class="nav-menu fixed inset-0 z-[60] ...">
|
||||
<button id="close-menu-btn" class="close-btn text-white text-3xl">
|
||||
옵션 3: 둘 다 수정
|
||||
|
||||
HTML에 클래스 추가 + script.js도 ID로 변경
|
||||
|
||||
|
||||
🎯 추가 문제점
|
||||
4. 메뉴 링크 클릭 시 닫기 기능 없음
|
||||
모바일 메뉴에서 링크 클릭해도 메뉴가 안 닫힙니다:
|
||||
javascript// 이 기능이 script.js에 없음!
|
||||
// 메뉴 내부 링크 클릭 시 메뉴 닫기
|
||||
5. translate-x-full 제어 없음
|
||||
html<div id="mobile-menu" class="... translate-x-full ...">
|
||||
이 translate-x-full 클래스를 제거/추가하는 JavaScript가 없습니다!
|
||||
|
||||
🔧 수정이 필요한 부분 정리
|
||||
script.js 수정 필요:
|
||||
|
||||
Line 74-75: .menu-btn → #mobile-menu-btn
|
||||
Line 75: .nav-menu → #mobile-menu
|
||||
Line 76-79: translate-x-full 제어 추가
|
||||
닫기 버튼 이벤트 추가
|
||||
메뉴 링크 클릭 시 닫기 추가
|
||||
|
||||
index.html (선택사항):
|
||||
|
||||
클래스 추가하면 더 좋지만, script.js만 수정해도 됨
|
||||
|
||||
|
||||
💡 결론
|
||||
가장 큰 문제: script.js가 존재하지 않는 .menu-btn과 .nav-menu 클래스를 찾고 있어서 menuBtn과 navMenu가 모두 null이 되고, 이벤트가 등록되지 않습니다.
|
||||
→ ID로 찾도록 변경하면 해결됩니다! 👍<div id="mobile-menu" class="... translate-x-full ...">
|
||||
이부분 상세하게 다시 알려줘오전 7:37translate-x-full 부분을 상세하게 설명드릴게요!
|
||||
🔍 현재 상황 분석
|
||||
index.html 67번 라인:
|
||||
html<div id="mobile-menu" class="fixed inset-0 z-[60] bg-slate-900 flex flex-col p-8 transition-transform translate-x-full duration-500 overflow-y-auto">
|
||||
|
||||
📐 translate-x-full의 의미
|
||||
Tailwind CSS 클래스:
|
||||
csstranslate-x-full {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
```
|
||||
|
||||
**의미**: 화면 밖 오른쪽으로 완전히 이동 (숨김 상태)
|
||||
|
||||
### 시각적 설명:
|
||||
```
|
||||
[화면] [메뉴]
|
||||
┌─────┐ ┌─────┐
|
||||
│ │ │메뉴 │ ← 100% 오른쪽으로 이동
|
||||
│ │ │숨김 │ (보이지 않음)
|
||||
└─────┘ └─────┘
|
||||
|
||||
❌ 현재 문제점
|
||||
1. 항상 숨겨진 상태
|
||||
htmltranslate-x-full ← 이 클래스가 계속 있으면 메뉴가 계속 숨겨짐
|
||||
2. JavaScript가 이 클래스를 제어하지 않음
|
||||
script.js 현재 코드:
|
||||
javascriptmenuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('open'); // ❌ 'open' 클래스만 토글
|
||||
menuBtn.classList.toggle('open'); // ❌ 의미 없음
|
||||
});
|
||||
```
|
||||
|
||||
**문제**: `open` 클래스가 CSS에 정의되어 있지 않음!
|
||||
|
||||
---
|
||||
|
||||
## ✅ 올바른 동작 방식
|
||||
|
||||
### 작동 원리:
|
||||
```
|
||||
닫힌 상태: translate-x-full (오른쪽 밖에 숨김)
|
||||
↓ (버튼 클릭)
|
||||
열린 상태: translate-x-full 제거 (화면에 표시)
|
||||
필요한 JavaScript:
|
||||
javascriptmenuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('translate-x-full');
|
||||
// ↑
|
||||
// 이 클래스를 추가/제거해야 함!
|
||||
});
|
||||
|
||||
🎯 정확한 수정 방법
|
||||
script.js 74-79 라인을 이렇게 수정해야 합니다:
|
||||
javascript// ❌ 현재 (작동 안 함)
|
||||
const menuBtn = document.querySelector('.menu-btn');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
if (menuBtn && navMenu) {
|
||||
menuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.toggle('open'); // ❌ 의미 없음
|
||||
menuBtn.classList.toggle('open'); // ❌ 의미 없음
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ 수정 (올바른 방법)
|
||||
const menuBtn = document.querySelector('#mobile-menu-btn');
|
||||
const navMenu = document.querySelector('#mobile-menu');
|
||||
const closeBtn = document.querySelector('#close-menu-btn');
|
||||
|
||||
if (menuBtn && navMenu) {
|
||||
// 메뉴 열기
|
||||
menuBtn.addEventListener('click', () => {
|
||||
navMenu.classList.remove('translate-x-full'); // ← 이게 핵심!
|
||||
});
|
||||
|
||||
// 메뉴 닫기
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', () => {
|
||||
navMenu.classList.add('translate-x-full'); // ← 다시 숨김
|
||||
});
|
||||
}
|
||||
|
||||
// 메뉴 링크 클릭 시 닫기
|
||||
navMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navMenu.classList.add('translate-x-full');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
🎬 애니메이션 동작 순서
|
||||
1. 초기 상태 (페이지 로드):
|
||||
html<div id="mobile-menu" class="... translate-x-full ...">
|
||||
↑
|
||||
메뉴가 오른쪽 밖에 숨겨짐
|
||||
2. 햄버거 버튼 클릭:
|
||||
javascriptnavMenu.classList.remove('translate-x-full');
|
||||
```
|
||||
```
|
||||
화면 밖 → 화면 안으로 슬라이드 (0.5초 duration-500)
|
||||
3. X 버튼 클릭 또는 링크 클릭:
|
||||
javascriptnavMenu.classList.add('translate-x-full');
|
||||
```
|
||||
```
|
||||
화면 안 → 화면 밖으로 슬라이드
|
||||
|
||||
📊 클래스 상태 변화
|
||||
상태translate-x-full위치보임닫힘✅ 있음화면 오른쪽 밖 (+100%)❌ 안 보임열림❌ 없음화면 안 (0%)✅ 보임
|
||||
|
||||
🎨 CSS 트랜지션
|
||||
htmltransition-transform duration-500
|
||||
↑ ↑
|
||||
변환 애니메이션 0.5초 동안
|
||||
이 두 클래스 덕분에 부드럽게 슬라이드됩니다!
|
||||
|
||||
🔑 핵심 정리
|
||||
|
||||
translate-x-full: 메뉴를 오른쪽 밖으로 숨김
|
||||
remove('translate-x-full'): 메뉴를 화면에 표시
|
||||
add('translate-x-full'): 메뉴를 다시 숨김
|
||||
transition-transform duration-500: 부드러운 애니메이션
|
||||
|
||||
현재 문제: JavaScript가 translate-x-full을 제어하지 않아서 메뉴가 계속 숨겨진 상태입니다!
|
||||
655
.Backup/html /index.html
Normal file
655
.Backup/html /index.html
Normal file
@@ -0,0 +1,655 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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 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>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
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"}
|
||||
Reference in New Issue
Block a user