| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Font Settings Sample Extension</title> |
| <script src="options.js"></script> |
| <link rel="stylesheet" href="css/chrome_shared.css"> |
| <link rel="stylesheet" href="css/widgets.css"> |
| <link rel="stylesheet" href="css/uber_shared.css"> |
| <style> |
| body.uber-frame { |
| font-family: sans-serif; |
| -webkit-margin-start: 30px; |
| font-size: 14px; |
| } |
| |
| body.uber-frame section { |
| max-width: none; |
| } |
| |
| .font-setting-container { |
| display: -webkit-box; |
| } |
| |
| .font-input-div { |
| -webkit-margin-end: 3em; |
| min-width: 12em; |
| } |
| </style> |
| </head> |
| <body class="uber-frame"> |
| <div style="min-width: 600px;"> |
| <h1>Font Settings Sample Extension</h1> |
| <section> |
| <h3>Script</h3> |
| <div> |
| <select id="scriptList"> |
| <option value="Zyyy">Default</option> |
| <option value="Arab">Arabic</option> |
| <option value="Armn">Armenian</option> |
| <option value="Beng">Bengali</option> |
| <option value="Cher">Cherokee</option> |
| <option value="Cyrl">Cyrillic</option> |
| <option value="Deva">Devanagari</option> |
| <option value="Ethi">Ethiopic</option> |
| <option value="Geor">Georgian</option> |
| <option value="Grek">Greek</option> |
| <option value="Gujr">Gujarati</option> |
| <option value="Guru">Gurmukhi</option> |
| <option value="Hebr">Hebrew</option> |
| <option value="Jpan">Japanese</option> |
| <option value="Knda">Kannada</option> |
| <option value="Khmr">Khmer</option> |
| <option value="Hang">Korean</option> |
| <option value="Laoo">Lao</option> |
| <option value="Mlym">Malayalam</option> |
| <option value="Mong">Mongolian</option> |
| <option value="Mymr">Myanmar</option> |
| <option value="Orya">Oriya</option> |
| <option value="Hans">Simplified Chinese</option> |
| <option value="Sinh">Sinhala</option> |
| <option value="Taml">Tamil</option> |
| <option value="Telu">Telugu</option> |
| <option value="Thaa">Thaana</option> |
| <option value="Thai">Thai</option> |
| <option value="Tibt">Tibetan</option> |
| <option value="Hant">Traditional Chinese</option> |
| <option value="Cans">Unified Canadian Aboriginal Syllabics</option> |
| <option value="Yiii">Yi</option> |
| </select> |
| </div> |
| <div style="margin-left: 20px; overflow-x: auto;"> |
| <section> |
| <h3>Standard</h3> |
| <div class="font-setting-container"> |
| <div class="font-input-div"> |
| <select id="standardFontList"></select> |
| </div> |
| <div id="standardFontSample" style="font-family: standard;"> |
| Lorem ipsum dolor sit amat. |
| </div> |
| </div> |
| </section> |
| <section> |
| <h3>Serif</h3> |
| <div class="font-setting-container"> |
| <div class="font-input-div"> |
| <select id="serifFontList"></select> |
| </div> |
| <div id="serifFontSample" style="font-family: serif;"> |
| Lorem ipsum dolor sit amat. |
| </div> |
| </div> |
| </section> |
| <section> |
| <h3>Sans-Serif</h3> |
| <div class="font-setting-container"> |
| <div class="font-input-div"> |
| <select id="sansSerifFontList"></select> |
| </div> |
| <div id="sansSerifFontSample" style="font-family: sans-serif;"> |
| Lorem ipsum dolor sit amat. |
| </div> |
| </div> |
| </section> |
| <section> |
| <h3>Fixed</h3> |
| <div class="font-setting-container"> |
| <div class="font-input-div"> |
| <select id="fixedFontList"></select> |
| </div> |
| <div id="fixedFontSample" style="font-family: monospace;"> |
| Lorem ipsum dolor sit amat. |
| </div> |
| </div> |
| </section> |
| </div> |
| </section> |
| <section> |
| <h3>Default Font Size</h3> |
| <div class="font-setting-container"> |
| <div class="font-input-div"> |
| <input type="number" id="defaultFontSize" min="0" max="99"> |
| </div> |
| </div> |
| </section> |
| <section> |
| <h3>Default Fixed Font Size</h3> |
| <div class="font-setting-container"> |
| <div class="font-input-div"> |
| <input type="number" id="defaultFixedFontSize" min="0" max="99"> |
| </div> |
| </div> |
| </section> |
| <section> |
| <h3>Minimum Font Size</h3> |
| <div class="font-setting-container"> |
| <div class="font-input-div"> |
| <input type="number" id="minFontSize" min="0" max="99"> |
| </div> |
| <div id="minFontSample" style="font-family: standard"> |
| Lorem ipsum dolor sit amat. |
| </div> |
| </div> |
| </section> |
| <section> |
| <h3> |
| <button id="clearButton">Clear All Settings</button> |
| </h3> |
| </section> |
| </div> |
| </div> |
| </body> |
| </html> |
