Browse Source

Sketching of layout for A/B/Difference view

diffs
Matt Godbolt 11 years ago
parent
commit
17f5202831
  1. 146
      static/index.html

146
static/index.html

@ -51,68 +51,98 @@
</div>
</div>
<section id="main" class="container-fluid">
<div class="row-fluid">
<div class="span6">
<form class="well form-inline files">
<div>
<label>Source: <select class="source" style="width:3m"></select></label>
<label>Name: <select class="filename"></select></label>
</div>
<div class="btn-group">
<button class="btn load">Load</button>
<button class="btn save">Save</button>
<button class="btn saveas">Save as...</button>
<a class="btn permalink" href="#">Permalink</a>
</div>
</form>
</div>
<div class="span6">
<form class="well form-inline">
<label>Compiler: <select class="compiler"></select></label>
<label>Compiler options: <input class="compiler_options" style="width: 30em;" type="text" value="-O2 -std=c++0x -march=native"></label>
<table><tbody><tr><td>Filter:&nbsp;</td>
<td>
<div class="btn-group filter">
<button class="btn active" type="button" value="labels">Unused labels</button>
<button class="btn active" type="button" value="directives">Directives</button>
<button class="btn active" type="button" value="commentOnly">Comment-only lines</button>
<button class="btn" type="button" value="intel">Intel syntax</button>
<button class="btn" type="button" value="colouriseAsm">Colourise</button>
<div id="main" class="container-fluid">
<div class="row-fluid">
<div class="span6">
<form class="well form-inline files">
<div>
<label>Source: <select class="source" style="width:3m"></select></label>
<label>Name: <select class="filename"></select></label>
</div>
</td></table>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span6 editor">
<div class="topbar indented">C++ editor</div>
<textarea id="c">// Type C++ code here, or load an example.</textarea>
</div>
<div class="span6 asm">
<div class="topbar indented">Assembly output</div>
<textarea>Awaiting</textarea>
<div class="btn-group">
<button class="btn load">Load</button>
<button class="btn save">Save</button>
<button class="btn saveas">Save as...</button>
<a class="btn permalink" href="#">Permalink</a>
</div>
</form>
</div>
<div class="span6">
<form class="well form-inline">
<table>
<tbody>
<tr>
<td>Filter:&nbsp;</td>
<td>
<div class="btn-group filter">
<button class="btn active" type="button" value="labels">Unused labels</button>
<button class="btn active" type="button" value="directives">Directives</button>
<button class="btn active" type="button" value="commentOnly">Comment-only lines</button>
<button class="btn" type="button" value="intel">Intel syntax</button>
<button class="btn" type="button" value="colouriseAsm">Colourise</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
<div class="row result">
<div class="topbar">Compiler output</div>
<div class="output span12">
<p class="template"></p>
<div class="row-fluid">
<ul class="nav nav-tabs">
<li class="active"><a href="#variant-a" data-toggle="tab">Variant A</a></li>
<li><a href="#variant-b" data-toggle="tab">Variant B</a></li>
<li><a href="#diff" data-toggle="tab">Difference</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="variant-a">
<div class="span12">
<form class="well form-inline">
<label>Compiler: <select class="compiler"></select></label>
<label>Compiler options: <input class="compiler_options" style="width: 30em;" type="text" value="-O2 -std=c++0x -march=native"></label>
</form>
</div>
<div class="row-fluid">
<div class="span6 editor">
<div class="topbar indented">C++ editor</div>
<textarea id="c">// Type C++ code here, or load an example.</textarea>
</div>
<div class="span6 asm">
<div class="topbar indented">Assembly output</div>
<textarea>Awaiting</textarea>
</div>
</div>
<div class="row result">
<div class="topbar">Compiler output</div>
<div class="output span12">
<p class="template"></p>
</div>
</div>
</div>
<div class="tab-pane" id="variant-b">
Nothing to see here.
</div>
<script>$(function() {
$('#variant-b').html($('#variant-a').html());
});</script>
<div class="tab-pane" id="diff">
Coming soon!
</div>
</div>
</div>
</div>
</section>
<div class="modal hide" id="saveDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Save as...</h3>
</div>
<div class="modal-body">
<label>Filename: <input class="save-filename" style="width: 30em;" type="text"></label>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Cancel</a>
<a href="#" class="btn btn-primary save">Save</a>
<div class="modal hide" id="saveDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Save as...</h3>
</div>
<div class="modal-body">
<label>Filename: <input class="save-filename" style="width: 30em;" type="text"></label>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Cancel</a>
<a href="#" class="btn btn-primary save">Save</a>
</div>
</div>
</div>

Loading…
Cancel
Save