Skip to content

Instantly share code, notes, and snippets.

@PonDad

PonDad/samuel.ejs

Created March 5, 2016 13:38
Show Gist options
  • Save PonDad/e86dfe20bcc75aec9471 to your computer and use it in GitHub Desktop.
Save PonDad/e86dfe20bcc75aec9471 to your computer and use it in GitHub Desktop.
Download ZIP
Samuel L 9000 Raspberry Pi
Raw
samuel.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title><%=title %></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
/* Header Style */
.container {
margin-top: 70px;
}
/* Responsive */
@media screen and (max-width: 25em) {
.nav-icon span { display: none; }
}
/* Custom Stylesheet */
body {
background: #b36abc;
}
.notification {
background: #2D2A2B;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#494852), to(#2A2A30));
background-image: -webkit-linear-gradient(#494852, #2A2A30);
background-image: -moz-linear-gradient(#494852, #2A2A30);
background-image: -o-linear-gradient(#494852, #2A2A30);
background-image: linear-gradient(#494852, #2A2A30);
box-shadow: inset 0 1px 0px rgba(255, 255, 225, 0.25),0 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 1px 0px rgba(255,255,225,0.25),0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 0px rgba(255, 255, 225, 0.25),0 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #231F20;
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
}
.metal {
width: 70%;
height: 70%;
margin: 15%;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
box-sizing: border-box;
background: #417d9f;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#43637c), to(#2c3c4b));
background-image: -webkit-linear-gradient(#43637c, #2c3c4b);
background-image: -moz-linear-gradient(#43637c, #2c3c4b);
background-image: -o-linear-gradient(#43637c, #2c3c4b);
background-image: linear-gradient(#43637c, #2c3c4b);
border-top: 2px solid #b8ccd7;
padding: 5px;
box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
-moz-box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
-webkit-box-shadow: 0 2px 0 #21262c, 0 4px 0 #232429, 0 6px 0 #040003, 0 0 20px #000, 0 5px 20px #000, 0 -2px 0 #6d93a6;
}
.light {
position: relative;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
width: 100%;
height: 100%;
box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #5b2c61;
-moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #5b2c61;
-webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #5b2c61;
background: #f5ebf6;
/* background: #723679; Old browsers */
/* background: -moz-radial-gradient(center, ellipse cover, #502756 39%, #2d0408 67%, #000000 71%); /* FF3.6+ */
/* background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(39%,#920000), color-stop(67%,#2f1733), color-stop(71%,#000000)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,#723679 39%,#2d0408 67%,#000000 71%); /* Chrome10+,Safari5.1+ */
/* background: -o-radial-gradient(center, ellipse cover, #723679 39%,#2d0408 67%,#000000 71%); /* Opera 12+ */
/* background: -ms-radial-gradient(center, ellipse cover, #723679 39%,#2d0408 67%,#000000 71%); /* IE10+ */
background: radial-gradient(ellipse at center, #723679 39%,#2d0408 67%,#000000 71%); /* W3C */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#723679', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.glowing-purple {
position: absolute;
background: #b36abc;
width: 45%;
height: 45%;
margin:28%;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
box-shadow: 0 0 15px #b36abc;
-moz-box-shadow: 0 0 15px #b36abc;
-webkit-box-shadow: 0 0 15px #b36abc;
}
.glowing-white {
background: #efdff1;
width: 50%;
height: 50%;
margin:24%;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
box-shadow: 0 0 5px #f5ebf6;
-moz-box-shadow: 0 0 5px #f5ebf6;
-webkit-box-shadow: 0 0 5px #f5ebf6;
}
/* Defining Button Active State */
.notification.active .light{
/* Adding animation to Hal9000 */
animation: blink-red-shadow 2s infinite ease-in-out;
-moz-animation: blink-red-shadow 2s infinite ease-in-out;
-o-animation: blink-red-shadow 2s infinite ease-in-out;
-webkit-animation: blink-red-shadow 2s infinite ease-in-out;
}
.notification.active .light .glowing-purple{
/* Adding animation to Hal9000 */
animation: blink-red 2s infinite ease-in-out;
-moz-animation: blink-red 2s infinite ease-in-out;
-o-animation: blink-red 2s infinite ease-in-out;
-webkit-animation: blink-red 2s infinite ease-in-out;
}
.notification.active .light .glowing-white{
/* Adding animation to Hal9000 */
animation: blink-yellow 2s infinite ease-in-out;
-moz-animation: blink-yellow 2s infinite ease-in-out;
-o-animation: blink-yellow 2s infinite ease-in-out;
-webkit-animation: blink-yellow 2s infinite ease-in-out;
}
/* Defining Hal9000 blinking animation */
@-webkit-keyframes blink-red {
from {
box-shadow: 0 0 5px #b36abc;
-moz-box-shadow: 0 0 5px #b36abc;
-webkit-box-shadow: 0 0 5px #b36abc;
width: 45%;
height: 45%;
}
50% {
box-shadow: 0 0 25px #c58dcc;
-moz-box-shadow: 0 0 25px #c58dcc;
-webkit-box-shadow: 0 0 25px #c58dcc;
width: 70%;
height: 70%;
margin:17%;
}
to {
box-shadow: 0 0 5px #b36abc;
-moz-box-shadow: 0 0 5px #b36abc;
-webkit-box-shadow: 0 0 5px #b36abc;
width: 45%;
height: 45%;
}
}
@-webkit-keyframes blink-red-shadow {
from {
box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #392c33;
-moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #5b2c61;
-webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #5b2c61;
}
50% {
box-shadow: inset 0 3px 0px #502756, inset 0 5px 0 #312A25;
-moz-box-shadow: inset 0 3px 0px #502756, inset 0 5px 0 #312A25;
-webkit-box-shadow: inset 0 3px 0px #502756, inset 0 5px 0 #312A25;
}
to {
box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #5b2c61;
-moz-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #5b2c61;
-webkit-box-shadow: inset 0 3px 0px #2e4452, inset 0 5px 0 #5b2c61;
}
}
@-webkit-keyframes blink-yellow {
from {
box-shadow: 0 0 5px #fbf7fb;
-moz-box-shadow: 0 0 5px #fbf7fb;
-webkit-box-shadow: 0 0 5px #fbf7fb;
}
50% {
box-shadow: 0 0 25px #fff;
-moz-box-shadow: 0 0 25px #fff;
-webkit-box-shadow: 0 0 25px #fff;
}
to {
box-shadow: 0 0 5px #fbf7fb;
-moz-box-shadow: 0 0 5px #fbf7fb;
-webkit-box-shadow: 0 0 5px #fbf7fb;
}
}
/* Interactive Effect on Hover */
.notification.active {
cursor: pointer;
}
.notification.active .hover-effect {
-webkit-transition-duration:0.5s;
-moz-transition-duration:0.5s;
-ms-transition-duration:0.5s;
-o-transition-duration:0.5s;
transition-duration:0.5s;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
box-sizing: border-box;
border:15px solid rgba(184, 204, 215, 0);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.notification:hover .hover-effect {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border:0 solid rgba(184, 204, 215, 0.5)
}
</style>
</head>
<body>
<div class="container">
<div id="btn1" class="main">
<div class="notification active">
<div class="hover-effect"></div>
<div class="metal">
<div class="light">
<div class="glowing-purple">
<div class="glowing-white"></div>
</div>
</div>
</div>
</div>
</div><!-- Container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment