<!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>
<!--可用來建立使用者小圖示-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script language="JavaScript">
$(function(){
$("#coffee_title_pc").text("板子燒錄程式");
$("#coffee_title_phone").text("板子燒錄程式");
});
</script>
<style>
.boardpic_position {
position: absolute;
top: 95px;
left: 53px;
}
.r1_position {
position: absolute;
top: 160px;
left: 75px;
width: 40px;
height: 150px;
border-style: solid;
border-color: aqua;
text-align: center;
}
.r5_position {
position: absolute;
top: 160px;
left: 310px;
width: 40px;
height: 150px;
border-style: solid;
border-color: aqua;
}
</style>
</head>
<body style="font-size: 18px;">
<div id="wrapper" style="height: 1250px;">
<div id="coffee_header">
<!-- 匯入共同使用的 header.html 內容 -->
{% include 'header.html' %}
</div>
<!-- 底圖 板子 -->
<div id="board_pic" class="boardpic_position">
<img src="../static/img/0103_board_coffee1.0_tag.png" width="1250px" style="margin: auto;">
</div>
<div style="position: absolute; left: 75px;">
Relay 1 :
<select id="select_relay_1" onchange="select_relay('1')">
<option value=""></option>
<!-- 真空吸料機 電磁閥 蝴蝶閥 警示燈 攝影機 電熱管 雙核泵 -->
<option value="D1">真空吸料機</option>
<option value="D2">電磁閥</option>
<option value="D3">蝴蝶閥</option>
<option value="D4">警示燈</option>
<option value="D5">攝影機</option>
<option value="D6">電熱管</option>
<option value="D7">雙核泵</option>
</select>
</div>
<!-- relay1 -->
<div id="r1" tabindex="0" class="r1_position" role="button">
</div>
<script>
function select_relay(id) {
var select_relay_text = $("#select_relay_" + id).find(':selected').text()
console.log("select_relay_text: " + select_relay_text)
$("#r" + id).text(select_relay_text);
$("#r" + id).attr('style', 'background-color:antiquewhite; color:black');
}
</script>
<!-- relay5 -->
<div id="r5" tabindex="0" class="r5_position" role="button">
<select id="select_relay_5" style="width: 35px; font-size: 5px;">
<option value=""></option>
<!-- 真空吸料機 電磁閥 蝴蝶閥 警示燈 攝影機 電熱管 雙核泵 -->
<option value="D1">真空吸料機</option>
<option value="D2">電磁閥</option>
<option value="D3">蝴蝶閥</option>
<option value="D4">警示燈</option>
<option value="D5">攝影機</option>
<option value="D6">電熱管</option>
<option value="D7">雙核泵</option>
</select>
</div>
<div id="coffee_footer">
<!-- 匯入共同使用的 footer.html 內容 -->
{% include 'footer.html' %}
</div>
</div>
</body>
</html>