Kim.KANGHEE/iDRAC_Info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update 2026-01-20 20:47:44

Browse Source
This commit is contained in:
unknown
2026-01-20 20:47:45 +09:00
parent 9d5d2b8d99
commit c9db82d33e
193 changed files with 33876 additions and 5798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
backend/static/css/index.css
View File

@@ -1,120 +0,0 @@
/* ===== 공통 파일 카드 컴팩트 스타일 ===== */
.file-card-compact {
transition: all 0.2s ease;
background: #fff;
min-width: 120px;
max-width: 200px;
}
.file-card-compact:hover {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.file-card-compact a {
font-size: 0.9rem;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
/* ===== 목록별 버튼 분리 규칙 ===== */
/* 처리된 파일 목록 전용 컨테이너(보기/삭제 2열) */
.processed-list .file-card-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
}
/* 보기(처리된) */
.processed-list .btn-view-processed {
border-color: #3b82f6;
color: #1d4ed8;
padding: .425rem .6rem;
font-size: .8125rem;
font-weight: 600;
}
.processed-list .btn-view-processed:hover {
background: rgba(59, 130, 246, .08);
}
/* 삭제(처리된) — 더 작게 */
.processed-list .btn-delete-processed {
border-color: #ef4444;
color: #b91c1c;
padding: .3rem .5rem;
font-size: .75rem;
font-weight: 600;
}
.processed-list .btn-delete-processed:hover {
background: rgba(239, 68, 68, .08);
}
/* 백업 파일 목록 전용 컨테이너(단일 버튼) */
.backup-list .file-card-single-button {
display: flex;
margin-top: .25rem;
}
/* 보기(백업) — 강조 색상 */
.backup-list .btn-view-backup {
width: 100%;
border-color: #10b981;
color: #047857;
padding: .45rem .75rem;
font-size: .8125rem;
font-weight: 700;
}
.backup-list .btn-view-backup:hover {
background: rgba(16, 185, 129, .08);
}
/* ===== 백업 파일 날짜 헤더 ===== */
.list-group-item .bg-light {
transition: background-color 0.2s ease;
}
.list-group-item:hover .bg-light {
background-color: #e9ecef !important;
}
/* ===== 진행바 애니메이션 ===== */
.progress {
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
transition: width 0.6s ease;
}
/* ===== 반응형 텍스트 ===== */
@media (max-width: 768px) {
.card-body {
padding: 1.5rem !important;
}
}
/* ===== 스크롤바 스타일링(모달) ===== */
.modal-body pre::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.modal-body pre::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.modal-body pre::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.modal-body pre::-webkit-scrollbar-thumb:hover {
background: #555;
}

705
backend/static/js/dashboard.js Normal file
View File

@@ -0,0 +1,705 @@
/**
* dashboard.js
* 통합된 대시보드 관리 스크립트
* (script.js + index.js + index_custom.js 통합)
*/
document.addEventListener('DOMContentLoaded', () => {
// ─────────────────────────────────────────────────────────────
// 1. 공통 유틸리티 & 설정
// ─────────────────────────────────────────────────────────────
const csrfToken = document.querySelector('input[name="csrf_token"]')?.value || '';
// 진행바 업데이트 (전역 함수로 등록하여 다른 곳에서 호출 가능)
window.updateProgress = function (val) {
const bar = document.getElementById('progressBar');
if (!bar) return;
const v = Math.max(0, Math.min(100, Number(val) || 0));
// 부모 컨테이너가 숨겨져 있다면 표시
const progressContainer = bar.closest('.progress');
if (progressContainer && progressContainer.parentElement.classList.contains('d-none')) {
progressContainer.parentElement.classList.remove('d-none');
}
bar.style.width = v + '%';
bar.setAttribute('aria-valuenow', v);
bar.innerHTML = `<span class="fw-semibold small">${v}%</span>`;
// 100% 도달 시 애니메이션 효과 제어 등은 필요 시 추가
};
// 줄 수 카운터 (script.js에서 가져옴)
function updateLineCount(textareaId, badgeId) {
const textarea = document.getElementById(textareaId);
const badge = document.getElementById(badgeId);
if (!textarea || !badge) return;
const updateCount = () => {
const text = textarea.value.trim();
if (text === '') {
badge.textContent = '0';
return;
}
// 빈 줄 제외하고 카운트
const lines = text.split('\n').filter(line => line.trim().length > 0);
badge.textContent = lines.length; // UI 간소화를 위해 '줄' 텍스트 제외하거나 포함 가능
};
updateCount();
['input', 'change', 'keyup', 'paste'].forEach(evt => {
textarea.addEventListener(evt, () => setTimeout(updateCount, 10));
});
}
// 초기화
updateLineCount('ips', 'ipLineCount');
updateLineCount('server_list_content', 'serverLineCount');
// 알림 자동 닫기
setTimeout(() => {
document.querySelectorAll('.alert').forEach(alert => {
const bsAlert = new bootstrap.Alert(alert);
bsAlert.close();
});
}, 5000);
// ─────────────────────────────────────────────────────────────
// 2. IP 처리 및 스캔 로직
// ─────────────────────────────────────────────────────────────
// 2-1. 스크립트 선택 시 XML 드롭다운 토글
const TARGET_SCRIPT = "02-set_config.py";
const scriptSelect = document.getElementById('script');
const xmlGroup = document.getElementById('xmlFileGroup');
function toggleXml() {
if (!scriptSelect || !xmlGroup) return;
if (scriptSelect.value === TARGET_SCRIPT) {
xmlGroup.style.display = 'block';
xmlGroup.classList.add('fade-in');
} else {
xmlGroup.style.display = 'none';
}
}
if (scriptSelect) {
// TomSelect 적용 전/후 모두 대응하기 위해 이벤트 리스너 등록
toggleXml();
scriptSelect.addEventListener('change', toggleXml);
// TomSelect 초기화
new TomSelect("#script", {
create: false,
sortField: { field: "text", direction: "asc" },
placeholder: "스크립트를 검색하거나 선택하세요...",
plugins: ['clear_button'],
allowEmptyOption: true,
onChange: toggleXml // TomSelect 변경 시에도 호출
});
}
// 2-2. IP 입력 데이터 보존 (Local Storage)
const ipTextarea = document.getElementById('ips');
const STORAGE_KEY_IP = 'ip_input_draft';
if (ipTextarea) {
const savedIps = localStorage.getItem(STORAGE_KEY_IP);
if (savedIps) {
ipTextarea.value = savedIps;
// 강제 이벤트 트리거하여 줄 수 카운트 업데이트
ipTextarea.dispatchEvent(new Event('input'));
}
ipTextarea.addEventListener('input', () => {
localStorage.setItem(STORAGE_KEY_IP, ipTextarea.value);
});
}
// 2-3. IP 스캔 (Modal / AJAX)
const btnScan = document.getElementById('btnStartScan');
if (btnScan) {
btnScan.addEventListener('click', async () => {
const startIp = '10.10.0.2';
const endIp = '10.10.0.255';
const ipsTextarea = document.getElementById('ips');
const progressBar = document.getElementById('progressBar');
// UI 잠금 및 로딩 표시
const originalIcon = btnScan.innerHTML;
btnScan.disabled = true;
btnScan.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
if (progressBar) {
// 진행바 표시 및 초기화
const progressContainer = progressBar.closest('.progress');
if (progressContainer && progressContainer.parentElement) {
// 이미 존재하는 row 등을 찾아서 보여주기 (필요시)
}
window.updateProgress(100); // 스캔 중임을 알리기 위해 꽉 채움 (애니메이션)
progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
progressBar.textContent = 'IP 스캔 중...';
}
try {
const res = await fetch('/utils/scan_network', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
body: JSON.stringify({ start_ip: startIp, end_ip: endIp })
});
if (res.redirected) {
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
window.location.reload();
return;
}
const contentType = res.headers.get("content-type");
if (!contentType || !contentType.includes("application/json")) {
const text = await res.text();
throw new Error(`서버 응답 오류: ${text.substring(0, 100)}...`);
}
const data = await res.json();
if (data.success) {
if (data.active_ips && data.active_ips.length > 0) {
ipsTextarea.value = data.active_ips.join('\n');
ipsTextarea.dispatchEvent(new Event('input')); // 저장 및 카운트 갱신
alert(`스캔 완료: ${data.active_ips.length}개의 활성 IP를 찾았습니다.`);
} else {
alert('활성 IP를 발견하지 못했습니다.');
}
} else {
throw new Error(data.error || 'Unknown error');
}
} catch (err) {
console.error(err);
alert('오류가 발생했습니다: ' + (err.message || err));
} finally {
// 복구
btnScan.disabled = false;
btnScan.innerHTML = originalIcon;
if (progressBar) {
window.updateProgress(0);
progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
}
}
});
}
// 2-4. IP 지우기 버튼
const btnClear = document.getElementById('btnClearIps');
if (btnClear) {
btnClear.addEventListener('click', () => {
const ipsTextarea = document.getElementById('ips');
if (ipsTextarea && confirm('입력된 IP 목록을 모두 지우시겠습니까?')) {
ipsTextarea.value = '';
ipsTextarea.dispatchEvent(new Event('input'));
}
});
}
// 2-5. 메인 IP 폼 제출 및 진행률 폴링 (script.js 로직)
const ipForm = document.getElementById("ipForm");
if (ipForm) {
ipForm.addEventListener("submit", async (ev) => {
ev.preventDefault();
const formData = new FormData(ipForm);
const btn = ipForm.querySelector('button[type="submit"]');
const originalHtml = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>처리 중...';
// 진행바 초기화
window.updateProgress(0);
try {
const res = await fetch(ipForm.action, {
method: "POST",
body: formData
});
if (!res.ok) throw new Error("HTTP " + res.status);
const data = await res.json();
if (data.job_id) {
// 비동기 작업 시작됨 -> 폴링 시작
pollProgress(data.job_id);
} else {
// 동기 처리 완료
window.updateProgress(100);
setTimeout(() => location.reload(), 1000);
}
} catch (err) {
console.error("처리 중 오류:", err);
alert("처리 중 오류 발생: " + err.message);
btn.disabled = false;
btn.innerHTML = originalHtml;
}
});
}
// 폴링 함수
function pollProgress(jobId) {
const interval = setInterval(async () => {
try {
const res = await fetch(`/progress_status/${jobId}`);
if (!res.ok) {
clearInterval(interval);
return;
}
const data = await res.json();
if (data.progress !== undefined) {
window.updateProgress(data.progress);
}
if (data.progress >= 100) {
clearInterval(interval);
window.updateProgress(100);
setTimeout(() => location.reload(), 1500);
}
} catch (err) {
console.error('진행률 확인 중 오류:', err);
clearInterval(interval);
}
}, 500);
}
// ─────────────────────────────────────────────────────────────
// 3. 파일 관련 기능 (백업 이동, 파일 보기 등)
// ─────────────────────────────────────────────────────────────
// 3-1. 파일 보기 모달 (index.js)
const modalEl = document.getElementById('fileViewModal');
const titleEl = document.getElementById('fileViewModalLabel');
const contentEl = document.getElementById('fileViewContent');
if (modalEl) {
modalEl.addEventListener('show.bs.modal', async (ev) => {
const btn = ev.relatedTarget;
const folder = btn?.getAttribute('data-folder') || '';
const date = btn?.getAttribute('data-date') || '';
const filename = btn?.getAttribute('data-filename') || '';
titleEl.innerHTML = `<i class="bi bi-file-text me-2"></i>${filename || '파일'}`;
contentEl.textContent = '불러오는 중...';
const params = new URLSearchParams();
if (folder) params.set('folder', folder);
if (date) params.set('date', date);
if (filename) params.set('filename', filename);
try {
const res = await fetch(`/view_file?${params.toString()}`, { cache: 'no-store' });
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();
contentEl.textContent = data?.content ?? '(빈 파일)';
} catch (e) {
contentEl.textContent = '파일을 불러오지 못했습니다: ' + (e?.message || e);
}
});
}
// 3-2. 백업 파일 드래그 앤 드롭 이동 (index_custom.js)
let selectedItems = new Set();
const backupContainers = document.querySelectorAll('.backup-files-container');
// 다중 선택 처리
document.addEventListener('click', function (e) {
const item = e.target.closest('.backup-file-item');
if (item && !e.target.closest('a') && !e.target.closest('button')) {
if (e.ctrlKey || e.metaKey) {
toggleSelection(item);
} else {
const wasSelected = item.classList.contains('selected');
clearSelection();
if (!wasSelected) toggleSelection(item);
}
} else if (!e.target.closest('.backup-files-container')) {
// 배경 클릭 시 선택 해제? (UX에 따라 결정, 여기선 일단 패스)
}
});
// 빈 공간 클릭 시 선택 해제
document.addEventListener('mousedown', function (e) {
if (!e.target.closest('.backup-file-item') && !e.target.closest('.backup-files-container')) {
clearSelection();
}
});
function toggleSelection(item) {
if (item.classList.contains('selected')) {
item.classList.remove('selected');
selectedItems.delete(item);
} else {
item.classList.add('selected');
selectedItems.add(item);
}
}
function clearSelection() {
document.querySelectorAll('.backup-file-item.selected').forEach(el => el.classList.remove('selected'));
selectedItems.clear();
}
function updateFolderCount(folderDate) {
const container = document.querySelector(`.backup-files-container[data-folder="${folderDate}"]`);
if (container) {
const listItem = container.closest('.list-group-item');
if (listItem) {
const badge = listItem.querySelector('.badge');
if (badge) {
badge.textContent = `${container.children.length} 파일`;
}
}
}
}
// Sortable 초기화
backupContainers.forEach(container => {
if (typeof Sortable === 'undefined') return;
new Sortable(container, {
group: 'backup-files',
animation: 150,
ghostClass: 'sortable-ghost',
delay: 100,
delayOnTouchOnly: true,
onStart: function (evt) {
if (!evt.item.classList.contains('selected')) {
clearSelection();
toggleSelection(evt.item);
}
},
onEnd: function (evt) {
if (evt.to === evt.from) return;
const sourceFolder = evt.from.getAttribute('data-folder');
const targetFolder = evt.to.getAttribute('data-folder');
if (!sourceFolder || !targetFolder) {
alert('잘못된 이동 요청입니다.');
location.reload();
return;
}
let itemsToMove = Array.from(selectedItems);
if (itemsToMove.length === 0) itemsToMove = [evt.item];
else if (!itemsToMove.includes(evt.item)) itemsToMove.push(evt.item);
// UI 상 이동 처리 (Sortable이 하나는 처리해주지만 다중 선택은 직접 옮겨야 함)
itemsToMove.forEach(item => {
if (item !== evt.item) evt.to.appendChild(item);
});
// 서버 요청
if (!window.APP_CONFIG) {
console.error("Window APP_CONFIG not found!");
return;
}
const promises = itemsToMove.map(item => {
const filename = item.getAttribute('data-filename');
if (!filename) return Promise.resolve();
return fetch(window.APP_CONFIG.moveBackupUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': window.APP_CONFIG.csrfToken
},
body: JSON.stringify({
filename: filename,
source_folder: sourceFolder,
target_folder: targetFolder
})
})
.then(r => r.json())
.then(data => {
if (data.success) {
// 속성 업데이트 (다운로드 링크 등)
const btn = item.querySelector('.btn-view-backup');
if (btn) btn.setAttribute('data-date', targetFolder);
const link = item.querySelector('a[download]');
if (link && window.APP_CONFIG.downloadBaseUrl) {
const newHref = window.APP_CONFIG.downloadBaseUrl
.replace('PLACEHOLDER_DATE', targetFolder)
.replace('PLACEHOLDER_FILE', filename);
link.setAttribute('href', newHref);
}
}
return data;
});
});
Promise.all(promises).then(results => {
updateFolderCount(sourceFolder);
updateFolderCount(targetFolder);
clearSelection();
const failed = results.filter(r => r && !r.success);
if (failed.length > 0) {
alert(failed.length + '개의 파일 이동 실패. 새로고침이 필요합니다.');
location.reload();
}
}).catch(err => {
console.error(err);
alert('이동 중 통신 오류 발생');
});
}
});
});
// ─────────────────────────────────────────────────────────────
// 4. 슬롯 우선순위 설정 모달 (index_custom.js)
// ─────────────────────────────────────────────────────────────
const slotPriorityModal = document.getElementById('slotPriorityModal');
if (slotPriorityModal) {
const slotNumbersInput = document.getElementById('slotNumbersInput');
const slotCountDisplay = document.getElementById('slotCountDisplay');
const slotPreview = document.getElementById('slotPreview');
const slotPriorityInput = document.getElementById('slot_priority_input');
const modalServerListContent = document.getElementById('modal_server_list_content');
const serverListTextarea = document.getElementById('server_list_content');
const slotPriorityForm = document.getElementById('slotPriorityForm');
const btnClearSlots = document.getElementById('btnClearSlots');
const presetCountInput = document.getElementById('presetCountInput');
const btnApplyPreset = document.getElementById('btnApplyPreset');
const defaultPriority = ['38', '39', '37', '36', '32', '33', '34', '35', '31', '40'];
function loadSlots() {
const saved = localStorage.getItem('guidSlotNumbers');
slotNumbersInput.value = saved ? saved : defaultPriority.join(', ');
if (presetCountInput) presetCountInput.value = 10;
updateSlotPreview();
}
function saveSlots() {
localStorage.setItem('guidSlotNumbers', slotNumbersInput.value);
}
function parseSlots(input) {
if (!input || !input.trim()) return [];
return input.split(/[,\s\n]+/)
.map(s => s.trim())
.filter(s => s !== '' && /^\d+$/.test(s))
.filter((v, i, a) => a.indexOf(v) === i); // Unique
}
function updateSlotPreview() {
const slots = parseSlots(slotNumbersInput.value);
const count = slots.length;
slotCountDisplay.textContent = `${count}개`;
slotCountDisplay.className = count > 0
? 'badge bg-primary text-white border border-primary rounded-pill px-3 py-1'
: 'badge bg-white text-dark border rounded-pill px-3 py-1';
if (count === 0) {
slotPreview.style.display = 'flex';
slotPreview.innerHTML = `
<div class="d-flex flex-column align-items-center justify-content-center w-100 h-100 text-muted opacity-50">
<i class="bi bi-layers fs-1 mb-2"></i>
<span class="small">프리셋을 선택하거나 번호를 입력하세요.</span>
</div>`;
} else {
slotPreview.style.display = 'grid';
slotPreview.innerHTML = slots.map((slot, index) => `
<div class="slot-badge animate__animated animate__fadeIn" data-slot="${slot}" style="animation-delay: ${index * 0.02}s">
<span class="slot-index">${index + 1}</span>
<div>Slot ${slot}</div>
</div>
`).join('');
// 미리보기 Sortable
new Sortable(slotPreview, {
animation: 150,
ghostClass: 'sortable-ghost',
dragClass: 'sortable-drag',
onEnd: function () {
const items = slotPreview.querySelectorAll('.slot-badge');
const newSlots = Array.from(items).map(item => item.getAttribute('data-slot'));
slotNumbersInput.value = newSlots.join(', ');
items.forEach((item, index) => {
const idx = item.querySelector('.slot-index');
if (idx) idx.textContent = index + 1;
});
saveSlots();
}
});
}
saveSlots();
}
if (btnApplyPreset) {
btnApplyPreset.addEventListener('click', () => {
let count = parseInt(presetCountInput.value) || 10;
count = Math.max(1, Math.min(10, count));
presetCountInput.value = count;
slotNumbersInput.value = defaultPriority.slice(0, count).join(', ');
updateSlotPreview();
});
}
slotNumbersInput.addEventListener('input', updateSlotPreview);
btnClearSlots.addEventListener('click', () => {
if (confirm('모두 지우시겠습니까?')) {
slotNumbersInput.value = '';
updateSlotPreview();
}
});
slotPriorityModal.addEventListener('show.bs.modal', () => {
if (serverListTextarea) modalServerListContent.value = serverListTextarea.value;
loadSlots();
});
slotPriorityForm.addEventListener('submit', (e) => {
const slots = parseSlots(slotNumbersInput.value);
if (slots.length === 0) {
e.preventDefault();
alert('최소 1개 이상의 슬롯을 입력하세요.');
return;
}
slotPriorityInput.value = slots.join(',');
saveSlots();
});
}
// ─────────────────────────────────────────────────────────────
// 5. Quick Move (중복체크 포함) (index_custom.js)
// ─────────────────────────────────────────────────────────────
const quickMoveForms = ['macMoveForm', 'guidMoveForm', 'gpuMoveForm'];
let pendingAction = null;
const dupModalEl = document.getElementById('duplicateCheckModal');
const dupModal = dupModalEl ? new bootstrap.Modal(dupModalEl) : null;
const btnConfirmOverwrite = document.getElementById('btnConfirmOverwrite');
if (btnConfirmOverwrite) {
btnConfirmOverwrite.addEventListener('click', () => {
if (pendingAction) {
dupModal.hide();
pendingAction(true); // overwrite=true
pendingAction = null;
}
});
}
quickMoveForms.forEach(id => {
const form = document.getElementById(id);
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
const btn = form.querySelector('button[type="submit"]');
if (!btn || btn.disabled) return;
const originalContent = btn.innerHTML;
const executeMove = (overwrite = false) => {
btn.classList.add('disabled');
btn.disabled = true;
btn.innerHTML = '<div class="spinner-border spinner-border-sm text-primary" role="status"></div>';
fetch(form.action, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken // 전역 csrfToken 사용
},
body: JSON.stringify({ overwrite: overwrite })
})
.then(async response => {
const ct = response.headers.get("content-type");
if (!ct || !ct.includes("application/json")) {
// HTTP 200이지만 HTML이 올 경우 에러나 마찬가지 (로그인 리다이렉트 등)
if (response.ok && response.url.includes("login")) {
window.location.reload();
return;
}
// "MAC 이동 중 오류: HTTP 200" 등 텍스트일 수 있음
const txt = await response.text();
if (response.ok) {
// 성공으로 간주하고 리로드 (가끔 백엔드가 JSON 대신 빈 성공 응답을 줄 때)
window.location.reload();
return;
}
throw new Error(txt);
}
return response.json();
})
.then(data => {
if (!data) return; // 위에서 처리됨
if (data.requires_confirmation) {
showDuplicateModal(data.duplicates, data.duplicate_count);
pendingAction = executeMove;
resetButton();
} else if (data.success) {
window.location.reload();
} else {
alert(data.error || '작업 실패');
resetButton();
}
})
.catch(err => {
console.error(err);
// HTTP 200 에러 억제 요청 반영
if (err.message && err.message.includes("200")) {
window.location.reload();
return;
}
alert('오류 발생: ' + err);
resetButton();
});
};
const resetButton = () => {
btn.classList.remove('disabled');
btn.disabled = false;
btn.innerHTML = originalContent;
};
executeMove(false);
});
}
});
function showDuplicateModal(duplicates, count) {
const listEl = document.getElementById('dupList');
const countEl = document.getElementById('dupCount');
const moreEl = document.getElementById('dupMore');
const moreCountEl = document.getElementById('dupMoreCount');
if (countEl) countEl.textContent = count;
if (listEl) {
listEl.innerHTML = '';
const limit = 10;
duplicates.slice(0, limit).forEach(name => {
const li = document.createElement('li');
li.innerHTML = `<i class="bi bi-file-earmark text-secondary me-2"></i>${name}`;
listEl.appendChild(li);
});
if (duplicates.length > limit) {
if (moreEl) {
moreEl.style.display = 'block';
moreCountEl.textContent = duplicates.length - limit;
}
} else {
if (moreEl) moreEl.style.display = 'none';
}
}
if (dupModal) dupModal.show();
}
});

