@cecee/document-flip-book 1.0.17 → 1.0.19

package/dist/esm/{exportHtml.js → DocumentFlipBook/exportHtml.js}

@@ -4,7 +4,21 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 import { message } from 'antd';
 import dayjs from 'dayjs';
+import JSZip from 'jszip';
 import { renderPdfPageToDataUrl, renderImageToDataUrl } from "./exportPdf";
+/**
+ * 将 Data URL 转换为 ArrayBuffer
+ */
+var dataUrlToArrayBuffer = function dataUrlToArrayBuffer(dataUrl) {
+  var base64 = dataUrl.split(',')[1];
+  var binary = window.atob(base64);
+  var bytes = new Uint8Array(binary.length);
+  for (var i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+};
+
 /**
  * 渲染封面为图片
  */
@@ -120,99 +134,141 @@ var renderCoverToImage = /*#__PURE__*/function () {
 }();
 
 /**
- * 导出 HTML 翻书功能
+ * 导出 EPUB 电子书功能
  */
-export var exportArchivePagesToHtml = /*#__PURE__*/function () {
+export var exportArchivePagesToEpub = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(options) {
-    var pages, filename, _options$title, title, getDocument, coverInfo, hide, coverImg, pagesData, i, page, img, _img, htmlContent, blob, url, link;
+    var pages, filename, _options$title, title, getDocument, coverInfo, hide, _zip$folder, _zip$folder2, _zip$folder3, _zip$folder4, _zip$folder7, _zip$folder8, zip, coverDataUrl, manifestItems, spineItems, navPoints, i, page, pageNum, imgDataUrl, img, _img, _zip$folder5, _zip$folder6, imgFileName, xhtmlFileName, pageId, content, url, link, finalFilename;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          pages = options.pages, filename = options.filename, _options$title = options.title, title = _options$title === void 0 ? '档案翻书' : _options$title, getDocument = options.getDocument, coverInfo = options.coverInfo;
-          hide = message.loading('正在导出 HTML 翻书，请稍候…', 0);
+          pages = options.pages, filename = options.filename, _options$title = options.title, title = _options$title === void 0 ? '电子档案书' : _options$title, getDocument = options.getDocument, coverInfo = options.coverInfo;
+          hide = message.loading('正在导出 EPUB 电子书，请稍候…', 0);
           _context2.prev = 2;
-          _context2.next = 5;
+          zip = new JSZip(); // 1. mimetype (必须是第一个文件且不压缩)
+          zip.file('mimetype', 'application/epub+zip', {
+            compression: 'STORE'
+          });
+
+          // 2. META-INF/container.xml
+          (_zip$folder = zip.folder('META-INF')) === null || _zip$folder === void 0 || _zip$folder.file('container.xml', "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<container version=\"1.0\" xmlns=\"urn:oasis:names:tc:opendocument:xmlns:container\">\n    <rootfiles>\n        <rootfile full-path=\"OEBPS/content.opf\" media-type=\"application/oebps-package+xml\"/>\n    </rootfiles>\n</container>");
+
+          // 3. 准备资源
+          _context2.next = 8;
           return renderCoverToImage(coverInfo);
-        case 5:
-          coverImg = _context2.sent;
-          pagesData = [coverImg];
-          i = 0;
         case 8:
+          coverDataUrl = _context2.sent;
+          (_zip$folder2 = zip.folder('OEBPS')) === null || _zip$folder2 === void 0 || (_zip$folder2 = _zip$folder2.folder('Images')) === null || _zip$folder2 === void 0 || _zip$folder2.file('cover.jpg', dataUrlToArrayBuffer(coverDataUrl));
+          manifestItems = ['<item id="cover" href="Text/cover.xhtml" media-type="application/xhtml+xml"/>', '<item id="cover-image" href="Images/cover.jpg" media-type="image/jpeg" properties="cover-image"/>', '<item id="style" href="Styles/style.css" media-type="text/css"/>', '<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>'];
+          spineItems = ['<itemref idref="cover"/>'];
+          navPoints = ["<navPoint id=\"navPoint-1\" playOrder=\"1\"><navLabel><text>\u5C01\u9762</text></navLabel><content src=\"Text/cover.xhtml\"/></navPoint>"]; // 封面 XHTML
+          (_zip$folder3 = zip.folder('OEBPS')) === null || _zip$folder3 === void 0 || (_zip$folder3 = _zip$folder3.folder('Text')) === null || _zip$folder3 === void 0 || _zip$folder3.file('cover.xhtml', "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n    <title>Cover</title>\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"../Styles/style.css\"/>\n</head>\n<body style=\"margin:0;padding:0;text-align:center;\">\n    <div style=\"width:100%;height:100%;\"><img src=\"../Images/cover.jpg\" style=\"max-width:100%;max-height:100%;\"/></div>\n</body>\n</html>");
+
+          // 样式表
+          (_zip$folder4 = zip.folder('OEBPS')) === null || _zip$folder4 === void 0 || (_zip$folder4 = _zip$folder4.folder('Styles')) === null || _zip$folder4 === void 0 || _zip$folder4.file('style.css', "\nbody { margin: 0; padding: 0; background: #fff; }\nimg { max-width: 100%; height: auto; }\n.page-container { text-align: center; page-break-after: always; }\n");
+
+          // 处理每一页
+          i = 0;
+        case 16:
           if (!(i < pages.length)) {
-            _context2.next = 31;
+            _context2.next = 42;
             break;
           }
           page = pages[i];
-          _context2.prev = 10;
+          pageNum = i + 1;
+          _context2.prev = 19;
+          imgDataUrl = '';
           if (!(page.type === 'image')) {
-            _context2.next = 18;
+            _context2.next = 28;
             break;
           }
-          _context2.next = 14;
+          _context2.next = 24;
           return renderImageToDataUrl(page.file);
-        case 14:
+        case 24:
           img = _context2.sent;
-          pagesData.push(img.dataUrl);
-          _context2.next = 23;
+          imgDataUrl = img.dataUrl;
+          _context2.next = 33;
           break;
-        case 18:
+        case 28:
           if (!(page.type === 'pdf')) {
-            _context2.next = 23;
+            _context2.next = 33;
             break;
           }
-          _context2.next = 21;
+          _context2.next = 31;
           return renderPdfPageToDataUrl({
             getDocument: getDocument,
             file: page.file,
             pageNum: page.pageNum,
             scale: 2
           });
-        case 21:
+        case 31:
           _img = _context2.sent;
-          pagesData.push(_img.dataUrl);
-        case 23:
-          _context2.next = 28;
+          imgDataUrl = _img.dataUrl;
+        case 33:
+          if (imgDataUrl) {
+            imgFileName = "page".concat(pageNum, ".jpg");
+            xhtmlFileName = "page".concat(pageNum, ".xhtml");
+            pageId = "page".concat(pageNum);
+            (_zip$folder5 = zip.folder('OEBPS')) === null || _zip$folder5 === void 0 || (_zip$folder5 = _zip$folder5.folder('Images')) === null || _zip$folder5 === void 0 || _zip$folder5.file(imgFileName, dataUrlToArrayBuffer(imgDataUrl));
+            (_zip$folder6 = zip.folder('OEBPS')) === null || _zip$folder6 === void 0 || (_zip$folder6 = _zip$folder6.folder('Text')) === null || _zip$folder6 === void 0 || _zip$folder6.file(xhtmlFileName, "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n    <title>Page ".concat(pageNum, "</title>\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"../Styles/style.css\"/>\n</head>\n<body style=\"margin:0;padding:0;text-align:center;\">\n    <div class=\"page-container\"><img src=\"../Images/").concat(imgFileName, "\"/></div>\n</body>\n</html>"));
+            manifestItems.push("<item id=\"".concat(pageId, "\" href=\"Text/").concat(xhtmlFileName, "\" media-type=\"application/xhtml+xml\"/>"));
+            manifestItems.push("<item id=\"".concat(pageId, "-img\" href=\"Images/").concat(imgFileName, "\" media-type=\"image/jpeg\"/>"));
+            spineItems.push("<itemref idref=\"".concat(pageId, "\"/>"));
+            navPoints.push("<navPoint id=\"navPoint-".concat(pageNum + 1, "\" playOrder=\"").concat(pageNum + 1, "\"><navLabel><text>\u7B2C ").concat(pageNum, " \u9875</text></navLabel><content src=\"Text/").concat(xhtmlFileName, "\"/></navPoint>"));
+          }
+          _context2.next = 39;
           break;
-        case 25:
-          _context2.prev = 25;
-          _context2.t0 = _context2["catch"](10);
+        case 36:
+          _context2.prev = 36;
+          _context2.t0 = _context2["catch"](19);
           console.error("\u6E32\u67D3\u7B2C ".concat(i + 1, " \u9875\u5931\u8D25:"), _context2.t0);
-        case 28:
+        case 39:
           i++;
-          _context2.next = 8;
+          _context2.next = 16;
           break;
-        case 31:
-          htmlContent = "\n<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"UTF-8\">\n    <title>".concat(title, "</title>\n    <style>\n        body { margin: 0; background: #333; display: flex; flex-direction: column; align-items: center; min-height: 100vh; font-family: sans-serif; overflow: hidden; }\n        .viewport { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100vh - 60px); }\n        .book-container { position: relative; width: 1200px; height: 800px; display: flex; justify-content: center; align-items: center; transition: all 0.5s ease; }\n        .page-wrapper { position: relative; width: 50%; height: 100%; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.5); overflow: hidden; display: flex; justify-content: center; align-items: center; }\n        .page-left { border-radius: 10px 0 0 10px; border-right: 1px solid #eee; }\n        .page-right { border-radius: 0 10px 10px 0; }\n        .page-img { max-width: 100%; max-height: 100%; object-fit: contain; }\n        .controls { height: 60px; width: 100%; background: #222; color: #fff; display: flex; justify-content: center; align-items: center; gap: 25px; z-index: 100; border-top: 1px solid #444; position: fixed; bottom: 0; left: 0; }\n        button { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 6px 20px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s; }\n        button:hover { background: rgba(255, 255, 255, 0.25); }\n        button#btnNext { background: ").concat(options.coverInfo.themeColor || '#9F7D4E', "; border: none; font-weight: bold; }\n        button:disabled { background: #333 !important; color: #666; cursor: not-allowed; border-color: #444; }\n        .page-info { font-size: 14px; display: flex; align-items: center; gap: 12px; color: #ccc; }\n        select { background: #333; color: #fff; border: 1px solid #555; padding: 5px 10px; border-radius: 4px; outline: none; cursor: pointer; font-size: 14px; min-width: 120px; }\n        .spine { position: absolute; left: 50%; top: 20px; bottom: 20px; width: 2px; background: rgba(0,0,0,0.15); transform: translateX(-50%); z-index: 10; box-shadow: 0 0 15px rgba(0,0,0,0.3); }\n        \n        /* \u5C01\u9762\u5355\u9875\u5C45\u4E2D\u6837\u5F0F */\n        .is-cover .page-left { display: none; }\n        .is-cover .page-right { border-radius: 10px; width: 600px; }\n        .is-cover .spine { display: none; }\n    </style>\n</head>\n<body>\n    <div class=\"viewport\">\n        <div id=\"book\" class=\"book-container is-cover\">\n            <div class=\"page-wrapper page-left\">\n                <img id=\"leftPage\" class=\"page-img\" src=\"\">\n            </div>\n            <div class=\"spine\"></div>\n            <div class=\"page-wrapper page-right\">\n                <img id=\"rightPage\" class=\"page-img\" src=\"\">\n            </div>\n        </div>\n    </div>\n    <div class=\"controls\">\n        <button id=\"btnPrev\" onclick=\"prev()\">\u4E0A\u4E00\u9875</button>\n        <div class=\"page-info\">\n            \u8DF3\u8F6C\u81F3\uFF1A<select id=\"pageSelect\" onchange=\"jump(this.value)\"></select>\n            <span id=\"totalInfo\" style=\"margin-left: 15px; color: #aaa; font-size: 13px;\"></span>\n        </div>\n        <button id=\"btnNext\" onclick=\"next()\">\u4E0B\u4E00\u9875</button>\n    </div>\n    <script>\n        const pages = ").concat(JSON.stringify(pagesData), ";\n        let currentSpread = 0; \n        \n        const book = document.getElementById('book');\n        const leftPage = document.getElementById('leftPage');\n        const rightPage = document.getElementById('rightPage');\n        const pageSelect = document.getElementById('pageSelect');\n        const totalInfo = document.getElementById('totalInfo');\n        const btnPrev = document.getElementById('btnPrev');\n        const btnNext = document.getElementById('btnNext');\n\n        const totalSpreads = Math.ceil((pages.length - 1) / 2) + 1;\n\n        function init() {\n            for(let i = 0; i < totalSpreads; i++) {\n                const opt = document.createElement('option');\n                opt.value = i;\n                opt.innerText = i === 0 ? '\u5C01\u9762' : '\u7B2C ' + i + ' \u7EC4 (' + ((i-1)*2+1) + '-' + Math.min((i-1)*2+2, pages.length-1) + ')';\n                pageSelect.appendChild(opt);\n            }\n            totalInfo.innerText = '\u5171 ' + totalSpreads + ' \u7EC4\u9875\u9762';\n            update();\n        }\n\n        function update() {\n            if (currentSpread === 0) {\n                book.classList.add('is-cover');\n                rightPage.src = pages[0];\n            } else {\n                book.classList.remove('is-cover');\n                const leftIdx = (currentSpread - 1) * 2 + 1;\n                const rightIdx = leftIdx + 1;\n                \n                leftPage.src = pages[leftIdx] || '';\n                rightPage.src = pages[rightIdx] || '';\n                \n                if (!pages[rightIdx]) {\n                    rightPage.parentNode.style.visibility = 'hidden';\n                } else {\n                    rightPage.parentNode.style.visibility = 'visible';\n                }\n            }\n            \n            pageSelect.value = currentSpread;\n            btnPrev.disabled = currentSpread === 0;\n            btnNext.disabled = currentSpread === totalSpreads - 1;\n        }\n\n        function prev() { if(currentSpread > 0) { currentSpread--; update(); } }\n        function next() { if(currentSpread < totalSpreads - 1) { currentSpread++; update(); } }\n        function jump(val) { currentSpread = parseInt(val); update(); }\n\n        // \u952E\u76D8\u7FFB\u9875\u652F\u6301\n        document.addEventListener('keydown', (e) => {\n            if(e.key === 'ArrowLeft') prev();\n            if(e.key === 'ArrowRight') next();\n        });\n\n        init();\n    </script>\n</body>\n</html>");
-          blob = new Blob([htmlContent], {
-            type: 'text/html'
+        case 42:
+          // 4. content.opf
+          (_zip$folder7 = zip.folder('OEBPS')) === null || _zip$folder7 === void 0 || _zip$folder7.file('content.opf', "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<package xmlns=\"http://www.idpf.org/2007/opf\" unique-identifier=\"pub-id\" version=\"3.0\">\n    <metadata xmlns:dc=\"http://purl.org/dc/elements/1.1/\">\n        <dc:identifier id=\"pub-id\">urn:uuid:".concat(crypto.randomUUID(), "</dc:identifier>\n        <dc:title>").concat(title, "</dc:title>\n        <dc:language>zh-CN</dc:language>\n        <dc:creator>Archive System</dc:creator>\n        <dc:date>").concat(new Date().toISOString(), "</dc:date>\n        <meta property=\"dcterms:modified\">").concat(new Date().toISOString().split('.')[0], "Z</meta>\n    </metadata>\n    <manifest>\n        ").concat(manifestItems.join('\n        '), "\n    </manifest>\n    <spine toc=\"ncx\">\n        ").concat(spineItems.join('\n        '), "\n    </spine>\n</package>"));
+
+          // 5. toc.ncx
+          (_zip$folder8 = zip.folder('OEBPS')) === null || _zip$folder8 === void 0 || _zip$folder8.file('toc.ncx', "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<ncx xmlns=\"http://www.daisy.org/z3986/2005/ncx/\" version=\"2005-1\">\n    <head>\n        <meta name=\"dtb:uid\" content=\"urn:uuid:12345\"/>\n        <meta name=\"dtb:depth\" content=\"1\"/>\n        <meta name=\"dtb:totalPageCount\" content=\"0\"/>\n        <meta name=\"dtb:maxPageNumber\" content=\"0\"/>\n    </head>\n    <docTitle><text>".concat(title, "</text></docTitle>\n    <navMap>\n        ").concat(navPoints.join('\n        '), "\n    </navMap>\n</ncx>"));
+
+          // 生成并下载
+          _context2.next = 46;
+          return zip.generateAsync({
+            type: 'blob',
+            mimeType: 'application/epub+zip'
           });
-          url = URL.createObjectURL(blob);
+        case 46:
+          content = _context2.sent;
+          url = URL.createObjectURL(content);
           link = document.createElement('a');
           link.href = url;
-          link.download = filename.endsWith('.html') ? filename : "".concat(filename, ".html");
+          finalFilename = "".concat(title, ".epub");
+          link.download = finalFilename;
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
           URL.revokeObjectURL(url);
-          message.success('HTML 翻书导出成功');
-          _context2.next = 48;
+          message.success('EPUB 电子书导出成功');
+          _context2.next = 63;
           break;
-        case 44:
-          _context2.prev = 44;
+        case 59:
+          _context2.prev = 59;
           _context2.t1 = _context2["catch"](2);
-          console.error('HTML 导出失败:', _context2.t1);
-          message.error('HTML 导出失败');
-        case 48:
-          _context2.prev = 48;
+          console.error('EPUB 导出失败:', _context2.t1);
+          message.error('EPUB 导出失败');
+        case 63:
+          _context2.prev = 63;
           hide();
-          return _context2.finish(48);
-        case 51:
+          return _context2.finish(63);
+        case 66:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[2, 44, 48, 51], [10, 25]]);
+    }, _callee2, null, [[2, 59, 63, 66], [19, 36]]);
   }));
