설치 / 사용기

기 타 개인 홈페이지 로그인 스크립트

2018.10.10 17:43

SHIELD 조회:1378 추천:8

안녕하세요 SHIELD 입니다 ^_^

개인적으로 사용 할 로그인 HTML 스크립트입니다.

저의 컨셉에 맞게 설정을 해보았습니다 ~_~

로그인 HTML 응용하기 : 로그인HTML.7z

필요없으신분은 이런게 있구나 하고 넘어가주시길 바랍니다.

아이디와 암호는 제 회원정보에서 확인하시길 바랍니다.(아이디/패스워드 모두 대문자입니다.)

아이디 및 패스워드 입력시 제 카페로 가지는데 회원받지 않습니다. 개인용 카페입니다 ~_~

HTML 소스 암호화 사이트 압축하여 같이 첨부 하였습니다.

Ex. 아이디/패스워드 입력 -> 로딩 페이지 -> 홈페이지or구글 파일 이렇게 사용하려고 합니다 +_+

응용은 다양합니다.

SHIELD 로그인

HYDRA 로그인

[SHIELD 로그인 소스]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--

PAGE IS MADE BY {http://http://cafe.daum.net/YourSoul}
DO NOT REMOVE THE CREDITS.

-->

<head>
<title>S.H.I.E.L.D. MAINFRAME</title>
<link rel="shortcut icon" href="https://31.media.tumblr.com/fc374c59c1da12431f3c1d2e3d819435/tumblr_inline_n4r5x6vljm1r80x1c.png">
<link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rosario:700italic' rel='stylesheet' type='text/css'>
<style type="text/css">

@font-face {font-family:Bebas Neue;src:url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);}
@font-face { font-family: silkscreen; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }

html, body, ul, li {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: white;
}

body {
background: url() black;
margin: 0 auto;
}

::-webkit-scrollbar {
height: 10px;
width: 0px;
background: black;
}

::-webkit-scrollbar-thumb:vertical {
background: #353a3d; /*change the color of the scrollbar face here*/
}

.image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}

.css-typing
{
width: 30em;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}

@keyframes type{
from { width: 0; }
}

@-webkit-keyframes type{
from { width: 0; }
}

input {
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid rgba(220, 234, 246, .10);
color:white;
background:#111;

}

input[type="button"]{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid rgba(220, 234, 246, .10);
color:#b1c8dc;
background:#111;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
}

input[type="button"]:SHIELD{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid white;
color:white;
background:#111;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;

}

input[type="reset"]{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid rgba(220, 234, 246, .10);
color:#b1c8dc;
background:#111;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
}

input[type="reset"]:SHIELD{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid white;
color:white;
background:#111;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
}

#biter
#biter a{
display:block
}
#biter .deather {
margin-right:0px;filter: alpha(opacity = 0);
opacity:0;-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}

#biter:hover .deather {
margin-left:0px;

-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
filter: alpha(opacity = 100);
filter: alpha(opacity = 100);
opacity:8;
}

#titles {
color:#fff;
background-color:#000;
width:70px;
height:5px;
padding:15px;
line-height:50%;
text-align:center;
margin-top:0px;
margin-left:0px;
text-transform:uppercase;
font-size:13px;
letter-spacing:2px;
position:fixed;
font-family:calibri;
}

#updates {
z-index:100000;
margin-top:0px;
margin-left:0px;
text-align:center;
background-color:#000;
position:fixed;
width:80px;
line-height:180%;
height:auto;
font-family:calibri;
font-size:11px;
position:fixed;
padding:10px;
overflow:hidden;
opacity:1;
z-index:999;
color:#fff;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}

#updates a{
color:#fff;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}

#updates:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}

#titles:hover #updates a{
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}

#updates a:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
text-decoration:line-through;;}

</style>
</head>
<body>
<div id="boner">
<div id="biter"><div id="titles">SHIELD</div>

Here you can put your<br><span style="color:#3798d7">username</span><br>and<br><span style="color:#3798d7">password</span>