298
backend/static/js/index.js
View File

@@ -1,298 +0,0 @@
document.addEventListener('DOMContentLoaded', () => {
// ─────────────────────────────────────────────────────────────
// 스크립트 선택 시 XML 드롭다운 토글
// ─────────────────────────────────────────────────────────────
const TARGET_SCRIPT = "02-set_config.py";
const scriptSelect = document.getElementById('script');
const xmlGroup = document.getElementById('xmlFileGroup');
function toggleXml() {
if (!scriptSelect || !xmlGroup) return;
if (scriptSelect.value === TARGET_SCRIPT) {
xmlGroup.style.display = 'block';
xmlGroup.classList.add('fade-in');
} else {
xmlGroup.style.display = 'none';
}
}
if (scriptSelect) {
toggleXml();
scriptSelect.addEventListener('change', toggleXml);
}
// ─────────────────────────────────────────────────────────────
// 파일 보기 모달
// ─────────────────────────────────────────────────────────────
const modalEl = document.getElementById('fileViewModal');
const titleEl = document.getElementById('fileViewModalLabel');
const contentEl = document.getElementById('fileViewContent');
if (modalEl) {
modalEl.addEventListener('show.bs.modal', async (ev) => {
const btn = ev.relatedTarget;
const folder = btn?.getAttribute('data-folder') || '';
const date = btn?.getAttribute('data-date') || '';
const filename = btn?.getAttribute('data-filename') || '';
titleEl.innerHTML = `<i class="bi bi-file-text me-2"></i>${filename || '파일'}`;
contentEl.textContent = '불러오는 중...';
const params = new URLSearchParams();
if (folder) params.set('folder', folder);
if (date) params.set('date', date);
if (filename) params.set('filename', filename);
try {
const res = await fetch(`/view_file?${params.toString()}`, { cache: 'no-store' });
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();
contentEl.textContent = data?.content ?? '(빈 파일)';
} catch (e) {
contentEl.textContent = '파일을 불러오지 못했습니다: ' + (e?.message || e);
}
});
}
// ─────────────────────────────────────────────────────────────
// 진행바 업데이트
// ─────────────────────────────────────────────────────────────
window.updateProgress = function (val) {
const bar = document.getElementById('progressBar');
if (!bar) return;
const v = Math.max(0, Math.min(100, Number(val) || 0));
bar.style.width = v + '%';
bar.setAttribute('aria-valuenow', v);
bar.innerHTML = `<span class="fw-semibold">${v}%</span>`;
};
// ─────────────────────────────────────────────────────────────
// CSRF 토큰
// ─────────────────────────────────────────────────────────────
const csrfToken = document.querySelector('input[name="csrf_token"]')?.value || '';
// ─────────────────────────────────────────────────────────────
// IP 입력 데이터 보존 (Local Storage)
// ─────────────────────────────────────────────────────────────
const ipTextarea = document.getElementById('ips');
const ipForm = document.getElementById('ipForm');
const STORAGE_KEY_IP = 'ip_input_draft';
if (ipTextarea) {
// 1. 페이지 로드 시 저장된 값 복원
const savedIps = localStorage.getItem(STORAGE_KEY_IP);
if (savedIps) {
ipTextarea.value = savedIps;
// 라인 수 업데이트 트리거
if (window.updateIpCount) window.updateIpCount();
}
// 2. 입력 시마다 저장
ipTextarea.addEventListener('input', () => {
localStorage.setItem(STORAGE_KEY_IP, ipTextarea.value);
// script.js에 있는 updateIpCount 호출 (있다면)
if (window.updateIpCount) window.updateIpCount();
});
// 3. 폼 제출 성공 시 초기화?
// 사용자의 의도에 따라 다름: "변경이 되지 않는 이상 계속 가지고 있게"
// -> 제출 후에도 유지하는 것이 요청 사항에 부합함.
// 만약 '성공적으로 작업이 끝나면 지워달라'는 요청이 있으면 여기를 수정.
// 현재 요청: "페이지가 리셋이되도 변경이 되지 않는이상 계속 가지고있게" -> 유지.
}
// ─────────────────────────────────────────────────────────────
// 공통 POST 함수
// ─────────────────────────────────────────────────────────────
async function postFormAndHandle(url) {
const res = await fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {
'X-CSRFToken': csrfToken,
'Accept': 'application/json, text/html;q=0.9,*/*;q=0.8',
},
});
const ct = (res.headers.get('content-type') || '').toLowerCase();
if (ct.includes('application/json')) {
const data = await res.json();
if (data.success === false) {
throw new Error(data.error || ('HTTP ' + res.status));
}
return data;
}
return { success: true, html: true };
}
// ─────────────────────────────────────────────────────────────
// MAC 파일 이동
// ─────────────────────────────────────────────────────────────
const macForm = document.getElementById('macMoveForm');
if (macForm) {
macForm.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = macForm.querySelector('button');
const originalHtml = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>처리 중...';
try {
await postFormAndHandle(macForm.action);
location.reload();
} catch (err) {
alert('MAC 파일 이동 중 오류가 발생했습니다: ' + (err?.message || err));
btn.disabled = false;
btn.innerHTML = originalHtml;
}
});
}
// ─────────────────────────────────────────────────────────────
// GUID 파일 이동
// ─────────────────────────────────────────────────────────────
const guidForm = document.getElementById('guidMoveForm');
if (guidForm) {
guidForm.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = guidForm.querySelector('button');
const originalHtml = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>처리 중...';
try {
await postFormAndHandle(guidForm.action);
location.reload();
} catch (err) {
alert('GUID 파일 이동 중 오류가 발생했습니다: ' + (err?.message || err));
btn.disabled = false;
btn.innerHTML = originalHtml;
}
});
}
// ─────────────────────────────────────────────────────────────
// 알림 자동 닫기
// ─────────────────────────────────────────────────────────────
setTimeout(() => {
document.querySelectorAll('.alert').forEach(alert => {
const bsAlert = new bootstrap.Alert(alert);
bsAlert.close();
});
}, 5000);
// ─────────────────────────────────────────────────────────────
// IP 스캔 로직 (Modal)
// ─────────────────────────────────────────────────────────────
const btnScan = document.getElementById('btnStartScan');
if (btnScan) {
btnScan.addEventListener('click', async () => {
const startIp = '10.10.0.2';
const endIp = '10.10.0.255';
const ipsTextarea = document.getElementById('ips');
const progressBar = document.getElementById('progressBar');
// UI 상태 변경 (로딩 중)
const originalIcon = btnScan.innerHTML;
btnScan.disabled = true;
btnScan.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
// 메인 진행바 활용
if (progressBar) {
const progressContainer = progressBar.closest('.progress');
if (progressContainer) {
progressContainer.parentElement.classList.remove('d-none');
}
progressBar.style.width = '100%';
progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
progressBar.textContent = 'IP 스캔 중...';
}
try {
const res = await fetch('/utils/scan_network', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
},
body: JSON.stringify({ start_ip: startIp, end_ip: endIp })
});
// 1. 세션 만료로 인한 리다이렉트 감지
if (res.redirected) {
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
window.location.reload();
return;
}
// 2. JSON 응답인지 확인
const contentType = res.headers.get("content-type");
if (!contentType || !contentType.includes("application/json")) {
const text = await res.text();
if (text.includes("CSRF")) {
throw new Error("보안 토큰(CSRF)이 만료되었습니다. 페이지를 새로고침해주세요.");
}
throw new Error(`서버 응답 오류 (HTTP ${res.status}): ${text.substring(0, 100)}...`);
}
const data = await res.json();
if (data.success) {
if (data.active_ips && data.active_ips.length > 0) {
ipsTextarea.value = data.active_ips.join('\n');
// 이벤트 트리거
ipsTextarea.dispatchEvent(new Event('input'));
alert(`스캔 완료: ${data.active_ips.length}개의 활성 IP를 찾았습니다.`);
} else {
alert('활성 IP를 발견하지 못했습니다.');
}
} else {
throw new Error(data.error || 'Unknown error');
}
} catch (err) {
console.error(err);
alert('오류가 발생했습니다: ' + (err.message || err));
} finally {
// 상태 복구
btnScan.disabled = false;
btnScan.innerHTML = originalIcon;
if (progressBar) {
// 진행바 초기화
progressBar.style.width = '0%';
progressBar.textContent = '0%';
progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
}
}
});
}
// ─────────────────────────────────────────────────────────────
// IP 입력 지우기 버튼
// ─────────────────────────────────────────────────────────────
const btnClear = document.getElementById('btnClearIps');
if (btnClear) {
btnClear.addEventListener('click', () => {
const ipsTextarea = document.getElementById('ips');
if (ipsTextarea) {
ipsTextarea.value = '';
ipsTextarea.dispatchEvent(new Event('input')); // 로컬 스토리지 업데이트 및 카운트 갱신 트리거
}
});
}
});