-  return function exportArchivePagesToHtml(_x2) {
+  return function exportArchivePagesToEpub(_x2) {
     return _ref2.apply(this, arguments);
   };
 }();

package/dist/esm/{exportPdf.d.ts → DocumentFlipBook/exportPdf.d.ts}

@@ -18,10 +18,12 @@ export declare function buildArchivePdfBlob(params: {
     pages: BuiltPage[];
     getDocument: (path: string) => Promise<PdfDocumentLike>;
     scale?: number;
+    printType?: 'A4' | 'A5';
 }): Promise<Blob>;
 export declare function exportArchivePagesToPdf(params: {
     pages: BuiltPage[];
     getDocument: (path: string) => Promise<PdfDocumentLike>;
     filename: string;
     scale?: number;
+    printType?: 'A4' | 'A5';
 }): Promise<void>;

package/dist/esm/{exportPdf.js → DocumentFlipBook/exportPdf.js}

@@ -112,15 +112,26 @@ export function buildArchivePdfBlob(_x3) {
 }
 function _buildArchivePdfBlob() {
   _buildArchivePdfBlob = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(params) {
-    var pages, getDocument, _params$scale, scale, pdf, first, _iterator, _step, p, img, pageW, pageH, _img, _pageW, _pageH;
+    var pages, getDocument, _params$scale, scale, _params$printType, printType, pdf, first, _iterator, _step, p, img, pageW, pageH, _img, _pageW, _pageH;
     return _regeneratorRuntime().wrap(function _callee3$(_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          pages = params.pages, getDocument = params.getDocument, _params$scale = params.scale, scale = _params$scale === void 0 ? 2 : _params$scale;
-          pdf = new jsPDF({
-            unit: 'pt',
-            compress: true
-          });
+          pages = params.pages, getDocument = params.getDocument, _params$scale = params.scale, scale = _params$scale === void 0 ? 2 : _params$scale, _params$printType = params.printType, printType = _params$printType === void 0 ? 'A4' : _params$printType;
+          if (printType === 'A5') {
+            pdf = new jsPDF({
+              orientation: 'landscape',
+              unit: 'mm',
+              format: [210, 148],
+              // A5横向
+              compress: true
+            });
+          } else {
+            // 默认 A4
+            pdf = new jsPDF({
+              unit: 'pt',
+              compress: true
+            });
+          }
           first = true;
           _iterator = _createForOfIteratorHelper(pages);
           _context3.prev = 4;

package/dist/esm/{globalCache.d.ts → DocumentFlipBook/globalCache.d.ts}

@@ -1,5 +1,6 @@
 export declare const globalPdfCache: {
-    getDocument(path: string): Promise<import("./types").PdfDocumentLike>;
+    getDocument(path: string): Promise<import("../index").PdfDocumentLike>;
     getPageCount(path: string): Promise<number>;
     clear(path: string): void;
+    clearAll(): void;
 };

package/dist/esm/DocumentFlipBook/images/Clip_1.svg

@@ -0,0 +1,97 @@
+<svg width="28" height="768" viewBox="0 0 28 768" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0L28 4.43758V762.562L4 767V0Z" fill="url(#paint0_linear_28911_9466)"/>
+<path d="M4 0L1.34311 3.93006C1.1195 4.26082 1 4.65094 1 5.05019V764.264C1 765.021 1.428 765.714 2.10557 766.053L4 767V0Z" fill="url(#paint1_linear_28911_9466)"/>
+<g opacity="0.79" filter="url(#filter0_f_28911_9466)">
+<rect x="11" y="6" width="4" height="755" rx="2" fill="black"/>
+</g>
+<g opacity="0.82" filter="url(#filter1_f_28911_9466)">
+<rect x="12" y="7" width="2" height="753" rx="1" fill="white"/>
+</g>
+<g opacity="0.12" filter="url(#filter2_f_28911_9466)">
+<rect x="15" y="7" width="8" height="753" rx="4" fill="white"/>
+</g>
+<g opacity="0.48" filter="url(#filter3_f_28911_9466)">
+<rect x="19" y="8" width="1" height="752" rx="0.5" fill="white"/>
+</g>
+<g opacity="0.81" filter="url(#filter4_f_28911_9466)">
+<rect x="6" y="4" width="4" height="760" rx="2" fill="white"/>
+</g>
+<g filter="url(#filter5_f_28911_9466)">
+<rect x="5" y="5" width="2" height="757" rx="1" fill="white"/>
+</g>
+<g opacity="0.45" filter="url(#filter6_f_28911_9466)">
+<rect x="4" y="552" width="6" height="210" rx="3" fill="white"/>
+</g>
+<g opacity="0.5" filter="url(#filter7_f_28911_9466)">
+<rect x="11" y="56" width="7" height="21" rx="3.5" fill="black"/>
+</g>
+<g opacity="0.45" filter="url(#filter8_f_28911_9466)">
+<rect x="4" y="375" width="6" height="130" rx="3" fill="white"/>
+</g>
+<g opacity="0.34" filter="url(#filter9_f_28911_9466)">
+<rect x="11" y="552" width="6" height="141" rx="3" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_f_28911_9466" x="7" y="2" width="12" height="763" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter1_f_28911_9466" x="10" y="5" width="6" height="757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter2_f_28911_9466" x="13" y="5" width="12" height="757" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter3_f_28911_9466" x="17" y="6" width="5" height="756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter4_f_28911_9466" x="2" y="0" width="12" height="768" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter5_f_28911_9466" x="4" y="4" width="4" height="759" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter6_f_28911_9466" x="0" y="548" width="14" height="218" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter7_f_28911_9466" x="7" y="52" width="15" height="29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter8_f_28911_9466" x="0" y="371" width="14" height="138" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<filter id="filter9_f_28911_9466" x="5" y="546" width="18" height="153" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_28911_9466"/>
+</filter>
+<linearGradient id="paint0_linear_28911_9466" x1="4" y1="383.5" x2="28" y2="383.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8C8C8"/>
+<stop offset="0.68" stop-color="#7B7B7B"/>
+<stop offset="0.94" stop-color="#8C8C8C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_28911_9466" x1="4" y1="383.5" x2="1" y2="383.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.23" stop-color="white"/>
+<stop offset="0.27" stop-color="#4A4A4A"/>
+<stop offset="0.525" stop-color="#7C7C7C"/>
+<stop offset="1" stop-color="#8F8F8F"/>
+</linearGradient>
+</defs>
+</svg>