Initial commit

README.txt

+This site is an online photo gallery where users can upload their photos, view other users' photos, like and comment on them.
+
+The main page of the site contains a list of the most recently uploaded photos, sorted by upload date. Users can view photos by going to the photo view page. On this page, users can rate the photo by liking it, as well as write a comment.
+
+In order to upload their photo, users must register on the site and log in. After logging in, users can upload their photos by providing a title, description and tags for each photo. Also on the photo upload page, users can select a photo file to upload.
+
+On the view their photos page, users can manage their uploaded photos.
+
+For the convenience of users, photos can be sorted according to various criteria, such as the number of likes, comments, or upload date. Also on the site there is a search for photos by keywords and tags.
+
+To ensure the safety of users, all uploaded photo files are checked for malicious code and size limits. In addition, to protect the personal information of users, access to the page for viewing your photos and the ability to delete photos are available only after logging in.
\ No newline at end of file

app/db.php

+<?php
+require_once 'include.php';
+ini_set('display_errors', 1);
+function db_getConnection()
+{
+    global $DB;
+    $user = $DB['user'];
+    $password = $DB['password'];
+    $db = $DB['db'];
+    $host = $DB['host'];
+    $port = $DB['port'];
+
+    static $dbh = null;
+    if ($dbh != null) return $dbh;
+    $dbh = new PDO("mysql:dbname=$db;host=$host;charset=utf8;port=$port", $user, $password,
+        [
+            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
+        ]);
+    return $dbh;
+}
+
+function db_query($query)
+{
+    return db_getConnection()->query($query)->fetchAll();
+}
+
+function db_getAll($table)
+{
+    return db_getConnection()->query("SELECT * FROM `{$table}`")->fetchAll();
+}
+
+
+//$users = db_getAll('users');
+
+
+function db_getById($table, $id, $column = 'id')
+{
+    return db_getConnection()->query("SELECT * FROM `{$table}` WHERE `{$column}`='{$id}'")->fetch();
+}
+
+//echo "<pre>";
+//$user = db_getById('users',1);
+//print_r($user);
+
+
+function db_insert($table, $arr)
+{
+    $q = "INSERT INTO `{$table}`";
+    $fields = array_keys($arr);
+    $q .= "(`" . implode("`,`", $fields) . "`) VALUES (:" . implode(",:", $fields) . ")";
+    $stmt = db_getConnection()->prepare($q);
+    $stmt->execute($arr);
+}
+
+//inser 1 user
+//db_insert('users', [
+//    'name' => 'testuser',
+//    'email' => 'test@test.com',
+//    'password' => '15454841321321654684616'
+//]);
+function db_update($table, $id, $arr)
+{
+    $id = (int)$id;
+    $q = "UPDATE `{$table}` SET ";
+    $fields = array_keys($arr);
+    $q .= implode("=?, ", $fields) . "=? WHERE id={$id}";
+    $stmt = db_getConnection()->prepare($q);
+    $stmt->execute(array_values($arr));
+}
+
+
+//db_update('users',231,[
+//    'name'=>'updatename'
+//]);
+function db_delete($table, $id)
+{
+    $id = (int)$id;
+    $stmt = db_getConnection()->query("DELETE FROM `{$table}` WHERE id={$id}");
+}
+
+//db_delete('users',11);
+
+function formDate($date)
+{
+    return date("Y-m-d", strtotime($date));
+}
+
+function cryptpass($pass)
+{
+    return hash('sha256', $pass . 'pashaloh228');
+}

app/include.php

+<?php
+$DB = [
+    'user' => 'root',
+    'password' => 'root',
+    'db' => 'pashaloh',
+    'host' => 'localhost',
+    'port' => 3306,
+];

app/like.php

+<?php
+ini_set('display_errors', 0);
+require 'db.php';
+
+if (isset($_POST['uid'])) {
+    $like = db_query("select * from likes where uid={$_POST['uid']} and pid={$_POST['pid']}");
+    if (!isset($like[0]['id'])) {
+        db_insert('likes', [
+            'uid' => $_POST['uid'],
+            'pid' => $_POST['pid'],
+            'upid' => $_POST['upid'],
+        ]);
+    } else {
+        db_delete('likes', $like[0]['id']);
+    }
+    usleep(200000);
+
+    $like = db_query("select * from likes where pid={$_POST['pid']}");
+    echo count($like);
+
+} else echo 'loading';

assets/css/comments.css

+
+.container {
+    width: 70%;
+    margin: 0 auto;
+    background-color: #ededed;
+    border-radius: 20px;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+.comments {
+    display: flex;
+}
+
+.post_info {
+    width: 40%;
+    margin-top: 3%;
+    margin-left: 3%;
+}
+
+.post {
+    width: 100%;
+}
+
+.post_comments {
+    margin-left: 10%;
+}
+
+.likes {
+    margin-top: 2%;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    margin-bottom: 4%;
+}
+
+.like {
+    cursor: pointer;
+    transition: .2s;
+    height: 30px;
+}
+
+.like:hover {
+    transform: scale(1.1);
+}
+
+.user_name {
+    transition: .2s;
+    margin-top: 3%;
+}
+
+.user_name:hover {
+    margin-left: 2%;
+}
+
+.status {
+    margin-left: 3%;
+}
+
+
+/* = = = = = = = = = = = = = = */
+
+
+.comment {
+    position: relative;
+    margin-top: 30px;
+    margin-right: 20px;
+    margin-left: 50px;
+    margin-bottom: 4%;
+}
+
+.comment-avatar {
+    position: absolute;
+    top: -20px;
+    left: -60px;
+    width: 90px;
+    height: 90px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+.comment-avatar img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.comment-author {
+    margin-bottom: 5px;
+    padding-left: 45px;
+    padding-right: 20px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.comment-text {
+    padding: 12px;
+    padding-left: 45px;
+    background-color: #f8f8f8;
+    border-bottom: 5px solid #e5e6e6;
+}
+
+textarea {
+    resize: none;
+}
+
+.comment-date {
+    margin-top: 5px;
+    font-size: 12px;
+    color: #bdc3c7;
+}
+
+.comment-reply {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 15px;
+    height: 15px;
+    background: url("/assets/course14/reply.png") no-repeat 0 0;
+}
+
+
+/* = = = = = = = = = = = = = = */
+
+.informa {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 3%;
+    margin-top: 3%;
+}
+
+.btn {
+    transition: .2s;
+    cursor: pointer;
+    padding: 2% 3%;
+    color: #fff;
+    background-color: #333;
+}
+
+.btn:hover {
+    color: #333;
+    background-color: #fff;
+}
+
+.add {
+    cursor: pointer;
+}
+
+.add:hover {
+    color: red;
+}

assets/css/create.css

+body {
+    width: 100vw;
+    height: 100vh;
+    background: #131417;
+    font-family: Lato, "Lucida Grande", "Lucida Sans";
+}
+div.content {
+    width: 600px;
+    margin: 0 auto;
+    height: 100%;
+}
+div.post {
+    background: #1f2229;
+    width: calc(100% - 30px);
+    margin-top: 15px;
+    min-height: 20px;
+    border-radius: 5px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    &.post__create {
+        // display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        input {
+            flex: 1;
+            border: 0;
+            background: lighten(#1f2229, 5%);
+            padding: 15px;
+            color: white;
+            font-size: 15px;
+            // width: calc(100% - 81px);
+            display: inline-block;
+            &::placeholder {
+                color: darken(white, 6%);
+            }
+            &:focus {
+                outline: auto;
+            }
+        }
+        button {
+            display: inline-block;
+            background-color: #444857;
+            color: white;
+            border: 0;
+            cursor: pointer;
+            padding: 10px;
+            &:not(:last-child) {
+                border-right: 2px solid lighten(#444857, 10%);
+            }
+            &:hover {
+                background: lighten(#444857, 10%);
+            }
+        }
+    }
+    .post__sub {
+        
+        display: flex;
+        justify-content: space-between;
+    }
+    .post__content {
+        color: white;
+        font-weight: bold;
+        font-size: 15px;
+        flex: 1;
+        
+    }
+    .post__image {
+        max-width: 100%;
+        margin-bottom: 10px;
+        img {
+            width: 100%;
+        }
+    }
+    .post__controls {
+        cursor: pointer;
+        &:hover {
+            svg {
+                fill: white;  
+            }
+        }
+    }
+}
\ No newline at end of file

assets/css/ie8.css

+/*
+	Lens by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Viewer */
+
+	#viewer {
+		width: 100%;
+	}
\ No newline at end of file

assets/css/ie9.css

+/*
+	Lens by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Thumbnails */
+
+	#thumbnails:after {
+		content: '';
+		display: block;
+		clear: both;
+	}
+
+	#thumbnails article {
+		float: left;
+	}
+
+/* Viewer */
+
+	#viewer .inner {
+		box-shadow: inset 0 0 9em 2em rgba(16, 16, 16, 0.2);
+	}
+
+		#viewer .inner:before {
+			display: none;
+		}
+
+	#viewer .slide .caption {
+		background-color: rgba(16, 16, 16, 0.5);
+	}
\ No newline at end of file

