1 <!-- 2 An option page for configuring notifications. 3 4 Copyright 2010 the Chromium Authors 5 6 Use of this source code is governed by a BSD-style license that can be found 7 in the "LICENSE" file. 8 9 Brian Kennish <bkennish (a] chromium.org> 10 --> 11 <title>Notification Demo</title> 12 <style> 13 /* Clone the look and feel of "chrome://" pages. */ 14 body { 15 margin: 10px; 16 font: 84% Arial, sans-serif 17 } 18 19 h1 { font-size: 156% } 20 21 h1 img { 22 margin: 1px 5px 0 1px; 23 vertical-align: middle 24 } 25 26 h2 { 27 border-top: 1px solid #9cc2ef; 28 background-color: #ebeff9; 29 padding: 3px 5px; 30 font-size: 100% 31 } 32 </style> 33 <script> 34 /* 35 Grays out or [whatever the opposite of graying out is called] the option 36 field. 37 */ 38 function ghost(isDeactivated) { 39 options.style.color = isDeactivated ? 'graytext' : 'black'; 40 // The label color. 41 options.frequency.disabled = isDeactivated; // The control manipulability. 42 } 43 44 onload = function() { 45 // Initialize the option controls. 46 options.isActivated.checked = JSON.parse(localStorage.isActivated); 47 // The display activation. 48 options.frequency.value = localStorage.frequency; 49 // The display frequency, in minutes. 50 51 if (!options.isActivated.checked) { ghost(true); } 52 53 // Set the display activation and frequency. 54 options.isActivated.onchange = function() { 55 localStorage.isActivated = options.isActivated.checked; 56 ghost(!options.isActivated.checked); 57 }; 58 59 options.frequency.onchange = function() { 60 localStorage.frequency = options.frequency.value; 61 }; 62 }; 63 </script> 64 <h1> 65 <img src="64.png" alt="Toast"> 66 Notification Demo 67 </h1> 68 <h2>Options</h2> 69 <form id="options"> 70 <input type="checkbox" name="isActivated" checked> 71 Display a notification every 72 <select name="frequency"> 73 <option>1</option> 74 <option>2</option> 75 <option>3</option> 76 <option>4</option> 77 <option>5</option> 78 <option>10</option> 79 <option>15</option> 80 <option>20</option> 81 <option>25</option> 82 <option>30</option> 83 </select> 84 minute(s). 85 </form> 86