264
backend/static/script.js
View File

@@ -1,264 +0,0 @@
// script.js - 정리된 버전
document.addEventListener('DOMContentLoaded', () => {
// ─────────────────────────────────────────────────────────────
// CSRF 토큰
// ─────────────────────────────────────────────────────────────
const csrfToken = document.querySelector('input[name="csrf_token"]')?.value || '';
// ─────────────────────────────────────────────────────────────
// 진행바 업데이트
// ─────────────────────────────────────────────────────────────
window.updateProgress = function(percent) {
const bar = document.getElementById('progressBar');
if (!bar) return;
const v = Math.max(0, Math.min(100, Number(percent) || 0));
bar.style.width = v + '%';
bar.setAttribute('aria-valuenow', v);
bar.innerHTML = `<span class="fw-semibold small">${v}%</span>`;
};
// ─────────────────────────────────────────────────────────────
// 줄 수 카운터
// ─────────────────────────────────────────────────────────────
function updateLineCount(textareaId, badgeId) {
const textarea = document.getElementById(textareaId);
const badge = document.getElementById(badgeId);
if (!textarea || !badge) return;
const updateCount = () => {
const text = textarea.value.trim();
if (text === '') {
badge.textContent = '0줄';
return;
}
const lines = text.split('\n').filter(line => line.trim().length > 0);
badge.textContent = `${lines.length}줄`;
};
updateCount();
textarea.addEventListener('input', updateCount);
textarea.addEventListener('change', updateCount);
textarea.addEventListener('keyup', updateCount);
textarea.addEventListener('paste', () => setTimeout(updateCount, 10));
}
updateLineCount('ips', 'ipLineCount');
updateLineCount('server_list_content', 'serverLineCount');
// ─────────────────────────────────────────────────────────────
// 스크립트 선택 시 XML 드롭다운 토글
// ─────────────────────────────────────────────────────────────
const TARGET_SCRIPT = "02-set_config.py";
const scriptSelect = document.getElementById('script');
const xmlGroup = document.getElementById('xmlFileGroup');
function toggleXml() {
if (!scriptSelect || !xmlGroup) return;
xmlGroup.style.display = (scriptSelect.value === TARGET_SCRIPT) ? 'block' : 'none';
}
if (scriptSelect) {
toggleXml();
scriptSelect.addEventListener('change', toggleXml);
}
// ─────────────────────────────────────────────────────────────
// 파일 보기 모달
// ─────────────────────────────────────────────────────────────
const modalEl = document.getElementById('fileViewModal');
const titleEl = document.getElementById('fileViewModalLabel');
const contentEl = document.getElementById('fileViewContent');
if (modalEl) {
modalEl.addEventListener('show.bs.modal', async (ev) => {
const btn = ev.relatedTarget;
const folder = btn?.getAttribute('data-folder') || '';
const date = btn?.getAttribute('data-date') || '';
const filename = btn?.getAttribute('data-filename') || '';
titleEl.innerHTML = `<i class="bi bi-file-text me-2"></i>${filename || '파일'}`;
contentEl.textContent = '불러오는 중...';
const params = new URLSearchParams();
if (folder) params.set('folder', folder);
if (date) params.set('date', date);
if (filename) params.set('filename', filename);
try {
const res = await fetch(`/view_file?${params.toString()}`, { cache: 'no-store' });
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();
contentEl.textContent = data?.content ?? '(빈 파일)';
} catch (e) {
contentEl.textContent = '파일을 불러오지 못했습니다: ' + (e?.message || e);
}
});
}
// ─────────────────────────────────────────────────────────────
// 공통 POST 함수
// ─────────────────────────────────────────────────────────────
async function postFormAndHandle(url) {
const res = await fetch(url, {
method: 'POST',
credentials: 'same-origin',
headers: {
'X-CSRFToken': csrfToken,
'Accept': 'application/json, text/html;q=0.9,*/*;q=0.8',
},
});
const ct = (res.headers.get('content-type') || '').toLowerCase();
if (ct.includes('application/json')) {
const data = await res.json();
if (data.success === false) {
throw new Error(data.error || ('HTTP ' + res.status));
}
return data;
}
return { success: true, html: true };
}
// ─────────────────────────────────────────────────────────────
// MAC 파일 이동
// ─────────────────────────────────────────────────────────────
const macForm = document.getElementById('macMoveForm');
if (macForm) {
macForm.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = macForm.querySelector('button');
const originalHtml = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>처리 중...';
try {
await postFormAndHandle(macForm.action);
location.reload();
} catch (err) {
alert('MAC 이동 중 오류: ' + (err?.message || err));
btn.disabled = false;
btn.innerHTML = originalHtml;
}
});
}
// ─────────────────────────────────────────────────────────────
// GUID 파일 이동
// ─────────────────────────────────────────────────────────────
const guidForm = document.getElementById('guidMoveForm');
if (guidForm) {
guidForm.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = guidForm.querySelector('button');
const originalHtml = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>처리 중...';
try {
await postFormAndHandle(guidForm.action);
location.reload();
} catch (err) {
alert('GUID 이동 중 오류: ' + (err?.message || err));
btn.disabled = false;
btn.innerHTML = originalHtml;
}
});
}
// ─────────────────────────────────────────────────────────────
// IP 폼 제출 및 진행률 폴링
// ─────────────────────────────────────────────────────────────
const ipForm = document.getElementById("ipForm");
if (ipForm) {
ipForm.addEventListener("submit", async (ev) => {
ev.preventDefault();
const formData = new FormData(ipForm);
const btn = ipForm.querySelector('button[type="submit"]');
const originalHtml = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>처리 중...';
try {
const res = await fetch(ipForm.action, {
method: "POST",
body: formData
});
if (!res.ok) throw new Error("HTTP " + res.status);
const data = await res.json();
console.log("[DEBUG] process_ips 응답:", data);
if (data.job_id) {
pollProgress(data.job_id);
} else {
window.updateProgress(100);
setTimeout(() => location.reload(), 1000);
}
} catch (err) {
console.error("처리 중 오류:", err);
alert("처리 중 오류 발생: " + err.message);
btn.disabled = false;
btn.innerHTML = originalHtml;
}
});
}
// ─────────────────────────────────────────────────────────────
// 진행률 폴링 함수
// ─────────────────────────────────────────────────────────────
function pollProgress(jobId) {
const interval = setInterval(async () => {
try {
const res = await fetch(`/progress_status/${jobId}`);
if (!res.ok) {
clearInterval(interval);
return;
}
const data = await res.json();
if (data.progress !== undefined) {
window.updateProgress(data.progress);
}
if (data.progress >= 100) {
clearInterval(interval);
window.updateProgress(100);
setTimeout(() => location.reload(), 1500);
}
} catch (err) {
console.error('진행률 확인 중 오류:', err);
clearInterval(interval);
}
}, 500);
}
// ─────────────────────────────────────────────────────────────
// 알림 자동 닫기 (5초 후)
// ─────────────────────────────────────────────────────────────
setTimeout(() => {
document.querySelectorAll('.alert').forEach(alert => {
const bsAlert = new bootstrap.Alert(alert);
bsAlert.close();
});
}, 5000);
});

