「Forumeiros」 Sistema de Vip's - Forumeiros e HTML

Olá, caros usuários da Power Pixel 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 aqui no Power Pixel, 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 era 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 :)
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:

<!--                   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:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Demo atualizada!

Download:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Scan: MEGA já faz.

[info]Créditos:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - Por criar
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - Por passar para o HTML[/info]

Tutorial simples e um sistema bem útil,
Parabéns pelo projeto.

Parabéns pelo projeto.

Parabéns, será muito útil!