source: extensions/CryptograPHP/template/admin.tpl @ 22725

Last change on this file since 22725 was 22725, checked in by mistic100, 8 years ago

index.php was selectable as a font ! fix display of checkboxes with small browser window

File size: 11.1 KB
Line 
1{combine_css path=$CRYPTO_PATH|@cat:"template/colorpicker/colorpicker.css"}
2{combine_script id="jquery.colorpicker" require="jquery" path=$CRYPTO_PATH|@cat:"template/colorpicker/colorpicker.js"}
3
4{footer_script require='jquery.colorpicker'}{literal}
5jQuery(document).ready(function() {
6  // colorpicker
7  $('.colorpicker-input')
8    .ColorPicker({
9      onSubmit: function(hsb, hex, rgb, el) {
10        $(el).val(hex);
11        $(el).ColorPickerHide();
12      },
13      onChange: function(hsb, hex, rgb, el) {
14        $(el).val(hex);
15        changeColor(el, hex);
16        changePreview();
17        setThemeCutom();
18      },
19      onBeforeShow: function () {
20        $(this).ColorPickerSetColor(this.value);
21      }
22    })
23    .bind('keyup', function(){
24      $(this).ColorPickerSetColor(this.value);
25      changeColor(this, $(this).val());
26    })
27    .each(function() {
28      changeColor(this, $(this).val());
29    });
30 
31  // change button
32  $('.button').click(function() {
33    $('.button').removeClass('selected');
34    $(this).addClass('selected');
35    $('input[name=button_color]').val($(this).attr('title'));
36    $('#reload').attr('src', '{/literal}{$CRYPTO_PATH}{literal}template/refresh_'+ $(this).attr('title') +'.png');
37  });
38 
39  // apply a preset
40  $('.preset').click(function() {
41    $('.preset').removeClass('selected');
42    $(this).addClass('selected');
43    eval('apply_'+ $(this).attr('title') +'();');
44    $('.colorpicker-input').each(function() { changeColor(this, $(this).val()); });
45    $('input[name=theme]').val($(this).attr('title'));
46    changePreview();
47  });
48 
49  // display customization panel
50  $('.customize').click(function() {
51    $('#theming').toggle();
52  });
53 
54  // change theme to 'custom' if a parameter is changed
55  $('input.istheme').change(function() {
56    setThemeCutom();
57  });
58 
59  // update the preview
60  $('input.istheme, input.preview').change(function() {
61    changePreview();
62  });
63  $('#reload').click(function() {
64    changePreview();
65  });
66 
67  // links for random color
68  $('a.random').click(function() {
69    $(this).prev('label').children('input').val('random');
70    changeColor($(this).prev('label').children('input'), 'random');
71    changePreview();
72    setThemeCutom();
73  });
74});
75
76function setThemeCutom() {
77  $('.preset').removeClass('selected');
78  $('input[name=theme]').val('custom');
79}
80
81function changePreview()
82{
83  options = new Array();
84  str = '';
85 
86  $('input[type="text"], input[type="radio"]:checked').each(function() {
87    options[$(this).attr('name')] = $(this).val();
88  });
89 
90  for (x in options) {
91    str+= '&' + x + '=' + options[x];
92  }
93  $('#captcha').attr('src', '{/literal}{$CRYPTO_PATH}{literal}securimage/securimage_preview.php?' + new Date().getTime() + str);
94}
95
96function changeColor(target, color) {
97  if (color == 'random') color = '808080';
98  if (parseInt(color, 16) > 16777215/2) {
99    $(target).css('color', '#222');
100  } else {
101    $(target).css('color', '#ddd');
102  }
103  $(target).css('background', '#'+color)
104}
105{/literal}
106
107{$PRESETS_FUNC}
108{/footer_script}
109
110{html_head}
111<style type="text/css">
112{foreach from=$fonts item=font}
113@font-face {ldelim} 
114  font-family: {$font} ; 
115  src: url({$CRYPTO_PATH}securimage/fonts/{$font}.ttf) format("truetype"); 
116}
117{/foreach}
118
119.preset img, .button img {ldelim}
120  margin:1px;
121  padding:3px;
122  border:1px solid #999;
123}
124.preset.selected img, .button.selected img {ldelim}
125  border-color:#f70;
126}
127
128.big-list {ldelim}
129  display:relative;
130  margin-left:51%;
131}
132.big-list label {ldelim}
133  display:inline-block;
134  margin-right:10px;
135}
136</style>
137{/html_head}
138
139<div class="titrePage">
140  <h2>Crypto Captcha</h2>
141</div>
142
143<form method="post" class="properties">
144<fieldset>
145  <legend>{'Configuration'|@translate}</legend>
146 
147  <ul>
148    <li>
149      <span class="property">{'Activate on'|@translate}</span>
150      <div class="big-list">
151        <label><input type="checkbox" name="activate_on[picture]" value="1" {if $crypto.activate_on.picture}checked="checked"{/if}> {'Picture comments'|@translate}</label>
152        {if $loaded.category}<label><input type="checkbox" name="activate_on[category]" value="1" {if $crypto.activate_on.category}checked="checked"{/if}> {'Album comments'|@translate}</label>{/if}
153        <label><input type="checkbox" name="activate_on[register]" value="1" {if $crypto.activate_on.register}checked="checked"{/if}> {'Register form'|@translate}</label>
154        {if $loaded.contactform}<label><input type="checkbox" name="activate_on[contactform]" value="1" {if $crypto.activate_on.contactform}checked="checked"{/if}> {'Contact form'|@translate}</label>{/if}
155        {if $loaded.guestbook}<label><input type="checkbox" name="activate_on[guestbook]" value="1" {if $crypto.activate_on.guestbook}checked="checked"{/if}> {'Guestbook'|@translate}</label>{/if}
156        </div>
157    </li>
158    <li>
159      <span class="property">{'Comments action'|@translate}</span>
160      <label><input type="radio" name="comments_action" value="reject" {if $crypto.comments_action == 'reject'}checked="checked"{/if}> {'Reject'|@translate}</label>
161      <label><input type="radio" name="comments_action" value="moderate" {if $crypto.comments_action == 'moderate'}checked="checked"{/if}> {'Moderate'|@translate}</label>
162    </li>
163    <li>
164      <span class="property">{'Captcha type'|@translate}</span>
165      <label><input type="radio" name="captcha_type" class="preview" value="string" {if $crypto.captcha_type == 'string'}checked="checked"{/if}> {'Random string'|@translate}</label>
166      <label><input type="radio" name="captcha_type" class="preview" value="math" {if $crypto.captcha_type == 'math'}checked="checked"{/if}> {'Simple equation'|@translate}</label>
167    </li>
168    <!--<li>
169      <span class="property">{'Case sensitive'|@translate}</span>
170      <label><input type="radio" name="case_sensitive" value="false" {if $crypto.case_sensitive == 'false'}checked="checked"{/if}> {'No'|@translate}</label>
171      <label><input type="radio" name="case_sensitive" value="true" {if $crypto.case_sensitive == 'true'}checked="checked"{/if}> {'Yes'|@translate}</label>
172    </li>-->
173    <li>
174      <span class="property">{'Code lenght'|@translate}</span>
175      <label><input type="text" name="code_length" class="preview" value="{$crypto.code_length}" size="6" maxlength="2"></label>
176    </li>
177    <li>
178      <span class="property">{'Width'|@translate}</span>
179      <label><input type="text" name="width" class="preview" value="{$crypto.width}" size="6" maxlength="3"> {'good value:'|@translate} lenght&times;30</label>
180    </li>
181    <li>
182      <span class="property">{'Height'|@translate}</span>
183      <label><input type="text" name="height" class="preview" value="{$crypto.height}" size="6" maxlength="3"> {'good value:'|@translate} lenght&times;12</label>
184    </li>
185    <li>
186      <span class="property">{'Button color'|@translate}</span>
187      <div style="display:relative;margin-left:51%;">
188        <a class="button {if $crypto.button_color == 'dark'}selected{/if}" title="dark"><img src="{$CRYPTO_PATH}template/refresh_dark.png" alt="dark"></a>
189        <a class="button {if $crypto.button_color == 'light'}selected{/if}" title="light"><img src="{$CRYPTO_PATH}template/refresh_light.png" alt="light"></a>
190        <input type="hidden" name="button_color" value="{$crypto.button_color}">
191      </div>
192    </li>
193    <li>
194      <span class="property">{'Captcha theme'|@translate}</span>
195      <div style="display:relative;margin-left:51%;">
196        {foreach from=$presets item=preset}
197        <a class="preset {if $crypto.theme == $preset}selected{/if}" title="{$preset}"><img src="{$CRYPTO_PATH}template/presets/{$preset}.png" alt="{$preset}"></a>
198        {/foreach}
199        <br><a class="customize">{'Customize'|@translate}</a><input type="hidden" name="theme" value="{$crypto.theme}">
200      </div>
201    </li>
202  </ul>
203 
204  <fieldset {if $crypto.theme != 'custom'}style="display:none;"{/if} id="theming">
205    <legend>{'Customize'|@translate}</legend>
206   
207    <ul>
208      <li>
209        <span class="property">{'Perturbation'|@translate}</span>
210        <label><input type="text" name="perturbation" value="{$crypto.perturbation}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 1</label>
211      </li>
212      <li>
213        <span class="property">{'Background color'|@translate}</span>
214        <label><input type="text" name="image_bg_color" value="{$crypto.image_bg_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
215        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
216      </li>
217      <li>
218        <span class="property">{'Text color'|@translate}</span>
219        <label><input type="text" name="text_color" value="{$crypto.text_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
220        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
221      </li>
222      <li>
223        <span class="property">{'Lines density'|@translate}</span>
224        <label><input type="text" name="num_lines" value="{$crypto.num_lines}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 10</label>
225      </li>
226      <li>
227        <span class="property">{'Lines color'|@translate}</span>
228        <label><input type="text" name="line_color" value="{$crypto.line_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
229        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
230      </li>
231      <li>
232        <span class="property">{'Noise level'|@translate}</span>
233        <label><input type="text" name="noise_level" value="{$crypto.noise_level}" class="istheme" size="6" maxlength="4"> {'range:'|@translate} 0 - 10</label>
234      </li>
235      <li>
236        <span class="property">{'Noise color'|@translate}</span>
237        <label><input type="text" name="noise_color" value="{$crypto.noise_color}" class="colorpicker-input istheme" size="6" maxlength="6"></label>
238        <a class="random" title="{'random'|@translate}"><img src="{$CRYPTO_PATH}/template/arrow_switch.png"></a>
239      </li>
240      <li>
241        <span class="property">{'Font'|@translate}</span>
242        <div class="big-list">
243          {foreach from=$fonts item=font}
244          <label style="font-family:{$font};" title="{$font}"><input type="radio" name="ttf_file" value="{$font}" {if $crypto.ttf_file == $font}checked="checked"{/if} class="istheme"> {$font}</label>
245          {/foreach}
246        </div>
247      </li>
248    </ul>
249   
250    {'Tip: type "random" on a color field to have a random color'|@translate}
251  </fieldset>
252 
253  <ul style="margin-top:30px;">
254    <li>
255      <span class="property">{'Preview'|@translate}</span>
256      <img id="captcha" src="{$CRYPTO_PATH}securimage/securimage_show.php" alt="CAPTCHA Image">
257      <a href="#" onClick="return false;"><img id="reload" src="{$CRYPTO_PATH}template/refresh_{$crypto.button_color}.png"></a>
258    </li>
259  </ul>
260 
261</fieldset>
262<p><input class="submit" type="submit" value="{'Submit'|@translate}" name="submit"></p>
263</form>
264
265<div style="text-align:right;">
266  All free fonts from <a href="http://www.dafont.com" target="_blank">dafont.com</a> |
267  Powered by : <a href="http://www.phpcaptcha.org/" target="_blank"><img src="{$CRYPTO_PATH}template/logo.png" alt="Secureimage"></a>
268</div>
Note: See TracBrowser for help on using the repository browser.