123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Time selector</title>
- <link rel="stylesheet" href="../time_selector.css">
- <!--
- This <style> and <link> is only used for the example code, is no needed for the real case use
- -->
- <style type="text/css">
- html, body { font-size: 10px; margin: 0; padding: 0; }
- </style>
- </head>
- <body>
- <!-- Time Picker -->
- <form id="time-picker-popup" role="dialog" data-type="time-selector">
- <h1 data-l10n-id="select-time">Select time</h1>
- <div class="picker-container format12h">
- <div class="picker-bar-background"></div>
- <div class="value-picker-hours-wrapper">
- <div style="transform: translateY(-110px);" class="value-picker-hours">
- <div class="picker-unit">1</div>
- <div class="picker-unit">2</div>
- <div class="picker-unit">3</div>
- <div class="picker-unit">4</div>
- <div class="picker-unit">5</div>
- <div class="picker-unit">6</div>
- <div class="picker-unit">7</div>
- <div class="picker-unit">8</div>
- <div class="picker-unit">9</div>
- <div class="picker-unit">10</div>
- <div class="picker-unit">11</div>
- <div class="picker-unit">12</div>
- </div>
- </div>
- <div class="value-picker-minutes-wrapper">
- <div style="transform: translateY(0px);" class="value-picker-minutes">
- <div class="picker-unit">00</div>
- <div class="picker-unit">01</div>
- <div class="picker-unit">02</div>
- <div class="picker-unit">03</div>
- <div class="picker-unit">04</div>
- <div class="picker-unit">05</div>
- <div class="picker-unit">06</div>
- <div class="picker-unit">07</div>
- <div class="picker-unit">08</div>
- <div class="picker-unit">09</div>
- <div class="picker-unit">10</div>
- <div class="picker-unit">11</div>
- <div class="picker-unit">12</div>
- <div class="picker-unit">13</div>
- <div class="picker-unit">14</div>
- <div class="picker-unit">15</div>
- <div class="picker-unit">16</div>
- <div class="picker-unit">17</div>
- <div class="picker-unit">18</div>
- <div class="picker-unit">19</div>
- <div class="picker-unit">20</div>
- <div class="picker-unit">21</div>
- <div class="picker-unit">22</div>
- <div class="picker-unit">23</div>
- <div class="picker-unit">24</div>
- <div class="picker-unit">25</div>
- <div class="picker-unit">26</div>
- <div class="picker-unit">27</div>
- <div class="picker-unit">28</div>
- <div class="picker-unit">29</div>
- <div class="picker-unit">30</div>
- <div class="picker-unit">31</div>
- <div class="picker-unit">32</div>
- <div class="picker-unit">33</div>
- <div class="picker-unit">34</div>
- <div class="picker-unit">35</div>
- <div class="picker-unit">36</div>
- <div class="picker-unit">37</div>
- <div class="picker-unit">38</div>
- <div class="picker-unit">39</div>
- <div class="picker-unit">40</div>
- <div class="picker-unit">41</div>
- <div class="picker-unit">42</div>
- <div class="picker-unit">43</div>
- <div class="picker-unit">44</div>
- <div class="picker-unit">45</div>
- <div class="picker-unit">46</div>
- <div class="picker-unit">47</div>
- <div class="picker-unit">48</div>
- <div class="picker-unit">49</div>
- <div class="picker-unit">50</div>
- <div class="picker-unit">51</div>
- <div class="picker-unit">52</div>
- <div class="picker-unit">53</div>
- <div class="picker-unit">54</div>
- <div class="picker-unit">55</div>
- <div class="picker-unit">56</div>
- <div class="picker-unit">57</div>
- <div class="picker-unit">58</div>
- <div class="picker-unit">59</div>
- </div>
- </div>
- <div class="value-picker-hour24-wrapper">
- <div style="transform: translateY(0px);" class="value-picker-hour24-state">
- <div class="picker-unit">AM</div>
- <div class="picker-unit">PM</div>
- </div>
- </div>
- <div class="value-indicator">
- <div class="value-indicator-colon">:</div>
- </div>
- </div>
- <menu>
- <button>Cancel</button>
- <button class="affirmative">Ok</button>
- </menu>
- </form>
- </body>
- </html>
|