| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>导出动画</title>
- <link rel="stylesheet" href="../../css/export-view/export-view.css">
- </head>
- <body>
- <!-- 黑色背景遮罩 -->
- <div class="export-overlay" id="exportOverlay">
- <!-- 弹出框容器 -->
- <div class="export-modal" id="exportModal">
- <!-- 关闭按钮（在弹窗右上角） -->
- <button class="modal-close-btn" id="exportCancelBtn" title="关闭">
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
- </svg>
- </button>
- <!-- 图片预览区域 - 左右两个图框 -->
- <div class="export-preview-container">
- <!-- 左侧：参考图上传 -->
- <div class="export-reference-section">
- <div class="export-preview-box export-reference-box" id="referenceBox">
- <input type="file" id="referenceInput" accept="image/*" style="display: none;">
- <div class="reference-upload-area" id="referenceUploadArea">
- <div class="upload-icon">+</div>
- <div class="upload-text">点击上传参考图</div>
- </div>
- <div class="reference-image-wrapper" id="referenceImageWrapper" style="display: none;">
- <img id="referenceImage" alt="参考图" class="reference-image" />
- <button class="reference-remove-btn" id="referenceRemoveBtn" title="删除参考图">
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
- </svg>
- </button>
- </div>
- </div>
- </div>
-
- <!-- 右侧：Spritesheet 预览 -->
- <div class="export-spritesheet-section">
- <div class="export-preview-box export-spritesheet-box" id="spritesheetBox">
- <img id="previewImage" alt="Spritesheet预览" />
- <div class="preview-placeholder" id="previewPlaceholder">
- <div class="loading-spinner"></div>
- <div class="loading-text">正在生成预览图...</div>
- </div>
- <!-- 下载按钮 - 悬浮在右下角 -->
- <button class="floating-download-btn" id="exportConfirmBtn" title="下载" disabled>
- <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
- </svg>
- </button>
- </div>
- </div>
- </div>
-
- <!-- 提示词配置区域（默认隐藏，上传参考图后显示） -->
- <div class="prompt-config-section" id="promptConfigSection" style="display: none;">
- <div class="config-row">
- <textarea id="additionalPromptInput" class="config-textarea" placeholder="输入额外的提示词指令..."></textarea>
- </div>
- <!-- 操作按钮区域 -->
- <div class="prompt-actions">
- <button class="action-btn replace-action-btn" id="replaceBtn" title="替换角色">
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M10 2L12 6H8L10 2Z" fill="currentColor"/>
- <path d="M2 10L6 8V12L2 10Z" fill="currentColor"/>
- <path d="M10 18L8 14H12L10 18Z" fill="currentColor"/>
- <path d="M18 10L14 8V12L18 10Z" fill="currentColor"/>
- <circle cx="10" cy="10" r="2" fill="currentColor"/>
- </svg>
- <span>替换</span>
- </button>
- </div>
- </div>
- </div>
- </div>
- <!-- 下载确认对话框 -->
- <div class="download-confirm-overlay" id="downloadConfirmOverlay" style="display: none;">
- <div class="download-confirm-modal">
- <div class="download-confirm-header">
- <h3>选择下载方式</h3>
- <button class="download-confirm-close" id="downloadConfirmClose">
- <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
- </svg>
- </button>
- </div>
- <div class="download-confirm-content">
- <div class="download-option" data-option="original">
- <div class="download-option-icon">📄</div>
- <div class="download-option-info">
- <div class="download-option-title">源文件下载</div>
- <div class="download-option-desc">直接下载原始图片，不进行抠图处理</div>
- </div>
- </div>
- <div class="download-option" data-option="normal">
- <div class="download-option-icon">✂️</div>
- <div class="download-option-info">
- <div class="download-option-title">普通抠图下载</div>
- <div class="download-option-desc">使用 rembg 进行抠图处理</div>
- </div>
- </div>
- <div class="download-option" data-option="vip">
- <div class="download-option-icon">✨</div>
- <div class="download-option-info">
- <div class="download-option-title">VIP抠图下载</div>
- <div class="download-option-desc">使用 BiRefNet 进行高质量抠图处理</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="../../js/export-view/export-view.js"></script>
- </body>
- </html>
|
