+
+
+
+
+ Выберите новую картинку.
+ +Пользователь:
+Дата:
+
+ERROR
+ +Выберите новую картинку.
+ +Пользователь:
+Дата:
+
+Переместите сюда файл.
+ + +Пользователь:
+Дата:
+
+
+ Авторизация
+ + + +
+ 
${post.author}
+${post.createdAt.getDate()}.${post.createdAt.getMonth()}.${post.createdAt.getFullYear()}
+${post.createdAt.getHours()}:${post.createdAt.getUTCMinutes()}:${post.createdAt.getSeconds()}
+${post.likes.length.toString()}
+${post.description}
+${ViewModule.makeStringForHashtags(post.hashtags) || 0}
+ `; + if (post.author === ApplicationModel.userAuthorized) { + newDiv.innerHTML += ` +
+ 
+ `
+ }
+ containerPosts.appendChild(newDiv);
+ },
+
+ deleteDomPhotoPost: function (post) {
+ let deletedPost = document.getElementById(post.id);
+ containerPosts.removeChild(deletedPost);
+ },
+
+ editDomPhotoPost: function (post, newPost) {
+ let editedPost = document.getElementById(post.id);
+ let result = document.createElement("div");
+
+ result.innerHTML = editedPost.innerHTML;
+ result.id = post.id;
+ result.className = "post";
+ if (newPost.description) {
+ let re = result.querySelector(".textComment");
+ re.textContent = newPost.description;
+ }
+ if (newPost.photoLink) {
+ result.querySelector(".photoPost").src = newPost.photoLink;
+ }
+ if (newPost.hashtags) {
+ result.querySelector(".textHashTag").textContent = ViewModule.makeStringForHashtags(newPost.hashtags);
+ }
+ containerPosts.replaceChild(result, editedPost);
+ },
+
+ createMenuForUser: function () {
+ let menu = document.querySelector(".menu");
+ menu.innerHTML = `
+ 
+ `
+ },
+
+ propHash: function (name) {
+ //here we're printing the most popular hashtags (we get 4 the most popular)
+ if (ApplicationModel.mapHash.length !== 0) {
+ ApplicationModel.mapHash.sort(ApplicationModel.compareHash);
+ let sF = document.getElementById(name);
+ for (let i = 0; i < 4; i++)
+ if (ApplicationModel.mapHash[i]) {
+ sF.children[i + 2].innerText = ApplicationModel.mapHash[i].word;
+ }
+ }
+ }
+ }
+}();
+
+let EventsModule = function () {
+ //по частям
+ let inputLogin = document.getElementById('login');
+ let inputData = document.getElementById('date');
+ let inputHashtag = document.getElementById('hash');
+ let inputLoginAuth = document.getElementById('logAuth');
+ let inputPassword = document.getElementById('passAuth');
+ let grayBackground = document.getElementById('grayBckd');
+ let formAuth = document.getElementById('formAuth');
+ let formAdding = document.getElementById('formAddPost');
+ let dropArea = document.getElementById('addPhotoDrop');
+ let dropAreaEdit = document.getElementById('editPhotoDrop');
+ let userAdd = document.getElementById('userAdding');
+ let dataAdd = document.getElementById('dataAdding');
+ let hashAdd = document.getElementById('inputHashtags');
+ let selectFilter = document.getElementById('selectFilter');
+ let selectAdd = document.getElementById('selectAdd');
+ let gallery = document.getElementById('gallery');
+ let inputDescription = document.getElementById('inputDescription');
+ let formEdit = document.getElementById('editFormPostId');
+ let userEdit = document.getElementById('userEdit');
+ let dataEdit = document.getElementById('dataEdit');
+ let hashEdit = document.getElementById('inputHashtagsEdit');
+ let selectEdit = document.getElementById('selectEdit');
+ let inputHastagsEdit = document.getElementById('inputHashtagsEdit');
+ let inputDescriptionEdit = document.getElementById('inputDescriptionEdit');
+ let galleryEdit = document.getElementById('galleryEdit');
+ let error = document.getElementById('error');
+ let textError = document.getElementById('textError');
+ let photoLnkEdit;
+ let photoLnk;
+ let edittingPostId;
+ let indexEditPost;
+
+ //DOM
+ function highlight() {
+ dropArea.classList.add('highlight')
+ }
+
+ //DOM
+ function unHighLight() {
+ dropArea.classList.remove('highlight')
+ }
+
+ function handleFiles(files) {
+ files = [...files];
+ files.forEach(uploadFile);
+ files.forEach(previewFile);
+ }
+
+ function handleFilesEdit(files) {
+ files = [...files];
+ files.forEach(uploadFileEdit);
+ files.forEach(previewFileEdit);
+ }
+
+ function previewFileEdit(file) {
+ let reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onloadend = function () {
+ let img = document.createElement('img');
+ img.src = reader.result;
+ galleryEdit.innerHTML = '';
+ galleryEdit.appendChild(img);
+ photoLnkEdit = reader.result;
+ }
+ }
+
+ function uploadFileEdit(file) {
+ // let url = 'ВАШ URL ДЛЯ ЗАГРУЗКИ ФАЙЛОВ'
+ //let formData = new FormData()
+ //formData.append('file', file)
+ // fetch(url, {
+ // method: 'POST',
+ // body: formData
+ // })
+ }
+
+ function handleDrop(e) {
+ let dt = e.dataTransfer;
+ let files = dt.files;
+ if(files.length === 1){
+ handleFiles(files);
+ }
+ else{
+
+ }
+ }
+
+ function handleDropEdit(e) {
+ let dt = e.dataTransfer;
+ let files = dt.files;
+ if(files.length === 1){
+ handleFilesEdit(files);
+ }
+ else{
+//
+ }
+ }
+
+ function uploadFile(file) {
+ // let url = 'ВАШ URL ДЛЯ ЗАГРУЗКИ ФАЙЛОВ'
+ //let formData = new FormData()
+ //formData.append('file', file)
+ // fetch(url, {
+ // method: 'POST',
+ // body: formData
+ // })
+ }
+
+ function previewFile(file) {
+ let reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onloadend = function () {
+ let img = document.createElement('img');
+ img.src = reader.result;
+ gallery.appendChild(img);
+ photoLnk = reader.result;
+ }
+ }
+
+ function preventDefaults (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ return {
+ filterPosts: function () {
+ let arrHashtags = [];
+ if(inputHashtag.value) {
+ arrHashtags = inputHashtag.value.replace('#', ' ').trim().split(/[#, ]+/);
+ }
+ //user didn't choose the empty string
+ if(selectFilter.selectedIndex !== 1){
+ //user didn't choose the equal hashatgs
+ if(arrHashtags.indexOf(selectFilter.options[selectFilter.selectedIndex].value) === -1) {
+ arrHashtags.push(selectFilter.options[selectFilter.selectedIndex].value);
+ }
+ }
+ ViewModule.printOnScreen(0, 30,
+ {
+ createdAt: 0 || inputData.value,
+ hashtags: arrHashtags.length === 0 ? 0 : arrHashtags,
+ author: (0 || inputLogin.value)
+ });
+ },
+
+ getMorePosts: function () {
+ ApplicationModel.begOfVisiblePosts += 10;
+ ViewModule.printOnScreen(ApplicationModel.begOfVisiblePosts, ApplicationModel.begOfVisiblePosts + 10);
+ },
+
+ closeForms: function () {
+ grayBackground.style.display = 'none';
+ formAuth.style.display = 'none';
+ formAdding.style.display = 'none';
+ formEdit.style.display = 'none';
+ error.style.display = 'none';
+ },
+
+ enter: function () {
+ grayBackground.style.display = 'block';
+ formAuth.style.display = 'block';
+ },
+
+ addPost: function () {
+ inputDescription.value = '';
+ hashAdd.value = '';
+ userAdd.innerText = 'Пользователь: ';
+ dataAdd.innerText = 'Дата: ';
+ gallery.innerHTML = '';
+ ViewModule.propHash('selectAdd');
+ grayBackground.style.display = 'block';
+ formAdding.style.display = 'block';
+ userAdd.innerText += ApplicationModel.userAuthorized;
+ dataAdd.innerText += new Date();
+ },
+
+ editPost: function(e) {
+ inputDescriptionEdit.value = '';
+ inputHastagsEdit.value = '';
+ userEdit.innerText = 'Пользователь: ';
+ dataEdit.innerText = 'Дата: ';
+ galleryEdit.innerHTML = '';
+ edittingPostId = e.target.id.substring(5);
+ let imgEdit = document.createElement('img');
+ indexEditPost = ApplicationModel.photoPosts.map((post)=>{
+ return post.id;
+ }).indexOf(edittingPostId);
+ grayBackground.style.display = 'block';
+ formEdit.style.display = 'block';
+ //new object for edit post
+ userEdit.innerText += ApplicationModel.userAuthorized;
+ dataEdit.innerText += ApplicationModel.photoPosts[indexEditPost].createdAt;
+ inputHastagsEdit.value = ViewModule.makeStringForHashtags(ApplicationModel.photoPosts[indexEditPost].hashtags);
+ inputDescriptionEdit.value = ApplicationModel.photoPosts[indexEditPost].description;
+ imgEdit.src = ApplicationModel.photoPosts[indexEditPost].photoLink;
+ galleryEdit.appendChild(imgEdit);
+ },
+
+ pressLike: function(e){
+ if(ApplicationModel.userAuthorized !== null) {
+ let indexToAction = ApplicationModel.photoPosts.map((post) => {
+ return post.id;
+ }).indexOf(e.target.id.substr(5));
+ if (indexToAction !== -1) {
+ let indexLike = ApplicationModel.photoPosts[indexToAction].likes.indexOf(ApplicationModel.userAuthorized);
+ if (indexLike === -1){
+ ApplicationModel.photoPosts[indexToAction].likes.push(ApplicationModel.userAuthorized);
+ localStorage.setItem('photoPosts', JSON.stringify(ApplicationModel.photoPosts));
+ document.getElementById(e.target.id.replace('like', 'textLike')).innerText = ApplicationModel.photoPosts[indexToAction].likes.length;
+ document.getElementById(e.target.id).src = './pictures/post/like.png';
+ } else {
+ ApplicationModel.photoPosts[indexToAction].likes.splice(indexLike, 1);
+ document.getElementById(e.target.id).src = './pictures/post/NotPressed.png';
+ document.getElementById(e.target.id.replace('like', 'textLike')).innerText = ApplicationModel.photoPosts[indexToAction].likes.length;
+ localStorage.setItem('photoPosts', JSON.stringify(ApplicationModel.photoPosts));
+ }
+ }
+
+ }
+ },
+
+ logIn: function () {
+ let name = inputLoginAuth.value;
+ let pass = inputPassword.value;
+
+ if (pass && name) {
+ let index = ApplicationModel.users.map((elem) => {
+ return elem.author;
+ }).indexOf(name);
+ if (index !== -1) {
+ if (ApplicationModel.users[index].password === pass) {
+ ViewModule.loginView(name);
+ document.getElementById('exitBtn').addEventListener('click', EventsModule.unAuthorization);
+ document.getElementById('add').addEventListener('click', EventsModule.addPost);
+ document.getElementById('home').addEventListener('click', EventsModule.homePosts);
+ localStorage.setItem('userAuthorized', JSON.stringify(ApplicationModel.userAuthorized));
+ EventsModule.closeForms();
+ ViewModule.printOnScreen(ApplicationModel.begOfVisiblePosts, ApplicationModel.begOfVisiblePosts + 10);
+ inputLoginAuth.value = 'Логин';
+ inputPassword.value = 'Пароль';
+ //after login we get new edit buttons
+ } else {
+ textError.innerText = 'Неправильный пароль';
+ EventsModule.closeForms();
+ grayBackground.style.display = 'block';
+ error.style.display = 'block';
+ }
+ } else {
+ textError.innerText = 'Такого пользователя не найдено';
+ EventsModule.closeForms();
+ grayBackground.style.display = 'block';
+ error.style.display = 'block';
+ }
+ }
+ },
+
+ homePosts: function(){
+ ApplicationModel.begOfVisiblePosts = 0;
+ ViewModule.printOnScreen(ApplicationModel.begOfVisiblePosts, ApplicationModel.begOfVisiblePosts + 10);
+ },
+
+ unAuthorization: function () {
+ document.getElementById("menu").innerHTML = '';
+ ViewModule.createMenuNotForUser();
+ ApplicationModel.userAuthorized = null;
+ localStorage.setItem('userAuthorized', JSON.stringify(ApplicationModel.userAuthorized));
+ ViewModule.printOnScreen(ApplicationModel.begOfVisiblePosts, ApplicationModel.begOfVisiblePosts + 10);
+ document.getElementById('enterMenu').addEventListener('click', EventsModule.enter);
+ },
+
+ addingPost: function () {
+ let arrayHashtags = [];
+ if(hashAdd.value){
+ arrayHashtags = hashAdd.value.trim().split(/[,# ]+/);
+ }
+ if(selectAdd.selectedIndex !== 1){
+ if(arrayHashtags.indexOf(selectAdd.options[selectAdd.selectedIndex].value) === -1) {
+ /*саша я тебя люблю :3 */
+ arrayHashtags.push(selectAdd.options[selectAdd.selectedIndex].value);
+ }
+ }
+
+ ApplicationModel.begOfVisiblePosts = 0;
+ let user = {
+ id: (ApplicationModel.photoPosts.length + 1).toString(),
+ description: inputDescription.value,
+ createdAt: new Date(),
+ author: ApplicationModel.userAuthorized,
+ authorPhoto: ApplicationModel.users[ApplicationModel.users.map((user) => {
+ return user.author;
+ }).indexOf(ApplicationModel.userAuthorized)].authorPhoto || 0,
+ photoLink: photoLnk,
+ hashtags: arrayHashtags.length === 0 ? 0 : arrayHashtags,
+ likes: [],
+ deleted: false
+ };
+ if (ApplicationModel.addPhotoPost(user)) {
+ ViewModule.printOnScreen(ApplicationModel.begOfVisiblePosts, ApplicationModel.begOfVisiblePosts + 10);
+ } else {
+ textError.innerText = 'Неверные данные';
+ EventsModule.closeForms();
+ grayBackground.style.display = 'block';
+ error.style.display = 'block';
+
+ }
+ EventsModule.closeForms();
+ },
+
+ edittingPost: function() {
+ let arrayHashtags = [];
+ if (hashEdit.value) {
+ arrayHashtags = hashEdit.value.replace('#', ' ').trim().split(/[,# ]+/);
+ }
+ if (selectEdit.selectedIndex !== 1) {
+ if (arrayHashtags.indexOf(selectEdit.options[selectEdit.selectedIndex].value) === -1) {
+ arrayHashtags.push(selectEdit.options[selectEdit.selectedIndex].value);
+ }
+ }
+ let user = {
+ id: 1,
+ description: inputDescriptionEdit.value,
+ author: ApplicationModel.userAuthorized,
+ authorPhoto: ApplicationModel.photoPosts[indexEditPost].authorPhoto,
+ photoLink: photoLnkEdit,
+ hashtags: arrayHashtags.length === 0 ? 0 : arrayHashtags,
+ likes: ApplicationModel.photoPosts[indexEditPost].likes,
+ deleted: false
+ };
+
+ let postOld = ApplicationModel.getPhotoPost(edittingPostId);
+ if (ApplicationModel.editPost(postOld.id, user)) {
+ ViewModule.editDomPhotoPost(postOld, user);
+ document.getElementById('edit-'+edittingPostId).addEventListener('click', EventsModule.editPost);
+ document.getElementById('delete-'+edittingPostId).addEventListener('click', EventsModule.delettingPost);
+ document.getElementById('like-'+edittingPostId).addEventListener('click', EventsModule.pressLike);
+ localStorage.setItem('photoPosts', JSON.stringify(ApplicationModel.photoPosts));
+ EventsModule.closeForms();
+ } else {
+ textError.innerText = 'Неверные данные';
+ EventsModule.closeForms();
+ grayBackground.style.display = 'block';
+ error.style.display = 'block';
+ }
+
+ },
+
+ delettingPost: function(e) {
+ let post = ApplicationModel.getPhotoPost(e.target.id.substring(7));
+ if (ApplicationModel.removePhotoPost(post.id)) {
+ ViewModule.deleteDomPhotoPost(post);
+ } else
+ {
+ textError.innerText = 'Неправильный пароль';
+ EventsModule.closeForms();
+ grayBackground.style.display = 'block';
+ error.style.display = 'block';
+ }
+ },
+
+ initializeLikeButtons: function(){
+ let likeButtons = document.querySelectorAll('.likePost');
+ for(let i = 0; i < likeButtons.length; i++){
+ likeButtons[i].addEventListener('click', EventsModule.pressLike);
+ }
+ },
+
+ initializeButtonsPost: function(){
+ let editButtons = document.querySelectorAll('.editPost');
+ let deleteButtons = document.querySelectorAll('.deletePost');
+ for(let i = 0; i < editButtons.length; i++){
+ editButtons[i].addEventListener('click', EventsModule.editPost);
+ deleteButtons[i].addEventListener('click', EventsModule.delettingPost);
+ }
+ },
+
+ initialization: function(){
+ document.getElementById('downMore').addEventListener('click', EventsModule.getMorePosts);
+ document.getElementById('filtersPicture').addEventListener('click', EventsModule.filterPosts);
+ document.getElementById('grayBckd').addEventListener('click', EventsModule.closeForms);
+ if(ApplicationModel.userAuthorized === null) {
+ document.getElementById('enterMenu').addEventListener('click', EventsModule.enter);
+ } else {
+ document.getElementById('exitBtn').addEventListener('click', EventsModule.unAuthorization);
+ document.getElementById('add').addEventListener('click', EventsModule.addPost);
+ document.getElementById('home').addEventListener('click', EventsModule.homePosts);
+ EventsModule.initializeButtonsPost();
+ }
+ document.getElementById('loginBtn').addEventListener('click', EventsModule.logIn);
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+ dropArea.addEventListener(eventName, preventDefaults, false);
+ dropAreaEdit.addEventListener(eventName, preventDefaults, false);
+ });
+ dropArea.addEventListener('drop', handleDrop, false);
+ dropAreaEdit.addEventListener('drop', handleDropEdit, false);
+ ['dragenter', 'dragover'].forEach(eventName => {
+ dropArea.addEventListener(eventName, highlight, false);
+ dropAreaEdit.addEventListener(eventName, highlight, false);
+ });
+ ['dragleave', 'drop'].forEach(eventName => {
+ dropArea.addEventListener(eventName, unHighLight, false);
+ dropAreaEdit.addEventListener(eventName, unHighLight, false);
+ });
+ document.getElementById('addingFormAdd').addEventListener('click', EventsModule.addingPost);
+ document.getElementById('editFormAdd').addEventListener('click', EventsModule.edittingPost);
+ }
+ }
+}();
+ApplicationModel.fillInformation();
+ViewModule.printOnScreen(ApplicationModel.begOfVisiblePosts, ApplicationModel.begOfVisiblePosts + 10);
+if (ApplicationModel.userAuthorized === null) {
+ ViewModule.createMenuNotForUser();
+} else {
+ ViewModule.createMenuForUser();
+}
+ApplicationModel.fillMapHash();
+ViewModule.propHash('selectFilter');
+EventsModule.initialization();
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..7018744
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,601 @@
+@font-face {
+ font-family: Stolzl-Thin;
+ src: url('./fonts/st/Stolzl-Thin.eot');
+ src: url('./fonts/st/Stolzl-Thin.woff2') format('woff2'),
+ url('./fonts/st/Stolzl-Thin.woff') format('woff'),
+ url('./fonts/st/Stolzl-Thin.ttf') format('truetype'),
+ url('./fonts/st/Stolzl-Thin.svg#Stolzl-Thin') format('svg'),
+ url('./fonts/st/Stolzl-Thin.eot?#iefix') format('embedded-opentype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.logoImg {
+ height: 10vh;
+}
+
+.addingHashtags {
+ font-family: Stolzl-Thin;
+ vertical-align: middle;
+ border: 1px solid #cecece;
+ background: #F6F6f6;
+ border-radius: 8px;
+ width: 30%;
+ height: 5%;
+}
+
+.filter-blocks {
+ float: left;
+ font-family: Stolzl-Thin;
+ vertical-align: middle;
+ margin: 5px;
+}
+
+.filters-picture {
+ float: right;
+ height: 10vh;
+ width: 50px;
+ text-align: right;
+ background: url("pictures/filters/filter.png");
+ background-size: 50px;
+}
+
+.filters-picture:active {
+ float: right;
+ width: 50px;
+ text-align: right;
+ background: url("pictures/filters/filterAnim.png");
+ background-size: 50px;
+ text-align: right;
+ color: #e3bd8c;
+}
+
+.filter-input {
+ color: #e3bd8c;
+ max-height: 10vh;
+ max-width: 40vw;
+ border-radius: 3px;
+}
+
+.filter-input:focus {
+ color: #e3bd8c;
+ max-height: 10vh;
+ max-width: 10vm;
+ border-radius: 3px;
+ border: 1px solid #e3bd8c;
+}
+
+.filters-text {
+ text-align: left;
+ vertical-align: middle;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ paddging: auto;
+}
+
+.filters {
+ height: 10vh;
+ max-height: 15vh;
+}
+
+.filters-picture {
+ height: 50px;
+}
+
+.menu-picture {
+ margin: 5px;
+ max-height: 15vh;
+ height: 50px;
+ max-width: 15vw;
+ max-height: 15vh;
+}
+
+.menu-block-picture {
+ float: left;
+ margin: 5px;
+ height: 50px;
+ max-height: 15vh;
+}
+
+.menu-picture:active {
+ margin: 5px;
+ height: 40px;
+ max-width: 15vw;
+ max-height: 15vh;
+
+}
+
+.menu-block-add {
+ float: right;
+ width: 15vw;
+ padding: 5px 30vw 10px 40px;
+ max-width: 15vw;
+ max-height: 15vh;
+
+}
+
+.menu-block-avatar {
+ border-radius: 100px;
+ float: right;
+ max-width: 15vw;
+ height: 50px;
+ padding: 5px 5vw 0vw 0px;
+ max-width: 15vw;
+ max-height: 15vh;
+
+}
+
+.menu-picture-margin {
+ height: 50px;
+ max-width: 40px;
+ transition-duration: 0.8s;
+ transition-property: transform;
+ border-radius: 100px;
+}
+
+.menu-picture-margin:hover {
+ transform: rotate(360deg);
+}
+
+.menu {
+ clear: both;
+ height: 60px;
+ border-top-color: #e3bd8c;
+ border-top-style: solid;
+ border-top-width: 1px;
+}
+
+body {
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ height: 94vh;
+ /*min-width: 556px;*/
+}
+
+.scroll-block {
+ clear: both;
+ height: 63vh;
+ max-height: 250vw;
+ overflow-y: scroll;
+ text-align: center;
+}
+
+.downloadMore {
+ clear: both;
+ text-align: center;
+ height: 100px;
+}
+
+.downloadMore:active {
+ clear: both;
+ text-align: center;
+ height: 105px;
+}
+
+.post {
+ float: left;
+ margin: 5px 5px 5px 5%;
+}
+
+.photoPost {
+ width: 250px;
+ height: 250px;
+ clear: both;
+}
+
+.editPost {
+ margin: 0;
+ width: 30px;
+ float: right;
+}
+
+.deletePost{
+ margin: 0;
+ width: 30px;
+ float: right;
+}
+
+.editPost:active {
+ margin: 0;
+ width: 28px;
+ float: right;
+}
+
+.deletePost:active {
+ margin: 0;
+ width: 28px;
+ float: right;
+}
+
+.avaPost {
+ border-radius: 100px;
+ width: 50px;
+ float: left;
+}
+
+.postUser {
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ color: black;
+ font-size: 15px;
+ margin: 0px 5px
+}
+
+.dataUser {
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ color: gray;
+ font-size: 15px;
+ text-indent: 20px;
+ margin: 0px 5px
+}
+
+.likePost {
+ width: 30px;
+ height: 30px;
+ margin: 0px 5px 0px 0px;
+ float: left;
+}
+
+.inpDivAuth {
+ margin-top: 10px;
+}
+
+.main {
+ top: 0px;
+ bottom: 0px;
+ right: 0px;
+ left: 0px;
+ z-index: 90;
+}
+
+#error{
+ margin-left: 30vw;
+ margin-top: 5vh;
+ background-color: white;
+ width: 50vw;
+ max-width: 360px;
+ height: 30vh;
+ position: fixed;
+ text-align: center;
+ display: none;
+ z-index: 200;
+ border: 1px solid #E3BD8C;
+ border-radius: 8px;
+}
+
+.formAuthorization {
+ margin-left: 30vw;
+ margin-top: 5vh;
+ background-color: white;
+ width: 50vw;
+ max-width: 360px;
+ height: 80vh;
+ position: fixed;
+ text-align: center;
+ display: none;
+ z-index: 150;
+ border: 1px solid #E3BD8C;
+ border-radius: 8px;
+}
+
+.authLogo {
+ width: 15vw;
+ max-width: 110px;
+}
+
+.pAuth {
+ font-size: 20px;
+
+}
+
+.enterBtn {
+ width: 43vw;
+ max-width: 300px;
+ margin-top: 10px;
+ height: 8vh;
+ font-size: 20px;
+ color: #c09f76;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ padding: 6px 0 4px 10px;
+ border: 1px solid #E3BD8C;
+ background: #FFFFFF;
+ border-radius: 8px;
+}
+
+#textError{
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+}
+
+#addPhotoDrop{
+ border: 2px dashed #ccc;
+ margin-left: 5%;
+ margin-top: 2%;
+ border-radius: 20px;
+ width: 90%;
+ height: 220px;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+}
+
+#editPhotoDrop{
+ border: 2px dashed #ccc;
+ margin-left: 5%;
+ margin-top: 2%;
+ border-radius: 20px;
+ width: 90%;
+ height: 220px;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+}
+
+#addPhotoDrop.highlight{
+ border-color: purple;
+}
+
+
+#gallery {
+ margin-top: 10px;
+}
+
+#galleryEdit {
+ margin-top: 10px;
+}
+
+#galleryEdit img {
+ width: 200px;
+ max-height: 130px;
+ margin-bottom: 10px;
+ margin-right: 10px;
+ vertical-align: middle;
+ }
+
+#gallery img {
+ width: 200px;
+ max-height: 130px;
+ margin-bottom: 10px;
+ margin-right: 10px;
+ vertical-align: middle;
+}
+
+#fileElem {
+ display: none;
+}
+
+/*#loaderFileStand{*/
+ /*font-family: Stolzl-Thin, Century Gothic, Georgia;*/
+ /*margin-bottom: 2%;*/
+/*}*/
+
+.formForFile {
+ background: #E3BD8C;
+ color: #FFFFFF;
+ border-radius: 18px;
+ border: 1px solid #E3BD8C;
+ margin-top: 10%;
+ margin-left: 10%;
+ width: 80%;
+ height: 300px;
+}
+
+.descriptionAdding {
+ margin-top: 10px;
+}
+
+.editFormPost{
+ margin-left: 30vw;
+ margin-top: 5vh;
+ background-color: white;
+ width: 50vw;
+ max-width: 360px;
+ height: 80vh;
+ position: fixed;
+ text-align: center;
+ display: none;
+ z-index: 150;
+ border: 1px solid #E3BD8C;
+ border-radius: 8px;
+}
+
+.formAddingPost {
+ margin-left: 30vw;
+ margin-top: 5vh;
+ background-color: white;
+ width: 50vw;
+ max-width: 360px;
+ height: 80vh;
+ position: fixed;
+ text-align: center;
+ display: none;
+ z-index: 150;
+ border: 1px solid #E3BD8C;
+ border-radius: 8px;
+}
+
+.inputAuth {
+ width: 40vw;
+ max-width: 300px;
+ height: 5vh;
+ font-size: 13px;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ padding: 6px 0 4px 10px;
+ border: 1px solid #cecece;
+ background: #F6F6f6;
+ border-radius: 8px;
+}
+
+.inputAddingDescr {
+ width: 50%;
+ max-width: 300px;
+ height: 5%;
+ font-size: 13px;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ padding: 6px 0 4px 10px;
+ border: 1px solid #cecece;
+ background: #F6F6f6;
+ border-radius: 8px;
+ margin-top: 10px;
+}
+
+.inputAddingHashtags {
+ width: 30%;
+ max-width: 300px;
+ height: 5%;
+ font-size: 13px;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ padding: 6px 0 4px 10px;
+ border: 1px solid #cecece;
+ background: #F6F6f6;
+ border-radius: 8px;
+ margin-top: 10px;
+}
+
+.authInputes {
+ margin-top: 20vh;
+}
+
+.likePostUnAuth {
+ width: 30px;
+ height: 30px;
+ margin: 0px 5px 0px 0px;
+ float: left;
+}
+
+.grayBackground {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ display: none;
+ z-index: 100;
+ background-color: rgba(1, 1, 1, 0.75);
+}
+
+.textLike {
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ color: #e3bd8c;
+ font-size: 15px;
+ margin: 5px 5px 5px 0px;
+ float: left;
+}
+
+.textComment {
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ color: black;
+ font-size: 15px;
+ margin: 5px 5px 5px 10px;
+}
+
+.textHashTag {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 250px;
+ overflow: hidden;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ color: gray;
+ font-size: 15px;
+ clear: left;
+}
+
+header {
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ border-bottom-color: #e3bd8c;
+ text-align: center;
+ height: 10vh;
+}
+
+footer {
+ clear: both;
+ background: #e3bd8c;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ text-align: center;
+ height: 6vh;
+ position: absolute;
+ margin-bottom: 0px;
+ width: 100%;
+}
+
+@media screen and (max-width: 1044px) {
+ .posts {
+ clear: both;
+ height: 60vh;
+ overflow-y: scroll;
+ text-align: center;
+ }
+
+ footer {
+ clear: both;
+ background: #e3bd8c;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ text-align: center;
+ font-size: 10px;
+ height: 7vh;
+ position: absolute;
+ margin-bottom: 0px;
+ width: 100%;
+ }
+}
+
+@media screen and (max-width: 540px) {
+
+ .filter-blocks {
+ float: left;
+ font-family: Stolzl-Thin;
+ vertical-align: middle;
+ max-width: 40px;
+ margin: 5px;
+ font-size: 15px;
+ }
+
+ .menu-block-add {
+ float: left;
+ width: 2vw;
+ padding: 0 0 0 15px;
+ max-width: 5vw;
+ max-height: 5vh;
+ }
+
+ .menu-block-avatar {
+ float: right;
+ width: 10vw;
+ max-height: 15vh;
+ }
+
+ .menu-block-picture {
+ float: left;
+ max-height: 10vh;
+ max-width: 10vw;
+ }
+
+ .menu-picture:active {
+ height: 40px;
+ max-width: 10vw;
+ max-height: 10vh;
+ }
+
+ footer {
+ clear: both;
+ background: #e3bd8c;
+ font-family: Stolzl-Thin, Century Gothic, Georgia;
+ text-align: center;
+ font-size: 10px;
+ height: 6vh;
+ position: absolute;
+ margin-bottom: 0px;
+ width: 100%;
+ }
+
+ .menu {
+ clear: both;
+ height: 70px;
+ border-top-color: #e3bd8c;
+ border-top-style: solid;
+ border-top-width: 1px;
+ }
+}
+
+/*@media screen and (max-width: 285px){*/
+/*.scroll-block{*/
+/*clear: both;*/
+/*height: 56vh;*/
+/*!*max-height: 200vw;*!*/
+/*overflow-y: scroll;*/
+/*text-align: center;*/
+/*}*/
+/*}*/