forked from community/product-iots
charithag
9 years ago
parent
1aef1d10c3
commit
d0c7cddfd0
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 112 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,299 @@
|
||||
/*
|
||||
* Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
input[type=range][orient=vertical]
|
||||
{
|
||||
writing-mode: bt-lr; /* IE */
|
||||
-webkit-appearance: slider-vertical; /* WebKit */
|
||||
width: 8px;
|
||||
height: 175px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-pane{
|
||||
float: left;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
min-width: 325px;
|
||||
}
|
||||
.right-pane{
|
||||
float: right;
|
||||
background-color: rgba(204, 204, 204, 0.61);
|
||||
width: 70%;
|
||||
}
|
||||
.coffee-wrapper{
|
||||
margin: 10% 0 5% 10%;
|
||||
text-align: center;
|
||||
}
|
||||
.coffee-top{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
background-color: aquamarine;
|
||||
}
|
||||
.coffee-bottom{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
z-index: 98;
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
.handle {
|
||||
position: absolute;
|
||||
height: 200px;
|
||||
width: 97px;
|
||||
top: 39px;
|
||||
left: -111px;
|
||||
border-top-left-radius: 75px 100px;
|
||||
border-bottom-left-radius: 75px 100px;
|
||||
border-top-right-radius: 50% 20px;
|
||||
border-bottom-right-radius: 50% 20px;
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.01) 100%);
|
||||
background-color: rgba(255, 255, 255, 0.28);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.handle:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 167px;
|
||||
width: 76px;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
border-top-left-radius: 45px 70px;
|
||||
border-bottom-left-radius: 45px 70px;
|
||||
border-top-right-radius: 45px 35px;
|
||||
border-bottom-right-radius: 45px 35px;
|
||||
background: rgba(204, 204, 204, 0.3);
|
||||
}
|
||||
|
||||
:before, :after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.coffee {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
margin: 0 20px 50px 0;
|
||||
}
|
||||
|
||||
.coffee:after {
|
||||
height: 14px;
|
||||
width: 300px;
|
||||
border-radius: 46px/10px;
|
||||
box-shadow: 0px 1px 4px -2px rgba(0, 0, 0, 0.2), 0px 2px 10px -3px rgba(0, 0, 0, 0.1);
|
||||
bottom: -7.6px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.coffee:before {
|
||||
height: 14px;
|
||||
width: 300px;
|
||||
border-radius: 46px/10px;
|
||||
box-shadow: 0px 2px 10px -2px rgba(0, 204, 255, 0.3), 0px 2px 15px -2px rgba(0, 204, 255, 0.4);
|
||||
bottom: -7.6px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.coffee_main {
|
||||
height: 300px;
|
||||
position: relative;
|
||||
width: 298px;
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.coffee_main:after, .coffee_main:before {
|
||||
height: 12px;
|
||||
width: 296px;
|
||||
border-radius: 46px/10px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.7);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.coffee_main:after {
|
||||
top: -7px;
|
||||
box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6) inset, 0px 3px 3px -1px rgba(255, 255, 255, 0.4), 0px 0px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 6px rgba(255, 255, 255, 0.7) inset, 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
|
||||
.coffee_main:before {
|
||||
top: 294px;
|
||||
box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7) inset, 0px 0px 3px rgba(0, 0, 0, 0.15) inset;
|
||||
}
|
||||
|
||||
.coffee_mouth {
|
||||
height: 52px;
|
||||
width: 44px;
|
||||
margin: 0px auto;
|
||||
position: relative;
|
||||
background: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0.3));
|
||||
box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.coffee_mouth:after {
|
||||
height: 6px;
|
||||
width: 44px;
|
||||
border-radius: 25px/6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
left: -1px;
|
||||
top: -4px;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.coffee_inner {
|
||||
height: 295px;
|
||||
width: 92%;
|
||||
margin: 0px auto;
|
||||
border-radius: 10px 10px 20px 20px/10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.01);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-bottom-width: 0.5px;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 0px 8px rgba(255, 255, 255, 0.6) inset, 0px 0px 5px rgba(255, 255, 255, 0.5);
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.coffee_inner:before {
|
||||
border-radius: 40px/4px;
|
||||
top: 140px;
|
||||
width: 90%;
|
||||
left: 3px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.coffee_top .highlight {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
transform: skew(0deg, 5deg);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6) 4%, rgba(255, 255, 255, 0.2) 98%, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.coffee_top .highlight:after {
|
||||
height: 30px;
|
||||
width: 2px;
|
||||
left: -3px;
|
||||
top: -1px;
|
||||
transform: skew(0deg, 5deg);
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.coffee_main .highlight {
|
||||
display: block;
|
||||
height: 301px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 6px;
|
||||
transform: skew(0deg, 6deg);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5) 4%, rgba(255, 255, 255, 0.2) 98%, rgba(255, 255, 255, 0));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.coffee_main .highlight:after {
|
||||
height: 150px;
|
||||
width: 4px;
|
||||
left: -6px;
|
||||
top: 0px;
|
||||
transform: skew(0deg, 3deg);
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 80%);
|
||||
}
|
||||
|
||||
.coffee_neck .highlight {
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 6px;
|
||||
transform: skew(0deg, 6deg);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3) 4%, rgba(255, 255, 255, 0.1) 98%, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.water {
|
||||
background: linear-gradient(-85deg, rgba(167, 92, 24, 0.35), rgba(169, 108, 52, 0.55) 70%, rgba(185, 128, 76, 0.4));
|
||||
width: 99%;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
border-radius: 50px 50px 20px 20px/8px 8px 10px 10px;
|
||||
box-shadow: 0px 0px 6px rgba(165, 117, 73, 0.5) inset, 0px 0.2px 3px -1px rgba(0, 0, 0, 0.3) inset, 0px 2px 6px -1px rgba(0, 0, 0, 0.1) inset, 0px 2px 5px rgba(190,155,123,0.3), 0px 1px 3px rgba(190,155,123,0.2);
|
||||
}
|
||||
|
||||
.water:after {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
left: -1px;
|
||||
top: 0px;
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(255, 127, 0, 0.05) 50%, rgba(251, 148, 0, 0.1) 80%, rgba(255, 255, 255, 0.3));
|
||||
border-radius: 50px/8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom-color: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0px 1px 2px -1px rgba(165, 90, 26, 0.35);
|
||||
}
|
||||
|
||||
.water:before {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
left: 2px;
|
||||
bottom: -1px;
|
||||
background: linear-gradient(to right, rgba(190,155,123,0.2), rgba(190,155,123,0.1) 50%, rgba(190,155,123,0.2) 80%, rgba(190,155,123,0.3));
|
||||
border-radius: 50px/10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: none;
|
||||
box-shadow: 0px -2px 3px -1px rgba(190,155,123,0.25);
|
||||
}
|
||||
|
||||
.water {
|
||||
height: 0px;
|
||||
-webkit-transition: all 3s ease-out;
|
||||
-moz-transition: all 3s ease-out;
|
||||
-o-transition: all 3s ease-out;
|
||||
transition: all 3s ease-out;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 112 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,39 @@
|
||||
/*
|
||||
* Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
var temperature = 0;
|
||||
var coffee_amount = 0;
|
||||
|
||||
function updateCoffee(newValue){
|
||||
var coffee_level = document.getElementById("coffee_level");
|
||||
coffee_level.innerHTML = newValue + "%";
|
||||
coffee_amount =newValue;
|
||||
|
||||
var coffee = document.getElementById("water");
|
||||
if(newValue == 0){
|
||||
coffee.style.height= (newValue*3) + 'px';
|
||||
}else{
|
||||
coffee.style.height= (newValue*3) - 3 + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function updateTemperature(newValue){
|
||||
temperature = newValue;
|
||||
var temperature_level = document.getElementById("temperature_level");
|
||||
temperature_level.innerHTML = newValue + " C";
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/*
|
||||
* Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
var HTMLPreview={content:"",previewform:document.getElementById("previewform"),file:function(){return location.search.substring(1)},raw:function(){return HTMLPreview.file().replace(/\/\/github\.com/,"//raw.githubusercontent.com").replace(/\/blob\//,"/")},replaceAssets:function(){var a,b,c;a=document.querySelectorAll("iframe[src],frame[src]");for(b=0;b<a.length;++b)if(c=a[b].src,0<c.indexOf("//raw.githubusercontent.com")||0<c.indexOf("//bitbucket.org"))a[b].src="//"+location.hostname+location.pathname+"?"+c;a=document.querySelectorAll("a[href]");for(b=0;b<a.length;++b)if(c=a[b].href,0<c.indexOf("#"))a[b].href="//"+location.hostname+location.pathname+location.search+"#"+a[b].hash.substring(1);else if((0<c.indexOf("//raw.githubusercontent.com")||0<c.indexOf("//bitbucket.org"))&&(0<c.indexOf(".html")||0<c.indexOf(".htm")))a[b].href="//"+location.hostname+location.pathname+"?"+c;if(!document.querySelectorAll("frameset").length){a=document.querySelectorAll("link[rel=stylesheet]");for(b=0;b<a.length;++b)c=a[b].href,(0<c.indexOf("//raw.githubusercontent.com")||0<c.indexOf("//bitbucket.org"))&&HTMLPreview.send(c,"loadCSS");a=document.querySelectorAll("script");for(b=0;b<a.length;++b)c=a[b].src,0<c.indexOf("//raw.githubusercontent.com")||0<c.indexOf("//bitbucket.org")?HTMLPreview.send(c,"loadJS"):!c&&0>a[b].innerHTML.indexOf("HTMLPreview")&&document.write(a[b].outerHTML)}},loadHTML:function(a){a&&a.query&&a.query.diagnostics&&a.query.diagnostics.redirect?HTMLPreview.send(a.query.diagnostics.redirect.content,"loadHTML"):a&&a.query&&a.query.results&&a.query.results.resources&&a.query.results.resources.content&&200==a.query.results.resources.status?(HTMLPreview.content=a.query.results.resources.content.replace(/<head>/i,'<head><base href="'+HTMLPreview.raw()+'">').replace(/<\/body>/i,'<script src="//'+location.hostname+'/htmlpreview.min.js">\x3c/script><script>HTMLPreview.replaceAssets();\x3c/script></body>').replace(/<\/head>\s*<frameset/gi,'<script src="//'+location.hostname+'/htmlpreview.min.js">\x3c/script><script>document.addEventListener("DOMContentLoaded",HTMLPreview.replaceAssets,false);\x3c/script></head><frameset'),setTimeout(function(){document.open();document.write(HTMLPreview.content);document.close()},50)):HTMLPreview.previewform.innerHTML=a&&a.error&&a.error.description?a.error.description:"Error: Cannot load file "+HTMLPreview.raw()},loadCSS:function(a){a&&a.query&&a.query.diagnostics&&a.query.diagnostics.redirect?HTMLPreview.send(a.query.diagnostics.redirect.content,"loadCSS"):a&&a.query&&a.query.results&&a.query.results.resources&&a.query.results.resources.content&&200==a.query.results.resources.status&&document.write("<style>"+a.query.results.resources.content.replace(/url\((?:'|")?([^\/][^:'"\)]+)(?:'|")?\)/gi,"url("+a.query.results.resources.url.replace(/[^\/]+\.css.*$/gi,"")+"$1)")+"</style>")},loadJS:function(a){a&&a.query&&a.query.diagnostics&&a.query.diagnostics.redirect?HTMLPreview.send(a.query.diagnostics.redirect.content,"loadJS"):a&&a.query&&a.query.results&&a.query.results.resources&&a.query.results.resources.content&&200==a.query.results.resources.status&&document.write("<script>"+a.query.results.resources.content+"\x3c/script>")},send:function(a,b){document.write('<script src="//query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22'+encodeURIComponent(a)+"%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=HTMLPreview."+b+'">\x3c/script>')},submitform:function(){location.href="/?"+document.getElementById("file").value;return!1},init:function(){HTMLPreview.previewform.onsubmit=HTMLPreview.submitform;HTMLPreview.file()&&(HTMLPreview.previewform.innerHTML="<p>Loading...</p>",HTMLPreview.send(HTMLPreview.raw(),"loadHTML"))}};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue