Sistema de Login em página html personalizada

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Em curso Sistema de Login em página html personalizada

Mensagem por Zênite em 08/02/19, 12:42 am

Detalhes da questão


Endereço do fórum: http://rikudourpg.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá deuses da forumeiros,

Com a ajuda de vocês tenho construído aos poucos a página html do meu fórum -> http://rikudourpg.forumeiros.com/h1-pagina-inicial-construcao

Gostaria de saber uma forma para permitir que os usuários façam login logo nessa página e/ou caso já estejam logados, que a página "saiba" disso. Atualmente, existe uma barra no canto superior direito da tela que possui os links (quebrados) para "cadastre-se" e "login". Seria possível que, quando a pessoa clica em login, um formulário apareça para ser preenchido e, ao fazer login, o nome do usuário apareça no lugar da mensagem de "login/cadastre-se"?

Exemplo:

Página sem login -> https://i.imgur.com/nKIBpXp.jpg
Formulário aparece quando o usuário clica em login -> https://i.imgur.com/MpA8t1e.png
Página quando a pessoa está logada (nome aparece no canto) -> https://i.imgur.com/HvAFFcp.jpg

Espero ter conseguido explicar!

O código da página é esse:

Código:
<!--  -------------- Todos os créditos Reservados ---------------  -->
<!--  -------------- Feito por iPrompt - FDF ---------------------  -->
<!--  -------------- Não retirar os créditos por favor -----------  -->
<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Naruto Rikudou</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <style>
        footer {
        display: block;
        position: absolute;
        bottom: -30;
        width: 65%;
        opacity: 0.6;
        }
        #ultassunto {
        width: 36%;
        margin: 1rem auto;
        background: transparent;
        background-size: cover;
        display: flex;
        }
.boxultitulo {
    background-color: #1b1f2f;
    margin-top: -35px;
    padding: 10px;
    width: 220px;
    margin-left: -16px;
    border-radius: 10px 10px 0px 0px;
}
        .boxult {
        width: 240px;
        margin-left: 490px!important;
        height: 420px;
        box-sizing: border-box;
        padding: 1rem;
        margin: 1rem;
        text-align: center;
        position: absolute;
        border-radius: 10px;
        color: white;
        z-index: 2;
        background-color: #E9EBED;
        margin-top: 30px!important;
        }
        #id4 {
        float:left;
        }
        #id3 {
        float:left;
        }
        body {
        background: url('https://i.imgur.com/pzCDf7N.jpg') no-repeat;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        padding: 0;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        display: block;
        }
        #container img {float:left}
        .container {
        width: 30%;
        margin-left: -140px!important;
        margin: 1rem auto;
        background: transparent;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        background-size: cover;
        }
        .box {
        width: 140px;
        height: 130px;
        box-sizing: border-box;
        padding: 1rem;
        margin: 1rem;
        position: relative;
        border-radius: 10px;
        color: white;
        z-index: 2;
        background-color: #1b1f2f;
        transition:.7s;
        }
        .box:hover {
        transform:scale(1.1);
        transition:.7s;
        }
        #id3
        {
        float:right;
        }
        .barra {
        background-color: #E9EBED;
        position: relative;
        left: 0;
        float: right!important;
        right: 0;
        height: 45px;
        margin-top: -9px;
        width: 390px;
        border-bottom-left-radius: 16px;
        color: black;
        }
        div p{
        float:right;
        font-size: 20px;
        margin-top: -5px;
        padding: 15px;
        display: block;
        position: absolute;
        }
 
