Add cookie notice (testing phase)

assets/global.css

@@ -50,3 +50,122 @@ body {
 .main-content {
     margin-top: 20px;
 }
+
+/* for cookie notice */
+
+#cookies {
+    display: none;
+    width: 100%;
+    height: 70px;
+    padding-top: 30px;
+    position: absolute;
+    background: #ffffff;
+    border-bottom: 2px solid #fbeed5;
+    color: #c09853;
+    text-align: center;
+    bottom: 0;
+    left: 0;
+    z-index: 9999;
+}
+
+  #cookies > p {
+    margin: 0 0 10px 0;
+    font-weight: bold;
+}
+
+  #cookies > p a {
+    color: #00adb4;
+    text-decoration: none;
+}
+
+#cookies.display {
+    display: block;
+
+    /* Cross browser animation */
+    -webkit-animation: cookies 1s 1; /* Chrome, Safari 5+ */
+    -moz-animation: cookies 1s 1; /* Firefox 5-15 */
+    -ms-animation: cookies 1s 1; /* IE9 */
+    -o-animation: cookies 1s 1; /* Opera 12.00 */
+    animation: cookies 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
+}
+
+@keyframes cookies {
+    0%   {
+        opacity: 0;
+        -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,-100px,0); /* Firefox */
+        -ms-transform: translate3d(0,-100px,0); /* IE9 */
+        -o-transform: translate3d(0,-100px,0); /* Opera */
+        transform: translate3d(0,-100px,0);
+    }
+    100% {
+        opacity: 1;
+        -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,0,0); /* Firefox */
+        -ms-transform: translate3d(0,0,0); /* IE9 */
+        -o-transform: translate3d(0,0,0); /* Opera */
+        transform: translate3d(0,0,0);
+    }
+}
+@-webkit-keyframes cookies {
+    0%   {
+        -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,-100px,0); /* Firefox */
+        -ms-transform: translate3d(0,-100px,0); /* IE9 */
+        -o-transform: translate3d(0,-100px,0); /* Opera */
+        transform: translate3d(0,-100px,0);
+    }
+    100% {
+        -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,0,0); /* Firefox */
+        -ms-transform: translate3d(0,0,0); /* IE9 */
+        -o-transform: translate3d(0,0,0); /* Opera */
+        transform: translate3d(0,0,0);
+    }
+}
+@-moz-keyframes cookies {
+    0%   {
+        -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,-100px,0); /* Firefox */
+        -ms-transform: translate3d(0,-100px,0); /* IE9 */
+        -o-transform: translate3d(0,-100px,0); /* Opera */
+        transform: translate3d(0,-100px,0);
+    }
+    100% {
+        -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,0,0); /* Firefox */
+        -ms-transform: translate3d(0,0,0); /* IE9 */
+        -o-transform: translate3d(0,0,0); /* Opera */
+        transform: translate3d(0,0,0);
+    }
+}
+@-o-keyframes cookies {
+    0%   {
+        -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,-100px,0); /* Firefox */
+        -ms-transform: translate3d(0,-100px,0); /* IE9 */
+        -o-transform: translate3d(0,-100px,0); /* Opera */
+        transform: translate3d(0,-100px,0);
+    }
+    100% {
+        -webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
+        -moz-transform: translate3d(0,0,0); /* Firefox */
+        -ms-transform: translate3d(0,0,0); /* IE9 */
+        -o-transform: translate3d(0,0,0); /* Opera */
+        transform: translate3d(0,0,0);
+    }
+}
+
+.close-cookies {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+
+  -webkit-transform: translate3d(0,-100px,0); /* Safari & Chrome */
+    -moz-transform: translate3d(0,-100px,0); /* Firefox */
+    -ms-transform: translate3d(0,-100px,0); /* IE9 */
+    -o-transform: translate3d(0,-100px,0); /* Opera */
+    transform: translate3d(0,-100px,0);
+}

assets/global.js

@@ -32,4 +32,12 @@ $(document).ready(function(){
             $(drawer_item_link_query_selector + "/']").attr("aria-selected", "true");
         });
     });
+    /* for cookie notice */
+    $("#cookies").addClass("display");
+    $(".source-code-link").animate({bottom: "+100px";}, 1000);
+    $("#close-cookies").click(function(){
+        event.preventDefault();
+        $("#cookies").addClass("close-cookies");
+        $(".source-code-link").animate({bottom: "-100px";}, 1000);
+    });
 });

page-inserts/cookie-notice.html

@@ -0,0 +1,4 @@
+<div id="cookies">
+    <p>Just to let you know, I use cookies on my site.</p>
+    <p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
+</div>