Home Explore Help
Sign In
rita
/
CoffeeProject
1
0
Fork 2
Files Issues 0 Pull Requests 0 Wiki
Browse Source

上傳檔案到 'app/templates'

rita 2 years ago
parent
2208912bfa
commit
2bcb7e62ee
2 changed files with 186 additions and 71 deletions
Split View Show Diff Stats
  1. 115 0
      app/templates/board_loader.html
  2. 71 71
      app/templates/footer.html

+ 115 - 0
app/templates/board_loader.html
View File 

@@ -0,0 +1,115 @@
 
+<!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>

+ 71 - 71
app/templates/footer.html
View File 

@@ -1,72 +1,72 @@
 
-<!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">
 
-    <!-- <meta http-equiv="refresh" content="300" />  每 content 秒網頁自動更新-->
 
-
 
-    <!-- 新 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">
 
-
 
-    <!-- 參考資料 -->
 
-    <!-- https://ithelp.ithome.com.tw/articles/10244121 -->
 
-
 
-    <style>
 
-        .footer{
 
-            height: 40px;
 
-            box-sizing: border-box;
 
-            /* 設定footer絕對位置在底部 */
 
-            position: absolute;
 
-            bottom: 0px;
 
-            width: 100%;
 
-            background-color: #eee;
 
-            text-align: center;
 
-        }
 
-
 
-        html, body {
 
-            height: 100%;
 
-            /* margin: 0; */
 
-            position: relative;
 
-        }
 
-
 
-        #wrapper {
 
-            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
 
-            min-height: 100%;
 
-            /* 位置設為relative, 作為footer區塊位置的參考 */
 
-            position: relative;
 
-        }
 
-
 
-    </style>
 
-
 
-</head>
 
-
 
-<body>
 
-    <!-- <div style="text-align: center;">
 
-        狀態更新時間(秒)：
 
-        <input type="text" class="input-text" name="webupdate_time" value="5" style="width:100px;">
 
-        <input type="button" class="input-button" value="設定更新時間" onclick="changeUpdate()">
 
-    </div> -->
 
-    <br>
 
-    <br>
 
-    <footer class="footer" id="footer" style="margin: auto;">
 
-        <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">
 
-            <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;｜&nbsp;
 
-            <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;｜&nbsp;
 
-            <a style="padding: 0px 6px;" href="/sitemap">網站地圖</a>&nbsp;｜&nbsp;
 
-            Copyright © 2021 GOLD IN TECHNOLOGY INC. 保留一切權利。                
-        </div>
 
-    </footer>
 
-
 
-</body>
 
-
 
+<!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">

+    <!-- <meta http-equiv="refresh" content="300" />  每 content 秒網頁自動更新-->

+

+    <!-- 新 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">

+

+    <!-- 參考資料 -->

+    <!-- https://ithelp.ithome.com.tw/articles/10244121 -->

+

+    <style>

+        .footer{

+            height: 40px;

+            box-sizing: border-box;

+            /* 設定footer絕對位置在底部 */

+            position: absolute;

+            bottom: 0px;

+            width: 100%;

+            background-color: #eee;

+            text-align: center;

+        }

+

+        html, body {

+            height: 100%;

+            /* margin: 0; */

+            position: relative;

+        }

+

+        #wrapper {

+            /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */

+            min-height: 100%;

+            /* 位置設為relative, 作為footer區塊位置的參考 */

+            position: relative;

+        }

+

+    </style>

+

+</head>

+

+<body>

+    <!-- <div style="text-align: center;">

+        狀態更新時間(秒)：

+        <input type="text" class="input-text" name="webupdate_time" value="5" style="width:100px;">

+        <input type="button" class="input-button" value="設定更新時間" onclick="changeUpdate()">

+    </div> -->

+    <br>

+    <br>

+    <footer class="footer" id="footer" style="margin: auto;">

+        <div style="margin: 10px auto; font-size: 13px; margin-bottom: 10px;">

+            <a style="padding: 0px 6px" href="#">關於 Smart Coffee</a>&nbsp;｜&nbsp;

+            <a style="padding: 0px 6px;" href="#">產品與經銷商</a>&nbsp;｜&nbsp;

+            <a style="padding: 0px 6px;" href="/sitemap">網站地圖</a>&nbsp;｜&nbsp;

+            Copyright © 2022 GOLD IN TECHNOLOGY INC. 保留一切權利。                

+        </div>

+    </footer>

+

+</body>

+

 </html>