설치 / 사용기

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

2018.10.10 17:43

SHIELD 조회:1441 추천: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	-	-	-
5858	소프트웨어\| 다시한번 더 실험? [16]	첨임다	1046	10	02-03
5857	기 타\| [6] Macrium Reflect Y: 에 pecmd.ini 를 활용하여 보았습... [14]	왕초보	704	7	02-03
5856	기 타\| 일반 폴더 WIMBOOT 캡처 하기 [13]	V무등산V	958	7	02-02
5855	소프트웨어\| Macrium Reflect [2]	사랑과평화	1133	4	02-02
5854	기 타\| [5] Macrium Reflect 를 10PE x86에 적용하여 보았습니다. [13]	왕초보	735	4	02-02
5853	기 타\| T.Dism 5.1 (GhostPE 5.0, D.SnapshotPE 5.0 ) 테스트 [56]	틱톡88	3150	54	02-01
5852	소프트웨어\| pe-에 따라 다른 Macrium Reflect [9]	첨임다	937	14	02-01
5851	소프트웨어\| 즐겨찾기프로그램 기능 추가 [3]	굿듀님스토	610	4	02-01
5850	기 타\| [4] Macrium Reflect Y: 에 ReMount.cmd를 활용하여 보았습... [14]	왕초보	535	7	02-01
5849	기 타\| Dream PE 2019 - 가상머신과 실컴에서 같이 사용하기 [12]	suk	2242	14	02-01
5848	윈 도 우\| 커피만 마시지 말고... [24]	디폴트	1789	23	02-01
5847	기 타\| [3] Macrium Reflect Y: 를 고정으로 사용을 하여 보았습니... [4]	왕초보	549	7	01-31
5846	기 타\| [2] Macrium Reflect Y: 를 고정으로 사용을 하여 보았습니... [4]	왕초보	435	9	01-31
5845	기 타\| M-R 실행후 [15]	집앞의_큰	947	9	01-30
5844	기 타\| Macrium Reflect Y: 를 고정으로 사용을 하여 보았습니다.. [7]	왕초보	522	3	01-30
5843	기 타\| Macrium Reflect 키보드 설정창 안보이게 하여 보았습니다. [16]	왕초보	713	11	01-30
5842	윈 도 우\| 10_x64 미니 피이 [638]	콜레오.	4632	337	01-30
5841	소프트웨어\| 즐겨찾기프로그램 수정 [6]	굿듀님스토	669	4	01-30
5840	소프트웨어\| 핫 이슈의 중심에 또 서보다. [36]	집앞의_큰	1180	21	01-30
5839	기 타\| 핫 이슈의 중심에 들어가보니. [37]	집앞의_큰	1394	32	01-29

첫 페이지 284 285 286 287 288 289 290 291 292 293 끝 페이지

홈으로 위로 목록

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

댓글 [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