diff --git a/src/main/webapp/pb/security_login.html b/src/main/webapp/pb/security_login.html new file mode 100644 index 00000000..ab2e3842 --- /dev/null +++ b/src/main/webapp/pb/security_login.html @@ -0,0 +1,433 @@ + + + + + + + 문자온 + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+

0%

+
+ +
+
+
+ + +
+ +
+ + +
+ 본문 바로가기 +
+ + +
+
+

QUICK
MENU

+

QUICK

+ + +
+
+ + + + + + +
+
+ +
+ +
+
+

보안 로그인

+
+ + + +
+ + +
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/src/main/webapp/publish/css/content.css b/src/main/webapp/publish/css/content.css index a9b72db3..c8c5ec38 100644 --- a/src/main/webapp/publish/css/content.css +++ b/src/main/webapp/publish/css/content.css @@ -1507,6 +1507,14 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px .upload_area .loading_layer{position: absolute;} .upload_area .loading_layer.active+p,.upload_area .loading_layer.active+p+.cf_text_wrap{opacity: 0;} +.progress_bar_wrap{position:fixed;display:none;width:100%;height:100%;background:rgba(0,0,0,0.38);left:0;top:0;z-index:999;justify-content:center;align-items:center;flex-direction:column;} +.progress_box{padding:30px;background:#fff;border-radius:10px;text-align:center;} +.progress_bar_wrap .bar{display:flex;width:400px;height:5px;text-align:left;padding:0;background:#f4f5f6;border-radius:30px;align-items:center;} +.progress_bar_wrap .bar span{position:relative;display:inline-block;min-width:0px;height:5px;border-radius:20px;background:#fbc72b;transition:all 0.3s linear;} +.progress_bar_wrap .bar span::after{position:absolute;content:"";width:8px;height:8px;border-radius:100%;background:#fff;border:2px solid #fbc72b;right:-8px;top:-3px;box-shadow:0 0 3px rgba(0,0,0,0.2);} +.progress_bar_wrap .time_text{height:20px;font-family:'GmarketSansBold';font-size:20px;font-weight:500;color:#222;margin:0 0 20px 0;} +.progress_bar_wrap .time_text.animation{animation:text-loading 1.5s ease-in infinite;} + /* 문자온 소개 */ .intro_cont .img_cont img{width: 100%;} .intro_cont .title{display: flex; width: 100%; margin: 0 0 30px 0; font-size: 24px; font-weight: bold;justify-content: space-between;} diff --git a/src/main/webapp/publish/js/content.js b/src/main/webapp/publish/js/content.js index 6a132930..2b5043a3 100644 --- a/src/main/webapp/publish/js/content.js +++ b/src/main/webapp/publish/js/content.js @@ -1579,3 +1579,92 @@ function fn_excelLoadAddActive(){ function fn_excelLoadRemoveActive(){ $('.loading_execl_layer').removeClass('active'); } + + +// 프로그레스바 +var start, change; + +function progressStart(time, msg) { + $(".progress_bar_wrap").css("display", "flex"); + + var timeText = document.querySelector(".time_text"); + var bar = document.querySelector(".change_bar"); + + var width = 1; + var totalTime = time * 1000; // 시간 + var cmpWid = totalTime / 100; // width 증가하는 시간 + + start = setInterval(changeWidth, cmpWid); // 프로그레스바 시작 + + function changeWidth() { + if (width >= 100) { + // width 100% 됐을 때 + clearInterval(start); // 프로그래스바 멈춤 + + timeText.innerHTML = "100%"; + setTimeout(function () { + // 100%되고 1초 후 잠시만 기다려주세요 변경 및 애니메이션 추가 + timeText.innerHTML = "잠시만 기다려주세요..."; + $(".time_text").addClass("animation"); + }, 1000) + + // 메시지 있을 때 alert 띄움 + if (msg !== "" && msg !== undefined && msg !== null) { + alert(msg); + } else {} + + } else { + // width 증가 및 text 변경 + width++; + bar.style.width = width + "%"; + timeText.innerHTML = width + "%"; + } + } +} + +// 프로그레스바 완료 +function progressComplete(msg,time,backtime) { + + change = setInterval(changeText); + var width = 1; + + function changeText() { + + var widthText = $(".change_bar").attr("style"); + widthText = widthText.replace(/[width:%;overfloen]/ig, ""); // width 값 퍼센트로 가져오기 + + if (width >= 100) { + $(".time_text").text("100%"); + + if(backtime>=time){ + // 예상시간보다 먼저 처리됐을 경우 + setTimeout(function () { + $(".time_text").text("잠시만 기다려주세요..."); + $(".time_text").addClass("animation"); + }, 10) + }else{} + + + setTimeout(function () { + clearInterval(change); + }, 0); + + } else { + // width 증가 및 text 변경 + width++; + $(".time_text").text(width + "%"); + $(".change_bar").css("width", width + "%"); + } + } + + clearInterval(start); // 프로그레스바 시작 멈추기 + + // 메시지 있을 때 alert 띄움 + if (msg !== "" && msg !== undefined && msg !== null) { + setTimeout(function () { + alert(msg); + }, 0) + } else {} + + +} diff --git a/src/main/webapp/publish/security_login_ajax.html b/src/main/webapp/publish/security_login_ajax.html new file mode 100644 index 00000000..bcc0fa0b --- /dev/null +++ b/src/main/webapp/publish/security_login_ajax.html @@ -0,0 +1,412 @@ + + + + + + + 문자온 + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+

0%

+
+ +
+
+
+ +
+ +
+ + +
+ 본문 바로가기 +
+ + +
+
+

+ QUICK
MENU +

+

QUICK

+ + +
+
+ + + + + + +
+
+ +
+ +
+
+

보안 로그인

+
+ + + +
+ + +
+ +
+
+ + + + + + + + \ No newline at end of file