From 076353fc0b9bb19c21be21e742c0a1d14110ccfb Mon Sep 17 00:00:00 2001
From: Glenwing <glenwingkyros@gmail.com>
Date: Sun, 3 Sep 2017 23:27:27 -0700
Subject: [PATCH] DIU Header Bar Changed

---
 diu/index.html | 173 +++++++++++++++++++++++++------------------------
 1 file changed, 87 insertions(+), 86 deletions(-)

diff --git a/diu/index.html b/diu/index.html
index 0dcd3d0..3fcc41b 100644
--- a/diu/index.html
+++ b/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 />&nbsp;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" />&nbsp;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';">&#10005;</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';">&#10005;</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">&nbsp;</td>
-                    <td class="result" style="color:#DD1111;">
-                        <b>Warning: Formats commonly known as "21:9" are not an exact 21:9 ratio</b><br />
-                        &nbsp;&nbsp;2560 <span style="font-size:10px;">&#10005;</span> 1080 is a 64:27 ratio<br />
-                        &nbsp;&nbsp;3440 <span style="font-size:10px;">&#10005;</span> 1440 is a 43:18 ratio<br />
-                        &nbsp;&nbsp;3840 <span style="font-size:10px;">&#10005;</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 />&nbsp;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" />&nbsp;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';">&#10005;</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';">&#10005;</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">&nbsp;</td>
+                        <td class="result" style="color:#DD1111;">
+                            <b>Warning: Formats commonly known as "21:9" are not an exact 21:9 ratio</b><br />
+                            &nbsp;&nbsp;2560 <span style="font-size:10px;">&#10005;</span> 1080 is a 64:27 ratio<br />
+                            &nbsp;&nbsp;3440 <span style="font-size:10px;">&#10005;</span> 1440 is a 43:18 ratio<br />
+                            &nbsp;&nbsp;3840 <span style="font-size:10px;">&#10005;</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;">