221 lines
8.1 KiB
Plaintext
221 lines
8.1 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<%@ include file="/WEB-INF/include/include-header2.jspf" %>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');
|
|
</style>
|
|
<style type="text/css">
|
|
body {
|
|
font-family:'Nanum Gothic', sans-serif;
|
|
height: 100vh;
|
|
/*background: url("/svg/sample.svg") no-repeat center/cover;*/
|
|
/*background: url("/images/601822.jpg") no-repeat center/cover;*/
|
|
background: url("/images/back_wells.png") no-repeat center/cover;
|
|
/*background: url("/images/bg/23.jpg") no-repeat center/cover;*/
|
|
overflow: hidden;
|
|
}
|
|
.container {
|
|
margin: 0 auto;
|
|
max-width: 1920px;
|
|
width: 98%;
|
|
}
|
|
.card-panel {
|
|
-webkit-transition: -webkit-box-shadow .25s;
|
|
transition: -webkit-box-shadow .25s;
|
|
transition: box-shadow .25s;
|
|
transition: box-shadow .25s, -webkit-box-shadow .25s;
|
|
padding: 1.3vw 0.5vw 1.3vw 0.5vw;
|
|
margin: 0.3rem 0 0.3rem 0;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.card-panel2 {
|
|
-webkit-transition: -webkit-box-shadow .25s;
|
|
transition: -webkit-box-shadow .25s;
|
|
transition: box-shadow .25s;
|
|
transition: box-shadow .25s, -webkit-box-shadow .25s;
|
|
padding: 1.3vw 0.5vw 1.3vw 0.5vw;
|
|
margin: 0.3rem 0 0.3rem 0;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
opacity: 0.8;
|
|
height: 14vw;
|
|
}
|
|
|
|
.valign-wrapper {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Wallboard Test</title>
|
|
</head>
|
|
|
|
<body>
|
|
<form name="frm"></form>
|
|
<div class="container">
|
|
<div class="row center-align">
|
|
<div class="col s12"><span style="font-size: 1.5vw; font-weight : 700; color: white;"> </span></div>
|
|
<div class="col s3 left-align"><span style="color: white; font-size: 4vw; font-weight : 700; line-height: 1.2;">Wells</span></div>
|
|
<div class="col s6 center-align"><span style="color: white; font-size: 5vw; font-weight : 700; line-height: 1.2;">센터전체현황</span></div>
|
|
<div class="col s3 right-align"><span id="clock" style="color: white; font-size: 2.9vw; font-weight : 500; line-height: 1.2;">0000-00-00(월)<br>00시 00분 00초</span></div>
|
|
</div>
|
|
<div class="row center-align">
|
|
<div class="col s3">
|
|
<div class="card-panel teal lighten-3 z-depth-2">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">평균통화시간
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00분 00초
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel teal lighten-3 z-depth-2" >
|
|
<span class="black-text" style="font-size: 3.2vw; font-weight : 700; line-height: 1.3;letter-spacing: -8px;">평균고객포기시간
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00분 00초
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel light-blue z-depth-2">
|
|
<span class="white-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">대 기 고 객
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel light-blue z-depth-2" >
|
|
<span class="white-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">연 결 요 청 호
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel light-blue z-depth-2">
|
|
<span class="white-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">대 기 상 담 사
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel light-blue z-depth-2" >
|
|
<span class="white-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">응 대 호
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel light-blue valign-wrapper z-depth-2" style="height: 14vw;">
|
|
<div class="col s12 white-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">최장<br>대기고객<br>시간
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white valign-wrapper z-depth-2" style="height: 14vw;">
|
|
<div class="col s12 black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00분 00초
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel light-blue z-depth-2" style="margin-bottom: 0.75rem;">
|
|
<span class="white-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">평균작업시간
|
|
</span>
|
|
</div>
|
|
<div class="card-panel light-blue z-depth-2" >
|
|
<span class="white-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">평균이석시간
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2" style="margin-bottom: 0.75rem">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00분 00초
|
|
</span>
|
|
</div>
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.5vw; font-weight : 700; line-height: 1.2;">00분 00초
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel teal lighten-3 z-depth-2">
|
|
<span class="black-text" style="font-size: 3.8vw; font-weight : 700; line-height: 1.2;">응 대 율
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.8vw; font-weight : 700; line-height: 1.2;">99.9%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel teal lighten-3 z-depth-2" >
|
|
<span class="black-text" style="font-size: 3.8vw; font-weight : 700; line-height: 1.2;">서비스레벨
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="col s3">
|
|
<div class="card-panel white z-depth-2">
|
|
<span class="black-text" style="font-size: 3.8vw; font-weight : 700; line-height: 1.2;">99.9%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
function clock(){
|
|
var clock = parent.$('input#clock').val();
|
|
$('#clock').text(clock);
|
|
|
|
// 1000 밀리초(=1초) 후에, 이 함수를 실행하기 (반복 실행 효과).
|
|
setTimeout( "clock()", 1000 );
|
|
}
|
|
|
|
$( document ).ready(function() {
|
|
clock();
|
|
});
|
|
</script>
|
|
</html>
|
|
|