Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
NW.js Image Viewer - index.html

index.html

Caricato da: GN
Scarica il programma completo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>Nw.js Image viewer</title>
  5.   <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  6.   <link rel="stylesheet" href="css/main.css">
  7.   <script src="node_modules/jquery/dist/jquery.min.js"></script>
  8.   <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  9.   <script src="js/main.js"></script>
  10.   <style id="runtimeStyle"></style>
  11. </head>
  12. <body>
  13.   <input id="browse" type="file" class="hidden" nwdirectory/>
  14.   <div class="input-group">
  15.     <span class="input-group-addon">Images directory</span>
  16.     <input id="dir" type="text" class="form-control"/>
  17.     <span class="input-group-btn">
  18.       <button id="browseBtn" type="button" class="btn btn-default">Browse...</button>
  19.     </span>
  20.   </div>
  21.   <div class="panel panel-default panel-body container-full">
  22.     <ul id="tabs" class="nav nav-tabs">
  23.       <li id="detailsBtn" class="tabBtn" role="presentation"><a href="#">Details</a></li>
  24.       <li id="thumbnailsBtn" class="tabBtn active" role="presentation"><a href="#">Thumbnails</a></li>
  25.       <li id="slideshowBtn" class="tabBtn" role="presentation"><a href="#">Slideshow</a></li>
  26.     </ul>
  27.     <div class="alert-container something-semantic">
  28.       <h2 id="noImages" class="alert alert-warning hidden" role="alert"><strong>Warning:</strong> the selected directory doesn't contain image files.</h2>
  29.       <h2 id="dirNotExists" class="alert alert-danger hidden" role="alert"><strong>Error:</strong> the selected directory doesn't exists.</h2>
  30.     </div>
  31.     <div id="tabContents">
  32.       <div id="details" style="display: none">
  33.         <table class="table table-hover">
  34.           <thead>
  35.             <tr>
  36.               <th>File name</th>
  37.               <th>Date</th>
  38.               <th>Type</th>
  39.               <th>Size</th>
  40.             </tr>
  41.           </thead>
  42.           <tbody id="detailsList">
  43.           </tbody>
  44.         </table>
  45.       </div>
  46.       <div id="thumbnails" class="tabActive">
  47.         <div id="thumbnailsList" class="row">
  48.         </div>
  49.       </div>
  50.       <div id="slideshow" style="display: none">
  51.           <div id="carousel" class="carousel slide" data-interval="false">
  52.             <div class="carousel-inner" role="listbox">
  53.             </div>
  54.             <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
  55.               <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  56.               <span class="sr-only">Previous</span>
  57.             </a>
  58.             <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
  59.               <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  60.               <span class="sr-only">Next</span>
  61.             </a>
  62.           </div>
  63.       </div>
  64.     </div>
  65.   </div>
  66. </body>
  67. </html>