diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..1ea4962 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "CodeGPT.apiKey": "CodeGPT Plus Beta" +} diff --git a/index.html b/index.html index 8e5d622..e5e0983 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,24 @@ - Комментарии - + Пост с комментариями + +
+

Привет!

+ Картинка поста +

Разнообразие подводного мира

+
+
+ +
+ + + +
+ - \ No newline at end of file + diff --git a/istockphoto-1793203185-2048x2048.img b/istockphoto-1793203185-2048x2048.img new file mode 100644 index 0000000..d65919e Binary files /dev/null and b/istockphoto-1793203185-2048x2048.img differ diff --git a/script.js b/script.js new file mode 100644 index 0000000..d47e039 --- /dev/null +++ b/script.js @@ -0,0 +1,154 @@ +const comments = JSON.parse(localStorage.getItem('comments')) || [ + { id: 1, text: "Красивые", likes: 2, liked: false, author: "Пользователь1", replies: [] }, + { id: 2, text: "Класс!", likes: 4, liked: false, author: "Пользователь2", replies: [] }, + { id: 3, text: "бейби шарк тутуруду", likes: 1, liked: false, author: "Пользователь3", replies: [] }, + { id: 4, text: "Новый комментарий", likes: 0, liked: false, author: "Пользователь4", replies: [] }, + { id: 5, text: "Еще один комментарий", likes: 0, liked: false, author: "Пользователь5", replies: [] }, +]; + +function saveComments() { + localStorage.setItem('comments', JSON.stringify(comments)); +} + +function renderComments() { + const container = document.getElementById('comments-container'); + container.innerHTML = ''; + + comments.forEach(comment => { + const commentElement = document.createElement('div'); + commentElement.classList.add('comment'); + + const heartClass = comment.liked ? 'heart liked' : 'heart'; + + commentElement.innerHTML = ` +
+

${comment.author || 'Аноним'}: ${comment.text}

+
+ + ${comment.liked ? '❤️' : '🤍'} + + +
+
+ +
+ `; + + const repliesContainer = commentElement.querySelector(`#replies-container-${comment.id}`); + comment.replies.forEach(reply => { + const replyElement = document.createElement('div'); + replyElement.classList.add('reply'); + replyElement.innerHTML = `${reply.author}: ${reply.text}`; + repliesContainer.appendChild(replyElement); + }); + + container.appendChild(commentElement); + }); + + const likeButtons = container.querySelectorAll('.heart'); + likeButtons.forEach(button => { + button.addEventListener('click', handleLikeClick); + }); + + const replyButtons = container.querySelectorAll('.reply-button'); + replyButtons.forEach(button => { + button.addEventListener('click', (event) => { + const replyForm = document.getElementById(`reply-form-${event.target.dataset.id}`); + const comment = comments.find(c => c.id === parseInt(event.target.dataset.id)); + + const replyAuthorInput = replyForm.querySelector('.reply-author-input'); + const replyInput = replyForm.querySelector('.reply-input'); + + replyInput.value = `@${comment.author}: ${comment.text}`; + replyAuthorInput.value = ''; + + replyForm.style.display = replyForm.style.display === 'none' ? 'block' : 'none'; + }); + }); + + const addReplyButtons = container.querySelectorAll('.add-reply-button'); + addReplyButtons.forEach(button => { + button.addEventListener('click', handleAddReply); + }); + + const deleteButtons = container.querySelectorAll('.delete-button'); + deleteButtons.forEach(button => { + button.addEventListener('click', handleDeleteComment); + }); +} + +function handleLikeClick(event) { + const commentId = parseInt(event.target.dataset.id); + const comment = comments.find(c => c.id === commentId); + + if (comment.liked) { + comment.liked = false; + comment.likes -= 1; + } else { + comment.liked = true; + comment.likes += 1; + } + + saveComments(); + renderComments(); +} + +function handleAddReply(event) { + const commentId = parseInt(event.target.dataset.id); + const replyAuthorInput = event.target.parentElement.querySelector('.reply-author-input'); + const replyInput = event.target.parentElement.querySelector('.reply-input'); + + const newReply = { + author: replyAuthorInput.value.trim() || 'Аноним', + text: replyInput.value.trim() + }; + + if (newReply.text) { + const comment = comments.find(c => c.id === commentId); + comment.replies.push(newReply); + saveComments(); + replyInput.value = ''; + replyAuthorInput.value = ''; + renderComments(); + } +} + +function handleDeleteComment(event) { + const commentId = parseInt(event.target.dataset.id); + const commentIndex = comments.findIndex(c => c.id === commentId); + + if (commentIndex > -1) { + comments.splice(commentIndex, 1); + saveComments(); + renderComments(); + } +} + +document.getElementById('add-comment-button').addEventListener('click', () => { + const commentInput = document.getElementById('comment-input'); + const authorInput = document.getElementById('author-input'); + const newText = commentInput.value.trim(); + const authorName = authorInput.value.trim() || 'Аноним'; + + if (newText) { + const newComment = { + id: comments.length ? Math.max(...comments.map(c => c.id)) + 1 : 1, + text: newText, + likes: 0, + liked: false, + author: authorName, + replies: [] + }; + comments.push(newComment); + commentInput.value = ''; + authorInput.value = ''; + saveComments(); + renderComments(); + } +}); + +renderComments(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c70576b --- /dev/null +++ b/styles.css @@ -0,0 +1,102 @@ +body { + font-family: Arial, sans-serif; +} + +#post-container { + margin-bottom: 20px; +} + +.comment { + margin-bottom: 15px; + padding: 10px; + border: 2px solid #000000; + border-radius: 5px; + background-color: #f9f9f9; +} + +.comment-content { + display: flex; + flex-direction: column; +} + +.likes-wrapper { + display: flex; + align-items: center; + margin-top: 10px; +} + +.likes-count { + margin-right: 10px; +} + +.heart { + cursor: pointer; + font-size: 24px; + color: white; + background: transparent; + border: none; + display: inline-block; +} + +.heart.liked { + color: red; +} + +#add-comment { + margin-top: 20px; +} + +#comment-input { + padding: 10px; + width: 300px; +} + +#add-comment-button { + padding: 10px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#add-comment-button:hover { + background-color: #45a049; +} + +#post-image { + width: 700px; + height: auto; + border-radius: 5px; + margin: 10px; +} + +.reply-button, +.delete-button { + background: none; + border: none; + cursor: pointer; + font-size: 24px; + margin-left: 5px; +} + +.reply-button { + color: #008CBA; +} + +.delete-button { + color: #f44336; +} + +.reply-button:hover { + color: #007B9E; +} + +.delete-button:hover { + color: #c62828; +} + +.quoted-text { + color: blue; + font-weight: bold; +}