assets/css/images/arrow-small.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32" zoomAndPan="disable">
+	<style>
+		line {
+			stroke: #fff;
+			stroke-width: 1px;
+		}
+	</style>
+	<line x1="8" y1="0" x2="24" y2="16" />
+	<line x1="8" y1="32" x2="24" y2="16" />
+
+</svg>
\ No newline at end of file

assets/css/images/arrow.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable">
+	<style>
+		line {
+			stroke: #fff;
+			stroke-width: 1px;
+		}
+	</style>
+	<line x1="32" y1="16" x2="64" y2="48" />
+	<line x1="32" y1="80" x2="64" y2="48" />
+
+</svg>
\ No newline at end of file

assets/css/images/close-small-alt.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32" zoomAndPan="disable">
+	<style>
+		line {
+			stroke: #ccc;
+			stroke-width: 1.5px;
+		}
+	</style>
+	<line x1="8" y1="8" x2="24" y2="24" />
+	<line x1="8" y1="24" x2="24" y2="8" />
+</svg>
\ No newline at end of file

assets/css/images/close-small.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32" zoomAndPan="disable">
+	<style>
+		line {
+			stroke: #fff;
+			stroke-width: 1.5px;
+		}
+	</style>
+	<line x1="8" y1="8" x2="24" y2="24" />
+	<line x1="8" y1="24" x2="24" y2="8" />
+</svg>
\ No newline at end of file

assets/css/images/close.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable">
+	<style>
+		line {
+			stroke: #fff;
+			stroke-width: 1.5px;
+		}
+	</style>
+	<line x1="20" y1="20" x2="44" y2="44" />
+	<line x1="20" y1="44" x2="44" y2="20" />
+</svg>
\ No newline at end of file

assets/css/images/open-small.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32" zoomAndPan="disable">
+	<style>
+		line {
+			stroke: #fff;
+			stroke-width: 1.5px;
+		}
+	</style>
+	<line x1="6" y1="10" x2="26" y2="10" />
+	<line x1="6" y1="16" x2="26" y2="16" />
+	<line x1="6" y1="22" x2="26" y2="22" />
+</svg>
\ No newline at end of file

assets/css/images/open.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable">
+	<style>
+		line {
+			stroke: #fff;
+			stroke-width: 1.5px;
+		}
+	</style>
+	<line x1="20" y1="20" x2="44" y2="20.025" />
+	<line x1="20" y1="28" x2="44" y2="28.025" />
+	<line x1="20" y1="36" x2="44" y2="36.025" />
+	<line x1="20" y1="44" x2="44" y2="44.025" />
+</svg>
\ No newline at end of file

assets/css/images/spinner.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable">
+	<style>
+		circle {
+			fill: transparent;
+			stroke: #fff;
+			stroke-width: 1.5px;
+		}
+	</style>
+	<defs>
+		<clipPath id="corner">
+			<polygon points="0,0 48,0 48,48 96,48 96,96 0,96" />
+		</clipPath>
+	</defs>
+	<g clip-path="url(#corner)">
+		<circle cx="48" cy="48" r="32"/>
+	</g>
+</svg>
\ No newline at end of file

assets/css/login.css

+@import url("https://fonts.googleapis.com/css?family=Fira+Sans");
+
+html,body {
+	position: relative;
+	min-height: 100vh;
+	background-color: #E1E8EE;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.form-structor {
+	background-color: #222;
+	border-radius: 15px;
+	height: 550px;
+	width: 350px;
+	position: relative;
+	overflow: hidden;
+	
+	&::after {
+		content: '';
+		opacity: .8;
+		position: absolute;
+		top: 0;right:0;bottom:0;left:0;
+		background-repeat: no-repeat;
+		background-position: left bottom;
+		background-size: 500px;
+		background-image: url('https://images.unsplash.com/photo-1503602642458-232111445657?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bf884ad570b50659c5fa2dc2cfb20ecf&auto=format&fit=crop&w=1000&q=100');
+	}
+	
+	.signup {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		-webkit-transform: translate(-50%, -50%);
+		width: 65%;
+		z-index: 5;
+		-webkit-transition: all .3s ease;
+		
+		
+		&.slide-up {
+			top: 5%;
+			-webkit-transform: translate(-50%, 0%);
+			-webkit-transition: all .3s ease;
+		}
+		
+		&.slide-up .form-holder,
+		&.slide-up .submit-btn {
+			opacity: 0;
+			visibility: hidden;
+		}
+		
+		&.slide-up .form-title {
+			font-size: 1em;
+			cursor: pointer;
+		}
+		
+		&.slide-up .form-title span {
+			margin-right: 5px;
+			opacity: 1;
+			visibility: visible;
+			-webkit-transition: all .3s ease;
+		}
+		
+		.form-title {
+			color: #fff;
+			font-size: 1.7em;
+			text-align: center;
+			
+			span {
+				color: rgba(0,0,0,0.4);
+				opacity: 0;
+				visibility: hidden;
+				-webkit-transition: all .3s ease;
+			}
+		}
+		
+		.form-holder {
+			border-radius: 15px;
+			background-color: #fff;
+			overflow: hidden;
+			margin-top: 50px;
+			opacity: 1;
+			visibility: visible;
+			-webkit-transition: all .3s ease;
+			
+			.input {
+				border: 0;
+				outline: none;
+				box-shadow: none;
+				display: block;
+				height: 30px;
+				line-height: 30px;
+				padding: 8px 15px;
+				border-bottom: 1px solid #eee;
+				width: 100%;
+				font-size: 12px;
+				
+				&:last-child {
+					border-bottom: 0;
+				}
+				&::-webkit-input-placeholder {
+					color: rgba(0,0,0,0.4);
+				}
+			}
+		}
+		
+		.submit-btn {
+			background-color: rgba(0,0,0,0.4);
+			color: rgba(256,256,256,0.7);
+			border:0;
+			border-radius: 15px;
+			display: block;
+			margin: 15px auto; 
+			padding: 15px 45px;
+			width: 100%;
+			font-size: 13px;
+			font-weight: bold;
+			cursor: pointer;
+			opacity: 1;
+			visibility: visible;
+			-webkit-transition: all .3s ease;
+			
+			&:hover {
+				transition: all .3s ease;
+				background-color: rgba(0,0,0,0.8);
+			}
+		}
+	}
+	
+	.login {
+		position: absolute;
+		top: 20%;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: #fff;
+		z-index: 5;
+		-webkit-transition: all .3s ease;
+		
+		&::before {
+			content: '';
+			position: absolute;
+			left: 50%;
+			top: -20px;
+			-webkit-transform: translate(-50%, 0);
+			background-color: #fff;
+			width: 200%;
+			height: 250px;
+			border-radius: 50%;
+			z-index: 4;
+			-webkit-transition: all .3s ease;
+		}
+		
+		.center {
+			position: absolute;
+			top: calc(50% - 10%);
+			left: 50%;
+			-webkit-transform: translate(-50%, -50%);
+			width: 65%;
+			z-index: 5;
+			-webkit-transition: all .3s ease;
+			
+			.form-title {
+				color: #000;
+				font-size: 1.7em;
+				text-align: center;
+
+				span {
+					color: rgba(0,0,0,0.4);
+					opacity: 0;
+			    visibility: hidden;
+				  -webkit-transition: all .3s ease;
+				}
+			}
+
+			.form-holder {
+				border-radius: 15px;
+				background-color: #fff;
+				border: 1px solid #eee;
+				overflow: hidden;
+				margin-top: 50px;
+				opacity: 1;
+				visibility: visible;
+				-webkit-transition: all .3s ease;
+
+				.input {
+					border: 0;
+					outline: none;
+					box-shadow: none;
+					display: block;
+					height: 30px;
+					line-height: 30px;
+					padding: 8px 15px;
+					border-bottom: 1px solid #eee;
+					width: 100%;
+					font-size: 12px;
+
+					&:last-child {
+						border-bottom: 0;
+					}
+					&::-webkit-input-placeholder {
+						color: rgba(0,0,0,0.4);
+					}
+				}
+			}
+
+			.submit-btn {
+				background-color: #6B92A4;
+				color: rgba(256,256,256,0.7);
+				border:0;
+				border-radius: 15px;
+				display: block;
+				margin: 15px auto; 
+				padding: 15px 45px;
+				width: 100%;
+				font-size: 13px;
+				font-weight: bold;
+				cursor: pointer;
+				opacity: 1;
+				visibility: visible;
+				-webkit-transition: all .3s ease;
+
+				&:hover {
+					transition: all .3s ease;
+					background-color: rgba(0,0,0,0.8);
+				}
+			}
+		}
+		
+		&.slide-up {
+			top: 90%;
+			-webkit-transition: all .3s ease;
+		}
+		
+		&.slide-up .center {
+			top: 10%;
+			-webkit-transform: translate(-50%, 0%);
+			-webkit-transition: all .3s ease;
+		}
+		
+		&.slide-up .form-holder,
+		&.slide-up .submit-btn {
+			opacity: 0;
+			visibility: hidden;
+			-webkit-transition: all .3s ease;
+		}
+		
+		&.slide-up .form-title {
+			font-size: 1em;
+			margin: 0;
+			padding: 0;
+			cursor: pointer;
+			-webkit-transition: all .3s ease;
+		}
+		
+		&.slide-up .form-title span {
+			margin-right: 5px;
+			opacity: 1;
+			visibility: visible;
+			-webkit-transition: all .3s ease;
+		}
+	}
+}
\ No newline at end of file

