로그인 스킨 채택완료
코드펜에서 로그인 스킨을 다운받아 그누보드처럼 쓰려고 하는데..
로그인이 안돼요 ㅠㅠ
무슨 코드가 문제인가요?
</p>
<p><?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가</p>
<p>// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$member_skin_url.'/bakd.css">', 0);
?></p>
<p><!-- 로그인 시작 { -->
<div id="mb_login" class="mbskin">
<form name="flogin" action="<?php echo $login_action_url ?>" onsubmit="return flogin_submit(this);" method="post">
<input type="hidden" name="url" value="<?php echo $login_url ?>">
<div class="page">
<div class="container">
<div class="left">
<div class="login">Login</div>
<div class="eula">By logging in you agree to the ridiculously long terms that you didn't bother to read</div>
</div>
<div class="right">
<svg viewBox="0 0 320 300">
<defs>
<linearGradient
inkscape:collect="always"
id="linearGradient"
x1="13"
y1="193.49992"
x2="307"
y2="193.49992"
gradientUnits="userSpaceOnUse">
<stop
style="stop-color:#ff00ff;"
offset="0"
id="stop876" />
<stop
style="stop-color:#ff0000;"
offset="1"
id="stop878" />
</linearGradient>
</defs>
<path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
</svg>
<div class="form">
<label for="login_id">ID</label>
<input type="text" id="login_id" name="mb_id" class="id_input" />
<label for="login_pw">Password</label>
<input type="password" id="login_pw" name="mb_password" class="password" />
<input type="submit" id="login" value="login">
</div>
</div>
</div>
</div>
<?php
@include_once(get_social_skin_path().'/social_login.skin.php');
?>
<!-- partial -->
<script src='<a href="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script><script" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script><script</a> src="./script.js"></script>
<script src="<?php echo $member_skin_url?>/bakd.js"></script>
<script>
$(function(){
$("#login_auto_login").click(function(){
if (this.checked) {
this.checked = confirm("자동로그인을 사용하시면 다음부터 회원아이디와 비밀번호를 입력하실 필요가 없습니다.\n\n공공장소에서는 개인정보가 유출될 수 있으니 사용을 자제하여 주십시오.\n\n자동로그인을 사용하시겠습니까?");
}
});
});</p>
<p>function flogin_submit(f)
{
return true;
}
</script>
<!-- } 로그인 끝 --></p>
<p>
자바 스크립트:
</p>
<p>var current = null;
document.querySelector('#email').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: 0,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '240 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});
document.querySelector('#password').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: -336,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '240 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});
document.querySelector('#submit').addEventListener('focus', function(e) {
if (current) current.pause();
current = anime({
targets: 'path',
strokeDashoffset: {
value: -730,
duration: 700,
easing: 'easeOutQuart'
},
strokeDasharray: {
value: '530 1386',
duration: 700,
easing: 'easeOutQuart'
}
});
});</p>
<p>CSS
</p>
<p>@import url('<a href="https://rsms.me/inter/inter-ui.css');" target="_blank" rel="noopener noreferrer">https://rsms.me/inter/inter-ui.css');</a>
::selection {
background: #2D2F36;
}
::-webkit-selection {
background: #2D2F36;
}
::-moz-selection {
background: #2D2F36;
}
body {
background: white;
font-family: 'Inter UI', sans-serif;
margin: 0;
padding: 20px;
}
.page {
background: #e2e2e5;
display: flex;
flex-direction: column;
height: calc(100% - 40px);
position: absolute;
place-content: center;
width: calc(100% - 40px);
}
@media (max-width: 767px) {
.page {
height: auto;
margin-bottom: 20px;
padding-bottom: 20px;
}
}
.container {
display: flex;
height: 320px;
margin: 0 auto;
width: 640px;
}
@media (max-width: 767px) {
.container {
flex-direction: column;
height: 630px;
width: 320px;
}
}
.left {
background: white;
height: calc(100% - 40px);
top: 20px;
position: relative;
width: 50%;
}
@media (max-width: 767px) {
.left {
height: 100%;
left: 20px;
width: calc(100% - 40px);
max-height: 270px;
}
}
.login {
font-size: 50px;
font-weight: 900;
margin: 50px 40px 40px;
}
.eula {
color: #999;
font-size: 14px;
line-height: 1.5;
margin: 40px;
}
.right {
background: #474A59;
box-shadow: 0px 0px 40px 16px rgba(0,0,0,0.22);
color: #F1F1F2;
position: relative;
width: 50%;
}
@media (max-width: 767px) {
.right {
flex-shrink: 0;
height: 100%;
width: 100%;
max-height: 350px;
}
}
svg {
position: absolute;
width: 320px;
}
path {
fill: none;
stroke: url(#linearGradient);;
stroke-width: 4;
stroke-dasharray: 240 1386;
}
.form {
margin: 40px;
position: absolute;
}
label {
color: #c2c2c5;
display: block;
font-size: 14px;
height: 16px;
margin-top: 20px;
margin-bottom: 5px;
}
input {
background: transparent;
border: 0;
color: #f2f2f2;
font-size: 20px;
height: 30px;
line-height: 30px;
outline: none !important;
width: 100%;
}
input::-moz-focus-inner {
border: 0;
}
#submit {
color: #707075;
margin-top: 40px;
transition: color 300ms
}
#submit:focus {
color: #f2f2f2;
}
#submit:active {
color: #d0d0d2;
}</p>
<p>원본: https://codepen.io/ainalem/pen/EQXjOR">https://codepen.io/ainalem/pen/EQXjOR
원래 비밀번호 누르면 중간에 선이 슝~ 하고 내려가야 하는데.. 안내려가요..
로그인 버튼도 안먹구.. 어디를 수정해야 하나요?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
�
5년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
채택
답변대기
답변대기
채택
채택
채택
채택
채택
채택
채택
채택
답변대기
채택
답변대기
답변대기
채택
채택
답변대기
채택
너무 감사합니다 :)