OLD | NEW |
(Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script> |
| 4 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min
.js"></script> |
| 5 <style> |
| 6 |
| 7 table { |
| 8 border-collapse: collapse; |
| 9 } |
| 10 |
| 11 table, tr, td { |
| 12 border: 1px solid black; |
| 13 } |
| 14 |
| 15 tr.error { |
| 16 background-color: #aaaaaa; |
| 17 } |
| 18 |
| 19 tr.good { |
| 20 background-color: #aaffaa; |
| 21 } |
| 22 |
| 23 tr.poor { |
| 24 background-color: #aaaaff; |
| 25 } |
| 26 |
| 27 tr.bad { |
| 28 background-color: #ffaaaa; |
| 29 } |
| 30 |
| 31 tr.active { |
| 32 border: 3px solid blue; |
| 33 } |
| 34 |
| 35 #image-holder { |
| 36 width: 90%; |
| 37 margin: 0 auto; |
| 38 } |
| 39 |
| 40 #image-holder img { |
| 41 width: 49%; |
| 42 } |
| 43 |
| 44 #image-holder.error { |
| 45 border: 5px solid #aaaaaa; |
| 46 } |
| 47 |
| 48 #image-holder.good { |
| 49 border: 5px solid green; |
| 50 } |
| 51 |
| 52 #image-holder.poor { |
| 53 border: 5px solid blue; |
| 54 } |
| 55 |
| 56 #image-holder.bad { |
| 57 border: 5px solid red; |
| 58 } |
| 59 |
| 60 |
| 61 .content { |
| 62 background-color: #e0e0e0; |
| 63 } |
| 64 |
| 65 .content-holder { |
| 66 height: 100%; |
| 67 background-color: #e0e0e0; |
| 68 float: left; |
| 69 overflow: hidden; |
| 70 overflow-y: scroll; |
| 71 } |
| 72 |
| 73 .content-holder.active { |
| 74 display: block |
| 75 } |
| 76 |
| 77 button { |
| 78 height: 50px |
| 79 } |
| 80 |
| 81 .left-caret { |
| 82 float: left; |
| 83 cursor: pointer; |
| 84 width: 35px; |
| 85 height: 35px; |
| 86 position: relative; |
| 87 } |
| 88 |
| 89 .left-caret:before { |
| 90 content: ''; |
| 91 position: absolute; |
| 92 left: 12px; |
| 93 top: 25%; |
| 94 border-right: 12px solid #555; |
| 95 border-top: 12px solid transparent; |
| 96 border-bottom: 12px solid transparent; |
| 97 } |
| 98 |
| 99 .left-caret:hover:before { |
| 100 border-right: 12px solid #777; |
| 101 } |
| 102 |
| 103 .right-caret { |
| 104 float: right; |
| 105 position: relative; |
| 106 cursor: pointer; |
| 107 width: 35px; |
| 108 height: 35px; |
| 109 } |
| 110 |
| 111 .right-caret:before { |
| 112 content: ''; |
| 113 position: absolute; |
| 114 right: 12px; |
| 115 top: 25%; |
| 116 border-left: 12px solid #555; |
| 117 border-top: 12px solid transparent; |
| 118 border-bottom: 12px solid transparent; |
| 119 } |
| 120 |
| 121 .right-caret:hover:before { |
| 122 border-left: 12px solid #777; |
| 123 } |
| 124 |
| 125 .button-row { |
| 126 padding: 20px |
| 127 } |
| 128 |
| 129 </style> |
| 130 </head> |
| 131 <div class="content"> |
| 132 <div class="content-holder" id="data-viewer" style="width:25%"> |
| 133 <table id="data-table"> |
| 134 </table> |
| 135 </div> |
| 136 <div class="content-holder" id="image-viewer" style="width:75%"> |
| 137 <div class="button-row"> |
| 138 <button id="bad" style="width:200px"><font style="color:red">bad</font></b
utton> |
| 139 <button id="good" style="width:200px"><font style="color:green">good</font
></button> |
| 140 <button id="poor" style="width:200px"><font style="color:blue">good w/mist
akes</font></button> |
| 141 <button id="error" style="width:200px"><font style="">error</font></button
> |
| 142 <button id="reset" style="width:200px"><font style="">reset</font></button
> |
| 143 <span style="float: right"> |
| 144 <span class="left-caret"><b></b></span> |
| 145 <span id="position" style="float:left; position:relative; top:12px; widt
h:100px"> |
| 146 <span class="current-position"></span> |
| 147 / |
| 148 <span class="total-entries"></span> |
| 149 </span> |
| 150 <span class="right-caret"><b></b></span> |
| 151 </span> |
| 152 </div> |
| 153 |
| 154 <h1><a id="url-holder" target="_blank"></a></h1> |
| 155 <div id="image-holder"> |
| 156 <div> |
| 157 <img id="base-img"></img> |
| 158 <img id="distilled-img"></img> |
| 159 </div> |
| 160 </div> |
| 161 </div> |
| 162 </div> |
| 163 <script src="test.js"></script> |
| 164 </html> |
OLD | NEW |