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