대표를 위한 무기 수정
This commit is contained in:
BIN
img/sam_sales1.jpg
Normal file
BIN
img/sam_sales1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 432 KiB |
94
index.php
94
index.php
@@ -55,6 +55,44 @@
|
|||||||
|
|
||||||
/* Hide scrollbar for clean modal */
|
/* Hide scrollbar for clean modal */
|
||||||
.no-scroll { overflow: hidden; }
|
.no-scroll { overflow: hidden; }
|
||||||
|
|
||||||
|
/* Image Zoom & Float Effect */
|
||||||
|
.img-zoom-container {
|
||||||
|
overflow: visible !important;
|
||||||
|
perspective: 1000px;
|
||||||
|
}
|
||||||
|
.img-zoom-target {
|
||||||
|
cursor: zoom-in;
|
||||||
|
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
/* 인라인 스타일을 클래스로 통합 */
|
||||||
|
image-rendering: -webkit-optimize-contrast;
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
transform: translateZ(0);
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
.img-zoom-target:hover {
|
||||||
|
transform: scale(1.1) translateZ(0) !important;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Full Size Viewer */
|
||||||
|
.img-full-container {
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow: auto;
|
||||||
|
cursor: grab;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
.img-full-container:active { cursor: grabbing; }
|
||||||
|
.img-natural {
|
||||||
|
max-width: none !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900">
|
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900">
|
||||||
@@ -193,7 +231,9 @@
|
|||||||
// Data - Ported from constants.ts
|
// Data - Ported from constants.ts
|
||||||
const ASSETS = [
|
const ASSETS = [
|
||||||
{
|
{
|
||||||
id: '1', type: 'TEXT', title: 'Concept: 대표를 위한 무기',
|
id: '1', type: 'IMAGE', title: 'Concept: 대표를 위한 무기',
|
||||||
|
src: 'img/sam_sales1.jpg',
|
||||||
|
description: '기존 ERP는 직원의 관리 도구였지만, SAM은 대표님의 의사결정 무기입니다. 직원의 보고를 기다리지 마십시오.',
|
||||||
content: '기존 ERP는 직원의 관리 도구였지만, SAM은 대표님의 의사결정 무기입니다. 직원의 보고를 기다리지 마십시오. SAM이 대표님께 직접, 실시간으로 회사의 현황을 보고합니다.',
|
content: '기존 ERP는 직원의 관리 도구였지만, SAM은 대표님의 의사결정 무기입니다. 직원의 보고를 기다리지 마십시오. SAM이 대표님께 직접, 실시간으로 회사의 현황을 보고합니다.',
|
||||||
script: "대표님, ERP나 MES 들어보셨죠? 보통 직원들이 입력하고 관리하는 도구입니다. 정작 대표님은 직원한테 보고를 받아야만 회사를 알 수 있죠. SAM은 반대입니다. 직원이 아니라 '대표님을 위한 무기'입니다. 외근 중이든 집이든, 대표님 폰에서 회사의 자금, 인력, 리스크가 한눈에 보입니다.",
|
script: "대표님, ERP나 MES 들어보셨죠? 보통 직원들이 입력하고 관리하는 도구입니다. 정작 대표님은 직원한테 보고를 받아야만 회사를 알 수 있죠. SAM은 반대입니다. 직원이 아니라 '대표님을 위한 무기'입니다. 외근 중이든 집이든, 대표님 폰에서 회사의 자금, 인력, 리스크가 한눈에 보입니다.",
|
||||||
tags: ['Concept', 'Pitch', 'Opener'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
|
tags: ['Concept', 'Pitch', 'Opener'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
|
||||||
@@ -360,9 +400,12 @@
|
|||||||
badgeColor = 'bg-emerald-100 text-emerald-700';
|
badgeColor = 'bg-emerald-100 text-emerald-700';
|
||||||
} else if (asset.type === 'IMAGE' || asset.type === 'VIDEO') {
|
} else if (asset.type === 'IMAGE' || asset.type === 'VIDEO') {
|
||||||
const aspectClass = asset.customAspect || 'aspect-video';
|
const aspectClass = asset.customAspect || 'aspect-video';
|
||||||
|
// object-cover 대신 object-contain을 사용하고 padding을 주어 잘림 방지
|
||||||
contentRaw = `
|
contentRaw = `
|
||||||
<div class="mb-4 rounded-lg overflow-hidden border border-slate-100 relative group ${aspectClass}">
|
<div class="mb-4 rounded-lg overflow-hidden border border-slate-100 relative group ${aspectClass} bg-slate-50 p-2 flex items-center justify-center">
|
||||||
<img src="${asset.src}" alt="${asset.title}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
|
<img src="${asset.src}" alt="${asset.title}"
|
||||||
|
class="w-full h-full object-contain transform group-hover:scale-105 transition-transform duration-500"
|
||||||
|
style="image-rendering: -webkit-optimize-contrast;">
|
||||||
${asset.type === 'VIDEO' ? `
|
${asset.type === 'VIDEO' ? `
|
||||||
<div class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/30 transition-all">
|
<div class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/30 transition-all">
|
||||||
<div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center pl-1 shadow-lg transform group-hover:scale-110 transition-transform">
|
<div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center pl-1 shadow-lg transform group-hover:scale-110 transition-transform">
|
||||||
@@ -474,9 +517,28 @@
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
} else {
|
} else {
|
||||||
const aspectClass = asset.customAspect || 'aspect-video';
|
// 원본 크기 전환 및 스크롤 가능 컨테이너 적용 (버튼 위치 절대 좌표 고정)
|
||||||
const objectFitClass = asset.customAspect ? 'object-contain p-2' : 'object-cover';
|
mediaHtml = `
|
||||||
mediaHtml = `<div class="${aspectClass} bg-slate-100 rounded-xl overflow-hidden mb-6"><img src="${asset.src}" class="w-full h-full ${objectFitClass}"></div>`;
|
<div class="relative mb-6 group/viewer min-h-[200px] bg-slate-50 rounded-xl overflow-hidden border border-slate-100">
|
||||||
|
<!-- 항상 고정된 우측 상단 위치 -->
|
||||||
|
<div class="absolute top-3 right-3 z-[60] flex gap-2 translate-y-2 opacity-0 group-hover/viewer:translate-y-0 group-hover/viewer:opacity-100 transition-all duration-300">
|
||||||
|
<button onclick="toggleNaturalSize(this)"
|
||||||
|
class="px-4 py-2 bg-white/95 backdrop-blur-md shadow-lg border border-slate-200 rounded-full text-xs font-bold text-brand-600 hover:bg-brand-600 hover:text-white transition-all flex items-center gap-2 ring-4 ring-black/5">
|
||||||
|
<i data-lucide="maximize" class="w-3.5 h-3.5"></i>
|
||||||
|
<span>원본 크기 보기</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- 이미지 스크롤 영역 -->
|
||||||
|
<div class="img-full-container custom-scrollbar scroll-smooth w-full" id="image-viewer">
|
||||||
|
<img src="${asset.src}"
|
||||||
|
id="modal-main-img"
|
||||||
|
class="w-full h-auto object-contain rounded-xl img-zoom-target mx-auto"
|
||||||
|
style="image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;">
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-3 left-0 right-0 text-center text-[10px] text-slate-400 font-medium pointer-events-none group-hover/viewer:opacity-0 transition-opacity">
|
||||||
|
* 우측 상단 버튼으로 원본 크기를 확인할 수 있습니다.
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -568,12 +630,20 @@
|
|||||||
}, 300);
|
}, 300);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Toast
|
// Toggle Image Natural Size
|
||||||
window.showDownloadToast = () => {
|
window.toggleNaturalSize = (btn) => {
|
||||||
toast.classList.remove('translate-x-full', 'opacity-0');
|
const img = document.getElementById('modal-main-img');
|
||||||
setTimeout(() => {
|
const container = document.getElementById('image-viewer');
|
||||||
toast.classList.add('translate-x-full', 'opacity-0');
|
const isNatural = img.classList.toggle('img-natural');
|
||||||
}, 3000);
|
|
||||||
|
if (isNatural) {
|
||||||
|
btn.innerHTML = '<i data-lucide="minimize" class="w-3.5 h-3.5"></i><span>맞춤 크기 보기</span>';
|
||||||
|
img.classList.remove('img-zoom-target'); // 원본 크기일 때는 호버 확대 끔
|
||||||
|
} else {
|
||||||
|
btn.innerHTML = '<i data-lucide="maximize" class="w-3.5 h-3.5"></i><span>원본 크기 보기</span>';
|
||||||
|
img.classList.add('img-zoom-target');
|
||||||
|
}
|
||||||
|
lucide.createIcons();
|
||||||
};
|
};
|
||||||
|
|
||||||
// Initialize
|
// Initialize
|
||||||
|
|||||||
Reference in New Issue
Block a user