123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <!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>
|