Commit c15fb8d7 authored by Leandro Lanzieri's avatar Leandro Lanzieri

Commit inicial. Interfaz. Ejemplos TD 2

parent 486ddc54
/*! =========================================================
* bootstrap-slider.js
*
* Maintainers:
* Kyle Kemp
* - Twitter: @seiyria
* - Github: seiyria
* Rohit Kalkur
* - Twitter: @Rovolutionary
* - Github: rovolution
*
* =========================================================
*
* Licensed 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.
* ========================================================= */
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
}
.slider.slider-horizontal {
width: 210px;
height: 20px;
}
.slider.slider-horizontal .slider-track {
height: 10px;
width: 100%;
margin-top: -5px;
top: 50%;
left: 0;
}
.slider.slider-horizontal .slider-selection,
.slider.slider-horizontal .slider-track-low,
.slider.slider-horizontal .slider-track-high {
height: 100%;
top: 0;
bottom: 0;
}
.slider.slider-horizontal .slider-tick,
.slider.slider-horizontal .slider-handle {
margin-left: -10px;
margin-top: -5px;
}
.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
border-width: 0 10px 10px 10px;
width: 0;
height: 0;
border-bottom-color: #0480be;
margin-top: 0;
}
.slider.slider-horizontal .slider-tick-label-container {
white-space: nowrap;
margin-top: 20px;
}
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
padding-top: 4px;
display: inline-block;
text-align: center;
}
.slider.slider-vertical {
height: 210px;
width: 20px;
}
.slider.slider-vertical .slider-track {
width: 10px;
height: 100%;
margin-left: -5px;
left: 50%;
top: 0;
}
.slider.slider-vertical .slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider.slider-vertical .slider-track-low,
.slider.slider-vertical .slider-track-high {
width: 100%;
left: 0;
right: 0;
}
.slider.slider-vertical .slider-tick,
.slider.slider-vertical .slider-handle {
margin-left: -5px;
margin-top: -10px;
}
.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
border-width: 10px 0 10px 10px;
width: 1px;
height: 1px;
border-left-color: #0480be;
margin-left: 0;
}
.slider.slider-vertical .slider-tick-label-container {
white-space: nowrap;
}
.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
padding-left: 4px;
}
.slider.slider-disabled .slider-handle {
background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
}
.slider.slider-disabled .slider-track {
background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe5e5e5', endColorstr='#ffe9e9e9', GradientType=0);
cursor: not-allowed;
}
.slider input {
display: none;
}
.slider .tooltip.top {
margin-top: -36px;
}
.slider .tooltip-inner {
white-space: nowrap;
}
.slider .hide {
display: none;
}
.slider-track {
position: absolute;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.slider-selection {
position: absolute;
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
}
.slider-selection.tick-slider-selection {
background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%);
background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%);
background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0);
}
.slider-track-low,
.slider-track-high {
position: absolute;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
}
.slider-handle {
position: absolute;
width: 20px;
height: 20px;
background-color: #337ab7;
background-image: -webkit-linear-gradient(top, #149bdf 0%, #0480be 100%);
background-image: -o-linear-gradient(top, #149bdf 0%, #0480be 100%);
background-image: linear-gradient(to bottom, #149bdf 0%, #0480be 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
filter: none;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
border: 0px solid transparent;
}
.slider-handle.round {
border-radius: 50%;
}
.slider-handle.triangle {
background: transparent none;
}
.slider-handle.custom {
background: transparent none;
}
.slider-handle.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204;
}
.slider-tick {
position: absolute;
width: 20px;
height: 20px;
background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
filter: none;
opacity: 0.8;
border: 0px solid transparent;
}
.slider-tick.round {
border-radius: 50%;
}
.slider-tick.triangle {
background: transparent none;
}
.slider-tick.custom {
background: transparent none;
}
.slider-tick.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204;
}
.slider-tick.in-selection {
background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%);
background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%);
background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0);
opacity: 1;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
html, body {
font-family: 'Muli', sans-serif;
}
/*===== Colores de fondo =====*/
div.bg-gris {
background-color: #333333;
color: #FFFFFF;
}
div.bg-verde {
background-color: #00EBC1;
color: #FFFFFF;
}
div.bg-verde .text-muted {
color: #00B998;
}
div.bg-verde hr {
background-color: #00B998;
}
/*===== Estilos de fuente =====*/
/* Tamaños*/
.fuente-s {
font-size: 1.4em;
}
.fuente-m {
font-size: 2em;
}
.fuente-l {
font-size: 3em;
}
.fuente-xl {
font-size: 9em;
margin-top: 0;
}
/* Secciones */
.titulo-seccion {
border-top: 8px solid #00B998;
display: inline-block;
padding-top: 10px;
text-transform: uppercase;
}
.alerta {
background-color: none;
background-color: rgba(255,255,255,0.3);
border-left: #FFFFFF solid 0.5em;
margin: 0.5em;
padding: 0.1em;
}
/* Alineaciones */
.img-top {
vertical-align: top;
}
.vertical-align {
display: flex;
align-items: center;
}
/* Botones */
.btn-verde {
background-color: #00B998;
cursor: pointer;
}
/*===== Espaciadores =====*/
.espacio-30 {
min-width:100%;
min-height: 3em;
}
.espacio-50 {
min-width:100%;
min-height: 4em;
}
/*===== Seccion top =====*/
#top {
color: #FFFFFF;
font-size: 2em;
font-weight: 300;
height: 70px;
line-height: 70px;
min-width: 100%;
}
#top img {
display: inline-block;
}
#top #logo-col {
text-align: center;
}
#top small {
color: #707070;
font-size: 15px;
}
/*===== Sliders =====*/
.slider {
margin: 20px;
}
.slider, .slider-track, .slider-selection, .slider-track-low, .slider-track-high {
border-radius: 100px !important;
}
.slider-selection {
background: #00B998 !important;
}
.slider-track {
height: 20px !important;
}
.slider .slider-handle {
background-image: none;
background-color: #333333;
border-radius: 30px;
width: 30px;
height: 30px;
margin-left: -10px;
}
.slider-horizontal {
min-width: 70%;
}
.rs-control .rs-range-color {
background-color: #00b998;
}
.rs-control .rs-path-color {
background-color: #ffffff;
}
.rs-control .rs-handle {
background-color: #333333;
}
.rs-control .rs-bg-color {
background-color: #00ebc1;
}
.rs-bar {
display: block;
}
.rs-control {
margin: auto;
width: 100%;
}
@media screen and (min-width: 1200px) {
body {
font-size: 11px;
}
#top .container{
width: 100%;
max-width: 1200px;
}
}
@media screen and (max-width: 1200px) {
body {
font-size: 10px;
}
}
@media screen and (max-width: 768px) {
body {
font-size: 8px;
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Proyecto Dom&oacute;tica | T&eacute;cnicas Digitales III</title>
<!-- Bootstrap -->
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-slider.css" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/mediaqueries.css" media="screen" title="no title" charset="utf-8">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid" id="body-wrap">
<div class="row bg-gris" id="top">
<div class="container">
<div class="col-xs-5">
<strong>00:25</strong> 17 Nov 2015
</div>
<div class="col-xs-2" id="logo-col">
<img src="img/nav-logo.png" class="img-responsive" data-toggle="tooltip" data-placement="bottom" title="Abrir notificaciones" />
</div>
<div class="col-xs-5 text-right">
<strong>0 </strong><small>notificaciones</small>
</div>
</div>
</div>
<div class="row bg-verde seccion">
<div class="col-xs-12">
<h3 class="titulo-seccion fuente-m">Temperatura Interior</h3>
<div class="espacio-50"></div>
<div class="row vertical-align">
<div class="col-xs-4"><img src="img/ventilacion.png" class="img-top img-responsive"></div>
<div class="col-xs-6 text-center"><h2 class="fuente-xl img-top">25ºC</h2></div>
<div class="col-xs-2">
<div class="row">
<span class="glyphicon glyphicon-menu-up fuente-m"></span>
</div>
<div class="row">
<span class="glyphicon glyphicon-menu-down fuente-m text-muted"></span>
</div>
</div>
</div>
<div class="espacio-30"></div>
<div class="row">
<p class="fuente-m text-center alerta"><span class="glyphicon glyphicon-exclamation-sign"></span> La temperatura est&aacute; subiendo sobre el l&iacute;mite. <strong>Encendiendo ventilaci&oacute;n</strong></p>
</div>
</div>
<div class="col-xs-12">
<h3 class="titulo-seccion fuente-m">Iluminaci&oacute;n principal</h3>
<div class="espacio-30"></div>
<div class="row text-left">
<h3 class="fuente-l">Living</h3>
</div>
<div class="row text-center">
<!-- <input id="luz01" type="text"> -->
<div id="luz01" class="text-center"></div>
</div>
<div class="row text-left">
<h3 class="fuente-l">Comedor</h3>
</div>
<div class="row text-center">
<!-- <input id="luz02" type="text"> -->
<div id="luz01"></div>
</div>
<div class="row text-left">
<h3 class="fuente-l">Biblioteca</h3>
</div>
<div class="row text-center">
<!-- <input id="luz03" type="text"> -->
<div id="luz01"></div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-slider.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<script>
$(document).ready(function(){
$("#luz01").roundSlider({
sliderType: "min-range",
width: 22,
radius: 100,
value: 61,
editableTooltip: false,
keyboardAction: false,
handleSize: "+12",
change: function (args) {
// handle the change event here
}
});
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
/*
$("#luz01").slider({
min : 0,
max : 10,
value: 0,
tooltip_position:'top',
reversed: false
});
$("#luz02").slider({
min : 0,
max : 10,
value: 0,
tooltip_position:'top',
reversed: false
});
$("#luz03").slider({
min : 0,
max : 10,
value: 0,
tooltip_position:'top',
reversed: false
});*/
});
</script>
</body>
</html>
/* ========================================================================
* Bootstrap: affix.js v3.3.5
* http://getbootstrap.com/javascript/#affix
* ========================================================================
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';
// AFFIX CLASS DEFINITION
// ======================
var Affix = function (element, options) {
this.options = $.extend({}, Affix.DEFAULTS, options)
this.$target = $(this.options.target)
.on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
.on('click.bs.affix.data-api', $.proxy(this.checkPositionWithEventLoop, this))
this.$element = $(element)
this.affixed = null
this.unpin = null
this.pinnedOffset = null
this.checkPosition()
}
Affix.VERSION = '3.3.5'
Affix.RESET = 'affix affix-top affix-bottom'
Affix.DEFAULTS = {
offset: 0,
target: window
}
Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) {
var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
var targetHeight = this.$target.height()
if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false
if (this.affixed == 'bottom') {
if (offsetTop != null) return (scrollTop + this.unpin <= position.top) ? false : 'bottom'
return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom'
}
var initializing = this.affixed == null
var colliderTop = initializing ? scrollTop : position.top
var colliderHeight = initializing ? targetHeight : height
if (offsetTop != null && scrollTop <= offsetTop) return 'top'