<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>火花图谱 PDF 查看器 / Spark Atlas PDF Viewer</title>
<style>
body { margin: 0; padding: 0; background: #1a1a2e; font-family: -apple-system, sans-serif; }
#controls {
    position: fixed; top: 0; left: 0; right: 0;
    background: #16213e; padding: 10px 20px;
    display: flex; justify-content: center; align-items: center; gap: 15px;
    z-index: 1000; border-bottom: 2px solid #0f3460;
}
#controls button {
    padding: 8px 20px; background: #e94560; color: white;
    border: none; border-radius: 5px; cursor: pointer; font-size: 14px;
}
#controls button:hover { background: #ff6b6b; }
#controls span { color: #eaeaea; font-size: 16px; }
#pdf-container { padding-top: 60px; display: flex; justify-content: center; }
#pdf-canvas { 
    box-shadow: 0 0 20px rgba(0,0,0,0.5); 
    max-width: 95%; 
    background: white;
}
#loading {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #eaeaea; font-size: 24px; text-align: center;
}
</style>
</head>
<body>
<div id="loading">⏳ 正在加载PDF... / Loading PDF...</div>
<div id="controls" style="display:none;">
    <button onclick="prevPage()">⬅ 上一页</button>
    <span>页码 Page: <span id="page-num">1</span> / <span id="page-total">?</span></span>
    <button onclick="nextPage()">下一页 ➡</button>
    <button onclick="zoomIn()">放大 +</button>
    <button onclick="zoomOut()">缩小 -</button>
</div>
<div id="pdf-container">
    <canvas id="pdf-canvas"></canvas>
</div>
<script src="https://lib.baomitu.com/pdf.js/3.11.174/pdf.min.js"></script>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://lib.baomitu.com/pdf.js/3.11.174/pdf.worker.min.js';
var pdfDoc=null,pageNum=1,scale=1.2,pageRendering=false,pageNumPending=null;
var canvas=document.getElementById('pdf-canvas');
var ctx=canvas.getContext('2d');

function renderPage(num){
    pageRendering=true;
    pdfDoc.getPage(num).then(function(page){
        var viewport=page.getViewport({scale:scale});
        canvas.width=viewport.width;
        canvas.height=viewport.height;
        page.render({canvasContext:ctx,viewport:viewport}).promise.then(function(){
            pageRendering=false;
            document.getElementById('loading').style.display='none';
            document.getElementById('controls').style.display='flex';
            if(pageNumPending!==null){
                renderPage(pageNumPending);
                pageNumPending=null;
            }
        });
    });
    document.getElementById('page-num').textContent=num;
}

function queueRender(num){
    if(pageRendering){pageNumPending=num;}else{renderPage(num);}
}

function prevPage(){if(pageNum>1){pageNum--;queueRender(pageNum);}}
function nextPage(){if(pageNum<pdfDoc.numPages){pageNum++;queueRender(pageNum);}}
function zoomIn(){scale+=0.3;queueRender(pageNum);}
function zoomOut(){if(scale>0.5){scale-=0.3;queueRender(pageNum);}}

pdfjsLib.getDocument('https://www.songhai.cn/wp-content/uploads/2026/05/Spark_Atlas_Metal_Materials_v2.pdf').promise.then(function(pdf){
    pdfDoc=pdf;
    document.getElementById('page-total').textContent=pdf.numPages;
    renderPage(1);
}).catch(function(err){
    document.getElementById('loading').innerHTML='<p style="color:#e94560;">PDF加载失败 / PDF Loading Failed<br><a href="https://www.songhai.cn/wp-content/uploads/2026/05/Spark_Atlas_Metal_Materials_v2.pdf" style="color:#4ecdc4;">直接下载 / Direct Download</a></p>';
    console.error(err);
});
</script>
</body>
</html>