ocr / deployment.html
jamesLeeeeeee's picture
뭐야 이게? 구도는 다 망가지고 드래그앤드랍도안되고.
16b3bc4 verified
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업 배포 관리 - OCR 정밀 교정 공방</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'primary': {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
}
}
}
}
</script>
</head>
<body class="bg-gradient-to-br from-primary-50 to-primary-100 min-h-screen">
<custom-header></custom-header>
<main class="container mx-auto px-4 py-8">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-primary-900 mb-2">작업 배포 관리 📋</h1>
<p class="text-lg text-primary-700 max-w-2xl mx-auto">
작업자 선택과 문서 배포를 칸반 스타일로 관리합니다. 드래그 앤 드롭으로 간편하게 배포하세요.
</p>
</div>
<!-- 작업자 선택 및 배포 설정 -->
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-primary-200 mb-8">
<div class="flex items-center mb-4">
<div class="w-10 h-10 bg-primary-500 rounded-full flex items-center justify-center mr-3">
<i data-feather="users" class="text-white"></i>
</div>
<h2 class="text-2xl font-semibold text-primary-900">작업자 선택</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div>
<label class="block text-sm text-primary-600 mb-2">작업자 유형</label>
<select id="workerType" class="w-full border border-primary-300 rounded-lg px-3 py-2">
<option value="all">전체 작업자</option>
<option value="group">특정 작업자 그룹</option>
<option value="individual">개별 작업자</option>
</select>
</div>
<div>
<label class="block text-sm text-primary-600 mb-2">우선순위</label>
<select id="priority" class="w-full border border-primary-300 rounded-lg px-3 py-2">
<option value="high">높음</option>
<option value="normal">보통</option>
<option value="low">낮음</option>
</select>
</div>
<div>
<label class="block text-sm text-primary-600 mb-2">마감일 설정</label>
<input type="date" id="deadline" class="w-full border border-primary-300 rounded-lg px-3 py-2">
</div>
</div>
<button id="deployBtn" class="w-full bg-primary-500 hover:bg-primary-600 text-white px-4 py-3 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
배포 시작하기
</button>
</div>
<!-- 칸반 보드 -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<!-- 대기 문서 -->
<div class="bg-gray-50 rounded-xl p-4">
<h3 class="font-semibold text-gray-800 mb-4 text-center">대기 문서 📥</h3>
<div id="waitingColumn" class="space-y-4 min-h-96">
<!-- 동적으로 생성될 문서 카드들 -->
</div>
</div>
<!-- 배포 중 -->
<div class="bg-blue-50 rounded-xl p-4">
<h3 class="font-semibold text-blue-800 mb-4 text-center">배포 중 🚀</h3>
<div id="deployingColumn" class="space-y-4 min-h-96">
<!-- 동적으로 생성될 문서 카드들 -->
</div>
</div>
<!-- 진행 중 -->
<div class="bg-yellow-50 rounded-xl p-4">
<h3 class="font-semibold text-yellow-800 mb-4 text-center">진행 중 ⚡</h3>
<div id="progressColumn" class="space-y-4 min-h-96">
<!-- 동적으로 생성될 문서 카드들 -->
</div>
</div>
<!-- 완료 -->
<div class="bg-green-50 rounded-xl p-4">
<h3 class="font-semibold text-green-800 mb-4 text-center">완료 ✅</h3>
<div id="completedColumn" class="space-y-4 min-h-96">
<!-- 동적으로 생성될 문서 카드들 -->
</div>
</div>
</div>
<!-- 작업자 선택 모달 -->
<div id="workerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
<h3 class="text-lg font-semibold mb-4">작업자 선택</h3>
<div id="workerList" class="worker-list max-h-64 overflow-y-auto">
<!-- 동적으로 생성될 작업자 목록 -->
</div>
<button class="w-full bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 mt-4" onclick="hideWorkerModal()">
닫기
</button>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/header.js"></script>
<script src="components/footer.js"></script>
<script src="deployment.js"></script>
<script>feather.replace();</script>
</body>
</html>