API tools faq
paste
Advertisement
Guest User

3

a guest
Jul 11th, 2014
186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.99 KB | None | 0 0
raw download clone embed print report
  1. <form action="/post" method="post" id="form-submit">
  2.  
  3. <div id="main">
  4.  
  5. <div id="main-content">
  6. <style>
  7. .previsu {
  8. background: url('http://i.imgur.com/PrP18sN.png');
  9. border: 1px solid #1675BC;
  10. display: none;
  11. position: absolute;
  12. top: 350px;
  13. margin: auto;
  14. margin-left: 150px !important;
  15. }
  16. .previsuimg {
  17. position: relative;
  18. }
  19. .previsuimg div {
  20. position: absolute; top: 30px; left: -10px; border: 3px double #E0E0E0; background: rgba(250, 250, 250, 0.9);
  21. }
  22.  
  23.  
  24. #addimage .part { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -235px -600px; width: 60px; height: 20px;}
  25. #addimage .more { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
  26. .image .part { background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -235px -548px; width: 60px; height: 20px;}
  27. .image .remove { float: left;background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
  28. .image .previsualise { float: left;background: url(http://i.imgur.com/cjqiRjU.gif) no-repeat -50px -436px; margin-left: 5px; padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
  29.  
  30. .image { width: 300px; }
  31.  
  32. </style> <script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script><script>
  33.  
  34.  
  35. function gerartitulo() {
  36. var tipo = document.getElementById("tipo").value;
  37.  
  38. switch(tipo) {
  39. case '[Avatar] ':
  40. tipob = 'Avatar';
  41. jQuery('input[name="f"]').val('13');
  42. break;
  43. case '[Assinatura] ':
  44. tipob = 'Assinatura';
  45. jQuery('input[name="f"]').val('13');
  46. break;
  47. case '[Userbar] ':
  48. tipob = 'Userbar';
  49. jQuery('input[name="f"]').val('13');
  50. break;
  51. case '[Banner] ':
  52. tipob = 'Banner';
  53. jQuery('input[name="f"]').val('13');
  54. break;
  55. case '[Logo] ':
  56. tipob = 'Logo';
  57. jQuery('input[name="f"]').val('13');
  58. break;
  59.  
  60. case '[Menu] ':
  61. case '[Botões] ':
  62. case '[Ícones] ':
  63. case '[Ranks] ':
  64. jQuery('input[name="f"]').val('13');
  65. break;
  66.  
  67. case '[Outros] ':
  68. case '[Imagem] ':
  69. jQuery('input[name="f"]').val('13');
  70. break;
  71. }
  72.  
  73. var cor = document.getElementById("cor").value;
  74. var tamanho = document.getElementById("tamanho").value;
  75. var texto = document.getElementById("texto").value;
  76. var textotonalidade = document.getElementById("textotonalidade").value;
  77. var cortonalidade = document.getElementById("cortonalidade").value;
  78.  
  79. jQuery("input[name=subject]").attr('value', tipo+cor+cortonalidade+tamanho+texto+textotonalidade);
  80. jQuery("#titlecode").html(tipo+cor+cortonalidade+tamanho+texto+textotonalidade);
  81.  
  82. if(tipo == "[Avatar] " || tipo == "[Assinatura] " || tipo == "[Userbar] " || tipo == "[Banner] " || tipo == "[Logo] ") {
  83. jQuery('#size_extra optgroup').css('display','block');
  84. jQuery('#size_extra optgroup[label!=' + tipob + ']').css('display','none');
  85. jQuery('#size_extra_span').css('display','block');
  86. }
  87. else {
  88. jQuery('#size_extra_span').css('display','none');
  89. }
  90. }
  91. imagensdopedido = '';
  92.  
  93. function gerarpedido() {
  94. gerartitulo();
  95. var cordofundo = document.getElementById("fundo").value;
  96. var cordafonte = document.getElementById("fontecor").value;
  97. var nomedafonte = (document.getElementById("fonte").value == '') ? document.getElementById("fonteNome").value : document.getElementById("fonte").value;
  98. var tipodeanimacao = (document.getElementById("animacao").value == '') ? document.getElementById("animacaoNome").value : document.getElementById("animacao").value;
  99. var tipodemoldura = (document.getElementById("moldura").value == '') ? document.getElementById("molduraNome").value : document.getElementById("moldura").value;
  100. var descricaodopedido = document.getElementById("adicionais").innerHTML;
  101. var descricaodopedido = document.getElementById("adicionais").value;
  102. var dimensaoA = document.getElementById("dimensoesA").value;
  103. var dimensaoL = document.getElementById("dimensoesL").value;
  104.  
  105. var dimensaof = (document.getElementById("size_extra").value == '') ? dimensaoL + ' x ' + dimensaoA + ' px' : document.getElementById("size_extra").value;
  106.  
  107. var urlforum = document.getElementById("urlforum").value;
  108.  
  109. finalmessage = '[b]Endereço do seu fórum:[/b] [url]'+ urlforum + '[/url]\n[b]Imagens a serem usadas :[/b] ' + imagensdopedido + '\n [b]Dimensões :[/b] ' + dimensaof +' \n[b]Cor do fundo :[/b] #' + cordofundo + '\n[b]Cor da fonte :[/b] #' + cordafonte + '\n[b]Fonte :[/b] ' + nomedafonte + '\n[b]Animação :[/b] ' + tipodeanimacao + '\n[b]Moldura :[/b] ' + tipodemoldura + '\n[b]Descrição do trabalho :[/b] ' + descricaodopedido;
  110.  
  111.  
  112. jQuery("input[name=message]").attr('value', finalmessage);
  113. }
  114.  
  115. function outra(id) {
  116. var inputID = id+"Nome";
  117. (document.getElementById(id).value == '') ? document.getElementById(inputID).style.display = 'inline' : document.getElementById(inputID).style.display = 'none';
  118. document.getElementById(inputID).focus();
  119. }
  120.  
  121. function removeimg(obj) {
  122. obj.parent().parent().remove();
  123. update_img();
  124. }
  125. function addimg() {
  126. $('#addimage').before('<tr class=image><td class=part></td><td><input style="float:left; display: inline; background-color: #ffffff;border: 1px solid #BCBCBC;color: #666666;padding: 2px;cursor: text;" type=text name=images id="Imagens_AddMore" onchange="update_img_list()" /> <div class="previsualise"></div> <div class="remove" onClick="removeimg($(this))"></div><div class="previsuimg"><div></div></div></td></tr>');
  127. $('#addimage').prev().find('.previsualise').hover(
  128. function () {
  129. $(this).parent().find('.previsuimg').html('<div><img src="'+encodeURI($(this).parent().find('input').attr('value'))+'" /></div>').find('div').css('display','block');
  130. },
  131. function () {
  132. $(this).parent().find('.previsuimg div').css('display','none');
  133. }
  134. );
  135. update_img();
  136. }
  137. function update_img() {
  138. if($('.image').length<2) $('.image .remove').hide();
  139. else $('.image .remove').show();
  140. update_img_list();
  141. }
  142.  
  143. function update_img_list() {
  144. imagensdopedido = '';
  145. jQuery('input[name=images]').each( function(index) {
  146. if($(this).val() != '') {
  147. imagensdopedido = imagensdopedido + $(this).val() + ' ; ';
  148. }
  149. });
  150. gerarpedido();
  151. }
  152.  
  153. gerartitulo();
  154. gerarpedido();
  155.  
  156. </script>
  157. <h1 class="page-title">
  158. <br /> Formulário de Pedidos Gráficos
  159. </h1>
  160.  
  161. <div class="panel row2">
  162.  
  163. <div class="inner">
  164. <span class="corners-top"><span></span></span>
  165. <div class="h3" style="margin-top: 7px;">
  166.  
  167. </div>
  168.  
  169. <p style="font-size: 12px;">
  170. O presente formulário foi criado com o objetivo de promover uma maior organização dos pedidos feitos na seção gráfica deste fórum.
  171. </p><span class="corners-bottom"><span></span></span>
  172. </div>
  173.  
  174. </div>
  175.  
  176. <div class="clear" style="height: 6px;">
  177.  
  178. </div>
  179.  
  180. <div class="panel">
  181.  
  182. <div class="inner">
  183. <span class="corners-top"><span></span></span>
  184. <div class="h3" style="margin-top: 7px;">
  185.  
  186. </div>
  187. <fieldset class="fields1"> <dl><dt> <label>Tipo de pedido :</label></dt><dd><select id="tipo" tabindex="1" onchange="gerartitulo();" name="tipoPedido">
  188. <option value=""></option>
  189. <option value="[Avatar] ">Avatar</option>
  190.  
  191.  
  192. <option value="[Assinatura] ">Assinatura</option>
  193. <option value="[Userbar] ">Userbar</option>
  194. <option value="[Banner] ">Banner</option>
  195. <option value="[Logo] ">Logo</option>
  196. <option value="[Botões] ">Botões</option>
  197. <option value="[Ícones] ">Ícones</option>
  198.  
  199. <option value="[Ranks] ">Ranks</option>
  200. <option value="[Outros] ">Outros</option>
  201. </select></dd></dl> <dl><dt> <label>Cor geral :</label></dt><dd><select id="cor" tabindex="2" onchange="gerartitulo();">
  202.  
  203. <option value=" "></option>
  204.  
  205. <option value="Vermelho">Vermelho</option>
  206. <option value="Verde">Verde</option>
  207. <option value="Amarelo">Amarelo</option>
  208. <option value="Azul">Azul</option>
  209. <option value="Roxo">Roxo</option>
  210.  
  211. <option value="Rosa">Rosa</option>
  212.  
  213. <option value="Laranja">Laranja</option>
  214. <option value="Branco">Branco</option>
  215. <option value="Preto">Preto</option>
  216. <option value="Cinza">Cinza</option>
  217. <option value="Marrom">Marrom</option>
  218.  
  219. <option value="Transparente">Transparente</option>
  220.  
  221. <option value="">Nenhuma da lista</option></select> <select id="cortonalidade" onchange="gerartitulo();">
  222. <option value=""></option>
  223. <option value="">Normal</option>
  224. <option value=" claro">Claro</option>
  225. <option value=" escuro">Escuro</option></select></dd></dl> <dl><dt> <label>Tamanho geral :</label></dt><dd><select id="tamanho" tabindex="3" onchange="gerartitulo();">
  226.  
  227. <option value=" "></option>
  228. <option value=" - Pequeno ">Pequeno</option>
  229. <option value=" - Médio ">Médio</option>
  230. <option value=" - Grande ">Grande</option></select></dd></dl> <dl><dt> <label>Cor geral do texto :</label></dt><dd><select id="texto" tabindex="4" onchange="gerartitulo();">
  231. <option value=" "></option>
  232.  
  233. <option value="- Texto vermelho ">Vermelho</option>
  234. <option value="- Texto verde ">Verde</option>
  235. <option value="- Texto amarelo ">Amarelo</option>
  236. <option value="- Texto azul ">Azul</option>
  237.  
  238. <option value="- Texto roxo ">Roxo</option>
  239. <option value="- Texto rosa ">Rosa</option>
  240.  
  241. <option value="- Texto laranja ">Laranja</option>
  242. <option value="- Texto branco ">Branco</option>
  243. <option value="- Texto preto ">Preto</option>
  244. <option value="- Texto cinza ">Cinza</option>
  245.  
  246. <option value="- Texto marrom ">Marrom</option>
  247. <option value="">Nenhuma da lista</option></select> <select id="textotonalidade" onchange="gerartitulo();">
  248.  
  249. <option value=""></option>
  250. <option value="">Normal</option>
  251. <option value=" claro">Claro</option>
  252. <option value=" escuro">Escuro</option></select></dd></dl> </fieldset> <span class="corners-bottom"><span></span></span>
  253. </div>
  254.  
  255. </div>
  256.  
  257. <div class="clear" style="height: 6px;">
  258.  
  259. </div>
  260.  
  261. <div class="panel">
  262.  
  263. <div class="inner">
  264. <span class="corners-top"><span></span></span>
  265. <div class="h3" style="margin-top: 7px;">
  266.  
  267. </div>
  268. <fieldset class="fields1"> <dl><dt></dt> <label></label><dd>Indique o endereço da imagem a usar. Caso necessite de mais imagens, carregue em +, para que o endereço seja validado. Este irá desaparecer, e poderá então adicionar outro endereço. </dd></dl></fieldset>
  269. <table>
  270.  
  271. <tbody>
  272.  
  273. <tr class="image zebraDois">
  274.  
  275. <td class="part">
  276.  
  277. </td>
  278.  
  279. <td>
  280. <input style="float:left; display: inline; background-color: #ffffff;border: 1px solid #BCBCBC;color: #666666;padding: 2px;cursor: text;" type="text" name="images" id="Imagens_AddMore" onchange="update_img_list()" />
  281. <div class="previsualise">
  282.  
  283. </div>
  284.  
  285. <div class="remove" onclick="removeimg($(this))" style="display: none;">
  286.  
  287. </div>
  288.  
  289. <div class="previsuimg">
  290.  
  291. <div>
  292.  
  293. </div>
  294.  
  295. </div>
  296.  
  297. </td>
  298.  
  299. </tr>
  300.  
  301. <tr id="addimage" class="zebraUm">
  302.  
  303. <td class="part">
  304.  
  305. </td>
  306.  
  307. <td>
  308.  
  309. <div class="more" onclick="addimg()">
  310.  
  311. </div>
  312.  
  313. </td>
  314.  
  315. </tr>
  316.  
  317. </tbody>
  318.  
  319. </table><fieldset class="fields1"><dl><dd> <script type="text/javascript">addimg()</script> </dd></dl> <dl><dt> <label>Dimensões :</label></dt> <dd> <input class="inputbox" type="text" id="dimensoesL" tabindex="6" onchange="gerarpedido();" style="width: 30px; clear: both;" /> px (largura) X <input class="inputbox" type="text" id="dimensoesA" tabindex="7" onchange="gerarpedido();" style="width: 30px;" /> px (altura) </dd><dd> <span id="size_extra_span" style="display: none;"> Tamanhos padrões do tipo de pedido escolhido : <select id="size_extra">
  320.  
  321. <option value=""></option>
  322. <optgroup label="Avatar">
  323. <option value="120 x 120 px">120 x 120 px</option>
  324. <option value="100 x 120 px">100 x 120 px</option>
  325.  
  326. <option value="120 x 160 px">120 x 160 px</option>
  327. <option value="140 x 180 px">140 x 180 px</option>
  328. <option value="140 x 200 px">140 x 200 px</option>
  329.  
  330. <option value="150 x 180 px">150 x 180 px</option>
  331. <option value="150 x 200 px">150 x 200 px</option>
  332. </optgroup>
  333.  
  334. <optgroup label="Assinatura">
  335. <option value="400 x 120 px">400 x 120 px</option>
  336. <option value="400 x 150 px">400 x 150 px</option>
  337. <option value="450 x 150 px">450 x 150 px</option>
  338.  
  339. </optgroup>
  340. <optgroup label="Userbar">
  341. <option value="350 x 19 px">350 x 19 px</option>
  342.  
  343. </optgroup>
  344. <optgroup label="Banner">
  345. <option value="70 x 30 px">70 x 30 px</option>
  346. <option value="90 x 15 px">90 x 15 px</option>
  347.  
  348. <option value="120 x 60 px">120 x 60 px</option>
  349. <option value="150 x 50 px">150 x 50 px</option>
  350. <option value="468 x 60 px">468 x 60 px</option>
  351.  
  352. </optgroup>
  353. <optgroup label="Logo">
  354. <option value="600 x 200 px">600 x 200 px</option>
  355. <option value="750 x 200 px">750 x 200 px</option>
  356.  
  357. <option value="800 x 220 px">800 x 220 px</option>
  358. <option value="150 x 50 px">830 x 200 px</option>
  359. </optgroup>
  360.  
  361. </select></span> </dd></dl> <dl><dt> <label>Endereço do seu fórum:</label></dt> <dd>Endereço da publicação realizada no fórum. Lembre-se que se se não possuir um endereço válido, seu pedido será recusado!<br /> <input class="inputbox" type="text" id="urlforum" tabindex="8" onchange="gerarpedido();" style="width: 300px; clear: both;" /> </dd></dl> <dl><dt> <label>Cor do fundo :</label></dt> <dd>Código hexadecimal da cor que deverá ser usada :<br /> <input type="text" tabindex="9" onchange="gerarpedido();" class="inputbox color champ" value="FFFFFF" id="fundo" name="couleur_fond" maxlength="7" onblur="this.style.borderColor='#FFFFFF'" onfocus="this.style.borderColor='#FFFFFF'" style="width: 70px; background-image: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: 100% 50%; background-repeat: no-repeat no-repeat;" autocomplete="off" /> </dd></dl> <dl><dt> <label>Cor da fonte :</label></dt> <dd>Código hexadecimal da cor que deverá ser usada :<br /> <input type="text" tabindex="10" onchange="gerarpedido();" class="inputbox color champ" value="FFFFFF" id="fontecor" name="couleur_fond" maxlength="7" onblur="this.style.borderColor='#FFFFFF'" onfocus="this.style.borderColor='#FFFFFF'" style="width: 70px; background-image: none; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); background-position: 100% 50%; background-repeat: no-repeat no-repeat;" autocomplete="off" /> </dd></dl> <dl><dt> <label>Fonte :</label></dt><dd><select id="fonte" tabindex="11" onchange="outra('fonte'); gerarpedido();">
  362. <option value=" "></option>
  363.  
  364. <option value="Arial" style="font-family: Arial;">Arial</option>
  365. <option value="Arial Black" style="font-family: Arial Black;">Arial Black</option>
  366. <option value="Comic Sans MS" style="font-family: Comic Sans MS;">Comic Sans MS</option>
  367. <option value="Courier New" style="font-family: Courier New;">Courier New</option>
  368.  
  369. <option value="Georgia" style="font-family: Georgia;">Georgia</option>
  370. <option value="Times New Roman" style="font-family: Times New Roman;">Times New Roman</option>
  371.  
  372. <option value="Calibri" style="font-family: Calibri;">Calibri</option>
  373. <option value="Trebuchet MS" style="font-family: Trebuchet MS;">Trebuchet MS</option>
  374. <option value="Verdana" style="font-family: Verdana;">Verdana</option>
  375. <option value="Visitor TTK 2" style="font-family: Visitor TTK 2;">Visitor TTK 2 (usada em Userbars)</option>
  376.  
  377. <option value="">Outra</option>
  378. </select> <input id="fonteNome" style="display: none; width: 400px;" class="inputbox" value="Qual?" onclick="if (this.value == 'Qual?') this.value = '';" onblur="if (this.value == '') this.value = 'Qual?';" onchange="gerarpedido();" onfocus="if (this.value == 'Qual?') this.value = '';" /></dd></dl> <dl><dt> <label>Animação :</label></dt><dd><select id="animacao" tabindex="12" onchange="outra('animacao'); gerarpedido();">
  379. <option value=" "></option>
  380. <option value="Não">Não</option>
  381. <option value="">Sim</option>
  382.  
  383. </select> <input id="animacaoNome" style="display: none; width: 400px;" class="inputbox" value="Como?" onclick="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';" onchange="gerarpedido();" onfocus="if (this.value == 'Como?') this.value = '';" /></dd></dl> <dl><dt> <label>Moldura :</label></dt><dd><select id="moldura" tabindex="13" onchange="outra('moldura'); gerarpedido();">
  384. <option value=" "></option>
  385. <option value="Não">Não</option>
  386. <option value="">Sim</option>
  387. </select> <input id="molduraNome" style="display: none; width: 400px;" class="inputbox" value="Como?" onclick="if (this.value == 'Como?') this.value = '';" onblur="if (this.value == '') this.value = 'Como?';" onchange="gerarpedido();" onfocus="if (this.value == 'Como?') this.value = '';" /></dd></dl> <dl><dt> <label>Descrição do trabalho :</label></dt> <dd><textarea class="inputbox" id="adicionais" tabindex="14" onchange="gerarpedido();" style="clear: both; height: 100px; width: 500px;">Deseja alguma mensagem escrita na imagem? Se sim, não se esqueça de citar aqui!</textarea></dd></dl> </fieldset> <input type="hidden" name="message" /> <input type="hidden" name="subject" value=" " /> <input type="hidden" name="mode" value="newtopic" /> <input type="hidden" name="f" value="26" /> <input type="hidden" name="lt" value="0" /> <span class="corners-bottom"><span></span></span>
  388. </div>
  389.  
  390. </div>
  391.  
  392. <div class="panel">
  393.  
  394. <div class="inner">
  395. <span class="corners-top"><span></span></span> <fieldset class="submit-buttons"><input value="Enviar seu pedido gráfico" type="submit" class="button1" name="post" /></fieldset> <span class="corners-bottom"><span></span></span>
  396. </div>
  397. <script>gerartitulo();</script>
  398. </div>
  399.  
  400. </div>
  401.  
  402. </div>
  403. </form>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!