</div></div></div></div>

<p class="css-typing" style="color:#fff; font-family: calibri; text-transform: uppercase; position: relative; top: 8px; left: 100px; z-index: 1;">SHIELD OF....</p>

<div style="position: relative; top: 500px; left: 770px">
<form name="login">
             <span style="font-family: calibri; font-size: 12px; color: #429bd0">USERNAME           <input type="text" name="userid" style="position:relative; left: 1px"></span><br>
             <span style="font-family: calibri; font-size: 12px; color: #429bd0">PASSWORD           <input type="password" name="pswrd"/></span><br><br>
      <input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "SHIELD" && form.pswrd.value == "SHIELDOF")
{
window.location.replace('http://cafe.daum.net/YourSoul')/*opens the target page while Id & password matches*/
}
else
{
alert("Error message")/*displays error message*/
}
}
</script>
</div>

<div style="position:fixed;bottom:3px; right:10px; font-size:9px; letter-spacing:1px; font-family:silkscreen;"><a href="http://cafe.daum.net/YourSoul/">SHIELD CAFE</a></div>

</body>
</html>

------------------------------------------------------------------------------------------------------------

[HYDRA 로그인 소스]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--

PAGE IS MADE BY {http://http://cafe.daum.net/YourSoul}
DO NOT REMOVE THE CREDITS.

-->

<head>
<title>HYDRA MAINFRAME</title>
<link rel="shortcut icon" href="https://31.media.tumblr.com/68bf9037eeb209ebbc453b8232fb964d/tumblr_inline_n6amw4fiwo1r80x1c.png">
<style type="text/css">

@font-face { font-family: silkscreen; src: url('http://static.tumblr.com/1kdckk4/9yjlolf0w/slkscr.ttf'); }

html, body, ul, li {
margin: 0;
padding: 0;
}

.image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}

.css-typing
{
width: 30em;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}

@keyframes type{
from { width: 0; }
}

@-webkit-keyframes type{
from { width: 0; }
}

}

input[type="button"]{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid rgba(246, 220, 220, .10);
color:#fff;
background:#111;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
}

input[type="button"]:HYDRA{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid #e70000;
color:#e70000;
background:#111;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;

}

input[type="reset"]{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid rgba(246, 220, 220, .10);
color:#fff;
background:#111;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
}

input[type="reset"]:HYDRA{
width:150px;
height: 20px;
padding:0px;
margin-bottom: 10px;
font-family:calibri;
font-size:9px;
text-transform:uppercase;
letter-spacing:1px;
border:1px solid #e70000;
color:#e70000;
background:#111;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
}

#updates a{
color:#fff;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}

#updates a:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
text-decoration:line-through;;}

</style>
</head>
<body>
<div id="boner">
<div id="biter"><div id="titles">HYDRA</div>

You Are INFO<br><span style="color:#e70000">username</span><br>and<br><span style="color:#e70000">password</span>

</div></div></div></div>

<p class="css-typing" style="color:#fff; font-family: calibri; text-transform: uppercase; position: relative; top: 8px; left: 100px; z-index: 1;">HYDRA OF....</p>

<div style="position: relative; top: 500px; left: 770px">
<form name="login">
             <span style="font-family: calibri; font-size: 12px; color: #429bd0">USERNAME           <input type="text" name="userid" style="position:relative; left: 1px"></span><br>
             <span style="font-family: calibri; font-size: 12px; color: #429bd0">PASSWORD           <input type="password" name="pswrd"/></span><br><br>
      <input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "HYDRA" && form.pswrd.value == "HYDRAOF")
{
window.location.replace('http://cafe.daum.net/YourSoul')/*opens the target page while Id & password matches*/
}
else
{
alert("Error message")/*displays error message*/
}
}
</script>
</div>

<div style="position:fixed;bottom:3px; right:10px; font-size:9px; letter-spacing:1px; font-family:silkscreen;"><a href="http://cafe.daum.net/YourSoul/">HYDRA CAFE</a></div>

