A Pen by messer

Thumbnail
This awesome code was written by sergeymesser, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sergeymesser ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  messer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  
  <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/alenaksu/mdPickers/0.7.4/dist/mdPickers.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic'>
<link rel='stylesheet prefetch' href='https://taxi-zurich.com/css/languages.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   <body class="landing">
<div id="page-wrapper">
<!-- Header -->
<header id="header" class="alt">
  <h1><a href="http://taxi-zurich.com/index.html"><img alt="taxi-zurich.com" src="http://taxi-zurich.com/images/logo-taxi-zurich.com.png" /></a></h1>
  <nav id="nav">
    <ul>
      <li class="header-dropdown">
        <a href="#">
          <span class="lang-sm" lang="en" style=" vertical-align: text-bottom;"></span>
        <i class="fa fa-angle-down"></i> 
        </a>
        <ul class="header-dropdown-menu">
                    <li><a href="/en"><span class="lang-sm lang-lbl" lang="en">&nbsp;&nbsp;</span></a></li>
                    <li><a href="/de"><span class="lang-sm lang-lbl" lang="de">&nbsp;&nbsp;</span></a></li>
                    <li><a href="/ru"><span class="lang-sm lang-lbl" lang="ru">&nbsp;&nbsp;</span></a></li>
                </ul>
      </li>
      
      <li class="header-dropdown">
        <a href="#">
          <i class="fa fa-lg fa-user-o"></i>
          <i class="fa fa-angle-down"></i>
        </a>
        <ul class="header-dropdown-menu">
                    <li><a href="/en">
                      <i class="fa fa-taxi"></i>
                      xxxxx</a></li>
                    <li><a href="/de"><span class="lang-sm lang-lbl" lang="de">&nbsp;&nbsp;</span></a></li>
                    <li><a href="/ru"><span class="lang-sm lang-lbl" lang="ru">&nbsp;&nbsp;</span></a></li>
                </ul>
      </li>
      
      <li class="special">
        <a href="#menu" class="menuToggle"><span>Menu</span></a>
        <div id="menu">
          <ul>
            <li><a href="00000">Home</a></li>
            <li><a href="11111111">111111</a></li>
            <li><a href="#greeting" class="scrolly"
                   class="icon fa-feed"> RSS Feed</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</header>
  
  
  
<section id="banner">
  
                  
            <div class="inner">
              
              <h2 style="line-height:1em">
               
                
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="52px" height="38px" viewBox="0 0 260 190" enable-background="new 0 0 260 190" xml:space="preserve">

