Adding H5 demo page
This commit is contained in:
Miuser
@@ -43,10 +43,11 @@
|
||||
|
||||
|
||||
## 目录结构 ##
|
||||
.\UdpPlugWebsocket //UPWS服务程序（主服务程序）
|
||||
.\UdpPlugWebsocket\UdpExample //UDP测试程序
|
||||
.\UPW_Browser //Websocket测试程序
|
||||
.\bin_UPWS //编译后的Win32项目二进制文
|
||||
.\UdpPlugWebsocket //UPWS服务程序源码（主服务程序）
|
||||
.\UdpPlugWebsocket\UdpExample源码 //UDP测试程序
|
||||
.\UPW_Browser //Websocket测试程序源码
|
||||
.\bin_UPWS //编译后的Win32项目二进制文件
|
||||
.\html //H5前端源码
|
||||
... //其余目录为参考代码目录，可删除
|
||||
|
||||
|
||||
|
||||
1
html/css/normalize.min.css
vendored
Normal file
1
html/css/normalize.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
|
||||
579
html/css/style.css
Normal file
579
html/css/style.css
Normal file
@@ -0,0 +1,579 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Francois+One);
|
||||
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
|
||||
@font-face {
|
||||
font-family: 'Audiowide';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");
|
||||
}
|
||||
body {
|
||||
font-size: 62.5%;
|
||||
background-color: #fff;
|
||||
margin: 10px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.4em;
|
||||
background-color: #292929;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
h1 a {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
text-transform: none;
|
||||
color: #aaa;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.headingOuter {
|
||||
background: #f1f1f1;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
border-top: 1px solid #333;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
.headingOuter:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
h1 + .headingOuter {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
Some defaults across all toggle demos
|
||||
===================================================== */
|
||||
.toggle {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.toggle--checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle--btn {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 1.4em;
|
||||
transition: all 350ms ease-in;
|
||||
}
|
||||
.toggle--btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle--btn, .toggle--btn:before, .toggle--btn:after,
|
||||
.toggle--checkbox,
|
||||
.toggle--checkbox:before,
|
||||
.toggle--checkbox:after,
|
||||
.toggle--feature,
|
||||
.toggle--feature:before,
|
||||
.toggle--feature:after {
|
||||
transition: all 250ms ease-in;
|
||||
}
|
||||
.toggle--btn:before, .toggle--btn:after,
|
||||
.toggle--checkbox:before,
|
||||
.toggle--checkbox:after,
|
||||
.toggle--feature:before,
|
||||
.toggle--feature:after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
Day/Night and Gender toggle buttons
|
||||
=================================================== */
|
||||
.toggle--daynight .toggle--btn,
|
||||
.toggle--like .toggle--btn {
|
||||
position: relative;
|
||||
height: 70px;
|
||||
width: 125px;
|
||||
border-radius: 70px;
|
||||
}
|
||||
.toggle--daynight .toggle--btn:before,
|
||||
.toggle--like .toggle--btn:before {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.toggle--daynight .toggle--btn {
|
||||
border: 5px solid #1c1c1c;
|
||||
background-color: #3c4145;
|
||||
}
|
||||
.toggle--daynight .toggle--btn:before {
|
||||
background-color: #fff;
|
||||
border: 5px solid #e3e3c7;
|
||||
}
|
||||
.toggle--daynight .toggle--btn:after {
|
||||
position: absolute;
|
||||
top: 62%;
|
||||
left: 39px;
|
||||
z-index: 10;
|
||||
width: 11.2px;
|
||||
height: 11.2px;
|
||||
opacity: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px;
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
@keyframes starry_star {
|
||||
50% {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px;
|
||||
}
|
||||
}
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 100;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
55% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
75% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 100;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.toggle--daynight .toggle--feature {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 52.5%;
|
||||
z-index: 20;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px;
|
||||
animation: starry_star 5s ease-in-out infinite;
|
||||
}
|
||||
.toggle--daynight .toggle--feature:before {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -25px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
border: 5px solid #e3e3c7;
|
||||
box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px;
|
||||
transform-origin: -6px 130%;
|
||||
}
|
||||
.toggle--daynight .toggle--checkbox:checked + .toggle--btn {
|
||||
background-color: #9ee3fb;
|
||||
border: 5px solid #86c3d7;
|
||||
}
|
||||
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before {
|
||||
left: 55px;
|
||||
background-color: #ffdf6d;
|
||||
border: 5px solid #e1c348;
|
||||
}
|
||||
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after {
|
||||
opacity: 100;
|
||||
animation-name: bounceIn;
|
||||
animation-duration: 0.60s;
|
||||
animation-delay: 0.10s;
|
||||
animation-fill-mode: backwards;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature {
|
||||
opacity: 0;
|
||||
box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px;
|
||||
animation: none;
|
||||
}
|
||||
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before {
|
||||
left: 25px;
|
||||
transform: rotate(70deg);
|
||||
}
|
||||
|
||||
/* ==================================================
|
||||
Like specific styling
|
||||
================================================== */
|
||||
.toggle--like {
|
||||
position: relative;
|
||||
}
|
||||
.toggle--like .toggle--btn {
|
||||
border: 5px solid #0865B0;
|
||||
background-color: #3498db;
|
||||
}
|
||||
.toggle--like .toggle--btn:before {
|
||||
background-color: #f2dd68;
|
||||
border: 5px solid #e5ce5e;
|
||||
}
|
||||
.toggle--like .toggle--feature {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 32%;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #995710;
|
||||
box-shadow: 28px 0 0 0 #995710;
|
||||
}
|
||||
.toggle--like .toggle--feature:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 11px;
|
||||
width: 36px;
|
||||
height: 17px;
|
||||
background-color: #995710;
|
||||
border-radius: 36px 36px 0 0;
|
||||
}
|
||||
.toggle--like .toggle--feature:after {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 21px;
|
||||
width: 17px;
|
||||
height: 7px;
|
||||
background-color: #d8aa2b;
|
||||
border-radius: 17px 17px 0 0;
|
||||
}
|
||||
.toggle--like .toggle--checkbox:checked + .toggle--btn {
|
||||
background-color: #e25d5d;
|
||||
border: 5px solid #AD1000;
|
||||
}
|
||||
.toggle--like .toggle--checkbox:checked + .toggle--btn:before {
|
||||
transform: translate(51px, 0);
|
||||
}
|
||||
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature {
|
||||
transform: translate(53px, 0);
|
||||
}
|
||||
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
|
||||
border-radius: 0 0 36px 36px;
|
||||
top: 11px;
|
||||
}
|
||||
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
|
||||
top: 21px;
|
||||
border-radius: 50%/50%;
|
||||
}
|
||||
|
||||
/* ====================================================
|
||||
Text toggle button
|
||||
==================================================== */
|
||||
.toggle--text .toggle--btn {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 70px;
|
||||
font-family: 'PT Sans', Sans Serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
border-radius: 40px;
|
||||
border: 1px solid #8c8c8c;
|
||||
border-right: 2px solid #8c8c8c;
|
||||
box-shadow: inset 90px 0 10px rgba(255, 255, 255, 0.6), inset -3px 3px 18px -2px #8c8c8c, 0 0 15px #ccc, 0px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, 17px 9px 0 -5px rgba(255, 255, 255, 0.6), -3px 6px 12px -7px #000, 0 0 0 14px #fff, 0 0 0 15px #999;
|
||||
}
|
||||
.toggle--text .toggle--btn:before, .toggle--text .toggle--btn:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.toggle--text .toggle--btn:before {
|
||||
content: attr(data-label-on);
|
||||
left: 15%;
|
||||
color: #999;
|
||||
}
|
||||
.toggle--text .toggle--btn:after {
|
||||
content: attr(data-label-off);
|
||||
right: 15%;
|
||||
color: #db4c00;
|
||||
}
|
||||
.toggle--text .toggle--checkbox:checked + .toggle--btn {
|
||||
border-left: 2px solid #8c8c8c;
|
||||
border-right: 1px solid #8c8c8c;
|
||||
box-shadow: inset 90px 0 10px rgba(255, 255, 255, 0), inset 3px 3px 18px -2px #8c8c8c, 0 0 15px #ccc, 0px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -17px 9px 0 -5px rgba(255, 255, 255, 0.6), 3px 6px 12px -7px #000, 0 0 0 14px #fff, 0 0 0 15px #999;
|
||||
}
|
||||
.toggle--text .toggle--checkbox:checked + .toggle--btn:before {
|
||||
color: #db4c00;
|
||||
}
|
||||
.toggle--text .toggle--checkbox:checked + .toggle--btn:after {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
Toggle - knob button style
|
||||
===================================================== */
|
||||
.toggle--knob .toggle--btn {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
font-family: 'PT Sans', Sans Serif;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
background: #a4bf4d;
|
||||
box-shadow: inset 0 20px 40px -10px #7b9d25;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.toggle--knob .toggle--btn:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 60%;
|
||||
transform: translateY(-50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #f1f1f1;
|
||||
box-shadow: 0 4px 10px 0 #999, inset 0 10px 10px 8px rgba(241, 241, 241, 0.6), inset 0 0 8px 0px #333, inset 0 0 0 13px #ccc, inset 0 0 0 14px #f1f1f1;
|
||||
text-indent: -100%;
|
||||
}
|
||||
.toggle--knob .toggle--feature {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 40px;
|
||||
text-shadow: 0 1px 2px #666;
|
||||
}
|
||||
.toggle--knob .toggle--feature:before, .toggle--knob .toggle--feature:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.toggle--knob .toggle--feature:before {
|
||||
content: attr(data-label-on);
|
||||
left: 20%;
|
||||
}
|
||||
.toggle--knob .toggle--feature:after {
|
||||
content: attr(data-label-off);
|
||||
right: -60%;
|
||||
}
|
||||
.toggle--knob .toggle--checkbox:checked + .toggle--btn {
|
||||
background: #a2a2a2;
|
||||
box-shadow: inset 0 20px 40px -10px #7e7e7e;
|
||||
}
|
||||
.toggle--knob .toggle--checkbox:checked + .toggle--btn:before {
|
||||
left: 0;
|
||||
}
|
||||
.toggle--knob .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
|
||||
left: -60%;
|
||||
}
|
||||
.toggle--knob .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
Toggle - switch stylee
|
||||
===================================================== */
|
||||
.toggle--switch .toggle--btn {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 44px;
|
||||
font-family: 'PT Sans', Sans Serif;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #a4bf4d 0%, #a4bf4d 50%, #ca5046 50%, #ca5046 200%);
|
||||
background-position: -80px 0;
|
||||
background-size: 200% 100%;
|
||||
box-shadow: inset 0 0px 22px -8px #111;
|
||||
}
|
||||
.toggle--switch .toggle--btn, .toggle--switch .toggle--btn:before {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.toggle--switch .toggle--btn:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 52px;
|
||||
height: 44px;
|
||||
border: 2px solid #202027;
|
||||
background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
|
||||
background-color: #2b2e3a;
|
||||
background-size: 5px 5px;
|
||||
text-indent: -100%;
|
||||
}
|
||||
.toggle--switch .toggle--feature {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 44px;
|
||||
text-shadow: 0 1px 2px #666;
|
||||
}
|
||||
.toggle--switch .toggle--feature:before, .toggle--switch .toggle--feature:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.toggle--switch .toggle--feature:before {
|
||||
content: attr(data-label-on);
|
||||
left: -60%;
|
||||
}
|
||||
.toggle--switch .toggle--feature:after {
|
||||
content: attr(data-label-off);
|
||||
right: 16%;
|
||||
}
|
||||
.toggle--switch .toggle--checkbox:checked + .toggle--btn {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.toggle--switch .toggle--checkbox:checked + .toggle--btn:before {
|
||||
left: calc(100% - 52px);
|
||||
}
|
||||
.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
|
||||
left: 20%;
|
||||
}
|
||||
.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
|
||||
right: -60%;
|
||||
}
|
||||
|
||||
/* ======================================================
|
||||
Push button toggle
|
||||
====================================================== */
|
||||
.toggle--push .toggle--btn {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #f9f8f6;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 5px 10px 0px #333, 0 15px 20px 0px #cccccc;
|
||||
}
|
||||
.toggle--push .toggle--btn, .toggle--push .toggle--btn:before, .toggle--push .toggle--btn:after {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
.toggle--push .toggle--btn:before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 22.72727px;
|
||||
height: 22.72727px;
|
||||
border-radius: 50%;
|
||||
background-color: #FF9900;
|
||||
box-shadow: inset 0 0 0 5px #ccc, inset 0 0 0 14px #f9f8f6;
|
||||
}
|
||||
.toggle--push .toggle--btn:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
background-color: #ccc;
|
||||
box-shadow: 0 0 0 2.5px #f9f8f6;
|
||||
}
|
||||
.toggle--push .toggle--btn:hover:before {
|
||||
box-shadow: inset 0 0 0 5px #b3b3b3, inset 0 0 0 14px #f9f8f6;
|
||||
}
|
||||
.toggle--push .toggle--btn:hover:after {
|
||||
background-color: #b3b3b3;
|
||||
}
|
||||
.toggle--push .toggle--checkbox:checked + .toggle--btn {
|
||||
box-shadow: 0 2px 5px 0px gray, 0 15px 20px 0px transparent;
|
||||
}
|
||||
.toggle--push .toggle--checkbox:checked + .toggle--btn:before {
|
||||
box-shadow: inset 0 0 0 5px #FF9900, inset 0 0 0 14px #f9f8f6;
|
||||
}
|
||||
.toggle--push .toggle--checkbox:checked + .toggle--btn:after {
|
||||
background-color: #FF9900;
|
||||
}
|
||||
|
||||
.toggle--push--glow {
|
||||
background: #111;
|
||||
padding: 50px 0;
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
.toggle--push--glow .toggle--btn {
|
||||
background-color: #dfdfdf;
|
||||
box-shadow: 0 5px 10px 0px #333, 0 0 0 3px #444444, 0 0 8px 2px transparent, 0 0 0 6px #919191;
|
||||
}
|
||||
.toggle--push--glow .toggle--btn:before {
|
||||
box-shadow: inset 0 0 0 5px #aaa, inset 0 0 0 14px #dfdfdf;
|
||||
}
|
||||
.toggle--push--glow .toggle--btn:after {
|
||||
background-color: #aaa;
|
||||
box-shadow: 0 0 0 2.5px #dfdfdf;
|
||||
}
|
||||
.toggle--push--glow .toggle--btn:hover:before {
|
||||
box-shadow: inset 0 0 0 5px #777777, inset 0 0 0 14px #dfdfdf;
|
||||
}
|
||||
.toggle--push--glow .toggle--btn:hover:after {
|
||||
background-color: #777777;
|
||||
}
|
||||
.toggle--push--glow .toggle--checkbox:checked + .toggle--btn {
|
||||
box-shadow: 0 0px 8px 0 #0072ad, 0 0 0 3px #0094e0, 0 0 30px 0 #0094e0, 0 0 0 6px #777777;
|
||||
}
|
||||
.toggle--push--glow .toggle--checkbox:checked + .toggle--btn:before {
|
||||
box-shadow: inset 0 0 0 5px #0094e0, inset 0 0 0 14px #dfdfdf;
|
||||
}
|
||||
.toggle--push--glow .toggle--checkbox:checked + .toggle--btn:after {
|
||||
background-color: #0094e0;
|
||||
}
|
||||
|
||||
/* ======================================================
|
||||
Neon toggle
|
||||
====================================================== */
|
||||
@keyframes neon {
|
||||
0% {
|
||||
text-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 25px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 90px #FF9900, 0 0 90px #FF9900;
|
||||
}
|
||||
100% {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900;
|
||||
}
|
||||
}
|
||||
.toggle--neon {
|
||||
background-color: #222;
|
||||
margin-top: 0;
|
||||
padding: 50px 0;
|
||||
}
|
||||
.toggle--neon .toggle--btn {
|
||||
font-family: Audiowide;
|
||||
text-transform: uppercase;
|
||||
font-size: 6.2em;
|
||||
color: #333;
|
||||
text-shadow: 0 0 10px transparent, 0 0 15px transparent, 0 0 25px transparent, 0 0 40px transparent, 0 0 70px transparent, 0 0 90px transparent, 0 0 90px transparent;
|
||||
}
|
||||
.toggle--neon .toggle--btn:before, .toggle--neon .toggle--btn:after {
|
||||
display: inline-block;
|
||||
margin: 0 20px;
|
||||
transition: all 220ms ease-in-out;
|
||||
}
|
||||
.toggle--neon .toggle--btn:before {
|
||||
content: attr(data-label-off);
|
||||
animation: neon 1.5s ease-in-out infinite alternate;
|
||||
animation-delay: 90ms;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
.toggle--neon .toggle--btn:after {
|
||||
content: attr(data-label-on);
|
||||
}
|
||||
.toggle--neon .toggle--checkbox:checked + .toggle--btn:before {
|
||||
animation: none;
|
||||
color: #333;
|
||||
}
|
||||
.toggle--neon .toggle--checkbox:checked + .toggle--btn:after {
|
||||
animation: neon 1.5s ease-in-out infinite alternate;
|
||||
animation-delay: 90ms;
|
||||
color: #f1f1f1;
|
||||
}
|
||||
3
html/main/JustGage.js
Normal file
3
html/main/JustGage.js
Normal file
File diff suppressed because one or more lines are too long
2
html/main/jquery-1.8.3.min.js
vendored
Normal file
2
html/main/jquery-1.8.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/main/reconnecting-websocket.min.js
vendored
Normal file
1
html/main/reconnecting-websocket.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
!function(a,b){"function"==typeof define&&define.amd?define([],b):"undefined"!=typeof module&&module.exports?module.exports=b():a.ReconnectingWebSocket=b()}(this,function(){function a(b,c,d){function l(a,b){var c=document.createEvent("CustomEvent");return c.initCustomEvent(a,!1,!1,b),c}var e={debug:!1,automaticOpen:!0,reconnectInterval:1e3,maxReconnectInterval:3e4,reconnectDecay:1.5,timeoutInterval:2e3};d||(d={});for(var f in e)this[f]="undefined"!=typeof d[f]?d[f]:e[f];this.url=b,this.reconnectAttempts=0,this.readyState=WebSocket.CONNECTING,this.protocol=null;var h,g=this,i=!1,j=!1,k=document.createElement("div");k.addEventListener("open",function(a){g.onopen(a)}),k.addEventListener("close",function(a){g.onclose(a)}),k.addEventListener("connecting",function(a){g.onconnecting(a)}),k.addEventListener("message",function(a){g.onmessage(a)}),k.addEventListener("error",function(a){g.onerror(a)}),this.addEventListener=k.addEventListener.bind(k),this.removeEventListener=k.removeEventListener.bind(k),this.dispatchEvent=k.dispatchEvent.bind(k),this.open=function(b){h=new WebSocket(g.url,c||[]),b||k.dispatchEvent(l("connecting")),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","attempt-connect",g.url);var d=h,e=setTimeout(function(){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","connection-timeout",g.url),j=!0,d.close(),j=!1},g.timeoutInterval);h.onopen=function(){clearTimeout(e),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onopen",g.url),g.protocol=h.protocol,g.readyState=WebSocket.OPEN,g.reconnectAttempts=0;var d=l("open");d.isReconnect=b,b=!1,k.dispatchEvent(d)},h.onclose=function(c){if(clearTimeout(e),h=null,i)g.readyState=WebSocket.CLOSED,k.dispatchEvent(l("close"));else{g.readyState=WebSocket.CONNECTING;var d=l("connecting");d.code=c.code,d.reason=c.reason,d.wasClean=c.wasClean,k.dispatchEvent(d),b||j||((g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onclose",g.url),k.dispatchEvent(l("close")));var e=g.reconnectInterval*Math.pow(g.reconnectDecay,g.reconnectAttempts);setTimeout(function(){g.reconnectAttempts++,g.open(!0)},e>g.maxReconnectInterval?g.maxReconnectInterval:e)}},h.onmessage=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onmessage",g.url,b.data);var c=l("message");c.data=b.data,k.dispatchEvent(c)},h.onerror=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onerror",g.url,b),k.dispatchEvent(l("error"))}},1==this.automaticOpen&&this.open(!1),this.send=function(b){if(h)return(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","send",g.url,b),h.send(b);throw"INVALID_STATE_ERR : Pausing to reconnect websocket"},this.close=function(a,b){"undefined"==typeof a&&(a=1e3),i=!0,h&&h.close(a,b)},this.refresh=function(){h&&h.close()}}return a.prototype.onopen=function(){},a.prototype.onclose=function(){},a.prototype.onconnecting=function(){},a.prototype.onmessage=function(){},a.prototype.onerror=function(){},a.debugAll=!1,a.CONNECTING=WebSocket.CONNECTING,a.OPEN=WebSocket.OPEN,a.CLOSING=WebSocket.CLOSING,a.CLOSED=WebSocket.CLOSED,a});
|
||||
7
html/readme.txt
Normal file
7
html/readme.txt
Normal file
@@ -0,0 +1,7 @@
|
||||
<EFBFBD><EFBFBD>
|
||||
|
||||
<EFBFBD>ֽ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>V5 FW<46><57><EFBFBD>Ը<EFBFBD><D4B8>ġ<EFBFBD>
|
||||
|
||||
<EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||||
|
||||
ҳ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʱˢ<EFBFBD>¿<EFBFBD><EFBFBD><EFBFBD>״̬<EFBFBD>Ĺ<EFBFBD><EFBFBD><EFBFBD>
|
||||
921
html/scss/style.scss
Normal file
921
html/scss/style.scss
Normal file
@@ -0,0 +1,921 @@
|
||||
// Define the fonts used in the Pen
|
||||
@import url(https://fonts.googleapis.com/css?family=Francois+One);
|
||||
@import url(https://fonts.googleapis.com/css?family=PT+Sans);
|
||||
|
||||
@font-face {
|
||||
font-family: 'Audiowide';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
|
||||
}
|
||||
|
||||
|
||||
$color-bg: #fff; //background for the demo
|
||||
|
||||
body {
|
||||
font-size: 62.5%;
|
||||
background-color: $color-bg;
|
||||
margin: 10px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'PT Sans', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.4em;
|
||||
background-color: rgba(41, 41, 41, 1);
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
text-transform: none;
|
||||
color: #aaa;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.headingOuter {
|
||||
background: #f1f1f1;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
border-top: 1px solid #333;
|
||||
border-bottom: 1px solid #333;
|
||||
|
||||
font-size: 1.6em;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
h1 + & {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
Some defaults across all toggle demos
|
||||
===================================================== */
|
||||
|
||||
.toggle {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
user-select: none;
|
||||
}
|
||||
.toggle--checkbox {
|
||||
display: none;
|
||||
}
|
||||
.toggle--btn {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
font-size: 1.4em;
|
||||
|
||||
transition: all 350ms ease-in;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle--btn,
|
||||
.toggle--checkbox,
|
||||
.toggle--feature {
|
||||
&,
|
||||
&:before,
|
||||
&:after {
|
||||
transition: all 250ms ease-in;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ===================================================
|
||||
Day/Night and Gender toggle buttons
|
||||
=================================================== */
|
||||
|
||||
$toggleHeight: 70px;
|
||||
$toggleWidth: 125px;
|
||||
$borderWidth: 5px;
|
||||
$toggleBtnRadius: $toggleHeight - 14px;
|
||||
|
||||
$bgColor--night: #3c4145;
|
||||
$borderColor--night: #1c1c1c;
|
||||
$toggleBtn-bgColor--night: #fff;
|
||||
$toggleBtn-borderColor--night: #e3e3c7;
|
||||
|
||||
$bgColor--day: #9ee3fb;
|
||||
$borderColor--day: #86c3d7;
|
||||
$toggleBtn-bgColor--day: #ffdf6d;
|
||||
$toggleBtn-borderColor--day: #e1c348;
|
||||
|
||||
$cloud-borderColor: #d3d3d3;
|
||||
$cloud-bgColor: #fff;
|
||||
|
||||
.toggle--daynight,
|
||||
.toggle--like {
|
||||
.toggle--btn {
|
||||
position: relative;
|
||||
height: $toggleHeight;
|
||||
width: $toggleWidth;
|
||||
border-radius: $toggleHeight;
|
||||
|
||||
//toggle button
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
width: $toggleBtnRadius;
|
||||
height: $toggleBtnRadius;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle--daynight {
|
||||
.toggle--btn {
|
||||
border: $borderWidth solid $borderColor--night;
|
||||
background-color: $bgColor--night;
|
||||
|
||||
//toggle button
|
||||
&:before {
|
||||
background-color: $toggleBtn-bgColor--night;
|
||||
border: $borderWidth solid $toggleBtn-borderColor--night;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 62%;
|
||||
left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 20px;
|
||||
z-index: 10;
|
||||
width: $toggleBtnRadius / 5;
|
||||
height: $toggleBtnRadius / 5;
|
||||
opacity: 0;
|
||||
background-color: $cloud-bgColor;
|
||||
border-radius: 50%;
|
||||
|
||||
//crazy ass box-shadow to make the cloud
|
||||
box-shadow: $cloud-bgColor 0 0,
|
||||
$cloud-bgColor 3px 0,
|
||||
$cloud-bgColor 6px 0,
|
||||
$cloud-bgColor 9px 0,
|
||||
$cloud-bgColor 11px 0,
|
||||
$cloud-bgColor 14px 0,
|
||||
$cloud-bgColor 16px 0,
|
||||
$cloud-bgColor 21px -1px 0 1px,
|
||||
$cloud-bgColor 16px -7px 0 -2px,
|
||||
$cloud-bgColor 7px -7px 0 1px,
|
||||
|
||||
$cloud-borderColor 0 0 0 4px,
|
||||
$cloud-borderColor 6px 0 0 4px,
|
||||
$cloud-borderColor 11px 0 0 4px,
|
||||
$cloud-borderColor 16px 0 0 4px,
|
||||
$cloud-borderColor 21px -1px 0 5px,
|
||||
$cloud-borderColor 16px -7px 0 1px,
|
||||
$cloud-borderColor 7px -7px 0 5px;
|
||||
|
||||
transition: opacity 100ms ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes starry_star {
|
||||
50% {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
box-shadow: #fff 30px -3px 0 0,
|
||||
#fff 12px 10px 0 -1px,
|
||||
rgba(255,255,255,0.1) 38px 18px 0 1px,
|
||||
#fff 32px 34px 0 0,
|
||||
rgba(255,255,255,0.1) 20px 24px 0 -1.5px,
|
||||
#fff 5px 38px 0 1px;
|
||||
}
|
||||
}
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 100;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
55% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
75% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
opacity: 100;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
//stars
|
||||
.toggle--feature {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 52.5%;
|
||||
z-index: 20;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
|
||||
box-shadow: rgba(255,255,255,0.1) 30px -3px 0 0,
|
||||
rgba(255,255,255,0.1) 12px 10px 0 -1px,
|
||||
#fff 38px 18px 0 1px,
|
||||
rgba(255,255,255,0.1) 32px 34px 0 0,
|
||||
#fff 20px 24px 0 -1.5px,
|
||||
rgba(255,255,255,0.1) 5px 38px 0 1px;
|
||||
|
||||
animation: starry_star 5s ease-in-out infinite;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -25px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: $toggleBtn-bgColor--night;
|
||||
border-radius: 50%;
|
||||
border: 5px solid $toggleBtn-borderColor--night;
|
||||
|
||||
box-shadow: $toggleBtn-borderColor--night -28px 0 0 -3px,
|
||||
$toggleBtn-borderColor--night -8px 24px 0 -2px;
|
||||
|
||||
transform-origin: -6px 130%;
|
||||
}
|
||||
}
|
||||
|
||||
//what happens once checkbox is checked
|
||||
.toggle--checkbox:checked {
|
||||
& + .toggle--btn {
|
||||
background-color: $bgColor--day;
|
||||
border: $borderWidth solid $borderColor--day;
|
||||
|
||||
&:before {
|
||||
left: $toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 4px;
|
||||
background-color: $toggleBtn-bgColor--day;
|
||||
border: $borderWidth solid $toggleBtn-borderColor--day;
|
||||
}
|
||||
&:after {
|
||||
opacity: 100;
|
||||
animation-name: bounceIn;
|
||||
animation-duration: 0.60s;
|
||||
animation-delay: 0.10s;
|
||||
animation-fill-mode: backwards;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
> .toggle--feature {
|
||||
opacity: 0;
|
||||
box-shadow: rgba(255,255,255,0.1) 30px -3px 0 -4px,
|
||||
rgba(255,255,255,0.1) 12px 10px 0 -5px,
|
||||
#fff 38px 18px 0 -3px,
|
||||
rgba(255,255,255,0.1) 32px 34px 0 -4px,
|
||||
#fff 20px 24px 0 -5.5px,
|
||||
rgba(255,255,255,0.1) 5px 38px 0 -3px;
|
||||
animation: none;
|
||||
|
||||
&:before {
|
||||
left: 25px;
|
||||
transform: rotate(70deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================================================
|
||||
Like specific styling
|
||||
================================================== */
|
||||
|
||||
$bgColor--sad: #3498db;
|
||||
$borderColor--sad: #0865B0;
|
||||
|
||||
$bgColor--happy: #e25d5d;
|
||||
$borderColor--happy: #AD1000;
|
||||
|
||||
$emojiWidth: 36px;
|
||||
$emojiBgColor: #f2dd68;
|
||||
$emojiBorderColor: #e5ce5e;
|
||||
$emojiColor: #995710;
|
||||
$emojiColorAlt: #d8aa2b;
|
||||
|
||||
$toggleFeaturePosition--sad: ($toggleBtnRadius/2) - 14;
|
||||
$toggleFeaturePosition--happy: 53px;
|
||||
|
||||
.toggle--like {
|
||||
position: relative;
|
||||
|
||||
.toggle--btn {
|
||||
border: $borderWidth solid $borderColor--sad;
|
||||
background-color: $bgColor--sad;
|
||||
|
||||
//toggle button
|
||||
&:before {
|
||||
background-color: $emojiBgColor;
|
||||
border: $borderWidth solid $emojiBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle--feature {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 32%;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: $emojiColor;
|
||||
box-shadow: ($emojiWidth - 8) 0 0 0 $emojiColor;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 11px;
|
||||
width: $emojiWidth;
|
||||
height: 17px;
|
||||
background-color: $emojiColor;
|
||||
|
||||
border-radius: $emojiWidth $emojiWidth 0 0;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
top: 21px;
|
||||
width: 17px;
|
||||
height: 7px;
|
||||
background-color: $emojiColorAlt;
|
||||
|
||||
border-radius: 17px 17px 0 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//what happens once checkbox is checked
|
||||
.toggle--checkbox:checked {
|
||||
& + .toggle--btn {
|
||||
background-color: $bgColor--happy;
|
||||
border: $borderWidth solid $borderColor--happy;
|
||||
|
||||
//toggle button
|
||||
&:before {
|
||||
transform: translate($toggleWidth - ($toggleBtnRadius) - ($borderWidth * 2) - 8px, 0);
|
||||
}
|
||||
|
||||
& .toggle--feature {
|
||||
transform: translate($toggleFeaturePosition--happy, 0);
|
||||
|
||||
&:before {
|
||||
border-radius: 0 0 $emojiWidth $emojiWidth;
|
||||
top: 11px;
|
||||
}
|
||||
&:after {
|
||||
top: 21px;
|
||||
border-radius: 50%/50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ====================================================
|
||||
Text toggle button
|
||||
==================================================== */
|
||||
|
||||
$toggleHeight: 70px;
|
||||
$toggleWidth: 180px;
|
||||
|
||||
$toggle-borderColor: #8c8c8c;
|
||||
$toggle-shadowColor: #999;
|
||||
|
||||
$activeTextColor: #db4c00;
|
||||
$inactiveTextColor: #999;
|
||||
|
||||
.toggle--text {
|
||||
.toggle--btn {
|
||||
position: relative;
|
||||
width: $toggleWidth;
|
||||
height: $toggleHeight;
|
||||
font-family: 'PT Sans', Sans Serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
||||
border-radius: 40px;
|
||||
border: 1px solid $toggle-borderColor;
|
||||
border-right: 2px solid $toggle-borderColor;
|
||||
|
||||
box-shadow: inset ($toggleWidth/2) 0 10px rgba(255, 255, 255, 0.6),
|
||||
inset -3px 3px 18px -2px $toggle-borderColor,
|
||||
0 0 15px #ccc,
|
||||
|
||||
0px -5px 16px 1px #ddd,
|
||||
-5px -5px 16px 1px #ddd,
|
||||
5px -5px 16px 1px #ddd,
|
||||
-5px -5px 16px 1px #ddd,
|
||||
5px -5px 16px 1px #ddd,
|
||||
|
||||
17px 9px 0 -5px rgba(255, 255, 255, 0.6),
|
||||
-3px 6px 12px -7px #000,
|
||||
|
||||
|
||||
//outlines
|
||||
0 0 0 14px #fff,
|
||||
0 0 0 15px $toggle-shadowColor;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&:before {
|
||||
content: attr(data-label-on);
|
||||
left: 15%;
|
||||
color: $inactiveTextColor;
|
||||
|
||||
|
||||
}
|
||||
&:after {
|
||||
content: attr(data-label-off);
|
||||
right: 15%;
|
||||
color: $activeTextColor;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.toggle--checkbox:checked {
|
||||
& + .toggle--btn {
|
||||
border-left: 2px solid $toggle-borderColor;
|
||||
border-right: 1px solid $toggle-borderColor;
|
||||
|
||||
box-shadow: inset ($toggleWidth/2) 0 10px rgba(255, 255, 255, 0),
|
||||
inset 3px 3px 18px -2px $toggle-borderColor,
|
||||
0 0 15px #ccc,
|
||||
|
||||
0px -5px 16px 1px #ddd,
|
||||
-5px -5px 16px 1px #ddd,
|
||||
5px -5px 16px 1px #ddd,
|
||||
-5px -5px 16px 1px #ddd,
|
||||
5px -5px 16px 1px #ddd,
|
||||
|
||||
-17px 9px 0 -5px rgba(255, 255, 255, 0.6),
|
||||
3px 6px 12px -7px #000,
|
||||
|
||||
|
||||
//outlines
|
||||
0 0 0 14px #fff,
|
||||
0 0 0 15px $toggle-shadowColor;
|
||||
|
||||
|
||||
&:before {
|
||||
color: $activeTextColor;
|
||||
|
||||
}
|
||||
&:after {
|
||||
color: $inactiveTextColor;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* =====================================================
|
||||
Toggle - knob button style
|
||||
===================================================== */
|
||||
|
||||
$toggleHeight: 40px;
|
||||
$toggleWidth: 120px;
|
||||
|
||||
$toggleBtnRadius: 48px;
|
||||
$toggleBtnColor: #f1f1f1;
|
||||
|
||||
$toggle-bgColor--inactive: #a2a2a2;
|
||||
$toggle-bgColor--active: #a4bf4d;
|
||||
|
||||
$toggle-textColor: #fff;
|
||||
|
||||
.toggle--knob {
|
||||
|
||||
& .toggle--btn {
|
||||
position: relative;
|
||||
width: $toggleWidth;
|
||||
height: $toggleHeight;
|
||||
|
||||
font-family: 'PT Sans', Sans Serif;
|
||||
text-transform: uppercase;
|
||||
color: $toggle-textColor;
|
||||
|
||||
background: $toggle-bgColor--active;
|
||||
box-shadow: inset 0 20px 40px -10px #7b9d25;
|
||||
border-radius: 40px;
|
||||
|
||||
//contains the actual knob part of the button and the 'on' text
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 60%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: $toggleBtnRadius;
|
||||
height: $toggleBtnRadius;
|
||||
border-radius: 50%;
|
||||
background: $toggleBtnColor;
|
||||
box-shadow: 0 4px 10px 0 #999,
|
||||
inset 0 10px 10px 8px rgba($toggleBtnColor, 0.6),
|
||||
inset 0 0 8px 0px #333,
|
||||
inset 0 0 0 13px #ccc,
|
||||
inset 0 0 0 14px $toggleBtnColor;
|
||||
|
||||
text-indent: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .toggle--feature {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: $toggleHeight;
|
||||
text-shadow: 0 1px 2px #666;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&:before {
|
||||
content: attr(data-label-on);
|
||||
left: 20%;
|
||||
}
|
||||
&:after {
|
||||
content: attr(data-label-off);
|
||||
right: -60%;
|
||||
}
|
||||
}
|
||||
|
||||
& .toggle--checkbox {
|
||||
&:checked {
|
||||
& + .toggle--btn {
|
||||
background: $toggle-bgColor--inactive;
|
||||
box-shadow: inset 0 20px 40px -10px #7e7e7e;
|
||||
|
||||
&:before { left: 0; }
|
||||
|
||||
& .toggle--feature {
|
||||
&:before { left: -60%; }
|
||||
&:after { right: 20%; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* =====================================================
|
||||
Toggle - switch stylee
|
||||
===================================================== */
|
||||
|
||||
$toggleHeight: 44px;
|
||||
$toggleWidth: 120px;
|
||||
|
||||
$toggleBtnWidth: 52px;
|
||||
$toggleBtnColor: #2b2e3a;
|
||||
|
||||
$toggle-bgColor--inactive: #ca5046;
|
||||
$toggle-bgColor--active: #a4bf4d;
|
||||
|
||||
$toggle-textColor: #fff;
|
||||
|
||||
.toggle--switch {
|
||||
|
||||
& .toggle--btn {
|
||||
position: relative;
|
||||
width: $toggleWidth;
|
||||
height: $toggleHeight;
|
||||
|
||||
font-family: 'PT Sans', Sans Serif;
|
||||
text-transform: uppercase;
|
||||
color: $toggle-textColor;
|
||||
|
||||
// background: $toggle-bgColor--inactive;
|
||||
|
||||
background: linear-gradient(90deg, $toggle-bgColor--active 0%, $toggle-bgColor--active 50%, $toggle-bgColor--inactive 50%, $toggle-bgColor--inactive 200%);
|
||||
background-position: -80px 0;
|
||||
background-size: 200% 100%;
|
||||
box-shadow: inset 0 0px 22px -8px #111;
|
||||
|
||||
|
||||
&,
|
||||
&:before {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
//contains the actual knob part of the button and the 'on' text
|
||||
&:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
|
||||
width: $toggleBtnWidth;
|
||||
height: $toggleHeight;
|
||||
border: 2px solid #202027;
|
||||
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.15) 100%);
|
||||
background-color: $toggleBtnColor;
|
||||
|
||||
background-size: 5px 5px;
|
||||
|
||||
text-indent: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
& .toggle--feature {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: $toggleHeight;
|
||||
text-shadow: 0 1px 2px #666;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&:before {
|
||||
content: attr(data-label-on);
|
||||
left: -60%;
|
||||
}
|
||||
&:after {
|
||||
content: attr(data-label-off);
|
||||
right: 16%;
|
||||
}
|
||||
}
|
||||
|
||||
& .toggle--checkbox {
|
||||
&:checked {
|
||||
& + .toggle--btn {
|
||||
// background: $toggle-bgColor--active;
|
||||
|
||||
background-position: 0 0;
|
||||
|
||||
&:before { left: calc(100% - #{$toggleBtnWidth}); }
|
||||
|
||||
& .toggle--feature {
|
||||
&:before { left: 20%; }
|
||||
&:after { right: -60%; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ======================================================
|
||||
Push button toggle
|
||||
====================================================== */
|
||||
|
||||
$toggleBtnRadius: 50px;
|
||||
$toggleBtnColor: #f9f8f6;
|
||||
|
||||
$toggleShadowColor: #333;
|
||||
$toggleActiveColor: #FF9900;
|
||||
$toggleInactiveColor: #ccc;
|
||||
|
||||
.toggle--push {
|
||||
& .toggle--btn {
|
||||
position: relative;
|
||||
width: $toggleBtnRadius;
|
||||
height: $toggleBtnRadius;
|
||||
background-color: $toggleBtnColor;
|
||||
border-radius: 50%;
|
||||
|
||||
box-shadow: 0 5px 10px 0px $toggleShadowColor,
|
||||
0 15px 20px 0px lighten($toggleShadowColor, 60%);
|
||||
|
||||
&,
|
||||
&:before,
|
||||
&:after {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: $toggleBtnRadius / 2.2;
|
||||
height: $toggleBtnRadius / 2.2;
|
||||
border-radius: 50%;
|
||||
background-color: $toggleActiveColor;
|
||||
|
||||
box-shadow: inset 0 0 0 5px $toggleInactiveColor,
|
||||
inset 0 0 0 14px $toggleBtnColor;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
background-color: $toggleInactiveColor;
|
||||
box-shadow: 0 0 0 2.5px $toggleBtnColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
box-shadow: inset 0 0 0 5px darken($toggleInactiveColor, 10%),
|
||||
inset 0 0 0 14px $toggleBtnColor;
|
||||
}
|
||||
&:after {
|
||||
background-color: darken($toggleInactiveColor, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .toggle--checkbox {
|
||||
&:checked {
|
||||
& + .toggle--btn {
|
||||
box-shadow: 0 2px 5px 0px lighten($toggleShadowColor, 30%),
|
||||
0 15px 20px 0px transparent;
|
||||
|
||||
&:before {
|
||||
box-shadow: inset 0 0 0 5px $toggleActiveColor,
|
||||
inset 0 0 0 14px $toggleBtnColor;
|
||||
}
|
||||
&:after {
|
||||
background-color: $toggleActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$toggleBgColor: #111;
|
||||
$toggleBtnColor: #dfdfdf;
|
||||
|
||||
$toggleActiveColor: #0094e0;
|
||||
$toggleInactiveColor: #aaa;
|
||||
|
||||
.toggle--push--glow {
|
||||
background: $toggleBgColor;
|
||||
padding: 50px 0;
|
||||
margin-bottom: -50px;
|
||||
|
||||
& .toggle--btn {
|
||||
background-color: $toggleBtnColor;
|
||||
box-shadow: 0 5px 10px 0px $toggleShadowColor,
|
||||
0 0 0 3px lighten($toggleBgColor, 20%),
|
||||
0 0 8px 2px transparent,
|
||||
0 0 0 6px lighten($toggleBgColor, 50%);
|
||||
|
||||
&:before {
|
||||
box-shadow: inset 0 0 0 5px $toggleInactiveColor,
|
||||
inset 0 0 0 14px $toggleBtnColor;
|
||||
}
|
||||
&:after {
|
||||
background-color: $toggleInactiveColor;
|
||||
box-shadow: 0 0 0 2.5px $toggleBtnColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
box-shadow: inset 0 0 0 5px darken($toggleInactiveColor, 20%),
|
||||
inset 0 0 0 14px $toggleBtnColor;
|
||||
}
|
||||
&:after {
|
||||
background-color: darken($toggleInactiveColor, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .toggle--checkbox {
|
||||
|
||||
&:checked {
|
||||
& + .toggle--btn {
|
||||
box-shadow: 0 0px 8px 0 darken($toggleActiveColor, 10%),
|
||||
0 0 0 3px $toggleActiveColor,
|
||||
0 0 30px 0 $toggleActiveColor,
|
||||
0 0 0 6px lighten($toggleBgColor, 40%);
|
||||
|
||||
&:before {
|
||||
box-shadow: inset 0 0 0 5px $toggleActiveColor,
|
||||
inset 0 0 0 14px $toggleBtnColor;
|
||||
}
|
||||
&:after {
|
||||
background-color: $toggleActiveColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ======================================================
|
||||
Neon toggle
|
||||
====================================================== */
|
||||
|
||||
@keyframes neon {
|
||||
0% {
|
||||
text-shadow: 0 0 10px #fff,
|
||||
0 0 15px #fff,
|
||||
0 0 25px #fff,
|
||||
0 0 40px #FF9900,
|
||||
0 0 70px #FF9900,
|
||||
0 0 90px #FF9900,
|
||||
0 0 90px #FF9900;
|
||||
}
|
||||
100% {
|
||||
text-shadow: 0 0 5px #fff,
|
||||
0 0 10px #fff,
|
||||
0 0 15px #fff,
|
||||
0 0 20px #FF9900,
|
||||
0 0 35px #FF9900,
|
||||
0 0 40px #FF9900,
|
||||
0 0 50px #FF9900;
|
||||
}
|
||||
}
|
||||
|
||||
$textColor--active: #f1f1f1;
|
||||
$textColor--inactive: #333;
|
||||
|
||||
|
||||
.toggle--neon {
|
||||
background-color: #222;
|
||||
margin-top: 0;
|
||||
padding: 50px 0;
|
||||
|
||||
& .toggle--btn {
|
||||
font-family: Audiowide;
|
||||
text-transform: uppercase;
|
||||
font-size: 6.2em;
|
||||
color: $textColor--inactive;
|
||||
|
||||
// text-shadow: -1px -1px 1px #111, 1px 1px 1px #444;
|
||||
|
||||
text-shadow: 0 0 10px transparent,
|
||||
0 0 15px transparent,
|
||||
0 0 25px transparent,
|
||||
0 0 40px transparent,
|
||||
0 0 70px transparent,
|
||||
0 0 90px transparent,
|
||||
0 0 90px transparent;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: inline-block;
|
||||
margin: 0 20px;
|
||||
transition: all 220ms ease-in-out;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: attr(data-label-off);
|
||||
animation: neon 1.5s ease-in-out infinite alternate;
|
||||
animation-delay: 90ms;
|
||||
color: $textColor--active;
|
||||
}
|
||||
&:after {
|
||||
content: attr(data-label-on);
|
||||
}
|
||||
}
|
||||
|
||||
& .toggle--checkbox {
|
||||
&:checked {
|
||||
& + .toggle--btn {
|
||||
&:before {
|
||||
animation: none;
|
||||
color: $textColor--inactive;
|
||||
}
|
||||
&:after {
|
||||
animation: neon 1.5s ease-in-out infinite alternate;
|
||||
animation-delay: 90ms;
|
||||
color: $textColor--active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
206
html/switch.htm
Normal file
206
html/switch.htm
Normal file
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=480" />
|
||||
<title>Websocket开关</title>
|
||||
<link rel="stylesheet" href="css/normalize.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<SCRIPT src="./main/jquery-1.8.3.min.js"></SCRIPT>
|
||||
<script src="./main/reconnecting-websocket.min.js" ></script>
|
||||
<SCRIPT src="main/JustGage.js"></SCRIPT>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Websocket 开关控制器<a href="www.miuser.net" target="blank"></a></h1>
|
||||
<!-- Inspiration – https://dribbble.com/shots/525358-Buttons-Lights-Shadows?list=searches&tag=toggle_button&offset=10 -->
|
||||
<h2 class="headingOuter"><div align="center" id="online" >点击控制电源插座</div></h2>
|
||||
<div class="toggle toggle--knob">
|
||||
<input type="checkbox" checked onclick="setSwitch()" id="toggle--knob" class="toggle--checkbox">
|
||||
<label class="toggle--btn" for="toggle--knob"><span class="toggle--feature" data-label-on="on" data-label-off="off"></span></label>
|
||||
</div>
|
||||
<h2><div align="center" id="device_online" >设备状态未知</div></h2>
|
||||
<h2><div align="center" id="ID" >ID:0000000000 </div><div align="center" id="msg" >created by miuser</div></h2>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
var socket;
|
||||
var TTL;
|
||||
var remoteSWStatus
|
||||
// window.onerror=function (message) {
|
||||
// try{
|
||||
// console.log(message);
|
||||
// }
|
||||
// catch(ex){}
|
||||
// }
|
||||
var repeatLoopUpdateSwitch
|
||||
window.onload = function(){
|
||||
try{
|
||||
connect();
|
||||
var ID=getUrlParam("ID");
|
||||
$("#ID").html("ID:"+ID);
|
||||
document.getElementsByTagName("title")[0].innerText = "开关 ID:"+ID;
|
||||
repeatLoopUpdateSwitch=setInterval("LoopUpdateSwitch()",3000)
|
||||
}
|
||||
catch(ex){}
|
||||
}
|
||||
window.onbeforeunload = function() {
|
||||
try {
|
||||
socket.close();
|
||||
socket = null;
|
||||
} catch(ex) {}
|
||||
};
|
||||
//从URL参数栏取得参数
|
||||
function getUrlParam(name)
|
||||
{
|
||||
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
||||
var r = window.location.search.substr(1).match(reg); //匹配目标参数
|
||||
if (r!=null) return decodeURI(r[2]); return null; //返回参数值
|
||||
}
|
||||
|
||||
//连接websocket
|
||||
function connect() {
|
||||
var host = "ws://box.miuser.net:9000/";
|
||||
socket = new ReconnectingWebSocket(host);
|
||||
try {
|
||||
socket.onopen = function(msg) {
|
||||
//alert("连接成功！");
|
||||
$("#msg").html("服务器连接成功");
|
||||
HeartBeat();
|
||||
};
|
||||
socket.onmessage = function(rsv) {
|
||||
var respond=rsv.data.toString();
|
||||
var source=respond.substring(7,9);
|
||||
var len=parseInt(respond.substring(2,4));
|
||||
var content=respond.substring(39,len-2);
|
||||
if (source==="01")
|
||||
{
|
||||
if(content==="Air208ONOK")
|
||||
{
|
||||
|
||||
remoteSWStatus="ON"
|
||||
}
|
||||
if(content==="Air208OFFOK")
|
||||
{
|
||||
remoteSWStatus="OFF"
|
||||
}
|
||||
TTL=600;
|
||||
sendstatus="Done";
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = function(msg) {
|
||||
//alert("socket closed!")
|
||||
$("#msg").html("伺服器连接异常");
|
||||
};
|
||||
} catch(ex) {
|
||||
log(ex);
|
||||
}
|
||||
}
|
||||
function HeartBeat() {
|
||||
var ID=getUrlParam("ID");
|
||||
var MM=getUrlParam("MM");
|
||||
var msg = "004832A08"+ID+MM+"1234Air208STAT05";
|
||||
|
||||
socket.send(msg);
|
||||
|
||||
}
|
||||
setInterval("HeartBeat()",300000);
|
||||
|
||||
function OnlineDetect() {
|
||||
if (TTL>0)
|
||||
{
|
||||
$("#device_online").html("设备正常");
|
||||
}else
|
||||
{
|
||||
$("#device_online").html("设备离线");
|
||||
}
|
||||
TTL=TTL-1;
|
||||
|
||||
}
|
||||
setInterval("OnlineDetect()",1000);
|
||||
|
||||
function SendCMD(cardcmd)
|
||||
{
|
||||
var ID=getUrlParam("ID");
|
||||
var MM=getUrlParam("MM");
|
||||
if(cardcmd=="on") socket.send("004832A08"+ID+MM+"1234Air208ON05");
|
||||
if(cardcmd=="off") socket.send("004932A08"+ID+MM+"1234Air208OFF05");
|
||||
}
|
||||
|
||||
var repeatLoopExeCMD
|
||||
|
||||
function setSwitch()
|
||||
{
|
||||
sendstatus="";
|
||||
|
||||
//先执行一次，再每3s执行一次
|
||||
LoopExeCMD();
|
||||
repeatLoopExeCMD=setInterval("LoopExeCMD()",3000)
|
||||
|
||||
}
|
||||
|
||||
//发送指令，直到状态被同步
|
||||
function LoopExeCMD()
|
||||
{
|
||||
//设备不在线则不发送
|
||||
|
||||
if (TTL<0) return;
|
||||
//sw是反向的，true 是 关闭，false 是打开
|
||||
var sw=document.getElementById("toggle--knob")
|
||||
if ((sw.checked === true) &&(remoteSWStatus!="OFF"))
|
||||
{
|
||||
SendCMD("off");
|
||||
$("#online").html("正在更新开关状态...");
|
||||
remoteSWStatus="UNKNOWN";
|
||||
}
|
||||
else if ((sw.checked === false) &&(remoteSWStatus!="ON"))
|
||||
{
|
||||
SendCMD("on");
|
||||
$("#online").html("正在更新开关状态...");
|
||||
remoteSWStatus="UNKNOWN";
|
||||
}else
|
||||
{
|
||||
if (remoteSWStatus=="ON")
|
||||
{
|
||||
$("#online").html("开关状态：打开");
|
||||
|
||||
}
|
||||
if (remoteSWStatus=="OFF")
|
||||
{
|
||||
$("#online").html("开关状态：关闭");
|
||||
}
|
||||
clearInterval(repeatLoopExeCMD);
|
||||
}
|
||||
}
|
||||
//更新程序打开时的开关状态
|
||||
function LoopUpdateSwitch()
|
||||
{
|
||||
//设备不在线则不发送
|
||||
if (TTL<0) return;
|
||||
//sw是反向的，true 是 关闭，false 是打开
|
||||
var sw=document.getElementById("toggle--knob")
|
||||
if ((remoteSWStatus!="ON")&&(remoteSWStatus!="OFF"))
|
||||
{
|
||||
HeartBeat();
|
||||
$("#online").html("正在更新开关状态...");
|
||||
remoteSWStatus="UNKNOWN";
|
||||
}
|
||||
else
|
||||
{
|
||||
if (remoteSWStatus=="ON")
|
||||
{
|
||||
$("#online").html("开关状态：打开");
|
||||
$("#toggle--knob").attr("checked",false);
|
||||
}
|
||||
if (remoteSWStatus=="OFF")
|
||||
{
|
||||
$("#online").html("开关状态：关闭");
|
||||
$("#toggle--knob").attr("checked",true);
|
||||
}
|
||||
clearInterval(repeatLoopUpdateSwitch);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user