420 lines
16 KiB
HTML
Executable File
420 lines
16 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="hoteltv.ui_utils.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.mm.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.mm.weather.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.mm.flight.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.widjet.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.sm.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.mypage.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.ctzgen.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.tv.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.guide.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.news.css">
|
|
<link rel="stylesheet" href="hoteltv.app.full.popup.css">
|
|
|
|
<link rel="stylesheet" href="./css/owlcarousel/owl.carousel.min.css">
|
|
<link rel="stylesheet" href="./css/owlcarousel/owl.theme.default.min.css">
|
|
|
|
<link rel="stylesheet" href="./css/acmeticker/style.css">
|
|
|
|
|
|
<link rel="stylesheet" href="./css/lightslider.css">
|
|
<title>CENTIRM LG-PROCENTRIC HOTEL SERVICE</title>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<!-- APP[FULL] Screen Layout -->
|
|
<div class="main">
|
|
<div class="mm">
|
|
<div class="bg">
|
|
<div class="owl-carousel owl-theme" id="lst_mmbg"></div>
|
|
</div>
|
|
<div class="slider">
|
|
<div class="owl-carousel owl-theme" id="lst_mmsel"></div>
|
|
</div>
|
|
<div class="weather">
|
|
<div class="location">Seoul</div>
|
|
<div class="today">
|
|
<div id="temp_cur">12</div>
|
|
<div id="temp_minmax">9/15</div>
|
|
<div class="detail">
|
|
<div id="discription"></div>
|
|
<div id="img_status"></div>
|
|
<div id="humidity">
|
|
<span id="icon" style="width:30%; height:100%; display:inline-block; background-repeat: no-repeat; background-size: contain; background-position: center center; margin-top:10px;"></span>
|
|
<span id="value" style="width:50%; height:100%; display:inline-block; font-size: 32px; text-align: left; margin-top: 10px;"></span>
|
|
</div>
|
|
<div id="wind">
|
|
<span id="icon" style="width:30%; height:100%; display:inline-block; background-repeat: no-repeat; background-size: contain; background-position: center center;margin-top:10px;"></span>
|
|
<marquee id="value" style="width:60%; height:100%; display:inline-block; font-size: 32px; text-align: left; margin-top: 10px; border-bottom: solid;"></marquee>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="forcast">
|
|
<div class="daily">
|
|
<div id="title" style="font-size:32px; display: block"></div>
|
|
<ul>
|
|
<li idx="1">
|
|
<div id="time"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
<li idx="2">
|
|
<div id="time"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
<li idx="3">
|
|
<div id="time"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
<li idx="4">
|
|
<div id="time"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
<li idx="5">
|
|
<div id="time"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="weekly">
|
|
<ul style="margin-bottom: 30px;">
|
|
<li idx="1">
|
|
<div id="date"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
<li idx="2">
|
|
<div id="date"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
<li idx="3">
|
|
<div id="date"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
<li idx="4">
|
|
<div id="date"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
<li idx="5">
|
|
<div id="date"></div>
|
|
<div id="temp"></div>
|
|
</li>
|
|
</ul>
|
|
<div id="title" style="font-size:32px; display: block"></div>
|
|
</div>
|
|
</div>
|
|
<div id="caution" style="position:absolute; top: 410px; width: 99%; height:50px; text-align: right; color:rgb(180,180,190);"></div>
|
|
</div>
|
|
<div class="flight">
|
|
<div class="departure" style="position: absolute; width:50%; height:100%;">
|
|
<div id="title" style="text-align:left; margin-left:10px;"></div>
|
|
<table class="tbl_header">
|
|
<tbody id="hdr">
|
|
<tr>
|
|
<th id="airline"></th>
|
|
<th id="flight"></th>
|
|
<th id="scheduled"></th>
|
|
<th id="origin"></th>
|
|
<th id="destination"></th>
|
|
<th id="type"></th>
|
|
<th id="gate"></th>
|
|
<th id="status"></th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="tbl_record">
|
|
<tbody id="record"></tbody>
|
|
</table>
|
|
<div id="border_table_bottom" style="position:absolute; top:560px; margin-left:10px; width:900px; height:20px; background-color: rgba(0,0,0,0.4); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;"></div>
|
|
</div>
|
|
<div class="arrival" style="position: absolute; left:52%; width:50%; height:100%;">
|
|
<div id="title" style="text-align:right; margin-right:50px;"></div>
|
|
<table class="tbl_header">
|
|
<tbody id="hdr">
|
|
<tr>
|
|
<th id="airline"></th>
|
|
<th id="flight"></th>
|
|
<th id="scheduled"></th>
|
|
<th id="origin"></th>
|
|
<th id="destination"></th>
|
|
<th id="type"></th>
|
|
<th id="gate"></th>
|
|
<th id="status"></th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="tbl_record">
|
|
<tbody id="record"></tbody>
|
|
</table>
|
|
<div id="border_table_bottom" style="position:absolute; top:560px; margin-left:10px; width:900px; height:20px; background-color: rgba(0,0,0,0.4); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;"></div>
|
|
</div>
|
|
<div id="caution" style="position:absolute; top: 590px; width: 99%; height:50px; text-align: right; color:rgb(180,180,190);"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sub">
|
|
<div class="bg">
|
|
<div class="owl-carousel owl-theme" id="lst_smbg"></div>
|
|
</div>
|
|
<div class="slider">
|
|
<div class="owl-carousel owl-theme" id="lst_smsel"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ctzgen">
|
|
<div class="bg">
|
|
<div class="owl-carousel owl-theme" id="lst_ctzgenbg"></div>
|
|
</div>
|
|
<div class="slider">
|
|
<div class="owl-carousel owl-theme" id="lst_ctzgensel"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tv">
|
|
<div class="bg">
|
|
<div class="owl-carousel owl-theme" id="lst_tvCtgbg"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mypage">
|
|
<div class="bg">
|
|
<div class="owl-carousel owl-theme" id="lst_mypagebg"></div>
|
|
</div>
|
|
<div class="slider">
|
|
<div class="owl-carousel owl-theme" id="lst_mypagesel"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widjet">
|
|
<div class="top">
|
|
<div class="hotellogo"></div>
|
|
<div class="message">
|
|
<div id="unread_cnt"></div>
|
|
</div>
|
|
<div class="weather">
|
|
<div id="icon"></div>
|
|
<div id="temp"></div>
|
|
</div>
|
|
|
|
<div class="datetime">
|
|
<p class="time"></p>
|
|
<p class="date"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="news">
|
|
<div class="title">NEWS</div>
|
|
<div class="newsctz">
|
|
<lu id="hoteltv-news-ticker"></lu>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="guide">
|
|
<div class="tips"></div>
|
|
</div>
|
|
|
|
|
|
<div class="popup">
|
|
<div class="hotkey_mm_red">
|
|
<div class="owl-carousel owl-theme" id="lst_hotkey_mm_red"></div>
|
|
</div>
|
|
<div class="hotkey_mm_green">
|
|
<div class="owl-carousel owl-theme" id="lst_hotkey_mm_green"></div>
|
|
</div>
|
|
<div class="hotkey_mm_yellow">
|
|
<div class="owl-carousel owl-theme" id="lst_hotkey_mm_yellow"></div>
|
|
</div>
|
|
<div class="hotkey_mm_blue">
|
|
<div class="owl-carousel owl-theme" id="lst_hotkey_mm_blue"></div>
|
|
</div>
|
|
<div class="amenity">
|
|
<div class="title"></div>
|
|
<div class="usage"></div>
|
|
<div class="items">
|
|
<table class="table" id="item_list"></table>
|
|
</div>
|
|
<div class="buttons">
|
|
<div class="order"></div>
|
|
<div class="cancel"></div>
|
|
<div class="details"></div>
|
|
</div>
|
|
<div class="order-details">
|
|
<div class="title"></div>
|
|
<div class="usage"></div>
|
|
<div class="items">
|
|
<table class="table" id="item_list"></table>
|
|
</div>
|
|
<div class="total_amount">
|
|
<div class="title"></div>
|
|
<div class="value"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="roomservice">
|
|
<div class="menu">
|
|
<div class="title"></div>
|
|
<div class="usage"></div>
|
|
<div class="items">
|
|
<table class="table" id="item_list"></table>
|
|
</div>
|
|
<div class="buttons">
|
|
<div class="order"></div>
|
|
<div class="details"></div>
|
|
<div class="cancel"></div>
|
|
</div>
|
|
<div class="order-details">
|
|
<div class="title"></div>
|
|
<div class="usage"></div>
|
|
<div class="items">
|
|
<table class="table" id="item_list"></table>
|
|
</div>
|
|
<div class="total_amount">
|
|
<div class="title"></div>
|
|
<div class="value"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="description">
|
|
<div class="rstitle"></div>
|
|
<div class="rscomment"></div>
|
|
<div class="image"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mypage">
|
|
<div class="message">
|
|
<div id="hotel_logo"></div>
|
|
<p id="title"></p>
|
|
<p id="msg_ctz"></p>
|
|
<span id="btn_back"></span>
|
|
</div>
|
|
</div>
|
|
<div class="notification">
|
|
<div class="balloon right"><span id="message"></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Buttons Layout -->
|
|
<div class="control">
|
|
<div class="mm">
|
|
<div class="hotkey_red"></div>
|
|
<div class="hotkey_green"></div>
|
|
<div class="hotkey_yellow"></div>
|
|
<div class="hotkey_blue"></div>
|
|
</div>
|
|
<div class="skip_video"></div>
|
|
</div>
|
|
|
|
<!-- Player Layout -->
|
|
<div class="player"></div>
|
|
|
|
<!-- Error Frame Layout -->
|
|
<div class="error">
|
|
<div id="details">
|
|
<div id="title"></div>
|
|
<div id="message"></div>
|
|
</div>
|
|
<div id="countdown">
|
|
<div id="message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Busy Animation Area -->
|
|
<div class="busy-frame">
|
|
<div id="busy_animation">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
<!-- Standard & 3rd party Library -->
|
|
<script src="./lib/jquery-3.6.0.min.js"></script>
|
|
<script src="./lib/jquery.color-2.1.2.min.js"></script>
|
|
<script src="./lib/jquery.webticker.min.js"></script>
|
|
<script src="./lib/xml2json.js"></script>
|
|
<script src="./lib/owl.carousel.js"></script>
|
|
<script src="./lib/lightslider.js"></script>
|
|
|
|
<!-- LG HCAP Library -->
|
|
<script src="./lib/hcap.js"></script>
|
|
|
|
<!-- CENTIRM HOTELTV Library -->
|
|
<script src="./lib/hoteltv.js"></script>
|
|
<script src="./lib/hoteltv.ui_utils.js"></script>
|
|
<script src="./lib/hoteltv.ui_appfull.js"></script>
|
|
<script src="./lib/hoteltv.hcap.js"></script>
|
|
<script src="./lib/hoteltv.api.js"></script>
|
|
|
|
<!-- MQTT Library -->
|
|
<script src="./lib/mqtt.min.js"></script>
|
|
|
|
<!-- ACMETICKER Library -->
|
|
<script src="./lib/acmeticker.js"></script>
|
|
|
|
|
|
<script>
|
|
window.addEventListener('cached', function() {
|
|
|
|
});
|
|
var _aa = null;
|
|
window.addEventListener('load', function() {
|
|
console.log("Documents loaded...")
|
|
});
|
|
|
|
|
|
window.addEventListener('unload', function(event) {
|
|
console.log('Uninitalized');
|
|
//HotelTV.UnloadAppFull();
|
|
});
|
|
|
|
|
|
document.addEventListener("keydown",
|
|
function(e) {
|
|
let _profile = HotelTV.tvguide.program;
|
|
let _state = HotelTV.state;
|
|
|
|
// if (_state.menu.stage == "main") {
|
|
// console.log(`KEY::${e.keyCode} Main Menu(Prev)::> ${_state.menu.main.cur} ${_profile[Number(_state.menu.main.cur)].name}`);
|
|
// }
|
|
|
|
switch (e.keyCode) {
|
|
case 602: // Portail
|
|
window.location.replace('./index.html');
|
|
break;
|
|
case 409:
|
|
HotelTV.hcap.PwrOff();
|
|
break;
|
|
case 457: // INFO Key
|
|
HotelTV.hcap.GetScrshot();
|
|
break;
|
|
default:
|
|
//console.log(`KEY::${e.keyCode}`);
|
|
break;
|
|
}
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
HotelTV.LoadAppFull();
|
|
});
|
|
</script>
|
|
|
|
</html> |