</body>
</html>

-----------------------------------------------------------------------------------------------------------

[SHIELD 로그인 HTML 소스 암호화]

------------------------------------------------------------------------------------------------------------

[HYDRA 로그인 HTML 소스 암호화]

이상입니다

즐거운 하루되시길 바랍니다.

Ps. 예전에는 컴내꺼(더플) 무료여서 참 좋았는데 ㅠ_ㅠ 없어진것 같더군요.

혹시 무료 FTP 홈페이지 제작 하는 사이트 알고 있으시면 주소(사이트) 부탁드려봅니다 ㅠ_ㅠ

- 감사합니다 -

https://windowsforum.kr/review/10714905 홈으로 위로 목록

댓글 [17]

ehdwk 2018.10.10 17:55

수고하셨습니다.
SHIELD 2018.10.11 14:55

감사합니다 ^^ 즐거운 하루 되시길 바랍니다
선우 2018.10.10 18:13

오묘하고 어려운 게시물에 입문자는 어리둥절 할뿐이랍니다 사부님 "컴내꺼" 참으로 오랜만에 들어보는 이름 이네요 웹사이트 주소 뒤에 본인 아이디를 넣어서 간결하고 깔끔했던 주소가 기억이 납니다^^* 그 이후 해모수 인가로 바뀌었던걸로 기억을 하네요 그 때는 저도 제로보드 다운받아 홈페이지 제작했던 생각이 납니다 ㅋㅋ 마이스퀠 PHP 등등 밤새도록 공부했던 추억이 있네요 사부님께서 말씀하신 "컴 내꺼" 란 단어로 인해 많은걸 생각 해보는 저녁시간 입니다 편안하신 저녁시간 맞이 하십시요^^*
SHIELD 2018.10.11 14:58

예전에 컴내꺼로 FTP작업하기 편해서 너무 좋았던 기억이 있어서... ^_^

그 때는 홈페이지 열풍이었을꺼예요 ㅋㅋ

감기 조심하시고 항상 즐거운 하루 되시길 바랍니다 ^^ 감사합니다
알롱 2018.10.10 19:38

헉..??
vegabond 2018.10.10 21:15

수고하셨습니다.

자료 감사합니다.
kungms 2018.10.10 23:11

초고수의 기운이... 능력자십니다. 자료 공유해주셔서 감사합니다.
빨강모자 2018.10.11 12:01

꾸벅~~
SHIELD 2018.10.11 14:55

응원해주셔서 감사합니다 ^^

예전에 홈페이지 제작할 때 사용했던 것들이군요 ^^

검색엔진만 달라졌네요 잊고있던 마귀태그 +_+ 많은 스크립트 도움 되었습니다

빨강모자님 스크립트 소스 감사합니다. 잘 사용하도록 하겠습니다 ^_^

즐거운 하루 되시길 바랍니다
빠송 2018.10.11 23:27

역시 능력자이셨군요.
수고 많이 하셨습니다.
감사합니다. ^^
Star★Bros 2018.10.12 04:00

http://snstar.dothome.co.kr 이게 벌써 몇년전인가 웹프로그래밍을 공부할때 만들어본겁니다.

호랭이 담배피던 옛날 옛적에 윈포가 어땠는지 추억해보시기 바랍니다. ミ:つÞ
SHIELD 2018.10.12 06:20

너무 잘 만드셨는데요 +_+ dothome 도메인이군요 +_+ 저도 어제 가입했는데 설정하는게 너무 어렵더라구요 ㅠ_ㅠ;;;

저는 옛날모습의 윈포는 처음보는 모습이네요 ^_^ 저에게는 신선하군요 ^_^

감사합니다. 즐거운 하루되시길바랍니다
짠쪼 2018.10.12 10:29

대단하십니다. 역쉬 고수님들 뭔가 다르네요 이런걸 만드시는거 보면 .ㅜㅜ
빨강모자 2018.10.12 21:28