<g>

	
	<path class="circus" fill="#8f8f8f" d="M110,173.4c-15.8,3.5-32.8,2.2-48-3.8c-15.3-5.9-28.8-16.6-38.2-30.2c-9.5-13.6-14.9-30.1-15.2-46.9
		C8.3,75.7,13,58.8,22.2,44.5c9.2-14.3,22.6-25.9,38.4-32.7C76.2,5,94.1,2.9,111.1,6c17.1,3,33.2,11.3,45.8,23.5
		c-12.1-12.6-28.1-21.6-45.4-25.3C94.2,0.4,75.7,1.8,59.1,8.4c-16.7,6.5-31.3,18.2-41.6,33C7.1,56.2,1.3,74.2,1,92.5
		c-0.3,18.2,4.8,36.7,14.9,52.2c10,15.5,24.6,28,41.8,35.5c17.1,7.4,36.5,9.7,55,6.3c9.3-1.7,18.3-4.7,26.7-9
		c8.4-4.3,16.3-10,22.9-16.4l-10.6-10.9C140.4,161.8,125.9,169.9,110,173.4z"/>
	
	<path class="plane" fill="#8f8f8f" d="M250.4,154.7l-14.2-29.5c1.7-0.8,3.6-2.2,5.4-4.1c0.3-0.3,0.3-0.8-0.1-1l-6.1-5.4c-0.3-0.3-0.8-0.2-1,0.1
		c-0.8,0.9-1.4,1.8-2,2.8l-2.2-4.6c1.7-0.8,3.6-2.2,5.3-4.1c0.3-0.3,0.3-0.8,0-1l-6.1-5.4c-0.3-0.3-0.8-0.2-1,0.1
		c-0.7,0.9-1.3,1.8-1.9,2.6l-3.6-7.6c3.1-3.5,6.8-7.7,9-10.2l0,0c0.3-0.3,0.6-0.7,0.9-1c9.4-10.6,14.3-23.2,10.1-26.9
		c-4.3-3.8-16.1,2.6-25.5,13.3c-0.3,0.3-0.6,0.7-0.9,1l0,0c-2.2,2.5-5.9,6.7-9.1,10.2l-8-2.7c0.8-0.6,1.6-1.4,2.4-2.2
		c0.3-0.3,0.3-0.8,0-1l-6.1-5.4c-0.3-0.3-0.8-0.2-1,0.1c-1.6,2-2.8,4-3.4,5.8l-4.8-1.6c0.8-0.7,1.7-1.4,2.5-2.3
		c0.3-0.3,0.2-0.8-0.1-1l-6.1-5.4c-0.3-0.3-0.8-0.3-1,0.1c-1.6,2-2.8,4.1-3.4,5.9l-31-10.4c-1.6-0.5-4.1-0.2-5.5,0.8l-3.5,2.5
		c-0.4,0.3-0.3,0.6,0,0.9l54.4,34c-9.7,12.8-17.7,24.1-23.1,32.6l-16.7-1.4c-1.8-0.2-3.9,0.4-4.8,1.2l-1,0.9
		c-0.3,0.3-0.3,0.7,0.2,0.9l16.7,7.8c-1.8,3.5-2.4,5.7-1.7,6.4c0.7,0.6,2.8-0.3,6-2.6l9.9,15.7c0.2,0.4,0.7,0.4,0.9,0l0.8-1
		c0.7-0.9,1-3.1,0.6-4.9l-3.5-16.5c7.8-6.4,18-15.8,29.5-26.9l40.4,49.9c0.3,0.3,0.7,0.3,0.9-0.1l2.1-3.8
		C251.1,158.7,251.2,156.2,250.4,154.7z"/>
</g>

</svg>
                TAXI
                <img alt="imageflow" src="https://taxi-zurich.com/images/logo48.png" />
                
                
              ZURICH
              </h2>
              <p>Respect the freedom</p>
              <div>
    <input type-"text"/><br>
    <input type-"text"/><br>
    <input type-"text"/>
 </div>
              <p>taxi-zurich.com</p>
              
              
              
            </div>

            
            <a href="#greeting" class="more scrolly">Continue</a>             
  <img width=200px src="http://taxi-zurich.com/images/cars/mercedes-s-vip.png" class="md-card-image" alt="Washed Out">
          </section>

<section id="greeting" style="background-color:#fafafa" class="wrapper style1 special">
  
  
  
  
  <img width=200px src="http://taxi-zurich.com/images/cars/mercedes-s-vip.png" class="md-card-image" alt="Washed Out">
<br><br><br><br><br>fgf<br><br><br><br><br><br><br><br><br>dddd
  <br><br><br><br><br>fgf<br><br><br><br><br><br><br><br><br>dddd
  <br><br><br><br><br>fgf<br><br><br><br><br><br><br><br><br>dddd
</section>
   
  
  
  <footer id="footer">

<ul class="copyright">
<li>&copy;
2016
Imazen</li>
<li><a href="/credits/">Credits</a></li>
<li><a href="https://github.com/imazen/imageflow-web">Fix a typo on Github</a></li>
</ul>
</footer>
  
  
   
  
  
  
 
  

</div>
   <a href="#" class="scrollup" style="display: inline;"><i class="fa fa-arrow-circle-o-up"></i></a> 
</body>
  <script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script src='https://cdn.rawgit.com/ajlkn/jquery.scrollex/master/jquery.scrollex.js'></script>
