<!DOCTYPE html>
<html>
<head>
<title>Nw.js Image viewer</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<style id="runtimeStyle"></style>
</head>
<body>
<input id="browse" type="file" class="hidden" nwdirectory/>
<div class="input-group">
<span class="input-group-addon">Images directory</span>
<input id="dir" type="text" class="form-control"/>
<span class="input-group-btn">
<button id="browseBtn" type="button" class="btn btn-default">Browse...</button>
</span>
</div>
<div class="panel panel-default panel-body container-full">
<ul id="tabs" class="nav nav-tabs">
<li id="detailsBtn" class="tabBtn" role="presentation"><a href="#">Details</a></li>
<li id="thumbnailsBtn" class="tabBtn active" role="presentation"><a href="#">Thumbnails</a></li>
<li id="slideshowBtn" class="tabBtn" role="presentation"><a href="#">Slideshow</a></li>
</ul>
<div class="alert-container something-semantic">
<h2 id="noImages" class="alert alert-warning hidden" role="alert"><strong>Warning:</strong> the selected directory doesn't contain image files.</h2>
<h2 id="dirNotExists" class="alert alert-danger hidden" role="alert"><strong>Error:</strong> the selected directory doesn't exists.</h2>
</div>
<div id="tabContents">
<div id="details" style="display: none">
<table class="table table-hover">
<thead>
<tr>
<th>File name</th>
<th>Date</th>
<th>Type</th>
<th>Size</th>
</tr>
</thead>
<tbody id="detailsList">
</tbody>
</table>
</div>
<div id="thumbnails" class="tabActive">
<div id="thumbnailsList" class="row">
</div>
</div>
<div id="slideshow" style="display: none">
<div id="carousel" class="carousel slide" data-interval="false">
<div class="carousel-inner" role="listbox">
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>