rita
/
CoffeeProject


			
				
					
						
						
							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>