A framework-agnostic, universal document renderer with optional chunked loading polyrender.wisp.place/
at main 88 lines 2.5 kB view raw
1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>PolyRender — Basic Example</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 box-sizing: border-box; 12 } 13 14 body { 15 font-family: 16 system-ui, 17 -apple-system, 18 sans-serif; 19 background: #0f0f0f; 20 color: #e0e0e0; 21 display: flex; 22 flex-direction: column; 23 align-items: center; 24 min-height: 100vh; 25 padding: 2rem; 26 } 27 28 h1 { 29 font-size: 1.5rem; 30 font-weight: 600; 31 margin-bottom: 0.5rem; 32 color: #fff; 33 } 34 35 .subtitle { 36 font-size: 0.875rem; 37 color: #888; 38 margin-bottom: 1.5rem; 39 } 40 41 #viewer { 42 width: 100%; 43 max-width: 900px; 44 height: 80vh; 45 border-radius: 8px; 46 overflow: hidden; 47 border: 1px solid #2a2a2a; 48 } 49 50 .controls { 51 margin-top: 1rem; 52 display: flex; 53 gap: 0.5rem; 54 } 55 56 .controls label { 57 font-size: 0.875rem; 58 color: #aaa; 59 display: flex; 60 align-items: center; 61 gap: 0.5rem; 62 } 63 64 .controls input[type="file"] { 65 font-size: 0.8rem; 66 color: #ccc; 67 } 68 </style> 69 </head> 70 <body> 71 <h1>PolyRender — Basic Example</h1> 72 <p class="subtitle"> 73 Drop-in document viewer. Pick a file below to view it. 74 </p> 75 <div class="controls"> 76 <label> 77 Open a document: 78 <input 79 type="file" 80 id="file-input" 81 accept=".pdf,.epub,.docx,.odt,.ods,.csv,.tsv,.txt,.md,.json,.js,.ts,.py,.rs,.go,.java,.c,.cpp,.html,.xml,.svg,.cbz,.cbr,.cb7,.cbt" 82 /> 83 </label> 84 </div> 85 <div id="viewer"></div> 86 <script type="module" src="/src/main.ts"></script> 87 </body> 88</html>