trevor/sst_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fix/node-compatibility
sst_site/.history/views/admin-bundle-comparison_20251026211849.ejs
Andrey K. Choi 9974811a3e AdminLTE3
2025-10-26 22:14:47 +09:00

256 lines
14 KiB
Plaintext
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Bundle Comparison - SmartSolTech</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}
</style>
</head>
<body class="bg-gray-50">
<div class="min-h-screen py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="text-center mb-12">
<h1 class="text-4xl font-bold text-gray-900 mb-4">
SmartSolTech Admin Bundle 비교
</h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">
우리 웹사이트에 가장 적합한 관리자 패널을 선택해보세요. 각 솔루션의 기능과 디자인을 비교해보실 수 있습니다.
</p>
</div>
<!-- Admin Bundle Comparison -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
<!-- AdminLTE Card -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-6 bg-gradient-to-r from-blue-500 to-purple-600 text-white">
<h2 class="text-2xl font-bold mb-2">AdminLTE 3</h2>
<p class="text-blue-100">무료 오픈소스 관리자 템플릿</p>
</div>
<div class="p-6">
<div class="space-y-4 mb-6">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span>완전 무료 오픈소스</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span>한국어 지원 우수</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span>풍부한 컴포넌트</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span>jQuery 기반 (안정성)</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span>대규모 커뮤니티</span>
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-500 mr-3"></i>
<span>Bootstrap 4/5 호환</span>
</div>
</div>
<div class="mb-6">
<h4 class="font-semibold mb-3">주요 기능:</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 반응형 대시보드</li>
<li>• 다양한 차트와 위젯</li>
<li>• 카드형 레이아웃</li>
<li>• 사이드바 접기/펼치기</li>
<li>• 어두운/밝은 테마</li>
</ul>
</div>
<div class="flex space-x-3">
<a href="/demo/demo-adminlte" target="_blank"
class="flex-1 bg-blue-600 text-white text-center py-3 rounded-lg hover:bg-blue-700 transition-colors">
<i class="fas fa-eye mr-2"></i>
데모 보기
</a>
<a href="https://adminlte.io/" target="_blank"
class="flex-1 bg-gray-200 text-gray-700 text-center py-3 rounded-lg hover:bg-gray-300 transition-colors">
<i class="fas fa-external-link-alt mr-2"></i>
공식 사이트
</a>
</div>
</div>
</div>
<!-- Tabler Card -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-6 bg-gradient-to-r from-purple-500 to-pink-600 text-white">
<h2 class="text-2xl font-bold mb-2">Tabler</h2>
<p class="text-purple-100">모던 관리자 대시보드 템플릿</p>
</div>
<div class="p-6">
<div class="space-y-4 mb-6">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span>모던한 디자인</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span>빠른 성능</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle text-green-500 mr-3"></i>
<span>SVG 아이콘 시스템</span>
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-500 mr-3"></i>
<span>Bootstrap 5 기반</span>
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-500 mr-3"></i>
<span>TypeScript 지원</span>
</div>
<div class="flex items-center">
<i class="fas fa-star text-yellow-500 mr-3"></i>
<span>최신 웹 표준</span>
</div>
</div>
<div class="mb-6">
<h4 class="font-semibold mb-3">주요 기능:</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 깔끔한 미니멀 디자인</li>
<li>• 3000+ 무료 SVG 아이콘</li>
<li>• 드롭다운 메뉴</li>
<li>• 모바일 최적화</li>
<li>• 빠른 로딩 속도</li>
</ul>
</div>
<div class="flex space-x-3">
<a href="/demo/demo-tabler" target="_blank"
class="flex-1 bg-purple-600 text-white text-center py-3 rounded-lg hover:bg-purple-700 transition-colors">
<i class="fas fa-eye mr-2"></i>
데모 보기
</a>
<a href="https://tabler.io/" target="_blank"
class="flex-1 bg-gray-200 text-gray-700 text-center py-3 rounded-lg hover:bg-gray-300 transition-colors">
<i class="fas fa-external-link-alt mr-2"></i>
공식 사이트
</a>
</div>
</div>
</div>
</div>
<!-- Comparison Table -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12">
<div class="p-6 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
<h3 class="text-xl font-bold">상세 비교표</h3>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">기능</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AdminLTE</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tabler</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">가격</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">완전 무료</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">무료 + Pro 버전</td>
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">한국어 지원</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">우수</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">보통</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">디자인</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">클래식</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-purple-600">모던</td>
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">컴포넌트 수</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">매우 많음</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">적당함</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">성능</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">양호</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">우수</td>
</tr>
<tr class="bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">커뮤니티</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">대규모</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600">성장중</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">학습 곡선</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">쉬움</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">보통</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Recommendation -->
<div class="bg-gradient-to-r from-green-400 to-blue-500 rounded-xl p-8 text-white">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4">
<i class="fas fa-thumbs-up mr-2"></i>
추천 결과
</h3>
<p class="text-lg mb-6">
SmartSolTech 웹사이트의 특성을 고려한 맞춤 추천
</p>
<div class="bg-white bg-opacity-20 rounded-lg p-6 max-w-2xl mx-auto">
<h4 class="text-xl font-semibold mb-3">
🏆 AdminLTE 3 추천
</h4>
<p class="text-left">
<strong>추천 이유:</strong><br>
• 한국 고객을 위한 완벽한 한국어 지원<br>
• 무료로 모든 기능 사용 가능<br>
• 기존 시스템과의 호환성 우수<br>
• 풍부한 문서화와 커뮤니티 지원<br>
• 기업용 웹사이트에 적합한 안정적인 디자인
</p>
</div>
</div>
</div>
<!-- Back to Main Site -->
<div class="text-center mt-12">
<a href="/" class="inline-flex items-center px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition-colors">
<i class="fas fa-arrow-left mr-2"></i>
메인 사이트로 돌아가기
</a>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink