dikimiks · dikimiks · Dec 8, 2024 · Dec 12, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "CodeGPT.apiKey": "CodeGPT Plus Beta"
+}
diff --git a/index.html b/index.html
@@ -3,11 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Комментарии</title>
-    <link rel="stylesheet" href="styles.css"> 
+    <title>Пост с комментариями</title>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <div id="post-container">
+        <h1>Привет!</h1>
+        <img src="istockphoto-1793203185-2048x2048.img" alt="Картинка поста" id="post-image">
+        <p>Разнообразие подводного мира</p>
+    </div>
+
     <div id="comments-container"></div>
+
+    <div id="add-comment">
+        <input type="text" id="author-input" placeholder="Ваше имя..." required>
+        <input type="text" id="comment-input" placeholder="Добавьте комментарий..." required>
+        <button id="add-comment-button">Добавить комментарий</button>
+    </div>
+
     <script src="script.js"></script> 
 </body>
-</html>
+</html>
diff --git a/istockphoto-1793203185-2048x2048.img b/istockphoto-1793203185-2048x2048.img
diff --git a/script.js 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 = `
+            <div class="comment-content">
+                <p><strong>${comment.author || 'Аноним'}</strong>: ${comment.text}</p>
+                <div class="likes-wrapper">
+                    <span class="likes-count">${comment.likes}</span>
+                    <span class="${heartClass}" data-id="${comment.id}" aria-label="Лайк">${comment.liked ? '❤️' : '🤍'}</span>
+                    <button class="reply-button" data-id="${comment.id}">&#8594;</button>
+                    <button class="delete-button" data-id="${comment.id}" style="color: red;">✖</button>
+                </div>
+            </div>
+            <div class="reply-form" id="reply-form-${comment.id}" style="display: none;">
+                <input type="text" class="reply-author-input" placeholder="Ваше имя..." required>
+                <input type="text" class="reply-input" placeholder="Ваш ответ..." required>
+                <button class="add-reply-button" data-id="${comment.id}">Ответить</button>
+            </div>
+            <div class="replies-container" id="replies-container-${comment.id}"></div>
+        `;
+
+        const repliesContainer = commentElement.querySelector(`#replies-container-${comment.id}`);
+        comment.replies.forEach(reply => {
+            const replyElement = document.createElement('div');
+            replyElement.classList.add('reply');
+            replyElement.innerHTML = `<strong>${reply.author}:</strong> ${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 = `@<span class="quoted-text">${comment.author}</span>: ${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
@@ -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; 
+}