sequoia00
/
reader_pro


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410
							<!DOCTYPE html>
<html dir="ltr" mozdisallowselectionprint>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="google" content="notranslate">
    <title>PDF.js viewer</title>

    <!-- This snippet is used in production (included from viewer.html) -->
    <link rel="resource" type="application/l10n" href="locale/locale.json">
    <script src="../build/pdf.mjs" type="module"></script>
    <link rel="stylesheet" href="viewer.css">
    <script src="viewer.mjs" type="module"></script>

    <style>
        /* 模态窗口样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 10001;
        }

        .button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .button-secondary {
            background-color: #6c757d;
        }

        .button-success {
            background-color: #28a745;
        }

        .button-light {
            background-color: #ded520;
        }

        .button-danger {
            background-color: #dc3545;
        }
    </style>
</head>

<body tabindex="0">
    <div id="loading-indicator"
        style="display: none; position: fixed; top: 20px; left: 20px; background: rgba(0,0,0,0.7); color: #fff; padding: 10px; border-radius: 5px;">
        正在生成语音，请稍候...
    </div>

    <audio id="audio-player" controls
        style="position: fixed; width: 190px; height: 50px; bottom: 10px; left: 10px; z-index: 1000;"></audio>

    <button id="uploadButton" style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;">
        上传 PDF
    </button>

    <input type="file" id="pdfInput" accept="application/pdf" style="display: none;" />

    <div id="filenameModal" class="modal">
        <h3>输入保存的文件名</h3>
        <input type="text" id="customFileName" placeholder="不含扩展名"
            style="width: 100%; padding: 5px; margin-top: 10px;" />
        <div style="margin-top: 20px; text-align: right;">
            <button id="cancelUpload" class="button button-secondary">取消</button>
            <button id="confirmUpload" class="button button-success" style="margin-left: 10px;">确认</button>
        </div>
    </div>

    <div id="modalOverlay" class="modal-overlay"></div>

    <button id="openDirectoryButton" class="button" style="
    position: fixed;
    bottom: 70px;
    right: 20px;  
    z-index: 1000;">
        打开目录
    </button>

    <button id="select-all-text" class="button button-light" style="
    position: fixed;
    bottom: 170px;
    right: 20px;  
    z-index: 1000;
    color: black;">
        阅读整页
    </button>

    <button id="toggle-text-select" class="button button-success" style="
    position: fixed;
    bottom: 120px;
    right: 20px;  
    z-index: 1000;">
        文本选择
    </button>

    <div id="directoryModal" class="modal">
        <h2>已上传的 PDF 文档</h2>
        <ul id="pdfList" style="list-style-type: none; padding: 0;"></ul>
        <button id="closeDirectoryButton" class="button button-danger"
            style="margin-top: 20px; width: 100%;">关闭</button>
    </div>

    <div id="outerContainer">
        <div id="outerContainer">
            <div id="sidebarContainer">
                <div id="toolbarSidebar" class="toolbarHorizontalGroup">
                    <div id="toolbarSidebarLeft">
                        <div id="sidebarViewButtons" class="toolbarHorizontalGroup toggled" role="radiogroup">
                            <button id="viewThumbnail" class="toolbarButton toggled" type="button"
                                title="Show Thumbnails" tabindex="0" data-l10n-id="pdfjs-thumbs-button" role="radio"
                                aria-checked="true" aria-controls="thumbnailView">
                                <span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span>
                            </button>
                            <button id="viewOutline" class="toolbarButton" type="button"
                                title="Show Document Outline (double-click to expand/collapse all items)" tabindex="0"
                                data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false"
                                aria-controls="outlineView">
                                <span data-l10n-id="pdfjs-document-outline-button-label">Document Outline</span>
                            </button>
                            <button id="viewAttachments" class="toolbarButton" type="button" title="Show Attachments"
                                tabindex="0" data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false"
                                aria-controls="attachmentsView">
                                <span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
                            </button>
                            <button id="viewLayers" class="toolbarButton" type="button"
                                title="Show Layers (double-click to reset all layers to the default state)" tabindex="0"
                                data-l10n-id="pdfjs-layers-button" role="radio" aria-checked="false"
                                aria-controls="layersView">
                                <span data-l10n-id="pdfjs-layers-button-label">Layers</span>
                            </button>
                        </div>
                    </div>

                    <div id="toolbarSidebarRight">
                        <div id="outlineOptionsContainer" class="toolbarHorizontalGroup">
                            <div class="verticalToolbarSeparator"></div>

                            <button id="currentOutlineItem" class="toolbarButton" type="button" disabled="disabled"
                                title="Find Current Outline Item" tabindex="0"
                                data-l10n-id="pdfjs-current-outline-item-button">
                                <span data-l10n-id="pdfjs-current-outline-item-button-label">Current Outline Item</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div id="sidebarContent">
                    <div id="thumbnailView">
                    </div>
                    <div id="outlineView" class="hidden">
                    </div>
                    <div id="attachmentsView" class="hidden">
                    </div>
                    <div id="layersView" class="hidden">
                    </div>
                </div>
                <div id="sidebarResizer"></div>
            </div> <!-- sidebarContainer -->

            <div id="mainContainer">
                <div class="toolbar">
                    <div id="toolbarContainer">
                        <div id="toolbarViewer" class="toolbarHorizontalGroup">
                            <div id="toolbarViewerLeft" class="toolbarHorizontalGroup">
                                <button id="sidebarToggleButton" class="toolbarButton" type="button"
                                    title="Toggle Sidebar" tabindex="0" data-l10n-id="pdfjs-toggle-sidebar-button"
                                    aria-expanded="false" aria-haspopup="true" aria-controls="sidebarContainer">
                                    <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
                                </button>
                                <div class="toolbarButtonSpacer"></div>
                                <div class="toolbarButtonWithContainer">
                                    <button id="viewFindButton" class="toolbarButton" type="button"
                                        title="Find in Document" tabindex="0" data-l10n-id="pdfjs-findbar-button"
                                        aria-expanded="false" aria-controls="findbar">
                                        <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
                                    </button>
                                    <div class="hidden doorHanger toolbarHorizontalGroup" id="findbar">
                                        <div id="findInputContainer" class="toolbarHorizontalGroup">
                                            <span class="loadingInput end toolbarHorizontalGroup">
                                                <input id="findInput" class="toolbarField" title="Find"
                                                    placeholder="Find in document…" tabindex="0"
                                                    data-l10n-id="pdfjs-find-input" aria-invalid="false">
                                            </span>
                                            <div class="toolbarHorizontalGroup">
                                                <button id="findPreviousButton" class="toolbarButton" type="button"
                                                    title="Find the previous occurrence of the phrase" tabindex="0"
                                                    data-l10n-id="pdfjs-find-previous-button">
                                                    <span
                                                        data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
                                                </button>
                                                <div class="splitToolbarButtonSeparator"></div>
                                                <button id="findNextButton" class="toolbarButton" type="button"
                                                    title="Find the next occurrence of the phrase" tabindex="0"
                                                    data-l10n-id="pdfjs-find-next-button">
                                                    <span data-l10n-id="pdfjs-find-next-button-label">Next</span>
                                                </button>
                                            </div>
                                        </div>

                                        <div id="findbarOptionsOneContainer" class="toolbarHorizontalGroup">
                                            <div class="toggleButton toolbarLabel">
                                                <input type="checkbox" id="findHighlightAll" tabindex="0" />
                                                <label for="findHighlightAll"
                                                    data-l10n-id="pdfjs-find-highlight-checkbox">Highlight All</label>
                                            </div>
                                            <div class="toggleButton toolbarLabel">
                                                <input type="checkbox" id="findMatchCase" tabindex="0" />
                                                <label for="findMatchCase"
                                                    data-l10n-id="pdfjs-find-match-case-checkbox-label">Match
                                                    Case</label>
                                            </div>
                                        </div>
                                        <div id="findbarOptionsTwoContainer" class="toolbarHorizontalGroup">
                                            <div class="toggleButton toolbarLabel">
                                                <input type="checkbox" id="findMatchDiacritics" tabindex="0" />
                                                <label for="findMatchDiacritics"
                                                    data-l10n-id="pdfjs-find-match-diacritics-checkbox-label">Match
                                                    Diacritics</label>
                                            </div>
                                            <div class="toggleButton toolbarLabel">
                                                <input type="checkbox" id="findEntireWord" tabindex="0" />
                                                <label for="findEntireWord"
                                                    data-l10n-id="pdfjs-find-entire-word-checkbox-label">Whole
                                                    Words</label>
                                            </div>
                                        </div>

                                        <div id="findbarMessageContainer" class="toolbarHorizontalGroup"
                                            aria-live="polite">
                                            <span id="findResultsCount" class="toolbarLabel"></span>
                                            <span id="findMsg" class="toolbarLabel"></span>
                                        </div>
                                    </div> <!-- findbar -->
                                </div>
                                <div class="toolbarHorizontalGroup hiddenSmallView">
                                    <button class="toolbarButton" title="Previous Page" type="button" id="previous"
                                        tabindex="0" data-l10n-id="pdfjs-previous-button">
                                        <span data-l10n-id="pdfjs-previous-button-label">Previous</span>
                                    </button>
                                    <div class="splitToolbarButtonSeparator"></div>
                                    <button class="toolbarButton" type="button" title="Next Page" id="next" tabindex="0"
                                        data-l10n-id="pdfjs-next-button">
                                        <span data-l10n-id="pdfjs-next-button-label">Next</span>
                                    </button>
                                </div>
                                <div class="toolbarHorizontalGroup">
                                    <span class="loadingInput start toolbarHorizontalGroup">
                                        <input type="number" id="pageNumber" class="toolbarField" title="Page" value="1"
                                            min="1" tabindex="0" data-l10n-id="pdfjs-page-input" autocomplete="off">
                                    </span>
                                    <span id="numPages" class="toolbarLabel"></span>
                                </div>
                            </div>
                            <div id="toolbarViewerMiddle" class="toolbarHorizontalGroup">
                                <div class="toolbarHorizontalGroup">
                                    <button id="zoomOutButton" class="toolbarButton" type="button" title="Zoom Out"
                                        tabindex="0" data-l10n-id="pdfjs-zoom-out-button">
                                        <span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span>
                                    </button>
                                    <div class="splitToolbarButtonSeparator"></div>
                                    <button id="zoomInButton" class="toolbarButton" type="button" title="Zoom In"
                                        tabindex="0" data-l10n-id="pdfjs-zoom-in-button">
                                        <span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span>
                                    </button>
                                </div>
                                <span id="scaleSelectContainer" class="dropdownToolbarButton">
                                    <select id="scaleSelect" title="Zoom" tabindex="0" data-l10n-id="pdfjs-zoom-select">
                                        <option id="pageAutoOption" title="" value="auto" selected="selected"
                                            data-l10n-id="pdfjs-page-scale-auto">Automatic Zoom</option>
                                        <option id="pageActualOption" title="" value="page-actual"
                                            data-l10n-id="pdfjs-page-scale-actual">
                                            Actual Size</option>
                                        <option id="pageFitOption" title="" value="page-fit"
                                            data-l10n-id="pdfjs-page-scale-fit">Page Fit
                                        </option>
                                        <option id="pageWidthOption" title="" value="page-width"
                                            data-l10n-id="pdfjs-page-scale-width">Page
                                            Width</option>
                                        <option id="customScaleOption" title="" value="custom" disabled="disabled"
                                            hidden="true" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 0 }'>0%</option>
                                        <option title="" value="0.5" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 50 }'>
                                            50%</option>
                                        <option title="" value="0.75" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 75 }'>
                                            75%</option>
                                        <option title="" value="1" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 100 }'>
                                            100%</option>
                                        <option title="" value="1.25" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 125 }'>
                                            125%</option>
                                        <option title="" value="1.5" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 150 }'>
                                            150%</option>
                                        <option title="" value="2" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 200 }'>
                                            200%</option>
                                        <option title="" value="3" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 300 }'>
                                            300%</option>
                                        <option title="" value="4" data-l10n-id="pdfjs-page-scale-percent"
                                            data-l10n-args='{ "scale": 400 }'>
                                            400%</option>
                                    </select>
                                </span>
                            </div>
                            <div id="toolbarViewerRight" class="toolbarHorizontalGroup">
                                <div id="editorModeButtons" class="toolbarHorizontalGroup" role="radiogroup">
                                    <div id="editorHighlight" class="toolbarButtonWithContainer">
                                        <button id="editorHighlightButton" class="toolbarButton" type="button"
                                            disabled="disabled" title="Highlight" role="radio" aria-expanded="false"
                                            aria-haspopup="true" aria-controls="editorHighlightParamsToolbar"
                                            tabindex="0" data-l10n-id="pdfjs-editor-highlight-button">
                                            <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
                                        </button>
                                        <div class="editorParamsToolbar hidden doorHangerRight"
                                            id="editorHighlightParamsToolbar">
                                            <div id="highlightParamsToolbarContainer"
                                                class="editorParamsToolbarContainer">
                                                <div id="editorHighlightColorPicker" class="colorPicker">
                                                    <span id="highlightColorPickerLabel" class="editorParamsLabel"
                                                        data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight
                                                        color</span>
                                                </div>
                                                <div id="editorHighlightThickness">
                                                    <label for="editorFreeHighlightThickness" class="editorParamsLabel"
                                                        data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
                                                    <div class="thicknessPicker">
                                                        <input type="range" id="editorFreeHighlightThickness"
                                                            class="editorParamsSlider"
                                                            data-l10n-id="pdfjs-editor-free-highlight-thickness-title"
                                                            value="12" min="8" max="24" step="1" tabindex="0">
                                                    </div>
                                                </div>
                                                <div id="editorHighlightVisibility">
                                                    <div class="divider"></div>
                                                    <div class="toggler">
                                                        <label for="editorHighlightShowAll" class="editorParamsLabel"
                                                            data-l10n-id="pdfjs-editor-highlight-show-all-button-label">Show
                                                            all</label>
                                                        <button id="editorHighlightShowAll" class="toggle-button"
                                                            type="button"
                                                            data-l10n-id="pdfjs-editor-highlight-show-all-button"
                                                            aria-pressed="true" tabindex="0"></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="editorFreeText" class="toolbarButtonWithContainer">
                                        <button id="editorFreeTextButton" class="toolbarButton" type="button"
                                            disabled="disabled" title="Text" role="radio" aria-expanded="false"
                                            aria-haspopup="true" aria-controls="editorFreeTextParamsToolbar"
                                            tabindex="0" data-l10n-id="pdfjs-editor-free-text-button">
                                            <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
                                        </button>
                                        <div class="editorParamsToolbar hidden doorHangerRight"
                                            id="editorFreeTextParamsToolbar">
                                            <div class="editorParamsToolbarContainer">
                                                <div class="editorParamsSetter">
                                                    <label for="editorFreeTextColor" class="editorParamsLabel"
                                                        data-l10n-id="pdfjs-editor-free-text-color-input">Color</label>
                                                    <input type="color" id="editorFreeTextColor"
                                                        class="editorParamsColor" tabindex="0">
                                                </div>
                                                <div class="editorParamsSetter">
                                                    <label for="editorFreeTextFontSize" class="editorParamsLabel"
                                                        data-l10n-id="pdfjs-editor-free-text-size-input">Size</label>
                                                    <input type="range" id="editorFreeTextFontSize"
                                                        class="editorParamsSlider" value="10" min="5" max="100" step="1"
                                                        tabindex="0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="editorInk" class="toolbarButtonWithContainer">
                                        <button id="editorInkButton" class="toolbarButton" type="button"
                                            disabled="disabled" title="Draw" role="radio" aria-expanded="false"
                                            aria-haspopup="true" aria-controls="editorInkParamsToolbar" tabindex="0"
                                            data-l10n-id="pdfjs-editor-ink-button">
                                            <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
                                        </button>
                                        <div class="editorParamsToolbar hidden doorHangerRight"
                                            id="editorInkParamsToolbar">
                                            <div class="editorParamsToolbarContainer">
                                                <div class="editorParamsSetter">
                                                    <label for="editorInkColor" class="editorParamsLabel"
                                                        data-l10n-id="pdfjs-editor-ink-color-input">Color</label>
                                                    <input type="color" id="editorInkColor" class="editorParamsColor"
                                                        tabindex="0">
                                                </div>
                                                <div class="editorParamsSetter">
                                                    <label for="editorInkThickness" class="editorParamsLabel"
                                                        data-l10n-id="pdfjs-editor-ink-thickness-input">Thickness</label>
                                                    <input type="range" id="editorInkThickness"
                                                        class="editorParamsSlider" value="1" min="1" max="20" step="1"
                                                        tabindex="0">
                                                </div>
                                                <div class="editorParamsSetter">
                                                    <label for="editorInkOpacity" class="editorParamsLabel"
                                                        data-l10n-id="pdfjs-editor-ink-opacity-input">Opacity</label>
                                                    <input type="range" id="editorInkOpacity" class="editorParamsSlider"
                                                        value="100" min="1" max="100" step="1" tabindex="0">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="editorStamp" class="toolbarButtonWithContainer">
                                        <button id="editorStampButton" class="toolbarButton" type="button"
                                            disabled="disabled" title="Add or edit images" role="radio"
                                            aria-expanded="false" aria-haspopup="true"
                                            aria-controls="editorStampParamsToolbar" tabindex="0"
                                            data-l10n-id="pdfjs-editor-stamp-button">
                                            <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit
                                                images</span>
                                        </button>
                                        <div class="editorParamsToolbar hidden doorHangerRight menu"
                                            id="editorStampParamsToolbar">
                                            <div class="menuContainer">
                                                <button id="editorStampAddImage" class="toolbarButton labeled"
                                                    type="button" title="Add image" tabindex="0"
                                                    data-l10n-id="pdfjs-editor-stamp-add-image-button">
                                                    <span class="editorParamsLabel"
                                                        data-l10n-id="pdfjs-editor-stamp-add-image-button-label">Add
                                                        image</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="editorModeSeparator" class="verticalToolbarSeparator"></div>

                                <div class="toolbarHorizontalGroup hiddenMediumView">
                                    <button id="printButton" class="toolbarButton" type="button" title="Print"
                                        tabindex="0" data-l10n-id="pdfjs-print-button">
                                        <span data-l10n-id="pdfjs-print-button-label">Print</span>
                                    </button>

                                    <button id="downloadButton" class="toolbarButton" type="button" title="Save"
                                        tabindex="0" data-l10n-id="pdfjs-save-button">
                                        <span data-l10n-id="pdfjs-save-button-label">Save</span>
                                    </button>
                                </div>

                                <div class="verticalToolbarSeparator hiddenMediumView"></div>

                                <div id="secondaryToolbarToggle" class="toolbarButtonWithContainer">
                                    <button id="secondaryToolbarToggleButton" class="toolbarButton" type="button"
                                        title="Tools" tabindex="0" data-l10n-id="pdfjs-tools-button"
                                        aria-expanded="false" aria-haspopup="true" aria-controls="secondaryToolbar">
                                        <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
                                    </button>
                                    <div id="secondaryToolbar" class="hidden doorHangerRight menu">
                                        <div id="secondaryToolbarButtonContainer" class="menuContainer">
                                            <button id="secondaryOpenFile" class="toolbarButton labeled" type="button"
                                                title="Open File" tabindex="0" data-l10n-id="pdfjs-open-file-button">
                                                <span data-l10n-id="pdfjs-open-file-button-label">Open</span>
                                            </button>

                                            <div class="visibleMediumView">
                                                <button id="secondaryPrint" class="toolbarButton labeled" type="button"
                                                    title="Print" tabindex="0" data-l10n-id="pdfjs-print-button">
                                                    <span data-l10n-id="pdfjs-print-button-label">Print</span>
                                                </button>

                                                <button id="secondaryDownload" class="toolbarButton labeled"
                                                    type="button" title="Save" tabindex="0"
                                                    data-l10n-id="pdfjs-save-button">
                                                    <span data-l10n-id="pdfjs-save-button-label">Save</span>
                                                </button>

                                            </div>

                                            <div class="horizontalToolbarSeparator"></div>

                                            <button id="presentationMode" class="toolbarButton labeled" type="button"
                                                title="Switch to Presentation Mode" tabindex="0"
                                                data-l10n-id="pdfjs-presentation-mode-button">
                                                <span data-l10n-id="pdfjs-presentation-mode-button-label">Presentation
                                                    Mode</span>
                                            </button>

                                            <a href="#" id="viewBookmark" class="toolbarButton labeled"
                                                title="Current Page (View URL from Current Page)" tabindex="0"
                                                data-l10n-id="pdfjs-bookmark-button">
                                                <span data-l10n-id="pdfjs-bookmark-button-label">Current Page</span>
                                            </a>

                                            <div id="viewBookmarkSeparator" class="horizontalToolbarSeparator"></div>

                                            <button id="firstPage" class="toolbarButton labeled" type="button"
                                                title="Go to First Page" tabindex="0"
                                                data-l10n-id="pdfjs-first-page-button">
                                                <span data-l10n-id="pdfjs-first-page-button-label">Go to First
                                                    Page</span>
                                            </button>
                                            <button id="lastPage" class="toolbarButton labeled" type="button"
                                                title="Go to Last Page" tabindex="0"
                                                data-l10n-id="pdfjs-last-page-button">
                                                <span data-l10n-id="pdfjs-last-page-button-label">Go to Last Page</span>
                                            </button>

                                            <div class="horizontalToolbarSeparator"></div>

                                            <button id="pageRotateCw" class="toolbarButton labeled" type="button"
                                                title="Rotate Clockwise" tabindex="0"
                                                data-l10n-id="pdfjs-page-rotate-cw-button">
                                                <span data-l10n-id="pdfjs-page-rotate-cw-button-label">Rotate
                                                    Clockwise</span>
                                            </button>
                                            <button id="pageRotateCcw" class="toolbarButton labeled" type="button"
                                                title="Rotate Counterclockwise" tabindex="0"
                                                data-l10n-id="pdfjs-page-rotate-ccw-button">
                                                <span data-l10n-id="pdfjs-page-rotate-ccw-button-label">Rotate
                                                    Counterclockwise</span>
                                            </button>

                                            <div class="horizontalToolbarSeparator"></div>

                                            <div id="cursorToolButtons" role="radiogroup">
                                                <button id="cursorSelectTool" class="toolbarButton labeled toggled"
                                                    type="button" title="Enable Text Selection Tool" tabindex="0"
                                                    data-l10n-id="pdfjs-cursor-text-select-tool-button" role="radio"
                                                    aria-checked="true">
                                                    <span data-l10n-id="pdfjs-cursor-text-select-tool-button-label">Text
                                                        Selection Tool</span>
                                                </button>
                                                <button id="cursorHandTool" class="toolbarButton labeled" type="button"
                                                    title="Enable Hand Tool" tabindex="0"
                                                    data-l10n-id="pdfjs-cursor-hand-tool-button" role="radio"
                                                    aria-checked="false">
                                                    <span data-l10n-id="pdfjs-cursor-hand-tool-button-label">Hand
                                                        Tool</span>
                                                </button>
                                            </div>

                                            <div class="horizontalToolbarSeparator"></div>

                                            <div id="scrollModeButtons" role="radiogroup">
                                                <button id="scrollPage" class="toolbarButton labeled" type="button"
                                                    title="Use Page Scrolling" tabindex="0"
                                                    data-l10n-id="pdfjs-scroll-page-button" role="radio"
                                                    aria-checked="false">
                                                    <span data-l10n-id="pdfjs-scroll-page-button-label">Page
                                                        Scrolling</span>
                                                </button>
                                                <button id="scrollVertical" class="toolbarButton labeled toggled"
                                                    type="button" title="Use Vertical Scrolling" tabindex="0"
                                                    data-l10n-id="pdfjs-scroll-vertical-button" role="radio"
                                                    aria-checked="true">
                                                    <span data-l10n-id="pdfjs-scroll-vertical-button-label">Vertical
                                                        Scrolling</span>
                                                </button>
                                                <button id="scrollHorizontal" class="toolbarButton labeled"
                                                    type="button" title="Use Horizontal Scrolling" tabindex="0"
                                                    data-l10n-id="pdfjs-scroll-horizontal-button" role="radio"
                                                    aria-checked="false">
                                                    <span data-l10n-id="pdfjs-scroll-horizontal-button-label">Horizontal
                                                        Scrolling</span>
                                                </button>
                                                <button id="scrollWrapped" class="toolbarButton labeled" type="button"
                                                    title="Use Wrapped Scrolling" tabindex="0"
                                                    data-l10n-id="pdfjs-scroll-wrapped-button" role="radio"
                                                    aria-checked="false">
                                                    <span data-l10n-id="pdfjs-scroll-wrapped-button-label">Wrapped
                                                        Scrolling</span>
                                                </button>
                                            </div>

                                            <div class="horizontalToolbarSeparator"></div>

                                            <div id="spreadModeButtons" role="radiogroup">
                                                <button id="spreadNone" class="toolbarButton labeled toggled"
                                                    type="button" title="Do not join page spreads" tabindex="0"
                                                    data-l10n-id="pdfjs-spread-none-button" role="radio"
                                                    aria-checked="true">
                                                    <span data-l10n-id="pdfjs-spread-none-button-label">No
                                                        Spreads</span>
                                                </button>
                                                <button id="spreadOdd" class="toolbarButton labeled" type="button"
                                                    title="Join page spreads starting with odd-numbered pages"
                                                    tabindex="0" data-l10n-id="pdfjs-spread-odd-button" role="radio"
                                                    aria-checked="false">
                                                    <span data-l10n-id="pdfjs-spread-odd-button-label">Odd
                                                        Spreads</span>
                                                </button>
                                                <button id="spreadEven" class="toolbarButton labeled" type="button"
                                                    title="Join page spreads starting with even-numbered pages"
                                                    tabindex="0" data-l10n-id="pdfjs-spread-even-button" role="radio"
                                                    aria-checked="false">
                                                    <span data-l10n-id="pdfjs-spread-even-button-label">Even
                                                        Spreads</span>
                                                </button>
                                            </div>

                                            <div id="imageAltTextSettingsSeparator"
                                                class="horizontalToolbarSeparator hidden"></div>
                                            <button id="imageAltTextSettings" type="button"
                                                class="toolbarButton labeled hidden" title="Image alt text settings"
                                                tabindex="0" data-l10n-id="pdfjs-image-alt-text-settings-button"
                                                aria-controls="altTextSettingsDialog">
                                                <span data-l10n-id="pdfjs-image-alt-text-settings-button-label">Image
                                                    alt text settings</span>
                                            </button>

                                            <div class="horizontalToolbarSeparator"></div>

                                            <button id="documentProperties" class="toolbarButton labeled" type="button"
                                                title="Document Properties…" tabindex="0"
                                                data-l10n-id="pdfjs-document-properties-button"
                                                aria-controls="documentPropertiesDialog">
                                                <span data-l10n-id="pdfjs-document-properties-button-label">Document
                                                    Properties…</span>
                                            </button>
                                        </div>
                                    </div> <!-- secondaryToolbar -->
                                </div>
                            </div>
                        </div>
                        <div id="loadingBar">
                            <div class="progress">
                                <div class="glimmer">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="viewerContainer" tabindex="0">
                    <div id="viewer" class="pdfViewer"></div>
                </div>
            </div> <!-- mainContainer -->

            <div id="dialogContainer">
                <dialog id="passwordDialog">
                    <div class="row">
                        <label for="password" id="passwordText" data-l10n-id="pdfjs-password-label">Enter the password
                            to open this
                            PDF file:</label>
                    </div>
                    <div class="row">
                        <input type="password" id="password" class="toolbarField">
                    </div>
                    <div class="buttonRow">
                        <button id="passwordCancel" class="dialogButton" type="button"><span
                                data-l10n-id="pdfjs-password-cancel-button">Cancel</span></button>
                        <button id="passwordSubmit" class="dialogButton" type="button"><span
                                data-l10n-id="pdfjs-password-ok-button">OK</span></button>
                    </div>
                </dialog>
                <dialog id="documentPropertiesDialog">
                    <div class="row">
                        <span id="fileNameLabel" data-l10n-id="pdfjs-document-properties-file-name">File name:</span>
                        <p id="fileNameField" aria-labelledby="fileNameLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="fileSizeLabel" data-l10n-id="pdfjs-document-properties-file-size">File size:</span>
                        <p id="fileSizeField" aria-labelledby="fileSizeLabel">-</p>
                    </div>
                    <div class="separator"></div>
                    <div class="row">
                        <span id="titleLabel" data-l10n-id="pdfjs-document-properties-title">Title:</span>
                        <p id="titleField" aria-labelledby="titleLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="authorLabel" data-l10n-id="pdfjs-document-properties-author">Author:</span>
                        <p id="authorField" aria-labelledby="authorLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="subjectLabel" data-l10n-id="pdfjs-document-properties-subject">Subject:</span>
                        <p id="subjectField" aria-labelledby="subjectLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="keywordsLabel" data-l10n-id="pdfjs-document-properties-keywords">Keywords:</span>
                        <p id="keywordsField" aria-labelledby="keywordsLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="creationDateLabel" data-l10n-id="pdfjs-document-properties-creation-date">Creation
                            Date:</span>
                        <p id="creationDateField" aria-labelledby="creationDateLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="modificationDateLabel"
                            data-l10n-id="pdfjs-document-properties-modification-date">Modification
                            Date:</span>
                        <p id="modificationDateField" aria-labelledby="modificationDateLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="creatorLabel" data-l10n-id="pdfjs-document-properties-creator">Creator:</span>
                        <p id="creatorField" aria-labelledby="creatorLabel">-</p>
                    </div>
                    <div class="separator"></div>
                    <div class="row">
                        <span id="producerLabel" data-l10n-id="pdfjs-document-properties-producer">PDF Producer:</span>
                        <p id="producerField" aria-labelledby="producerLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="versionLabel" data-l10n-id="pdfjs-document-properties-version">PDF Version:</span>
                        <p id="versionField" aria-labelledby="versionLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="pageCountLabel" data-l10n-id="pdfjs-document-properties-page-count">Page Count:</span>
                        <p id="pageCountField" aria-labelledby="pageCountLabel">-</p>
                    </div>
                    <div class="row">
                        <span id="pageSizeLabel" data-l10n-id="pdfjs-document-properties-page-size">Page Size:</span>
                        <p id="pageSizeField" aria-labelledby="pageSizeLabel">-</p>
                    </div>
                    <div class="separator"></div>
                    <div class="row">
                        <span id="linearizedLabel" data-l10n-id="pdfjs-document-properties-linearized">Fast Web
                            View:</span>
                        <p id="linearizedField" aria-labelledby="linearizedLabel">-</p>
                    </div>
                    <div class="buttonRow">
                        <button id="documentPropertiesClose" class="dialogButton" type="button"><span
                                data-l10n-id="pdfjs-document-properties-close-button">Close</span></button>
                    </div>
                </dialog>
                <dialog class="dialog altText" id="altTextDialog" aria-labelledby="dialogLabel"
                    aria-describedby="dialogDescription">
                    <div id="altTextContainer" class="mainContainer">
                        <div id="overallDescription">
                            <span id="dialogLabel" data-l10n-id="pdfjs-editor-alt-text-dialog-label"
                                class="title">Choose an
                                option</span>
                            <span id="dialogDescription" data-l10n-id="pdfjs-editor-alt-text-dialog-description">
                                Alt text (alternative text) helps when people can’t see the image or when it doesn’t
                                load.
                            </span>
                        </div>
                        <div id="addDescription">
                            <div class="radio">
                                <div class="radioButton">
                                    <input type="radio" id="descriptionButton" name="altTextOption" tabindex="0"
                                        aria-describedby="descriptionAreaLabel" checked>
                                    <label for="descriptionButton"
                                        data-l10n-id="pdfjs-editor-alt-text-add-description-label">Add a
                                        description</label>
                                </div>
                                <div class="radioLabel">
                                    <span id="descriptionAreaLabel"
                                        data-l10n-id="pdfjs-editor-alt-text-add-description-description">
                                        Aim for 1-2 sentences that describe the subject, setting, or actions.
                                    </span>
                                </div>
                            </div>
                            <div class="descriptionArea">
                                <textarea id="descriptionTextarea"
                                    placeholder="For example, “A young man sits down at a table to eat a meal”"
                                    aria-labelledby="descriptionAreaLabel" data-l10n-id="pdfjs-editor-alt-text-textarea"
                                    tabindex="0"></textarea>
                            </div>
                        </div>
                        <div id="markAsDecorative">
                            <div class="radio">
                                <div class="radioButton">
                                    <input type="radio" id="decorativeButton" name="altTextOption"
                                        aria-describedby="decorativeLabel">
                                    <label for="decorativeButton"
                                        data-l10n-id="pdfjs-editor-alt-text-mark-decorative-label">Mark as
                                        decorative</label>
                                </div>
                                <div class="radioLabel">
                                    <span id="decorativeLabel"
                                        data-l10n-id="pdfjs-editor-alt-text-mark-decorative-description">
                                        This is used for ornamental images, like borders or watermarks.
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div id="buttons">
                            <button id="altTextCancel" class="secondaryButton" type="button" tabindex="0"><span
                                    data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
                            <button id="altTextSave" class="primaryButton" type="button" tabindex="0"><span
                                    data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
                        </div>
                    </div>
                </dialog>
                <dialog class="dialog newAltText" id="newAltTextDialog" aria-labelledby="newAltTextTitle"
                    aria-describedby="newAltTextDescription" tabindex="0">
                    <div id="newAltTextContainer" class="mainContainer">
                        <div class="title">
                            <span id="newAltTextTitle" data-l10n-id="pdfjs-editor-new-alt-text-dialog-edit-label"
                                role="sectionhead" tabindex="0">Edit alt text (image description)</span>
                        </div>
                        <div id="mainContent">
                            <div id="descriptionAndSettings">
                                <div id="descriptionInstruction">
                                    <div id="newAltTextDescriptionContainer">
                                        <div class="altTextSpinner" role="status" aria-live="polite"></div>
                                        <textarea id="newAltTextDescriptionTextarea"
                                            placeholder="Write your description here…"
                                            aria-labelledby="descriptionAreaLabel"
                                            data-l10n-id="pdfjs-editor-new-alt-text-textarea" tabindex="0"></textarea>
                                    </div>
                                    <span id="newAltTextDescription" role="note"
                                        data-l10n-id="pdfjs-editor-new-alt-text-description">Short
                                        description for people who can’t see the image or when the image doesn’t
                                        load.</span>
                                    <div id="newAltTextDisclaimer" role="note">
                                        <div><span data-l10n-id="pdfjs-editor-new-alt-text-disclaimer1">This alt text
                                                was created
                                                automatically and may be inaccurate.</span> <a
                                                href="https://support.mozilla.org/en-US/kb/pdf-alt-text" target="_blank"
                                                rel="noopener noreferrer" id="newAltTextLearnMore"
                                                data-l10n-id="pdfjs-editor-new-alt-text-disclaimer-learn-more-url"
                                                tabindex="0">Learn more</a></div>
                                    </div>
                                </div>
                                <div id="newAltTextCreateAutomatically" class="toggler">
                                    <button id="newAltTextCreateAutomaticallyButton" class="toggle-button" type="button"
                                        aria-pressed="true" tabindex="0"></button>
                                    <label for="newAltTextCreateAutomaticallyButton" class="togglerLabel"
                                        data-l10n-id="pdfjs-editor-new-alt-text-create-automatically-button-label">Create
                                        alt text
                                        automatically</label>
                                </div>
                                <div id="newAltTextDownloadModel" class="hidden">
                                    <span id="newAltTextDownloadModelDescription"
                                        data-l10n-id="pdfjs-editor-new-alt-text-ai-model-downloading-progress"
                                        aria-valuemin="0"
                                        data-l10n-args='{ "totalSize": 0, "downloadedSize": 0 }'>Downloading alt text AI
                                        model (0 of 0
                                        MB)</span>
                                </div>
                            </div>
                            <div id="newAltTextImagePreview"></div>
                        </div>
                        <div id="newAltTextError" class="messageBar">
                            <div>
                                <div>
                                    <span class="title" data-l10n-id="pdfjs-editor-new-alt-text-error-title">Couldn’t
                                        create alt text
                                        automatically</span>
                                    <span class="description"
                                        data-l10n-id="pdfjs-editor-new-alt-text-error-description">Please write your
                                        own alt text or try again later.</span>
                                </div>
                                <button id="newAltTextCloseButton" class="closeButton" type="button" tabindex="0"
                                    title="Close"><span
                                        data-l10n-id="pdfjs-editor-new-alt-text-error-close-button">Close</span></button>
                            </div>
                        </div>
                        <div id="newAltTextButtons" class="dialogButtonsGroup">
                            <button id="newAltTextCancel" type="button" class="secondaryButton hidden"
                                tabindex="0"><span
                                    data-l10n-id="pdfjs-editor-alt-text-cancel-button">Cancel</span></button>
                            <button id="newAltTextNotNow" type="button" class="secondaryButton" tabindex="0"><span
                                    data-l10n-id="pdfjs-editor-new-alt-text-not-now-button">Not now</span></button>
                            <button id="newAltTextSave" type="button" class="primaryButton" tabindex="0"><span
                                    data-l10n-id="pdfjs-editor-alt-text-save-button">Save</span></button>
                        </div>
                    </div>
                </dialog>

                <dialog class="dialog" id="altTextSettingsDialog" aria-labelledby="altTextSettingsTitle">
                    <div id="altTextSettingsContainer" class="mainContainer">
                        <div class="title">
                            <span id="altTextSettingsTitle" data-l10n-id="pdfjs-editor-alt-text-settings-dialog-label"
                                role="sectionhead" tabindex="0" class="title">Image alt text settings</span>
                        </div>
                        <div id="automaticAltText">
                            <span data-l10n-id="pdfjs-editor-alt-text-settings-automatic-title">Automatic alt
                                text</span>
                            <div id="automaticSettings">
                                <div id="createModelSetting">
                                    <div class="toggler">
                                        <button id="createModelButton" type="button" class="toggle-button"
                                            aria-pressed="true" tabindex="0"></button>
                                        <label for="createModelButton" class="togglerLabel"
                                            data-l10n-id="pdfjs-editor-alt-text-settings-create-model-button-label">Create
                                            alt text
                                            automatically</label>
                                    </div>
                                    <div id="createModelDescription" class="description">
                                        <span
                                            data-l10n-id="pdfjs-editor-alt-text-settings-create-model-description">Suggests
                                            descriptions to
                                            help people who can’t see the image or when the image doesn’t load.</span>
                                        <a href="https://support.mozilla.org/en-US/kb/pdf-alt-text" target="_blank"
                                            rel="noopener noreferrer" id="altTextSettingsLearnMore"
                                            data-l10n-id="pdfjs-editor-new-alt-text-disclaimer-learn-more-url"
                                            tabindex="0">Learn more</a>
                                    </div>
                                </div>
                                <div id="aiModelSettings">
                                    <div>
                                        <span data-l10n-id="pdfjs-editor-alt-text-settings-download-model-label"
                                            data-l10n-args='{ "totalSize": 180 }'>Alt text AI model (180MB)</span>
                                        <div id="aiModelDescription" class="description">
                                            <span
                                                data-l10n-id="pdfjs-editor-alt-text-settings-ai-model-description">Runs
                                                locally on your device
                                                so your data stays private. Required for automatic alt text.</span>
                                        </div>
                                    </div>
                                    <button id="deleteModelButton" type="button" class="secondaryButton"
                                        tabindex="0"><span
                                            data-l10n-id="pdfjs-editor-alt-text-settings-delete-model-button">Delete</span></button>
                                    <button id="downloadModelButton" type="button" class="secondaryButton"
                                        tabindex="0"><span
                                            data-l10n-id="pdfjs-editor-alt-text-settings-download-model-button">Download</span></button>
                                </div>
                            </div>
                        </div>
                        <div class="dialogSeparator"></div>
                        <div id="altTextEditor">
                            <span data-l10n-id="pdfjs-editor-alt-text-settings-editor-title">Alt text editor</span>
                            <div id="showAltTextEditor">
                                <div class="toggler">
                                    <button id="showAltTextDialogButton" type="button" class="toggle-button"
                                        aria-pressed="true" tabindex="0"></button>
                                    <label for="showAltTextDialogButton" class="togglerLabel"
                                        data-l10n-id="pdfjs-editor-alt-text-settings-show-dialog-button-label">Show alt
                                        text editor right away
                                        when adding an image</label>
                                </div>
                                <div id="showAltTextDialogDescription" class="description">
                                    <span data-l10n-id="pdfjs-editor-alt-text-settings-show-dialog-description">Helps
                                        you make sure all your
                                        images have alt text.</span>
                                </div>
                            </div>
                        </div>
                        <div id="buttons" class="dialogButtonsGroup">
                            <button id="altTextSettingsCloseButton" type="button" class="primaryButton"
                                tabindex="0"><span
                                    data-l10n-id="pdfjs-editor-alt-text-settings-close-button">Close</span></button>
                        </div>
                    </div>
                </dialog>
                <dialog id="printServiceDialog" style="min-width: 200px;">
                    <div class="row">
                        <span data-l10n-id="pdfjs-print-progress-message">Preparing document for printing…</span>
                    </div>
                    <div class="row">
                        <progress value="0" max="100"></progress>
                        <span data-l10n-id="pdfjs-print-progress-percent" data-l10n-args='{ "progress": 0 }'
                            class="relative-progress">0%</span>
                    </div>
                    <div class="buttonRow">
                        <button id="printCancel" class="dialogButton" type="button"><span
                                data-l10n-id="pdfjs-print-progress-close-button">Cancel</span></button>
                    </div>
                </dialog>
            </div> <!-- dialogContainer -->

        </div> <!-- outerContainer -->

        <div id="printContainer"></div>

        <script>
            const uploadButton = document.getElementById('uploadButton');
            const pdfInput = document.getElementById('pdfInput');
            const filenameModal = document.getElementById('filenameModal');
            const modalOverlay = document.getElementById('modalOverlay');
            const confirmUploadButton = document.getElementById('confirmUpload');
            const cancelUploadButton = document.getElementById('cancelUpload');
            const customFileNameInput = document.getElementById('customFileName');
            const openDirectoryButton = document.getElementById('openDirectoryButton');
            const directoryModal = document.getElementById('directoryModal');
            const closeDirectoryButton = document.getElementById('closeDirectoryButton');
            const pdfList = document.getElementById('pdfList');

            let selectedFile = null;

            // 上传按钮点击事件
            uploadButton.addEventListener('click', function () {
                pdfInput.click();
            });

            // 文件选择事件
            pdfInput.addEventListener('change', function (event) {
                const file = event.target.files[0];
                if (file && file.type === 'application/pdf') {
                    selectedFile = file;
                    modalOverlay.style.display = 'block';
                    filenameModal.style.display = 'block';
                    customFileNameInput.value = "";
                    customFileNameInput.focus();
                } else {
                    alert('请选择一个 PDF 文件');
                }
            });

            // 取消上传
            cancelUploadButton.addEventListener('click', function () {
                filenameModal.style.display = 'none';
                modalOverlay.style.display = 'none';
                pdfInput.value = "";
                selectedFile = null;
            });

            // 确认上传
            confirmUploadButton.addEventListener('click', function () {
                const customFileName = customFileNameInput.value.trim();
                if (customFileName === "") {
                    alert('请输入保存的文件名');
                    customFileNameInput.focus();
                    return;
                }

                const invalidChars = /[\\/:"*?<>|]+/;
                if (invalidChars.test(customFileName)) {
                    alert('文件名包含非法字符：\\ / : " * ? < > |');
                    customFileNameInput.focus();
                    return;
                }

                if (!selectedFile) {
                    alert('没有选择文件');
                    return;
                }

                const formData = new FormData();
                formData.append('file', selectedFile);
                formData.append('custom_name', customFileName);

                fetch('http://117.50.195.224:8005/upload-pdf', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const uploadedFilePath = data.file_path;
                            const redirectUrl = `viewer.html?file=${encodeURIComponent(uploadedFilePath)}`;
                            window.location.href = redirectUrl;
                        } else {
                            alert('上传失败: ' + data.error);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('上传过程中发生错误');
                    })
                    .finally(() => {
                        filenameModal.style.display = 'none';
                        modalOverlay.style.display = 'none';
                        pdfInput.value = "";
                        selectedFile = null;
                    });
            });

            // 打开目录
            openDirectoryButton.addEventListener('click', function () {
                modalOverlay.style.display = 'block';
                directoryModal.style.display = 'block';
                pdfList.innerHTML = '';

                fetch('http://117.50.195.224:8005/list-pdfs')
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const files = data.files;
                            if (files.length === 0) {
                                const listItem = document.createElement('li');
                                listItem.textContent = '没有已上传的 PDF 文档。';
                                pdfList.appendChild(listItem);
                            } else {
                                files.forEach(file => {
                                    const listItem = document.createElement('li');
                                    listItem.style.marginBottom = '10px';
                                    const link = document.createElement('a');
                                    link.href = `viewer.html?file=${file.url}`;
                                    link.textContent = file.name;
                                    link.style.textDecoration = 'none';
                                    link.style.color = '#007bff';
                                    link.addEventListener('click', function (event) {
                                        event.preventDefault();
                                        window.location.href = link.getAttribute('href');
                                    });
                                    listItem.appendChild(link);
                                    pdfList.appendChild(listItem);
                                });
                            }
                        } else {
                            alert('无法获取文件列表: ' + data.error);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('获取文件列表时发生错误');
                    });
            });

            // 关闭目录
            closeDirectoryButton.addEventListener('click', function () {
                directoryModal.style.display = 'none';
                modalOverlay.style.display = 'none';
            });

            // 点击遮罩关闭弹出层
            modalOverlay.addEventListener('click', function () {
                if (filenameModal.style.display === 'block') {
                    filenameModal.style.display = 'none';
                    uploadButton.focus();
                }
                if (directoryModal.style.display === 'block') {
                    directoryModal.style.display = 'none';
                }
                modalOverlay.style.display = 'none';
            });

            // 语音控制
            let isListening = false;
            let audioContext = null;

            // 初始化 AudioContext
            function initAudioContext() {
                if (!audioContext) {
                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
                }
            }

            // 获取播放权限
            async function getPlayPermission() {
                return new Promise((resolve) => {
                    // const handleUserInteraction = () => {
                    //     document.removeEventListener('click', handleUserInteraction);
                    //     document.removeEventListener('keydown', handleUserInteraction);
                    //     resolve();
                    // };

                    const dummyAudio = new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU');
                    dummyAudio.play()
                        .then(() => {
                            dummyAudio.pause();
                            dummyAudio.remove();
                            resolve();
                        })
                        .catch((error) => {
                            console.warn('Audio play permission denied:', error);
                            // 静默处理权限错误，假设后续交互会自动触发权限
                            resolve(); // 直接解析以继续流程
                            // document.getElementById('loading-indicator').textContent = '请点击任意位置以启用音频...';
                            // document.getElementById('loading-indicator').style.display = 'block';
                            // document.addEventListener('click', handleUserInteraction);
                            // document.addEventListener('keydown', handleUserInteraction);
                        });
                });
            }

            // 切换文本选择监听
            document.getElementById('toggle-text-select').addEventListener('click', () => {
                isListening = !isListening;
                const button = document.getElementById('toggle-text-select');
                button.textContent = isListening ? "关闭监听" : "开启监听";
                button.classList.toggle('button-danger', isListening);
            });

            // 播放音频队列
            async function playAudioSequentially(queue, signal) {
                const audioElements = new Map();
                const loadingIndicator = document.getElementById('loading-indicator');
                try {
                    while (true) {
                        if (signal.aborted) break;

                        const chunk = queue.shift();
                        if (!chunk) {
                            if (queue.includes(null)) break;
                            await new Promise(resolve => setTimeout(resolve, 100));
                            continue;
                        }

                        if (audioContext.state !== 'running') {
                            await audioContext.resume();
                        }

                        const audio = new Audio(chunk.audio);
                        audioElements.set(chunk.index, audio);

                        try {
                            loadingIndicator.textContent = `正在播放第 ${chunk.index + 1} 句`;
                            loadingIndicator.style.display = 'block';
                            await playAudio(audio);
                        } catch (e) {
                            console.warn(`播放失败: ${e.message}`);
                        } finally {
                            audioElements.delete(chunk.index);
                        }
                    }
                    loadingIndicator.textContent = '播放完成';
                    setTimeout(() => {
                        loadingIndicator.style.display = 'none';
                    }, 1000);
                } catch (error) {
                    console.error(error);
                    loadingIndicator.textContent = `错误: ${error.message}`;
                    loadingIndicator.style.display = 'block';
                } finally {
                    audioElements.forEach(audio => {
                        audio.pause();
                        audio.remove();
                    });
                }
            }

            // 播放单个音频
            function playAudio(audio) {
                return new Promise((resolve, reject) => {
                    audio.play()
                        .then(() => {
                            audio.onended = resolve;
                            audio.onerror = reject;
                        })
                        .catch(reject);
                });
            }

            // 解析流数据
            function parseStreamData(line) {
                try {
                    return JSON.parse(line);
                } catch (e) {
                    console.error('解析错误:', e, '原始数据:', line);
                    return { error: e.message };
                }
            }

            // 创建音频片段
            function createAudioChunk(data) {
                return {
                    ...data,
                    audio: data.audio.startsWith('data:') ?
                        data.audio :
                        `data:audio/wav;base64,${data.audio}`,
                    timestamp: Date.now()
                };
            }

            // 按顺序插入队列
            function insertInOrder(queue, chunk) {
                let index = 0;
                while (index < queue.length && queue[index].index < chunk.index) {
                    index++;
                }
                queue.splice(index, 0, chunk);
            }

            // 开始转换
            async function startConversion(sentences) {
                const loadingIndicator = document.getElementById('loading-indicator');
                try {
                    const fullText = sentences.map(s => s.text).join(' ');
                    const response = await fetch('http://117.50.195.224:8028/generate', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ text: fullText, voice: "af_heart", speed: 1.0 })
                    });

                    if (!response.ok) throw new Error(`服务器错误: ${response.status}`);

                    const reader = response.body.getReader();
                    const decoder = new TextDecoder();
                    let buffer = '';
                    const audioQueue = [];
                    let expectedIndex = 0;

                    const playController = new AbortController();
                    const playPromise = playAudioSequentially(audioQueue, playController.signal);

                    while (true) {
                        const { done, value } = await reader.read();
                        if (done) break;

                        buffer += decoder.decode(value, { stream: true });
                        const lines = buffer.split('\n');
                        buffer = lines.pop() || '';

                        for (const line of lines) {
                            if (!line.trim()) continue;
                            const data = parseStreamData(line);
                            if (data.audio) {
                                const sentence = sentences[data.index];
                                insertInOrder(audioQueue, createAudioChunk({
                                    ...data,
                                    xpath: sentence?.xpath
                                }));
                            }
                        }
                    }

                    while (buffer.trim()) {
                        const data = parseStreamData(buffer.trim());
                        if (data.audio) {
                            audioQueue.push(createAudioChunk(data));
                        }
                        buffer = '';
                    }

                    audioQueue.push(null);
                    await playPromise;

                } catch (error) {
                    console.error(error);
                    loadingIndicator.textContent = `错误: ${error.message}`;
                    loadingIndicator.style.display = 'block';
                }
            }

            // 监听文本选择
            document.addEventListener('DOMContentLoaded', () => {
                const loadingIndicator = document.getElementById('loading-indicator');

                document.addEventListener('mouseup', async () => {
                    if (!isListening) return;

                    const selection = window.getSelection();
                    const selectedText = selection.toString().trim();
                    if (selectedText.length === 0) return;

                    selection.removeAllRanges();

                    try {
                        initAudioContext();
                        await getPlayPermission();
                        loadingIndicator.textContent = '正在转换选中文本...';
                        loadingIndicator.style.display = 'block';

                        const sentences = selectedText.split(/[.!?]+/).filter(s => s.trim()).map((text, index) => ({
                            text: text.trim(),
                            xpath: null,
                            index: index
                        }));

                        await startConversion(sentences);
                    } catch (error) {
                        console.error(error);
                        loadingIndicator.textContent = `错误: ${error.message}`;
                        loadingIndicator.style.display = 'block';
                    }
                });
            });

            // 阅读整页
            document.getElementById('select-all-text').addEventListener('click', async function () {
                const { pdfViewer } = PDFViewerApplication;
                const currentPage = pdfViewer.currentPageNumber;
                const loadingIndicator = document.getElementById('loading-indicator');

                try {
                    initAudioContext();
                    await getPlayPermission();
                    loadingIndicator.textContent = '正在提取页面文本...';
                    loadingIndicator.style.display = 'block';

                    PDFViewerApplication.pdfDocument.getPage(currentPage).then(function (page) {
                        page.getTextContent().then(async function (textContent) {
                            const fullText = textContent.items.map(item => item.str).join(' ');
                            const sentences = fullText.split(/[.!?]+/).filter(s => s.trim()).map((text, index) => ({
                                text: text.trim(),
                                xpath: null,
                                index: index
                            }));

                            await startConversion(sentences);
                        });
                    });
                } catch (error) {
                    console.error(error);
                    loadingIndicator.textContent = `错误: ${error.message}`;
                    loadingIndicator.style.display = 'block';
                }
            });
        </script>
</body>

</html>