|
@@ -0,0 +1,164 @@
|
|
|
|
+<html>
|
|
|
|
+ <head>
|
|
|
|
+ <!-- Tocas UI:CSS 與元件 -->
|
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
|
|
|
|
+ <!-- Tocas JS:模塊與 JavaScript 函式 -->
|
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
|
|
|
|
+ <script
|
|
|
|
+ src="https://code.jquery.com/jquery-3.6.0.min.js"
|
|
|
|
+ integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
|
+ <style>
|
|
|
|
+ body{
|
|
|
|
+ background-color: #ededed;
|
|
|
|
+ }
|
|
|
|
+ .leftContainer{
|
|
|
|
+ border: 1px solid black;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ margin: 12px;
|
|
|
|
+ height: 250px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .javainput{
|
|
|
|
+ -webkit-box-shadow: inset 5px 5px 4px -5px rgba(105,105,105,0.71);
|
|
|
|
+ box-shadow: inset 5px 5px 4px -5px rgba(105,105,105,0.71);
|
|
|
|
+ font-size: 26px;
|
|
|
|
+ padding-top: 4px;
|
|
|
|
+ padding-left: 5px;
|
|
|
|
+
|
|
|
|
+ margin-top: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .double.javainput{
|
|
|
|
+ width: 40px;
|
|
|
|
+ margin-left: 18px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .single.javainput{
|
|
|
|
+ width: 30px;
|
|
|
|
+ margin-left: 28px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .javabutton{
|
|
|
|
+ background: rgb(229,234,243);
|
|
|
|
+ background: linear-gradient(180deg, rgba(229,234,243,1) 0%, rgba(243,249,252,1) 27%, rgba(196,214,231,1) 100%);
|
|
|
|
+ padding: 1px;
|
|
|
|
+ width: 100px;
|
|
|
|
+ margin-top: 6px;
|
|
|
|
+ -webkit-box-shadow: inset 5px 5px 4px -5px rgba(105,105,105,0.71);
|
|
|
|
+ box-shadow: inset 5px 5px 4px -5px rgba(105,105,105,0.71);
|
|
|
|
+ border: 1px solid rgb(175, 175, 175);
|
|
|
|
+ font-size: 90%;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .switchFrame{
|
|
|
|
+ background: rgb(229,234,243);
|
|
|
|
+ background: linear-gradient(180deg, rgba(229,234,243,1) 0%, rgba(243,249,252,1) 27%, rgba(196,214,231,1) 100%);
|
|
|
|
+ width: calc(100% - 20px);
|
|
|
|
+ height: 220px;
|
|
|
|
+ margin-top: 200px;
|
|
|
|
+ border: 1px solid rgb(158, 158, 158);
|
|
|
|
+ padding: 12px;
|
|
|
|
+ padding-top: 25px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .onofftext{
|
|
|
|
+ padding-top: 30px;
|
|
|
|
+ margin-left: -12px;
|
|
|
|
+ font-style: italic;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bulbSwitch{
|
|
|
|
+ background: rgb(229,234,243);
|
|
|
|
+ background: linear-gradient(180deg, rgba(229,234,243,1) 0%, rgba(243,249,252,1) 27%, rgba(196,214,231,1) 100%);
|
|
|
|
+ width: calc(100% - 22px);
|
|
|
|
+ margin-top: 30px;
|
|
|
|
+ height: 170px;
|
|
|
|
+ border: 1px solid rgb(158, 158, 158);
|
|
|
|
+ padding-top: 1px;
|
|
|
|
+ }
|
|
|
|
+ .bulbSwitchOffsetText {
|
|
|
|
+ padding-top: 24px;
|
|
|
|
+ margin-left: 12px;
|
|
|
|
+ font-style: italic;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ font-size: 1.1em;
|
|
|
|
+ transform: scale(1.2, 1);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bulb{
|
|
|
|
+ max-height: 240px;
|
|
|
|
+ padding-top: 8px;
|
|
|
|
+ padding-right: 12px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .switch{
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+ }
|
|
|
|
+ </style>
|
|
|
|
+ </head>
|
|
|
|
+ <body>
|
|
|
|
+ <div class="ts grid">
|
|
|
|
+ <div class="ten wide column">
|
|
|
|
+ <div class="leftContainer">
|
|
|
|
+ <div class="ts grid">
|
|
|
|
+ <div class="eight wide column">
|
|
|
|
+ <img id="bulb0" class="ts image bulb" src="light_off.png">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="eight wide column">
|
|
|
|
+ <div class="bulbSwitch">
|
|
|
|
+ <img id="bulb0switch" class="ts image bulb switch" src="switch.png">
|
|
|
|
+ <p class="bulbSwitchOffsetText">Switch LAMP...</p>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="leftContainer">
|
|
|
|
+ <div class="ts grid">
|
|
|
|
+ <div class="eight wide column">
|
|
|
|
+ <img id="bulb1" class="ts image bulb" src="light_off.png">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="eight wide column">
|
|
|
|
+ <div class="bulbSwitch">
|
|
|
|
+ <img id="bulb1switch" class="ts image bulb switch" src="switch.png">
|
|
|
|
+ <p class="bulbSwitchOffsetText">Switch LAMP...</p>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="six wide column">
|
|
|
|
+ <div class="switchFrame" align="center">
|
|
|
|
+ <img id="power" class="ts image" src="switch.png">
|
|
|
|
+ <p class="onofftext">Switch All</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <script>
|
|
|
|
+ setInterval(function(){
|
|
|
|
+ $.get("./getStatus", function(data){
|
|
|
|
+ data = JSON.parse(data);
|
|
|
|
+ if (data.Lamp0 == true){
|
|
|
|
+ $("#bulb0").attr("src", "light_on.png");
|
|
|
|
+ }else{
|
|
|
|
+ $("#bulb0").attr("src", "light_off.png");
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (data.Lamp1 == true){
|
|
|
|
+ $("#bulb1").attr("src", "light_on.png");
|
|
|
|
+ }else{
|
|
|
|
+ $("#bulb1").attr("src", "light_off.png");
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }, 300);
|
|
|
|
+ </script>
|
|
|
|
+ </body>
|
|
|
|
+</html>
|