export-view.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>导出动画</title>
  7. <link rel="stylesheet" href="../../css/export-view/export-view.css">
  8. </head>
  9. <body>
  10. <!-- 黑色背景遮罩(隐藏,仅用于生成 spritesheet) -->
  11. <div class="export-overlay" id="exportOverlay" style="display: none;">
  12. <div class="export-modal" id="exportModal" style="display: none;">
  13. <img id="previewImage" alt="Spritesheet预览" style="display: none;" />
  14. <div class="preview-placeholder" id="previewPlaceholder" style="display: none;"></div>
  15. <button id="exportCancelBtn" style="display: none;"></button>
  16. <button id="floatingAIBtn" style="display: none;"></button>
  17. <button id="exportConfirmBtn" style="display: none;"></button>
  18. </div>
  19. </div>
  20. <!-- 下载确认对话框 -->
  21. <div class="download-confirm-overlay" id="downloadConfirmOverlay" style="display: none;">
  22. <div class="download-confirm-modal">
  23. <div class="download-confirm-header">
  24. <h3>选择下载方式</h3>
  25. <button class="download-confirm-close" id="downloadConfirmClose">
  26. <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  27. <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
  28. </svg>
  29. </button>
  30. </div>
  31. <div class="download-confirm-content">
  32. <div class="download-option" data-option="original">
  33. <div class="download-option-icon">
  34. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  35. <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  36. <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  37. <path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  38. <path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  39. <path d="M10 9H9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  40. </svg>
  41. </div>
  42. <div class="download-option-info">
  43. <div class="download-option-title">源文件下载</div>
  44. <div class="download-option-desc">直接下载原始图片,不进行抠图处理</div>
  45. </div>
  46. </div>
  47. <div class="download-option" data-option="normal">
  48. <div class="download-option-icon">
  49. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  50. <path d="M6 7C6 7 8 9 10 11C12 13 12 15 12 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  51. <path d="M18 7C18 7 16 9 14 11C12 13 12 15 12 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  52. <circle cx="6" cy="7" r="2" stroke="currentColor" stroke-width="2" fill="none"/>
  53. <circle cx="18" cy="7" r="2" stroke="currentColor" stroke-width="2" fill="none"/>
  54. <path d="M12 15L12 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  55. </svg>
  56. </div>
  57. <div class="download-option-info">
  58. <div class="download-option-title">普通抠图下载</div>
  59. <div class="download-option-desc">使用 rembg 进行抠图处理</div>
  60. </div>
  61. </div>
  62. <div class="download-option" data-option="vip">
  63. <div class="download-option-icon">
  64. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  65. <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="currentColor" fill-opacity="0.1"/>
  66. </svg>
  67. </div>
  68. <div class="download-option-info">
  69. <div class="download-option-title">VIP抠图下载</div>
  70. <div class="download-option-desc">使用 BiRefNet 进行高质量抠图处理</div>
  71. <div class="download-option-price" id="vipMattingPrice">-</div>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <script src="../../js/export-view/export-view.js"></script>
  78. </body>
  79. </html>