Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Chatbox

    Lembre-se de ler as nossas regras!
    Load More
    You don't have permission to chat.
Ruffles

html/css Sistema de Vip's - Forumeiros e HTML

Recommended Posts

Olá, caros usuários da Haze Fórum!

Hoje trago para vocês um controle de vip's para seu fórum ou site de servidores de jogos.
Este sistema foi usado um bom tempo em outro fórum, e eu decidi passar ele para o HTML pois precisava usar este sistema no fórum do servidor, e eu usava ele em Forumeiros, mas meu fórum é IPS. Bom sem mais enrolação o link da DEMO está ai e o Download xD

Irei deixar o código do sistema para Forumeiros também :)
*Comente para visualizar*
Tutorial/Forumeiros:
Painel de Controle -> Módulos -> HTML & JAVASCRIPT -> Gestão das páginas HTML -> Criar no modo avançado (HTML)

Título - VIP
Você deseja utilizar o início e o final da página do seu fórum? - Marque "Não"
Usar esta página como página inicial? - Marque "Não"
Conteúdo da página * - Cole o código abaixo nesta caixa (Retire o <br />, caso tenha)
Clique em salvar e pronto!

<!--                   CÓDIGO PARA ADICIONAR VIP                   -->
<!--                   
 <tr>
 <td><span style="color: #9E9E9E;"> NOME</span></td>
 <td><span style="color: grey; font-weight:bold;"> Compra/Evento</span></td>
 <td><span style="color: #9E9E9E;"> Data de compra </span></td>
<td><span style="color: red;"><div data-countdown="ANO/MES/DIA(ex: 2018/01/01"></div></span></td>
 </tr>
                  -->
<!--                   fim do código pra adicionar vip                   --><script src="//code.jquery.com/jquery.js"></script><script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script><link rel="shortcut icon" type="image/x-icon" href="https://i.imgur.com/6hvhyOY.png" /><title>VIP - Brasil Cidade Online</title><link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" /><style> tr{margin:0px;padding:0px;}
 body{background:#f5f5f5 url();font-family:segoe ui;}
 #conteudo{width:688px;margin:20px auto;}
 #conteudo table{width:100%;border-spacing:0px;border-radius:4px;text-align:center;background:#fff;border:1px solid rgba(0,0,0,0.10) }
 #conteudo table tbody{}
 #conteudo table tr{border-radius:2px;color:#e91e63;}
 #conteudo table tr:nth-child(2) td{border-top:0px;}
 #conteudo table tr td{padding:5px;border-right:1px solid #ccc;border-top:1px solid #ccc;}
 #conteudo table tr td:nth-child(4){border-right:0px;}
 #conteudo table tr.primeiro{}
 #conteudo table tr.primeiro td{background:#b3b3b3 url(https://i.imgur.com/xDHxQQk.png);border-radius:2px;box-shadow:inset 0 0 1px 1px rgba(0,0,0,.1);color:#fff;font-size:14px;font-weight:400;height:30px;line-height:25px;margin-bottom:4px;padding:0;text-indent:4px;text-shadow:0 1px 1px rgba(0,0,0,0.2);color:#fff;border:none;}
 #conteudo table tr.primeiro td:nth-child(1){border-radius:2px 0px 0px 0px;}
 #conteudo table tr.primeiro td:nth-child(4){border-radius:0px 2px 0px 0px;}
</style><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<div id="conteudo">
                                 
 <div style="background-image: url('https://i.imgur.com/1P3Bbil.png');background-repeat: no-repeat;width: 150px;height: 41px;margin-bottom: 6px;margin-top: 10px;color: #fff;padding: 0.2rem 1rem !important;text-shadow: 0.1em 0.1em #333;border-radius: 0 !important;">
                                 
 </div>
                                     
 <table>
                                 
 <tbody>
                                           
 <tr class="primeiro">
                                             
 <td>
                 Usuário                 
 </td>
                                             
 <td>
                 Obtido Por                 
 </td>
                                             
 <td>
                 Data que comprou                 
 </td>
                                             
 <td>
                 Expira em                 
 </td>
                                           
 </tr>
                                                                                                                 
 <tr>
                              
 <td>
               <span style="color: #9E9E9E;">  Ninguém</span>               
 </td>
                               
 <td>
               <span style="color: grey; font-weight:bold;"> Compra</span>               
 </td>
                                        
 <td>
               <span style="color: #9E9E9E;"> 16/12/2017</span>               
 </td>
                                        
 <td>
               <span style="color: red;"> </span>               
 <div data-countdown="2017/12/17" style="color: red;">
                             
 </div><span style="color: red;"></span>               
 </td>
                               
 </tr>
                                                      
 </tbody>
                                              
 </table>
</div><script>
   $('[data-countdown]').each(function() {
     var $this = $(this), finalDate = $(this).data('countdown');
     $this.countdown(finalDate, function(event) {
       $this.html(event.strftime('%D dias restantes'));
     });
   });
</script>

 

DEMOnstração: *Comente para visualizar*

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

Download: *Comente para visualizar*

Hidden Content

    Give reaction or reply to this topic to see the hidden content.

Scan: MEGA já faz.

Créditos:
@pedxz - Por criar
@Ruffles - Por passar para o HTML

Edited by Ruffles
  • Like 9
  • Love 1

Share this post


Link to post
Share on other sites

Muito bom, mas se adicionar o código dentro de uma tag Code: image.png creio que ficará mais bonito para apresentação e visualização.

Mas no geral, considero o código básico, seria mais legal se fosse algo automatizado ksks, mas tudo vai evoluindo, né?!

 

Share this post


Link to post
Share on other sites
27 minutos atrás, J17 disse:

Muito bom, mas se adicionar o código dentro de uma tag Code: image.png creio que ficará mais bonito para apresentação e visualização.

Mas no geral, considero o código básico, seria mais legal se fosse algo automatizado ksks, mas tudo vai evoluindo, né?!

 

Sim tudo evolui, vou conversar com pedxz pra nós trazermos uma versão mais atualizada rs

Share this post


Link to post
Share on other sites

Já fiz a versão v2, usada atualmente do fórum que usa JSON, mas brevemente vou fazer uma automática que vai:

Adicionar o avatar do usuário automaticamente;

Vai adicionar os membros automaticamente, o problema será adicionar o tempo para expirar.

  • Love 1

Share this post


Link to post
Share on other sites
20 horas atrás, pedxz disse:

Já fiz a versão v2, usada atualmente do fórum que usa JSON, mas brevemente vou fazer uma automática que vai:

Adicionar o avatar do usuário automaticamente;

Vai adicionar os membros automaticamente, o problema será adicionar o tempo para expirar.

Faz o tempo inicial baseado em quando o usuário for adicionado. Se o VIP for de 30 dias, adiciona o usuário com a data que foi adicionado +30 dias, algo assim, não?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×