board_loader.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{{ title }}</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!--可用來建立使用者小圖示-->
  16. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  17. <script language="JavaScript">
  18. $(function(){
  19. $("#coffee_title_pc").text("板子燒錄程式");
  20. $("#coffee_title_phone").text("板子燒錄程式");
  21. });
  22. </script>
  23. <style>
  24. .boardpic_position {
  25. position: absolute;
  26. top: 95px;
  27. left: 53px;
  28. }
  29. .r1_position {
  30. position: absolute;
  31. top: 160px;
  32. left: 75px;
  33. width: 40px;
  34. height: 150px;
  35. border-style: solid;
  36. border-color: aqua;
  37. text-align: center;
  38. }
  39. .r5_position {
  40. position: absolute;
  41. top: 160px;
  42. left: 310px;
  43. width: 40px;
  44. height: 150px;
  45. border-style: solid;
  46. border-color: aqua;
  47. }
  48. </style>
  49. </head>
  50. <body style="font-size: 18px;">
  51. <div id="wrapper" style="height: 1250px;">
  52. <div id="coffee_header">
  53. <!-- 匯入共同使用的 header.html 內容 -->
  54. {% include 'header.html' %}
  55. </div>
  56. <!-- 底圖 板子 -->
  57. <div id="board_pic" class="boardpic_position">
  58. <img src="../static/img/0103_board_coffee1.0_tag.png" width="1250px" style="margin: auto;">
  59. </div>
  60. <div style="position: absolute; left: 75px;">
  61. Relay 1 :
  62. <select id="select_relay_1" onchange="select_relay('1')">
  63. <option value=""></option>
  64. <!-- 真空吸料機 電磁閥 蝴蝶閥 警示燈 攝影機 電熱管 雙核泵 -->
  65. <option value="D1">真空吸料機</option>
  66. <option value="D2">電磁閥</option>
  67. <option value="D3">蝴蝶閥</option>
  68. <option value="D4">警示燈</option>
  69. <option value="D5">攝影機</option>
  70. <option value="D6">電熱管</option>
  71. <option value="D7">雙核泵</option>
  72. </select>
  73. </div>
  74. <!-- relay1 -->
  75. <div id="r1" tabindex="0" class="r1_position" role="button">
  76. </div>
  77. <script>
  78. function select_relay(id) {
  79. var select_relay_text = $("#select_relay_" + id).find(':selected').text()
  80. console.log("select_relay_text: " + select_relay_text)
  81. $("#r" + id).text(select_relay_text);
  82. $("#r" + id).attr('style', 'background-color:antiquewhite; color:black');
  83. }
  84. </script>
  85. <!-- relay5 -->
  86. <div id="r5" tabindex="0" class="r5_position" role="button">
  87. <select id="select_relay_5" style="width: 35px; font-size: 5px;">
  88. <option value=""></option>
  89. <!-- 真空吸料機 電磁閥 蝴蝶閥 警示燈 攝影機 電熱管 雙核泵 -->
  90. <option value="D1">真空吸料機</option>
  91. <option value="D2">電磁閥</option>
  92. <option value="D3">蝴蝶閥</option>
  93. <option value="D4">警示燈</option>
  94. <option value="D5">攝影機</option>
  95. <option value="D6">電熱管</option>
  96. <option value="D7">雙核泵</option>
  97. </select>
  98. </div>
  99. <div id="coffee_footer">
  100. <!-- 匯入共同使用的 footer.html 內容 -->
  101. {% include 'footer.html' %}
  102. </div>
  103. </div>
  104. </body>
  105. </html>