AngularJS + Guacamole

Client.html

<guac-viewport>

    <!-- Client view -->
    <div class="client-view">
        <div class="client-view-content">

            <!-- Central portion of view -->
            <div class="client-body" guac-touch-drag="clientDrag" guac-touch-pinch="clientPinch">

                <!-- Client -->
                <guac-client client="client"></guac-client>

            </div>

            <!-- Bottom portion of view -->
            <div class="client-bottom">

                <!-- Text input -->
                <div class="text-input-container" ng-show="showTextInput">
                    <guac-text-input needs-focus="showTextInput"></guac-text-input>
                </div>

                <!-- On-screen keyboard -->
                <div class="keyboard-container" ng-show="showOSK">
                    <guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"></guac-osk>
                </div>

            </div>

        </div>
    </div>

    <!-- File transfers -->
    <div id="file-transfer-dialog" ng-show="hasTransfers()">
        <guac-file-transfer-manager client="client"></guac-file-transfer-manager>
    </div>

    <!-- Menu -->
    <div class="menu" ng-class="{open: menu.shown}" id="guac-menu">
        <div class="menu-content">

            <!-- Stationary header -->
            <div class="header">
                <h2>{{client.name}}</h2>
                <div class="share-menu" ng-show="canShareConnection()">
                    <guac-menu menu-title="'CLIENT.ACTION_SHARE' | translate">
                        <ul ng-repeat="sharingProfile in sharingProfiles">
                            <li><a ng-click="share(sharingProfile)">{{sharingProfile.name}}</a></li>
                        </ul>
                    </guac-menu>
                </div>
                <guac-user-menu local-actions="clientMenuActions"></guac-user-menu>
            </div>

            <!-- Scrollable body -->
            <div class="menu-body" guac-touch-drag="menuDrag" guac-scroll="menu.scrollState">

                <!-- Connection sharing -->
                <div class="menu-section" id="share-links" ng-show="isShared()">
                    <div class="content">
                        <h3>{{'CLIENT.INFO_CONNECTION_SHARED' | translate}}</h3>
                        <p class="description"
                           translate="CLIENT.HELP_SHARE_LINK"
                           translate-values="{LINKS : getShareLinkCount()}"></p>
                        <table>
                            <tr ng-repeat="link in client.shareLinks | orderBy: name">
                                <th>{{link.name}}</th>
                                <td><a href="{{link.href}}" target="_blank">{{link.href}}</a></td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- Clipboard -->
                <div class="menu-section" id="clipboard-settings">
                    <h3>{{'CLIENT.SECTION_HEADER_CLIPBOARD' | translate}}</h3>
                    <div class="content">
                        <p class="description">{{'CLIENT.HELP_CLIPBOARD' | translate}}</p>
                        <guac-clipboard data="client.clipboardData"></guac-clipboard>
                    </div>
                </div>

                <!-- Devices -->
                <div class="menu-section" id="devices" ng-show="client.filesystems.length">
                    <h3>{{'CLIENT.SECTION_HEADER_DEVICES' | translate}}</h3>
                    <div class="content">
                        <div class="device filesystem" ng-repeat="filesystem in client.filesystems" ng-click="showFilesystemMenu(filesystem)">
                            {{filesystem.name}}
                        </div>
                    </div>
                </div>

                <!-- Input method -->
                <div class="menu-section" id="keyboard-settings">
                    <h3>{{'CLIENT.SECTION_HEADER_INPUT_METHOD' | translate}}</h3>
                    <div class="content">

                        <!-- No IME -->
                        <div class="choice">
                            <label><input id="ime-none" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="none"/> {{'CLIENT.NAME_INPUT_METHOD_NONE' | translate}}</label>
                            <p class="caption"><label for="ime-none">{{'CLIENT.HELP_INPUT_METHOD_NONE' | translate}}</label></p>
                        </div>

                        <!-- Text input -->
                        <div class="choice">
                            <div class="figure"><label for="ime-text"><img src="images/settings/tablet-keys.png" alt=""/></label></div>
                            <label><input id="ime-text" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="text"/> {{'CLIENT.NAME_INPUT_METHOD_TEXT' | translate}}</label>
                            <p class="caption"><label for="ime-text">{{'CLIENT.HELP_INPUT_METHOD_TEXT' | translate}} </label></p>
                        </div>

                        <!-- Guac OSK -->
                        <div class="choice">
                            <label><input id="ime-osk" name="input-method" ng-change="closeMenu()" ng-model="menu.inputMethod" type="radio" value="osk"/> {{'CLIENT.NAME_INPUT_METHOD_OSK' | translate}}</label>
                            <p class="caption"><label for="ime-osk">{{'CLIENT.HELP_INPUT_METHOD_OSK' | translate}}</label></p>
                        </div>

                    </div>
                </div>

                <!-- Mouse mode -->
                <div class="menu-section" id="mouse-settings">
                    <h3>{{'CLIENT.SECTION_HEADER_MOUSE_MODE' | translate}}</h3>
                    <div class="content">
                        <p class="description">{{'CLIENT.HELP_MOUSE_MODE' | translate}}</p>

                        <!-- Touchscreen -->
                        <div class="choice">
                            <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="true" checked="checked" id="absolute"/>
                            <div class="figure">
                                <label for="absolute"><img src="images/settings/touchscreen.png" alt="{{'CLIENT.NAME_MOUSE_MODE_ABSOLUTE' | translate}}"/></label>
                                <p class="caption"><label for="absolute">{{'CLIENT.HELP_MOUSE_MODE_ABSOLUTE' | translate}}</label></p>
                            </div>
                        </div>

                        <!-- Touchpad -->
                        <div class="choice">
                            <input name="mouse-mode" ng-change="closeMenu()" ng-model="client.clientProperties.emulateAbsoluteMouse" type="radio" ng-value="false" id="relative"/>
                            <div class="figure">
                                <label for="relative"><img src="images/settings/touchpad.png" alt="{{'CLIENT.NAME_MOUSE_MODE_RELATIVE' | translate}}"/></label>
                                <p class="caption"><label for="relative">{{'CLIENT.HELP_MOUSE_MODE_RELATIVE' | translate}}</label></p>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Display options -->
                <div class="menu-section" id="display-settings">
                    <h3>{{'CLIENT.SECTION_HEADER_DISPLAY' | translate}}</h3>
                    <div class="content">
                        <div id="zoom-settings">
                            <div ng-click="zoomOut()" id="zoom-out"><img src="images/settings/zoom-out.png" alt="-"/></div>
                            <div id="zoom-state">{{formattedScale()}}%</div>
                            <div ng-click="zoomIn()" id="zoom-in"><img src="images/settings/zoom-in.png" alt="+"/></div>
                        </div>
                        <div><label><input ng-model="menu.autoFit" ng-change="changeAutoFit()" ng-disabled="autoFitDisabled()" type="checkbox" id="auto-fit"/> {{'CLIENT.TEXT_ZOOM_AUTO_FIT' | translate}}</label></div>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!-- Filesystem menu -->
    <div id="filesystem-menu" class="menu" ng-class="{open: isFilesystemMenuShown()}">
        <div class="menu-content">

            <!-- Stationary header -->
            <div class="header">
                <h2>{{filesystemMenuContents.name}}</h2>
                <button class="upload button" guac-upload="uploadFiles">{{'CLIENT.ACTION_UPLOAD_FILES' | translate}}</button>
                <button class="back" ng-click="hideFilesystemMenu()">{{'CLIENT.ACTION_NAVIGATE_BACK' | translate}}</button>
            </div>

            <!-- Breadcrumbs -->
            <div class="header breadcrumbs"><div
                    class="breadcrumb root"
                    ng-click="changeDirectory(filesystemMenuContents, filesystemMenuContents.root)"></div><div
                        class="breadcrumb"
                        ng-repeat="file in getPath(filesystemMenuContents.currentDirectory)"
                        ng-click="changeDirectory(filesystemMenuContents, file)">{{file.name}}</div>
            </div>

            <!-- Scrollable body -->
            <div class="menu-body">
                <guac-file-browser client="client" filesystem="filesystemMenuContents"></guac-file-browser>
            </div>

        </div>
    </div>

</guac-viewport>