300
backend/static/style.css
View File

@@ -532,3 +532,303 @@ label, .form-label, .card-title, .list-group-item strong {
min-height: calc(1em * var(--btn-line) + (var(--btn-py) * 2)) !important;
box-sizing: border-box;
}
/* ========================================================================== */
/* Imported from index.css & index_custom.css */
/* ========================================================================== */
/* ===== 공통 ?<3F>일 카드 컴팩???<3F><>???===== */
.file-card-compact {
transition: all 0.2s ease;
background: #fff;
min-width: 120px;
max-width: 200px;
}
.file-card-compact:hover {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.file-card-compact a {
font-size: 0.9rem;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
/* ===== 목록<EBAAA9><EBA19D>?버튼 분리 규칙 ===== */
/* 처리???<3F>일 목록 ?<3F>용 컨테?<3F>너(보기/??<3F><> 2?? */
.processed-list .file-card-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
}
/* 보기(처리?? */
.processed-list .btn-view-processed {
border-color: #3b82f6;
color: #1d4ed8;
padding: .425rem .6rem;
font-size: .8125rem;
font-weight: 600;
}
.processed-list .btn-view-processed:hover {
background: rgba(59, 130, 246, .08);
}
/* ??<3F><>(처리?? ?????<3F>게 */
.processed-list .btn-delete-processed {
border-color: #ef4444;
color: #b91c1c;
padding: .3rem .5rem;
font-size: .75rem;
font-weight: 600;
}
.processed-list .btn-delete-processed:hover {
background: rgba(239, 68, 68, .08);
}
/* 백업 ?<3F>일 목록 ?<3F>용 컨테?<3F>너(?<3F>일 버튼) */
.backup-list .file-card-single-button {
display: flex;
margin-top: .25rem;
}
/* 보기(백업) ??강조 ?<3F>상 */
.backup-list .btn-view-backup {
width: 100%;
border-color: #10b981;
color: #047857;
padding: .45rem .75rem;
font-size: .8125rem;
font-weight: 700;
}
.backup-list .btn-view-backup:hover {
background: rgba(16, 185, 129, .08);
}
/* ===== 백업 ?<3F>일 ?<3F>짜 ?<3F>더 ===== */
.list-group-item .bg-light {
transition: background-color 0.2s ease;
}
.list-group-item:hover .bg-light {
background-color: #e9ecef !important;
}
/* ===== 진행<ECA784><ED9689>??<3F>니메이??===== */
.progress {
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
transition: width 0.6s ease;
}
/* ===== 반응???<3F>스??===== */
@media (max-width: 768px) {
.card-body {
padding: 1.5rem !important;
}
}
/* ===== ?<3F>크롤바 ?<3F><>??<3F>링(모달) ===== */
.modal-body pre::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.modal-body pre::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.modal-body pre::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.modal-body pre::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 백업 ?<3F>일 ?<3F>중 ?<3F>택 ?<3F><>???*/
.backup-file-item.selected .file-card-compact {
border-color: #0d6efd !important;
background-color: #e7f1ff !important;
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}
.file-card-compact {
transition: all 0.2s ease-in-out;
cursor: pointer;
}
/* Tom Select 미세 조정 */
.ts-wrapper.form-select {
padding: 0 !important;
border: none !important;
}
.ts-control {
border: 1px solid #dee2e6;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
}
.ts-wrapper.focus .ts-control {
border-color: #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/* Quick Move 버튼 ?<3F>버 ?<3F>과 */
.btn-quick-move {
transition: all 0.2s ease-in-out;
}
.btn-quick-move:hover {
transform: translateY(-3px);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
background-color: #f8f9fa !important;
border-color: #dee2e6 !important;
}
.btn-quick-move:active {
transform: translateY(0);
}
/* Modern Minimalist Styles */
.hover-bg-light {
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hover-bg-light:hover {
background-color: #f8f9fa !important;
border-color: #dee2e6 !important;
}
/* Slot Badge - Clean & Flat */
.slot-badge {
position: relative;
padding: 0.4rem 0.8rem 0.4rem 2rem;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 9999px;
/* Pill shape */
color: #374151;
font-weight: 600;
font-family: monospace;
font-size: 0.85rem;
transition: all 0.2s ease;
user-select: none;
display: flex;
align-items: center;
}
.slot-badge:hover {
border-color: #3b82f6;
/* Primary Blue */
color: #3b82f6;
}
.slot-index {
position: absolute;
left: 0.35rem;
width: 1.3rem;
height: 1.3rem;
background: #f3f4f6;
color: #6b7280;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
}
/* Grid Layout for Preview */
#slotPreview {
display: grid !important;
grid-template-columns: repeat(5, 1fr);
/* 5 items per line */
gap: 0.5rem;
align-content: start;
}
/* Slot Badge - Draggable & Card-like */
.slot-badge {
position: relative;
padding: 0.5rem 0.2rem;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
color: #374151;
font-weight: 600;
font-family: monospace;
font-size: 0.75rem;
/* Reduced font size */
transition: all 0.2s ease;
user-select: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: grab;
height: 100%;
min-height: 80px;
overflow: hidden;
/* Prevent overflow */
word-break: break-all;
/* Ensure wrapping if needed */
}
.slot-badge:active {
cursor: grabbing;
}
.slot-badge:hover {
border-color: #3b82f6;
color: #3b82f6;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.slot-index {
background: #f3f4f6;
color: #6b7280;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.slot-badge:hover .slot-index {
background: #eff6ff;
color: #3b82f6;
}
/* Dragging state */
.sortable-ghost {
opacity: 0.4;
background: #e2e8f0;
border: 1px dashed #94a3b8;
}
.sortable-drag {
opacity: 1;
background: #fff;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transform: scale(1.02);
}