chrome-refresh/popup.html at master · pastyface/chrome-refresh · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

	<style type="text/css">

body {font-family: Arial, Helvetica, sans-serif; }

p { clear:both; }
fieldset { border:0; margin-top: 1em;}
label { margin:0; font-weight: normal;}
/*#value {font-weight: bold; }*/
.radioOpt { font-size: 0.75em; }
.disabled { color: silver; }
button {width: 70px}

p.title { font-size: 1.0em; padding: 0px; margin-bottom: 2px; }

#form-wrapper { margin-bottom: 40px; margin-left: 1px; }
#main-wrapper {  height: 40px; }
#dragHelper { display: inline;}

#slider1, #slider2 { margin:0; padding:0; border:0; }

/* slider widget */

.sliderControl { position: relative;  height: 50px; clear: both; margin-top: 0px; }
.sliderIndicator {width:36px; height:50px; top: 0; z-index: 3; background:url(slider_pull.gif) no-repeat center bottom; position: absolute;}
.sliderIndicator span {display: block; font-size: .9em; color: #428b1d; border: 2px solid #428b1d; background: #fff; padding: 2px; height: 11px; text-align:center; }

.xScale {left: 15px; top: 50px; z-index: 1; }
.xScale, .xScale * {margin: 0; padding: 0; position: relative;}
.xScale dd, .xScale li {position: absolute; top: 0; text-align: left; list-style: none; font-size:1em; }
.xScale span {position: absolute; top: .5em; }
.xScale dd.morning, .xScale li.morning {color: #69a535; border-top: 4px solid #69a535;}
.xScale dd.evening, .xScale li.evening {color: #428b1d; border-top: 4px solid #428b1d;}
.xScale dt {position: absolute; top: 3em; color: #808080; text-transform: uppercase; font-size: .9em;}
.xScale dt.morning {left: 0; color: #69a535;}
.xScale dt.evening {right: 36px; color: #428b1d;}
div.sliderSpan {position: absolute; z-index: 0; top: 25px; left: 15px; height: 15px; overflow: hidden; width: 500px;background: #d1d1cd url(slider_spanBG.gif) center no-repeat;}
div.blotA, div.blotB {position: absolute; left: 0; width: 0;  z-index: 99999; top: 0; border-top: 15px solid #fff; }
div.scale {display: block; position: absolute; left: 15px; top: 47px; z-index: 2; border-bottom: 1px solid #000; height: 3px;}
div.scale span {position: absolute; border-right: 1px solid #000; height: 3px;top: 4px; font-size: 0; line-height: 0;}
p.caption {font-size: 1em; font-style: italic; margin-top: 6em;}

	</style>

	<script src="testUserDevice.js" type="text/javascript"></script>
	<script src="jquery-latest.pack.js" type="text/javascript"></script>
	<script src="interface.js" type="text/javascript"></script>
  <script src="jquery.slider.js" type="text/javascript"></script>
  <script src="popup.js" type="text/javascript"></script>

<p class="title">Refresh this:</p>
<div id="main-wrapper" align="center">
<table width="180">
  <tr>
    <td>
      <span class="radioOpt">
        <label for="r1">
          <input id="r1" type="radio" name="stick" value="url" />
          URL
        </label>
        <label for="r2">
          <input id="r2" type="radio" name="stick" value="site" />
          Website
        </label>
        <label for="r3">
          <input id="r3" type="radio" name="stick" value="tab" />
          Tab
        </label>
      </span>
    </td>
  </tr>
</table>
</div>
<p class="title">Every: <span id="value"></span></p>
<div align="center">
<div id="form-wrapper">
<form action="#" >
  <fieldset id="slider1">
  	<select name="delay" id="delay">
  	  <option value="5">5s</option>
  	  <option value="15">15s</option>
  	  <option value="30">30s</option>
  	  <option value="60" selected="selected">1m</option>
      <option value="300">5m</option>
      <option value="900">15m</option>
      <option value="1800">30m</option>
  	</select>
  </fieldset>
</form>
</div>

<div align="left">
  <input id="countdown" type="checkbox" value="countdown" />
  <label id="label-countdown" for="countdown">Show Countdown</label>
</div>
<br/>
<div align="left">
  <input id="auto" type="checkbox" value="auto" />
  <label id="label-auto" for="auto">Start Automatically</label>
</div>
<br/>
<table width="200">
  <tr>
    <td width="80">
    </td>
    <td width="40">
      <button id="stop" class="button">
        Stop
      </button>
    </td>
    <td width="40">
      <button id="start" class="button">
        Start
      </button>
    </td>
  </tr>
</table>
</div>