DIU Header Bar Changed
This commit is contained in:
Glenwing
parent
dedc58df41
commit
076353fc0b
173
diu/index.html
173
diu/index.html
@ -26,7 +26,6 @@
|
||||
font-size: 15px;
|
||||
padding-bottom: 48px;
|
||||
|
||||
width: 512px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@ -141,91 +140,93 @@
|
||||
<div class="wrapper">
|
||||
<div class="main">
|
||||
<div style="font-weight:bold; font-size:16px; padding:16px; padding-bottom:0px;"><a href="https://glenwing.github.io" style="text-decoration:none; color:#000000;">Display Info Utility</a><br /><hr /></div>
|
||||
<!-- FIRST SEGMENT -->
|
||||
<div class="title">DISPLAY INFO UTILITY</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="label"><b>Size:</b></td>
|
||||
<td>
|
||||
<input id="INPUT_SIZE" style="width:50px;" type="text" onchange="update();" oninput="this.onchange();" onfocus="this.select();" tabindex="2" autofocus />
|
||||
</td>
|
||||
<td style="width:100%">
|
||||
<form id="unit_select">
|
||||
<label style="cursor:pointer; vertical-align:middle"><input name="unit_select" value="in" type="radio" onchange="document.getElementById('INPUT_SIZE').focus(); update();" style="cursor:pointer; vertical-align:middle; margin-bottom:3px;" tabindex="1" checked /> in</label><br />
|
||||
<label style="cursor:pointer; vertical-align:middle"><input name="unit_select" value="cm" type="radio" onchange="document.getElementById('INPUT_SIZE').focus(); update();" style="cursor:pointer; vertical-align:middle; margin-bottom:3px;" tabindex="1" /> cm</label>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><b>Resolution:</b></td>
|
||||
<td colspan="2" style="width:100%">
|
||||
<input id="INPUT_HRES" class="res_input" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="3" />
|
||||
<span style="font-size:10px; font-family:'Courier New';">✕</span>
|
||||
<input id="INPUT_VRES" class="res_input" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="4" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- SECOND SEGMENT -->
|
||||
<div class="title">GENERAL INFO</div>
|
||||
<table style="min-width:160px;">
|
||||
<tr>
|
||||
<td class="label">Ratio:</td>
|
||||
<td id="RESULT_RATIO" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Total Pixels:</td>
|
||||
<td id="RESULT_TOTAL_PX" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Pixel Density:</td>
|
||||
<td id="RESULT_PX_DENSITY" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Width:</td>
|
||||
<td id="RESULT_WIDTH" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Height:</td>
|
||||
<td id="RESULT_HEIGHT" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Area:</td>
|
||||
<td id="RESULT_AREA" class="result"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- THIRD SEGMENT -->
|
||||
<div class="title">COMPANION FORMATS</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="label">Companion Resolution<br />or Aspect Ratio:</td>
|
||||
<td>
|
||||
<input class="res_input" id="INPUT_HRES2" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
|
||||
<span style="font-size:10px; font-family:'Courier New';">✕</span>
|
||||
<input class="res_input" id="INPUT_VRES2" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="21_9_warning" style="display:none;">
|
||||
<td class="label"> </td>
|
||||
<td class="result" style="color:#DD1111;">
|
||||
<b>Warning: Formats commonly known as "21:9" are not an exact 21:9 ratio</b><br />
|
||||
2560 <span style="font-size:10px;">✕</span> 1080 is a 64:27 ratio<br />
|
||||
3440 <span style="font-size:10px;">✕</span> 1440 is a 43:18 ratio<br />
|
||||
3840 <span style="font-size:10px;">✕</span> 1600 is a 12:5 ratio<br />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Companion Size<br />(Matching Height):</td>
|
||||
<td id="RESULT_D_MATCH" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">(Optimum Resolution):</td>
|
||||
<td id="RESULT_OPT_RES" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Companion Size<br />(Matching Density):</td>
|
||||
<td id="RESULT_SIZE" class="result"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="width:512px; margin-left:auto; margin-right:auto;">
|
||||
<!-- FIRST SEGMENT -->
|
||||
<div class="title">DISPLAY INFO UTILITY</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="label"><b>Size:</b></td>
|
||||
<td>
|
||||
<input id="INPUT_SIZE" style="width:50px;" type="text" onchange="update();" oninput="this.onchange();" onfocus="this.select();" tabindex="2" autofocus />
|
||||
</td>
|
||||
<td style="width:100%">
|
||||
<form id="unit_select">
|
||||
<label style="cursor:pointer; vertical-align:middle"><input name="unit_select" value="in" type="radio" onchange="document.getElementById('INPUT_SIZE').focus(); update();" style="cursor:pointer; vertical-align:middle; margin-bottom:3px;" tabindex="1" checked /> in</label><br />
|
||||
<label style="cursor:pointer; vertical-align:middle"><input name="unit_select" value="cm" type="radio" onchange="document.getElementById('INPUT_SIZE').focus(); update();" style="cursor:pointer; vertical-align:middle; margin-bottom:3px;" tabindex="1" /> cm</label>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><b>Resolution:</b></td>
|
||||
<td colspan="2" style="width:100%">
|
||||
<input id="INPUT_HRES" class="res_input" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="3" />
|
||||
<span style="font-size:10px; font-family:'Courier New';">✕</span>
|
||||
<input id="INPUT_VRES" class="res_input" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" tabindex="4" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- SECOND SEGMENT -->
|
||||
<div class="title">GENERAL INFO</div>
|
||||
<table style="min-width:160px;">
|
||||
<tr>
|
||||
<td class="label">Ratio:</td>
|
||||
<td id="RESULT_RATIO" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Total Pixels:</td>
|
||||
<td id="RESULT_TOTAL_PX" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Pixel Density:</td>
|
||||
<td id="RESULT_PX_DENSITY" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Width:</td>
|
||||
<td id="RESULT_WIDTH" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Height:</td>
|
||||
<td id="RESULT_HEIGHT" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Area:</td>
|
||||
<td id="RESULT_AREA" class="result"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<!-- THIRD SEGMENT -->
|
||||
<div class="title">COMPANION FORMATS</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="label">Companion Resolution<br />or Aspect Ratio:</td>
|
||||
<td>
|
||||
<input class="res_input" id="INPUT_HRES2" style="text-align:right;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
|
||||
<span style="font-size:10px; font-family:'Courier New';">✕</span>
|
||||
<input class="res_input" id="INPUT_VRES2" style="text-align:left;" type="text" onchange="update();" oninput="this.onchange()" onfocus="this.select();" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="21_9_warning" style="display:none;">
|
||||
<td class="label"> </td>
|
||||
<td class="result" style="color:#DD1111;">
|
||||
<b>Warning: Formats commonly known as "21:9" are not an exact 21:9 ratio</b><br />
|
||||
2560 <span style="font-size:10px;">✕</span> 1080 is a 64:27 ratio<br />
|
||||
3440 <span style="font-size:10px;">✕</span> 1440 is a 43:18 ratio<br />
|
||||
3840 <span style="font-size:10px;">✕</span> 1600 is a 12:5 ratio<br />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Companion Size<br />(Matching Height):</td>
|
||||
<td id="RESULT_D_MATCH" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">(Optimum Resolution):</td>
|
||||
<td id="RESULT_OPT_RES" class="result"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Companion Size<br />(Matching Density):</td>
|
||||
<td id="RESULT_SIZE" class="result"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer" onclick="document.getElementById('profile_link').click();" style="padding-top:10px; padding-bottom:10px;">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user