hasura-imad · ramit0402 · Sep 29, 2016 · Oct 3, 2016 · Oct 3, 2016 · Oct 3, 2016
diff --git a/css/bootstrap.css b/css/bootstrap.css
diff --git a/css/style-article.css b/css/style-article.css
@@ -0,0 +1,36 @@
+/* Navbar */
+.navbar {
+	font-weight: bold;
+	font-size: 16px;
+	background: #303030;
+	padding-top: 5px;
+}
+
+.navbar-inverse {
+	font-weight: bold;
+	font-size: 16px;
+	background: #303030;
+}
+
+.navbar-collapse{
+	padding-top: 12px;
+}
+
+.navbar-brand img{
+	height: 55px;
+}
+
+.dropdown-menu{
+	border-radius: 7px;
+}
+
+
+/* Container */
+.container{
+    margin-top: 91px;
+}
+
+
+.container img {
+    margin:20px 0px 30px 0px;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,203 @@
+/* Navbar */
+.navbar {
+	font-weight: bold;
+	font-size: 16px;
+	background: #303030;
+	padding-top: 5px;
+}
+
+.navbar-inverse {
+	font-weight: bold;
+	font-size: 16px;
+	background: #303030;
+}
+
+.navbar-collapse{
+	padding-top: 12px;
+}
+
+.navbar-brand img{
+	height: 55px;
+}
+
+.dropdown-menu{
+    background:#424242;
+    color:white;
+	border-radius: 7px;
+}
+
+button {
+    padding: 0;
+    border: none;
+    background: none;
+    width:100%;
+}
+
+
+/* Container */
+.container{
+    padding-top: 91px;
+}
+
+
+/* Side Nav */
+.sidenav {
+	margin-top:71px;
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 16;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.2s;
+    padding-top: 60px;
+}
+
+.sidenav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 15px;
+    color: #ffffff;
+    display: block;
+    transition: 0.1s
+}
+
+.panel-body a{
+    color: #000;
+}
+
+.sidenav a:hover, .offcanvas a:focus{
+    color: #f1f1f1;
+    background: #3f3f3f;
+}
+
+a.closebtn:hover {
+    background-color: transparent;
+}
+
+.sidenav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
+.panel-body{
+    padding: 0px;
+}
+
+.panel-body ul{
+    background: #c1c1c1;
+    margin: 0px;
+    list-style: none;
+    padding-left: 10px;
+}
+
+.panel-default{
+    border: 0px;
+}
+
+.panel-default > .panel-heading {
+    color: #333;
+    background-color: #111;
+    margin: 0px;
+    padding: 0px;
+}
+
+.panel-heading{
+    padding: 2px;
+    background: #000;
+}
+
+.panel-group{
+    margin-bottom: 100px;
+}
+
+/* Main Content */
+.row .col-md-12{
+	padding-top: 40px;
+}
+
+.articles{
+	padding-top:71px;
+}
+
+h1{
+	font-weight:bold;
+	font-size:30px;
+}
+
+.maincontent img{
+	width: 230px;
+	border-radius: 50%;
+}
+
+h3{
+	font-weight: bold;
+}
+
+.col-md-5{
+	margin-top: 230px;
+	margin-bottom: 230px;
+}
+
+.form-horizontal{
+	padding: 5px ;
+	color: #000000;
+	background: transparent;
+	border-radius: 10px;
+	border:1px solid #000000;
+}
+
+.form-control{
+	color: #000000;
+	background: transparent;
+}
+
+.btn-default{
+	color: #ffffff;
+	background: rgba(0, 0, 0, 0.5);
+	border:0px;
+	width: 80px;
+}
+
+.btn-default:hover{
+	background: #fff;
+	color: #000;
+}
+
+.articlelink{
+    color: white;
+}
+
+.articlelink:hover{
+    color: white;
+}
+
+
+/* Caruosel */
+.carousel-inner .item img{
+    width: 1080px;
+    height: 360px;
+}
+
+.carousel-caption{
+    font-size:150%;
+    right: 0%;
+    left: 0%;
+    padding: 1% 10%;
+    text-align: left;
+    background: #00358c; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(left, #00358c , transparent); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(right, #00358c, transparent; /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(right, #00358c, transparent); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(to right, #00358c , transparent); /* Standard syntax */
+}
diff --git a/fonts/glyphicons-halflings-regular.eot b/fonts/glyphicons-halflings-regular.eot
diff --git a/fonts/glyphicons-halflings-regular.svg b/fonts/glyphicons-halflings-regular.svg
diff --git a/fonts/glyphicons-halflings-regular.ttf b/fonts/glyphicons-halflings-regular.ttf
diff --git a/fonts/glyphicons-halflings-regular.woff b/fonts/glyphicons-halflings-regular.woff
diff --git a/fonts/glyphicons-halflings-regular.woff2 b/fonts/glyphicons-halflings-regular.woff2
diff --git a/images/article1.jpg b/images/article1.jpg
diff --git a/images/article1_p1.png b/images/article1_p1.png
diff --git a/images/article1_p2.png b/images/article1_p2.png
diff --git a/images/article1_p3.png b/images/article1_p3.png
diff --git a/images/article1_p4.PNG b/images/article1_p4.PNG
diff --git a/images/article2.jpg b/images/article2.jpg
diff --git a/images/article2_p1.jpg b/images/article2_p1.jpg
diff --git a/images/article3.jpg b/images/article3.jpg
diff --git a/images/article3_p3.jpg b/images/article3_p3.jpg
diff --git a/images/article4.jpg b/images/article4.jpg
diff --git a/images/article4_p1.jpg b/images/article4_p1.jpg
diff --git a/images/article4_p2.jpg b/images/article4_p2.jpg
diff --git a/images/article4_p3.jpg b/images/article4_p3.jpg
diff --git a/images/carousel-art1.jpg b/images/carousel-art1.jpg
diff --git a/images/carousel-art2.jpg b/images/carousel-art2.jpg
diff --git a/images/carousel-art3.jpg b/images/carousel-art3.jpg
diff --git a/images/carousel-art4.jpg b/images/carousel-art4.jpg
diff --git a/images/carousel-art5.jpg b/images/carousel-art5.jpg
diff --git a/images/login.jpg b/images/login.jpg
diff --git a/images/logo_blog.png b/images/logo_blog.png
diff --git a/images/signup.jpg b/images/signup.jpg
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,13 @@
+$(document).ready(function() {
+	setBindings();
+});
+
+function setBindings() {
+	$("nav a").click(function(e){
+		e.preventDefault();
+		var sectionID = e.currentTarget.id+"Section"
+		$("html body").animate({
+			scrollTop: $("#"+sectionID).offset().top
+		},1000)
+	})
+}
diff --git a/js/article.js b/js/article.js
@@ -0,0 +1,99 @@
+var currentArticleTitle = window.location.pathname.split('/')[2];
+
+function loadCommentForm () {
+    var commentFormHtml = `
+        <h5>Submit a comment</h5>
+        <textarea id="comment_text" rows="5" cols="100" placeholder="Enter your comment here..."></textarea>
+        <br/>
+        <input type="submit" id="submit" value="Submit" />
+        <br/>
+        `;
+    document.getElementById('comment_form').innerHTML = commentFormHtml;
+
+    // Submit username/password to login
+    var submit = document.getElementById('submit');
+    submit.onclick = function () {
+        // Create a request object
+        var request = new XMLHttpRequest();
+
+        // Capture the response and store it in a variable
+        request.onreadystatechange = function () {
+          if (request.readyState === XMLHttpRequest.DONE) {
+                // Take some action
+                if (request.status === 200) {
+                    // clear the form & reload all the comments
+                    document.getElementById('comment_text').value = '';
+                    loadComments();    
+                } else {
+                    alert('Error!! Could not submit comment');
+                }
+                submit.value = 'Submit';
+          }
+        };
+
+        // Make the request
+        var comment = document.getElementById('comment_text').value;
+        request.open('POST', '/submit-comment/' + currentArticleTitle, true);
+        request.setRequestHeader('Content-Type', 'application/json');
+        request.send(JSON.stringify({comment: comment}));  
+        submit.value = 'Submitting...';
+
+    };
+}
+
+function loadLogin () {
+    // Check if the user is already logged in
+    var request = new XMLHttpRequest();
+    request.onreadystatechange = function () {
+        if (request.readyState === XMLHttpRequest.DONE) {
+            if (request.status === 200) {
+                loadCommentForm(this.responseText);
+            }
+        }
+    };
+
+    request.open('GET', '/check-login', true);
+    request.send(null);
+}
+
+function escapeHTML (text)
+{
+    var $text = document.createTextNode(text);
+    var $div = document.createElement('div');
+    $div.appendChild($text);
+    return $div.innerHTML;
+}
+
+function loadComments () {
+        // Check if the user is already logged in
+    var request = new XMLHttpRequest();
+    request.onreadystatechange = function () {
+        if (request.readyState === XMLHttpRequest.DONE) {
+            var comments = document.getElementById('comments');
+            if (request.status === 200) {
+                var content = '';
+                var commentsData = JSON.parse(this.responseText);
+                for (var i=0; i< commentsData.length; i++) {
+                    var time = new Date(commentsData[i].timestamp);
+                    content += `<div class="comment">
+                        <p>${escapeHTML(commentsData[i].comment)}</p>
+                        <div class="commenter">
+                            ${commentsData[i].username} - ${time.toLocaleTimeString()} on ${time.toLocaleDateString()} 
+                        </div>
+                    </div>`;
+                }
+                comments.innerHTML = content;
+            } else {
+                comments.innerHTML('Oops! Could not load comments!');
+            }
+        }
+    };
+
+    request.open('GET', '/get-comments/' + currentArticleTitle, true);
+    request.send(null);
+}
+
+
+// The first thing to do is to check if the user is logged in!
+loadLogin();
+loadComments();