demo/src/menu.html
<div id="miew-menu">
<!-- Title bar -->
<div class="titlebar" style="display: none">
<span data-field="title">3D Molecular Viewer</span>
<div class="btns-miew-titlebar btns-miew-titlebar-left btns-miew-titlebar-main-menu">
<button class="btn btn-default btn-titlebar" data-toggle="miew-main-menu" data-state="on" data-tooltip="tooltip" data-placement="bottom" title="Open menu">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<button id="miew-terminal-btn" type="button" class="btn btn-default btn-titlebar" data-toggle="miew-terminal" data-state="on" data-tooltip="tooltip" data-placement="bottom" title="Terminal">
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
<div class="blog-nav btns-miew-titlebar btns-miew-titlebar-right btns-miew-titlebar-toolbar">
<button type="button" class="btn btn-default btn-titlebar blog-nav-item" data-toggle="toolbar" data-value="miew-menu-toolbar-mode" data-tooltip="tooltip" data-placement="bottom" title="Display mode">
<span class="glyphicon glyphicon-picture"></span>
</button>
<button type="button" class="btn btn-default btn-titlebar blog-nav-item" data-toggle="toolbar" data-value="miew-menu-toolbar-colorer" data-tooltip="tooltip" data-placement="bottom" title="Display color">
<span class="glyphicon glyphicon-tint"></span>
</button>
<!-- button type="button" class="btn btn-default btn-titlebar blog-nav-item" data-toggle="toolbar" data-value="miew-menu-toolbar-resolution" data-tooltip="tooltip" data-placement="bottom" title="Resolution">
<span class="glyphicon glyphicon-stats"></span>
</button -->
</div>
</div>
<div class="toolbar container-fluid" data-toolbar-type="miew-menu-toolbar-mode" style="display: none">
<div class="pseudo-row">
<div class="row">
<h5 class="text-center">Display mode</h5>
</div>
<div class="row">
</div>
</div>
</div>
<div class="toolbar container-fluid" data-toolbar-type="miew-menu-toolbar-colorer" style="display: none">
<div class="pseudo-row">
<div class="row">
<h5 class="text-center">Display color</h5>
</div>
<div class="row">
</div>
</div>
</div>
<!-- div class="toolbar container-fluid" data-toolbar-type="miew-menu-toolbar-resolution" style="display: none">
<div class="pseudo-row">
<div class="row">
<h5 class="text-center">Resolution</h5>
</div>
<div class="row">
<a href="#" class="thumbnail" data-toggle="resolution-immediate" data-value="poor">
<img src="images/resolution/poor.png">
<div class="caption text-center"><small>Poor</small></div>
</a>
<a href="#" class="thumbnail" data-toggle="resolution-immediate" data-value="low">
<img src="images/resolution/low.png">
<div class="caption text-center"><small>Low</small></div>
</a>
<a href="#" class="thumbnail" data-toggle="resolution-immediate" data-value="medium">
<img src="images/resolution/medium.png">
<div class="caption text-center"><small>Medium</small></div>
</a>
<a href="#" class="thumbnail" data-toggle="resolution-immediate" data-value="high">
<img src="images/resolution/high.png">
<div class="caption text-center"><small>High</small></div>
</a>
<a href="#" class="thumbnail" data-toggle="resolution-immediate" data-value="ultra">
<img src="images/resolution/ultra.png">
<div class="caption text-center"><small>Ultra</small></div>
</a>
</div>
</div>
</div -->
<div class="container miew-terminal" style="display: none;">
<div class="row col-xs-12 col-sm-12 panel panel-default panel-menu panel-dark" data-panel-type="miew-menu-panel-terminal" style="background-color: transparent">
<div class="miew-terminal-body">
<div class="terminal-window"></div>
</div>
</div>
</div>
<!-- Main menu -->
<div class="container main-menu" style="display: none">
<div class="row">
<!-- Left panel -->
<div class="col-xs-12 col-sm-3 panel panel-default panel-menu panel-dark" data-panel-type="miew-menu-panel-main">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left" data-toggle="miew-main-menu" data-state="off"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
<h3 class="panel-title visible-xs">Menu</h3>
</div>
<div class="panel-body list-group">
<a href="#" class="list-group-item" data-toggle="panel" data-value="miew-menu-panel-info">
<span class="glyphicon glyphicon-info-sign"></span> <!-- span class="glyphicon glyphicon-menu-right pull-right"></span -->
Info</a>
<a href="#" class="list-group-item" data-toggle="panel" data-value="miew-menu-panel-presets">
<span class="glyphicon glyphicon-folder-open"></span> <!-- span class="glyphicon glyphicon-menu-right pull-right"></span -->
Load</a>
<a href="#" class="list-group-item" data-toggle="panel" data-value="miew-menu-panel-gallery">
<span class="glyphicon glyphicon-star"></span> <!-- span class="glyphicon glyphicon-menu-right pull-right"></span -->
Gallery</a>
<a href="#" class="list-group-item" data-toggle="panel" data-value="miew-menu-panel-representation">
<span class="glyphicon glyphicon-picture"></span> <!-- span class="glyphicon glyphicon-menu-right pull-right"></span -->
Representations</a>
<a href="#" class="list-group-item" data-toggle="panel" data-value="miew-menu-panel-render">
<span class="glyphicon glyphicon-eye-open"></span> <!-- span class="glyphicon glyphicon-menu-right pull-right"></span -->
Render settings</a>
<a href="#" class="list-group-item" data-toggle="panel" data-value="miew-menu-panel-tools">
<span class="glyphicon glyphicon-wrench"></span> <!-- span class="glyphicon glyphicon-menu-right pull-right"></span -->
Tools</a>
<a href="#" class="list-group-item" data-toggle="panel" data-value="miew-menu-panel-about">
<span class="glyphicon glyphicon-question-sign"></span> <!-- span class="glyphicon glyphicon-menu-right pull-right"></span -->
About</a>
</div>
</div>
<!-- Info panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-info">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left visible-xs" data-toggle="main-panel" data-value="miew-menu-panel-main"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body"></div>
</div>
<!-- Load panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-presets" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left main-back-button visible-xs" data-toggle="main-panel" data-value="miew-menu-panel-main"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Load</h3>
</div>
<div class="panel-body">
<div class="main">
<form data-form-type="miew-menu-form-load-pdb" style="margin-bottom:20px; " onsubmit="return false;">
<div class="form-group">
<label class="control-label">Data to load</label>
<div class="input-group" style="margin-bottom: 10px;">
<input type="text" class="form-control presets-panel-action" placeholder="PDB ID or URL..." data-pdb-url-type="main" data-presets-panel-action="pdb-inputs-text" data-presets-panel-events="input,propertychange,paste,keyup">
<span class="input-group-btn">
<span class="btn btn-primary miew-panel-btn-tooltip"><span class="glyphicon glyphicon-folder-open"></span><input type="file" class="form-control presets-panel-action" data-pdb-url-type="main" data-presets-panel-action="pdb-inputs-file" data-presets-panel-events="change"></span>
<span data-btn-type="miew-menu-btn-browse-file" style="visibility:hidden;"><input type="file"></span>
</span>
</div>
<div class="alert alert-warning" role="alert" data-pdb-url-type="main"></div>
<div class="alert alert-danger" role="alert" data-pdb-url-type="main"></div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6" style="padding:0">
</div>
<div class="col-sm-6 col-xs-6" style="padding:0">
<span class="pull-right btn btn-danger presets-panel-action" data-tooltip="tooltip" data-presets-panel-action="pdb-inputs-clear" style="min-width: 150px; margin-left: 10px;">Cancel</span>
<span class="pull-right btn btn-primary presets-panel-action" data-tooltip="tooltip" data-presets-panel-action="pdb-load" style="min-width: 150px; margin-left: 10px;">Load</span>
</div>
</div>
</form>
<form data-form-type="miew-menu-form-auto-preset">
<ul class="list-group">
<li class="list-group-item"><label>Automatic preset on load</label> <div class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="autoPreset" data-size="mini" title="Automatic preset">
</div></li>
</ul>
</form>
</div>
</div>
</div>
<!-- Gallery panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-gallery" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left visible-xs" data-toggle="main-panel" data-value="miew-menu-panel-main"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Gallery</h3>
</div>
<div class="panel-body">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-6 col-sm-4" data-toggle="preset-pdb" data-value="pc:serotonin" data-query="p=small&mt=ME&v=1P1erPnlYqD3sL7u8kNxQPmZl0L4NUDlA0c6VPg%3D%3D">
<a href="#" class="thumbnail">
<img src="images/serotonin.png">
<div class="caption text-center">Serotonin</div>
</a>
</div>
<div class="col-xs-6 col-sm-4" data-toggle="preset-pdb" data-value="data/1CRN.pdb" data-query="p=macro">
<a href="#" class="thumbnail">
<img src="images/1CRN.png">
<div class="caption text-center">1CRN <small>(0.3k)</small></div>
</a>
</div>
<div class="col-xs-6 col-sm-4" data-toggle="preset-pdb" data-value="1AID" data-query="p=macro&m=CS&c=CH&r=1&s=hetatm+and+altloc+A&v=1XA99wmIQG8LRIls%2BLXGoPRDqTb%2BdvOC/PEyQPg%3D%3D">
<a href="#" class="thumbnail">
<img src="images/1AID.png">
<div class="caption text-center">1AID <small>(1.6k)</small></div>
</a>
</div>
<div class="col-xs-6 col-sm-4" data-toggle="preset-pdb" data-value="2BFU" data-query="p=macro&c=CH&r=2&s=all&m=CS&c=CH&mt=TR&v=1AAAAgAAAAIAAAACAAtq6O7plpT4VEF6%2B1/WQPQ%3D%3D">
<a href="#" class="thumbnail">
<img src="images/2BFU.png">
<div class="caption text-center">2BFU <small>(5.2k)</small></div>
</a>
</div>
<div class="col-xs-6 col-sm-4" data-toggle="preset-pdb" data-value="5B40" data-query="p=macro&r=2&s=nucleic&m=CS&c=SS&mt=TR&v=1EBjRwvhTz0CYbo7BE0KGPBxejb/3yk2//Wb1vg%3D%3D">
<a href="#" class="thumbnail">
<img src="images/5B40.png">
<div class="caption text-center">5B40 <small>(11.8k)</small></div>
</a>
</div>
<div class="col-xs-6 col-sm-4" data-toggle="preset-pdb" data-value="mmtf:4TNW" data-query="p=macro&c=SQ&v=1xQCuQgIrbUHD9arAmmsnPIj8NL/mF6u%2Bx26BPg%3D%3D">
<a href="#" class="thumbnail">
<img src="images/4TNW.png">
<div class="caption text-center">4TNW <small>(30.4k)</small></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Representation panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-representation" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left visible-xs" data-toggle="main-panel" data-value="miew-menu-panel-main"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Representations</h3>
</div>
<div class="panel-body">
<div class="dropdown" id="miew-source-dropdown" style="margin-bottom: 0.5em; display: none">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-file"></span> <span id="miew-source-name">File</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="miew-source-list">
</ul>
</div>
<div class="panel-group miew-repr-list" role="tablist" aria-multiselectable="true" style="padding-bottom: 5px; margin-bottom: 0;">
</div>
<div class="btn-group miew-repr-list-controls" role="group">
<a class="btn btn-primary" type="button" data-btn-type="miew-menu-btn-add-repr">
<span class="glyphicon glyphicon-plus"></span>
Add new representation
</a>
<a class="btn btn-default" type="button" data-btn-type="miew-menu-btn-del-repr">
<span class="glyphicon glyphicon-trash"></span>
Delete current representation
</a>
</div>
</div>
</div>
<!-- Render panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-render" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left visible-xs" data-toggle="main-panel" data-value="miew-menu-panel-main"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Render settings</h3>
</div>
<div class="panel-body">
<form data-form-type="miew-menu-form-render">
<ul class="list-group">
<!-- Resolution -->
<li class="list-group-item" data-toggle="combobox-panel" data-value="miew-menu-panel-resolution">Resolution
<span class="pull-right">
<span class="text-muted"></span>
<span class="glyphicon glyphicon-menu-right"></span>
</span>
</li>
<!-- Resolution autodetection -->
<li class="list-group-item"><label>Resolution autodetection</label> <span class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="autoResolution" data-size="mini" title="Resolution autodetection">
</span></li>
<!-- Fog -->
<li class="list-group-item"><label>Fog</label> <span class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="fog" data-size="mini" title="Fog">
</span></li>
<!-- Axes -->
<li class="list-group-item"><label>Axes</label> <div class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="axes" data-size="mini" title="Axes">
</div></li>
<!-- FPS -->
<li class="list-group-item"><label>FPS counter</label> <div class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="fps" data-size="mini" title="FPS counter">
</div></li>
<!-- Palette -->
<li class="list-group-item" data-toggle="combobox-panel" data-value="miew-menu-panel-palette">Palette
<span class="pull-right">
<span class="text-muted"></span>
<span class="glyphicon glyphicon-menu-right"></span>
</span>
</li>
<!-- Background color -->
<li class="list-group-item"><label>Background color</label> <div class="checkbox-background pull-right">
<input type="checkbox" data-dir="settings" data-toggle="bg.color" data-size="mini" data-on-text="Dark" data-off-text="Light" data-handle-width="46" data-label-width="0" title="Background color">
</div></li>
<!-- FXAA -->
<li class="list-group-item"><label>FXAA</label> <span class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="fxaa" data-size="mini" title="FXAA">
</span></li>
<!-- Amient Occlusion -->
<li class="list-group-item"><label>Ambient Occlusion</label> <span class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="ao" data-size="mini" title="Ambient Occlusion">
</span></li>
<!-- Shadow Map -->
<li class="list-group-item"><label>Shadow Map</label> <span class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="shadow.on" data-size="mini" title="ShadowMap">
</span></li>
<!-- Clip plane -->
<li class="list-group-item"><label>Clip Plane</label> <span class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="draft.clipPlane" data-size="mini" title="Clip Plane">
</span></li>
<!-- Outline -->
<li class="list-group-item"><label>Outline</label> <span class="pull-right">
<input type="checkbox" data-dir="settings" data-toggle="outline.on" data-size="mini" title="Outline">
</span></li>
</ul>
</form>
</div>
</div>
<!-- Tools panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-tools" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left visible-xs" data-toggle="main-panel" data-value="miew-menu-panel-main"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Tools</h3>
</div>
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="dssp"><span class="glyphicon glyphicon-sort"></span>
Assign secondary structure
</a>
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="reset-view"><span class="glyphicon glyphicon-refresh"></span>
Reset view
</a>
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="screenshot"><span class="glyphicon glyphicon-camera"></span>
Screenshot
</a>
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="get-url"><span class="glyphicon glyphicon-link"></span>
Get URL
</a>
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="get-script"><span class="glyphicon glyphicon-list-alt"></span>
Get script
</a>
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="save-settings"><span class="glyphicon glyphicon-log-in"></span>
Save settings
</a>
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="restore-settings"><span class="glyphicon glyphicon-log-out"></span>
Restore settings
</a>
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="reset-settings"><span class="glyphicon glyphicon-refresh"></span>
Reset settings
</a>
<a href="#" class="list-group-item" data-toggle="miew-menu-tools" data-value="fbx-export" style="display: block"><span class="glyphicon glyphicon-floppy-save"></span>
Export FBX
</a>
</div>
</div>
</div>
<!-- About panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-about" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left visible-xs" data-toggle="main-panel" data-value="miew-menu-panel-main"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">About</h3>
</div>
<div class="panel-body">
<div style="left: 0;top: 40px;position: absolute;">
<a href="https://github.com/epam/miew">
<img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png">
</a>
</div>
<div class="text-center">
<img src="images/logo.svg">
<h3 class="text-center" style="max-width:35ex;margin:20px auto 10px">
<span style="white-space:nowrap;">Miew – 3D Molecular Viewer</span>
<small class="PACKAGE_VERSION" style="white-space:nowrap;"></small>
</h3>
<p>Copyright © 2015–2022 EPAM Systems, Inc.</p>
<p><a href="https://epa.ms/miew">https://epa.ms/miew</a></p>
</div>
<hr>
<h2>Keyboard and mouse shortcuts</h2>
<div>
<table class="table">
<thead>
<tr><th>Key</th><th>Action</th></tr>
</thead>
<tbody>
<tr><td colspan="2"><b>Camera and object controls</b></td></tr>
<tr><td><kbd>LMB</kbd></td><td>Click to select object part</td></tr>
<tr><td> </td><td>Double click to change object rotation center</td></tr>
<tr><td> </td><td>Drag to rotate object in 3D</td></tr>
<tr><td><kbd>Shift</kbd> + <kbd>LMB</kbd></td><td>Drag to rotate object in Z plane</td></tr>
<tr><td><kbd>Mouse Wheel</kbd></td><td>Scale object</td></tr>
<tr><td><kbd>RMB</kbd></td><td>Drag to shift molecule</td></tr>
<tr><td colspan="2"><b>Component / fragment edit mode</b></td></tr>
<tr><td><kbd>C</kbd> / <kbd>F</kbd></td><td>Enter the component or fragment edit mode</td></tr>
<tr><td><kbd>A</kbd> / <kbd>D</kbd></td><td>Apply or discard changes</td></tr>
<tr><td><kbd>Alt</kbd> + <kbd>LMB</kbd></td><td>Drag to rotate component / fragment in 3D</td></tr>
<tr><td><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>LMB</kbd></td><td>Drag to rotate component / fragment in Z plane</td></tr>
<tr><td><kbd>Alt</kbd> + <kbd>Ctrl</kbd> + <kbd>LMB</kbd></td><td>Drag to translate component in Z plane</td></tr>
<tr><td colspan="2"><b>Other</b></td></tr>
<tr><td><kbd>X</kbd></td><td>Extract selection as a new representation</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Mode panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-mode" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left" data-toggle="panel" data-value="miew-menu-panel-representation"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Display mode</h3>
</div>
<div class="panel-body">
<div class="list-group">
</div>
</div>
</div>
<!-- Color panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-color" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left" data-toggle="panel" data-value="miew-menu-panel-representation"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Display color</h3>
</div>
<div class="panel-body">
<div class="list-group">
</div>
</div>
</div>
<!-- Palette panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-palette" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left" data-toggle="panel" data-value="miew-menu-panel-render"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Display palette</h3>
</div>
<div class="panel-body">
<div class="list-group">
</div>
</div>
</div>
<!-- Material presets panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-matpreset" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left" data-toggle="panel" data-value="miew-menu-panel-representation"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Material</h3>
</div>
<div class="panel-body">
<div class="list-group">
</div>
</div>
</div>
<!-- Color panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-select-color" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left" data-toggle="panel" data-value="miew-menu-panel-representation"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Choose color</h3>
</div>
<div class="panel-body">
<div class="row">
</div>
</div>
</div>
<!-- Resolution panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-resolution" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left" data-toggle="panel" data-value="miew-menu-panel-render"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Render resolution</h3>
</div>
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="resolution" data-value="poor">Poor</a>
<a href="#" class="list-group-item" data-toggle="resolution" data-value="low">Low</a>
<a href="#" class="list-group-item" data-toggle="resolution" data-value="medium">Medium</a>
<a href="#" class="list-group-item" data-toggle="resolution" data-value="high">High</a>
<a href="#" class="list-group-item" data-toggle="resolution" data-value="ultra">Ultra</a>
</div>
</div>
</div>
<!-- Selection panel -->
<div class="col-xs-12 col-sm-9 panel panel-default panel-menu" data-panel-type="miew-menu-panel-selection" style="display: none">
<div class="panel-heading">
<button class="btn btn-default btn-titlebar pull-left" data-toggle="panel" data-value="miew-menu-panel-representation"><span class="glyphicon glyphicon-menu-left"></span></button>
<h3 class="panel-title">Selection</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Selection string</label>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn"><button class="btn btn-primary" type="button" data-btn-type="miew-menu-btn-apply-sel">Apply</button></span>
</div>
<span class="help-block">For example:
"<a href="#">all</a>",
"<a href="#">not hetatm</a>",
"<a href="#">hetatm and not water</a>",
"<a href="#">residue ALA, CYS</a>",
"<a href="#">serial 1:10, 20:30 and elem C,N</a>".
</span>
</div>
<div class="alert alert-danger" style="display:none; font-family: 'Anonymous Pro','Consolas','Courier New',Courier,monospace; white-space: pre"></div>
<div class="row">
<div class="col-xs-6 col-sm-6 column">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="[data-tab-content=singleword]">Single</a></li>
<li><a data-toggle="tab" href="[data-tab-content=keyword]">Key</a></li>
<li><a data-toggle="tab" href="[data-tab-content=value]">Value</a></li>
</ul>
<div class="tab-content">
<div data-tab-content="singleword" class="tab-pane fade in active">
<div class="list-group">
</div>
</div>
<div data-tab-content="keyword" class="tab-pane fade">
<div class="list-group">
</div>
</div>
<div data-tab-content="value" class="tab-pane fade">
<div class="list-group">
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 column calc">
<a class="col-xs-6 btn btn-default btn-calc" data-toggle="selection-input" data-value=" ">SPACE</a>
<a class="col-xs-3 btn btn-default btn-calc delete" data-delete-type="clear">CLEAR</a>
<a class="col-xs-3 btn btn-default btn-calc delete" data-delete-type="backspace"><span class="glyphicon glyphicon-arrow-left"></span></a>
<a class="col-xs-3 btn btn-default btn-calc" data-toggle="selection-input" data-value="and ">and</a>
<a class="col-xs-3 btn btn-default btn-calc" data-toggle="selection-input" data-value="or ">or</a>
<a class="col-xs-3 btn btn-default btn-calc" data-toggle="selection-input" data-value="not ">not</a>
<a class="col-xs-3 btn btn-default btn-calc char" data-toggle="selection-input" data-value="A">A</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="7">7</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="8">8</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="9">9</a>
<a class="col-xs-3 btn btn-default btn-calc char" data-toggle="selection-input" data-value="B">B</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="4">4</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="5">5</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="6">6</a>
<a class="col-xs-3 btn btn-default btn-calc char" data-toggle="selection-input" data-value="C">C</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="1">1</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="2">2</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="3">3</a>
<a class="col-xs-3 btn btn-default btn-calc char" data-toggle="selection-input" data-value="D">D</a>
<a class="col-xs-3 btn btn-default btn-calc digit" data-toggle="selection-input" data-value="0">0</a>
<a class="col-xs-3 btn btn-default btn-calc" data-toggle="selection-input" data-value="(">(</a>
<a class="col-xs-3 btn btn-default btn-calc" data-toggle="selection-input" data-value=")">)</a>
<a class="col-xs-3 btn btn-default btn-calc char" data-toggle="selection-input" data-value="H">H</a>
<a class="col-xs-3 btn btn-default btn-calc" data-toggle="selection-input" data-value=",">,</a>
<a class="col-xs-3 btn btn-default btn-calc" data-toggle="selection-input" data-value=":">:</a>
<a class="col-xs-3 btn btn-default btn-calc" data-toggle="selection-input" data-value=""">"</a>
<a class="col-xs-3 btn btn-default btn-calc char" data-toggle="selection-input" data-value="O">O</a>
</div>
</div>
<div></div>
</div>
</div>
</div>
<!--Tooltips panel container-->
<div class="miew-menu-panel-tooltips">
</div>
</div>
<!-- Modals -->
<div class="miew-menu-modals">
<!-- URL Modal -->
<div class="modal fade" data-modal-type="miew-menu-modal-url" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Url</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Script modal -->
<div class="modal fade" data-modal-type="miew-menu-modal-script" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Script</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" data-modal-type="miew-menu-modal-global-error" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>