assets

assets/css/style.css

@@ -0,0 +1,273 @@
+* {
+	font-family: arial, sans-serif;
+	color: #545454;
+}
+
+html,
+body {
+	margin: 0;
+	height: 100%;
+}
+
+.wrapper {
+
+	display: flex;
+    flex-direction: column;
+    min-height: 100%;
+	
+}
+
+.wrapper.indexPage {
+	justify-content: center;
+}
+
+.mainSection {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.mainSection .searchContainer {
+	margin-top: 20px;
+    width: 100%;
+}
+
+.mainSection .searchContainer form {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.searchContainer .searchButton {
+
+	color: #757575;
+    background-color: #f5f5f5;
+    border: none;
+    height: 36px;
+    width: 125px;
+    border-radius: 1px;
+    font-size: 13px;
+    font-weight: bold;
+    margin-top: 20px;
+    cursor: pointer;
+    outline: none;
+
+}
+
+.mainSection .searchContainer .searchBox {
+	border: none;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
+    height: 44px;
+    border-radius: 2px;
+    outline: none;
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 16px;
+    width: 70%;
+    max-width: 630px;
+    color: #000;
+}
+
+.mainSection .logoContainer {
+	width: 220px;
+	text-align: center;
+}
+
+.logoContainer img {
+	width: 100%;
+}
+
+.header {
+	background-color: #FAFAFA;
+	border-bottom: 1px solid #ebebeb;
+}
+
+.wrapper .headerContent {
+	display: flex;
+	align-items: center;
+}
+
+.headerContent .logoContainer {
+	width: 150px;
+	padding: 5px 20px;
+	box-sizing: border-box;
+}
+
+.headerContent .searchContainer {
+	flex: 1;
+}
+
+.headerContent .searchContainer form {
+	margin: 15px 0 28px 0;
+}
+
+.headerContent .searchBarContainer {
+	height: 44px;
+	border-radius: 2px;
+	background-color: #fff;
+	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
+	width: 70%;
+	max-width: 630px;
+	box-sizing: border-box;
+	display: flex;
+}
+
+.headerContent .searchBarContainer .searchBox {
+	flex: 1;
+	border: none;
+	background-color: transparent;
+	padding: 12px;
+	font-size: 16px;
+	color: #000;
+}
+
+.headerContent .searchBarContainer .searchButton {
+	background-color: #fff;
+	height: 44px;
+	margin-top: 0;
+	width: 44px;
+	padding-right: 20px;
+	display: flex;
+	justify-content: center;
+}
+
+.headerContent .searchBarContainer .searchButton img {
+	width: 22px
+}
+
+.tabsContainer {
+	margin-left: 150px;
+}
+
+.tabsContainer .tabList {
+	padding: 0;
+	margin: 0;
+}
+
+.tabsContainer .tabList li {
+	display: inline-block;
+	padding: 0 16px 12px 16px;
+	color: #777;
+	font-size: 13px;
+}
+
+.tabsContainer .tabList li a {
+	text-decoration: none;
+}
+
+.tabsContainer .tabList li.active {
+	border-bottom: 3px solid #1A73E8;
+}
+
+.tabsContainer .tabList li.active a {
+	font-weight: bold;
+	color: #1A73E8;
+}
+
+.mainResultsSection {
+	flex: 1;
+}
+
+.mainResultsSection .resultsCount {
+	font-size: 13px;
+	color: #808080;
+	margin-left: 150px;
+}
+
+.mainResultsSection .siteResults {
+	margin-left: 150px;
+}
+
+.resultContainer {
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 26px;
+}
+
+.resultContainer .title {
+	margin: 0;
+}
+
+.resultContainer .title a {
+	color: #1a0dab;
+	text-decoration: none;
+	font-weight: normal;
+	font-size: 18px;
+}
+
+.resultContainer .title a:hover {
+	text-decoration: underline;
+}
+
+.resultContainer .url {
+	color: #006621;
+	font-size: 14px;
+}
+
+.resultContainer .description {
+	font-size: 12px;
+}
+
+.paginationContainer {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 25px;
+}
+
+.pageButtons {
+	display: flex;
+}
+
+.pageNumberContainer img {
+	height: 37px;
+}
+
+.pageNumberContainer,
+.pageNumberContainer a {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-decoration: none;
+}
+
+.pageNumber {
+	color: #000;
+	font-size: 13px;
+}
+
+a .pageNumber {
+	color: #4285f4;
+}
+
+.mainResultsSection .imageResults {
+	margin: 20px;
+}
+
+.gridItem {
+	position: relative;
+}
+
+.gridItem img {
+	max-width: 200px;
+	min-width: 50px;
+	visibility: hidden;
+}
+
+.gridItem .details {
+	visibility: hidden;
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	width: 100%;
+	overflow: hidden;
+	background-color: rgba(0,0,0,0.8);
+	color: #fff;
+	font-size: 11px;
+	padding: 3px;
+	box-sizing: border-box;
+	white-space: nowrap;
+}
+
+.gridItem:hover .details {
+	visibility: visible;
+}

assets/js/script.js

@@ -0,0 +1,111 @@
+var timer;
+
+$(document).ready(function() {
+
+
+	$(".result").on("click", function() {
+		
+		var id = $(this).attr("data-linkId");
+		var url = $(this).attr("href");
+
+		if(!id) {
+			alert("data-linkId attribute not found");
+		}
+
+		increaseLinkClicks(id, url);
+
+		return false;
+	});
+
+
+	var grid = $(".imageResults");
+
+	grid.on("layoutComplete", function() {
+		$(".gridItem img").css("visibility", "visible");
+	});
+
+	grid.masonry({
+		itemSelector: ".gridItem",
+		columnWidth: 200,
+		gutter: 5,
+		isInitLayout: false
+	});
+
+
+	$("[data-fancybox]").fancybox({
+
+		caption : function( instance, item ) {
+	        var caption = $(this).data('caption') || '';
+	        var siteUrl = $(this).data('siteurl') || '';
+
+
+	        if ( item.type === 'image' ) {
+	            caption = (caption.length ? caption + '<br />' : '')
+	             + '<a href="' + item.src + '">View image</a><br>'
+	             + '<a href="' + siteUrl + '">Visit page</a>';
+	        }
+
+	        return caption;
+	    },
+	    afterShow : function( instance, item ) {
+	        increaseImageClicks(item.src);
+	    }
+
+
+	});
+
+});
+
+function loadImage(src, className) {
+
+	var image = $("<img>");
+
+	image.on("load", function() {
+		$("." + className + " a").append(image);
+
+		clearTimeout(timer);
+
+		timer = setTimeout(function() {
+			$(".imageResults").masonry();
+		}, 500);
+
+	});
+
+	image.on("error", function() {
+		
+		$("." + className).remove();
+
+		$.post("ajax/setBroken.php", {src: src});
+
+	});
+
+	image.attr("src", src);
+
+}
+
+
+function increaseLinkClicks(linkId, url) {
+
+	$.post("ajax/updateLinkCount.php", {linkId: linkId})
+	.done(function(result) {
+		if(result != "") {
+			alert(result);
+			return;
+		}
+
+		window.location.href = url;
+	});
+
+}
+
+function increaseImageClicks(imageUrl) {
+
+	$.post("ajax/updateImageCount.php", {imageUrl: imageUrl})
+	.done(function(result) {
+		if(result != "") {
+			alert(result);
+			return;
+		}
+	});
+
+}