3d-flip-book/templates/default-book-view.html

3D FlipBook allows to browse images, PDFs or HTMLs as a flipping book. It helps to attract user attention and make more impression on him.

<div id="fb3d-ctx" class="flip-book">
  <div class="view">
    <div class="fnav">
      <div class="prev">
        <a class="cmdBackward" href="#"><span class="icon"><i class="fa fa-angle-left" title="<$tr>Previous page</$tr>"></i></span></a>
      </div>
      <div class="next">
        <a class="cmdForward" href="#"><span class="icon"><i class="fa fa-angle-right" title="<$tr>Next page</$tr>"></i></span></a>
      </div>
    </div>
    <div class="widLoadingProgress loading-progress hidden">
      <div class="progress">
      </div>
      <div class="txtLoadingProgress caption">
      </div>
    </div>
    <div class="widLoading page-loading hidden">
    </div>
  </div>

  <div class="widFloatWnd float-wnd hidden">
    <div class="header">
      <$tr>Table of contents</$tr>
      <a href="#" title="<$tr>Close</$tr>" class="close cmdCloseToc">
        <span class="icon"><i class="fa fa-times"></i></span>
      </a>
    </div>
    <div class="body">
      <div class="ctrl">
        <div class="toc">
          <div class="toc-menu widTocMenu">
            <ul>
              <li class="cmdBookmarks"><a href="#"><$tr>Bookmarks</$tr></a></li>
              <li class="cmdThumbnails"><a href="#"><$tr>Thumbnails</$tr></a></li>
              <li class="cmdSearch"><a href="#"><$tr>Search</$tr></a></li>
            </ul>
          </div>
          <div class="widBookmarks toc-view">

          </div>
          <div class="widThumbnails toc-view">

          </div>
          <div class="widSearch toc-view">

          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">

    <div class="ctrl js-center">
      <nav class="fnavbar">
        <ul class="fnav">

          <li class="fnav-item cmdZoomIn"><a href="#"><span class="icon"><i class="fa fa-search-plus" title="<$tr>Zoom in</$tr>"></i></span></a></li>
          <li class="fnav-item cmdZoomOut"><a href="#"><span class="icon"><i class="fa fa-search-minus" title="<$tr>Zoom out</$tr>"></i></span></a></li>
          <li class="fnav-item cmdDefaultZoom"><a href="#"><span class="icon"><i class="fa fa-compress" title="<$tr>Fit view</$tr>"></i></span></a></li>
          <li class="fnav-item cmdToc"><a href="#"><span class="icon"><i class="fa fa-bookmark" title="<$tr>Table of contents</$tr>"></i></span></a></li>
          <li class="fnav-item cmdFastBackward"><a href="#"><span class="icon"><i class="fa fa-fast-backward" title="<$tr>10 pages backward</$tr>"></i></span></a></li>
          <li class="fnav-item cmdBackward"><a href="#"><span class="icon"><i class="fa fa-backward" title="<$tr>Previous page</$tr>"></i></span></a></li>
          <li class="fnav-item">
            <div class="pages">
              <input type="text" class="number inpPage" maxlength="4" placeholder="1">
              <input type="text" class="amount inpPages" readOnly maxlength="4" placeholder="1">
            </div>
          </li>
          <li class="fnav-item cmdForward"><a href="#"><span class="icon"><i class="fa fa-forward" title="<$tr>Next page</$tr>"></i></span></a></li>
          <li class="fnav-item cmdFastForward"><a href="#"><span class="icon"><i class="fa fa-fast-forward"  title="<$tr>10 pages forward</$tr>"></i></span></a></li>
          <li class="fnav-item cmdSave"><a href="#"><span class="icon"><i class="fa fa-download"  title="<$tr>Download</$tr>"></i></span></a></li>
          <li class="fnav-item cmdPrint"><a href="#"><span class="icon"><i class="fa fa-print"  title="<$tr>Print</$tr>"></i></span></a></li>
          <li class="fnav-item cmdFullScreen"><a href="#"><span class="icon"><i class="fa fa-arrows-alt" title="<$tr>Full screen</$tr>"></i></span></a></li>
          <li class="dropup fnav-item toggle widSettings">
            <a href="#"><div class="icon-caret"><span class="icon"><i class="fa fa-cog" title="<$tr>Settings</$tr>"></i> <i class="caret"></i></span></div></a>
            <ul class="menu hidden">
              <li  class="cmdSmartPan"><a href="#"><span class="icon"><i class="fa fa-eye"></i></span> <$tr>Smart pan</$tr></a></li>
              <li  class="cmdSinglePage"><a href="#"><span class="icon"><i class="fa fa-file-o"></i></span> <$tr>Single page</$tr></a></li>
              <li  class="cmdSounds"><a href="#"><span class="icon"><i class="fa fa-volume-up"></i></span> <$tr>Sounds</$tr></a></li>
              <li  class="cmdStats"><a href="#"><span class="icon"><i class="fa fa-line-chart"></i></span> <$tr>Stats</$tr></a></li>
              <li class="divider"></li>
              <li  class="cmdLightingUp"><a href="#"><span class="icon"><i class="fa fa-chevron-up"></i></span> <$tr>Increase lighting</$tr></a></li>
              <li  class="cmdLightingDown"><a href="#"><span class="icon"><i class="fa fa-chevron-down"></i></span> <$tr>Reduce lighting</$tr></a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>

  </div>
</div>