<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--
<script src="../static/js/sign_in.js"></script>
<link rel="stylesheet" href="../static/css/sign_in.css">
-->
<script>
$(document).ready(function(){
$("#coffee_title").text('清洗貨櫃');
});
</script>
<style>
.C1_position {
position: absolute;
top: 135px;
left: 205px;
width: 175px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.C2_position {
position: absolute;
top: 400px;
left: 205px;
width: 175px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.CO1_position {
position: absolute;
top: 135px;
left: 400px;
width: 175px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.CO2_position {
position: absolute;
top: 400px;
left: 400px;
width: 175px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.S1_position {
position: absolute;
top: 135px;
left: 945px;
width: 115px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.S2_position {
position: absolute;
top: 400px;
left: 945px;
width: 115px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.SO1_position {
position: absolute;
top: 135px;
left: 1065px;
width: 60px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.SO2_position {
position: absolute;
top: 400px;
left: 1065px;
width: 60px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.P1_position {
position: absolute;
top: 135px;
left: 1150px;
width: 95px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.P2_position {
position: absolute;
top: 400px;
left: 1150px;
width: 95px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.PO1_position {
position: absolute;
top: 135px;
left: 1250px;
width: 50px;
height: 230px;
border-style: solid;
border-color: aqua;
}
.PO2_position {
position: absolute;
top: 400px;
left: 1250px;
width: 50px;
height: 230px;
border-style: solid;
border-color: aqua;
}
</style>
<script language="JavaScript">
// 指定 10秒 刷新網頁一次
var WebRestart
// WebRestart = setTimeout(function () { location.reload() }, 10000);
</script>
</head>
<body>
<div id="wrapper">
<div id="coffee_header">
<!-- 匯入共同使用的 header.html 內容 -->
{% include 'header.html' %}
</div>
<!--
background-color:rgb(0, 238, 255);
-->
<!--
<div style="text-align: left;">
<a href="/index_new" style="float: left;"> 返回貨櫃首頁</a>
</div>
<div style="text-align: right;">
<a href="/camera_clean" style="float: right;">清洗貨櫃攝影機 </a>
</div>
<div style="text-align: center; margin-top: 30px; font-size: 24px;">
Smart Coffee
</div>
-->
<div>
<!-- 底圖 清洗浮選貨櫃 12 個清洗浮選桶槽 -->
<center><img src="../static/img/web_CleanColorPeel_container.png" style="margin: auto; width: 1430px;"></center>
<!-- 清洗浮選槽 C1 -->
<div id="C1" tabindex="0" class="C1_position" role="button">
C1 status
<!-- C1 狀態點點-->
<div id="C1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 清洗浮選槽 C2 -->
<div id="C2" tabindex="0" class="C2_position" role="button">
C2 status
<div id="C2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 清洗浮選 CO1 出料儲豆槽 -->
<div id="CO1" tabindex="0" class="CO1_position" role="button">
CO1 status
<!-- CO1 狀態點點-->
<div id="CO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 清洗浮選 CO2 出料儲豆槽 -->
<div id="CO2" tabindex="0" class="CO2_position" role="button">
CO2 status
<!-- CO2 狀態點點-->
<div id="CO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 色選機 S1 -->
<div id="S1" tabindex="0" class="S1_position" role="button">
S1 status
<div id="S1_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
</div>
<!-- 色選機 S2 -->
<div id="S2" tabindex="0" class="S2_position" role="button">
S2 status
<div id="S2_status" style="width: 20px; height: 20px; background-color: crimson; border-radius: 50%;"></div>
</div>
<!-- 色選機 SO1 出料儲豆槽 -->
<div id="SO1" tabindex="0" class="SO1_position" role="button">
SO1 status
<div id="SO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 色選機 SO2 出料儲豆槽 -->
<div id="SO2" tabindex="0" class="SO2_position" role="button">
SO2 status
<div id="SO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 脫皮機 P1 -->
<div id="P1" tabindex="0" class="P1_position" role="button">
P1 status
<div id="P1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 脫皮機 P2 -->
<div id="P2" tabindex="0" class="P2_position" role="button">
P2 status
<div id="P2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 脫皮機 PO1 出料儲豆槽 -->
<div id="PO1" tabindex="0" class="PO1_position" role="button">
PO1 status
<div id="PO1_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
<!-- 脫皮機 PO2 出料儲豆槽 -->
<div id="PO2" tabindex="0" class="PO2_position" role="button">
PO2 status
<div id="PO2_status" style="width: 20px; height: 20px; background-color: cornflowerblue; border-radius: 50%;"></div>
</div>
</div>
<!-- 清洗浮選 模态框 -->
<div class="modal fade" id="C_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h4 id="C_Modal_title" class="modal-title">清洗浮選槽 C1 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="C_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
<td><strong><a id="C_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
<div id="C_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
真空吸料機
</td>
</tr>
<tr>
<td>
<div id="tank_pump_waterInput_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
入水口_雙核泵
</td>
</tr>
<tr>
<td>
<div id="tank_pump_waterL2L3_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
出水口 2、3_雙核泵
</td>
</tr>
<tr>
<td>
<div id="tank_pump_waterL4L5_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
出水口 4、5_雙核泵
</td>
</tr>
<tr>
<td>
<div id="tank_solenoid_waterL2L3_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
出水口 2、3_電磁閥
</td>
</tr>
<tr>
<td>
<div id="tank_solenoid_waterL4L5_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
出水口 4、5_電磁閥
</td>
</tr>
<tr>
<td>
<div id="tank_stepping_motor_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
步進馬達
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
咖啡生豆高度
</td>
<td>
<span id="UltraSonic_t_status"></span>
</td>
</tr>
<tr>
<td>
<a id="camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 清洗浮選 出料儲豆槽 模态框 -->
<div class="modal fade" id="CO_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h4 id="CO_Modal_title" class="modal-title">清洗浮選出料儲豆槽 CO1 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="CO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
<td><strong><a id="CO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
<div id="CO_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
真空吸料機
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
(感測器)
</td>
<td>
<span id="">000</span>
</td>
</tr>
<tr>
<td>
<a id="CO_camera_clean_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 色選機 模态框 -->
<!-- 色選機 出料儲豆槽 模态框 -->
<div class="modal fade" id="SO_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h4 id="SO_Modal_title" class="modal-title">色選機出料儲豆槽 CO1 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="SO_actuator_link" href="/colorselect_container/1">制動器狀態</a></strong></td>
<td><strong><a id="SO_sensor_link" href="/colorselect_container/1">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
<div id="SO_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
真空吸料機
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
(感測器)
</td>
<td>
<span id="">000</span>
</td>
</tr>
<tr>
<td>
<a id="SO_camera_colorselect_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 脫皮機 模态框 -->
<div class="modal fade" id="P_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h4 id="P_Modal_title" class="modal-title">脫皮機 P1 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="P_actuator_link" href="">制動器狀態</a></strong></td>
<td><strong><a id="P_sensor_link" href="">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
<div id="P_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
真空吸料機
</td>
</tr>
<tr>
<td>
<div id="tank_motor_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
馬達
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
(感測器)
</td>
<td>
<span id="SENSOR_t_status">000</span>
</td>
</tr>
<tr>
<td>
<a id="camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- 脫皮機 出料儲豆槽 模态框 -->
<div class="modal fade" id="PO_Modal">
<div class="modal-dialog modal-dialog-centered" style="width: 400px;">
<div class="modal-content">
<div class="modal-header">
<h4 id="PO_Modal_title" class="modal-title">脫皮機出料儲豆槽 PO1 狀態</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<table style="border:0px gray solid; width: 100%;" cellpadding="3">
<!--<table style="border:0px gray solid;-->
<tr>
<td><strong><a id="PO_actuator_link" href="/clean_container/1">制動器狀態</a></strong></td>
<td><strong><a id="PO_sensor_link" href="/clean_container/1">感測器狀態</a></strong></td>
</tr>
<tr>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
<div id="PO_vacuum_status"
style="width: 18px; height: 18px; background-color:black; border-radius: 50%;">
</div>
</td>
<td>
真空吸料機
</td>
</tr>
</table>
</td>
<td style="vertical-align:text-top;">
<table style="border:0px gray solid;" cellpadding="3">
<tr>
<td>
(感測器)
</td>
<td>
<span id="">000</span>
</td>
</tr>
<tr>
<td>
<a id="PO_camera_peel_tid" href=""><strong>攝影機畫面</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script>
function update_data_C(ctid) {
console.log('clean_tank_id:' + ctid)
$.get('/loading/C' + ctid, '', function (res) {
if (res.tank_vacuum == 0) {
$("#C_vacuum_status").css("background-color", "#C0C0C0")
} else if (res.tank_vacuum == 1) {
$("#C_vacuum_status").css("background-color", "forestgreen")
} else { $("#C_vacuum_status").css("background-color", "crimson") }
if (res.tank_pump_waterInput == 0) {
$("#tank_pump_waterInput_status").css("background-color", "#C0C0C0")
} else if (res.tank_pump_waterInput == 1) {
$("#tank_pump_waterInput_status").css("background-color", "forestgreen")
} else { $("#tank_pump_waterInput_status").css("background-color", "crimson") }
if (res.tank_pump_waterL2L3 == 0) {
$("#tank_pump_waterL2L3_status").css("background-color", "#C0C0C0")
} else if (res.tank_pump_waterL2L3 == 1) {
$("#tank_pump_waterL2L3_status").css("background-color", "forestgreen")
} else { $("#tank_pump_waterL2L3_status").css("background-color", "crimson") }
if (res.tank_pump_waterL4L5 == 0) {
$("#tank_pump_waterL4L5_status").css("background-color", "#C0C0C0")
} else if (res.tank_pump_waterL4L5 == 1) {
$("#tank_pump_waterL4L5_status").css("background-color", "forestgreen")
} else { $("#tank_pump_waterL4L5_status").css("background-color", "crimson") }
if (res.tank_solenoid_waterL2L3 == 0) {
$("#tank_solenoid_waterL2L3_status").css("background-color", "#C0C0C0")
} else if (res.tank_solenoid_waterL2L3 == 1) {
$("#tank_solenoid_waterL2L3_status").css("background-color", "forestgreen")
} else { $("#tank_solenoid_waterL2L3_status").css("background-color", "crimson") }
if (res.tank_solenoid_waterL4L5 == 0) {
$("#tank_solenoid_waterL4L5_status").css("background-color", "#C0C0C0")
} else if (res.tank_solenoid_waterL4L5 == 1) {
$("#tank_solenoid_waterL4L5_status").css("background-color", "forestgreen")
} else { $("#tank_solenoid_waterL4L5_status").css("background-color", "crimson") }
if (res.tank_stepping_motor == 'stop' || res.tank_stepping_motor == '0' ) {
$("#tank_stepping_motor_status").css("background-color", "#C0C0C0")
} else if (res.tank_stepping_motor == 'up' || res.tank_stepping_motor == 'down' ) {
$("#tank_stepping_motor_status").css("background-color", "forestgreen")
} else { $("#tank_stepping_motor_status").css("background-color", "crimson") }
$("#UltraSonic_t_status").text(res.UltraSonic);
}, 'json');
$('#C_Modal_title').text("清洗浮選槽 C" + ctid + " 狀態");
$('#C_actuator_link').attr("href", "/clean_container/" + ctid);
$('#C_sensor_link').attr("href", "/clean_container/" + ctid);
$('#camera_clean_tid').attr("href", "/camera_C" + ctid);
$('#C_Modal').modal('show');
}
function update_data_SO(sotid){
console.log('color-select_tank_id:' + sotid)
$.get('/loading/SO' + sotid, '', function (res) {
if (res.output_vacuum == 0) {
$("#SO_vacuum_status").css("background-color", "#C0C0C0")
} else if (res.output_vacuum == 1) {
$("#SO_vacuum_status").css("background-color", "forestgreen")
} else { $("#SO_vacuum_status").css("background-color", "crimson") }
}, 'json');
$('#SO_Modal_title').text("色選機出料儲豆槽 SO" + sotid + " 狀態");
$('#SO_actuator_link').attr("href", "/colorselect_container/" + sotid);
$('#SO_sensor_link').attr("href", "/colorselect_container/" + sotid);
$('#SO_camera_colorselect_tid').attr("href", "/camera_SO" + sotid);
$('#SO_Modal').modal('show');
}
function update_data_S(stid) {
console.log('color-select_tank_id:' + stid)
$.get('/loading/S' + stid, '', function (res) {
}, 'json');
$('#camera_colorselect_tid').attr("href", "/camera_S" + stid);
$('#S1_Modal').modal('show');
}
function update_data_P(ptid) {
console.log('peel_tank_id:' + ptid)
$.get('/loading/P' + ptid, '', function (res) {
if (res.tank_vacuum == 0) {
$("#P_vacuum_status").css("background-color", "#C0C0C0")
} else if (res.tank_vacuum == 1) {
$("#P_vacuum_status").css("background-color", "forestgreen")
} else { $("#P_vacuum_status").css("background-color", "crimson") }
if (res.tank_motor > 0) {
$("#tank_motor_status").css("background-color", "forestgreen")
} else if (res.tank_motor == 0) {
$("#tank_motor_status").css("background-color", "#C0C0C0")
} else { $("#tank_motor_status").css("background-color", "crimson") }
}, 'json');
$('#P_Modal_title').text("脫皮機 P" + ptid + " 狀態");
$('#P_actuator_link').attr("href", "/peel_container_tank/" + ptid);
$('#P_sensor_link').attr("href", "/peel_container_tank/" + ptid);
$('#camera_peel_tid').attr("href", "/camera_P" + ptid);
$('#P_Modal').modal('show');
}
function update_data_CO(cotid){
console.log('clean_output_tank_id:' + cotid)
$.get('loading/CO' + cotid, '', function (res){
if (res.output_vacuum == 0) {
$("#CO_vacuum_status").css("background-color", "#C0C0C0")
} else if (res.output_vacuum == 1) {
$("#CO_vacuum_status").css("background-color", "forestgreen")
} else { $("#CO_vacuum_status").css("background-color", "crimson") }
}, 'json');
$('#CO_Modal_title').text("清洗浮選出料儲豆槽 CO" + cotid + " 狀態");
$('#CO_actuator_link').attr("href", "/clean_container/" + cotid);
$('#CO_sensor_link').attr("href", "/clean_container/" + cotid);
$('#CO_camera_clean_tid').attr("href", "/camera_CO" + cotid);
$('#CO_Modal').modal('show');
}
function update_data_PO(potid){
console.log('peel_output_tank_id' + potid)
$.get('loading/PO' + potid, '', function (res){
if (res.output_vacuum == 0) {
$("#PO_vacuum_status").css("background-color", "#C0C0C0")
} else if (res.output_vacuum == 1) {
$("#PO_vacuum_status").css("background-color", "forestgreen")
} else { $("#PO_vacuum_status").css("background-color", "crimson") }
}, 'json');
$('#PO_Modal_title').text("脫皮機出料儲豆槽 PO" + potid + " 狀態");
$('#PO_actuator_link').attr("href", "/peel_container/" + potid);
$('#PO_sensor_link').attr("href", "/peel_container/" + potid);
$('#PO_camera_peel_tid').attr("href", "/camera_PO" + potid);
$('#PO_Modal').modal('show');
}
var button_C1 = document.getElementById('C1');
button_C1.addEventListener('click', function () { update_data_C("1") });
var button_C2 = document.getElementById('C2');
button_C2.addEventListener('click', function () { update_data_C("2") });
var button_CO1 = document.getElementById('CO1');
button_CO1.addEventListener('click', function () { update_data_CO("1") });
var button_CO2 = document.getElementById('CO2');
button_CO2.addEventListener('click', function () { update_data_CO("2") });
var button_S1 = document.getElementById('S1');
button_S1.addEventListener('click', function () { update_data_S("1") });
var button_S2 = document.getElementById('S2');
button_S2.addEventListener('click', function () { update_data_S("2") });
var button_SO1 = document.getElementById('SO1');
button_SO1.addEventListener('click', function () { update_data_SO("1") });
var button_SO2 = document.getElementById('SO2');
button_SO2.addEventListener('click', function () { update_data_SO("2") });
var button_P1 = document.getElementById('P1');
button_P1.addEventListener('click', function () { update_data_P("1") });
var button_P2 = document.getElementById('P2');
button_P2.addEventListener('click', function () { update_data_P("2") });
var button_PO1 = document.getElementById('PO1');
button_PO1.addEventListener('click', function () { update_data_PO("1") });
var button_PO2 = document.getElementById('PO2');
button_PO2.addEventListener('click', function () { update_data_PO("2") });
</script>
<!--
<footer class="footer">
<div style="text-align: center; margin-top: 10px; font-size: 13px; margin-bottom: 10px;">
Copyright © 2021 Gold-in Tech. All Rights Reserved. 金子進科技股份有限公司 版權所有
<a href="mailto:service.gitc@gmail.com" target="_blank">service.gitc@gmail.com</a>
</div>
</footer>
-->
<div id="coffee_footer">
<!-- 匯入共同使用的 footer.html 內容 -->
{% include 'footer.html' %}
</div>
</div>
</body>
</html>