<script src='https://cdn.rawgit.com/imazen/imageflow-web/master/js/jquery.scrolly.min.js'></script>
<script src='https://taxi-zurich.com/js/jquery.plugins.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js'></script>
<script src='https://cdn.rawgit.com/alenaksu/mdPickers/0.7.4/dist/mdPickers.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/sergeymesser/a-pen-by-messer-wdoEaR */
svg path.plane{fill:#8f8f8f}

#header img{width:70px; border-radius:5px}
body{color:#8f8f8f}
.scrollup {
    color: #8f8f8f;
    font-size: 40px;
    text-align: center;
    line-height: 40px;
    width: 40px;
    height: 40px;
    position: fixed;
    display: none;
    bottom: 50px;
    right: 50px;
}

#header nav > ul > li.header-dropdown{position:relative}
#header nav > ul > li.header-dropdown >.header-dropdown-menu{
  display: none;
  position: absolute;
    background-color: #1b1b1b;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
    z-index: 9999;
  right: 0;
  list-style: none;
  padding:5px;
  margin-top:-10px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.header-dropdown-menu>li>a{
    display: block;
    padding: 5px ;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}
.header-dropdown-menu>li:hover {background-color: #000}

#header nav > ul > li.header-dropdown:hover{
  background-color:rgba(0,0,0,0.4);
}
#header nav > ul > li.header-dropdown:hover .header-dropdown-menu{
  display: block;
  background-color:#1b1b1b;
}











.header-dropdown-menu:before {
    position: absolute;
    top: -8px;
    right: 18px;
    l0eft: auto;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.6);
    content: '';
}

  .header-dropdown-menu:after {
    position: absolute;
    top: -6px;
    right: 18px;
    l0eft: auto;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1b1b1b;
    border-left: 6px solid transparent;
    content: '';
}



/*
body.landing #page-wrapper {
    background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2880&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2880&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2880&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2880&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
}

body.is-mobile.landing #page-wrapper {
    background: none;
}


@media (max-width: 2000px) {
   
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2000&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2000&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2000&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2000&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media (max-width: 1600px) {
    
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1600&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1600&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1600&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1600&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media (max-width: 1024px) {
   
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1024&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1024&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1024&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1024&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

  
}

@media (max-width: 800px) {
    
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=800&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=800&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=800&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=800&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media (max-width: 640px) {
   
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=640&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=640&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=640&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=640&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media (max-width: 480px) {
   
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=480&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=480&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=480&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=480&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media (max-width: 330px) {
   
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=330&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=330&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=330&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=330&fastscale=true&down.colorspace=linear&format=jpg&quality=90&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2880&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2880&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2880&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2880&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2048&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2048&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2048&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=2048&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 800px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 800px), only screen and (min-device-pixel-ratio: 2) and (max-width: 800px), only screen and (min-resolution: 192dpi) and (max-width: 800px), only screen and (min-resolution: 2dppx) and (max-width: 800px) {
   
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1600&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1600&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1600&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1600&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 640px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 640px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 640px), only screen and (min-device-pixel-ratio: 2) and (max-width: 640px), only screen and (min-resolution: 192dpi) and (max-width: 640px), only screen and (min-resolution: 2dppx) and (max-width: 640px) {
   
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1280&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1280&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1280&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=1280&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 480px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 480px), only screen and (min-device-pixel-ratio: 2) and (max-width: 480px), only screen and (min-resolution: 192dpi) and (max-width: 480px), only screen and (min-resolution: 2dppx) and (max-width: 480px) {
   
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=960&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=960&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=960&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=960&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 330px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 330px), only screen and (-o-min-device-pixel-ratio: 2 / 1) and (max-width: 330px), only screen and (min-device-pixel-ratio: 2) and (max-width: 330px), only screen and (min-resolution: 192dpi) and (max-width: 330px), only screen and (min-resolution: 2dppx) and (max-width: 330px) {
    
    body.landing #page-wrapper {
        background-image: -moz-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=660&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=660&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: -ms-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=660&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
        background-image: linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("https://taxi-zurich.com/css/way.jpg?width=660&fastscale=true&down.colorspace=linear&format=jpg&quality=80&f.sharpen=10");
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

}

*/

