Francisco López donflopez

## app.js
/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , http = require('http');

var app = express();

## app.js
io.sockets.on('connection', function(socket){
  socket.emit('connected'); //Evento creado por nosotros se puede llamar 'pepito'
});

## index.jade
extends layout

block content
  h1= title
  #disconected
    p Desconectado!
  #connected.hide
    p Conectado!
  input(type='button', value='Enviar pulsación')

## app.js
/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , http = require('http');

var app = express();

## dooreffect.html
<!DOCTYPE html>
<html>
	<head>
		<title>CamyDes</title>
		<link rel="stylesheet" href="stylesheets/style.css">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="content"><h1>Hola esto es una prueba</h1></div>
		<div class="leftdoor"></div>

## door.css
.leftdoor {
	position: absolute;
	width: 50%;
	height: 100%;
	background: url(../images/camydesfront.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;

## button.css
.button {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -30px;
	width: 60px;
	height: 60px;
	background: gold;
	border-radius: 30px;
	text-align: center;

## transitions.css
.rotate {
	-webkit-transition-property: rotate;
	-webkit-transition-duration:2s;
	-webkit-transition-timing-function:ease;
	-webkit-transform:rotate(180deg);
	-moz-transition-property: rotate;
	-moz-transition-duration:2s;
	-moz-transition-timing-function:ease;
	-moz-transform:rotate(180deg);
	-ms-transition-property: rotate;

## dooreffect.js
$('.button').mousedown(function(){
	$(this).addClass("rotate"); //añade la clase con la transición al botón.
	setTimeout(function(){
		$('.button').addClass("del"); //Añade la clase del al botón tras 1900 milisegundos.
	},1900);
	$('.leftdoor').addClass("moveleft"); //Añade la clase con la transición a la puerta izq.
	$('.rightdoor').addClass("moveright"); //Añade la clase con la transición a la puerta der.
	setTimeout(function(){
		$('.rightdoor').addClass("del"); //Elimina la puerta derecha tras 4 segundos.
	},4000);

## dabblet.css
.rounded {
	width:100px;
	height:100px;
	border: 1px solid black;
	border-radius:30px;
}
	/**
	* Module dependencies.
	*/

	var express = require('express')
	, routes = require('./routes')
	, http = require('http');

	var app = express();
	io.sockets.on('connection', function(socket){
	socket.emit('connected'); //Evento creado por nosotros se puede llamar 'pepito'
	});
	extends layout

	block content
	h1= title
	#disconected
	p Desconectado!
	#connected.hide
	p Conectado!
	input(type='button', value='Enviar pulsación')
	<!DOCTYPE html>
	<html>
	<head>
	<title>CamyDes</title>
	<link rel="stylesheet" href="stylesheets/style.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	</head>
	<body>
	<div class="content"><h1>Hola esto es una prueba</h1></div>
	<div class="leftdoor"></div>
	.leftdoor {
	position: absolute;
	width: 50%;
	height: 100%;
	background: url(../images/camydesfront.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	.button {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -30px;
	width: 60px;
	height: 60px;
	background: gold;
	border-radius: 30px;
	text-align: center;
	.rotate {
	-webkit-transition-property: rotate;
	-webkit-transition-duration:2s;
	-webkit-transition-timing-function:ease;
	-webkit-transform:rotate(180deg);
	-moz-transition-property: rotate;
	-moz-transition-duration:2s;
	-moz-transition-timing-function:ease;
	-moz-transform:rotate(180deg);
	-ms-transition-property: rotate;
	$('.button').mousedown(function(){
	$(this).addClass("rotate"); //añade la clase con la transición al botón.
	setTimeout(function(){
	$('.button').addClass("del"); //Añade la clase del al botón tras 1900 milisegundos.
	},1900);
	$('.leftdoor').addClass("moveleft"); //Añade la clase con la transición a la puerta izq.
	$('.rightdoor').addClass("moveright"); //Añade la clase con la transición a la puerta der.
	setTimeout(function(){
	$('.rightdoor').addClass("del"); //Elimina la puerta derecha tras 4 segundos.
	},4000);
	.rounded {
	width:100px;
	height:100px;
	border: 1px solid black;
	border-radius:30px;
	}