Criar tela de Login em página HTML

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

Resolvido Criar tela de Login em página HTML

Mensagem por GeonTavares em 30/05/14, 04:36 am

  • Descrição:
Queria fazer fazer uma caixa de login e por baixo uma imagem. Existe essa possibilidade?

Algo parecido com isso.

http://info.abril.com.br/noticias/blogs/download-da-hora/files/2011/09/fbrefresh-1.jpg

  • Informações:
Fórum:www.semperviri.comVersão:PHPBB3
Tipo:Pedido de códigoTags:Criar,Login,página



Última edição por GeonTavares em 31/05/14, 03:04 pm, editado 1 vez(es)
avatar

GeonTavares
Nível 5

Masculino
Inscrito dia : 28/05/2014
Mensagens : 35
Pontos Ativos : 67

Ver perfil do usuário http://clubedoshomens.forumbrasil.net/

Resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb em 30/05/14, 01:33 pm

Olá,

Sim é possível, mas me de umas informações aqui...

Isso ai é uma página completa certo? Ou só um pop-up? Ele aparece logo ao entrar no fórum (quando o usuário estiver desconectado) ou somente ao clicar no botão de login?

E qual imagem você gostaria de por no fundo?

Abraços..
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut em 30/05/14, 02:05 pm

-wagh, suponho que seja ao entrar no forum e estiver desconectado estar nesta pagina.
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Criar tela de Login em página HTML

Mensagem por GeonTavares em 30/05/14, 07:43 pm

-wagh- escreveu:Olá,

Sim é possível, mas me de umas informações aqui...

Isso ai é uma página completa certo? Ou só um pop-up? Ele aparece logo ao entrar no fórum (quando o usuário estiver desconectado) ou somente ao clicar no botão de login?

E qual imagem você gostaria de por no fundo?

Abraços..

Seria quando estivesse desconectado. Quando conectasse ele iria para o fórum normalmente. Só quando está deslogado mesmo. Eu hospedei a imagem que quero no meu servidor. posso deixar o link dela? Ta em grande qualidade. Quero que ele seja o fundo da página sabe. Não um pop-up. Se for mais facil um pop-up.. um que ocupe toda a tela. Mas preferencialmente, queria uma página html própria para isso.
avatar

GeonTavares
Nível 5

Masculino
Inscrito dia : 28/05/2014
Mensagens : 35
Pontos Ativos : 67

Ver perfil do usuário http://clubedoshomens.forumbrasil.net/

Resolvido Re: Criar tela de Login em página HTML

Mensagem por Shek em 30/05/14, 10:10 pm

Qual é a URL da página que mostra na imagem?


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17137
Pontos Ativos : 21398

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Criar tela de Login em página HTML

Mensagem por GeonTavares em 30/05/14, 11:50 pm

Ah, aquilo eu achei no google images, não sei. É de uma extenção do Google Chrome eu acho.
avatar

GeonTavares
Nível 5

Masculino
Inscrito dia : 28/05/2014
Mensagens : 35
Pontos Ativos : 67

Ver perfil do usuário http://clubedoshomens.forumbrasil.net/

Resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb em 31/05/14, 11:58 am

Olá,

Então vamos lá..

Criei um baseado neste que me mandou, ok? Qualquer alteração me avise..

Preview:
http://punbbteste.forumeiros.com/h12-

Código HTML
Código:
<!DOCTYPE html>
<html>
<head>
    <title>Painel de login</title>
    <meta charset="utf-8" />
    <style type="text/css">
    @font-face {
      font-family: 'Sigmar One';
      font-style: normal;
      font-weight: 400;
      src: local('Sigmar One'), local('SigmarOne'), url(http://themes.googleusercontent.com/static/fonts/sigmarone/v4/aRAZJs6CY7SV6eSg6Wx4jxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
    }
    body{
        margin: 0;
        font: 14px Lucida sans;
        background: #333 url('http://i.imgur.com/Ggzvfr8.jpg') no-repeat;
        -webkit-background-size: cover;
          -moz-background-size: cover;
            -o-background-size: cover;
                background-size: cover;
        color: #fff;
    }
    a, a:active, a:focus{
        text-decoration: none;
        color: #fafafa;
    }
    #logo{
        font: 30px 'Sigmar One';
        text-align: center;
        padding: 0;
        margin: 5em 0 0;
        text-shadow: rgba(0,0,0,1) 0 0 5px;
    }
    #wrap{
        margin: 0 auto;
        max-width: 50%;
        background: rgba(255,255,255,.3);
        border-radius: 5px;
        text-shadow: rgba(0,0,0,.5) 1px 1px 0;
        box-shadow: rgba(0,0,0,.2) 0 0 3px;
        text-align: center;
        padding: 3em 1em;
    }
    hr{
        margin: 1em;
        border: 0;
        border-top: 1px rgba(0,0,0,.2) solid;
        border-bottom: 1px rgba(255,255,255,.2) solid;
    }
    </style>
</head>
<body>
   
    <form action="/login?">
        <p id="logo">forumname</p>
        <div id="wrap">
            <label for="username">
                Nome:
                <input name="username" type="text" />
            </label>

            <label for="password">
                Senha:
                <input name="password" type="password" />
            </label>

            <label for="login">
                <input name="login" type="submit" value="Login" />
            </label>
            <hr>
            <label for="sendpassword">
                <a href="/profile?mode=sendpassword">Esqueci minha senha</a>
            </label>

            <label for="autologin">
                <input name="autologin" id="autologin" tabindex="4" checked="checked" class="radio" type="checkbox" /> Conexão automática
            </label>
        </div>
    </form>
   
</body>
</html>

Para alterar a fonte do logotipo, busque na internet sobre a propriedade @font-face, aquela eu peguei diretamente no Google Fonts...

Sua intenção é que ao usuário clicar num link para a página de login seja redirecionado para essa página ai né? Sendo assim vamos ter que recorrer ao Javascript...

Crie um Javascript com investimento em todas as páginas com este conteúdo
Código:
$(function(){
  $('a[href*="/login"]').attr('href','hID-');
});

Note o hID-

Mude o ID para a página que você criou...


Resulta?

Abraços...
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

Ver perfil do usuário http://punbb.forumeiros.com
  • 0

Resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut em 31/05/14, 12:24 pm

wagh esta página que passou a ele, quando vai deslogar ele vai pra pagina HTML, arruma ai pra ele ja antes que ele volte se puder
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb em 31/05/14, 12:34 pm

Triste 

Não me atentei a este detalhe x.x

Obrigado pelo aviso..

Troque o Javascript por este:
Código:
$(function(){
    $('a[href="/login"]').attr('href','hID-');
});
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut em 31/05/14, 12:41 pm

Amigo, agora quando está deslogado não vai pra pagina html, suponho que pra arrumar o logout teria de fazer outro JS e seria separado

Achei a solução mais teria de mudar o cod para phpBB3 pois este é para PunBB
Código:
//<![CDATA[
$(function () {
    $('#user_navigation li a[href="/login?logout"]').attr('href', $('#logout').attr('href'));
});
//]]>
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb em 31/05/14, 12:53 pm

Estranho... Aqui está funcionando perfeitamente...


Vamos esperar o usuário verificar se da esse bug para ele também, ok?

Se der pensamos em alguma solução...

Abraços...
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut em 31/05/14, 12:55 pm

Claro, abraços. (Meu forum é a msm versão dele)
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Criar tela de Login em página HTML

Mensagem por GeonTavares em 31/05/14, 02:25 pm

Simplesmente perfeito senhores, superou minhas expectativas. Só tem duas coisinhas que queria modificar.

Eu queria saber, se tem como também colocar a opção de Cadastre-se. e outra. A intenção não era substituir o link de login no forum, mas sim ela ser a página principal. Eu tentei por ela como principal, porem n tive sucesso pois ela n possui um link para o forumeiros.

Vocês conseguem resolver issso?
avatar

GeonTavares
Nível 5

Masculino
Inscrito dia : 28/05/2014
Mensagens : 35
Pontos Ativos : 67

Ver perfil do usuário http://clubedoshomens.forumbrasil.net/

Resolvido Re: Criar tela de Login em página HTML

Mensagem por TappedOut em 31/05/14, 02:41 pm

acrescente isto no final da pagina HTML
Código:
<center><a href="http://www.forumeiros.com/" target="_blank">http://www.forumeiros.com/</a></center>
E tente botar de pagina principal denovo.
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Criar tela de Login em página HTML

Mensagem por waghcwb em 31/05/14, 02:55 pm

Olá,

Com o botão de register substitua o conteúdo por este:
Código:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Painel de login</title>
        <meta charset="utf-8" />
        <style type="text/css">
        @font-face {
          font-family: 'Sigmar One';
          font-style: normal;
          font-weight: 400;
          src: local('Sigmar One'), local('SigmarOne'), url(http://themes.googleusercontent.com/static/fonts/sigmarone/v4/aRAZJs6CY7SV6eSg6Wx4jxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
        }
        body{
            margin: 0;
            font: 14px Lucida sans;
            background: #333 url('http://i.imgur.com/Ggzvfr8.jpg') no-repeat;
            -webkit-background-size: cover;
              -moz-background-size: cover;
                -o-background-size: cover;
                    background-size: cover;
            color: #fff;
        }
        a, a:active, a:focus{
            text-decoration: none;
            color: #fafafa;
        }
        #logo{
            font: 30px 'Sigmar One';
            text-align: center;
            padding: 0;
            margin: 5em 0 0;
            text-shadow: rgba(0,0,0,1) 0 0 5px;
        }
        form{
            margin: 0 auto;
            max-width: 50%;
        }
        #wrap{
            width: 100%;
            background: rgba(255,255,255,.3);
            border-radius: 5px;
            text-shadow: rgba(0,0,0,.5) 1px 1px 0;
            box-shadow: rgba(0,0,0,.2) 0 0 3px;
            text-align: center;
            padding: 3em 1em;
        }
        hr{
            margin: 1em;
            border: 0;
            border-top: 1px rgba(0,0,0,.2) solid;
            border-bottom: 1px rgba(255,255,255,.2) solid;
        }
        #register{
            background: url('http://imgur.com/EK2ZA9X.png') repeat-x scroll 0px 0px #8FBE5F;
            box-shadow: 0px 1px 0px 0px #ADD08B inset, 0px 2px 3px rgba(0, 0, 0, 0.2);
            text-shadow: 0px -1px 0px #474747;
            border: 1px solid #51842F;
            border-radius: 3px;
            color: #FFF;
            cursor: pointer;
            padding: .3em 5em;
            display: inline-block;
            margin: 0 2em 1em;
        }
        #copyrights{
            font-size: 13px;
        }
        </style>
    </head>
    <body>
     
        <form action="/login?">
            <p id="logo">forumname</p>
            <div id="wrap">
                <a id="register" href="/register">Registre-se</a>
                <hr>
                <label for="username">
                    Nome:
                    <input name="username" type="text" />
                </label>

                <label for="password">
                    Senha:
                    <input name="password" type="password" />
                </label>

                <label for="login">
                    <input name="login" type="submit" value="Login" />
                </label>
                <hr>
                <label for="sendpassword">
                    <a href="/profile?mode=sendpassword">Esqueci minha senha</a>
                </label>

                <label for="autologin">
                    <input name="autologin" id="autologin" tabindex="4" checked="checked" class="radio" type="checkbox" /> Conexão automática
                </label>
            </div>
            <a id="copyrights" href="www.forumeiros.com">Página hospedada na Forumeiros</a>
        </form>
     
    </body>
    </html>

E para deixar como página inicial é só marcar a opção para deixar como página inicial, você não estava conseguindo pois não havia nenhum link para a Forumeiros...
avatar

waghcwb
Usuário destaque

Masculino
Inscrito dia : 06/09/2012
Mensagens : 734
Pontos Ativos : 1097

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

Resolvido Re: Criar tela de Login em página HTML

Mensagem por GeonTavares em 31/05/14, 03:03 pm

Ficou perfeito pessoal!

Podem checar! Muito bom!

http://www.semperviri.com/
avatar

GeonTavares
Nível 5

Masculino
Inscrito dia : 28/05/2014
Mensagens : 35
Pontos Ativos : 67

Ver perfil do usuário http://clubedoshomens.forumbrasil.net/

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

- Tópicos similares

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