rev |
line source |
al@419
|
1 #!/bin/sh
|
al@419
|
2 #
|
al@419
|
3 # test.cgi - Test TazPanel styles.
|
al@419
|
4 #
|
al@419
|
5 # Copyright (C) 2015 SliTaz GNU/Linux - BSD License
|
al@419
|
6 #
|
al@419
|
7
|
al@419
|
8 # Common functions from libtazpanel
|
pascal@613
|
9 . ./lib/libtazpanel
|
al@419
|
10 get_config
|
al@419
|
11 header
|
al@419
|
12
|
al@501
|
13 TITLE='Test'
|
al@419
|
14
|
al@501
|
15 xhtml_header 'Show icons and styles'
|
al@419
|
16
|
al@419
|
17 cat <<EOT
|
al@419
|
18
|
al@419
|
19 <section>
|
al@558
|
20 <header><span data-img="@info@"></span>Buttons with font icons</header>
|
al@558
|
21 EOT
|
al@558
|
22
|
al@558
|
23 icons="@add@:add @admin@:admin @back@:back @battery@:battery @brightness@:brightness \
|
al@558
|
24 @cancel@:cancel @cd@:cd @check@:check @clock@:clock @conf@:conf @daemons@:daemons @delete@:delete \
|
al@558
|
25 @detect@:detect @diff@:diff @download@:download @edit@:edit @eth@:eth @group@:group @grub@:grub \
|
al@558
|
26 @hdd@:hdd @help@:help @history@:history @info@:info @install@:install @link@:link @list@:list \
|
al@558
|
27 @locale@:locale @lock@:lock @logs@:logs @loopback@:loopback @man@:man @modules@:modules @off@:off \
|
al@558
|
28 @ok@:ok @on@:on @opt@:opt @proc@:proc @refresh@:refresh @removable@:removable @remove@:remove \
|
al@558
|
29 @repack@:repack @report@:report @restart@:restart @run@:run @save@:save @scan@:scan \
|
al@558
|
30 @settings@:settings @slitaz@:slitaz @start@:start @stop@:stop @sync@:sync @tags@:tags @tag@:tag \
|
al@558
|
31 @tazx@:tazx @temperature@:temperature @terminal@:terminal @text@:text @unlink@:unlink \
|
al@558
|
32 @unlock@:unlock @upgrade@:upgrade @user@:user @view@:view @web@:web @wifi@:wifi @toggle@:toggle \
|
al@558
|
33 @chlock@:chlock @calendar@:calendar @modem@:modem @vpn@:vpn @display@:display @cpu@:cpu \
|
al@558
|
34 @floppy@:floppy @folder@:folder"
|
al@558
|
35
|
al@558
|
36 echo "$icons" | \
|
al@558
|
37 awk 'BEGIN{RS=" "; FS=":"} {
|
al@558
|
38 printf "<button data-icon=\"%s\">%s</button>", $1, $2;
|
al@558
|
39 }'
|
al@558
|
40
|
al@558
|
41 cat <<EOT
|
al@419
|
42 </section>
|
al@419
|
43
|
al@419
|
44
|
al@419
|
45 <section>
|
al@558
|
46 <header><span data-img="@link@"></span>Links with font icons</header>
|
al@419
|
47 <div>
|
al@419
|
48 <p>
|
al@558
|
49 EOT
|
al@558
|
50
|
al@558
|
51 echo "$icons" | \
|
al@558
|
52 awk 'BEGIN{RS=" "; FS=":"} {
|
al@558
|
53 printf "<a data-icon=\"%s\" href=\"#\">%s</a> ", $1, $2;
|
al@558
|
54 }'
|
al@558
|
55
|
al@558
|
56 cat <<EOT
|
al@419
|
57 </p>
|
al@419
|
58 </div>
|
al@419
|
59 </section>
|
al@419
|
60
|
al@419
|
61
|
al@419
|
62 <section>
|
al@558
|
63 <header><span data-img="@view@"></span>Links with font icons only (small buttons)</header>
|
al@419
|
64 <p>
|
al@558
|
65 EOT
|
al@558
|
66
|
al@558
|
67 echo "$icons" | \
|
al@558
|
68 awk 'BEGIN{RS=" "; FS=":"} {
|
al@558
|
69 printf "<a data-img=\"%s\" href=\"#\"></a>%s ", $1, $2;
|
al@558
|
70 }'
|
al@558
|
71
|
al@558
|
72 cat <<EOT
|
al@556
|
73 </p>
|
al@419
|
74 </section>
|
al@419
|
75
|
al@501
|
76
|
al@501
|
77 <section>
|
al@558
|
78 <header><span data-img="@sechi@"></span>Status icons</header>
|
al@501
|
79 <div>
|
al@558
|
80 <span data-icon="@lvl0@">lvl0</span> <span data-icon="@lvl1@">lvl1</span> <span data-icon="@lvl2@">lvl2</span>
|
al@558
|
81 <span data-icon="@lvl3@">lvl3</span> <span data-icon="@lvl4@">lvl4, lvl5</span>
|
al@558
|
82 <span data-icon="@online@">online</span> <span data-icon="@offline@">offline</span>
|
al@558
|
83 <span data-icon="@sechi@">sechi</span> <span data-icon="@secmi@">secmi</span> <span data-icon="@seclo@">seclo</span>
|
al@558
|
84 <span data-icon="@pkg@">pkg</span> <span data-icon="@pkgi@">pkgi</span> <span data-icon="@pkgib@">pkgib</span>
|
al@501
|
85 </div>
|
al@501
|
86 <div>
|
al@558
|
87 <span data-icon="@msg@">msg</span> <span data-icon="@msgerr@">msgerr</span>
|
al@558
|
88 <span data-icon="@msgwarn@">msgwarn</span> <span data-icon="@msgup@">msgup</span>
|
al@558
|
89 <span data-icon="@msgtip@">msgtip</span>
|
al@501
|
90 </div>
|
al@501
|
91 </section>
|
al@501
|
92
|
al@501
|
93
|
al@501
|
94 <section>
|
al@501
|
95 <header><span data-img=""></span>Font components</header>
|
al@501
|
96 <div>
|
al@501
|
97 <span data-icon="">#f200</span> <span data-icon="">#f201</span>
|
al@501
|
98 <span data-icon="">#f202</span> <span data-icon="">#f203</span>
|
al@501
|
99 <span data-icon="">#f204</span> <span data-icon="">#f205</span>
|
al@501
|
100 <span data-icon="">#f206</span> <span data-icon="">#f207</span>
|
al@501
|
101 <span data-icon="">#f208</span> <span data-icon="">#f209</span>
|
al@501
|
102 <span data-icon="">#f20a</span> <span data-icon="">#f20b</span>
|
al@501
|
103 <span data-icon="">#f20c</span> <span data-icon="">#f20d</span>
|
al@501
|
104 </div>
|
al@501
|
105 </section>
|
al@501
|
106
|
al@501
|
107
|
al@501
|
108 <section>
|
al@501
|
109 <header>Message boxes</header>
|
al@501
|
110 $(msg msg "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
|
al@501
|
111 $(msg tip "Fusce volutpat est a euismod malesuada.")
|
al@501
|
112 $(msg warn "Aenean elementum augue et nisl sollicitudin, ut pellentesque leo rutrum.")
|
al@501
|
113 $(msg err "Etiam nisi elit, fringilla sit amet consectetur quis, efficitur eu ligula.")
|
al@501
|
114 $(msg up "Sed pharetra ex ligula, nec commodo erat suscipit eu.")
|
al@501
|
115 </section>
|
al@501
|
116
|
al@501
|
117
|
al@419
|
118 <section>
|
al@558
|
119 <header><span data-img="@check@"></span>User input elements</header>
|
al@419
|
120 <div><form>
|
al@419
|
121 <table>
|
al@419
|
122 <tr><td>Text:</td>
|
al@419
|
123 <td><input type="text" placeholder="Text"/></td>
|
al@419
|
124 </tr>
|
al@419
|
125 <tr><td>Password:</td>
|
al@419
|
126 <td><input type="password" placeholder="Password"/></td>
|
al@419
|
127 </tr>
|
al@419
|
128 <tr><td>Button:</td>
|
al@558
|
129 <td><input type="button" value="Button" data-icon="@ok@"/></td>
|
al@419
|
130 </tr>
|
al@419
|
131 <tr><td>Checkbox:</td>
|
al@419
|
132 <td><input type="checkbox" id="chk"/><label for="chk">Check it</label></td>
|
al@419
|
133 </tr>
|
al@419
|
134 <tr><td>Radio:</td>
|
al@419
|
135 <td>
|
al@419
|
136 <label><input type="radio" name="rad" id="radio1"/>Option 1</label>
|
al@419
|
137 <label><input type="radio" name="rad" id="radio2" checked/>Option 2</label>
|
al@419
|
138 <label><input type="radio" name="rad" id="radio3"/>Option 3</label>
|
al@419
|
139 </td>
|
al@419
|
140 </tr>
|
al@419
|
141 <tr><td>File:</td>
|
al@419
|
142 <td><input type="file" accept=".txt,.png"/></td>
|
al@419
|
143 </tr>
|
al@419
|
144 <tr><td>Image:</td>
|
al@419
|
145 <td><input type="image" src="/styles/default/images/msg-warn.png"/></td>
|
al@419
|
146 </tr>
|
al@419
|
147 <tr><td>Reset:</td><td><input type="reset"/></td></tr>
|
al@419
|
148 <tr><td>Submit:</td><td><input type="submit"/></td></tr>
|
al@419
|
149 <tr><td>Select:</td>
|
al@558
|
150 <td><select><option data-icon="@user@">Option 1<option>Option 2<option>Option 3</select></td>
|
al@419
|
151 </tr>
|
al@419
|
152 <tr><td colspan="2"><b>HTMLÂ 5 inputs:</b></td></tr>
|
al@419
|
153 <tr><td>Search:</td><td><input type="search" results="5" autosave="pkgsearch" autocomplete="on"/></td></tr>
|
al@419
|
154 <tr><td>Number:</td><td><input type="number" name="n" value="3" min="0" max="10"/></td></tr>
|
al@419
|
155 <tr><td>Range:</td><td><input type="range" name="r" value="3" min="0" max="10"/></td></tr>
|
al@419
|
156 <tr><td>Color:</td><td><input type="color" name="c"/></td></tr>
|
al@419
|
157 <tr><td>Tel:</td><td><input type="tel" name="t"/></td></tr>
|
al@419
|
158 <tr><td>URL:</td><td><input type="url" name="u"/></td></tr>
|
al@419
|
159 <tr><td>E-mail:</td><td><input type="email" name="e" data-x="A part number is a digit followed by three uppercase letters." required/></td></tr>
|
al@419
|
160 <tr><td>Date:</td><td><input type="date" name="d" value="$(date +'%F')"/></td></tr>
|
al@419
|
161 <tr><td>Month:</td><td><input type="month" name="m" value="$(date +'%Y-%m')"/></td></tr>
|
al@419
|
162 <tr><td>Week:</td><td><input type="week" name="w" value="$(date +'%Y-W%V')"/></td></tr>
|
al@419
|
163 <tr><td>Time:</td><td><input type="time" name="ti" value="$(date +'%R')"/></td></tr>
|
al@419
|
164 <tr><td>Date & Time:</td><td><input type="datetime" name="dt" value="$(date +'%FT%RZ')"/></td></tr>
|
al@419
|
165 <tr><td>Date & Time Local:</td><td><input type="datetime-local" name="dtl" value="$(date +'%FT%R')"/></td></tr>
|
al@419
|
166 </table>
|
al@419
|
167 </form></div>
|
al@419
|
168 </section>
|
al@419
|
169 EOT
|
al@419
|
170 xhtml_footer
|
al@419
|
171 exit 0
|