From dbf06f65844c981206fdf1e5f678aad96336bdf3 Mon Sep 17 00:00:00 2001
From: AmeyGohil <amey23399@gmail.com>
Date: Sun, 25 Apr 2021 13:06:10 +0530
Subject: [PATCH] Added Preloader

---
 android_application_fundamentals.html |   7 +
 assets/js/main.js                     | 258 +++++++++++++++++++-
 assets/js/preloader.js                | 326 --------------------------
 index.html                            |   1 -
 init_template.html                    | 138 -----------
 other_topics.html                     |   7 +
 reverse_engineering.html              |   7 +
 security_analysis.html                |   7 +
 8 files changed, 284 insertions(+), 467 deletions(-)
 delete mode 100755 assets/js/preloader.js
 delete mode 100755 init_template.html
diff --git a/android_application_fundamentals.html b/android_application_fundamentals.html
index 5456ea6..ab9e500 100755
--- a/android_application_fundamentals.html
+++ b/android_application_fundamentals.html
@@ -21,6 +21,13 @@
 
 <body class="body-bg" style="position: relative;" data-spy="scroll" data-target="#side_menu" data-offset=92>
 
+<div class="preloader">
+    <pre class="canvas"></pre>
+    <div class="loading">
+        <span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span><span>&nbsp;</span>
+    </div>
+</div>
+
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
     <a class="navbar-brand" href="./">Team Watch Dogs</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
diff --git a/assets/js/main.js b/assets/js/main.js
index aee4f17..921ff74 100755
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -29,13 +29,267 @@ function foo() {
 	$(window).on('load', function () {
 		let logo = "     11                                              01     \n    0101                                            1101    \n    11100                                          00001    \n   1110100                  00                    101000    \n    01 111                 0100                  1000010    \n   111  110               0110010                100 0011   \n   110  1010             111   0100             000  1100   \n   100   011            101      001           1001   111   \n   110    000          111        100          110    010   \n   011     100       111           0101       000     011   \n   11      111      101             0101     1000     100   \n  110       100    001                101    100      011   \n  100        011 0100                  101  110        101  \n  001        110111                     0011101        111  \n  010         1001                        1100         011  \n 1011        10000       Watch Dogs       1011         011  \n  11        100111                       1110100       110  \n 101       101  010                      010  011      110  \n 011      010    111                    111    011     1101 \n 001    1111101000100111100111001100101110101100010     110 \n 000   0111001010010011010001101111001001111111010000   010 \n 001  111          010                001          100  010 \n01110111           010               111            001 111 \n000111              101              111             0010011\n00010                000            101                00001\n0010                 101           1100                 1100\n001                   101          001                   111\n                      1100        011                       \n                       101       010                        \n                        100      100                        \n                         111    101                         \n                         110    01                          \n                          101  001                          \n                           100001                           \n                           10011                            \n                            111                             "	;
 		setTimeout(function (){
-			// console.clear();
-			// console.log(logo);
+			console.clear();
+			console.log(logo);
 		}, 500);
 		if (typeof(Storage) !== "undefined") {
 			if (sessionStorage.loaded) {
 				$(".preloader").fadeOut();
 			} else {
+				var AsciiMorph = (function() {
+					'use strict';
+					var element = null;
+					var canvasDimensions = {};
+
+					var renderedData = [];
+					var framesToAnimate = [];
+					var myTimeout = null;
+
+					/**
+					 * Utils
+					 */
+
+					function extend(target, source) {
+						for (var key in source) {
+							if (!(key in target)) {
+								target[key] = source[key];
+							}
+						}
+						return target;
+					}
+
+					function repeat(pattern, count) {
+						if (count < 1) return '';
+						var result = '';
+						while (count > 1) {
+							if (count & 1) result += pattern;
+							count >>= 1, pattern += pattern;
+						}
+						return result + pattern;
+					}
+
+					function replaceAt(string, index, character ) {
+						return string.substr(0, index) + character + string.substr(index+character.length);
+					}
+
+					/**
+					 * AsciiMorph
+					 */
+
+					function init(el, canvasSize) {
+
+						// Save the element
+						element = el;
+						canvasDimensions = canvasSize;
+					}
+
+					function squareOutData(data) {
+						var i;
+						var renderDimensions = {
+							x: 0,
+							y: data.length
+						};
+
+						// Calculate centering numbers
+						for( i = 0; i < data.length; i++ ) {
+							if( data[i].length > renderDimensions.x) {
+								renderDimensions.x = data[i].length
+							}
+						}
+
+						// Pad out right side of data to square it out
+						for( i = 0; i < data.length; i++ ) {
+							if( data[i].length < renderDimensions.x) {
+								data[i] = (data[i] + repeat(' ', renderDimensions.x - data[i].length ));
+							}
+						}
+
+						var paddings = {
+							x: Math.floor((canvasDimensions.x - renderDimensions.x) / 2),
+							y: Math.floor((canvasDimensions.y - renderDimensions.y) / 2)
+						}
+
+						// Left Padding
+						for( var i = 0; i < data.length; i++ ) {
+							data[i] = repeat(' ', paddings.x) + data[i] + repeat(' ', paddings.x);
+						}
+
+						// Pad out the rest of everything
+						for( var i = 0; i < canvasDimensions.y; i++ ) {
+							if( i < paddings.y) {
+								data.unshift( repeat(' ', canvasDimensions.x));
+							} else if (i > (paddings.y + renderDimensions.y)) {
+								data.push( repeat(' ', canvasDimensions.x));
+							}
+						}
+
+						return data;
+					}
+
+					// Crushes the frame data by 1 unit.
+					function getMorphedFrame(data) {
+
+						var firstInLine, lastInLine = null;
+						var found = false;
+						for( var i = 0; i < data.length; i++) {
+
+							var line = data[i];
+							firstInLine = line.search(/\S/);
+							if( firstInLine === -1) {
+								firstInLine = null;
+							}
+
+							for( var j = 0; j < line.length; j++) {
+								if( line[j] != ' ') {
+									lastInLine = j;
+								}
+							}
+
+							if( firstInLine !== null && lastInLine !== null) {
+								data = crushLine(data, i, firstInLine, lastInLine)
+								found = true;
+							}
+
+							firstInLine = null, lastInLine = null;
+						}
+
+						if( found ) {
+							return data;
+						} else {
+							return false;
+						}
+					}
+
+					function crushLine(data, line, start, end) {
+
+						var centers = {
+							x: Math.floor(canvasDimensions.x / 2),
+							y: Math.floor(canvasDimensions.y / 2)
+						}
+
+						var crushDirection = 1;
+						if( line > centers.y ) {
+							crushDirection = -1;
+						}
+
+						var charA = data[line][start];
+						var charB = data[line][end];
+
+						data[line] = replaceAt(data[line], start, " ");
+						data[line] = replaceAt(data[line], end, " ");
+
+						if( !((end - 1) == (start + 1)) && !(start === end) && !((start + 1) === end)) {
+							data[line + crushDirection] = replaceAt(data[line + crushDirection], (start + 1), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
+							data[line + crushDirection] = replaceAt(data[line + crushDirection], (end - 1), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
+						} else if ((((start === end) || (start + 1) === end)) && ((line + 1) !== centers.y && (line - 1) !== centers.y && line !== centers.y)) {
+							data[line + crushDirection] = replaceAt(data[line + crushDirection], (start), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
+							data[line + crushDirection] = replaceAt(data[line + crushDirection], (end), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
+						}
+
+						return data;
+					}
+
+					function render(data) {
+						var ourData = squareOutData(data.slice());
+						renderSquareData(ourData);
+					}
+
+					function renderSquareData(data) {
+						element.innerHTML = '';
+						for( var i = 0; i < data.length; i++ ) {
+							element.innerHTML = element.innerHTML + data[i] + '\n';
+						}
+
+						renderedData = data;
+					}
+
+					// Morph between whatever is current, to the new frame
+					function morph(data) {
+
+						clearTimeout(myTimeout);
+						var frameData = prepareFrames(data.slice());
+						animateFrames(frameData);
+					}
+
+					function prepareFrames(data) {
+
+						var deconstructionFrames = [];
+						var constructionFrames = [];
+
+						var clonedData = renderedData
+
+						// If its taking more than 100 frames, its probably somehow broken
+						// Get the deconscrution frames
+						for(var i = 0; i < 100; i++) {
+							var newData = getMorphedFrame(clonedData);
+							if( newData === false) {
+								break;
+							}
+							deconstructionFrames.push(newData.slice(0));
+							clonedData = newData;
+						}
+
+						// Get the constuction frames for the new data
+						var squareData = squareOutData(data);
+						constructionFrames.unshift(squareData.slice(0));
+						for( var i = 0; i < 100; i++ ) {
+							var newData = getMorphedFrame(squareData);
+							if( newData === false) {
+								break;
+							}
+							constructionFrames.unshift(newData.slice(0));
+							squareData = newData;
+						}
+
+						return deconstructionFrames.concat(constructionFrames)
+					}
+
+					function animateFrames(frameData) {
+						framesToAnimate = frameData;
+						animateFrame();
+					}
+
+					function animateFrame() {
+						myTimeout = setTimeout(function() {
+
+							renderSquareData(framesToAnimate[0]);
+							framesToAnimate.shift();
+							if( framesToAnimate.length > 0 ) {
+								animateFrame();
+							}
+						}, 5);
+
+						// framesToAnimate
+					}
+
+					function terminate(){
+						clearTimeout(myTimeout);
+					}
+
+					function main(element, canvasSize) {
+
+						if( !element || !canvasSize ) {
+							console.log("sorry, I need an element and a canvas size");
+							return;
+						}
+
+						init(element, canvasSize);
+					}
+
+					return extend(main, {
+						render: render,
+						morph: morph
+					});
+
+				})();
+
+				var element = document.querySelector('pre');
+				AsciiMorph(element, {x: 51,y: 28});
+
+				var asciis = [
+					["     11                                              01","    0101                                            1101","    11100                                          00001","   1110100                  00                    101000","    01 111                 0100                  1000010","   111  110               0110010                100 0011","   110  1010             111   0100             000  1100","   100   011            101      001           1001   111","   110    000          111        100          110    010","   011     100       111           0101       000     011","   11      111      101             0101     1000     100","  110       100    001                101    100      011","  100        011 0100                  101  110        101","  001        110111                     0011101        111","  010         1001                        1100         011"," 1011        10000                        1011         011","  11        100111       Watch Dogs      1110100       110"," 101       101  010                      010  011      110"," 011      010    111                    111    011     1101"," 001    1111101000100111100111001100101110101100010     110"," 000   0111001010010011010001101111001001111111010000   010"," 001  111          010                001          100  010","01110111           010               111            001 111","000111              101              111             0010011","00010                000            101                00001","0010                 101           1100                 1100","001                   101          001                   111","                      1100        011","                       101       010","                        100      100","                         111    101","                         110    01","                          101  001","                           100001","                           10011","                            111"],
+					["$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$_$$$$$$$$$$$$$$$$_$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$__$$$$$$$$$$$$$$_$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$$_______________$$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$___________________$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$____$$$_________$$$____$$$$$$$$$$$$$","$$$$$$$$$$$$$_____$$$_________$$$_____$$$$$$$$$$$$","$$$$$$$$$$$$___________________________$$$$$$$$$$$","$$$$$$$$$$$$___________________________$$$$$$$$$$$","$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$","$$$$_____$$$_________.--------._________$$$____$$$","$$$$_____$$$________/ .------. \\________$$______$$","$$$$_____$$$_______/ /        \\ \\_______$$______$$","$$$$_____$$$_______| |________| |_______$$______$$","$$$$_____$$$____.' |_|        |_| '.____$$______$$","$$$$_____$$$____'._____ ____ _____.'____$$______$$","$$$$_____$$$____|     .'____'.     |____$$______$$","$$$$_____$$$____'.__.'.'    '.'.__.'____$$______$$","$$$$______$$____'.__  |Secure|  __.'____$$______$$","$$$$_____$$$____|   '.'.____.'.'   |____$$______$$","$$$$$___$$$$____'.____'.____.'____.'____$$$___$$$$","$$$$$$$$$$$$____'.________________.'____$$$$$$$$$$","$$$$$$$$$$$$____________________________$$$$$$$$$$","$$$$$$$$$$$$___________________________$$$$$$$$$$$","$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$","$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$"]
+				];
 				AsciiMorph.render(asciis[0]);
 
 
diff --git a/assets/js/preloader.js b/assets/js/preloader.js
deleted file mode 100755
index f6e4de9..0000000
--- a/assets/js/preloader.js
+++ /dev/null
@@ -1,326 +0,0 @@
-var AsciiMorph = (function() {
-
-	'use strict';
-
-	var element = null;
-	var canvasDimensions = {};
-
-	var renderedData = [];
-	var framesToAnimate = [];
-	var myTimeout = null;
-
-	/**
-	 * Utils
-	 */
-
-	function extend(target, source) {
-		for (var key in source) {
-			if (!(key in target)) {
-				target[key] = source[key];
-			}
-		}
-		return target;
-	}
-
-	function repeat(pattern, count) {
-		if (count < 1) return '';
-		var result = '';
-		while (count > 1) {
-			if (count & 1) result += pattern;
-			count >>= 1, pattern += pattern;
-		}
-		return result + pattern;
-	}
-
-	function replaceAt(string, index, character ) {
-		return string.substr(0, index) + character + string.substr(index+character.length);
-	}
-
-	/**
-	 * AsciiMorph
-	 */
-
-	function init(el, canvasSize) {
-
-		// Save the element
-		element = el;
-		canvasDimensions = canvasSize;
-	}
-
-	function squareOutData(data) {
-		var i;
-		var renderDimensions = {
-			x: 0,
-			y: data.length
-		};
-
-		// Calculate centering numbers
-		for( i = 0; i < data.length; i++ ) {
-			if( data[i].length > renderDimensions.x) {
-				renderDimensions.x = data[i].length
-			}
-		}
-
-		// Pad out right side of data to square it out
-		for( i = 0; i < data.length; i++ ) {
-			if( data[i].length < renderDimensions.x) {
-				data[i] = (data[i] + repeat(' ', renderDimensions.x - data[i].length ));
-			}
-		}
-
-		var paddings = {
-			x: Math.floor((canvasDimensions.x - renderDimensions.x) / 2),
-			y: Math.floor((canvasDimensions.y - renderDimensions.y) / 2)
-		}
-
-		// Left Padding
-		for( var i = 0; i < data.length; i++ ) {
-			data[i] = repeat(' ', paddings.x) + data[i] + repeat(' ', paddings.x);
-		}
-
-		// Pad out the rest of everything
-		for( var i = 0; i < canvasDimensions.y; i++ ) {
-			if( i < paddings.y) {
-				data.unshift( repeat(' ', canvasDimensions.x));
-			} else if (i > (paddings.y + renderDimensions.y)) {
-				data.push( repeat(' ', canvasDimensions.x));
-			}
-		}
-
-		return data;
-	}
-
-	// Crushes the frame data by 1 unit.
-	function getMorphedFrame(data) {
-
-		var firstInLine, lastInLine = null;
-		var found = false;
-		for( var i = 0; i < data.length; i++) {
-
-			var line = data[i];
-			firstInLine = line.search(/\S/);
-			if( firstInLine === -1) {
-				firstInLine = null;
-			}
-
-			for( var j = 0; j < line.length; j++) {
-				if( line[j] != ' ') {
-					lastInLine = j;
-				}
-			}
-
-			if( firstInLine !== null && lastInLine !== null) {
-				data = crushLine(data, i, firstInLine, lastInLine)
-				found = true;
-			}
-
-			firstInLine = null, lastInLine = null;
-		}
-
-		if( found ) {
-			return data;
-		} else {
-			return false;
-		}
-	}
-
-	function crushLine(data, line, start, end) {
-
-		var centers = {
-			x: Math.floor(canvasDimensions.x / 2),
-			y: Math.floor(canvasDimensions.y / 2)
-		}
-
-		var crushDirection = 1;
-		if( line > centers.y ) {
-			crushDirection = -1;
-		}
-
-		var charA = data[line][start];
-		var charB = data[line][end];
-
-		data[line] = replaceAt(data[line], start, " ");
-		data[line] = replaceAt(data[line], end, " ");
-
-		if( !((end - 1) == (start + 1)) && !(start === end) && !((start + 1) === end)) {
-			data[line + crushDirection] = replaceAt(data[line + crushDirection], (start + 1), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
-			data[line + crushDirection] = replaceAt(data[line + crushDirection], (end - 1), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
-		} else if ((((start === end) || (start + 1) === end)) && ((line + 1) !== centers.y && (line - 1) !== centers.y && line !== centers.y)) {
-			data[line + crushDirection] = replaceAt(data[line + crushDirection], (start), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
-			data[line + crushDirection] = replaceAt(data[line + crushDirection], (end), '+*/\\'.substr(Math.floor(Math.random()*'+*/\\'.length), 1));
-		}
-
-		return data;
-	}
-
-	function render(data) {
-		var ourData = squareOutData(data.slice());
-		renderSquareData(ourData);
-	}
-
-	function renderSquareData(data) {
-		element.innerHTML = '';
-		for( var i = 0; i < data.length; i++ ) {
-			element.innerHTML = element.innerHTML + data[i] + '\n';
-		}
-
-		renderedData = data;
-	}
-
-	// Morph between whatever is current, to the new frame
-	function morph(data) {
-
-		clearTimeout(myTimeout);
-		var frameData = prepareFrames(data.slice());
-		animateFrames(frameData);
-	}
-
-	function prepareFrames(data) {
-
-		var deconstructionFrames = [];
-		var constructionFrames = [];
-
-		var clonedData = renderedData
-
-		// If its taking more than 100 frames, its probably somehow broken
-		// Get the deconscrution frames
-		for(var i = 0; i < 100; i++) {
-			var newData = getMorphedFrame(clonedData);
-			if( newData === false) {
-				break;
-			}
-			deconstructionFrames.push(newData.slice(0));
-			clonedData = newData;
-		}
-
-		// Get the constuction frames for the new data
-		var squareData = squareOutData(data);
-		constructionFrames.unshift(squareData.slice(0));
-		for( var i = 0; i < 100; i++ ) {
-			var newData = getMorphedFrame(squareData);
-			if( newData === false) {
-				break;
-			}
-			constructionFrames.unshift(newData.slice(0));
-			squareData = newData;
-		}
-
-		return deconstructionFrames.concat(constructionFrames)
-	}
-
-	function animateFrames(frameData) {
-		framesToAnimate = frameData;
-		animateFrame();
-	}
-
-	function animateFrame() {
-		myTimeout = setTimeout(function() {
-
-			renderSquareData(framesToAnimate[0]);
-			framesToAnimate.shift();
-			if( framesToAnimate.length > 0 ) {
-				animateFrame();
-			}
-		}, 5);
-
-		// framesToAnimate
-	}
-
-	function terminate(){
-		clearTimeout(myTimeout);
-	}
-
-	function main(element, canvasSize) {
-
-		if( !element || !canvasSize ) {
-			console.log("sorry, I need an element and a canvas size");
-			return;
-		}
-
-		init(element, canvasSize);
-	}
-
-	return extend(main, {
-		render: render,
-		morph: morph
-	});
-
-})();
-
-var element = document.querySelector('pre');
-AsciiMorph(element, {x: 51,y: 28});
-
-var asciis = [
-	[
-		"     11                                              01",
-		"    0101                                            1101",
-		"    11100                                          00001",
-		"   1110100                  00                    101000",
-		"    01 111                 0100                  1000010",
-		"   111  110               0110010                100 0011",
-		"   110  1010             111   0100             000  1100",
-		"   100   011            101      001           1001   111",
-		"   110    000          111        100          110    010",
-		"   011     100       111           0101       000     011",
-		"   11      111      101             0101     1000     100",
-		"  110       100    001                101    100      011",
-		"  100        011 0100                  101  110        101",
-		"  001        110111                     0011101        111",
-		"  010         1001                        1100         011",
-		" 1011        10000                        1011         011",
-		"  11        100111       Watch Dogs      1110100       110",
-		" 101       101  010                      010  011      110",
-		" 011      010    111                    111    011     1101",
-		" 001    1111101000100111100111001100101110101100010     110",
-		" 000   0111001010010011010001101111001001111111010000   010",
-		" 001  111          010                001          100  010",
-		"01110111           010               111            001 111",
-		"000111              101              111             0010011",
-		"00010                000            101                00001",
-		"0010                 101           1100                 1100",
-		"001                   101          001                   111",
-		"                      1100        011",
-		"                       101       010",
-		"                        100      100",
-		"                         111    101",
-		"                         110    01",
-		"                          101  001",
-		"                           100001",
-		"                           10011",
-		"                            111"
-	],
-
-	[
-		"$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$_$$$$$$$$$$$$$$$$_$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$__$$$$$$$$$$$$$$_$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$$_______________$$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$___________________$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$____$$$_________$$$____$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$_____$$$_________$$$_____$$$$$$$$$$$$",
-		"$$$$$$$$$$$$___________________________$$$$$$$$$$$",
-		"$$$$$$$$$$$$___________________________$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$",
-		"$$$$_____$$$_________.--------._________$$$____$$$",
-		"$$$$_____$$$________/ .------. \\________$$______$$",
-		"$$$$_____$$$_______/ /        \\ \\_______$$______$$",
-		"$$$$_____$$$_______| |________| |_______$$______$$",
-		"$$$$_____$$$____.' |_|        |_| '.____$$______$$",
-		"$$$$_____$$$____'._____ ____ _____.'____$$______$$",
-		"$$$$_____$$$____|     .'____'.     |____$$______$$",
-		"$$$$_____$$$____'.__.'.'    '.'.__.'____$$______$$",
-		"$$$$______$$____'.__  |Secure|  __.'____$$______$$",
-		"$$$$_____$$$____|   '.'.____.'.'   |____$$______$$",
-		"$$$$$___$$$$____'.____'.____.'____.'____$$$___$$$$",
-		"$$$$$$$$$$$$____'.________________.'____$$$$$$$$$$",
-		"$$$$$$$$$$$$____________________________$$$$$$$$$$",
-		"$$$$$$$$$$$$___________________________$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$______$$$$$$_____$$$$$$$$$$$$$$$$",
-		"$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$"
-	]
-];
\ No newline at end of file
diff --git a/index.html b/index.html
index 4f3831e..39bd9a3 100755
--- a/index.html
+++ b/index.html
@@ -221,7 +221,6 @@ <h2 class="content-title text-center position-relative pb-5 waypt-animate animat
 <script src="./assets/js/jquery.waypoints.min.js"></script>
 <script src="./assets/js/highlight.min.js"></script>
 <script src="./assets/js/waypt.js"></script>
-<script src="./assets/js/preloader.js"></script>
 <script src="./assets/js/main.js?v4"></script>
 </body>
 </html>
diff --git a/init_template.html b/init_template.html
deleted file mode 100755
index 09ec922..0000000
--- a/init_template.html
+++ /dev/null
@@ -1,138 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:fb="http://ogp.me/ns/fb#">
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Reverse Engineering | Watch Dogs | Security Analysis of Android Applications</title>
-    <meta name="description" content="Team Watch Dogs | Security Analysis of Android Applications">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="author" content="Team Watch Dogs | CS416[2020]">
-    <link rel="image_src" href="https://i.redd.it/p8vw8ggae1751.jpg">
-    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
-
-    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
-
-    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
-    <link rel="stylesheet" href="assets/css/highlight.min.css">
-    <link rel="stylesheet" href="assets/css/style.css?v4">
-
-</head>
-
-<body class="body-bg" style="position: relative;" data-spy="scroll" data-target="#side_menu" data-offset=92>
-
-<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
-    <a class="navbar-brand" href="./">Team Watch Dogs</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
-        <ul class="navbar-nav">
-            <li class="nav-item active"><a class="nav-link" href="./">Home</a></li>
-            <li class="nav-item"><a class="nav-link" href="./android_application_fundamentals.html">Android Fundamentals</a></li>
-            <li class="nav-item"><a class="nav-link" href="./reverse_engineering.html">Reverse Engineering</a></li>
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="./security_analysis.html">
-                    Security Analysis
-                </a>
-                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                    <a class="dropdown-item" href="./security_analysis.html#static-analysis">Static Analysis</a>
-                    <a class="dropdown-item" href="./security_analysis.html#dynamic-analysis">Dynamic Analysis</a>
-                    <a class="dropdown-item" href="./security_analysis.html#data-storage-analysis">Data Storage Analysis</a>
-                    <a class="dropdown-item" href="./security_analysis.html#cryptography">Cryptography</a>
-                </div>
-            </li>
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="./other_topics.html">
-                    Other Topics
-                </a>
-                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                    <a class="dropdown-item" href="./other_topics.html#rooting-android-device">Rooting Android Device</a>
-                    <a class="dropdown-item" href="./other_topics.html#android-malware">Malicious App Detection</a>
-                    <a class="dropdown-item" href="./other_topics.html#useful-tools">Useful Tools</a>
-                </div>
-            </li>
-        </ul>
-    </div>
-</nav>
-
-<main class="container" style="margin-top:30px">
-    <div class="container">
-        <div class="row">
-            <div class="col-sm-4">
-                <div class="side-menu sticky_menu">
-                    <div class="page-title">
-                        Reverse Engineering
-                    </div>
-                    <div id="side">
-                        <div id="side_menu">
-                            <div class="side-menu-header">
-                                <h4 class="text-left">Tutorial</h4>
-                            </div>
-                            <div class="side-menu-content">
-                                <ul class="side_nav">
-                                    <li><a class="nav-link active" href="#topic_1">Topic 1</a></li>
-                                    <li><a class="nav-link" href="#topic_2">Topic 2</a></li>
-                                    <li><a class="nav-link" href="#topic_3">Topic 3</a></li>
-                                    <li><a class="nav-link" href="#topic_4">Topic 4</a></li>
-                                    <li><a class="nav-link" href="#topic_5">Topic 5</a></li>
-                                </ul>
-                            </div>
-                            <div class="side-menu-header">
-                                <h4 class="text-left">Tutorial</h4>
-                            </div>
-                            <div class="side-menu-content">
-                                <ul class="side_nav">
-                                    <li><a class="nav-link" href="#topic_6">Topic 1</a></li>
-                                    <li><a class="nav-link" href="#topic_7">Topic 2</a></li>
-                                    <li><a class="nav-link" href="#topic_8">Topic 3</a></li>
-                                    <li><a class="nav-link" href="#topic_9">Topic 4</a></li>
-                                    <li><a class="nav-link" href="#topic_10">Topic 5</a></li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-sm-8">
-                <div class="side-content">
-                    <section class="section" id="topic_1">
-                        <h2 class="content-title">TITLE HEADING</h2>
-                        <h5 class="content-sub-title">Title description, Dec 7, 2017</h5>
-                        <div class="fakeimg">Fake Image</div>
-                        <p>Some text..</p>
-                        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
-                    </section>
-                    <section class="section" id="topic_2">
-                        <h2>TITLE HEADING</h2>
-                        <h5>Title description, Dec 7, 2017</h5>
-                        <div class="fakeimg">Fake Image</div>
-                        <p>Some text..</p>
-                        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
-                    </section>
-                    <section class="section" id="topic_3">
-                        <h2>TITLE HEADING</h2>
-                        <h5>Title description, Dec 7, 2017</h5>
-                        <div class="fakeimg">Fake Image</div>
-                        <p>Some text..</p>
-                        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
-                    </section>
-                </div>
-            </div>
-        </div>
-    </div>
-</main>
-<footer>
-    <div class="text-center bg-dark text-light p-3 h6" style="margin-bottom:0; font-family: monospace">
-        <div>Developed by Team Watch Dogs [CS416 2021 | IIT Bombay]</div>
-    </div>
-</footer>
-
-
-<script src="./assets/js/vendor/jquery-3.5.1.min.js"></script>
-<script src="./assets/js/bootstrap.min.js"></script>
-
-<script src="./assets/js/highlight.min.js"></script>
-<script src="./assets/js/main.js?v3"></script>
-</body>
-</html>
diff --git a/other_topics.html b/other_topics.html
index 7218152..ae8a10a 100755
--- a/other_topics.html
+++ b/other_topics.html
@@ -21,6 +21,13 @@
 
 <body class="body-bg" style="position: relative;" data-spy="scroll" data-target="#side_menu" data-offset=92>
 
+<div class="preloader">
+    <pre class="canvas"></pre>
+    <div class="loading">
+        <span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span><span>&nbsp;</span>
+    </div>
+</div>
+
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
     <a class="navbar-brand" href="./">Team Watch Dogs</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
diff --git a/reverse_engineering.html b/reverse_engineering.html
index 732865e..d1350fd 100755
--- a/reverse_engineering.html
+++ b/reverse_engineering.html
@@ -21,6 +21,13 @@
 
 <body class="body-bg" style="position: relative;" data-spy="scroll" data-target="#side_menu" data-offset=92>
 
+<div class="preloader">
+    <pre class="canvas"></pre>
+    <div class="loading">
+        <span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span><span>&nbsp;</span>
+    </div>
+</div>
+
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
     <a class="navbar-brand" href="./">Team Watch Dogs</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
diff --git a/security_analysis.html b/security_analysis.html
index 4b836bc..3c503d8 100755
--- a/security_analysis.html
+++ b/security_analysis.html
@@ -21,6 +21,13 @@
 
 <body class="body-bg" style="position: relative;" data-spy="scroll" data-target="#side_menu" data-offset=92>
 
+<div class="preloader">
+    <pre class="canvas"></pre>
+    <div class="loading">
+        <span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span><span>&nbsp;</span>
+    </div>
+</div>
+
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
     <a class="navbar-brand" href="./">Team Watch Dogs</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
