index.html

<!DOCTYPE html>
<html>

<head>
    <title>Sprites splitter</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="vendor/photon-0.1.2-alpha/dist/css/photon.min.css">
    <link rel="stylesheet" href="app/styles/styles.css">


    <!-- Javascript -->
</head>

<body ng-app="app" ng-controller="mainController">
    <div class="window">

        <!-- .toolbar-header sits at the top of your app -->
        <header class="toolbar toolbar-header">
            <div class="toolbar-actions">
                <div class="btn-group">

                    <button class="btn btn-default tooltip" file-trigger="spriteLoad">
                        <span class="icon icon-picture"></span>
                        <span class="tooltiptext">Load sprite sheet</span>
                    </button>

                    <button class="btn btn-default tooltip" file-trigger="saveFrames" ng-show="mainImagePath">
                        <span class="icon icon-floppy"></span>
                        <span class="tooltiptext">Save selected frames</span>
                    </button>

                    <button class="btn btn-default tooltip" ng-click="resetSelections()" ng-show="mainImagePath">
                        <span class="icon icon-arrows-ccw"></span>
                        <span class="tooltiptext">Clear selections</span>
                    </button>

                    <button class="btn btn-default tooltip" ng-click="toggleDarkTheme()">
                        <span class="icon icon-palette"></span>
                        <span class="tooltiptext">Doggle dark theme</span>
                    </button>


                </div>

                <span class="infoPixel">
                    The pixel at the top left corner will be the reference to detect empty areas

                </span>
            </div>
        </header>

        <input ng-model="mainImagePath" style="display:none" file-input="spriteLoad" type="file"
            file-change-callback="onSelectMainImage" />

        <input ng-model="targetFolder" style="display:none" file-input="saveFrames" type="file" webkitdirectory
            directory file-change-callback="onFolderSelected" />
        <!-- Your app's content goes inside .window-content -->
        <div class="window-content">
            <div class="pane-group">

                <div class="pane" ng-class="{'pane-dark': isDarkTheme()}">
                    <canvas id="canvas" style="display:block; margin:auto" source-sprite ng-model="mainImagePath" />

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


    <script src="vendor/angular.js"></script>
    <script src="app/js/loader.js"></script>
    <script src="app/js/app.js"></script>
</body>

</html>