keeweb/app/templates/open.hbs

<div class="open">
    <input type="file" class="open__file-ctrl hide-by-pos" />
    <div class="open__icons">
        <div class="open__icon open__icon-open">
            <i class="fa fa-lock open__icon-i"></i>
            <div class="open__icon-text">{{res 'openOpen'}}</div>
        </div>
        <div class="open__icon open__icon-new">
            <i class="fa fa-plus open__icon-i"></i>
            <div class="open__icon-text">{{res 'openNew'}}</div>
        </div>
        <div class="open__icon open__icon-dropbox">
            <i class="fa fa-dropbox open__icon-i"></i>
            <div class="open__icon-text">Dropbox</div>
        </div>
        <div class="open__icon open__icon-more">
            <i class="fa fa-ellipsis-h open__icon-i"></i>
            <div class="open__icon-text">{{res 'openMore'}}</div>
        </div>
    </div>
    <div class="open__icons open__icons--lower hide">
        <div class="open__icon open__icon-webdav">
            <i class="fa fa-server open__icon-i"></i>
            <div class="open__icon-text">WebDAV</div>
        </div>
        <div class="open__icon open__icon-gdrive">
            <i class="fa fa-google open__icon-i"></i>
            <div class="open__icon-text">Google Drive</div>
        </div>
        <div class="open__icon open__icon-onedrive">
            <i class="fa fa-cloud open__icon-i"></i>
            <div class="open__icon-text">OneDrive</div>
        </div>
        <div class="open__icon open__icon-import-xml">
            <i class="fa fa-code open__icon-i"></i>
            <div class="open__icon-text">Import XML</div>
        </div>
        <div class="open__icon open__icon-demo">
            <i class="fa fa-magic open__icon-i"></i>
            <div class="open__icon-text">{{res 'openDemo'}}</div>
        </div>
    </div>
    <div class="open__pass-area">
        <div class="open__pass-warn-wrap">
            <div class="open__pass-warning muted-color invisible"><i class="fa fa-exclamation-triangle"></i> {{res 'openCaps'}}</div>
        </div>
        <div class="open__pass-field-wrap">
            <input class="open__pass-input" type="password" size="30" autocomplete="off" maxlength="128"
                   placeholder="Click to open a file" readonly />
            <div class="open__pass-enter-btn"><i class="fa fa-level-down fa-rotate-90"></i></div>
            <div class="open__pass-opening-icon"><i class="fa fa-spinner fa-spin"></i></div>
        </div>
        <div class="open__settings">
            <div class="open__settings-key-file hide">
                <i class="fa fa-key open__settings-key-file-icon">
                </i><span class="open__settings-key-file-name">{{res 'openKeyFile'}}</span>
                <span class="open__settings-key-file-dropbox"> {{res 'openKeyFileDropbox'}}</span>
            </div>
        </div>
        <div class="open__last">
            {{#each lastOpenFiles as |file|}}
            <div class="open__last-item" data-id="{{file.id}}">
                <i class="fa fa-{{file.icon}} open__last-item-icon"></i>
                <span class="open__last-item-text">{{file.name}}</span>
                <i class="fa fa-times open__last-item-icon-del"></i>
            </div>
            {{/each}}
        </div>
    </div>
    <div class="open__config-wrap">
    </div>
    <div class="open__dropzone">
        <i class="fa fa-lock muted-color open__dropzone-icon"></i>
        <h1 class="muted-color open__dropzone-header">{{res 'openDropHere'}}</h1>
    </div>
</div>