html ,body {
    -webkit-text-size-adjust: none;
     margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    line-height: 1;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    /* Basic */
    @-ms-viewport {
        width: device-width;
    }

    body {
        background: #fff;
        color: #8f8f8f;
        font-family: "Open Sans", Helvetica, sans-serif;
        font-size: 100%;
        font-weight: 400;
        letter-spacing: 0.075em;
        line-height: 1.65em;
    }

        body.is-loading *, body.is-loading *:before, body.is-loading *:after {
            -moz-animation: none !important;
            -webkit-animation: none !important;
            -ms-animation: none !important;
            animation: none !important;
            -moz-transition: none !important;
            -webkit-transition: none !important;
            -ms-transition: none !important;
            transition: none !important;
        }

  

    

   



    header p {
        color: rgba(255, 255, 255, 0.5);
        position: relative;
        top: -0.25em;
    }

    header .excerpt-inline {
        font-size: 0.7em;
        font-weight: 400;
    }

    header h3 + p {
        font-size: 1.1em;
    }

    header h4 + p, header h5 + p, header h6 + p {
        font-size: 0.9em;
    }

   

    @media screen and (max-width: 980px) {
        header br {
            display: none;
        }
    }



    /* Page Wrapper + Menu */
    #page-wrapper {
        -moz-transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
        opacity: 1;
        padding-top: 3em;
    }

        #page-wrapper:before {
            background: transparent;
            content: '';
            display: block;
            display: none;
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 10001;
        }

    #menu {
        -moz-transform: translateX(20em);
        -webkit-transform: translateX(20em);
        -ms-transform: translateX(20em);
        transform: translateX(20em);
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        -webkit-overflow-scrolling: touch;
        background: #1b1b1b;
        color: #ffffff;
        height: 100%;
        max-width: 80%;
        overflow-y: auto;
        padding: 3em 2em;
        position: fixed;
        right: 0;
        top: 0;
        width: 20em;
        z-index: 10002;
    }

        #menu ul {
            list-style: none;
            padding: 0;
        }

            #menu ul > li {
                border-top: solid 1px rgba(0, 0, 0, 0.125);
                margin: 0.5em 0 0 0;
                padding: 0.5em 0 0 0;
                font-family: "Open Sans", Helvetica, sans-serif;
            }

                #menu ul > li:first-child {
                    border-top: 0 !important;
                    margin-top: 0 !important;
                    padding-top: 0 !important;
                }

                #menu ul > li > a {
                    border: 0;
                    color: inherit;
                    display: block;
                    font-size: 0.8em;
                    letter-spacing: 0.225em;
                    outline: 0;
                    text-decoration: none;
                    text-transform: uppercase;
                }

    @media screen and (max-width: 736px) {
        #menu ul > li > a {
            line-height: 3em;
        }
    }

    #menu .close {
        background-image: url("https://taxi-zurich.com/images/close.svg");
        background-position: 4.85em 1em;
        background-repeat: no-repeat;
        border: 0;
        cursor: pointer;
        display: block;
        height: 3em;
        position: absolute;
        right: 0;
        top: 0;
        vertical-align: middle;
        width: 7em;
    }

    @media screen and (max-width: 736px) {
        #menu {
            padding: 3em 1.5em;
        }
    }

    body.is-menu-visible #page-wrapper {
        opacity: 0.35;
    }

        body.is-menu-visible #page-wrapper:before {
            display: block;
        }

    body.is-menu-visible #menu {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    /* Header */
    #header {
        -moz-transition: background-color 0.2s ease;
        -webkit-transition: background-color 0.2s ease;
        -ms-transition: background-color 0.2s ease;
        transition: background-color 0.2s ease;
        background-color: rgba(27, 27, 27, 1);
        height: 3.5em;
        left: 0;
        line-height: 3em;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

        #header h1 {
            -moz-transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;
            height: inherit;
            left: 1.25em;
            line-height: inherit;
            position: absolute;
            top: 0;
            text-transform: none;
        }

            #header h1 a {
                border: 0;
                display: block;
                height: inherit;
                line-height: inherit;
            }

    @media screen and (max-width: 736px) {
        #header h1 a {
            font-size: 0.8em;
        }
    }

    #header nav {
        height: inherit;
        line-height: inherit;
        position: absolute;
        right: 0;
        top: 0;
    }

        #header nav > ul {
            list-style: none;
            margin: 0;
            padding: 0;
            white-space: nowrap;
        }

            #header nav > ul > li {
                display: inline-block;
                padding: 0;
            }

                #header nav > ul > li > a {
                    border: 0;
                    color: #fff;
                    display: block;
                    font-size: 0.8em;
                    letter-spacing: 0.225em;
                    padding: 0 1.5em;
                    text-decoration: none;
                    text-transform: uppercase;
                }




                    #header nav > ul > li > a.menuToggle {
                        outline: 0;
                        position: relative;
                    }

                        #header nav > ul > li > a.menuToggle:after {
                            background-image: url("https://taxi-zurich.com/images/bars.svg");
                            background-position: right center;
                            background-repeat: no-repeat;
                            content: '';
                            display: inline-block;
                            height: 3.75em;
                            vertical-align: top;
                            width: 2em;
                        }

    @media screen and (max-width: 736px) {
        #header nav > ul > li > a.menuToggle {
            padding: 0 1.5em;
        }

            #header nav > ul > li > a.menuToggle span {
                display: none;
            }
    }

    @media screen and (max-width: 736px) {
        #header nav > ul > li > a {
            padding: 0 0 0 1.5em;
        }
    }

    #header nav > ul > li:first-child {
        margin-left: 0;
    }

    #header.alt {
        background: transparent;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

        #header.alt h1 {
            -moz-pointer-events: none;
            -webkit-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
            opacity: 0;
        }

    /* Banner */
    #banner {
        d-isplay: -moz-flex;
        d-isplay: -webkit-flex;
        d-isplay: -ms-flex;
        d-isplay: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        cursor: default;
        height: 100vh;
        min-height: 35em;
        overflow: hidden;
        position: relative;
        text-align: center;
    }

        #banner h2 {
            -moz-transform: scale(1);
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -moz-transition: -moz-transform 0.2s ease, opacity 0.2s ease;
            -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
            -ms-transition: -ms-transform 0.2s ease, opacity 0.2s ease;
            transition: transform 0.2s ease, opacity 0.2s ease;
            -moz-transition-delay: 0;
            -webkit-transition-delay: 0;
            -ms-transition-delay: 0;
            transition-delay: 0;
            display: inline-block;
            font-size: 1.75em;
            opacity: 1;
            padding: 0.35em 1em;
            position: relative;
            z-index: 1;
            text-transform: none;
        }

            #banner h2:before, #banner h2:after {
                -moz-transition: width 0.85s ease;
                -webkit-transition: width 0.85s ease;
                -ms-transition: width 0.85s ease;
                transition: width 0.85s ease;
                -moz-transition-delay: 0;
                -webkit-transition-delay: 0;
                -ms-transition-delay: 0;
                transition-delay: 0;
                background: #fff;
                content: '';
                display: block;
                height: 2px;
                position: absolute;
                width: 100%;
            }

            #banner h2:before {
                top: 0;
                left: 0;
            }

            #banner h2:after {
                bottom: 0;
                right: 0;
            }

        #banner p {
            letter-spacing: 0.225em;
            text-transform: uppercase;
            margin-bottom: 1em;
        }

            #banner p a {
                color: inherit;
            }

        #banner .more {
            -moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
            -webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
            -ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
            transition: transform 0.75s ease, opacity 0.75s ease;
            -moz-transition-delay: 0;
            -webkit-transition-delay: 0;
            -ms-transition-delay: 0;
            transition-delay: 0;
            -moz-transform: translateY(0);
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
            border: none;
            bottom: 0;
            color: inherit;
            font-size: 0.8em;
            height: 8.5em;
            left: 50%;
            letter-spacing: 0.225em;
            margin-left: -8.5em;
            opacity: 1;
            outline: 0;
            padding-left: 0.225em;
            position: absolute;
            text-align: center;
            text-transform: uppercase;
            width: 16em;
            z-index: 1;
        }

            #banner .more:after {
                background-image: url("images/arrow.svg");
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                bottom: 4em;
                content: '';
                display: block;
                height: 1.5em;
                left: 50%;
                margin: 0 0 0 -0.75em;
                position: absolute;
                width: 1.5em;
            }

        #banner:after {
            -moz-pointer-events: none;
            -webkit-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
            -moz-transition: opacity 3s ease-in-out;
            -webkit-transition: opacity 3s ease-in-out;
            -ms-transition: opacity 3s ease-in-out;
            transition: opacity 3s ease-in-out;
            -moz-transition-delay: 0;
            -webkit-transition-delay: 0;
            -ms-transition-delay: 0;
            transition-delay: 0;
            content: '';
            background: #1b1b1b;
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

    @media screen and (max-width: 736px) {
        #banner_ {
            padding: 7em 3em 5em 3em;
            height: auto;
            min-height: 0;
        }

            #banner_ h2 {
                font-size: 1.25em;
            }

            
    }

    body.is-loading #banner h2 {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        opacity: 0;
    }

        body.is-loading #banner h2:before, body.is-loading #banner h2:after {
            width: 0;
        }

    body.is-loading #banner .more {
        -moz-transform: translateY(8.5em);
        -webkit-transform: translateY(8.5em);
        -ms-transform: translateY(8.5em);
        transform: translateY(8.5em);
        opacity: 0;
    }

    body.is-loading #banner:after {
        opacity: 1;
    }



    /* Footer */
    #footer {
        padding: 6em 0 4em 0;
        background-color: #333;

        text-align: center;
    }

        #footer .icons {
            font-size: 1.5em;
        }

            #footer .icons a {
                color: rgba(255, 255, 255, 0.5);
            }

                #footer .icons a:hover {
                    color: #fff;
                }

        #footer .copyright {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8em;
            letter-spacing: 0.225em;
            list-style: none;
            padding: 0;
            text-transform: uppercase;
        }

            #footer .copyright li {
                border-left: solid 1px rgba(255, 255, 255, 0.5);
                display: inline-block;
                line-height: 1em;
                margin-left: 1em;
                padding-left: 1em;
            }

                #footer .copyright li:first-child {
                    border-left: 0;
                    margin-left: 0;
                    padding-left: 0;
                }

                #footer .copyright li a {
                    color: inherit;
                }

                    #footer .copyright li a:hover {
                        color: #fff;
                    }

    @media screen and (max-width: 480px) {
        #footer .copyright li {
            border: 0;
            display: block;
            line-height: 1.65em;
            margin: 0;
            padding: 0.5em 0;
        }
    }

    @media screen and (max-width: 980px) {
        #footer {
            padding: 4em 3em 2em 3em;
        }
    }

    @media screen and (max-width: 736px) {
        #footer {
            padding: 3em 2em 1em 2em;
        }
    }

    /* Landing */
    body.landing #page-wrapper {
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 0;
    }

    body.landing #footer {
        background-color: rgba(3, 3, 3, 0.9);
    }

    body.is-mobile.landing #page-wrapper {
        background: none;
    }

    body.is-mobile.landing #banner, body.is-mobile.landing .wrapper.style4 {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    body.is-mobile.landing #footer {
        background-color: #070707;
    }



/*=================================*/
html, body{
  height: 100%;
}
body.landing { 
			background-image: url("https://taxi-zurich.com/css/way.jpg") ;
			background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: fixed;
			background-size:  cover;
			background-color: #999;
  
}




/*Downloaded from https://www.codeseek.co/sergeymesser/a-pen-by-messer-wdoEaR */
// Sticky Header
$(window).scroll(function() {

    if ($(window).scrollTop() > 100) {
        $('#header').removeClass('alt');
        $('.scrollup').fadeIn();
    } else {
        $('#header').addClass('alt');
        $('.scrollup').fadeOut();
    }
});

$('.scrollup').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});







(function($) {
	$(function() {
		var	$window = $(window),
			$body = $('body'),
			$wrapper = $('#page-wrapper'),
			$banner = $('#banner'),
			$header = $('#header');
		// Disable animations/transitions until the page has loaded.
			$body.addClass('is-loading');

			$window.on('load', function() {
				window.setTimeout(function() {
					$body.removeClass('is-loading');
				}, 100);
			});

		
		
		// Scrolly.
			$('.scrolly3')
				.scrolly({
					speed: 1500,
					offset: $header.outerHeight()
				});
$('.scrolly').click(function () {
  debugger;
    $("html, body").animate({
        scrollTop: $banner.height()-$header.height()
    }, 600);
    return false;
});
    
    
    
    
		// Menu.
			$('#menu')
				.append('<a href="#menu" class="close"></a>')
				.appendTo($body)
				.panel({
					delay: 500,
					hideOnClick: true,
					hideOnSwipe: true,
					resetScroll: true,
					resetForms: true,
					side: 'right',
					target: $body,
					visibleClass: 'is-menu-visible'
				});

		// Header.
		/*	
			if ($banner.length > 0
			&&	$header.hasClass('alt')) {

				$window.on('resize', function() { $window.trigger('scroll'); });

				$banner.scrollex({
					bottom:		$header.outerHeight() + 1,
					terminate:	function() { $header.removeClass('alt'); },
					enter:		function() { $header.addClass('alt'); },
					leave:		function() {$header.removeClass('alt'); }
				});

			}
*/
	});

})(jQuery);









var app = angular.module('StarterApp', ['ngMaterial','mdPickers','ngMessages','ngAria','ngAnimate','ngMdIcons']);

app.controller('AppCtrl', ['$scope', '$mdSidenav','$mdDialog', function($scope, $mdSidenav,$mdDialog){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };
  
  
  
  //Data de prueba
        $scope.view = {
            dataTable: [
                { "id": "570c9478-5fc8-4c33-82be-19184ada466c", "name": "Willie", "lastname": "Andrews", "email": "wandrews0@myspace.com", "direction": "4382 Hagan Drive" },
                { "id": "f74b4996-9d6f-4b1a-97c3-912c159d9c5b", "name": "Gloria", "lastname": "Nelson", "email": "gnelson1@youku.com", "direction": "09 Goodland Lane" },
                { "id": "39acb9d4-b313-472e-90f6-4afd8cf3cac3", "name": "Jeremy", "lastname": "Reyes", "email": "jreyes2@addthis.com", "direction": "94451 Talmadge Place" },
                { "id": "3aea0235-8381-49b7-b8e6-50113d0af988", "name": "Daniel", "lastname": "Gray", "email": "dgray3@dedecms.com", "direction": "36 Hagan Place" },
                { "id": "8099daf8-2210-4d34-9aaa-2e0d714503c4", "name": "Albert", "lastname": "Wood", "email": "awood4@state.gov", "direction": "29775 Hagan Way" },
                { "id": "edfc944b-f87e-438e-b122-05e95d7ed59a", "name": "Kevin", "lastname": "Tucker", "email": "ktucker5@pagesperso-orange.fr", "direction": "59762 Farmco Junction" },
                { "id": "346871de-6172-4baf-93aa-955282523038", "name": "Maria", "lastname": "Ferguson", "email": "mferguson6@mediafire.com", "direction": "8566 Fisk Trail" },
                { "id": "72afca23-368b-490a-95b6-6494202814ce", "name": "Charles", "lastname": "Grant", "email": "cgrant7@youtu.be", "direction": "726 Mariners Cove Point" },
                { "id": "98ea2793-4c82-4bad-98e9-d5dfff723fdf", "name": "Johnny", "lastname": "Thompson", "email": "jthompson8@google.ca", "direction": "08 Dahle Plaza" },
                { "id": "38e9f6f6-615e-4ff9-8c8a-06e0d1b24ae9", "name": "John", "lastname": "Olson", "email": "jolson9@earthlink.net", "direction": "71 Dapin Trail" },
                { "id": "d4d8e591-53ff-4261-a2fe-d5a37928458a", "name": "Virginia", "lastname": "Martin", "email": "vmartina@apache.org", "direction": "58304 Nancy Point" },
                { "id": "53703796-496f-4b93-8ec0-c92f783aa6bc", "name": "Carol", "lastname": "Gonzales", "email": "cgonzalesb@blogger.com", "direction": "522 Pankratz Lane" }
            ],
            order: {
                classification: 'lastname',
                orderby: '+'
            }
        };
  
  
  $scope.firstName="Paul";
  
  $scope.toggleExpansion = function toggleExpansion(sectionId){
    var sectionToToggle = $("#"+sectionId);
    if(sectionToToggle.css("display")==="none"){
      $scope.expandSection(sectionToToggle);
    } else {
      $scope.collapseSection(sectionToToggle);
    }
  };
 
  $scope.collapseSectionById = function collapseSectionById(sectionId){
    var sectionToCollapse = $("#"+sectionId);
    sectionToCollapse.css("display","none");

  };
  
  $scope.collapseSection = function collapseSection(section){
    section.css("display","none");
  }
  
  $scope.expandSectionById = function expandSectionById(sectionId){
    var sectionToExpand = $("#"+sectionId);
    sectionToExpand.css("display", "inline");
  }
  
  $scope.expandSection = function expandSection(section){
    section.css("display", "inline");
  }
  
  $scope.mostrarDialogo = mostrarDialogo;
  
  
  
  //Muestra un cuadro de dialogo
        function mostrarDialogo(operacion, data, event) {
            //Guardando los datos a enviar
            var tempData = undefined;
            if (data === undefined) {
                tempData = {};
            } else {
                tempData = {
                    id: data.id,
                    name: data.name,
                    lastname: data.lastname,
                    email: data.email,
                    direction: data.direction

                };
            }
            $mdDialog.show({
                templateUrl: 'editor.html',
                targetEvent: event,
                locals: {
                    selectedItem: tempData,
                    dataTable: $scope.view.dataTable,
                    operacion: operacion
                },
                bindToController: true,
                controller: DialogController,
                parent: angular.element(document.body)
            })
            .then(
                function (result) {
                    mostrarError(result);
                }
            );
        }

        //Controller de cuadro de dialogo
        function DialogController($scope, $mdDialog, operacion, selectedItem, dataTable) {
            $scope.view = {
                dataTable: dataTable,
                selectedItem: selectedItem,
                operacion: 'Agregar'
            };

            //Determinando el tipo de operacion que es
            switch (operacion) {
                case 'C':
                    $scope.view.operacion = 'Agregar';
                    break;
                case 'UD':
                    $scope.view.operacion = 'Modificar';
                    break;
                case 'R':
                    $scope.view.operacion = 'Detalles';
                    break;
                default:
                    $scope.view.operacion = 'Detalles';
                    break;
            }

            //Metodos del controller del cuadro de dialogo
            $scope.regresar = regresar;
            $scope.guardar = guardar;
            $scope.borrar = borrar;


            //Regresa a la ventana principal sin realizar accion alguna
            function regresar() {
                $mdDialog.cancel();
            }


            //Selecciona la opcion de agregar un elemento nuevo o modificar uno existente
            function guardar() {
                if ($scope.view.selectedItem.id === undefined) agregar();
                else modificar();
            }

            //Permite agregar un nuevo elemento
            function agregar() {
                //Determinando si existe el elemento con el ID especificado
                var temp = _.find($scope.view.dataTable, function (x) { return x.id === $scope.view.selectedItem.id; });
                if (temp === undefined) {
                    //Generando ID para el nuevo elemento
                    $scope.view.selectedItem.id = generateUUID();
                    $scope.view.dataTable.push($scope.view.selectedItem);
                    $mdDialog.hide('Datos agregados con éxito');
                } else {
                    $mdDialog.hide('Ya están registrados los datos de la persona indicada');
                }
            }

            //Permite modificar un registro
            function modificar() {
                //Determinando si existe el elemento con el ID especificado
                var index = _.findIndex($scope.view.dataTable, { 'id': $scope.view.selectedItem.id });
                if (index !== -1) {
                    $scope.view.dataTable[index].name = $scope.view.selectedItem.name;
                    $scope.view.dataTable[index].lastname = $scope.view.selectedItem.lastname;
                    $scope.view.dataTable[index].email = $scope.view.selectedItem.email;
                    $scope.view.dataTable[index].direction = $scope.view.selectedItem.direction;
                    $mdDialog.hide('Datos modificados con éxito');
                } else {
                    $mdDialog.hide('No se pudo modificar los datos de la persona seleccionada');
                }
            }

            //Permite eliminar un registro
            function borrar() {
                var item = _.find($scope.view.dataTable, function (x) { return x.id === $scope.view.selectedItem.id; });
                if (item !== undefined) {
                    _.pull($scope.view.dataTable, item);
                    $mdDialog.hide('Datos borrados con éxito');
                } else {
                    $mdDialog.hide('No se pudo borrar los datos de la persona seleccionada');
                }
            }
        }
        

  
  
  
  
  
}]);



app.config(function($mdThemingProvider) {
  var customBlueMap = 		$mdThemingProvider.extendPalette('light-blue', {
    'contrastDefaultColor': 'light',
    'contrastDarkColors': ['50'],
    '50': 'ffffff'
  });
  $mdThemingProvider.definePalette('customBlue', customBlueMap);
  $mdThemingProvider.theme('default')
    .primaryPalette('customBlue', {
      'default': '500',
      'hue-1': '400'
    })
    .accentPalette('pink');
  $mdThemingProvider.theme('input', 'default')
        .primaryPalette('grey')
});

Comments