Search...
그누보드 사이트 점검 페이지 만들기
설명 :
페이지 중간에 문제가 발생했을때 잠깐 점검 페이지를 보여주기 위해서 만들어놓으면 좋을 것같다
원래는 sir 에서 찾아보니까 그걸로 써봤는데 수정 할 부분이 많아서.. 직접 만들기로 했다.
extend/inspect.extend.php 만든다.
php
<?php
######################### 사이트점검 플러그인 상수 ################################
define('INSPECT', 'inspect');
define('INSPECT_ADMIN', 'inspect_admin');
define('INSPECT_PLUGIN_PATH', G5_THEME_PATH.'/'.G5_PLUGIN_DIR.'/'.INSPECT);
define('INSPECT_PLUGIN_URL', G5_THEME_URL.'/'.G5_PLUGIN_DIR.'/'.INSPECT);
define('INSPECT_PLUGIN_LIB_PATH', G5_THEME_PATH.'/'.G5_PLUGIN_DIR.'/'.INSPECT.'/'.G5_LIB_DIR);
$g5['inspect_table'] = "config_inspect";
######################### 사이트점검 로직 ################################
$inspect_rows = sql_fetch(" select * from {$g5['inspect_table']}");
$c42df = preg_replace("`\/[^/]*\.php$`i", "/", $_SERVER['PHP_SELF']);
// ...............................................
// URL 검사를 해서 최상위 디덱토리로 이동해버린다.
// ...............................................
// 점검 시간이 종료
if (time() > strtotime($inspect_rows['insp_end']))
{
// 현재시간을 날짜 형태로 저장한다.
$d_tmp = date("Y-m-d h:i:s", time());
sql_query("UPDATE {$g5['inspect_table']} SET `insp_use` = 0, `last_date` = '{$d_tmp}' WHERE `insp_use` = 1",true);
}
if ($is_admin != "super" && $inspect_rows['insp_use'] == 1)
{
$cnt_possible_ip = trim($inspect_rows['possible_ip']);
if ($cnt_possible_ip) {
$is_possible_ip = false;
$pattern = explode("\n", $cnt_possible_ip);
for ($i=0; $i<count($pattern); $i++) {
$pattern[$i] = trim($pattern[$i]);
if (empty($pattern[$i]))
continue;
$pattern[$i] = str_replace(".", "\.", $pattern[$i]);
$pattern[$i] = str_replace("+", "[0-9\.]+", $pattern[$i]);
$pat = "/^{$pattern[$i]}$/";
$is_possible_ip = preg_match($pat, $_SERVER['REMOTE_ADDR']);
if ($is_possible_ip)
break;
}
}
if (!$is_possible_ip && $is_admin != "super") {
define('_SIRCRYPT_', true);
include_once INSPECT_PLUGIN_LIB_PATH.'/inspect.lib.php';
include_once INSPECT_PLUGIN_PATH.'/inspect_view.php';
}
}
/theme/plugin/inspect
lib/inspect.lib.php
php
<?php
// 이 파일은 새로운 파일 생성시 반드시 포함되어야 함
if (!defined('_SIRCRYPT_')) exit; // 개별 페이지 접근 불가
$startdate = array(
date("Y-m-d H:i", strtotime($inspect_rows['insp_start'])),
date("Y", strtotime($inspect_rows['insp_start'])),
date("n", strtotime($inspect_rows['insp_start'])),
date("d", strtotime($inspect_rows['insp_start'])),
date("g", strtotime($inspect_rows['insp_start'])),
date("i", strtotime($inspect_rows['insp_start'])),
date("A", strtotime($inspect_rows['insp_start']))
);
$enddate = array(
date("Y-m-d H:i", strtotime($inspect_rows['insp_end'])),
date("Y", strtotime($inspect_rows['insp_end'])),
date("n", strtotime($inspect_rows['insp_end'])),
date("d", strtotime($inspect_rows['insp_end'])),
date("g", strtotime($inspect_rows['insp_end'])),
date("i", strtotime($inspect_rows['insp_end'])),
date("A", strtotime($inspect_rows['insp_end']))
);
function copyright_year($startdate='2021')
{
return (date('Y')==$startdate)?(date('Y')):"$startdate - ".date('Y');
}
_common.php
php
<?php
include_once "../../../../common.php";
flipTimer.css
css
@-webkit-keyframes flipTop {
0% {
-webkit-transform: perspective(400px) rotateX(0deg); }
100% {
-webkit-transform: perspective(400px) rotateX(-90deg); } }
@-webkit-keyframes flipBottom {
0% {
-webkit-transform: perspective(400px) rotateX(90deg); }
100% {
-webkit-transform: perspective(400px) rotateX(0deg); } }
@-moz-keyframes flipTop {
0% {
-moz-transform: perspective(400px) rotateX(0deg); }
100% {
-moz-transform: perspective(400px) rotateX(-90deg); } }
@-moz-keyframes flipBottom {
0% {
-moz-transform: perspective(400px) rotateX(90deg); }
100% {
-moz-transform: perspective(400px) rotateX(0deg); } }
@-ms-keyframes flipTop {
0% {
-ms-transform: perspective(400px) rotateX(0deg); }
100% {
-ms-transform: perspective(400px) rotateX(-90deg); } }
@-ms-keyframes flipBottom {
0% {
-ms-transform: perspective(400px) rotateX(90deg); }
100% {
-ms-transform: perspective(400px) rotateX(0deg); } }
@-keyframes flipTop {
0% {
transform: perspective(400px) rotateX(0deg); }
100% {
transform: perspective(400px) rotateX(-90deg); } }
@-keyframes flipBottom {
0% {
transform: perspective(400px) rotateX(90deg); }
100% {
transform: perspective(400px) rotateX(0deg); } }
.flipTimer {
color: #FFF;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 90px;
font-weight: bold;
line-height: 100px;
height: 100px; }
.flipTimer .seperator {
vertical-align: top;
margin: 0 -20px;
display: inline; }
.flipTimer .seconds,
.flipTimer .minutes,
.flipTimer .hours,
.flipTimer .days {
height: 100%;
display: inline; }
.flipTimer .digit-set {
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
border: 1px solid #111111;
width: 70px;
height: 100%;
display: inline-block;
position: relative;
margin: 0 1px; }
.flipTimer .digit {
position: absolute;
height: 100%; }
.flipTimer .digit > div {
position: absolute;
left: 0;
overflow: hidden;
height: 50%;
padding: 0 10px; }
.flipTimer .digit > div.digit-top, .flipTimer .digit > div.shadow-top {
background-color: #333;
border-bottom: 1px solid #333;
box-sizing: border-box;
top: 0;
z-index: 0;
border-radius: 10px 10px 0 0; }
.flipTimer .digit > div.digit-top:before, .flipTimer .digit > div.shadow-top:before {
content: "";
box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.4);
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0; }
.flipTimer .digit > div.shadow-top {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0)), to(black));
width: 70px;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in; }
.flipTimer .digit > div.digit-bottom, .flipTimer .digit > div.shadow-bottom {
background-color: #333;
bottom: 0;
z-index: 0;
border-radius: 0 0 10px 10px; }
.flipTimer .digit > div.digit-bottom .digit-wrap, .flipTimer .digit > div.shadow-bottom .digit-wrap {
display: block;
margin-top: -100%; }
.flipTimer .digit > div.digit-bottom:before, .flipTimer .digit > div.shadow-bottom:before {
content: "";
box-shadow: inset 0 10px 25px rgba(0, 0, 0, 0.3);
border-radius: 0 0 10px 10px;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0; }
.flipTimer .digit > div.shadow-bottom {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(rgba(0, 0, 0, 0)));
width: 50px;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in; }
.flipTimer .digit.previous .digit-top,
.flipTimer .digit.previous .shadow-top {
opacity: 1;
z-index: 2;
-webkit-transform-origin: 50% 100%;
-webkit-animation: flipTop 0.3s ease-in both;
-moz-transform-origin: 50% 100%;
-moz-animation: flipTop 0.3s ease-in both;
-ms-transform-origin: 50% 100%;
-ms-animation: flipTop 0.3s ease-in both;
transform-origin: 50% 100%;
animation: flipTop 0.3s ease-in both; }
.flipTimer .digit.previous .digit-bottom,
.flipTimer .digit.previous .shadow-bottom {
z-index: 1;
opacity: 1; }
.flipTimer .digit.active .digit-top {
z-index: 1; }
.flipTimer .digit.active .digit-bottom {
z-index: 2;
-webkit-transform-origin: 50% 0%;
-webkit-animation: flipBottom 0.3s 0.3s ease-out both;
-moz-transform-origin: 50% 0%;
-moz-animation: flipBottom 0.3s 0.3s ease-out both;
-ms-transform-origin: 50% 0%;
-ms-animation: flipBottom 0.3s 0.3s ease-out both;
transform-origin: 50% 0%;
animation: flipBottom 0.3s 0.3s ease-out both; }
inspect_view.php
php
<?php
// 이 파일은 새로운 파일 생성시 반드시 포함되어야 함
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (!defined('_SIRCRYPT_')) exit;
include_once('./_common.php');
$g5_head_title = "서비스 점검중입니다.";
/*
// 만료된 페이지로 사용하시는 경우
header("Cache-Control: no-cache"); // HTTP/1.1
header("Expires: 0"); // rfc2616 - Section 14.21
header("Pragma: no-cache"); // HTTP/1.0
*/
?>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<?php
if (G5_IS_MOBILE) {
echo '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10">'.PHP_EOL;
echo '<meta name="HandheldFriendly" content="true">'.PHP_EOL;
echo '<meta name="format-detection" content="telephone=no">'.PHP_EOL;
} else {
echo '<meta http-equiv="imagetoolbar" content="no">'.PHP_EOL;
echo '<meta http-equiv="X-UA-Compatible" content="IE=Edge">'.PHP_EOL;
}
if($config['cf_add_meta'])
echo $config['cf_add_meta'].PHP_EOL;
?>
<title><?php echo $g5_head_title; ?></title>
<!--[if lte IE 8]>
<script src="<?php echo G5_JS_URL ?>/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="<?php echo INSPECT_PLUGIN_URL ?>/style.min.css">
<link rel="stylesheet" href="<?php echo INSPECT_PLUGIN_URL ?>/flipTimer.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<section class="inspection_wrp">
<aside class="logo"><span class="none">로고</span></aside>
<h1><img src="<?php echo INSPECT_PLUGIN_URL?>/img/ins_text_title.gif" alt="보다 나은 서비스 제공을 위한 점검 시간입니다."></h1>
<p class="info_txt">
<?php echo $rows['content'];?>
</p>
<article class="inspection_time_wrp">
<div class="inspection_loading" id="inspection_loading" style="width:80%;">
<div class="icon_chr">
</div>
<div class="icon_bar">
<div class="txt" id="progressBar">
0%
</div>
</div>
</div>
<div class="inspection_time_txt">
점검 시간 : <?php echo $startdate[0]?>:00 ~ <?php echo $enddate[0]?>:00
</div>
</article>
<div class="flipTimer">
<div class="hours"></div>
<div class="minutes"></div>
<div class="seconds"></div>
</div>
<aside class="footer">Copyright © <?php echo copyright_year('2021') ?> <strong><?php echo $config['cf_title']; ?></strong>. All Rights Reserved.</aside>
</section>
<script src="<?php echo INSPECT_PLUGIN_URL?>/jquery.flipTimer.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.flipTimer').flipTimer({
direction:'down',
date:"<?php echo $enddate[0]?>:00",
});
});
</script>
<?php
include_once(G5_THEME_PATH."/tail.sub.php");
jquery.flipTimer.js
js
(function($) {
/**
* @class flipTimer
* @constructor
*
* @param element {HTMLElement} the element flipTimer is called on
*/
var flipTimer = function(element, options) {
this.element = element;
// ensures the HTMLElement has a class of 'flipTimer'
if (!this.element.hasClass('flipTimer')) {
this.element.addClass('flipTimer');
}
// attach users options to instance
this.userOptions = options;
// attach default options to instance
this.defaultOptions = flipTimer.defaults;
// merge default options with user options and attach to instance
this.options = $.extend({}, this.defaultOptions, this.userOptions);
// detects if the seconds digits should be used
if (this.element.find('.seconds').length > 0) {
this.options.seconds = this.element.find('.seconds')[0];
}
// detects if the minutes digits should be used
if (this.element.find('.minutes').length > 0) {
this.options.minutes = this.element.find('.minutes')[0];
}
// detects if the hours digits should be used
if (this.element.find('.hours').length > 0) {
this.options.hours = this.element.find('.hours')[0];
}
// detects if the days digits should be used
if (this.element.find('.days').length > 0) {
this.options.days = this.element.find('.days')[0];
}
// store the date/time when initialised
this.initDate = new Date();
// make the date into a javascript date
this.options.date = new Date(this.options.date);
// untested
this.calculateDate();
};
flipTimer.defaults = {
seconds: false,
minutes: false,
hours: false,
days: false,
date: new Date().toDateString(),
direction: 'up',
callback: null,
digitTemplate: '' +
'<div class="digit">' +
' <div class="digit-top">' +
' <span class="digit-wrap"></span>' +
' </div>' +
' <div class="shadow-top"></div>' +
' <div class="digit-bottom">' +
' <span class="digit-wrap"></span>' +
' </div>' +
' <div class="shadow-bottom"></div>' +
'</div>'
};
flipTimer.prototype = {
/**
* Calculates the difference in date for the timer
*
* @method calculateDate
*/
calculateDate: function() {
var dateDiff;
// calculates the difference in dates
if (this.options.direction == 'down') {
dateDiff = this.options.date - this.initDate;
} else if (this.options.direction == 'up') {
dateDiff = this.initDate - this.options.date;
}
// sets the date/time on the instance
this.seconds = Math.floor(dateDiff/1000) % 60;
this.minutes = Math.floor(dateDiff/1000/60) % 60;
this.hours = Math.floor(dateDiff/1000/3600) % 24;
this.days = Math.floor(dateDiff/1000/60/60/24);
// render the html for the plugin
this.render();
},
/**
* Dictates what needs rendering for the plugin
*
* @method render
*/
render: function() {
// if using seconds, populate it
if (this.options.seconds) {
this.renderDigits(this.options.seconds, this.seconds);
}
// if using minutes, populate it
if (this.options.minutes) {
this.renderDigits(this.options.minutes, this.minutes);
}
// if using hours, populate it
if (this.options.hours) {
this.renderDigits(this.options.hours, this.hours);
}
// if using days, populate it
if (this.options.days) {
this.renderDigits(this.options.days, this.days);
}
this.startTimer();
},
/**
* Renders the digits for a given subject
*
* @method renderDigits
* @param subject {HTMLElement} the element to generate digits for
*/
renderDigits: function(subject, value) {
var i, x, max, maxDigit, currentDigit, _this = this, number_array;
// if digits are not already rendered...
if ($(subject).find('.digit').length == 0) {
// split the value into two individual digits
// unless time has ran out
if (_this.days < 0 && _this.hours < 0 && _this.minutes < 0 && _this.seconds < 0) {
number_array = [0,0];
}
else {
number_array = String(value).split(""); // split all digits
// ensure the set is at least 2 digits long
if (number_array.length < 2) {
number_array.unshift(0)
}
}
// set maximum digits for seconds/minutes/hours
if (subject == _this.options.seconds || subject == _this.options.minutes) {
// minutes and seconds max digit
maxDigit = 5;
} else if (subject == _this.options.hours) {
// hours max digit
maxDigit = 2;
} else {
// everything else digit max
maxDigit = 9;
}
// append a div for each digit
number_array.forEach(function() {
$(subject).append('<div class="digit-set"></div>');
});
// for each digit-set in the subject
$(subject).find('.digit-set').each(function(el) {
// if first digit, then use digit max
max = (el == 0) ? maxDigit : 9;
// generate the right number of digits
for(i=0; i<=max; i++) {
// append the digit template
$(this).append(_this.options.digitTemplate);
// if direction is down then make numbers decline
x = (_this.options.direction == 'down') ? max - i : i;
// select the current digit and apply the number to it
currentDigit = $(this).find('.digit')[i];
$(currentDigit).find('.digit-wrap').append(x);
// if the current number matches the value then apply active class
if (x == number_array[el]) {
$(currentDigit).addClass('active');
} else if (number_array[el] != 0 && ((x + 1) == number_array[el])) {
// if the current number is one less than active but not zero
$(currentDigit).addClass('previous');
} else if (number_array[el] == 0 && x == max) {
// if the current number is zero then apply previous to max
$(currentDigit).addClass('previous');
}
}
});
}
},
/**
* Start a timer with an interval of 1 second
*
* @method startTimer
*/
startTimer: function() {
var _this = this;
clearInterval(this.timer);
this.timer = setInterval(function() {
// if timer runs out stop the timer
if (_this.days <= 0 && _this.hours <= 0 && _this.minutes <= 0 && _this.seconds <= 0) {
// execute callback if one exists
if (_this.options.callback) {
_this.options.callback();
}
clearInterval(_this.timer);
return;
}
// if timer runs out stop the timer
if ((_this.days > 999) || (_this.days == 999 && _this.hours == 23 && _this.minutes == 59 && _this.seconds == 59)) {
clearInterval(_this.timer);
return;
}
// increase/decrease seconds
(_this.options.direction == 'down') ? _this.seconds-- : _this.seconds++;
if (_this.options.seconds) _this.increaseDigit(_this.options.seconds);
// increase/decrease minutes
if (_this.seconds == 60 || _this.seconds == -1) {
if (_this.options.direction == 'down') {
_this.seconds = 59;
_this.minutes--;
} else {
_this.seconds = 0;
_this.minutes++;
}
if (_this.options.minutes) _this.increaseDigit(_this.options.minutes);
}
// increase/decrease hours
if (_this.minutes == 60 || _this.minutes == -1) {
if (_this.options.direction == 'down') {
_this.minutes = 59;
_this.hours--;
} else {
_this.minutes = 0;
_this.hours++;
}
if (_this.options.hours) _this.increaseDigit(_this.options.hours);
}
// increase/decrease days
if (_this.hours == 24 || _this.hours == -1) {
if (_this.options.direction == 'down') {
_this.hours = 23;
_this.days--;
} else {
_this.hours = 0;
_this.days++;
}
if (_this.options.days) _this.increaseDigit(_this.options.days);
}
},1000);
},
/**
* Changes classes on the digits to increase the number
*
* @method increaseDigit
* @param target {HTMLElement} the element to increase digit for
*/
increaseDigit: function(target) {
var digitSets = new Array(), _this = this;
// find all digit-sets related to digit type
$(target).find('.digit-set').each(function() {
digitSets.push(this);
});
// increase individual digit
increase(digitSets[digitSets.length - 1]);
/**
* Increases individual digit in a digit-set
*
* @param el {HTMLElement} the digit-set being increased
*/
function increase(el) {
var current = $(el).find('.active'),
previous = $(el).find('.previous'),
index = $.inArray(el, digitSets);
previous.removeClass('previous');
current.removeClass('active').addClass('previous');
if (current.next().length == 0) {
if (_this.options.direction == 'down'
&& target == _this.options.hours
&& (_this.hours == -1 || _this.hours == 23)
&& $(el).find('.digit').length == 10) {
// if the hours digit reaches 0 it should make 24 active
$($(el).find('.digit')[6]).addClass('active');
} else {
// increase to first digit in set
$(el).find('.digit:first-child').addClass('active');
}
if (index != 0) {
// increase digit of sibling digit-set
increase(digitSets[index - 1]);
}
} else {
if (_this.options.direction == "up"
&& target == _this.options.hours
&& _this.hours == 24) {
// if the hours digit reaches 24 it should make 0 active
$(el).find('.digit:first-child').addClass('active');
increase(digitSets[index - 1]);
} else {
// increase the next digit
current.next().addClass('active');
}
}
}
}
};
$.fn.flipTimer = function(options) {
return this.each(function() {
if (!$(this).data('flipTimer')) {
$(this).data('flipTimer', new flipTimer($(this), options));
}
});
};
})(jQuery);
style.min.css
css
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Nanum+Myeongjo:wght@400;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Nanum+Gothic:wght@400;700;800&family=Nanum+Myeongjo:wght@400;700;800&display=swap');
body, html {font-size: 13px;line-height: 1.5;color: #333;letter-spacing: -.05em;background: #eee;font-family: "Poppins", "Noto Sans KR", "Nanum Gothic", "맑은 고딕","Malgun Gothic","Nanum Myeongjo","Nanum Brush Script", sans-serif;}
blockquote, body, button, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, html, img, input, label, legend, li, ol, option, p, pre, select, textarea, ul {margin: 0;padding: 0} </pre><pre class="brush: css">img {vertical-align: top} button {cursor: pointer} dl, li, ol, ul {list-style: none} </pre><pre class="brush: css">fieldset, img {border: 0} button, input, select {vertical-align: middle} </pre><pre class="brush: css">a {text-decoration: none} a:hover {text-decoration: underline} </pre><pre class="brush: css">table {border-collapse: collapse} </pre><pre class="brush: css">.none, table caption {position: absolute;left: -3000px;top: -3000px;width: 0;height: 0;font-size: 0;line-height: 0;overflow: hidden} </pre><pre class="brush: css">article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;margin: 0;padding: 0} </pre><pre class="brush: css">
css
.space1 {clear: both;height: 1px;font-size: 0;line-height: 0}
.space5 {clear: both;height: 5px;font-size: 0;line-height: 0}
.space10 {clear: both;height: 10px;font-size: 0;line-height: 0}
.space15 {clear: both;height: 15px;font-size: 0;line-height: 0}
.space20 {clear: both;height: 20px;font-size: 0;line-height: 0}
.space25 {clear: both;height: 25px;font-size: 0;line-height: 0}
.space30 {clear: both;height: 30px;font-size: 0;line-height: 0}
.space45 {clear: both;height: 45px;font-size: 0;line-height: 0}
.space50 {clear: both;height: 50px;font-size: 0;line-height: 0}
.txtover {overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap}
.inspection_wrp {width: 820px;margin: 0 auto;padding: 20px 80px 30px}
.inspection_wrp .logo {width: 53px;height: 46px}
.inspection_wrp h1 {padding: 147px 0 0;font-size: 0;line-height: 0;text-align: center;background: url(../../plugin/inspect/img/ins_icon.gif) center 9px no-repeat}
.inspection_wrp .info_txt {padding: 25px 0 20px;text-align: center}
.inspection_wrp .info_txt strong {color: #d23433}
.inspection_wrp .now_time {width: 275px;margin: 10px auto 0;padding: 4px 0 6px;font-weight: 700;text-align: center;border: 1px solid #aaa;background: #fcfcfc}
.inspection_time_wrp {position: relative;height: 135px;background: url(../../plugin/inspect/img/ins_loading_bg.gif) left bottom repeat-x}
.inspection_time_txt {position: absolute;left: 0;top: 90px;width: 820px;text-align: center;font-weight: 700;color: #fff}
.inspection_loading {position: relative;float: left;padding-left: 0;background: url(../../plugin/inspect/img/ins_loading_line.gif) repeat-x}
.inspection_loading .icon_chr {position: absolute;right: 0;top: 0;width: 51px;height: 80px;margin-right: -20px;background: url(../../plugin/inspect/img/ins_loading_chr.gif) right top no-repeat}
.inspection_loading .icon_bar {position: absolute;right: 0;top: 86px;width: 100%;height: 30px;background: url(../../plugin/inspect/img/ins_loading_line.gif) no-repeat}
.inspection_loading .txt {position: absolute;right: 0;top: 28px;height: 20px;text-align: center;margin-right: -17px;font-weight: 700;color: #d30000}
.mobile_side_Wrap, .mobile_side_Wrap .discussion_slider li.item_content ul {position: relative}
.inspection_wrp h2 {padding: 45px 0 5px;font-size: 13px}
.inspection_wrp .footer {clear: both;padding-top: 70px;color: #888;font-size: 10px;font-family: tahoma, Arial, Helvetica;text-align: center}
.mobile_side_Wrap {clear: both;width: 735px;height: 130px;padding-left: 85px;background: url(../../plugin/inspect/img/ins_m_album_bg.jpg) no-repeat;z-index: 1}
.mobile_side_Wrap .discussion_slider {position: relative;margin: 0 auto;width: 650px;height: 130px;padding-top: 20px;left: 50px;overflow: hidden}
.mobile_side_Wrap .discussion_slider li.item_content {float: left;width: 220px;height: 130px}
.mobile_side_Wrap .discussion_slider li.item_content a {display: inline-block;cursor: pointer;text-decoration: none}
.mobile_side_Wrap .discussion_slider li.item_content .game_img {position: absolute;left: 0;top: 0;width: 100px;height: 78px;padding: 0}
.mobile_side_Wrap .discussion_slider li.item_content .game_img img {width: 78px;height: 78px}
.mobile_side_Wrap .discussion_slider li.item_content .game_tit {width: 110px;padding: 0 0 0 100px;font-weight: 700;font-size: 14px;color: #333}
.mobile_side_Wrap .discussion_slider li.item_content .game_div {width: 110px;padding: 0 0 10px 100px}
.mobile_side_Wrap .discussion_slider li.item_content .game_div span {display: inline-block;width: 15px;height: 17px;padding-right: 3px;font-size: 0;line-height: 0;vertical-align: middle;background: url(../../plugin/inspect/img/icon_m_os.gif) no-repeat}
.mobile_side_Wrap .discussion_slider li.item_content .game_div span.os_ios {background-position: 0 0}
.mobile_side_Wrap .discussion_slider li.item_content .game_div span.os_andr {background-position: 0 -34px}
.mobile_side_Wrap .discussion_slider li.item_content .game_int {width: 110px;padding: 0 0 0 100px;font-weight: 400;font-size: 11px;color: #666}
.mobile_side_Wrap .bx-controls {position: absolute;width: 735px;z-index: 100;top: 45px}
.mobile_side_Wrap .bx-controls a {width: 18px;height: 29px;margin: 0;padding: 0;border: 0;font-size: 0;line-height: 0;cursor: pointer;z-index: 100}
.mobile_side_Wrap .bx-controls a.bx-prev {position: absolute;left: -64px;top: 0;background: url(../../plugin/inspect/img/ins_m_arrow_01.png) no-repeat}
.mobile_side_Wrap .bx-controls a.bx-next {position: absolute;right: 21px;top: 0;background: url(../../plugin/inspect/img/ins_m_arrow_02.png) no-repeat}
.mobile_side_Wrap .bx-controls a.bx-prev:hover {background: url(../../plugin/inspect/img/ins_m_arrow_01_on.png) no-repeat}
.mobile_side_Wrap .bx-controls a.bx-next:hover {background: url(../../plugin/inspect/img/ins_m_arrow_02_on.png) no-repeat}
.preview {width: 100%;height: 50px;background: #d23433;line-height: 50px;text-align: center;font-size: 15pt;color: #fff;}
.flipTimer {margin: 20px auto 0;width: 500px;}
사용법은 꼭 접근가능 아이피에 내 아이피를 넣어준다.
나만 빼고 다른 사람은 접근할 수 없다.
어쨌든 모든 자료는 깃헙에 저장 됐다~ 데모 플러그인 자료를 보면 된다. 플러그인 따로 올려놨다.
여기까지 설명 마친다.