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