From bf02130a759f01bac8204c79e87d65467509d710 Mon Sep 17 00:00:00 2001
From: Matthew Grove <matthew@grove.gq>
Date: Fri, 7 Dec 2018 13:38:12 +0000
Subject: [PATCH] Update GCSE CS blog

---
 assets/global.css                             |  7 +-
 computer-science-blog/css/main.css            | 37 ++++----
 computer-science-blog/index.html              | 84 +++++++++++--------
 computer-science-blog/pages/cookies.html      | 19 +++++
 computer-science-blog/pages/http.html         | 19 +++++
 .../pages/{page_1.html => https.html}         |  5 +-
 computer-science-blog/pages/hyperlinks.html   | 23 +++++
 computer-science-blog/scripts/scripts.js      | 32 ++++---
 8 files changed, 162 insertions(+), 64 deletions(-)
 create mode 100644 computer-science-blog/pages/cookies.html
 create mode 100644 computer-science-blog/pages/http.html
 rename computer-science-blog/pages/{page_1.html => https.html} (52%)
 create mode 100644 computer-science-blog/pages/hyperlinks.html

diff --git a/assets/global.css b/assets/global.css
index 6ec398c..b8cecde 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -1,7 +1,9 @@
-/* change them */
 :root {
+    /* change theme */
     --mdc-theme-primary: #00adb4;
     --mdc-theme-secondary: #d84315;
+    /* ensure Bootstrap doesn't alter any font sizes set in rem */
+    font-size: initial;
 }
 
 /* implement colour theme on elements that don't have it applied by default */
@@ -11,6 +13,9 @@
 .mdc-fab {
    background-color: var(--mdc-theme-secondary);
 }
+.material-icons:hover {
+    text-decoration: none;
+}
 
 /* hide unwanted overflow from mdc-text-field :before & :after */
 .mdc-text-field-container {
diff --git a/computer-science-blog/css/main.css b/computer-science-blog/css/main.css
index 7ff9c61..4b4c7e4 100644
--- a/computer-science-blog/css/main.css
+++ b/computer-science-blog/css/main.css
@@ -1,4 +1,7 @@
 /* Reading School 2018, CSS*/
+.carousel-inner {
+	height: 500px;
+}
 .carousel-inner .item {
 	height: 100%;
 }
@@ -7,30 +10,34 @@
 	border: none;
 	height: 100%;
 }