</div>
SHIELD 2018.10.13 17:24

유용한 팁 감사합니다 ^_^ 스크랩하여 잘 보관하면서 배우도록 하겠습니다 ^^

즐거운 주말 되시길 바랍니다 ^^
빨강모자 2018.10.15 14:59

등등
SHIELD 2018.10.16 08:48

수정 감사드립니다 ^_^ 잘 활용하여 사용하도록 하겠습니다 ^^

홈으로 위로 목록

번호	제목	글쓴이	조회	추천	등록일
[공지]	사용기/설치기 이용안내	gooddew	-	-	-
11056	소프트웨어\| D [237]	좋은이웃	3601	724	05-01
11055	소프트웨어\| D [204]	좋은이웃	3921	719	05-03
11054	윈 도 우\| D [411]	좋은이웃	4155	674	09-16
11053	윈 도 우\| [종료] W11_22H2_22621_1555(+3종 PE) [532]	우인	3270	641	04-14
11052	윈 도 우\| [종료] Win+PE(W10,W11,PE3종).iso [428]	우인	2894	573	04-17
11051	윈 도 우\| WORLD`S BEST PE - FINAL ★★★메뉴얼★★★ [1180]	사랑과평화	40790	567	05-11
11050	윈 도 우\| D [179]	좋은이웃	2318	524	03-28
11049	기 타\| [종료] Windows10XPE_19045_2913 PE [312]	우인	1932	468	04-26
11048	기 타\| [종료]KJ-ChumPE(18363.693)깔금이버전 [1084]	첨임다	5082	447	03-03
11047	기 타\| 31-okr pe [361]	집앞의_큰	1623	433	01-10
11046	기 타\| [종료]KJ-ChumPE_1909(깔끔이18363.836) [1009]	첨임다	4328	429	05-27
11045	기 타\| [종료]KJ-ChumPE(18363.657)깔끔이버전 [1119]	첨임다	5062	428	02-17
11044	기 타\| [종료]KJ-ChumPE(18363.752)깔금이버전 [892]	첨임다	4389	420	03-29
11043	기 타\| IFW BR용 원격제어 전용 PE (Win10 PE 21H2 19044.1415) 사... [293]	왕초보	2373	411	12-21
11042	기 타\| IFW BR cmd 와 PRINCE PE 사용기입니다 [286]	왕초보	2536	402	12-17
11041	기 타\| [종료] Quantum_220410_USB테더링_MTP EasyStyle PE+TOOL [245]	더불어~~~	1927	401	02-10
11040	기 타\| 11_PE.wim 추천인 391번 까지 택배 보냄 [408]	V무등산V	3056	394	01-28
11039	기 타\| [종료]A/S버전-KJ-ChumPE-20H1(2004-19041.208)깔끔이 [982]	첨임다	3733	390	04-28
11038	기 타\| [종료]KJ-ChumPE(18363.592)깔금이버전 [1238]	첨임다	19906	389	01-19
11037	기 타\| [종료]JU-ChumPE(18363.720) [886]	첨임다	3575	385	03-20

첫 페이지 1 2 3 4 5 6 7 8 9 10 끝 페이지

홈으로 위로 목록

기 타 개인 홈페이지 로그인 스크립트

댓글 [17]

ehdwk 2018.10.10 17:55

SHIELD 2018.10.11 14:55

선우 2018.10.10 18:13

SHIELD 2018.10.11 14:58

알롱 2018.10.10 19:38

vegabond 2018.10.10 21:15

kungms 2018.10.10 23:11

빨강모자 2018.10.11 12:01

SHIELD 2018.10.11 14:55

빠송 2018.10.11 23:27

Star★Bros 2018.10.12 04:00

SHIELD 2018.10.12 06:20

짠쪼 2018.10.12 10:29

빨강모자 2018.10.12 21:28

SHIELD 2018.10.13 17:24

빨강모자 2018.10.15 14:59

SHIELD 2018.10.16 08:48