Open-ILS/web/js/file-saver/demo/index.xhtml

   1 <!DOCTYPE html>\r
   2 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">\r
   3 <head>\r
   4     <meta charset="utf-8"/>\r
   5     <title>FileSaver.js demo</title>\r
   6     <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/eligrey/FileSaver.js/702cd2e820b680f88a0f299e33085c196806fc52/demo/demo.css"/>\r
   7 </head>\r
   8 <body>\r
   9     <h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>\r
  10     <p>\r
  11         The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the <code>saveAs()</code> FileSaver interface, without contacting any servers.\r
  12     </p>\r
  13     <section id="image-demo">\r
  14         <h2>Saving an image</h2>\r
  15         <canvas class="input" id="canvas" width="500" height="300"/>\r
  16         <form id="canvas-options">\r
  17             <label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>\r
  18             <input type="submit" value="Save"/>\r
  19             <input type="button" id="canvas-clear" value="Clear"/>\r
  20         </form>\r
  21     </section>\r
  22     <section id="text-demo">\r
  23         <h2>Saving text</h2>\r
  24         <textarea class="input" id="text" placeholder="Once upon a time..."/>\r
  25         <form id="text-options">\r
  26             <label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>\r
  27             <input type="submit" value="Save"/>\r
  28         </form>\r
  29     </section>\r
  30     <section id="html-demo">\r
  31         <h2>Saving rich text</h2>\r
  32         <div class="input" id="html" contenteditable="">\r
  33             <h3>Some example rich text</h3>\r
  34             <ul>\r
  35                 <li><del>Plain</del> <ins>Boring</ins> text.</li>\r
  36                 <li><em>Emphasized text!</em></li>\r
  37                 <li><strong>Strong text!</strong></li>\r
  38                 <li>\r
  39                     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">\r
  40                         <circle cx="35" cy="35" r="35" fill="red"/>\r
  41                         <text x="10" y="40">image</text>\r
  42                     </svg>\r
  43                 </li>\r
  44                 <li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>\r
  45             </ul>\r
  46         </div>\r
  47         <form id="html-options">\r
  48             <label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>\r
  49             <input type="submit" value="Save"/>\r
  50         </form>\r
  51     </section>\r
  52     <script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"/>\r
  53     <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"/>\r
  54     <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"/>\r
  55     <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/597b6cd0207ce408a6d34890b5b2826b13450714/demo/demo.js"/>\r
  56 </body>\r
  57 </html>\r