assets/css/noscript.css

+/*
+	Lens by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Main */
+
+	#main {
+		opacity: 1 !important;
+		right: 0 !important;
+	}
+
+	body:before {
+		content: 'Javascript is disabled :(';
+		display: block;
+		position: absolute;
+		top: 50%;
+		width: calc(100% - 22.5em * 0.333333333);
+		height: 4em;
+		margin-top: -2em;
+		color: #272727;
+		cursor: default;
+		font-size: 3em;
+		line-height: 4em;
+		text-align: center;
+		white-space: nowrap;
+		left: 0;
+	}
\ No newline at end of file

assets/css/profile.css

+@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Bree+Serif&display=swap");
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.imager{
+  width: 30%;
+  transition: .2s;
+}
+.imager:hover{
+  transform: scale(1.1);
+}
+
+
+.comment {
+    position: relative;
+    margin-top: 30px;
+    margin-right: 20px;
+    margin-left: 50px;
+}
+
+.comment-avatar {
+    position: absolute;
+    top: 0;
+    left: -40px;
+    width: 70px;
+    height: 70px;
+    background: #7f8c8c url("/assets/course14/avatar.png") no-repeat 50% 50%;
+}
+
+.comment-author {
+    margin-bottom: 5px;
+    padding-left: 45px;
+    padding-right: 20px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.comment-text {
+    padding: 12px;
+    padding-left: 45px;
+    background-color: #f8f8f8;
+    border-bottom: 5px solid #e5e6e6;
+}
+
+.comment-date {
+    margin-top: 5px;
+    font-size: 12px;
+    color: #bdc3c7;
+}
+
+.comment-reply {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 15px;
+    height: 15px;
+    background: url("/assets/course14/reply.png") no-repeat 0 0;
+}
+
+
+body {
+  background: #e9e9e9;
+  overflow-x: hidden;
+  padding-top: 90px;
+  font-family: "Poppins", sans-serif;
+  margin: 0 100px;
+}
+
+.linker{
+  background-color: #dbdbdb;
+  padding: 3px;
+  text-decoration: none;
+  color: #333;
+  transition: .2s;
+
+}
+.linker:hover{
+  margin-left: 10px;  
+}
+
+.profile-header {
+  background: #fff;
+  width: 100%;
+  display: flex;
+  height: 190px;
+  position: relative;
+  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2);
+}
+
+.profile-nav-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 35px;
+  text-align: center;
+}
+
+.profile-nav-info h3 {
+  font-variant: small-caps;
+  font-size: 2.5rem;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+.profile-nav-info .address {
+  display: flex;
+  font-weight: bold;
+  color: #6da1a3;
+}
+
+.profile-nav-info .address p {
+  margin-right: 5px;
+}
+
+.profile-option {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  right: 50px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.5s ease-in-out;
+  outline: none;
+  background: #6da1a3;
+}
+
+.profile-option:hover {
+  background: #fff;
+  border: 1px solid #6da1a3;
+}
+.profile-option:hover .notification i {
+  color: #6da1a3;
+}
+
+.profile-option:hover span {
+  background: #6da1a3;
+}
+
+.profile-option .notification i {
+  color: #fff;
+  font-size: 1.2rem;
+  transition: all 0.5s ease-in-out;
+}
+
+.profile-option .notification .alert-message {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background: #fff;
+  color: #6da1a3;
+  border: 1px solid #6da1a3;
+  padding: 5px;
+  border-radius: 50%;
+  height: 20px;
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.8rem;
+  font-weight: bold;
+}
+
+.main-bd {
+  width: 100%;
+  display: flex;
+  padding-right: 15px;
+}
+
+.profile-side {
+  width: 300px;
+  background: #fff;
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
+  padding: 30px 30px 20px;
+  font-family: "Bree Serif", serif;
+  margin-left: 10px;
+  z-index: 99;
+}
+
+.profile-side p {
+  margin-bottom: 17px;
+  color: #333;
+  font-size: 14px;
+}
+
+.profile-side p i {
+  color: #6da1a3;
+  margin-right: 10px;
+}
+
+.mobile-no i {
+  transform: rotateY(180deg);
+  color: #6da1a3;
+}
+
+.profile-btn {
+  display: flex;
+}
+
+button.chatbtn,
+button.createbtn {
+  border: 0;
+  padding: 10px;
+  width: 100%;
+  border-radius: 3px;
+  background: #6da1a3;
+  color: #fff;
+  font-family: "Bree Serif";
+  font-size: 1rem;
+  margin: 5px 2px;
+  cursor: pointer;
+  outline: none;
+  margin-bottom: 10px;
+  transition: background 0.3s ease-in-out;
+  box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.3);
+}
+
+button.chatbtn:hover,
+button.createbtn:hover {
+  background: #6da1a3;
+}
+
+button.chatbtn i,
+button.createbtn i {
+  margin-right: 5px;
+}
+
+.user-rating {
+  display: flex;
+}
+
+.user-rating h3 {
+  font-size: 2.5rem;
+  font-weight: 200;
+  margin-right: 5px;
+  letter-spacing: 1px;
+  color: #666;
+}
+
+.user-rating .no-of-user-rate {
+  font-size: 0.9rem;
+}
+
+.rate {
+  padding-top: 6px;
+}
+
+.rate i {
+  font-size: 0.9rem;
+  color: #6da1a3;
+}
+
+.nav {
+  width: 100%;
+  z-index: -1;
+}
+
+.nav ul {
+  display: flex;
+  justify-content: space-around;
+  list-style-type: none;
+  height: 40px;
+  background: #fff;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+.nav ul li {
+  padding: 10px;
+  width: 100%;
+  cursor: pointer;
+  text-align: center;
+  transition: all 0.2s ease-in-out;
+}
+
+.nav ul li:hover,
+.nav ul li.active {
+  box-shadow: 0px -3px 0px #6da1a3 inset;
+}
+
+.profile-body {
+  width: 100%;
+  z-index: -1;
+}
+
+.tab {
+  display: none;
+}
+
+.tab {
+  padding: 20px;
+  width: 100%;
+  text-align: center;
+}
+
+@media (max-width: 1100px) {
+  .profile-side {
+    width: 250px;
+    padding: 15px 15px 20px;
+  }
+
+  .profile-img img {
+    height: 200px;
+    width: 200px;
+    left: 50px;
+    top: 50px;
+  }
+}
+
+@media (max-width: 900px) {
+  body {
+    margin: 0 20px;
+  }
+
+  .profile-header {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    text-align: center;
+    padding-bottom: 20px;
+  }
+
+  .profile-img {
+    float: left;
+    width: 100%;
+    height: 200px;
+  }
+
+  .profile-img img {
+    position: relative;
+    height: 200px;
+    width: 200px;
+    left: 0px;
+  }
+
+  .profile-nav-info {
+    padding-left: 0px;
+    padding: -10px;
+    text-align: center;
+  }
+
+  .profile-option {
+    right: 20px;
+    top: 75%;
+    transform: translateY(50%);
+  }
+
+  .main-bd {
+    flex-direction: column;
+    padding-right: 0;
+  }
+
+  .profile-side {
+    width: 100%;
+    text-align: center;
+    padding: 20px;
+    margin: 5px 0;
+  }
+
+  .profile-nav-info .address {
+    justify-content: center;
+  }
+
+  .user-rating {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 400px) {
+  body {
+    margin: ;
+  }
+
+  .profile-header h3 {
+  }
+
+  .profile-option {
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    right: 15px;
+    top: 83%;
+  }
+
+  .profile-option .notification .alert-message {
+    top: -3px;
+    right: -4px;
+    padding: 4px;
+    height: 15px;
+    width: 15px;
+    font-size: 0.7rem;
+  }
+
+  .profile-nav-info h3 {
+    font-size: 1.9rem;
+  }
+
+  .profile-nav-info .address p,
+  .profile-nav-info .address span {
+    font-size: 0.7rem;
+  }
+}
+#see-more-bio,
+#see-less-bio {
+  color: blue;
+  cursor: pointer;
+  text-transform: lowercase;
+}
+.tab h1 {
+  font-family: "Bree Serif", sans-serif;
+  display: flex;
+  justify-content: center;
+  margin: 20px auto;
+}
+
+.post_container{
+  text-align: center;
+  margin: 0 auto;
+}
+
+.create_post {
+    width: 100%;
+    margin-top: 10%;
+    margin-bottom: 3%;
+    background-image: url("https://images.unsplash.com/photo-1491147334573-44cbb4602074?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    border-radius: 20px;
+    font-size: 16px;
+    font-family: Nunito;
+    font-style: normal;
+    font-weight: 600;
+    box-shadow: 0 0px 40px rgba(0, 0, 0, 0.37);
+    transition: all 0.3s;
+    &:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.616);
+    }
+}
+
+.country{
+  color: #6da1a3;
+}
+
+.user_box {
+    width: 100%;
+    text-align: center;
+    height: fit-content;
+    transform: translateY(25px);
+}
+
+#user_img_container {
+    display: block;
+    overflow: hidden;
+    border-radius: 50px;
+    height: 100px;
+    width: 100px;
+    margin: auto;
+    box-shadow: 0 0px 40px rgba(0, 0, 0, 0.37);
+    transition: all 0.3s;
+    img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+}
+
+.pic_conetnt {
+    display: block;
+    overflow: hidden;
+    border-radius: 0px;
+    height: 35px;
+    width: 35px;
+    margin: auto;
+    box-shadow: 0 0px 40px rgba(0, 0, 0, 0.37);
+    transition: all 0.3s;
+}
+
+
+#username {
+    display: block;
+    margin: 5px 0px;
+    font-size: 20px;
+    color: white;
+}
+
+.overlay {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.67);
+    border-radius: 20px;
+    padding: 10px;
+}
+
+.post_content {
+    width: 90%;
+    margin: auto;
+    transform: translateY(40px);
+}
+
+#post_text {
+    margin: 8px;
+    border-radius: 20px;
+    border: none;
+    width: 100%;
+    color: white;
+    padding: 10px;
+    outline: none;
+    background: rgba(0, 0, 0, 0);
+    font-family: Nunito;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    background-color: rgba(255, 255, 255, 0.021);
+    resize: none;
+    transition: background-color 0.25s;
+    &:focus,
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.062);
+    }
+}
+
+.bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 90%;
+    margin: 40px auto;
+}
+
+.icon_container {
+    display: inline-block;
+/*    // margin: 5px;*/
+    padding: 10px;
+/*    // background: rgb(255, 22, 22);*/
+    color: rgb(250, 250, 250);
+    border-radius: 50px;
+    transition: all 0.3s;
+    &:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+    svg {
+        vertical-align: middle;
+    }
+}
+
+.post_btn {
+    border: none;
+    border-radius: 45px;
+    padding: 0px 25px;
+    font-size: 16px;
+    outline: none;
+    color: white;
+    font-weight: bold;
+    background: rgba(255, 255, 255, 0.068);
+    transition: all 0.3s;
+    &:hover {
+        background: rgba(255, 255, 255, 0.15);
+    }
+}
\ No newline at end of file

