333 lines
9.8 KiB
HTML
333 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>기술문서 - 테크니컬코리아</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #f8f9fa;
|
|
min-height: 100vh;
|
|
color: #333;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border: 2px solid #dc2626;
|
|
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.1);
|
|
min-height: calc(100vh - 40px);
|
|
}
|
|
|
|
/* 브레드크럼 */
|
|
.breadcrumb {
|
|
background: #f8f9fa;
|
|
padding: 15px 30px;
|
|
border-bottom: 1px solid #dc2626;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: #dc2626;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.breadcrumb span {
|
|
color: #6b7280;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
/* 헤더 */
|
|
.page-header {
|
|
text-align: center;
|
|
padding: 40px 30px;
|
|
border-bottom: 1px solid #dc2626;
|
|
}
|
|
|
|
.page-header h2 {
|
|
color: #dc2626;
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.page-header p {
|
|
color: #6b7280;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* 메인 컨텐츠 */
|
|
.main-content {
|
|
padding: 30px;
|
|
}
|
|
|
|
/* 문서 목록 */
|
|
.document-list {
|
|
display: grid;
|
|
gap: 15px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.document-item {
|
|
background: white;
|
|
border: 1px solid #dc2626;
|
|
padding: 25px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.document-item:hover {
|
|
border-color: #991b1b;
|
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.document-content h3 {
|
|
color: #111827;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
margin: 0 0 8px 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.document-content p {
|
|
color: #6b7280;
|
|
font-size: 0.9rem;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.document-content {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 검색 섹션 */
|
|
.search-section {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dc2626;
|
|
padding: 25px;
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.search-section h3 {
|
|
color: #111827;
|
|
font-size: 1.2rem;
|
|
margin-bottom: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
gap: 10px;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.search-box input {
|
|
flex: 1;
|
|
padding: 12px 15px;
|
|
background: white;
|
|
border: 1px solid #dc2626;
|
|
color: #111827;
|
|
font-size: 0.9rem;
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-box input::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.search-box input:focus {
|
|
border-color: #991b1b;
|
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
|
}
|
|
|
|
.search-box button {
|
|
background: white;
|
|
color: #dc2626;
|
|
border: 1px solid #dc2626;
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.search-box button:hover {
|
|
background: #dc2626;
|
|
color: white;
|
|
}
|
|
|
|
/* 푸터 */
|
|
.footer {
|
|
text-align: center;
|
|
padding: 30px;
|
|
border-top: 1px solid #dc2626;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.footer p {
|
|
color: #6b7280;
|
|
font-size: 0.8rem;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
margin: 10px;
|
|
}
|
|
|
|
.page-header {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.search-box {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 브레드크럼 네비게이션 -->
|
|
<nav class="breadcrumb">
|
|
<a href="index.html">홈</a>
|
|
<span>></span>
|
|
<strong>기술문서</strong>
|
|
</nav>
|
|
|
|
<!-- 페이지 헤더 -->
|
|
<header class="page-header">
|
|
<h2>기술문서</h2>
|
|
<p>Technical Documents - 기술 표준 및 가이드라인</p>
|
|
</header>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<main class="main-content">
|
|
<div class="document-list">
|
|
<!-- 설계표준 -->
|
|
<div class="document-item" onclick="location.href='technical/TD-001.html'">
|
|
<div class="document-content">
|
|
<h3>TD-001 배관설계 표준</h3>
|
|
<p>배관 설계 기준 및 표준 사양서</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 용접절차서 -->
|
|
<div class="document-item" onclick="location.href='technical/TD-002.html'">
|
|
<div class="document-content">
|
|
<h3>TD-002 용접절차서 (WPS)</h3>
|
|
<p>배관 용접 절차 및 품질 기준</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 재료사양서 -->
|
|
<div class="document-item" onclick="location.href='technical/TD-003.html'">
|
|
<div class="document-content">
|
|
<h3>TD-003 재료사양서</h3>
|
|
<p>배관재료 규격 및 선정 기준</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CAD 표준 -->
|
|
<div class="document-item" onclick="location.href='technical/TD-004.html'">
|
|
<div class="document-content">
|
|
<h3>TD-004 CAD 도면 표준</h3>
|
|
<p>도면 작성 기준 및 CAD 표준</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 검사기준서 -->
|
|
<div class="document-item" onclick="location.href='technical/TD-005.html'">
|
|
<div class="document-content">
|
|
<h3>TD-005 배관 검사기준서</h3>
|
|
<p>배관 제작 및 설치 검사 기준</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 압력시험절차 -->
|
|
<div class="document-item" onclick="location.href='technical/TD-006.html'">
|
|
<div class="document-content">
|
|
<h3>TD-006 압력시험 절차서</h3>
|
|
<p>배관계통 압력시험 절차 및 기준</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOM 시스템 매뉴얼 -->
|
|
<div class="document-item" onclick="location.href='technical/TD-007.html'">
|
|
<div class="document-content">
|
|
<h3>TD-007 BOM 시스템 사용자 매뉴얼</h3>
|
|
<p>자재관리 시스템 사용 가이드</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 검색 섹션 -->
|
|
<div class="search-section">
|
|
<h3>기술문서 검색</h3>
|
|
<div class="search-box">
|
|
<input type="text" id="techSearchInput" placeholder="기술문서 검색 (예: 설계, 용접, CAD)">
|
|
<button onclick="filterDocuments(document.getElementById('techSearchInput').value)">검색</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>테크니컬코리아 내부 전용 문서시스템</p>
|
|
<p>기술 문의: tech@technicalkorea.co.kr | 내선: 4567</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// 문서 필터링 기능
|
|
function filterDocuments(searchTerm) {
|
|
const documents = document.querySelectorAll('.document-item');
|
|
const term = searchTerm.toLowerCase();
|
|
|
|
documents.forEach(doc => {
|
|
const title = doc.querySelector('h3').textContent.toLowerCase();
|
|
const description = doc.querySelector('p').textContent.toLowerCase();
|
|
|
|
if (title.includes(term) || description.includes(term)) {
|
|
doc.style.display = 'block';
|
|
} else {
|
|
doc.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Enter 키로 검색
|
|
document.getElementById('techSearchInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
filterDocuments(this.value);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |