Criar uma página de login

por CesarWatsom2 16.09.17 0:00

Detalhes da questão

Endereço do fórum: http://portaldsh.forumeiros.com/
Versão do fórum: phpBB2

Descrição

https://i.servimg.com/u/f11/19/74/83/96/proca110.png

Queria fazer esse "Login" só que além disso, para ter acesso ao fórum, terá que logar primeiro, ou seja, o redirecionamento do site tem de ser direto para o LOGIN

por Luiz 16.09.17 0:17

Você deseja uma página de login ou um submenu?
Veja se é isso: crie um novo JavaScript investido em todas as páginas, contendo o código abaixo.

Código:: /*globals jQuery, _userdata*/ /** *! Login popover that works with AJAX. * * @author Luiz * @licence MIT * * Copyright (c) Luiz Felipe | All rights reserved. */ (function ($) { 'use strict'; var $loginPopover; var config = { // Troque o boolean abaixo para "true" caso você queira exibir uma alerta ao usuário fazer o login: alertOnLogin: false }; $(function () { if (_userdata.session_logged_in) { return; } $('a[href$="/login"]').on('click', function (event) { event.preventDefault(); event.stopPropagation(); if ($('.fa-popover-login').length > 0) { $loginPopover.remove(); return; } var $this = $(this); /** * Variáveis de posição: */ var pos = $this.offset(); var posY = pos.top; var posX = pos.left; var mgnL = $this.innerWidth() / 2; var mgnT = $this.innerHeight(); $loginPopover = $([ '<div class="fa-popover-login">', ' <div class="fa-popover-intro">', ' <span class="h3">Login</span>', ' </div>', ' <form action="/login" method="post" name="form_login">', ' <div class="input-group">', ' <label for="username">Usuário:</label>', ' <input type="text" name="username" id="username" maxlength="40" />', ' <label for="password">Senha:</label>', ' <input type="password" id="password" name="password" maxlength="25" />', ' </div>', ' <input type="checkbox" name="autologin" id="autologin" checked="checked" />', ' <label for="autologin">Conexão automática.</label>', ' <footer>', ' <input type="submit" name="login" value="Conectar-se" class="submit-btn" />', ' <a href="/profile?mode=sendpassword">Esqueci a senha</a>', ' </footer>', ' </form>', '</div>', ].join('\n')) .appendTo('body') .css({ top: posY + 'px', left: posX + 'px', marginLeft: mgnL + 'px', marginTop: mgnT + 'px', position: 'absolute', transform: 'translateX(-50%)' }) .on('click', function (event) { event.stopPropagation(); }) ; $loginPopover .find('label') .on('click', function (event) { event.stopPropagation(); event.preventDefault(); }) ; $loginPopover .find('form') .on('submit', function (event) { event.preventDefault(); var $form = $(this); $form .find('[type="submit"]') .val('Logando...') .css('cursor', 'not-allowed') ; var username = $form.find('#username').val(); var password = $form.find('#password').val(); var autoLogin = $form.find('#autologin').prop('checked'); var autoLoginStatus = ''; if (autoLogin) { autoLoginStatus = 'on'; } $.post('/login', { username: username, password: password, autologin: autoLoginStatus, login: '' }) .done(function (context) { var bodyContext = context.split('<body>').pop().split('</body>').shift(); var body = document.createElement('body'); body.innerHTML = bodyContext; var $body = $(body); if ($body.find('[href="/register"]').length > 0) { alert([ 'Você especificou um usuário e/ou senha incorreto(s)!', 'Tente novamente!', ].join('\n')); location.pathname = '/login'; return; } if (config.alertOnLogin) { alert('Seja bem-vindo, ' + username + '...'); } location.reload(); }) .fail(function () { alert([ 'Ocorreu um erro... Tente novamente!', 'Caso o erro persista, contate o suporte técnico.' ].join('\n')); location.pathname = '/login'; }) ; }) ; }); $(document).on('click', function (event) { if ($('.fa-popover-login').length > 0) { $loginPopover.remove(); } }); var styles = [ '.fa-popover-login {', ' background-color: #fff;', ' -webkit-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);', ' -moz-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);', ' -ms-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);', ' -o-box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);', ' box-shadow: rgba(93,97,102,0.25) 0px 0px 0px 1px, 0px 7px 10px rgba(0, 0, 0, 0.2), 0px 5px 20px rgba(0,0,0,0.1);', ' width: 265px;', ' border-radius: 2px;', ' padding: 15px;', ' border: solid 1px #ddd;', ' font-size: 16px;', ' z-index: 999999999999999999999999;', ' font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif', '}', '', '.fa-popover-login,', '.fa-popover-login * {', ' box-sizing: border-box;', '}', '', '.fa-popover-intro .h3 {', ' font-family: "Trebuchet MS", "Segoe UI", Helvetica, "Helvetica Neue", Arial, "Open Sans", Lato, sans-serif;', ' font-size: 20px;', ' color: #818181;', ' border-bottom: solid 0px;', ' width: 100%;', ' display: block;', ' margin: 0px;', '}', '', '.fa-popover-login form {', ' margin: 10px -15px;', ' padding: 15px;', ' margin-bottom: 0px;', ' padding-bottom: 0px;', ' border-top: solid 1px #ddd;', '}', '', '.fa-popover-login form div.input-group label {', ' display: block;', ' margin-bottom: 5px;', ' color: #656565;', ' font-size: 14px;', '}', '', '.fa-popover-login form div.input-group label[for="password"] {', ' margin-top: 14px;', '}', '', '.fa-popover-login form div.input-group input {', ' display: block;', ' width: 100%;', ' padding: 5px 10px;', ' font-size: 1rem;', ' line-height: 1.25;', ' color: #464a4c;', ' background-color: #fff;', ' background-image: none;', ' -webkit-background-clip: padding-box;', ' background-clip: padding-box;', ' border: 1px solid rgba(0,0,0,.15);', ' border-radius: 2px;', ' -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;', ' transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;', ' -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;', ' transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;', ' transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;', '}', '', '.fa-popover-login form div.input-group input:focus {', ' color: #464a4c;', ' background-color: #fff;', ' border-color: #5cb3fd;', ' outline: 0;', '}', '', '.fa-popover-login label[for="autologin"] {', ' margin-top: 15px;', ' display: inline-block;', '}', '', '.fa-popover-login footer {', ' background-color: #ddd;', ' padding: 10px;', ' margin: -15px;', ' margin-top: 15px;', ' position: relative;', '}', '', '.fa-popover-login footer a {', ' border-bottom: solid 1px transparent;', ' color: #39c;', ' position: absolute;', ' right: 11px;', ' top: 47%;', ' -webkit-transform: translateY(-50%);', ' -moz-transform: translateY(-50%);', ' -ms-transform: translateY(-50%);', ' -o-transform: translateY(-50%);', ' transform: translateY(-50%);', '}', '', '.fa-popover-login footer a:hover {', ' border-color: #39c;', '}', '', '.fa-popover-login footer input {', ' border: none;', ' background-color: #3072ab;', ' color: #fff;', ' cursor: pointer;', ' padding: 4px 8px;', '}', '', '.fa-popover-login footer input:hover {', ' background-color: #275e8c;', '}', '', '.fa-popover-login::before {', ' content: "";', ' position: absolute;', ' height: 15px;', ' width: 15px;', ' background-color: #fff;', ' top: -2px;', ' left: 50%;', ' -webkit-transform: rotate(45deg) translateX(-50%);', ' -moz-transform: rotate(45deg) translateX(-50%);', ' -ms-transform: rotate(45deg) translateX(-50%);', ' -o-transform: rotate(45deg) translateX(-50%);', ' transform: rotate(45deg) translateX(-50%);', ' border: solid 1px transparent;', ' border-left: solid 1px #ddd;', ' border-top: solid 1px #ddd;', '}', ].join('\n'); $(['<style type="text/css">', styles, '</style>'].join('\n')).appendTo('head'); }); }(jQuery));

Feito isso, clique em "login" e veja se está tudo bem.

por CesarWatsom2 16.09.17 13:47

Luiz eu até gostei, porém eu queria uma página mesmo com o "Login" conforme mostrei na imagem do link... e que para acessar o fórum, tem que fazer login, ou seja, sempre que acessar o link do fórum, redirecionar sempre para o Login... Muito feliz

por Luiz 16.09.17 13:48

Leia:
-> https://ajuda.forumeiros.com/t108522-tutorial-login-com-controle-de-contas

por CesarWatsom2 16.09.17 14:25

Obrigado Luiz... Fiz tudo certinho, porém acho que o código esteja um pouco bugado...
o quadrado não chega nem a aparecer o botão de baixo

https://i.servimg.com/u/f11/19/74/83/96/tentat10.png

E OUTRA, queria utilizar o seu Modelo que é muito mais bonito e personalizado.

https://i.servimg.com/u/f11/19/74/83/96/tentat11.png

por Luiz 16.09.17 14:29

Tente esse:

Código::  <style type="text/css">/* CONTÊINERES E CONFIGURAÇÃO GERAL */ body { overflow:hidden; } #fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background:#FFF; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; } #fa_form_container a { color:#69C !important; } #fa_form_container a:hover { color:#369 !important; } .fa_login_maintitle { font-size:24px; font-weight:bold; text-align:center; text-transform:uppercase; margin:20px 0; } .fa_login_maintitle img { vertical-align:-5px; height:30px; margin-right:6px; } .fa_login_title { text-align:center; margin:30px 0; color:#666; font-size:28px; font-weight:bold; font-family:Arial, sans-serif; } .fa_login_desc { font-size:16px; text-align:center; margin:10px 0; } .fa_form_wrap { text-align:center; background:#EEE; border:1px solid #DDD; box-shadow:0 6px 12px rgba(0, 0, 0, 0.1); border-radius:3px; padding:30px 6px; width:300px; margin:30px auto; overflow:hidden; position:relative; transition:250ms; } .fa_login_row { margin:10px 0; } .fa_form_links { text-align:center; } .fa_login_origin { font-size:12px; position:fixed; bottom:10px; right:10px; z-index:-1; } .fa_login_origin a { font-weight:bold; } /* NOME DE USUÁRIO E AVATAR */ .fa_login_avatar { background:#FFF; border:1px solid #DDD; border-radius:100px; padding:2px; display:inline-block; width:100px; height:100px; overflow:hidden; position:relative; } .fa_login_avatar img { height:100px; width:100px; border-radius:100px; } #fa_avatar_real { background:#FFF; position:absolute; top:50px; left:50px; right:2px; bottom:2px; height:0; width:0; transition:linear 150ms; } #fa_avatar_real.avatar_visible { top:2px; left:2px; height:100px; width:100px; } .fa_login_username { font-size:16px; font-weight:bold; } /* BOTÕES E CAIXAS DE TEXTO */ .fa_login_button { color:#69C; background:none; border:1px solid #69C; border-radius:3px; font-size:16px; font-weight:bold; font-family:Arial, sans-serif; display:block; height:30px; line-height:30px; width:240px; margin:10px auto; transition:250ms; outline:none; cursor:pointer; } .fa_login_button:hover { color:#FFF; background:#69C; } .fa_login_input { color:#666; background:#FFF; border:1px solid #CCC; border-radius:3px; padding: 0 3px; height:30px; width: 232px; outline:none; } .fa_login_input:focus { border-color:#69C; } /* SLIDES DE FORMULÁRIO E BOTÃO VOLTAR */ .fa_form_slide { position:absolute; width:100%; transition:300ms; } #fa_login_back { position:absolute; top:30px; left:40px; opacity:0; visibility:hidden; transition:250ms; } #fa_login_back.fa_login_visible { opacity:1; visibility:visible; } /* LISTA DE CONTAS */ #account_list { background:#EEE; position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; } .account_list_row { font-size:16px; text-align:left; width:80%; margin:10px auto; position:relative; } .account_list_inner { background:#FFF; border:1px solid #DDD; border-radius:3px; padding:3px; width:80%; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .account_list_inner:hover { background:#FFD } .account_list_avatar { height:40px; width:40px; vertical-align:middle; margin-right:3px; } #fa_form_container a.account_list_delete { font-size:30px; color:#F33 !important; background:#FFF; border:1px solid #F33; border-radius:100px; width:20px; height:20px; line-height:22px; text-align:center; position:absolute; margin-top:-10px; top:50%; right:0; display:block; overflow:hidden; } #fa_form_container a.account_list_delete:hover { color:#333 !important; border-color:#333; } /* CAMPOS OCULTOS */ .logged_out #fa_form_logout, .logged_in #fa_form_login, .noscript #fa_form_login, .noscript #fa_form_logout, #account_list.accounts_hidden { display:none }</style> <div class="logged_out noscript" id="fa_form_container"> <h1 class="fa_login_maintitle"> <a target="_blank" href="http://www.forumeiros.com"><img src="http://im0.all-up.com/static/images/sigle.png" /><span style="color:#39C;">Forum</span><span style="color:#333;">eiros.com</span></a> </h1>  <noscript> <form action="/login" method="post"> <h2 class="fa_login_title">Log in</h2> <p class="fa_login_desc">Por favor, faça conecte-se para acessar o fórum</p> <div class="fa_form_wrap"> <div class="fa_login_row"> <input id="fa_login_username" class="fa_login_input" type="text" name="username" placeholder="Seu nome de usuário"/> </div> <div class="fa_login_row"> <input id="fa_login_password" class="fa_login_input" type="password" name="password" placeholder="Senha"/> </div> <div class="fa_login_row"> <input class="fa_login_button" type="submit" name="login" value="Entrar"/> <div style="width:240px;margin:auto;"> <div style="float:left;"> <label for="fa_autologin"><input id="fa_autologin" type="checkbox" name="autologin"/> Permanecer conectado</label> </div> <div style="float:right;"> <a href="/profile?mode=sendpassword">Esqueci minha senha</a> </div> <div class="clear"></div> </div> </div> </div> <div class="fa_form_links"> <div class="fa_login_row"> <a href="/register">Criar uma conta</a> </div> <div class="fa_login_row"> <a href="/login#login_classic">Log-in clássico</a> | <a href="/login?logout=true#login_classic">Sair</a> </div> </div> </form> </noscript>   <form method="post" action="/login" id="fa_form_login"> <h2 class="fa_login_title"> Log in </h2> <p class="fa_login_desc"> Por favor, conecte-se para ter acesso a <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script> </p> <div style="height:210px;" class="fa_form_wrap" id="fa_form_wrap"> <div class="fa_login_row"> <a href="#" id="fa_login_back">Voltar</a> <span class="fa_login_avatar"> <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" /> <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" id="fa_avatar_real" /> </span> </div>  <div style="left:0px;" class="fa_form_slide" id="login_step_1"> <div class="fa_login_row"> <input placeholder="Insira seu nome de usuário" name="username" type="text" class="fa_login_input" id="fa_login_username" /> <p style="color:#F00;display:none;" class="fa_login_row" id="fa_error_username"> Por favor, insira seu nome de usuário. </p> </div> <div class="fa_login_row"> <input value="Próximo" type="button" class="fa_login_button" id="fa_button_next" /> </div> </div>   <div style="left:400px;" class="fa_form_slide" id="login_step_2"> <div class="fa_login_row"> <span class="fa_login_username"></span> </div> <div class="fa_login_row"> <input placeholder="Senha" name="password" type="password" class="fa_login_input" id="fa_login_password" /> <p style="color:#F00;width:240px;margin:10px auto;display:none;" class="fa_login_row" id="fa_error_password"> Nome de usuário ou senha inválida. </p> </div> <div class="fa_login_row"> <input value="Entrar" name="login" type="submit" class="fa_login_button" /> <div style="width:240px;margin:auto;"> <div style="float:left;"> <label for="fa_autologin"><input name="autologin" type="checkbox" id="fa_autologin" /> Permanecer conectado</label> </div> <div style="float:right;"> <a href="/profile?mode=sendpassword">Esqueci minha senha</a> </div> <div class="clear"> </div> </div> </div> </div>  </div> <div class="fa_form_links"> <div class="fa_login_row" id="account_list_holder"> </div> <div class="fa_login_row"> <a href="/register">Criar um conta</a> </div> <div class="fa_login_row"> <a href="/login#login_classic">Login clássico</a> </div> </div> </form>   <form method="post" action="/login?logout=true" id="fa_form_logout"> <h2 class="fa_login_title"> Sair </h2> <p class="fa_login_desc"> Você está prestes a sair de <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script> </p> <div class="fa_form_wrap"> <div class="fa_login_row"> <span class="fa_login_avatar"><script type="text/javascript">document.write(_userdata.avatar);</script></span> </div> <div class="fa_login_row"> <span class="fa_login_username"><script type="text/javascript">document.write('<a href="/u' + _userdata.user_id + '" target="_blank">' + _userdata.username + '</a>');</script></span> </div> <div class="fa_login_row"> Tem certeza que deseja sair? </div> <div class="fa_login_row"> <input value="Sim" name="confirm" type="submit" class="fa_login_button" /> <input value="Não" name="cancel" type="submit" class="fa_login_button" /> <script type="text/javascript">//<![CDATA[ _userdata.session_logged_in && (function() { var logout = document.getElementById('logout'), container = document.getElementById('fa_form_container'), form_logout = document.getElementById('fa_form_logout'); document.title = 'Log out'; container.className = 'logged_in'; /* if the default login link is present we can get the data from the href attribute. ( FASTER ) ** otherwise we'll need to send an AJAX request to the login page for the data ( SLOWER ) */ if (logout) { var tid = logout.href.replace(/.*?tid=(.*?)&.*/, '$1'), key = logout.href.replace(/.*?key=(.*?)$/, '$1'); form_logout.action += '&tid=' + tid; document.write('<input type="hidden" name="tid" value="' + tid + '"><input type="hidden" name="key" value="' + key + '">'); } else { $.get('/login?logout=true&change_version=prosilver', function(d) { var info = $('.submit-buttons', d)[0]; if (info) { info.style.display = 'none'; form_logout.appendChild(info); form_logout.action += '&tid=' + form_logout.tid.value; } }); } }()); //]]></script> </div> </div> </form>  </div> <script type="text/javascript">//<![CDATA[ !_userdata.session_logged_in && (function() { document.title = 'Entrar'; window.fa_form_login = { redirect : my_getcookie('fa_login_form_redirect') || '/forum', /* change redirection page after login */ submitting : false, /* true if posting login info */ accountList : document.createElement('DIV'), /* stores logged accounts */ /* move onto the password step pass along the user id to get the user avatar faster */ next : function(id) { var username = document.getElementById('fa_login_username'); if (username.value) { var avatar = document.getElementById('fa_avatar_real'), row, accounts, i; fa_form_login.clearError('username'); username.value = username.value.replace(/^\s+|\s+$/g, ''); // trim extra white space // check if the username is already stored if (!id && storage && storage.fa_accounts && window.JSON) { accounts = JSON.parse(storage.fa_accounts); for (i in accounts) { if (username.value.toLowerCase() == accounts[i].username.toLowerCase()) { id = i; break; } } } row = id ? null : document.getElementById('account_user_' + id); // check if account row is created to get an avatar that's already loaded if (row) avatar.src = row.getElementsByTagName('IMG')[0].src; else { $.get(id ? '/ajax/index.php?f=m&user_id=' + id : '/profile?mode=viewprofile&u=' + username.value, function(d) { var ava = id ? $('.tooltip-content img', d)[0] : $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0]; avatar.src = ava ? ava.src : 'http://2img.net/i/fa/invision/pp-blank-thumb.png'; avatar.className = 'avatar_visible'; }); } $('.fa_login_username').html('<a href="/profile?mode=viewprofile&u=' + username.value + '" target="_blank">' + username.value + '</a>'); document.getElementById('fa_form_wrap').style.height = '260px'; document.getElementById('login_step_1').style.left = '-400px'; document.getElementById('login_step_2').style.left = '0px'; document.getElementById('fa_login_back').className = 'fa_login_visible'; window.setTimeout(function() { document.getElementById('fa_login_password').focus(); }, 300); } else { fa_form_login.error('username'); } }, /* move back to the username step */ back : function() { fa_form_login.clearError('password'); document.getElementById('fa_login_username').focus(); document.getElementById('fa_avatar_real').className = ''; document.getElementById('fa_form_wrap').style.height = '210px'; document.getElementById('login_step_1').style.left = '0px'; document.getElementById('login_step_2').style.left = '400px'; document.getElementById('fa_login_back').className = ''; return false; }, /* submit the login form */ submit : function() { if (!fa_form_login.submitting) { fa_form_login.submitting = true; document.getElementById('fa_form_wrap').style.height = '260px'; fa_form_login.clearError('password'); $.post('/login', $('#fa_form_login').serialize() + '&login=true', function(d) { fa_form_login.submitting = false; if (/_userdata\["session_logged_in"\] = 1/.test(d)) { var storage = window.localStorage, id = d.match(/_userdata\["user_id"\] = (\d+)/)[1]; /* store the user_id and username for next login */ if (storage && window.JSON) { var accounts = storage.fa_accounts ? JSON.parse(storage.fa_accounts) : {}, i; for (i in accounts) accounts[i].last_active = 0; accounts[id] = { last_active : 1, /* last active account will be marked with a 1 */ username : document.getElementById('fa_login_username').value }; storage.fa_accounts = JSON.stringify(accounts); } my_setcookie('fa_login_form_redirect', ''); window.location.href = fa_form_login.redirect; } else { fa_form_login.error('password'); } }); } return false; }, /* throw a form error and display the error text */ error : function(type) { var error = document.getElementById('fa_error_' + type), wrap = document.getElementById('fa_form_wrap'); if (/none/.test(error.style.display)) { document.getElementById('fa_login_' + type).style.borderColor = '#F00'; error.style.display = 'block'; wrap.style.height = +wrap.style.height.replace(/px/, '') + error.getBoundingClientRect().height + 'px'; } }, /* clear the specified error */ clearError : function(type) { document.getElementById('fa_error_' + type).style.display = 'none'; document.getElementById('fa_login_' + type).style.borderColor = ''; }, /* delete a profile from the account list */ deleteProfile : function(id) { var storage = window.localStorage, accounts = JSON.parse(storage.fa_accounts), row = document.getElementById('account_user_' + id), i; delete accounts[id]; for (i in accounts) { accounts[i].last_active = 1; break; } storage.fa_accounts = JSON.stringify(accounts); row.parentNode.removeChild(row); if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Não existem contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>'; }, /* create the profile rows based onto the accounts you logged into */ createProfile : function(id, o) { var row = document.createElement('DIV'); row.id = 'account_user_' + id; row.className = 'account_list_row'; row.innerHTML = '<div class="account_list_inner"><img class="account_list_avatar" src="http://2img.net/i/fa/invision/pp-blank-thumb.png"/> <span class="account_list_username">' + o.username + '</span></div><a class="account_list_delete" title="Remove account" href="javascript:fa_form_login.deleteProfile(\'' + id + '\');">X</a>'; row.firstChild.onclick = function() { fa_form_login.toggleAccounts(); document.getElementById('fa_login_username').value = $('.account_list_username', this).text(); fa_form_login.next(this.parentNode.id.slice(13)); }; $.get('/ajax/index.php?f=m&user_id=' + id, function(d) { var ava = $('.tooltip-content img', d)[0]; if (ava) row.getElementsByTagName('IMG')[0].src = ava.src; }); fa_form_login.accountList.appendChild(row); }, /* basic setup of the account list */ initAccountList : function() { var a = document.createElement('A'), holder = document.getElementById('account_list_holder'); a.href = '#'; a.innerHTML = 'Entre com outra conta'; a.onclick = fa_form_login.toggleAccounts; fa_form_login.accountList.id = 'account_list'; fa_form_login.accountList.className = 'accounts_hidden'; document.getElementById('fa_form_wrap').appendChild(fa_form_login.accountList); holder.appendChild(a); }, /* toggle display of the account list */ toggleAccounts : function() { if (/accounts_hidden/.test(fa_form_login.accountList.className)) { fa_form_login.accountList.className = ''; document.getElementById('account_list_holder').firstChild.innerHTML = 'Retornar ao login'; } else { fa_form_login.accountList.className = 'accounts_hidden'; document.getElementById('account_list_holder').firstChild.innerHTML = 'Escolher outra conta'; } if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Você não possui contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>'; return false; } }; var container = document.getElementById('fa_form_container'), username = document.getElementById('fa_login_username'), storage = window.localStorage; container.className = 'logged_out'; /* move forward in the form when ENTER is pressed */ username.onkeydown = function(e) { if (e.keyCode && e.keyCode == 13) { fa_form_login.next(); return false; } }; /* if the specified data is useable we'll go through the stored accounts in localStorage and form a list for switching */ if (storage && storage.fa_accounts && window.JSON) { var accounts = JSON.parse(storage.fa_accounts), i, last_active = false; for (i in accounts) { if (accounts[i].last_active) { last_active = true; username.value = accounts[i].username; fa_form_login.next(i); } fa_form_login.createProfile(i, accounts[i]); } fa_form_login.initAccountList(); !last_active && username.focus(); } else username.focus(); document.getElementById('fa_button_next').onclick = function() { fa_form_login.next(); }; document.getElementById('fa_login_back').onclick = fa_form_login.back; document.getElementById('fa_form_login').onsubmit = fa_form_login.submit; }()); //]]></script> <style>form#fa_form_login, form#fa_form_login * { box-sizing: border-box; } div#fa_form_wrap { min-height: 270px !important; } </style>

por CesarWatsom2 16.09.17 14:33

Luiz, eu até gostei do modelo do carinha ai... mas o seu modelo é muito mais bonito e amplificado.

No caso tudo isso que esta aqui eu estou colocando no fórum da pmhh (portalpmhh.com)
Mas eu primeiro faço o teste no meu fórum, pois o fórum da PMHH é de um colega e ele não sabe mexer com isso...

Será que tu consegue me passar o seu modelo?

https://i.servimg.com/u/f11/19/74/83/96/tentat11.png

por Luiz 16.09.17 14:47

Se o @AlexG autorizar, fica na mão.
No entanto, posso até criar um diferente para você, basta me dizer como quer. o/

por CesarWatsom2 16.09.17 14:51

Desculpa Luiz...

Enfim...

Eu achei um modelo que gostei, consegue fazer mais ou menos assim?

https://w3layouts.com/wp-content/uploads/2015/12/Portal_Login_Form.jpg

por Luiz 16.09.17 15:34

Aqui:

Código:: <!DOCTYPE html>  <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Faça o login</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,400i,500,500i,700,700i" rel="stylesheet" /> <style> *{-webkit-box-sizing:border-box;box-sizing:border-box}body{background-image:linear-gradient(100deg, #1475a0 0%, #21a1ba 50%, #fff 100%);background-color:#21a1ba;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}a,a:focus,a:active,a:visited{color:#127da7;border-bottom:solid 1px #127da7;text-decoration:none}a:hover,a:focus:hover,a:active:hover,a:visited:hover{color:#444;border-bottom:solid 1px #444;text-decoration:none}form{padding-bottom:25px;background-color:#fff;width:40%;color:#555;position:relative;text-align:center;border-radius:3px}form>.form-icon{background-color:#127da7;position:absolute;top:0;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);padding:26px 31px;font-size:34px;border-radius:100px;color:#fff}form>header>h1{font-size:35px;font-weight:300;margin-top:60px;margin-bottom:25px}form>.form-inner{width:50%;margin:0 auto}form>.form-inner>input{background-color:#d0d0d0;text-align:center;color:#555;display:block;border:solid 1px #d0d0d0;margin:0 auto;padding:10px;margin-bottom:20px;width:100%;border-radius:3px}form>.form-inner>input::-webkit-input-placeholder{color:#555}form>.form-inner>input:-ms-input-placeholder{color:#555}form>.form-inner>input::-webkit-input-placeholder{color:#555}form>.form-inner>input::placeholder{color:#555}form>.form-inner>input:focus{outline:0}form>.form-inner>input[type="submit"]{width:auto;background-color:#127da7;color:#fff;border-color:#127da7;cursor:pointer;-webkit-transition:all linear 100ms;transition:all linear 100ms}form>.form-inner>input[type="submit"]:hover{background-color:#444;border-color:#444}#about{position:absolute;bottom:25px;left:25px;display:inline-block}#about i.fa{color:#555;background-color:#fff;padding:15px 15px;border-radius:200px;font-size:17px;-webkit-transition:all linear 200ms;transition:all linear 200ms;height:48px;width:48px;display:inline-block;cursor:pointer}#about span{color:#555;background-color:#fff;padding:15px 15px;border-radius:200px;font-size:17px;-webkit-transition:all linear 230ms;transition:all linear 230ms;margin-left:5px;-webkit-transform:scale(0) rotateZ(-180deg) translateY(-8px);transform:scale(0) rotateZ(-180deg) translateY(-8px);display:inline-block}#about:hover span{-webkit-transform:scale(1) rotateY(0deg) translateY(0px);transform:scale(1) rotateY(0deg) translateY(0px)} body { font-family: "Ubuntu", "Trebuchet MS", Arial, sans-serif; } </style> </head> <body> <form action="/login" method="POST"> <i class="fa fa-user form-icon"></i> <header class="form-header"> <h1>Login</h1> </header> <div class="form-inner"> <input type="text" placeholder="Usuário" name="username" required /> <input type="password" placeholder="Senha" name="password" required /> <input type="submit" name="login" value="Conectar-se" /> </div> <footer class="form-footer"> Esqueceu a senha? Clique <a href="/profile?mode=sendpassword">aqui</a>. </footer> </form> <div id="about"> <i class="fa fa-code"></i> <span>Codificado por <a href="https://lffg.github.io/" target="_blank">luuuiiiz.</a></span> </div> </body> </html>

Favor não remover a atribuição de créditos no canto inferior esquerdo.

por CesarWatsom2 16.09.17 15:47

https://i.servimg.com/u/f11/19/74/83/96/ops10.png

ficou assim '-'

por Luiz 16.09.17 17:23

Você deve desativar a opção "Usar o início e fim do fórum", ou seja, marcar "Não".

por CesarWatsom2 16.09.17 17:34

Luiz Ficou ótimo : https://i.servimg.com/u/f11/19/74/83/96/teste10.png

Poderia aumentar só um pouco o quadrado branco para o desenho do "user" não ficar em cima do "Login"?! rs Obrigado msm..

E outra coisa, por exemplo, se eu tiver um fórum com domínio próprio, eu consigo colocar esse "Login" como página inicial?
No caso ativar o botão... pois quando eu coloco normal no portaldsh.forumeiros.com ele diz "Enquanto for redirecionado para o Forumeiros.com, não será possível".

por Luiz 16.09.17 22:49

Se você colocar este código:

Código:: <!DOCTYPE html>  <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Faça o login</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,400i,500,500i,700,700i" rel="stylesheet" /> <style> * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { font-family: "Ubuntu", "Trebuchet MS", Arial, sans-serif; background-image: linear-gradient(100deg, #1475a0 0%, #21a1ba 50%, #fff 100%); background-color: #21a1ba; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow-y: hidden; min-height: 100vh; height: 100vh; max-heght: 100vh; } a, a:focus, a:active, a:visited { color: #127da7; border-bottom: solid 1px #127da7; text-decoration: none; } a:hover, a:focus:hover, a:active:hover, a:visited:hover { color: #444; border-bottom: solid 1px #444; text-decoration: none; } form { padding-bottom: 25px; background-color: #fff; width: 40%; color: #555; position: relative; text-align: center; border-radius: 3px; } @media screen and (max-width: 950px) { form { width: 60%; } } @media screen and (max-width: 850px) { form { width: 65%; } } @media screen and (max-width: 700px) { form { width: 70%; } } @media screen and (max-width: 500px) { form { width: 80%; } } @media screen and (max-width: 450px) { form { width: 90%; } } form > .form-icon { background-color: #127da7; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 26px 31px; font-size: 34px; border-radius: 100px; color: #fff; } form > header > h1 { font-size: 35px; font-weight: 300; margin-top: 60px; margin-bottom: 25px; } form > .form-inner { width: 50%; margin: 0 auto; } form > .form-inner > input { background-color: #d0d0d0; text-align: center; color: #555; display: block; border: solid 1px #d0d0d0; margin: 0 auto; padding: 10px; margin-bottom: 20px; width: 100%; border-radius: 3px; } form > .form-inner > input::-webkit-input-placeholder { color: #555; } form > .form-inner > input:-ms-input-placeholder { color: #555; } form > .form-inner > input::-webkit-input-placeholder { color: #555; } form > .form-inner > input::placeholder { color: #555; } form > .form-inner > input:focus { outline: 0; } form > .form-inner > input[type="submit"] { width: auto; background-color: #127da7; color: #fff; border-color: #127da7; cursor: pointer; -webkit-transition: all linear 100ms; transition: all linear 100ms; } form > .form-inner > input[type="submit"]:hover { background-color: #444; border-color: #444; } #about { position: absolute; bottom: 25px; left: 25px; display: inline-block; } #about i.fa { color: #555; background-color: #fff; padding: 15px 15px; border-radius: 200px; font-size: 17px; -webkit-transition: all linear 200ms; transition: all linear 200ms; height: 48px; width: 48px; display: inline-block; cursor: pointer; } #about span { color: #555; background-color: #fff; padding: 15px 15px; border-radius: 200px; font-size: 17px; -webkit-transition: all linear 230ms; transition: all linear 230ms; margin-left: 5px; -webkit-transform: scale(0) rotateZ(-180deg) translateY(-8px); transform: scale(0) rotateZ(-180deg) translateY(-8px); display: inline-block; } #about:hover span { -webkit-transform: scale(1) rotateY(0deg) translateY(0px); transform: scale(1) rotateY(0deg) translateY(0px); } </style> </head> <body> <form action="/login" method="POST"> <i class="fa fa-user form-icon"></i> <header class="form-header"> <h1>Login</h1> </header> <div class="form-inner"> <input type="text" placeholder="Usuário" name="username" required /> <input type="password" placeholder="Senha" name="password" required /> <input type="submit" name="login" value="Conectar-se" /> </div> <footer class="form-footer"> Esqueceu a senha? Clique <a href="/profile?mode=sendpassword">aqui</a>. </footer> </form> <div id="about"> <i class="fa fa-code"></i> <span>Codificado por <a href="lffg.github.io/" target="_blank">luuuiiiz.</span> </div> </body> </html>

O resultado será este:
-> https://1forum1.forumeiros.com/h3-login

por CesarWatsom2 17.09.17 1:54

Muito Obrigado Luiz! Você é demais cara!

por Luiz 17.09.17 2:16

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Criar uma página de login