-.carousel-indicators {
-	background: black;
+.carousel-indicators li {
+	border: 1px solid var(--mdc-theme-secondary);
 }
-.mdc-top-app-bar--fixed-adjust {
+.carousel-indicators .active {
+	background-color: var(--mdc-theme-secondary);
+}
+.presentation-button-left {
+	float: left;
+}
+.presentation-button-right {
+	float: right;
+}
+#main-content {
 	text-align: left;
-	margin: 0 15%;
+	margin: 20px 15%;
 }
 @media screen and (max-width: 1000px) {
-	.mdc-top-app-bar--fixed-adjust {
-		margin: 0 10%;
+	#main-content {
+		margin: 20px 10%;
 	}
 }
 @media screen and (max-width: 800px) {
-	.mdc-top-app-bar--fixed-adjust {
-		margin: 0 5%;
+	#main-content {
+		margin: 20px 5%;
 	}
 }
 @media screen and (max-width: 600px) {
-	.mdc-top-app-bar--fixed-adjust {
-		margin: 0 2%;
-	}
-}
-@media screen and (max-width: 400px) {
-	.mdc-top-app-bar--fixed-adjust {
-		margin: 0 1%;
+	#main-content {
+		margin: 20px;
 	}
 }
diff --git a/computer-science-blog/index.html b/computer-science-blog/index.html
index 98a9027..8bb4d32 100644
--- a/computer-science-blog/index.html
+++ b/computer-science-blog/index.html
@@ -34,14 +34,14 @@
         <!-- import cookie JavaScript -->
         <script src="/assets/cookies.js" type="text/javascript"></script>
 
-        <!-- import Bootstrap -->
-        <script src="/assets/bootstrap.min.js" type="text/javascript"></script>
-        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
-
         <!-- import Material Design components & icons -->
         <link href="/assets/material-components-web.min.css" rel="stylesheet" type="text/css">
         <link href="/assets/material_icons.css" rel="stylesheet" type="text/css">
         <script src="/assets/material-components-web.min.js" type="text/javascript"></script>
+                            
+        <!-- import Bootstrap -->
+        <script src="/assets/bootstrap.min.js" type="text/javascript"></script>
+        <link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
 
         <!-- import local styling & scripts -->
         <script src="/assets/global.js" type="text/javascript"></script>
@@ -71,48 +71,64 @@
             <header class="mdc-top-app-bar app-bar" id="app-bar"></header>
 
             <main class="main-content" id="main-content">
-                <div class="mdc-top-app-bar--fixed-adjust">
-                    <p>The current date is: <span id="current_date">unknown</span></p>
+               <div class="mdc-top-app-bar--fixed-adjust">
+                   <p>The current date is: <span id="current_date">unknown</span></p>
 					<div id="blog-insert"></div>
-					<h1>_____AREA_OF_STUDY_____ Presentation</h1>
+					<h1>HTTP Introduction</h1>
 
-                    <div id="presentation" class="carousel slide" data-ride="carousel">
+                   <div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
+                       <!-- Indicators -->
+                       <ol class="carousel-indicators">
+                       </ol>
+
+                       <!-- Wrapper for slides -->
+                       <div class="carousel-inner">
+                           <!--<div class="item">-->
+                           <!--    <img src="la.jpg" alt="Los Angeles" style="width:100%;">-->
+                           <!--</div>-->
+                       </div>
+                   </div>
+                   <div class="presentation-buttons-container">
+                       <!-- button to go to previous slide -->
+                       <button class="presentation-button-left mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
+                           <i class="material-icons mdc-button__icon">navigate_before</i>
+                           Previous
+                       </button>
+                       <!-- button to go to next slide -->
+                       <button class="presentation-button-right mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
+                           Next
+                           <i class="material-icons mdc-button__icon">navigate_next</i>
+                        </button>
+                    </div>
+                    
+                    <!-- HTML presentation -->
+                    <h1>HTML, CSS & JS Introduction</h1>
+
+                    <div id="html_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
                         <!-- Indicators -->
                         <ol class="carousel-indicators">
-                            <li data-target="#presentation" data-slide-to="0" class="active"></li>
-                            <li data-target="#presentation" data-slide-to="1"></li>
-                            <li data-target="#presentation" data-slide-to="2"></li>
                         </ol>
 
                         <!-- Wrapper for slides -->
-                        <div class="carousel-inner" style="height: 500px;">
-                            <div class="item">
-                                <img src="la.jpg" alt="Los Angeles" style="width:100%;">
-                            </div>
-
-                            <div class="item">
-                                <img src="chicago.jpg" alt="Chicago" style="width:100%;">
-                            </div>
-
-                            <div class="item">
-                                <img src="ny.jpg" alt="New york" style="width:100%;">
-                            </div>
+                        <div class="carousel-inner">
                         </div>
                     </div>
-                    <!-- button to go to previous slide -->
-                    <a class="left carousel-control mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
-                        <i class="material-icons mdc-button__icon">navigate_before</i>
-                        Previous
-                    </a>
-                    <!-- button to go to next slide -->
-                    <a class="right carousel-control mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
-                        Next
-                        <i class="material-icons mdc-button__icon">navigate_next</i>
-                    </a>
+                    <div class="presentation-buttons-container">
+                        <!-- button to go to previous slide -->
+                        <button class="presentation-button-left mdc-button mdc-button--outlined" href="#presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
+                            <i class="material-icons mdc-button__icon">navigate_before</i>
+                            Previous
+                        </button>
+                        <!-- button to go to next slide -->
+                        <button class="presentation-button-right mdc-button mdc-button--outlined" href="#presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
+                            Next
+                            <i class="material-icons mdc-button__icon">navigate_next</i>
+                        </button>
+                    </div>
 
                     <!-- link to source code on GitHub -->
                     <a href="https://github.com/mgrove36/demo-code/blob/master/computer-science-blog/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
-                </div>
+               </div>
             </main>
             <footer>
                 &copy; Matthew Grove 2018
diff --git a/computer-science-blog/pages/cookies.html b/computer-science-blog/pages/cookies.html
new file mode 100644
index 0000000..b626b58
--- /dev/null
+++ b/computer-science-blog/pages/cookies.html
@@ -0,0 +1,19 @@
+<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
+
+		<!-- styles -->
+		<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
+
+		<!-- scripts -->
+		<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
+	</head>
+	<body>
+		<h1>Cookies</h1>
+		Cookies are not, unfortunately, the treats made of dough. They are, in fact, small text files, usually one-line long, which store relevant information about websites visited by a computer. This might include a selected language, or ad preferences. Some websites even use cookies to store passwords that are set to ‘remember’. Thus cookies need a lot of security and the id of each one must be unfathomably difficult to find without permission so that hackers cannot find someone’s cookie. Cookies are stored on the computer, as opposed to the website. Whenever you visit a browser, the browser accesses the relevant cookie and your information is there. Also, whenever a website uses cookies, they must announce the fact and give an option to refuse them, for data privacy/security reasons.
+	</body>
+</html>
diff --git a/computer-science-blog/pages/http.html b/computer-science-blog/pages/http.html
new file mode 100644
index 0000000..57b0572
--- /dev/null
+++ b/computer-science-blog/pages/http.html
@@ -0,0 +1,19 @@
+<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
+
+		<!-- styles -->
+		<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
+
+		<!-- scripts -->
+		<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
+	</head>
+	<body>
+		<h1>HTTP</h1>
+		HTTP is Hypertext Transfer (or Transport) Protocol, the underlying data transfer protocol used on the World Wide Web. It defines what actions web servers and browsers should take in response to commands. For example, when a URL is opened or hyperlink (which is a URL) clicked, your web browser actually sends an HTTP request to the server which hosts the website you're trying to access, in order to fetch it and display it on your screen. Obviously, for each web server to understand these requests, the server and request must both follow this protocol.
+	</body>
+</html>
diff --git a/computer-science-blog/pages/page_1.html b/computer-science-blog/pages/https.html
similarity index 52%
rename from computer-science-blog/pages/page_1.html
rename to computer-science-blog/pages/https.html
index a36f03a..ae146a1 100644
--- a/computer-science-blog/pages/page_1.html
+++ b/computer-science-blog/pages/https.html
@@ -13,8 +13,7 @@
 		<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
 	</head>
 	<body>
-		<h1>Page 01</h1>
-		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-		<h1>END</h1>
+		<h1>HTTPS</h1>
+		HTTPS is the secure hypertext transfer protocol, which means that it is a variation on the HTTP protocol - except it uses a secure socket layer (SSL), which is an encryption protocol invoked by an HTTPS request. SSL is essentially the usage of ‘digital passports’, and it functions by ‘hopping onto’ TCP protocols. It does not resend ‘lost’ packets or ‘miscommunicated' data, because this increases security.
 	</body>
 </html>
diff --git a/computer-science-blog/pages/hyperlinks.html b/computer-science-blog/pages/hyperlinks.html
new file mode 100644
index 0000000..efce9f7
--- /dev/null
+++ b/computer-science-blog/pages/hyperlinks.html
@@ -0,0 +1,23 @@
+<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
+
+		<!-- styles -->
+		<!-- <link rel="stylesheet" type="text/css" href="../css/pages.css"> -->
+
+		<!-- scripts -->
+		<!-- <script type="text/javascript" src="../scripts/scripts.js"></script> -->
+	</head>
+	<body>
+		<h1>Hyperlinks</h1>
+		A hyperlink is simply a link on the web to some other resource. It uses a special kind of command that jumps you to some other content in your web browser, usually to another page. 
+		The way to tell if something is a hyperlink is by seeing if your mouse becomes a pointing hand when hovering over it. It is also usually either displayed as blue underlined text or an image/advert. However, the appearance does not change the function.
+		Some website owners wish to reserve the right to not be hyperlinked without permission.
+		Creating a hyperlink in html:
+		<code>&lt;a href="LINK GOES HERE"&gt;TEXT GOES HERE&lt;/a&gt;</code>
+	</body>
+</html>
diff --git a/computer-science-blog/scripts/scripts.js b/computer-science-blog/scripts/scripts.js
index ee9a158..58a85dc 100644
--- a/computer-science-blog/scripts/scripts.js
+++ b/computer-science-blog/scripts/scripts.js
@@ -39,22 +39,32 @@ window.onload = function() {
 	// display date
     $("#current_date").html(current_date);
 
-	// define variables for blog pages
-	pages = ["pages/page_1.html"];
-	var page_exists = true;
-	var page_number = 1;
-	// gets all blog pages and add them to an array (pages[])
-	pages.forEach(function(item, index) {
+	// define variables for HTTP presentation pages
+	http_pages = ["pages/hyperlinks.html"];
+	// displays HTTP presentation pages
+	http_pages.forEach(function(item, index) {
 		if (index == 0) {
-			$(".carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
-			$(".carousel-indicators").append('<li data-target="#presentation" class="active" data-slide-to="' + index + '"></li>')
+			$("#http_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
+			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" class="active" data-slide-to="' + index + '"></li>')
 		} else {
-			$(".carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
-			$(".carousel-indicators").append('<li data-target="#presentation" data-slide-to="' + index + '"></li>')
+			$("#http_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
+			$("#http_presentation .carousel-indicators").append('<li data-target="#http_presentation" data-slide-to="' + index + '"></li>')
 		}
 	});
+	
+   	// define variables for HTML presentation pages
+   	html_pages = ["pages/page_1.html"];
+   	// displays HTML presentation pages
+   	html_pages.forEach(function(item, index) {
+   		if (index == 0) {
+   			$("#html_presentation .carousel-inner").append('<div class="item active"><iframe src="' + item + '"></iframe></div>');
+   			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" class="active" data-slide-to="' + index + '"></li>')
+   		} else {
+   			$("#html_presentation .carousel-inner").append('<div class="item"><iframe src="' + item + '"></iframe></div>');
+   			$("#html_presentation .carousel-indicators").append('<li data-target="#html_presentation" data-slide-to="' + index + '"></li>')
+   		}
+   	});
 
 	// displays first blog page
-	window.current_blog_page = 0;
 	$("#blog-insert").load("pages/blog.html");
 }