Air Code Generator Using Javascript

Submitted by: 
Language: 
Visitors have accessed this post 1520 times.

In tutorial, you will learn how to make an air code generator. just follow the steps below and download the source code. You can also use this code to your projects or systems.

DIRECTIONS

Creating our index.php

  1. <head>
  2. <title>(AC) AirCode</title>
  3. <meta http-equiv="Content-Type" content="text/html;charset=Windows_1258">
  4. <meta content="tchouky" name="AC">
  5. <meta content="generator" name="AirCode">
  6. <META HTTP-EQUIV="imagetoolbar" CONTENT="no">
  7. <meta content="generator" name="Randomizer">
  8. <link href="style.css" rel="stylesheet">
  9. <script type="text/javascript" src="class_of_ac.js"></script>
  10. <style type="text/css">.ac_xamp_td {
  11. BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; FONT-SIZE: 32px; BORDER-LEFT: red 1px solid; WIDTH: 48px; BORDER-BOTTOM: red 1px solid; TEXT-ALIGN: center
  12. }
  13. .ac_xamp_ref_table {
  14. BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; BORDER-LEFT: red 1px solid; BORDER-BOTTOM: red 1px solid
  15. }
  16. </style>
  17. <script type="text/javascript">
  18. var aircode_up = [
  19. '\u030d', /* ? */ '\u030e', /* ? */ '\u0304', /* ? */ '\u0305', /* ? */
  20. '\u033f', /* ? */ '\u0311', /* ? */ '\u0306', /* ? */ '\u0310', /* ? */
  21. '\u0352', /* ? */ '\u0357', /* ? */ '\u0351', /* ? */ '\u0307', /* ? */
  22. '\u0308', /* ? */ '\u030a', /* ? */ '\u0342', /* ? */ '\u0343', /* ? */
  23. '\u0344', /* ? */ '\u034a', /* ? */ '\u034b', /* ? */ '\u034c', /* ? */
  24. '\u0303', /* Þ */ '\u0302', /* ? */ '\u030c', /* ? */ '\u0350', /* ? */
  25. '\u0300', /* Ì */ '\u0301', /* ì */ '\u030b', /* ? */ '\u030f', /* ? */
  26. '\u0312', /* ? */ '\u0313', /* ? */ '\u0314', /* ? */ '\u033d', /* ? */
  27. '\u0309', /* Ò */ '\u0363', /* ? */ '\u0364', /* ? */ '\u0365', /* ? */
  28. '\u0366', /* ? */ '\u0367', /* ? */ '\u0368', /* ? */ '\u0369', /* ? */
  29. '\u036a', /* ? */ '\u036b', /* ? */ '\u036c', /* ? */ '\u036d', /* ? */
  30. '\u036e', /* ? */ '\u036f', /* ? */ '\u033e', /* ? */ '\u035b', /* ? */
  31. '\u0346', /* ? */ '\u031a' /* ? */
  32. ];
  33.  
  34. //those go DOWN
  35. var aircode_down = [
  36. '\u0316', /* ? */ '\u0317', /* ? */ '\u0318', /* ? */ '\u0319', /* ? */
  37. '\u031c', /* ? */ '\u031d', /* ? */ '\u031e', /* ? */ '\u031f', /* ? */
  38. '\u0320', /* ? */ '\u0324', /* ? */ '\u0325', /* ? */ '\u0326', /* ? */
  39. '\u0329', /* ? */ '\u032a', /* ? */ '\u032b', /* ? */ '\u032c', /* ? */
  40. '\u032d', /* ? */ '\u032e', /* ? */ '\u032f', /* ? */ '\u0330', /* ? */
  41. '\u0331', /* ? */ '\u0332', /* ? */ '\u0333', /* ? */ '\u0339', /* ? */
  42. '\u033a', /* ? */ '\u033b', /* ? */ '\u033c', /* ? */ '\u0345', /* ? */
  43. '\u0347', /* ? */ '\u0348', /* ? */ '\u0349', /* ? */ '\u034d', /* ? */
  44. '\u034e', /* ? */ '\u0353', /* ? */ '\u0354', /* ? */ '\u0355', /* ? */
  45. '\u0356', /* ? */ '\u0359', /* ? */ '\u035a', /* ? */ '\u0323' /* ò */
  46. ];
  47.  
  48. //those always stay in the middle
  49. var aircode_mid = [
  50. '\u0315', /* ? */ '\u031b', /* ? */ '\u0340', /* ? */ '\u0341', /* ? */
  51. '\u0358', /* ? */ '\u0321', /* ? */ '\u0322', /* ? */ '\u0327', /* ? */
  52. '\u0328', /* ? */ '\u0334', /* ? */ '\u0335', /* ? */ '\u0336', /* ? */
  53. '\u034f', /* ? */ '\u035c', /* ? */ '\u035d', /* ? */ '\u035e', /* ? */
  54. '\u035f', /* ? */ '\u0360', /* ? */ '\u0362', /* ? */ '\u0338', /* ? */
  55. '\u0337', /* ? */ '\u0361', /* ? */ '\u0489' /* ?_ */
  56. ];
  57.  
  58. // random function
  59. //---------------------------------------------------
  60.  
  61. //gets an int between 0 and max
  62. function rand(max)
  63. {
  64. return Math.floor(Math.random() * max);
  65. }
  66.  
  67. //gets a random char from a AC char table
  68. function rand_ac(array)
  69. {
  70. var ind = Math.floor(Math.random() * array.length);
  71. return array[ind];
  72. }
  73.  
  74. // utils funcs
  75. //---------------------------------------------------
  76.  
  77. //hide show element
  78. function toggle(id)
  79. {
  80. if(document.getElementById(id).style.display == "none")
  81. document.getElementById(id).style.display = "block";
  82. else
  83. document.getElementById(id).style.display = "none";
  84. }
  85.  
  86. //lookup char to know if its a zalgo char or not
  87. function is_ac_char(c)
  88. {
  89. var i;
  90. for(i=0; i<aircode_up.length; i++)
  91. if(c == aircode_up[i])
  92. return true;
  93. for(i=0; i<aircode_down.length; i++)
  94. if(c == aircode_down[i])
  95. return true;
  96. for(i=0; i<aircode_mid.length; i++)
  97. if(c == aircode_mid[i])
  98. return true;
  99. return false;
  100. }
  101.  
  102. function draw_ac_table(elid)
  103. {
  104. var container = document.getElementById(elid);
  105. var html = '';
  106.  
  107. html += '<b>Chars going up:</b><br />\n';
  108. html += '<table class="ac_xamp_ref_table">\n';
  109. html += '<tr>\n';
  110. for(var i=0; i<aircode_up.length; i++)
  111. {
  112. if(!(i % 10))
  113. html += '</tr><tr>';
  114. html += '<td class="ac_xamp_td">' + aircode_up[i] + '</td>\n';
  115. }
  116. html += '</tr>\n';
  117. html += '</table>\n';
  118.  
  119. html += '<br /><b>Chars staying in the middle:</b><br />\n';
  120. html += '<table class="ac_xamp_ref_table">\n';
  121. html += '<tr>\n';
  122. for(var i=0; i<aircode_mid.length; i++)
  123. {
  124. if(!(i % 10))
  125. html += '</tr><tr>';
  126. html += '<td class="ac_xamp_td">' + aircode_mid[i] + '</td>\n';
  127. }
  128. html += '</tr>\n';
  129. html += '</table>\n';
  130.  
  131. html += '<br /><b>Chars going down:</b><br />\n';
  132. html += '<table class="ac_xamp_ref_table">\n';
  133. html += '<tr>\n';
  134. for(var i=0; i<aircode_down.length; i++)
  135. {
  136. if(!(i % 10))
  137. html += '</tr><tr>';
  138. html += '<td class="ac_xamp_td">' + aircode_down[i] + '</td>\n';
  139. }
  140. html += '</tr>\n';
  141. html += '</table>\n';
  142.  
  143. container.innerHTML = html;
  144. }
  145.  
  146. // main shit
  147. //---------------------------------------------------
  148. function xamp_textarea(id)
  149. {
  150. var p = document.getElementById(id);
  151. var txt = p.value;
  152. var newtxt = '';
  153. for(var i=0; i<txt.length; i++)
  154. {
  155. if(is_ac_char(txt.substr(i, 1)))
  156. continue;
  157.  
  158. var num_up;
  159. var num_mid;
  160. var num_down;
  161.  
  162. //add the normal character
  163. newtxt += txt.substr(i, 1);
  164.  
  165. //options
  166. if(document.getElementById('ac_opt_mini').checked)
  167. {
  168. num_up = rand(8);
  169. num_mid = rand(2);
  170. num_down = rand(8);
  171. }
  172. else if(document.getElementById('ac_opt_normal').checked)
  173. {
  174. num_up = rand(16) / 2 + 1;
  175. num_mid = rand(6) / 2;
  176. num_down = rand(16) / 2 + 1;
  177. }
  178. else //maxi
  179. {
  180. num_up = rand(64) / 4 + 3;
  181. num_mid = rand(16) / 4 + 1;
  182. num_down = rand(64) / 4 + 3;
  183. }
  184.  
  185.  
  186. if(document.getElementById('ac_opt_up').checked)
  187. for(var j=0; j<num_up; j++)
  188. newtxt += rand_ac(aircode_up);
  189. if(document.getElementById('ac_opt_mid').checked)
  190. for(var j=0; j<num_mid; j++)
  191. newtxt += rand_ac(aircode_mid);
  192. if(document.getElementById('ac_opt_down').checked)
  193. for(var j=0; j<num_down; j++)
  194. newtxt += rand_ac(aircode_down);
  195. }
  196.  
  197. //result is in nextxt, display that
  198.  
  199. //remove all children of lulz_container
  200. var container = document.getElementById('lulz_container');
  201. while(container.childNodes.length)
  202. container.removeChild(container.childNodes[0]);
  203.  
  204. //build blocks for each line & create a <br />
  205. var lines = newtxt.split("\n");
  206. for(var i=0; i<lines.length; i++)
  207. {
  208. var n = document.createElement('text');
  209. n.innerHTML = lines[i];
  210. container.appendChild(n);
  211. var nl = document.createElement('br');
  212. container.appendChild(nl);
  213. }
  214.  
  215. //done
  216. }
  217. /* ]]> */
  218. </script>
  219.  
  220.  
  221.  
  222. <script language="javascript">
  223. document.onmousedown=disableclick;
  224. status="Right Click Disabled";
  225. Function disableclick(event)
  226. {
  227. if(event.button==2)
  228. {
  229. alert(status);
  230. return false;
  231. }
  232. }
  233. </script>
  234. <script language="javascript">
  235. document.onmousedown=disableclick;
  236. status="Right Click Disabled";
  237. Function disableclick(e)
  238. {
  239. if(event.button==2)
  240. {
  241. alert(status);
  242. return false;
  243. }
  244. }
  245. <SCRIPT language=JavaScript>
  246. <!-- <a href="http://www.fb.com/ijsamp" rel="nofollow">http://www.fb.com/ijsamp</a> -->
  247. var message = "Oops! AC Didn't allow this object!";
  248. function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
  249. if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
  250. document.onmousedown = rtclickcheck;
  251.  
  252.  
  253. </head>
  254.  
  255. <body>
  256.  
  257.  
  258. <body oncontextmenu="return false">
  259. ...
  260. </body>
  261. <tr oncontextmenu="return false">
  262. <td>
  263. <asp:datagrid id="dgGrid1">---</asp:datagrid>
  264. </td>
  265. </tr>
  266. </Table>
  267.  
  268. <h1><center>Air Code Randomiser</h1>
  269. <p></p>
  270. <table id="actable">
  271. <td id="lulz_container" style="BORDER-RIGHT: green 5px solid; PADDING-RIGHT: 5px; BORDER-TOP: green 5px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: green 5px solid; PADDING-TOP: 5px; BORDER-BOTTOM: green 5px solid" width="250">
  272. <p id="lulz"></p>
  273. </td>
  274. <tr>
  275.  
  276.  
  277. <td style="BORDER-RIGHT: #0066cc 5px solid; BORDER-TOP: #0066cc 5px solid; BORDER-LEFT: #0066cc 5px solid; BORDER-BOTTOM: #0066cc 5px solid" width="150">
  278. <font color="#0066cc"><textarea id="xamp_txt" style="FONT-FAMILY: Arial" color="red" rows="13" cols="80">Invoker list.
  279. Type Your AirCode here (AC)</textarea>
  280.  
  281. <form id="xamp_form" action>
  282. <input type="button" class="btn btn-success btn-large" id="xamp_btn" onclick="xamp_textarea('xamp_txt');" type="button" value="Generate AC">
  283. <input class="btn btn-danger btn-large" id="xamp_ref" onclick="toggle('reference');" type="button" value="Show AirCode List"><i class="icon-white icon-qrcode">
  284.  
  285. <br/></font>
  286.  
  287. <tr>
  288. <td><b><font color="green">Style</b></font><br>
  289. <font color="gray"><input id="ac_opt_up" type="checkbox">AirCode Top<BR>
  290. <input id="ac_opt_mid" type="checkbox" CHECKED>AirCode Centre<BR>
  291. <input id="ac_opt_down" type="checkbox" CHECKED>AirCode Bottom<BR>
  292. </td>
  293.  
  294. <td><b><font color="red">Range Effect</b></font><br>
  295. <font color="gray"><input id="ac_opt_mini" type="radio" name="optval" CHECKED>Short<BR>
  296. <input id="ac_opt_normal" type="radio" name="optval">Medium<BR>
  297. <input id="ac_opt_maxi" type="radio" name="optval">Long<BR>
  298. </td>
  299. </tr>
  300. </table>
  301. </form>
  302. <script type="text/javascript">
  303. xamp_textarea('xamp_txt');
  304. </script>
  305.  
  306. </TD>
  307. </tr>
  308. </TABLE>
  309.  
  310. <div id="reference" style="DISPLAY: none">
  311. <br/>
  312.  
  313. </body>
  314. </html>

Creating our style.css

  1. button,
  2. input,
  3. textarea,
  4. .uneditable-input {
  5. margin-left: 0;
  6. }
  7. .controls-row [class*="span"] + [class*="span"] {
  8. margin-left: 20px;
  9. }
  10. input.span12, textarea.span12, .uneditable-input.span12 {
  11. width: 926px;
  12. }
  13. input.span11, textarea.span11, .uneditable-input.span11 {
  14. width: 846px;
  15. }
  16. input.span10, textarea.span10, .uneditable-input.span10 {
  17. width: 766px;
  18. }
  19. input.span9, textarea.span9, .uneditable-input.span9 {
  20. width: 686px;
  21. }
  22. input.span8, textarea.span8, .uneditable-input.span8 {
  23. width: 606px;
  24. }
  25. input.span7, textarea.span7, .uneditable-input.span7 {
  26. width: 526px;
  27. }
  28. input.span6, textarea.span6, .uneditable-input.span6 {
  29. width: 446px;
  30. }
  31. input.span5, textarea.span5, .uneditable-input.span5 {
  32. width: 366px;
  33. }
  34. input.span4, textarea.span4, .uneditable-input.span4 {
  35. width: 286px;
  36. }
  37. input.span3, textarea.span3, .uneditable-input.span3 {
  38. width: 206px;
  39. }
  40. input.span2, textarea.span2, .uneditable-input.span2 {
  41. width: 126px;
  42. }
  43. input.span1, textarea.span1, .uneditable-input.span1 {
  44. width: 46px;
  45. }
  46. .controls-row {
  47. *zoom: 1;
  48. }
  49. .controls-row:before,
  50. .controls-row:after {
  51. display: table;
  52. content: "";
  53. line-height: 0;
  54. }
  55. .controls-row:after {
  56. clear: both;
  57. }
  58. .controls-row [class*="span"],
  59. .row-fluid .controls-row [class*="span"] {
  60. float: left;
  61. }
  62. .controls-row .checkbox[class*="span"],
  63. .controls-row .radio[class*="span"] {
  64. padding-top: 5px;
  65. }
  66. input[disabled],
  67. select[disabled],
  68. textarea[disabled],
  69. input[readonly],
  70. select[readonly],
  71. textarea[readonly] {
  72. cursor: not-allowed;
  73. background-color: #eeeeee;
  74. }
  75. input[type="radio"][disabled],
  76. input[type="checkbox"][disabled],
  77. input[type="radio"][readonly],
  78. input[type="checkbox"][readonly] {
  79. background-color: transparent;
  80. }
  81. .control-group.warning .control-label,
  82. .control-group.warning .help-block,
  83. .control-group.warning .help-inline {
  84. color: #c09853;
  85. }
  86. .control-group.warning .checkbox,
  87. .control-group.warning .radio,
  88. .control-group.warning input,
  89. .control-group.warning select,
  90. .control-group.warning textarea {
  91. color: #c09853;
  92. }
  93. .control-group.warning input,
  94. .control-group.warning select,
  95. .control-group.warning textarea {
  96. border-color: #c09853;
  97. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  98. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  99. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  100. }
  101. .control-group.warning input:focus,
  102. .control-group.warning select:focus,
  103. .control-group.warning textarea:focus {
  104. border-color: #a47e3c;
  105. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  106. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  107. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
  108. }
  109. .control-group.warning .input-prepend .add-on,
  110. .control-group.warning .input-append .add-on {
  111. color: #c09853;
  112. background-color: #fcf8e3;
  113. border-color: #c09853;
  114. }
  115. .control-group.error .control-label,
  116. .control-group.error .help-block,
  117. .control-group.error .help-inline {
  118. color: #b94a48;
  119. }
  120. .control-group.error .checkbox,
  121. .control-group.error .radio,
  122. .control-group.error input,
  123. .control-group.error select,
  124. .control-group.error textarea {
  125. color: #b94a48;
  126. }
  127. .control-group.error input,
  128. .control-group.error select,
  129. .control-group.error textarea {
  130. border-color: #b94a48;
  131. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  132. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  133. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  134. }
  135. .control-group.error input:focus,
  136. .control-group.error select:focus,
  137. .control-group.error textarea:focus {
  138. border-color: #953b39;
  139. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  140. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  141. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
  142. }
  143. .control-group.error .input-prepend .add-on,
  144. .control-group.error .input-append .add-on {
  145. color: #b94a48;
  146. background-color: #f2dede;
  147. border-color: #b94a48;
  148. }
  149. .control-group.success .control-label,
  150. .control-group.success .help-block,
  151. .control-group.success .help-inline {
  152. color: #468847;
  153. }
  154. .control-group.success .checkbox,
  155. .control-group.success .radio,
  156. .control-group.success input,
  157. .control-group.success select,
  158. .control-group.success textarea {
  159. color: #468847;
  160. }
  161. .control-group.success input,
  162. .control-group.success select,
  163. .control-group.success textarea {
  164. border-color: #468847;
  165. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  166. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  167. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  168. }
  169. .control-group.success input:focus,
  170. .control-group.success select:focus,
  171. .control-group.success textarea:focus {
  172. border-color: #356635;
  173. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
  174. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
  175. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
  176. }
  177. .control-group.success .input-prepend .add-on,
  178. .control-group.success .input-append .add-on {
  179. color: #468847;
  180. background-color: #dff0d8;
  181. border-color: #468847;
  182. }
  183. .control-group.info .control-label,
  184. .control-group.info .help-block,
  185. .control-group.info .help-inline {
  186. color: #3a87ad;
  187. }
  188. .control-group.info .checkbox,
  189. .control-group.info .radio,
  190. .control-group.info input,
  191. .control-group.info select,
  192. .control-group.info textarea {
  193. color: #3a87ad;
  194. }
  195. .control-group.info input,
  196. .control-group.info select,
  197. .control-group.info textarea {
  198. border-color: #3a87ad;
  199. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  200. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  201. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  202. }
  203. .control-group.info input:focus,
  204. .control-group.info select:focus,
  205. .control-group.info textarea:focus {
  206. border-color: #2d6987;
  207. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
  208. -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
  209. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
  210. }
  211. .control-group.info .input-prepend .add-on,
  212. .control-group.info .input-append .add-on {
  213. color: #3a87ad;
  214. background-color: #d9edf7;
  215. border-color: #3a87ad;
  216. }
  217. input:focus:invalid,
  218. textarea:focus:invalid,
  219. select:focus:invalid {
  220. color: #b94a48;
  221. border-color: #ee5f5b;
  222. }
  223. input:focus:invalid:focus,
  224. textarea:focus:invalid:focus,
  225. select:focus:invalid:focus {
  226. border-color: #e9322d;
  227. -webkit-box-shadow: 0 0 6px #f8b9b7;
  228. -moz-box-shadow: 0 0 6px #f8b9b7;
  229. box-shadow: 0 0 6px #f8b9b7;
  230. }
  231. .form-actions {
  232. padding: 19px 20px 20px;
  233. margin-top: 20px;
  234. margin-bottom: 20px;
  235. background-color: #f5f5f5;
  236. border-top: 1px solid #e5e5e5;
  237. *zoom: 1;
  238. }
  239. .form-actions:before,
  240. .form-actions:after {
  241. display: table;
  242. content: "";
  243. line-height: 0;
  244. }
  245. .form-actions:after {
  246. clear: both;
  247. }
  248. .help-block,
  249. .help-inline {
  250. color: #595959;
  251. }
  252. .help-block {
  253. display: block;
  254. margin-bottom: 10px;
  255. }
  256. .help-inline {
  257. display: inline-block;
  258. *display: inline;
  259. /* IE7 inline-block hack */
  260.  
  261. *zoom: 1;
  262. vertical-align: middle;
  263. padding-left: 5px;
  264. }
  265. .input-append,
  266. .input-prepend {
  267. margin-bottom: 5px;
  268. font-size: 0;
  269. white-space: nowrap;
  270. }
  271. .input-append input,
  272. .input-prepend input,
  273. .input-append select,
  274. .input-prepend select,
  275. .input-append .uneditable-input,
  276. .input-prepend .uneditable-input,
  277. .input-append .dropdown-menu,
  278. .input-prepend .dropdown-menu {
  279. font-size: 14px;
  280. }
  281. .input-append input,
  282. .input-prepend input,
  283. .input-append select,
  284. .input-prepend select,
  285. .input-append .uneditable-input,
  286. .input-prepend .uneditable-input {
  287. position: relative;
  288. margin-bottom: 0;
  289. *margin-left: 0;
  290. vertical-align: top;
  291. -webkit-border-radius: 0 4px 4px 0;
  292. -moz-border-radius: 0 4px 4px 0;
  293. border-radius: 0 4px 4px 0;
  294. }
  295. .input-append input:focus,
  296. .input-prepend input:focus,
  297. .input-append select:focus,
  298. .input-prepend select:focus,
  299. .input-append .uneditable-input:focus,
  300. .input-prepend .uneditable-input:focus {
  301. z-index: 2;
  302. }
  303. .input-append .add-on,
  304. .input-prepend .add-on {
  305. display: inline-block;
  306. width: auto;
  307. height: 20px;
  308. min-width: 16px;
  309. padding: 4px 5px;
  310. font-size: 14px;
  311. font-weight: normal;
  312. line-height: 20px;
  313. text-align: center;
  314. text-shadow: 0 1px 0 #ffffff;
  315. background-color: #eeeeee;
  316. border: 1px solid #ccc;
  317. }
  318. .input-append .add-on,
  319. .input-prepend .add-on,
  320. .input-append .btn,
  321. .input-prepend .btn,
  322. .input-append .btn-group > .dropdown-toggle,
  323. .input-prepend .btn-group > .dropdown-toggle {
  324. vertical-align: top;
  325. -webkit-border-radius: 0;
  326. -moz-border-radius: 0;
  327. border-radius: 0;
  328. }
  329. .input-append .active,
  330. .input-prepend .active {
  331. background-color: #a9dba9;
  332. border-color: #46a546;
  333. }
  334. .input-prepend .add-on,
  335. .input-prepend .btn {
  336. margin-right: -1px;
  337. }
  338. .input-prepend .add-on:first-child,
  339. .input-prepend .btn:first-child {
  340. -webkit-border-radius: 4px 0 0 4px;
  341. -moz-border-radius: 4px 0 0 4px;
  342. border-radius: 4px 0 0 4px;
  343. }
  344. .input-append input,
  345. .input-append select,
  346. .input-append .uneditable-input {
  347. -webkit-border-radius: 4px 0 0 4px;
  348. -moz-border-radius: 4px 0 0 4px;
  349. border-radius: 4px 0 0 4px;
  350. }
  351. .input-append input + .btn-group .btn:last-child,
  352. .input-append select + .btn-group .btn:last-child,
  353. .input-append .uneditable-input + .btn-group .btn:last-child {
  354. -webkit-border-radius: 0 4px 4px 0;
  355. -moz-border-radius: 0 4px 4px 0;
  356. border-radius: 0 4px 4px 0;
  357. }
  358. .input-append .add-on,
  359. .input-append .btn,
  360. .input-append .btn-group {
  361. margin-left: -1px;
  362. }
  363. .input-append .add-on:last-child,
  364. .input-append .btn:last-child,
  365. .input-append .btn-group:last-child > .dropdown-toggle {
  366. -webkit-border-radius: 0 4px 4px 0;
  367. -moz-border-radius: 0 4px 4px 0;
  368. border-radius: 0 4px 4px 0;
  369. }
  370. .input-prepend.input-append input,
  371. .input-prepend.input-append select,
  372. .input-prepend.input-append .uneditable-input {
  373. -webkit-border-radius: 0;
  374. -moz-border-radius: 0;
  375. border-radius: 0;
  376. }
  377. .input-prepend.input-append input + .btn-group .btn,
  378. .input-prepend.input-append select + .btn-group .btn,
  379. .input-prepend.input-append .uneditable-input + .btn-group .btn {
  380. -webkit-border-radius: 0 4px 4px 0;
  381. -moz-border-radius: 0 4px 4px 0;
  382. border-radius: 0 4px 4px 0;
  383. }
  384. .input-prepend.input-append .add-on:first-child,
  385. .input-prepend.input-append .btn:first-child {
  386. margin-right: -1px;
  387. -webkit-border-radius: 4px 0 0 4px;
  388. -moz-border-radius: 4px 0 0 4px;
  389. border-radius: 4px 0 0 4px;
  390. }
  391. .input-prepend.input-append .add-on:last-child,
  392. .input-prepend.input-append .btn:last-child {
  393. margin-left: -1px;
  394. -webkit-border-radius: 0 4px 4px 0;
  395. -moz-border-radius: 0 4px 4px 0;
  396. border-radius: 0 4px 4px 0;
  397. }
  398. .input-prepend.input-append .btn-group:first-child {
  399. margin-left: 0;
  400. }
  401. input.search-query {
  402. padding-right: 14px;
  403. padding-right: 4px \9;
  404. padding-left: 14px;
  405. padding-left: 4px \9;
  406. /* IE7-8 doesn't have border-radius, so don't indent the padding */
  407.  
  408. margin-bottom: 0;
  409. -webkit-border-radius: 15px;
  410. -moz-border-radius: 15px;
  411. border-radius: 15px;
  412. }
  413. html {
  414. background-color: #0066cc;
  415. }
  416. body {
  417. background: #fff;
  418. color: #333;
  419. font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  420. margin: 2em auto;
  421. width: 700px;
  422. padding: 1em 2em;
  423. -moz-border-radius: 11px;
  424. -khtml-border-radius: 11px;
  425. -webkit-border-radius: 11px;
  426. border-radius: 11px;
  427. border: 1px solid #dfdfdf;
  428. }
  429.  
  430. a {
  431. color: #2583ad;
  432. text-decoration: none;
  433. }
  434.  
  435. a:hover {
  436. color: #d54e21;
  437. }
  438.  
  439. h1 {
  440. border-bottom: 1px solid #dadada;
  441. clear: both;
  442. color: #666;
  443. font: 24px Georgia, "Times New Roman", Times, serif;
  444. margin: 5px 0 0 -4px;
  445. padding: 0;
  446. padding-bottom: 7px;
  447. }
  448.  
  449. h2 {
  450. font-size: 16px;
  451. }
  452.  
  453. p, li, dd, dt {
  454. padding-bottom: 2px;
  455. font-size: 12px;
  456. line-height: 18px;
  457. }
  458.  
  459. code, .code {
  460. font-size: 13px;
  461. }
  462.  
  463. ul, ol, dl {
  464. padding: 5px 5px 5px 22px;
  465. }
  466.  
  467. a img {
  468. border:0
  469. }
  470. abbr {
  471. border: 0;
  472. font-variant: normal;
  473. }
  474. #logo {
  475. margin: 6px 0 14px 0;
  476. border-bottom: none;
  477. text-align:center
  478. }
  479. .step {
  480. margin: 20px 0 15px;
  481. }
  482. .step, th {
  483. text-align: left;
  484. padding: 0;
  485. }
  486.  
  487. .submit input, .button, .button-secondary {
  488. font-family: "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
  489. text-decoration: none;
  490. font-size: 14px !important;
  491. line-height: 16px;
  492. padding: 6px 12px;
  493. cursor: pointer;
  494. border: 1px solid #bbb;
  495. color: #464646;
  496. -moz-border-radius: 15px;
  497. -khtml-border-radius: 15px;
  498. -webkit-border-radius: 15px;
  499. border-radius: 15px;
  500. -moz-box-sizing: content-box;
  501. -webkit-box-sizing: content-box;
  502. -khtml-box-sizing: content-box;
  503. box-sizing: content-box;
  504. }
  505.  
  506. .button:hover, .button-secondary:hover, .submit input:hover {
  507. color: #000;
  508. border-color: #666;
  509. }
  510.  
  511. .button, .submit input, .button-secondary {
  512. background: #f2f2f2 url(../images/white-grad.png) repeat-x scroll left top;
  513. }
  514.  
  515. .button:active, .submit input:active, .button-secondary:active {
  516. background: #eee url(../images/white-grad-active.png) repeat-x scroll left top;
  517. }
  518.  
  519. textarea {
  520. border: 1px solid #bbb;
  521. -moz-border-radius: 4px;
  522. -khtml-border-radius: 4px;
  523. -webkit-border-radius: 4px;
  524. border-radius: 4px;
  525. }
  526.  
  527. .form-table {
  528. border-collapse: collapse;
  529. margin-top: 1em;
  530. width: 100%;
  531. }
  532.  
  533. .form-table td {
  534. margin-bottom: 9px;
  535. padding: 10px;
  536. border-bottom: 8px solid #fff;
  537. font-size: 12px;
  538. }
  539.  
  540. .form-table th {
  541. font-size: 13px;
  542. text-align: left;
  543. padding: 16px 10px 10px 10px;
  544. border-bottom: 8px solid #fff;
  545. width: 130px;
  546. vertical-align: top;
  547. }
  548.  
  549. .form-table tr {
  550. background: #f3f3f3;
  551. }
  552.  
  553. .form-table code {
  554. line-height: 18px;
  555. font-size: 18px;
  556. }
  557.  
  558. .form-table p {
  559. margin: 4px 0 0 0;
  560. font-size: 11px;
  561. }
  562.  
  563. .form-table input {
  564. line-height: 20px;
  565. font-size: 15px;
  566. padding: 2px;
  567. }
  568.  
  569. .form-table th p {
  570. font-weight: normal;
  571. }
  572.  
  573. #error-page {
  574. margin-top: 50px;
  575. }
  576.  
  577. #error-page p {
  578. font-size: 12px;
  579. line-height: 18px;
  580. margin: 25px 0 20px;
  581. }
  582.  
  583. #error-page code, .code {
  584. font-family: Consolas, Monaco, Courier, monospace;
  585. }
  586.  
  587. #pass-strength-result {
  588. background-color: #eee;
  589. border-color: #ddd !important;
  590. border-style: solid;
  591. border-width: 1px;
  592. margin: 5px 5px 5px 1px;
  593. padding: 5px;
  594. text-align: center;
  595. width: 200px;
  596. display: none;
  597. }
  598.  
  599. #pass-strength-result.bad {
  600. background-color: #ffb78c;
  601. border-color: #ff853c !important;
  602. }
  603.  
  604. #pass-strength-result.good {
  605. background-color: #ffec8b;
  606. border-color: #ffcc00 !important;
  607. }
  608.  
  609. #pass-strength-result.short {
  610. background-color: #ffa0a0;
  611. border-color: #f04040 !important;
  612. }
  613.  
  614. #pass-strength-result.strong {
  615. background-color: #c3ff88;
  616. border-color: #8dff1c !important;
  617. }
  618.  
  619. .message {
  620. border: 1px solid #e6db55;
  621. padding: 0.3em 0.6em;
  622. margin: 5px 0 15px;
  623. background-color: #ffffe0;
  624. }
  625. label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
  626.  
  627. button.close {
  628. padding: 0;
  629. cursor: pointer;
  630. background: transparent;
  631. border: 0;
  632. -webkit-appearance: none;
  633. }
  634. .btn {
  635. display: inline-block;
  636. *display: inline;
  637. /* IE7 inline-block hack */
  638.  
  639. *zoom: 1;
  640. padding: 4px 12px;
  641. margin-bottom: 0;
  642. font-size: 14px;
  643. line-height: 20px;
  644. text-align: center;
  645. vertical-align: middle;
  646. cursor: pointer;
  647. color: #333333;
  648. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  649. background-color: #f5f5f5;
  650. background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  651. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  652. background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  653. background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  654. background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  655. background-repeat: repeat-x;
  656. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  657. border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  658. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  659. *background-color: #e6e6e6;
  660. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  661.  
  662. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  663. border: 1px solid #bbbbbb;
  664. *border: 0;
  665. border-bottom-color: #a2a2a2;
  666. -webkit-border-radius: 4px;
  667. -moz-border-radius: 4px;
  668. border-radius: 4px;
  669. *margin-left: .3em;
  670. -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  671. -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  672. box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  673. }
  674. .btn:hover,
  675. .btn:active,
  676. .btn.active,
  677. .btn.disabled,
  678. .btn[disabled] {
  679. color: #333333;
  680. background-color: #e6e6e6;
  681. *background-color: #d9d9d9;
  682. }
  683. .btn:active,
  684. .btn.active {
  685. background-color: #cccccc \9;
  686. }
  687. .btn:first-child {
  688. *margin-left: 0;
  689. }
  690. .btn:hover {
  691. color: #333333;
  692. text-decoration: none;
  693. background-position: 0 -15px;
  694. -webkit-transition: background-position 0.1s linear;
  695. -moz-transition: background-position 0.1s linear;
  696. -o-transition: background-position 0.1s linear;
  697. transition: background-position 0.1s linear;
  698. }
  699. .btn:focus {
  700. outline: thin dotted #333;
  701. outline: 5px auto -webkit-focus-ring-color;
  702. outline-offset: -2px;
  703. }
  704. .btn.active,
  705. .btn:active {
  706. background-image: none;
  707. outline: 0;
  708. -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  709. -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  710. box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  711. }
  712. .btn.disabled,
  713. .btn[disabled] {
  714. cursor: default;
  715. background-image: none;
  716. opacity: 0.65;
  717. filter: alpha(opacity=65);
  718. -webkit-box-shadow: none;
  719. -moz-box-shadow: none;
  720. box-shadow: none;
  721. }
  722. .btn-large {
  723. padding: 11px 19px;
  724. font-size: 17.5px;
  725. -webkit-border-radius: 6px;
  726. -moz-border-radius: 6px;
  727. border-radius: 6px;
  728. }
  729. .btn-large [class^="icon-"],
  730. .btn-large [class*=" icon-"] {
  731. margin-top: 4px;
  732. }
  733. .btn-small {
  734. padding: 2px 10px;
  735. font-size: 11.9px;
  736. -webkit-border-radius: 3px;
  737. -moz-border-radius: 3px;
  738. border-radius: 3px;
  739. }
  740. .btn-small [class^="icon-"],
  741. .btn-small [class*=" icon-"] {
  742. margin-top: 0;
  743. }
  744. .btn-mini [class^="icon-"],
  745. .btn-mini [class*=" icon-"] {
  746. margin-top: -1px;
  747. }
  748. .btn-mini {
  749. padding: 0 6px;
  750. font-size: 10.5px;
  751. -webkit-border-radius: 3px;
  752. -moz-border-radius: 3px;
  753. border-radius: 3px;
  754. }
  755. .btn-block {
  756. display: block;
  757. width: 100%;
  758. padding-left: 0;
  759. padding-right: 0;
  760. -webkit-box-sizing: border-box;
  761. -moz-box-sizing: border-box;
  762. box-sizing: border-box;
  763. }
  764. .btn-block + .btn-block {
  765. margin-top: 5px;
  766. }
  767. input[type="submit"].btn-block,
  768. input[type="reset"].btn-block,
  769. input[type="button"].btn-block {
  770. width: 100%;
  771. }
  772. .btn-primary.active,
  773. .btn-warning.active,
  774. .btn-danger.active,
  775. .btn-success.active,
  776. .btn-info.active,
  777. .btn-inverse.active {
  778. color: rgba(255, 255, 255, 0.75);
  779. }
  780. .btn {
  781. border-color: #c5c5c5;
  782. border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
  783. }
  784. .btn-primary {
  785. color: #ffffff;
  786. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  787. background-color: #006dcc;
  788. background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  789. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  790. background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  791. background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  792. background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  793. background-repeat: repeat-x;
  794. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  795. border-color: #0044cc #0044cc #002a80;
  796. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  797. *background-color: #0044cc;
  798. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  799.  
  800. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  801. }
  802. .btn-primary:hover,
  803. .btn-primary:active,
  804. .btn-primary.active,
  805. .btn-primary.disabled,
  806. .btn-primary[disabled] {
  807. color: #ffffff;
  808. background-color: #0044cc;
  809. *background-color: #003bb3;
  810. }
  811. .btn-primary:active,
  812. .btn-primary.active {
  813. background-color: #003399 \9;
  814. }
  815. .btn-warning {
  816. color: #ffffff;
  817. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  818. background-color: #faa732;
  819. background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  820. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  821. background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  822. background-image: -o-linear-gradient(top, #fbb450, #f89406);
  823. background-image: linear-gradient(to bottom, #fbb450, #f89406);
  824. background-repeat: repeat-x;
  825. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
  826. border-color: #f89406 #f89406 #ad6704;
  827. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  828. *background-color: #f89406;
  829. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  830.  
  831. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  832. }
  833. .btn-warning:hover,
  834. .btn-warning:active,
  835. .btn-warning.active,
  836. .btn-warning.disabled,
  837. .btn-warning[disabled] {
  838. color: #ffffff;
  839. background-color: #f89406;
  840. *background-color: #df8505;
  841. }
  842. .btn-warning:active,
  843. .btn-warning.active {
  844. background-color: #c67605 \9;
  845. }
  846. .btn-danger {
  847. color: #ffffff;
  848. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  849. background-color: #da4f49;
  850. background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  851. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  852. background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  853. background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  854. background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  855. background-repeat: repeat-x;
  856. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
  857. border-color: #bd362f #bd362f #802420;
  858. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  859. *background-color: #bd362f;
  860. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  861.  
  862. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  863. }
  864. .btn-danger:hover,
  865. .btn-danger:active,
  866. .btn-danger.active,
  867. .btn-danger.disabled,
  868. .btn-danger[disabled] {
  869. color: #ffffff;
  870. background-color: #bd362f;
  871. *background-color: #a9302a;
  872. }
  873. .btn-danger:active,
  874. .btn-danger.active {
  875. background-color: #942a25 \9;
  876. }
  877. .btn-success {
  878. color: #ffffff;
  879. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  880. background-color: #5bb75b;
  881. background-image: -moz-linear-gradient(top, #62c462, #51a351);
  882. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  883. background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  884. background-image: -o-linear-gradient(top, #62c462, #51a351);
  885. background-image: linear-gradient(to bottom, #62c462, #51a351);
  886. background-repeat: repeat-x;
  887. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  888. border-color: #51a351 #51a351 #387038;
  889. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  890. *background-color: #51a351;
  891. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  892.  
  893. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  894. }
  895. .btn-success:hover,
  896. .btn-success:active,
  897. .btn-success.active,
  898. .btn-success.disabled,
  899. .btn-success[disabled] {
  900. color: #ffffff;
  901. background-color: #51a351;
  902. *background-color: #499249;
  903. }
  904. .btn-success:active,
  905. .btn-success.active {
  906. background-color: #408140 \9;
  907. }
  908. .btn-info {
  909. color: #ffffff;
  910. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  911. background-color: #49afcd;
  912. background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  913. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  914. background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  915. background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  916. background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  917. background-repeat: repeat-x;
  918. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
  919. border-color: #2f96b4 #2f96b4 #1f6377;
  920. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  921. *background-color: #2f96b4;
  922. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  923.  
  924. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  925. }
  926.  
  927. .btn-info:hover,
  928. .btn-info:active,
  929. .btn-info.active,
  930. .btn-info.disabled,
  931. .btn-info[disabled] {
  932. color: #ffffff;
  933. background-color: #2f96b4;
  934. *background-color: #2a85a0;
  935. }
  936. .btn-info:active,
  937. .btn-info.active {
  938. background-color: #24748c \9;
  939. }
  940. .btn-inverse {
  941. color: #ffffff;
  942. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  943. background-color: #363636;
  944. background-image: -moz-linear-gradient(top, #444444, #222222);
  945. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
  946. background-image: -webkit-linear-gradient(top, #444444, #222222);
  947. background-image: -o-linear-gradient(top, #444444, #222222);
  948. background-image: linear-gradient(to bottom, #444444, #222222);
  949. background-repeat: repeat-x;
  950. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  951. border-color: #222222 #222222 #000000;
  952. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  953. *background-color: #222222;
  954. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  955.  
  956. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  957. }
  958. .btn-inverse:hover,
  959. .btn-inverse:active,
  960. .btn-inverse.active,
  961. .btn-inverse.disabled,
  962. .btn-inverse[disabled] {
  963. color: #ffffff;
  964. background-color: #222222;
  965. *background-color: #151515;
  966. }
  967. .btn-inverse:active,
  968. .btn-inverse.active {
  969. background-color: #080808 \9;
  970. }
  971.  
  972. button.btn,
  973. input[type="submit"].btn {
  974. *padding-top: 3px;
  975. *padding-bottom: 3px;
  976. }
  977. button.btn::-moz-focus-inner,
  978. input[type="submit"].btn::-moz-focus-inner {
  979. padding: 0;
  980. border: 0;
  981. }
  982. button.btn.btn-large,
  983. input[type="submit"].btn.btn-large {
  984. *padding-top: 7px;
  985. *padding-bottom: 7px;
  986. }
  987. button.btn.btn-small,
  988. input[type="submit"].btn.btn-small {
  989. *padding-top: 3px;
  990. *padding-bottom: 3px;
  991. }
  992. button.btn.btn-mini,
  993. input[type="submit"].btn.btn-mini {
  994. *padding-top: 1px;
  995. *padding-bottom: 1px;
  996. }
  997. .btn-link,
  998. .btn-link:active,
  999. .btn-link[disabled] {
  1000. background-color: transparent;
  1001. background-image: none;
  1002. -webkit-box-shadow: none;
  1003. -moz-box-shadow: none;
  1004. box-shadow: none;
  1005. }
  1006. .btn-link {
  1007. border-color: transparent;
  1008. cursor: pointer;
  1009. color: #0088cc;
  1010. -webkit-border-radius: 0;
  1011. -moz-border-radius: 0;
  1012. border-radius: 0;
  1013. }
  1014. .btn-link:hover {
  1015. color: #005580;
  1016. text-decoration: underline;
  1017. background-color: transparent;
  1018. }
  1019. .btn-link[disabled]:hover {
  1020. color: #333333;
  1021. text-decoration: none;
  1022. }
  1023. .btn-group {
  1024. position: relative;
  1025. display: inline-block;
  1026. *display: inline;
  1027. /* IE7 inline-block hack */
  1028.  
  1029. *zoom: 1;
  1030. font-size: 0;
  1031. vertical-align: middle;
  1032. white-space: nowrap;
  1033. *margin-left: .3em;
  1034. }
  1035. .btn-group:first-child {
  1036. *margin-left: 0;
  1037. }
  1038. .btn-group + .btn-group {
  1039. margin-left: 5px;
  1040. }
  1041. .btn-toolbar {
  1042. font-size: 0;
  1043. margin-top: 10px;
  1044. margin-bottom: 10px;
  1045. }
  1046. .btn-toolbar > .btn + .btn,
  1047. .btn-toolbar > .btn-group + .btn,
  1048. .btn-toolbar > .btn + .btn-group {
  1049. margin-left: 5px;
  1050. }
  1051. .btn-group > .btn {
  1052. position: relative;
  1053. -webkit-border-radius: 0;
  1054. -moz-border-radius: 0;
  1055. border-radius: 0;
  1056. }
  1057. .btn-group > .btn + .btn {
  1058. margin-left: -1px;
  1059. }
  1060. .btn-group > .btn,
  1061. .btn-group > .dropdown-menu,
  1062. .btn-group > .popover {
  1063. font-size: 14px;
  1064. }
  1065. .btn-group > .btn-mini {
  1066. font-size: 10.5px;
  1067. }
  1068. .btn-group > .btn-small {
  1069. font-size: 11.9px;
  1070. }
  1071. .btn-group > .btn-large {
  1072. font-size: 17.5px;
  1073. }
  1074. .btn-group > .btn:first-child {
  1075. margin-left: 0;
  1076. -webkit-border-top-left-radius: 4px;
  1077. -moz-border-radius-topleft: 4px;
  1078. border-top-left-radius: 4px;
  1079. -webkit-border-bottom-left-radius: 4px;
  1080. -moz-border-radius-bottomleft: 4px;
  1081. border-bottom-left-radius: 4px;
  1082. }
  1083. .btn-group > .btn:last-child,
  1084. .btn-group > .dropdown-toggle {
  1085. -webkit-border-top-right-radius: 4px;
  1086. -moz-border-radius-topright: 4px;
  1087. border-top-right-radius: 4px;
  1088. -webkit-border-bottom-right-radius: 4px;
  1089. -moz-border-radius-bottomright: 4px;
  1090. border-bottom-right-radius: 4px;
  1091. }
  1092. .btn-group > .btn.large:first-child {
  1093. margin-left: 0;
  1094. -webkit-border-top-left-radius: 6px;
  1095. -moz-border-radius-topleft: 6px;
  1096. border-top-left-radius: 6px;
  1097. -webkit-border-bottom-left-radius: 6px;
  1098. -moz-border-radius-bottomleft: 6px;
  1099. border-bottom-left-radius: 6px;
  1100. }
  1101. .btn-group > .btn.large:last-child,
  1102. .btn-group > .large.dropdown-toggle {
  1103. -webkit-border-top-right-radius: 6px;
  1104. -moz-border-radius-topright: 6px;
  1105. border-top-right-radius: 6px;
  1106. -webkit-border-bottom-right-radius: 6px;
  1107. -moz-border-radius-bottomright: 6px;
  1108. border-bottom-right-radius: 6px;
  1109. }
  1110. .btn-group > .btn:hover,
  1111. .btn-group > .btn:focus,
  1112. .btn-group > .btn:active,
  1113. .btn-group > .btn.active {
  1114. z-index: 2;
  1115. }
  1116. .btn-group .dropdown-toggle:active,
  1117. .btn-group.open .dropdown-toggle {
  1118. outline: 0;
  1119. }
  1120. .btn-group > .btn + .dropdown-toggle {
  1121. padding-left: 8px;
  1122. padding-right: 8px;
  1123. -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  1124. -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  1125. box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  1126. *padding-top: 5px;
  1127. *padding-bottom: 5px;
  1128. }
  1129. .btn-group > .btn-mini + .dropdown-toggle {
  1130. padding-left: 5px;
  1131. padding-right: 5px;
  1132. *padding-top: 2px;
  1133. *padding-bottom: 2px;
  1134. }
  1135. .btn-group > .btn-small + .dropdown-toggle {
  1136. *padding-top: 5px;
  1137. *padding-bottom: 4px;
  1138. }
  1139. .btn-group > .btn-large + .dropdown-toggle {
  1140. padding-left: 12px;
  1141. padding-right: 12px;
  1142. *padding-top: 7px;
  1143. *padding-bottom: 7px;
  1144. }
  1145. .btn-group.open .dropdown-toggle {
  1146. background-image: none;
  1147. -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  1148. -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  1149. box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
  1150. }
  1151. .btn-group.open .btn.dropdown-toggle {
  1152. background-color: #e6e6e6;
  1153. }
  1154. .btn-group.open .btn-primary.dropdown-toggle {
  1155. background-color: #0044cc;
  1156. }
  1157. .btn-group.open .btn-warning.dropdown-toggle {
  1158. background-color: #f89406;
  1159. }
  1160. .btn-group.open .btn-danger.dropdown-toggle {
  1161. background-color: #bd362f;
  1162. }
  1163. .btn-group.open .btn-success.dropdown-toggle {
  1164. background-color: #51a351;
  1165. }
  1166. .btn-group.open .btn-info.dropdown-toggle {
  1167. background-color: #2f96b4;
  1168. }
  1169. .btn-group.open .btn-inverse.dropdown-toggle {
  1170. background-color: #222222;
  1171. }
  1172. .btn .caret {
  1173. margin-top: 8px;
  1174. margin-left: 0;
  1175. }
  1176. .btn-mini .caret,
  1177. .btn-small .caret,
  1178. .btn-large .caret {
  1179. margin-top: 6px;
  1180. }
  1181. .btn-large .caret {
  1182. border-left-width: 5px;
  1183. border-right-width: 5px;
  1184. border-top-width: 5px;
  1185. }
  1186. .dropup .btn-large .caret {
  1187. border-bottom-width: 5px;
  1188. }
  1189. .btn-primary .caret,
  1190. .btn-warning .caret,
  1191. .btn-danger .caret,
  1192. .btn-info .caret,
  1193. .btn-success .caret,
  1194. .btn-inverse .caret {
  1195. border-top-color: #ffffff;
  1196. border-bottom-color: #ffffff;
  1197. }
  1198. .btn-group-vertical {
  1199. display: inline-block;
  1200. *display: inline;
  1201. /* IE7 inline-block hack */
  1202.  
  1203. *zoom: 1;
  1204. }
  1205. .btn-group-vertical > .btn {
  1206. display: block;
  1207. float: none;
  1208. max-width: 100%;
  1209. -webkit-border-radius: 0;
  1210. -moz-border-radius: 0;
  1211. border-radius: 0;
  1212. }
  1213. .btn-group-vertical > .btn + .btn {
  1214. margin-left: 0;
  1215. margin-top: -1px;
  1216. }
  1217. .btn-group-vertical > .btn:first-child {
  1218. -webkit-border-radius: 4px 4px 0 0;
  1219. -moz-border-radius: 4px 4px 0 0;
  1220. border-radius: 4px 4px 0 0;
  1221. }
  1222. .btn-group-vertical > .btn:last-child {
  1223. -webkit-border-radius: 0 0 4px 4px;
  1224. -moz-border-radius: 0 0 4px 4px;
  1225. border-radius: 0 0 4px 4px;
  1226. }
  1227. .btn-group-vertical > .btn-large:first-child {
  1228. -webkit-border-radius: 6px 6px 0 0;
  1229. -moz-border-radius: 6px 6px 0 0;
  1230. border-radius: 6px 6px 0 0;
  1231. }
  1232. .btn-group-vertical > .btn-large:last-child {
  1233. -webkit-border-radius: 0 0 6px 6px;
  1234. -moz-border-radius: 0 0 6px 6px;
  1235. border-radius: 0 0 6px 6px;
  1236. }

Creating our class_of_ac.js

  1. <script type="text/javascript">
  2. var aircode_up = [
  3. '\u030d', /* ? */ '\u030e', /* ? */ '\u0304', /* ? */ '\u0305', /* ? */
  4. '\u033f', /* ? */ '\u0311', /* ? */ '\u0306', /* ? */ '\u0310', /* ? */
  5. '\u0352', /* ? */ '\u0357', /* ? */ '\u0351', /* ? */ '\u0307', /* ? */
  6. '\u0308', /* ? */ '\u030a', /* ? */ '\u0342', /* ? */ '\u0343', /* ? */
  7. '\u0344', /* ? */ '\u034a', /* ? */ '\u034b', /* ? */ '\u034c', /* ? */
  8. '\u0303', /* Þ */ '\u0302', /* ? */ '\u030c', /* ? */ '\u0350', /* ? */
  9. '\u0300', /* Ì */ '\u0301', /* ì */ '\u030b', /* ? */ '\u030f', /* ? */
  10. '\u0312', /* ? */ '\u0313', /* ? */ '\u0314', /* ? */ '\u033d', /* ? */
  11. '\u0309', /* Ò */ '\u0363', /* ? */ '\u0364', /* ? */ '\u0365', /* ? */
  12. '\u0366', /* ? */ '\u0367', /* ? */ '\u0368', /* ? */ '\u0369', /* ? */
  13. '\u036a', /* ? */ '\u036b', /* ? */ '\u036c', /* ? */ '\u036d', /* ? */
  14. '\u036e', /* ? */ '\u036f', /* ? */ '\u033e', /* ? */ '\u035b', /* ? */
  15. '\u0346', /* ? */ '\u031a' /* ? */
  16. ];
  17.  
  18. //those go DOWN
  19. var aircode_down = [
  20. '\u0316', /* ? */ '\u0317', /* ? */ '\u0318', /* ? */ '\u0319', /* ? */
  21. '\u031c', /* ? */ '\u031d', /* ? */ '\u031e', /* ? */ '\u031f', /* ? */
  22. '\u0320', /* ? */ '\u0324', /* ? */ '\u0325', /* ? */ '\u0326', /* ? */
  23. '\u0329', /* ? */ '\u032a', /* ? */ '\u032b', /* ? */ '\u032c', /* ? */
  24. '\u032d', /* ? */ '\u032e', /* ? */ '\u032f', /* ? */ '\u0330', /* ? */
  25. '\u0331', /* ? */ '\u0332', /* ? */ '\u0333', /* ? */ '\u0339', /* ? */
  26. '\u033a', /* ? */ '\u033b', /* ? */ '\u033c', /* ? */ '\u0345', /* ? */
  27. '\u0347', /* ? */ '\u0348', /* ? */ '\u0349', /* ? */ '\u034d', /* ? */
  28. '\u034e', /* ? */ '\u0353', /* ? */ '\u0354', /* ? */ '\u0355', /* ? */
  29. '\u0356', /* ? */ '\u0359', /* ? */ '\u035a', /* ? */ '\u0323' /* ò */
  30. ];
  31.  
  32. //those always stay in the middle
  33. var aircode_mid = [
  34. '\u0315', /* ? */ '\u031b', /* ? */ '\u0340', /* ? */ '\u0341', /* ? */
  35. '\u0358', /* ? */ '\u0321', /* ? */ '\u0322', /* ? */ '\u0327', /* ? */
  36. '\u0328', /* ? */ '\u0334', /* ? */ '\u0335', /* ? */ '\u0336', /* ? */
  37. '\u034f', /* ? */ '\u035c', /* ? */ '\u035d', /* ? */ '\u035e', /* ? */
  38. '\u035f', /* ? */ '\u0360', /* ? */ '\u0362', /* ? */ '\u0338', /* ? */
  39. '\u0337', /* ? */ '\u0361', /* ? */ '\u0489' /* ?_ */
  40. ];
  41.  
  42. // random function
  43. //---------------------------------------------------
  44.  
  45. //gets an int between 0 and max
  46. function rand(max)
  47. {
  48. return Math.floor(Math.random() * max);
  49. }
  50.  
  51. //gets a random char from a AC char table
  52. function rand_ac(array)
  53. {
  54. var ind = Math.floor(Math.random() * array.length);
  55. return array[ind];
  56. }
  57.  
  58. // utils funcs
  59. //---------------------------------------------------
  60.  
  61. //hide show element
  62. function toggle(id)
  63. {
  64. if(document.getElementById(id).style.display == "none")
  65. document.getElementById(id).style.display = "block";
  66. else
  67. document.getElementById(id).style.display = "none";
  68. }
  69.  
  70. //lookup char to know if its a zalgo char or not
  71. function is_ac_char(c)
  72. {
  73. var i;
  74. for(i=0; i<aircode_up.length; i++)
  75. if(c == aircode_up[i])
  76. return true;
  77. for(i=0; i<aircode_down.length; i++)
  78. if(c == aircode_down[i])
  79. return true;
  80. for(i=0; i<aircode_mid.length; i++)
  81. if(c == aircode_mid[i])
  82. return true;
  83. return false;
  84. }
  85.  
  86. function draw_ac_table(elid)
  87. {
  88. var container = document.getElementById(elid);
  89. var html = '';
  90.  
  91. html += '<b>Chars going up:</b><br />\n';
  92. html += '<table class="ac_xamp_ref_table">\n';
  93. html += '<tr>\n';
  94. for(var i=0; i<aircode_up.length; i++)
  95. {
  96. if(!(i % 10))
  97. html += '</tr><tr>';
  98. html += '<td class="ac_xamp_td">' + aircode_up[i] + '</td>\n';
  99. }
  100. html += '</tr>\n';
  101. html += '</table>\n';
  102.  
  103. html += '<br /><b>Chars staying in the middle:</b><br />\n';
  104. html += '<table class="ac_xamp_ref_table">\n';
  105. html += '<tr>\n';
  106. for(var i=0; i<aircode_mid.length; i++)
  107. {
  108. if(!(i % 10))
  109. html += '</tr><tr>';
  110. html += '<td class="ac_xamp_td">' + aircode_mid[i] + '</td>\n';
  111. }
  112. html += '</tr>\n';
  113. html += '</table>\n';
  114.  
  115. html += '<br /><b>Chars going down:</b><br />\n';
  116. html += '<table class="ac_xamp_ref_table">\n';
  117. html += '<tr>\n';
  118. for(var i=0; i<aircode_down.length; i++)
  119. {
  120. if(!(i % 10))
  121. html += '</tr><tr>';
  122. html += '<td class="ac_xamp_td">' + aircode_down[i] + '</td>\n';
  123. }
  124. html += '</tr>\n';
  125. html += '</table>\n';
  126.  
  127. container.innerHTML = html;
  128. }
  129.  
  130. // main shit
  131. //---------------------------------------------------
  132. function xamp_textarea(id)
  133. {
  134. var p = document.getElementById(id);
  135. var txt = p.value;
  136. var newtxt = '';
  137. for(var i=0; i<txt.length; i++)
  138. {
  139. if(is_ac_char(txt.substr(i, 1)))
  140. continue;
  141.  
  142. var num_up;
  143. var num_mid;
  144. var num_down;
  145.  
  146. //add the normal character
  147. newtxt += txt.substr(i, 1);
  148.  
  149. //options
  150. if(document.getElementById('ac_opt_mini').checked)
  151. {
  152. num_up = rand(8);
  153. num_mid = rand(2);
  154. num_down = rand(8);
  155. }
  156. else if(document.getElementById('ac_opt_normal').checked)
  157. {
  158. num_up = rand(16) / 2 + 1;
  159. num_mid = rand(6) / 2;
  160. num_down = rand(16) / 2 + 1;
  161. }
  162. else //maxi
  163. {
  164. num_up = rand(64) / 4 + 3;
  165. num_mid = rand(16) / 4 + 1;
  166. num_down = rand(64) / 4 + 3;
  167. }
  168.  
  169.  
  170. if(document.getElementById('ac_opt_up').checked)
  171. for(var j=0; j<num_up; j++)
  172. newtxt += rand_ac(aircode_up);
  173. if(document.getElementById('ac_opt_mid').checked)
  174. for(var j=0; j<num_mid; j++)
  175. newtxt += rand_ac(aircode_mid);
  176. if(document.getElementById('ac_opt_down').checked)
  177. for(var j=0; j<num_down; j++)
  178. newtxt += rand_ac(aircode_down);
  179. }
  180.  
  181. //result is in nextxt, display that
  182.  
  183. //remove all children of lulz_container
  184. var container = document.getElementById('lulz_container');
  185. while(container.childNodes.length)
  186. container.removeChild(container.childNodes[0]);
  187.  
  188. //build blocks for each line & create a <br />
  189. var lines = newtxt.split("\n");
  190. for(var i=0; i<lines.length; i++)
  191. {
  192. var n = document.createElement('text');
  193. n.innerHTML = lines[i];
  194. container.appendChild(n);
  195. var nl = document.createElement('br');
  196. container.appendChild(nl);
  197. }
  198.  
  199. //done
  200. }
  201. /* ]]> */
  202. </script>

Congratulations, you have created an air code generator. If you have questions and suggestions feel free to comment below or email me at [email protected]


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.