66 lines
3.2 KiB
PHP
66 lines
3.2 KiB
PHP
<div id="imageModal" class="image-modal" onclick="closeImageModal()">
|
||
<div class="image-modal-content" onclick="event.stopPropagation()">
|
||
<span class="image-modal-close" onclick="closeImageModal()">×</span>
|
||
<img id="modalImage" src="" alt="Uploaded photo" class="modal-image" />
|
||
</div>
|
||
</div>
|
||
<script>
|
||
function openImageModal(imageSrc) {
|
||
document.getElementById('modalImage').src = imageSrc;
|
||
document.getElementById('imageModal').style.display = 'block';
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
function closeImageModal() {
|
||
document.getElementById('imageModal').style.display = 'none';
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
document.addEventListener('keydown', function (event) {
|
||
if (event.key === 'Escape') closeImageModal();
|
||
});
|
||
</script>
|
||
<style>
|
||
html, body.preview-approval-body { background: #fff; margin: 0; padding: 0; }
|
||
.approval-container { max-width: 900px; margin: 0 auto; padding: 16px 16px 24px; background: #fff; }
|
||
.approval-header { text-align: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 2px solid #f8f9fa; }
|
||
.approval-title { font-size: 1.6rem; font-weight: 600; margin-bottom: 8px; }
|
||
.approval-subtitle { color: #6c757d; font-size: 1rem; margin-bottom: 0; }
|
||
.preview-panel { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; margin: 16px 0; overflow: hidden; }
|
||
.preview-panel > summary { list-style: none; cursor: pointer; }
|
||
.preview-panel > summary::-webkit-details-marker { display: none; }
|
||
.section-title {
|
||
background: #007bff; color: #fff; margin: 0; padding: 12px 40px 12px 16px;
|
||
font-size: 1.05rem; font-weight: 600; position: relative;
|
||
}
|
||
.section-title::after {
|
||
content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
|
||
font-size: 1.25rem; line-height: 1;
|
||
}
|
||
.preview-panel[open] > .section-title::after { content: '−'; }
|
||
.section-content { padding: 16px; }
|
||
.detail-row {
|
||
display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
|
||
border-bottom: 1px solid #f1f3f4;
|
||
}
|
||
.detail-row:last-child { border-bottom: none; }
|
||
.detail-label { font-weight: 600; color: #495057; min-width: 140px; }
|
||
.detail-value { color: #212529; flex: 1; text-align: right; word-break: break-word; }
|
||
.request-letter-container { text-align: center; }
|
||
.request-letter-image {
|
||
max-width: 100%; max-height: 420px; border: 1px solid #dee2e6;
|
||
border-radius: 8px; cursor: pointer;
|
||
}
|
||
.image-modal {
|
||
display: none; position: fixed; z-index: 9999; left: 0; top: 0;
|
||
width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9);
|
||
}
|
||
.image-modal-content {
|
||
position: relative; margin: auto; padding: 20px; width: 90%; height: 90%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.modal-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
|
||
.image-modal-close {
|
||
position: absolute; top: 10px; right: 20px; color: #fff;
|
||
font-size: 36px; font-weight: bold; cursor: pointer;
|
||
}
|
||
</style>
|