add icon(128*128)

This commit is contained in:
backuppc
2025-07-09 08:44:34 +09:00
parent 447cb691d7
commit 18b2a20806
7 changed files with 456 additions and 103 deletions

View File

@@ -63,6 +63,29 @@
<h3 id="modalTitle" class="text-lg font-semibold text-gray-800">서버 추가</h3>
</div>
<form id="serverForm" class="p-6">
<!-- 아이콘 업로드 섹션 -->
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">서버 아이콘</label>
<div class="flex items-center space-x-4">
<div class="w-16 h-16 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center bg-gray-50">
<img id="iconPreview" src="" alt="" class="w-12 h-12 object-contain hidden">
<svg id="iconPlaceholder" class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<div class="flex-1">
<input type="file" id="iconFile" accept="image/*" class="hidden">
<button type="button" id="selectIconBtn" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
아이콘 선택
</button>
<button type="button" id="removeIconBtn" class="w-full mt-1 px-3 py-1 text-xs text-red-600 hover:text-red-800 focus:outline-none hidden">
아이콘 제거
</button>
</div>
</div>
<p class="text-xs text-gray-500 mt-1">PNG, JPG, GIF 형식 지원 (최대 1MB, 128x128 자동 리사이즈)</p>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label for="serverIp" class="block text-sm font-medium text-gray-700 mb-2">IP 주소</label>
@@ -167,6 +190,15 @@
<div class="flex items-center justify-between">
<div class="flex-1 cursor-pointer" onclick="app.connectToServer('{{userName}}', '{{serverIP}}')">
<div class="flex items-center space-x-3">
<!-- 서버 아이콘 -->
<div class="w-8 h-8 flex-shrink-0">
<img id="icon-{{userName}}-{{serverIP}}" src="{{iconUrl}}" alt="" class="w-8 h-8 object-contain rounded" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
<div class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center" style="display: none;">
<svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9"></path>
</svg>
</div>
</div>
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
<h4 class="text-lg font-medium text-gray-900 hover:text-blue-600 transition duration-200">{{serverName}}</h4>
<span class="text-xs text-gray-400 opacity-0 group-hover:opacity-100 transition duration-200">클릭하여 연결</span>