index.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Time selector</title>
  6. <link rel="stylesheet" href="../time_selector.css">
  7. <!--
  8. This <style> and <link> is only used for the example code, is no needed for the real case use
  9. -->
  10. <style type="text/css">
  11. html, body { font-size: 10px; margin: 0; padding: 0; }
  12. </style>
  13. </head>
  14. <body>
  15. <!-- Time Picker -->
  16. <form id="time-picker-popup" role="dialog" data-type="time-selector">
  17. <h1 data-l10n-id="select-time">Select time</h1>
  18. <div class="picker-container format12h">
  19. <div class="picker-bar-background"></div>
  20. <div class="value-picker-hours-wrapper">
  21. <div style="transform: translateY(-110px);" class="value-picker-hours">
  22. <div class="picker-unit">1</div>
  23. <div class="picker-unit">2</div>
  24. <div class="picker-unit">3</div>
  25. <div class="picker-unit">4</div>
  26. <div class="picker-unit">5</div>
  27. <div class="picker-unit">6</div>
  28. <div class="picker-unit">7</div>
  29. <div class="picker-unit">8</div>
  30. <div class="picker-unit">9</div>
  31. <div class="picker-unit">10</div>
  32. <div class="picker-unit">11</div>
  33. <div class="picker-unit">12</div>
  34. </div>
  35. </div>
  36. <div class="value-picker-minutes-wrapper">
  37. <div style="transform: translateY(0px);" class="value-picker-minutes">
  38. <div class="picker-unit">00</div>
  39. <div class="picker-unit">01</div>
  40. <div class="picker-unit">02</div>
  41. <div class="picker-unit">03</div>
  42. <div class="picker-unit">04</div>
  43. <div class="picker-unit">05</div>
  44. <div class="picker-unit">06</div>
  45. <div class="picker-unit">07</div>
  46. <div class="picker-unit">08</div>
  47. <div class="picker-unit">09</div>
  48. <div class="picker-unit">10</div>
  49. <div class="picker-unit">11</div>
  50. <div class="picker-unit">12</div>
  51. <div class="picker-unit">13</div>
  52. <div class="picker-unit">14</div>
  53. <div class="picker-unit">15</div>
  54. <div class="picker-unit">16</div>
  55. <div class="picker-unit">17</div>
  56. <div class="picker-unit">18</div>
  57. <div class="picker-unit">19</div>
  58. <div class="picker-unit">20</div>
  59. <div class="picker-unit">21</div>
  60. <div class="picker-unit">22</div>
  61. <div class="picker-unit">23</div>
  62. <div class="picker-unit">24</div>
  63. <div class="picker-unit">25</div>
  64. <div class="picker-unit">26</div>
  65. <div class="picker-unit">27</div>
  66. <div class="picker-unit">28</div>
  67. <div class="picker-unit">29</div>
  68. <div class="picker-unit">30</div>
  69. <div class="picker-unit">31</div>
  70. <div class="picker-unit">32</div>
  71. <div class="picker-unit">33</div>
  72. <div class="picker-unit">34</div>
  73. <div class="picker-unit">35</div>
  74. <div class="picker-unit">36</div>
  75. <div class="picker-unit">37</div>
  76. <div class="picker-unit">38</div>
  77. <div class="picker-unit">39</div>
  78. <div class="picker-unit">40</div>
  79. <div class="picker-unit">41</div>
  80. <div class="picker-unit">42</div>
  81. <div class="picker-unit">43</div>
  82. <div class="picker-unit">44</div>
  83. <div class="picker-unit">45</div>
  84. <div class="picker-unit">46</div>
  85. <div class="picker-unit">47</div>
  86. <div class="picker-unit">48</div>
  87. <div class="picker-unit">49</div>
  88. <div class="picker-unit">50</div>
  89. <div class="picker-unit">51</div>
  90. <div class="picker-unit">52</div>
  91. <div class="picker-unit">53</div>
  92. <div class="picker-unit">54</div>
  93. <div class="picker-unit">55</div>
  94. <div class="picker-unit">56</div>
  95. <div class="picker-unit">57</div>
  96. <div class="picker-unit">58</div>
  97. <div class="picker-unit">59</div>
  98. </div>
  99. </div>
  100. <div class="value-picker-hour24-wrapper">
  101. <div style="transform: translateY(0px);" class="value-picker-hour24-state">
  102. <div class="picker-unit">AM</div>
  103. <div class="picker-unit">PM</div>
  104. </div>
  105. </div>
  106. <div class="value-indicator">
  107. <div class="value-indicator-colon">:</div>
  108. </div>
  109. </div>
  110. <menu>
  111. <button>Cancel</button>
  112. <button class="affirmative">Ok</button>
  113. </menu>
  114. </form>
  115. </body>
  116. </html>