assets/js/ie/html5shiv.js

+/*
+ HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
+*/
+(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
+a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}</style>";
+c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
+"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
+for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

assets/js/ie/respond.min.js

+/*! Respond.js v1.4.2: min/max-width media query polyfill
+ * Copyright 2014 Scott Jehl
+ * Licensed under MIT
+ * http://j.mp/respondjs */
+
+!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b<t.length;b++){var c=t[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!p[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(w(c.styleSheet.rawCssText,e,f),p[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!s||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}x()};y(),c.update=y,c.getEmValue=u,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
\ No newline at end of file

assets/js/login.js

+console.clear();
+
+const loginBtn = document.getElementById('login');
+const signupBtn = document.getElementById('signup');
+
+loginBtn.addEventListener('click', (e) => {
+	let parent = e.target.parentNode.parentNode;
+	Array.from(e.target.parentNode.parentNode.classList).find((element) => {
+		if(element !== "slide-up") {
+			parent.classList.add('slide-up')
+		}else{
+			signupBtn.parentNode.classList.add('slide-up')
+			parent.classList.remove('slide-up')
+		}
+	});
+});
+
+signupBtn.addEventListener('click', (e) => {
+	let parent = e.target.parentNode;
+	Array.from(e.target.parentNode.classList).find((element) => {
+		if(element !== "slide-up") {
+			parent.classList.add('slide-up')
+		}else{
+			loginBtn.parentNode.parentNode.classList.add('slide-up')
+			parent.classList.remove('slide-up')
+		}
+	});
+});
\ No newline at end of file

assets/js/profile.js

+$(".nav ul li").click(function() {
+  $(this)
+    .addClass("active")
+    .siblings()
+    .removeClass("active");
+});
+
+const tabBtn = document.querySelectorAll(".nav ul li");
+const tab = document.querySelectorAll(".tab");
+
+function tabs(panelIndex) {
+  tab.forEach(function(node) {
+    node.style.display = "none";
+  });
+  tab[panelIndex].style.display = "block";
+}
+tabs(0);
+
+let bio = document.querySelector(".bio");
+const bioMore = document.querySelector("#see-more-bio");
+const bioLength = bio.innerText.length;
+
+bio.oldText = bio.innerText;
+
+function bioText() {
+  bio.innerText = bio.innerText.substring(0, 100) + "...";
+  bio.innerHTML += `<span onclick='addLength()' id='see-more-bio'>See More</span>`;
+}
+//        console.log(bio.innerText)
+
+bioText();
+
+function addLength() {
+  bio.innerText = bio.oldText;
+  bio.innerHTML +=
+    "&nbsp;" + `<span onclick='bioText()' id='see-less-bio'>See Less</span>`;
+  document.getElementById("see-less-bio").addEventListener("click", () => {
+    document.getElementById("see-less-bio").style.display = "none";
+  });
+}
+if (document.querySelector(".alert-message").innerText > 9) {
+  document.querySelector(".alert-message").style.fontSize = ".7rem";
+}
+
+
+
+
+window.addEventListener('DOMContentLoaded', (event) => {
+            function addAutoResize() {
+                document.querySelectorAll('[data-autoresize]').forEach(function(element) {
+                    element.style.boxSizing = 'border-box';
+                    var offset = element.offsetHeight - element.clientHeight;
+                    element.addEventListener('input', function(event) {
+                        event.target.style.height = 'auto';
+                        event.target.style.height = event.target.scrollHeight + offset + 'px';
+                    });
+                    element.removeAttribute('data-autoresize');
+                });
+            }
+            feather.replace()
+
+            addAutoResize()
+        });
\ No newline at end of file

assets/js/skel.min.js

+/* skel.js v3.0.0 | (c) n33 | skel.io | MIT licensed */
+var skel=function(){"use strict";var t={breakpointIds:null,events:{},isInit:!1,obj:{attachments:{},breakpoints:{},head:null,states:{}},sd:"/",state:null,stateHandlers:{},stateId:"",vars:{},DOMReady:null,indexOf:null,isArray:null,iterate:null,matchesMedia:null,extend:function(e,n){t.iterate(n,function(i){t.isArray(n[i])?(t.isArray(e[i])||(e[i]=[]),t.extend(e[i],n[i])):"object"==typeof n[i]?("object"!=typeof e[i]&&(e[i]={}),t.extend(e[i],n[i])):e[i]=n[i]})},newStyle:function(t){var e=document.createElement("style");return e.type="text/css",e.innerHTML=t,e},_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,i=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+i in n||"Webkit"+i in n||"O"+i in n||"ms"+i in n},on:function(e,n){var i=e.split(/[\s]+/);return t.iterate(i,function(e){var a=i[e];if(t.isInit){if("init"==a)return void n();if("change"==a)n();else{var r=a.charAt(0);if("+"==r||"!"==r){var o=a.substring(1);if(o in t.obj.breakpoints)if("+"==r&&t.obj.breakpoints[o].active)n();else if("!"==r&&!t.obj.breakpoints[o].active)return void n()}}}t.events[a]||(t.events[a]=[]),t.events[a].push(n)}),t},trigger:function(e){return t.events[e]&&0!=t.events[e].length?(t.iterate(t.events[e],function(n){t.events[e][n]()}),t):void 0},breakpoint:function(e){return t.obj.breakpoints[e]},breakpoints:function(e){function n(t,e){this.name=this.id=t,this.media=e,this.active=!1,this.wasActive=!1}return n.prototype.matches=function(){return t.matchesMedia(this.media)},n.prototype.sync=function(){this.wasActive=this.active,this.active=this.matches()},t.iterate(e,function(i){t.obj.breakpoints[i]=new n(i,e[i])}),window.setTimeout(function(){t.poll()},0),t},addStateHandler:function(e,n){t.stateHandlers[e]=n},callStateHandler:function(e){var n=t.stateHandlers[e]();t.iterate(n,function(e){t.state.attachments.push(n[e])})},changeState:function(e){t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].sync()}),t.vars.lastStateId=t.stateId,t.stateId=e,t.breakpointIds=t.stateId===t.sd?[]:t.stateId.substring(1).split(t.sd),t.obj.states[t.stateId]?t.state=t.obj.states[t.stateId]:(t.obj.states[t.stateId]={attachments:[]},t.state=t.obj.states[t.stateId],t.iterate(t.stateHandlers,t.callStateHandler)),t.detachAll(t.state.attachments),t.attachAll(t.state.attachments),t.vars.stateId=t.stateId,t.vars.state=t.state,t.trigger("change"),t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].active?t.obj.breakpoints[e].wasActive||t.trigger("+"+e):t.obj.breakpoints[e].wasActive&&t.trigger("-"+e)})},generateStateConfig:function(e,n){var i={};return t.extend(i,e),t.iterate(t.breakpointIds,function(e){t.extend(i,n[t.breakpointIds[e]])}),i},getStateId:function(){var e="";return t.iterate(t.obj.breakpoints,function(n){var i=t.obj.breakpoints[n];i.matches()&&(e+=t.sd+i.id)}),e},poll:function(){var e="";e=t.getStateId(),""===e&&(e=t.sd),e!==t.stateId&&t.changeState(e)},_attach:null,attach:function(e){var n=t.obj.head,i=e.element;return i.parentNode&&i.parentNode.tagName?!1:(t._attach||(t._attach=n.firstChild),n.insertBefore(i,t._attach.nextSibling),e.permanent&&(t._attach=i),!0)},attachAll:function(e){var n=[];t.iterate(e,function(t){n[e[t].priority]||(n[e[t].priority]=[]),n[e[t].priority].push(e[t])}),n.reverse(),t.iterate(n,function(e){t.iterate(n[e],function(i){t.attach(n[e][i])})})},detach:function(t){var e=t.element;return t.permanent||!e.parentNode||e.parentNode&&!e.parentNode.tagName?!1:(e.parentNode.removeChild(e),!0)},detachAll:function(e){var n={};t.iterate(e,function(t){n[e[t].id]=!0}),t.iterate(t.obj.attachments,function(e){e in n||t.detach(t.obj.attachments[e])})},attachment:function(e){return e in t.obj.attachments?t.obj.attachments[e]:null},newAttachment:function(e,n,i,a){return t.obj.attachments[e]={id:e,element:n,priority:i,permanent:a}},init:function(){t.initMethods(),t.initVars(),t.initEvents(),t.obj.head=document.getElementsByTagName("head")[0],t.isInit=!0,t.trigger("init")},initEvents:function(){t.on("resize",function(){t.poll()}),t.on("orientationChange",function(){t.poll()}),t.DOMReady(function(){t.trigger("ready")}),window.onload&&t.on("load",window.onload),window.onload=function(){t.trigger("load")},window.onresize&&t.on("resize",window.onresize),window.onresize=function(){t.trigger("resize")},window.onorientationchange&&t.on("orientationChange",window.onorientationchange),window.onorientationchange=function(){t.trigger("orientationChange")}},initMethods:function(){document.addEventListener?!function(e,n){t.DOMReady=n()}("domready",function(){function t(t){for(r=1;t=n.shift();)t()}var e,n=[],i=document,a="DOMContentLoaded",r=/^loaded|^c/.test(i.readyState);return i.addEventListener(a,e=function(){i.removeEventListener(a,e),t()}),function(t){r?t():n.push(t)}}):!function(e,n){t.DOMReady=n()}("domready",function(t){function e(t){for(h=1;t=i.shift();)t()}var n,i=[],a=!1,r=document,o=r.documentElement,s=o.doScroll,c="DOMContentLoaded",d="addEventListener",u="onreadystatechange",l="readyState",f=s?/^loaded|^c/:/^loaded|c/,h=f.test(r[l]);return r[d]&&r[d](c,n=function(){r.removeEventListener(c,n,a),e()},a),s&&r.attachEvent(u,n=function(){/^c/.test(r[l])&&(r.detachEvent(u,n),e())}),t=s?function(e){self!=top?h?e():i.push(e):function(){try{o.doScroll("left")}catch(n){return setTimeout(function(){t(e)},50)}e()}()}:function(t){h?t():i.push(t)}}),Array.prototype.indexOf?t.indexOf=function(t,e){return t.indexOf(e)}:t.indexOf=function(t,e){if("string"==typeof t)return t.indexOf(e);var n,i,a=e?e:0;if(!this)throw new TypeError;if(i=this.length,0===i||a>=i)return-1;for(0>a&&(a=i-Math.abs(a)),n=a;i>n;n++)if(this[n]===t)return n;return-1},Array.isArray?t.isArray=function(t){return Array.isArray(t)}:t.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)},Object.keys?t.iterate=function(t,e){if(!t)return[];var n,i=Object.keys(t);for(n=0;i[n]&&e(i[n],t[i[n]])!==!1;n++);}:t.iterate=function(t,e){if(!t)return[];var n;for(n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(n,t[n])===!1)break},window.matchMedia?t.matchesMedia=function(t){return""==t?!0:window.matchMedia(t).matches}:window.styleMedia||window.media?t.matchesMedia=function(t){if(""==t)return!0;var e=window.styleMedia||window.media;return e.matchMedium(t||"all")}:window.getComputedStyle?t.matchesMedia=function(t){if(""==t)return!0;var e=document.createElement("style"),n=document.getElementsByTagName("script")[0],i=null;e.type="text/css",e.id="matchmediajs-test",n.parentNode.insertBefore(e,n),i="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle;var a="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=a:e.textContent=a,"1px"===i.width}:t.matchesMedia=function(t){if(""==t)return!0;var e,n,i,a,r={"min-width":null,"max-width":null},o=!1;for(i=t.split(/\s+and\s+/),e=0;e<i.length;e++)n=i[e],"("==n.charAt(0)&&(n=n.substring(1,n.length-1),a=n.split(/:\s+/),2==a.length&&(r[a[0].replace(/^\s+|\s+$/g,"")]=parseInt(a[1]),o=!0));if(!o)return!1;var s=document.documentElement.clientWidth,c=document.documentElement.clientHeight;return null!==r["min-width"]&&s<r["min-width"]||null!==r["max-width"]&&s>r["max-width"]||null!==r["min-height"]&&c<r["min-height"]||null!==r["max-height"]&&c>r["max-height"]?!1:!0},navigator.userAgent.match(/MSIE ([0-9]+)/)&&RegExp.$1<9&&(t.newStyle=function(t){var e=document.createElement("span");return e.innerHTML='&nbsp;<style type="text/css">'+t+"</style>",e})},initVars:function(){var e,n,i,a=navigator.userAgent;e="other",n=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(RegExp.$1),!1):void 0}),t.vars.browser=e,t.vars.browserVersion=n,e="other",n=0,i=[["ios",/([0-9_]+) like Mac OS X/,function(t){return t.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(t){return 0}],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(t){return t.replace("_",".").replace("_","")}],["wp",/Windows Phone ([0-9\.]+)/,null],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(i[2]?i[2](RegExp.$1):RegExp.$1),!1):void 0}),t.vars.os=e,t.vars.osVersion=n,t.vars.IEVersion="ie"==t.vars.browser?t.vars.browserVersion:99,t.vars.touch="wp"==t.vars.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),t.vars.mobile="wp"==t.vars.os||"android"==t.vars.os||"ios"==t.vars.os||"bb"==t.vars.os}};return t.init(),t}();!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.skel=e()}(this,function(){return skel});

assets/sass/base/_page.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Basic */
+
+	// MSIE: Required for IEMobile.
+	/*
+		@-ms-viewport {
+			width: device-width;
+		}
+	*/
+
+	// Ensures page width is always >=320px.
+		@include breakpoint(xsmall) {
+			html, body {
+				min-width: 320px;
+			}
+		}
+
+	// Prevents animation/transition flicker on load.
+		body.is-loading-0 {
+			*, *:before, *:after {
+				@include vendor('animation', 'none !important');
+				@include vendor('transition', 'none !important');
+			}
+		}
+
+	html, body {
+		background-color: _palette(page-bg);
+		overflow: hidden;
+	}

assets/sass/base/_typography.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Type */
+
+	html {
+		font-size: 16pt;
+
+		@include breakpoint(xlarge) {
+			font-size: 12pt;
+		}
+
+		@include breakpoint(large) {
+			font-size: 11pt;
+		}
+	}
+
+	body {
+		background-color: _palette(bg);
+		color: _palette(fg);
+	}
+
+	body, input, select, textarea {
+		font-family: _font(family);
+		font-weight: _font(weight);
+		line-height: 1.65;
+		font-size: 1em;
+		color: _palette(fg);
+	}
+
+	a {
+		@include vendor('transition', ('color #{_duration(transition)} ease', 'border-bottom-color #{_duration(transition)} ease'));
+		border-bottom: dotted 1px;
+		color: inherit;
+		text-decoration: none;
+
+		&:hover {
+			border-bottom-color: transparent;
+			color: _palette(accent);
+		}
+	}
+
+	strong, b {
+		font-weight: _font(weight);
+		color: _palette(fg-bold);
+	}
+
+	em, i {
+		font-style: italic;
+	}
+
+	p {
+		margin: 0 0 _size(element-margin) 0;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		font-weight: _font(weight);
+		line-height: 1.25;
+		margin: 0 0 (_size(element-margin) * 0.4) 0;
+		color: _palette(fg-bold);
+
+		a {
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
+	h2 {
+		font-size: 1.25em;
+	}
+
+	h3 {
+		font-size: 1em;
+	}
+
+	h4 {
+		font-size: 0.9em;
+	}
+
+	h5 {
+		font-size: 0.8em;
+	}
+
+	h6 {
+		font-size: 0.7em;
+	}
+
+	sub {
+		font-size: 0.8em;
+		position: relative;
+		top: 0.5em;
+	}
+
+	sup {
+		font-size: 0.8em;
+		position: relative;
+		top: -0.5em;
+	}
+
+	blockquote {
+		border-left: solid (_size(border-width) * 4) _palette(border);
+		font-style: italic;
+		margin: 0 0 _size(element-margin) 0;
+		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+	}
+
+	code {
+		border-radius: _size(border-radius);
+		border: solid _size(border-width);
+		font-family: _font(family-fixed);
+		font-size: 0.9em;
+		margin: 0 0.25em;
+		padding: 0.25em 0.65em;
+		border-color: _palette(border);
+	}
+
+	pre {
+		-webkit-overflow-scrolling: touch;
+		font-family: _font(family-fixed);
+		font-size: 0.9em;
+		margin: 0 0 _size(element-margin) 0;
+
+		code {
+			display: block;
+			padding: 1em 1.5em;
+			overflow-x: auto;
+		}
+	}
+
+	hr {
+		border: 0;
+		border-bottom: solid _size(border-width) _palette(border);
+		margin: _size(element-margin) 0;
+
+		&.major {
+			margin: (_size(element-margin) * 1.5) 0;
+		}
+	}
+
+	.align-left {
+		text-align: left;
+	}
+
+	.align-center {
+		text-align: center;
+	}
+
+	.align-right {
+		text-align: right;
+	}

assets/sass/components/_button.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'background-color #{_duration(transition)} ease-in-out',
+			'border-color #{_duration(transition)} ease-in-out',
+			'color #{_duration(transition)} ease-in-out'
+		));
+		background-color: transparent;
+		border-radius: _size(border-radius);
+		border: solid 1px _palette(border);
+		color: _palette(fg-bold);
+		cursor: pointer;
+		display: inline-block;
+		line-height: 1;
+		padding: 0.75em 1.5em;
+		text-align: center;
+		text-decoration: none;
+		white-space: nowrap;
+
+		&:hover {
+			border-color: _palette(accent);
+			color: _palette(accent);
+
+			&:active {
+				background-color: transparentize(_palette(accent), 0.85);
+			}
+		}
+
+		&.icon {
+			padding-left: 1.35em;
+
+			&:before {
+				margin-right: 0.5em;
+			}
+		}
+
+		&.fit {
+			display: block;
+			margin: 0 0 (_size(element-margin) * 0.5) 0;
+			width: 100%;
+		}
+
+		&.small {
+			font-size: 0.8em;
+		}
+
+		&.big {
+			font-size: 1.35em;
+		}
+
+		&.disabled,
+		&:disabled {
+			@include vendor('pointer-events', 'none');
+			opacity: 0.25;
+		}
+	}

assets/sass/components/_form.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+	form {
+		margin: 0 0 _size(element-margin) 0;
+	}
+
+	label {
+		color: _palette(fg-bold);
+		display: block;
+		font-size: 0.9em;
+		font-weight: _font(weight);
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select,
+	textarea {
+		@include vendor('appearance', 'none');
+		background-color: transparent;
+		border-radius: _size(border-radius);
+		border: solid _size(border-width) _palette(border);
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0 0.75em;
+		text-decoration: none;
+		width: 100%;
+
+		&:invalid {
+			box-shadow: none;
+		}
+
+		&:focus {
+			border-color: _palette(accent);
+		}
+	}
+
+	.select-wrapper {
+		@include icon;
+		display: block;
+		position: relative;
+
+		&:before {
+			color: _palette(border);
+			content: '\f107';
+			display: block;
+			height: _size(element-height);
+			line-height: _size(element-height);
+			pointer-events: none;
+			position: absolute;
+			right: 0;
+			text-align: center;
+			top: 0;
+			width: _size(element-height);
+		}
+
+		select::-ms-expand {
+			display: none;
+		}
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	select {
+		height: _size(element-height);
+	}
+
+	textarea {
+		padding: 0.75em 1em;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"], {
+		@include vendor('appearance', 'none');
+		display: block;
+		float: left;
+		margin-right: -2em;
+		opacity: 0;
+		width: 1em;
+		z-index: -1;
+
+		& + label {
+			@include icon;
+			color: _palette(fg);
+			cursor: pointer;
+			display: inline-block;
+			font-size: 1em;
+			font-weight: _font(weight);
+			margin: 0;
+			padding-left: (_size(element-height) * 0.6) + 0.75em;
+			padding-right: 0.75em;
+			position: relative;
+
+			&:before {
+				background: transparent;
+				border-radius: _size(border-radius);
+				border: solid _size(border-width) _palette(border);
+				content: '';
+				display: inline-block;
+				height: (_size(element-height) * 0.6);
+				left: 0;
+				line-height: (_size(element-height) * 0.575);
+				position: absolute;
+				text-align: center;
+				top: 0;
+				width: (_size(element-height) * 0.6);
+			}
+		}
+
+		&:checked + label {
+			&:before {
+				background-color: _palette(fg-bold);
+				border-color: _palette(fg-bold);
+				color: _palette(bg);
+				content: '\f00c';
+			}
+		}
+
+		&:focus + label {
+			&:before {
+				border-color: _palette(accent);
+			}
+		}
+	}
+
+	input[type="checkbox"] {
+		& + label {
+			&:before {
+				border-radius: _size(border-radius);
+			}
+		}
+	}
+
+	input[type="radio"] {
+		& + label {
+			&:before {
+				border-radius: 100%;
+			}
+		}
+	}
+
+	::-webkit-input-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	:-moz-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	::-moz-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	:-ms-input-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	.formerize-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	.field {
+		margin: 0 0 _size(element-margin) 0;
+	}

assets/sass/components/_icon.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icon */
+
+	.icon {
+		@include icon;
+		border-bottom: none;
+		position: relative;
+
+		> .label {
+			display: none;
+		}
+	}

assets/sass/components/_list.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* List */
+
+	ol {
+		list-style: decimal;
+		margin: 0 0 _size(element-margin) 0;
+		padding-left: 1.25em;
+
+		li {
+			padding-left: 0.25em;
+		}
+	}
+
+	ul {
+		list-style: disc;
+		margin: 0 0 _size(element-margin) 0;
+		padding-left: 1em;
+
+		li {
+			padding-left: 0.5em;
+		}
+
+		&.alt {
+			list-style: none;
+			padding-left: 0;
+
+			li {
+				border-top: solid _size(border-width) _palette(border);
+				padding: 0.5em 0;
+
+				&:first-child {
+					border-top: 0;
+					padding-top: 0;
+				}
+			}
+		}
+
+		&.icons {
+			cursor: default;
+			list-style: none;
+			padding-left: 0;
+
+			li {
+				display: inline-block;
+				padding: 0 1em 0 0;
+
+				&:last-child {
+					padding-right: 0;
+				}
+
+				.icon {
+					&:before {
+						font-size: 1.5rem;
+					}
+				}
+			}
+		}
+
+		&.actions {
+			cursor: default;
+			list-style: none;
+			padding-left: 0;
+
+			li {
+				display: inline-block;
+				padding: 0 (_size(element-margin) * 0.5) 0 0;
+				vertical-align: middle;
+
+				&:last-child {
+					padding-right: 0;
+				}
+			}
+
+			&.small {
+				li {
+					padding: 0 (_size(element-margin) * 0.25) 0 0;
+				}
+			}
+
+			&.vertical {
+				li {
+					display: block;
+					padding: (_size(element-margin) * 0.5) 0 0 0;
+
+					&:first-child {
+						padding-top: 0;
+					}
+
+					> * {
+						margin-bottom: 0;
+					}
+				}
+
+				&.small {
+					li {
+						padding: (_size(element-margin) * 0.25) 0 0 0;
+
+						&:first-child {
+							padding-top: 0;
+						}
+					}
+				}
+			}
+
+			&.fit {
+				display: table;
+				margin-left: (_size(element-margin) * -0.5);
+				padding: 0;
+				table-layout: fixed;
+				width: calc(100% + #{(_size(element-margin) * 0.5)});
+
+				li {
+					display: table-cell;
+					padding: 0 0 0 (_size(element-margin) * 0.5);
+
+					> * {
+						margin-bottom: 0;
+					}
+				}
+
+				&.small {
+					margin-left: (_size(element-margin) * -0.25);
+					width: calc(100% + #{(_size(element-margin) * 0.25)});
+
+					li {
+						padding: 0 0 0 (_size(element-margin) * 0.25);
+					}
+				}
+			}
+		}
+	}
+
+	dl {
+		margin: 0 0 _size(element-margin) 0;
+
+		dt {
+			display: block;
+			font-weight: _font(weight);
+			margin: 0 0 (_size(element-margin) * 0.5) 0;
+		}
+
+		dd {
+			margin-left: _size(element-margin);
+		}
+	}

assets/sass/ie8.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+@import 'skel';
+
+/*
+	Lens by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Viewer */
+
+	#viewer {
+		width: 100%;
+	}

assets/sass/ie9.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+@import 'skel';
+
+/*
+	Lens by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Thumbnails */
+
+	#thumbnails {
+		&:after {
+			content: '';
+			display: block;
+			clear: both;
+		}
+
+		article {
+			float: left;
+		}
+	}
+
+/* Viewer */
+
+	#viewer {
+		.inner {
+			box-shadow: inset 0 0 9em 2em rgba(16,16,16,0.2);
+
+			&:before {
+				display: none;
+			}
+		}
+
+		.slide {
+			.caption {
+				background-color: rgba(16,16,16,0.5);
+			}
+		}
+	}

assets/sass/layout/_footer.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Footer */
+
+	#footer {
+		@include padding(2.25em, 2.25em);
+
+		.copyright {
+			list-style: none;
+			padding: 0;
+
+			li {
+				display: inline-block;
+				font-size: 0.8em;
+				padding: 0;
+			}
+		}
+	}

assets/sass/layout/_header.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+	#header {
+		@include padding(3em, 2.25em);
+
+		h1 {
+			font-size: 2.25em;
+			font-weight: _font(weight-bold);
+		}
+	}

assets/sass/layout/_main.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Main */
+
+	#main {
+		@include vendor('transition', ('opacity #{_duration(layout)} ease', 'right #{_duration(layout)} ease', 'left #{_duration(layout)} ease', 'visibility #{_duration(layout)}'));
+		-webkit-overflow-scrolling: touch;
+		position: fixed;
+		top: 0;
+		width: _size(main);
+		height: 100%;
+		background: _palette(bg);
+		outline: 0;
+		overflow-x: hidden;
+		overflow-y: auto;
+		text-align: _misc(main-align);
+		visibility: visible;
+		z-index: _misc(z-index-base);
+
+		@if _misc(main-side) == 'left' {
+			left: 0;
+		}
+		@else {
+			right: 0;
+		}
+
+		.toggle {
+			-webkit-tap-highlight-color: rgba(0,0,0,0);
+			position: absolute;
+			top: 0;
+			width: 4em;
+			height: 4em;
+			background-image: url('images/close-small-alt.svg');
+			background-repeat: no-repeat;
+			background-size: 32px 32px;
+			cursor: pointer;
+			display: none;
+			z-index: 1;
+
+			@if _misc(main-side) == 'left' {
+				background-position: calc(100% - 0.5em) 0.5em;
+				right: 0;
+			}
+			@else {
+				background-position: 0.5em 0.5em;
+				left: 0;
+			}
+		}
+
+		body.fullscreen & {
+			visibility: hidden;
+
+			@if _misc(main-side) == 'left' {
+				left: (_size(main) * -1);
+			}
+			@else {
+				right: (_size(main) * -1);
+			}
+		}
+
+		body.is-loading-1 & {
+			opacity: 0;
+
+			@if _misc(main-side) == 'left' {
+				left: -2em;
+			}
+			@else {
+				right: -2em;
+			}
+		}
+
+		@include breakpoint(large) {
+			width: _size(main-alt);
+
+			body.fullscreen & {
+				@if _misc(main-side) == 'left' {
+					left: (_size(main-alt) * -1);
+				}
+				@else {
+					right: (_size(main-alt) * -1);
+				}
+			}
+		}
+
+		@include breakpoint(medium) {
+			background: transparentize(_palette(bg), 0.075);
+
+			.toggle {
+				display: block;
+			}
+		}
+
+		@include breakpoint(xsmall) {
+			@include vendor('transition', ('opacity #{_duration(layout-alt)} ease', 'visibility #{_duration(layout-alt)}'));
+			width: 100%;
+			background: _palette(bg);
+			text-align: center;
+
+			body.is-loading-1 & {
+				left: auto !important;
+				right: auto !important;
+			}
+
+			body.fullscreen & {
+				left: auto !important;
+				right: auto !important;
+				opacity: 0;
+			}
+
+			.toggle {
+				display: none;
+			}
+		}
+	}

assets/sass/layout/_thumbnails.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Thumbnails */
+
+	#thumbnails {
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		padding: 0 0.75em;
+
+		article {
+			position: relative;
+			width: #{100% / _misc(thumbnails-per-row)};
+			background: #101010;
+			outline: 0;
+
+			.thumbnail {
+				-webkit-tap-highlight-color: rgba(0,0,0,0);
+				display: block;
+				position: relative;
+				border: 0;
+				outline: 0;
+
+				img {
+					display: block;
+					width: 100%;
+				}
+
+				&:before {
+					@include vendor('pointer-events', 'none');
+					@include vendor('transition', 'opacity 0.25s ease');
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 100%;
+					height: 100%;
+					box-shadow: inset 0 0 0 2px _palette(accent), inset 0 0 0px 3px rgba(0,0,0,0.15);
+					opacity: 0;
+					z-index: 1;
+				}
+
+				&:focus {
+					&:before {
+						opacity: 0.5;
+					}
+				}
+			}
+
+			h2, p {
+				display: none;
+			}
+
+			&.active {
+				.thumbnail {
+					&:before {
+						opacity: 1;
+					}
+				}
+			}
+		}
+
+		@include breakpoint(xsmall) {
+			article {
+				.thumbnail {
+					&:before {
+						display: none;
+					}
+				}
+			}
+		}
+	}

assets/sass/layout/_viewer.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+
+///
+/// Lens by HTML5 UP
+/// html5up.net | @n33co
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Viewer */
+
+	@include keyframes(spinner) {
+		0% {
+			@include vendor('transform', 'rotate(0deg)');
+		}
+
+		100% {
+			@include vendor('transform', 'rotate(360deg)');
+		}
+	}
+
+	#viewer {
+		@include vendor('transition', ('opacity #{_duration(layout)} ease', 'width #{_duration(layout)} ease'));
+		position: absolute;
+		top: 0;
+		width: calc(100% - #{_size(main)});
+		height: 100%;
+
+		@if _misc(main-side) == 'left' {
+			right: 0;
+		}
+		@else {
+			left: 0;
+		}
+
+		.inner {
+			@include vendor('pointer-events', 'none');
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 2;
+
+			> * {
+				@include vendor('pointer-events', 'auto');
+			}
+
+			&:before {
+				@include vendor('background-image', (
+					'linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))',
+					'linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0))'
+				));
+				content: '';
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+
+			.toggle {
+				-webkit-tap-highlight-color: rgba(0,0,0,0);
+				position: absolute;
+				top: 0;
+				width: 4em;
+				height: 4em;
+				background-image: url('images/close.svg');
+				background-repeat: no-repeat;
+				background-size: 64px 64px;
+				cursor: pointer;
+				z-index: 1;
+
+				@if _misc(main-side) == 'left' {
+					left: 0;
+					background-position: 0.75em 0.75em;
+				}
+				@else {
+					right: 0;
+					background-position: calc(100% - 0.75em) 0.75em;
+				}
+			}
+
+			.nav-next,
+			.nav-previous {
+				-webkit-tap-highlight-color: rgba(0,0,0,0);
+				position: absolute;
+				top: 50%;
+				width: 6em;
+				height: 6em;
+				margin-top: -3em;
+				background-image: url('images/arrow.svg');
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: contain;
+				cursor: pointer;
+			}
+
+			.nav-previous {
+				@include vendor('transform', 'scaleX(-1)');
+				left: 0;
+			}
+
+			.nav-next {
+				right: 0;
+			}
+		}
+
+		.slide {
+			@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 1;
+			z-index: 1;
+
+			.caption {
+				@include vendor('background-image', (
+					'linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0))',
+				));
+				@include padding(2em, 2em);
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				color: rgba(255,255,255,0.5);
+				z-index: 1;
+
+				h2, h3, h4, h5, h6 {
+					color: #fff;
+				}
+			}
+
+			.image {
+				@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background-repeat: no-repeat;
+				background-size: cover;
+				opacity: 0;
+			}
+
+			&:before {
+				@include vendor('animation', 'spinner #{_duration(spinner)} linear infinite');
+				@include vendor('transition', 'opacity #{_duration(slide)} ease-in-out');
+				content: '';
+				display: block;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				width: 3em;
+				height: 3em;
+				background-image: url('images/spinner.svg');
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: contain;
+				margin: -1.5em 0 0 -1.5em;
+				opacity: 0;
+			}
+
+			&.loading {
+				&:before {
+					opacity: 1;
+				}
+			}
+
+			&.active {
+				.image {
+					opacity: 1;
+				}
+			}
+		}
+
+		body.fullscreen & {
+			width: 100%;
+
+			.inner {
+				.toggle {
+					background-image: url('images/open.svg');
+				}
+			}
+		}
+
+		body.is-loading-1 & {
+			opacity: 0;
+		}
+
+		body.is-loading-2 & {
+			.slide {
+				opacity: 0;
+			}
+		}
+
+		@include breakpoint(large) {
+			width: calc(100% - #{_size(main-alt)});
+		}
+
+		@include breakpoint(medium) {
+			width: 100%;
+
+			.inner {
+				.toggle {
+					@include vendor('transition', 'opacity #{_duration(layout)} ease');
+					background-image: url('images/open.svg');
+					opacity: 0;
+
+					@if _misc(main-side) == 'left' {
+						left: 0;
+					}
+					@else {
+						right: 0;
+					}
+				}
+			}
+
+			body.fullscreen & {
+				.inner {
+					.toggle {
+						opacity: 1;
+					}
+				}
+			}
+		}
+
+		@include breakpoint(small) {
+			.inner {
+				.toggle {
+					background-size: 32px 32px;
+				}
+
+				.nav-next,
+				.nav-previous {
+					background-image: url('images/arrow-small.svg');
+					background-size: 32px 32px;
+				}
+			}
+
+			body.fullscreen & {
+				.inner {
+					.toggle {
+						background-image: url('images/open-small.svg');
+					}
+				}
+			}
+		}
+
+		@include breakpoint(xsmall) {
+			@include vendor('transition', ('opacity #{_duration(layout-alt)} ease'));
+			@include vendor('transition-delay', '0s');
+			opacity: 0;
+
+			.inner {
+				.toggle {
+					background-image: url('images/close-small.svg') !important;
+					background-size: 32px 32px;
+				}
+			}
+
+			body.fullscreen & {
+				@include vendor('transition-delay', '#{_duration(layout-alt)}');
+				opacity: 1;
+			}
+		}
+	}

assets/sass/libs/_functions.scss

+/// Gets a duration value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _duration($keys...) {
+	@return val($duration, $keys...);
+}
+
+/// Gets a font value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _font($keys...) {
+	@return val($font, $keys...);
+}
+
+/// Gets a misc value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _misc($keys...) {
+	@return val($misc, $keys...);
+}
+
+/// Gets a palette value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _palette($keys...) {
+	@return val($palette, $keys...);
+}
+
+/// Gets a size value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _size($keys...) {
+	@return val($size, $keys...);
+}
\ No newline at end of file

assets/sass/libs/_mixins.scss

+/// Makes an element's :before pseudoelement a FontAwesome icon.
+/// @param {string} $content Optional content value to use.
+@mixin icon($content: false) {
+
+	text-decoration: none;
+
+	&:before {
+
+		@if $content {
+			content: $content;
+		}
+
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		font-family: FontAwesome;
+		font-style: normal;
+		font-weight: normal;
+		text-transform: none !important;
+
+	}
+
+}
+
+/// Applies padding to an element, taking the current element-margin value into account.
+/// @param {mixed} $tb Top/bottom padding.
+/// @param {mixed} $lr Left/right padding.
+/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
+/// @param {bool} $important If true, adds !important.
+@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
+
+	@if $important {
+		$important: '!important';
+	}
+
+	padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
+
+}
\ No newline at end of file

assets/sass/libs/_vars.scss

+// Misc.
+	$misc: (
+		z-index-base:		10000,
+		main-side:			right,
+		main-align:			right,
+		thumbnails-per-row:	2
+	);
+
+// Duration.
+	$duration: (
+		transition:			0.25s,
+		layout:				0.75s,
+		layout-alt:			0.5s,
+		slide:				0.5s,
+		spinner:			1s
+	);
+
+// Size.
+	$size: (
+		border-radius:		4px,
+		border-width:		1px,
+		element-height:		2.75em,
+		element-margin:		1.25em,
+		main:				22.5em,
+		main-alt:			19em
+	);
+
+// Font.
+	$font: (
+		family:				('Roboto', Helvetica, sans-serif),
+		family-fixed:		('Courier New', monospace),
+		weight:				400,
+		weight-bold:		700
+	);
+
+// Palette.
+	$palette: (
+		page-bg:			#101010,
+		bg:					#fff,
+		fg:					#aaa,
+		fg-bold:			#555,
+		fg-light:			#ccc,
+		border:				#ccc,
+		accent:				#00D3B7
+	);
\ No newline at end of file

assets/sass/main.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+@import 'skel';
+@import 'font-awesome.min.css';
+@import url("http://fonts.googleapis.com/css?family=Roboto:400,700");
+
+/*
+	Lens by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+	@include skel-breakpoints((
+		xlarge: '(max-width: 1680px)',
+		large: '(max-width: 1280px)',
+		medium: '(max-width: 980px)',
+		small: '(max-width: 736px)',
+		xsmall: '(max-width: 480px)'
+	));
+
+	@include skel-layout((
+		reset: 'full',
+		boxModel: 'border'
+	));
+
+// Base.
+
+	@import 'page';
+	@import 'typography';
+
+// Component.
+
+	@import 'button';
+	@import 'form';
+	@import 'icon';
+	@import 'list';
+
+// Layout.
+
+	@import 'main';
+	@import 'header';
+	@import 'footer';
+	@import 'thumbnails';
+	@import 'viewer';

assets/sass/noscript.scss

+@import 'vars';
+@import 'functions';
+@import 'mixins';
+@import 'skel';
+
+/*
+	Lens by HTML5 UP
+	html5up.net | @n33co
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+/* Main */
+
+	#main {
+		opacity: 1 !important;
+
+		@if _misc(main-side) == 'left' {
+			left: 0 !important;
+		}
+		@else {
+			right: 0 !important;
+		}
+	}
+
+	body:before {
+		content: 'Javascript is disabled :(';
+		display: block;
+		position: absolute;
+		top: 50%;
+		width: calc(100% - #{_size(main)} * 0.333333333);
+		height: 4em;
+		margin-top: -2em;
+		color: mix(_palette(page-bg), #fff, 90%);
+		cursor: default;
+		font-size: 3em;
+		line-height: 4em;
+		text-align: center;
+		white-space: nowrap;
+
+		@if _misc(main-side) == 'left' {
+			right: 0;
+		}
+		@else {
+			left: 0;
+		}
+	}

comments.php

+<?php
+require 'app/db.php';
+if (isset($_COOKIE['user'])) {
+    if (isset($_GET['post'])) {
+        $post = db_query("select posts.*, users.name from posts join users on posts.uid=users.id where posts.id={$_GET['post']}");
+        if (isset($post[0]))
+            $post = $post[0];
+        else header('Location: index.php');
+        $likes = db_query("select * from likes where pid={$_GET['post']}");
+        $likes = count($likes);
+        $comments = db_query("select comments.*, users.name from comments join users on comments.uid = users.id where pid={$_GET['post']}");
+    } else header('Location: index.php');
+} else header('Location: register.php');
+
+if (isset($_FILES['photo'])) {
+    $uploaddir = './images/comments/';
+    $file_size = $_FILES['photo']['size'];
+    $file_type = $_FILES['photo']['type'];
+    $array = explode('.', $_FILES['photo']['name']);
+    $file_ext = strtolower(end($array));
+    $file_name = $_COOKIE['user'] . round(microtime(true) * 1000) . '.' . $file_ext;
+
+    $extensions = array("jpeg", "jpg", "png");
+
+    if (in_array($file_ext, $extensions) === false) {
+        echo "<script>alert('Расширение файла не поддерживается, выберите JPEG, JPG или PNG файл.')</script>";
+    }
+
+    if ($file_size > 2097152) {
+        echo "<script>alert('Файл должен быть не более 2MB')</script>";
+    }
+
+    if (empty($errors) == true) {
+        if (move_uploaded_file($_FILES['photo']['tmp_name'], $uploaddir . $file_name)):
+            db_insert('comments', [
+                'photo' => $uploaddir . $file_name,
+                'text' => $_POST['comment'],
+                'uid' => $_COOKIE['user'],
+                'pid' => $_GET['post']
+            ]);
+            header("Location: " . $_SERVER['REQUEST_URI']);
+            exit();
+        endif;
+    }
+}
+
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Post Comments</title>
+
+    <link rel="stylesheet" href="./assets/css/comments.css">
+</head>
+<body>
+<div class="container">
+    <div class="comments">
+        <div class="post_info">
+            <img src="<?= $post['photo'] ?>" class="post" alt="">
+            <a href="profile.php?user=<?= $post['uid'] ?>">
+                <div class="user_name">Post by <?= $post['name'] ?></div>
+            </a>
+            <div class="likes">
+                <img class="like" src="../lens-1/images/2.png" alt="">
+                <div class="status">Likes: <span class="color_status"><?= $likes ?></span></div>
+            </div>
+        </div>
+        <div class="post_comments">
+            <?php foreach ($comments as $comment): ?>
+                <div class="comment">
+                    <div class="comment-avatar">
+                        <?= isset($comment['photo']) ? "<img src='{$comment['photo']}'>" : '' ?>
+                    </div>
+                    <div class="comment-author"><?= $comment['name'] ?></div>
+                    <div class="comment-text">
+                        <?= $comment['text'] ?>
+                        <div class="comment-date"><?= $comment['date'] ?></div>
+                    </div>
+                </div>
+            <?php endforeach; ?>
+
+            <form method="post" enctype="multipart/form-data">
+
+                <textarea id="freeform" name="comment" placeholder="Wait for comment" rows="4" cols="50"
+                          required></textarea>
+                <div class="informa">
+                    <input type="file" name="photo" value="Add a picture">
+                    <button type="submit" class="btn">
+                        Send
+                    </button>
+                </div>
+            </form>
+
+        </div>
+    </div>
+</div>
+</div>
+</div>
+</body>
+</html>