.mod-recent-row {
    display: block;
    background: #E9EBED;
    margin: 5px;
    padding: 5px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
 
.mod-recent-row span {
    color: black;
}
 
a.mod-recent-title {
    display: block;
}
i[class*='ion-'] {
    margin: 5px;
}
 
.mod-recent-row a {
    text-decoration: none;
}
 
.lastsubjects marquee {height: 23em !important;}
      </style>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  </head>
  <body>
      <script type="text/javascript">
      (function($) {
      'use strict';
      $(function() {
      $('.subject-last-load').load('/forum .lastsubjects', function() {
var $marq = $(".marquee");
$marq.replaceWith(function () {
    return $('<marquee/>', {
        direction: 'up',
        html: this.innerHTML
    });
});
      });
      });
      }(jQuery));
    </script>
      <div class="barra">
      <span>
      </span>
      <p style="">
      <a href="”register”">Cadastre-se</a>. Já é registrado? <a href="login">Faça seu login</a>
      </p><span></span>
      </div>
      <div style="" class="main-header__logo">
      <center>
      <img class="header-logo" alt="Naruto Rikudou" src="https://i.imgur.com/wHHv814.png" style="width: 300px;margin-left: 0px;" />
      </center>
      </div>
      <div id="ultassunto">
      <div class="boxult">
      <img src="imagem" alt="" />        <div class="boxultitulo"> <span>Último assuntos</span></div>
      <div class="subject-last-load"></div>
      </div>
      <div class="container">
      <div id="id4">
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="http://www.jeuxzone.net/timthumb.php?src=/images/games/18806_250x150.jpg&w=140&h=110" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>
      <center>
      <span>Fórum</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/LVjDaYY.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />
      <center style="margin-top: -24px;">
      <span>Solicitações</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="http://idws.id/uploads/forum/single/1408746506.jpeg" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />
      <center style="margin-top: -24px;">
      <span>Off-topic</span>
      </center>
      </div>
      </div>
      <div id="id2">
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/flAzjCx.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />
      <center style="margin-top: -24px;">
      <span>Regras</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/uHAZiRV.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />
      <center style="margin-top: -24px;">
      <span>Assembleia</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/HQAkN3v.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />
      <center style="margin-top: -24px;">
      <span>Podcast</span>
      </center>
      </div>
      </div>
      <div id="id3">
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/gmBx5Lu.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />
      <center style="margin-top: -24px;">
      <span>Registros</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/4saoTy2.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />
      <center style="margin-top: -24px;">
      <span>Mundo</span>
      </center>
      </div>
      <div class="box">
      <a href="http://rikudourpg.forumeiros.com" target="_blank"><img src="https://i.imgur.com/bNRtWLO.png" style="width: 139px;height: 109px;margin-top: -16px;border-radius: 10px 10px 0px 0px;margin-left: -16px;
      " alt="" /></a>          <img src="imagem" alt="" />
      <center style="margin-top: -24px;">
      <span>Parceiros</span>
      </center>
      </div>
      </div>
      </div>
      <footer>  </footer>
      <p style="display: block;
      position: absolute;
      bottom: -30px!important;
      width: 65%;
      opacity: 0.6;">
      Todos direitos reservados / Feito Exclusivo a Naruto Rikudo RPG / 2019 - 2019
      </p><footer></footer>
      </div>
      </body>
      </html>


Obrigado desde já e boa noite!
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 118
Pontos Ativos : 175

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Sistema de Login em página html personalizada

Mensagem por Zênite em 10/02/19, 09:05 pm

Up, olá gente ><
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 118
Pontos Ativos : 175

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Sistema de Login em página html personalizada

Mensagem por Pedxz em 11/02/19, 05:11 am

Olá @zênite,
Deixe-me perceber uma coisa. O Senhor quer adicionar na barra de navegação as hiperligação das páginas customizadas e/ou fazer um código na página apresentada em cima, de quando o membro está logado é automaticamente redirecionado para o /forum!?


Aguardo uma resposta sua,
pedxz.


Fórum dos Fóruns
Fórum de suporte Forumeiros
Leia as Regras do Fórum dos Fóruns.
Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Pedxz - Ajudeiro Voluntário  2007 Forumeiros

Pedxz

Pedxz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2489
Pontos Ativos : 3134

Ver perfil do usuário https://pedxz.forumeiros.com

Em curso Re: Sistema de Login em página html personalizada

Mensagem por Zênite em 11/02/19, 08:30 am

Olá! Gostaria de fazer um código na página apresentada que fosse possível ao usuário fazer login nela mesma e continuasse nela. Assim, após logado, ele escolheria algum quadro e aí sim seria redirecionado para o fórum.

A ideia é:

Logado = Não
Clicar em Login -> Aparece o formulário de login -> Logado na página inicial personalizada

Logado = Sim
Aparece o nome do usuário na barra do topo e a opção de "Sair".

Cadastre-se = Leva para a página de cadastro do fórum.

Qualquer outra informação para tentar esclarecer melhor, só mandar!


Obrigado pela paciência e até! :>
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 118
Pontos Ativos : 175

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Sistema de Login em página html personalizada

Mensagem por Zênite em 12/02/19, 09:01 am

Up, sem problemas c/ demora esse é chatinho mesmo
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 118
Pontos Ativos : 175

Ver perfil do usuário http://rikudourpg.forumeiros.com

Em curso Re: Sistema de Login em página html personalizada

Mensagem por Zênite em 18/02/19, 07:47 am

Não tenho absoluta certeza se posso dar outro up, mas vale a tentativa


up
Zênite

Zênite
Nível 8

Masculino
Inscrito dia : 18/12/2018
Mensagens : 118
Pontos Ativos : 175

Ver perfil do usuário http://rikudourpg.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum