From f527e85e4c90cf152dec945566a3c418679eed7d Mon Sep 17 00:00:00 2001
From: valitovgaziz <valitovgaziz@yandex.ru>
Date: Thu, 16 Oct 2025 06:49:32 +0500
Subject: [PATCH] 	modified:   serv_nginx/bbvue/src/views/News.vue set
 new News.vue page

---
 serv_nginx/bbvue/src/views/News.vue | 1219 ++++++++++++++-------------
 1 file changed, 645 insertions(+), 574 deletions(-)

diff --git a/serv_nginx/bbvue/src/views/News.vue b/serv_nginx/bbvue/src/views/News.vue
index bcd7f89..29c5a95 100644
--- a/serv_nginx/bbvue/src/views/News.vue
+++ b/serv_nginx/bbvue/src/views/News.vue
@@ -16,8 +16,8 @@
               <div class="stat-label">Предстоящих событий</div>
             </div>
             <div class="stat">
-              <div class="stat-number">150+</div>
-              <div class="stat-label">Читателей</div>
+              <div class="stat-number">{{ totalComments }}</div>
+              <div class="stat-label">Комментариев</div>
             </div>
           </div>
         </div>
@@ -29,21 +29,39 @@
       <div class="container">
         <div class="news-header">
           <h2 class="section-title">Последние новости</h2>
-          <div class="news-filters">
-            <button v-for="filter in filters" :key="filter.value"
-              :class="['filter-btn', { 'active': activeFilter === filter.value }]" @click="setFilter(filter.value)">
-              {{ filter.label }}
+          <div class="news-controls">
+            <div class="news-filters">
+              <button v-for="filter in filters" :key="filter.value"
+                :class="['filter-btn', { 'active': activeFilter === filter.value }]" 
+                @click="setFilter(filter.value)">
+                {{ filter.label }}
+              </button>
+            </div>
+            <button v-if="isAuthenticated" class="btn btn-primary" @click="openCreateNewsModal">
+              ✏️ Добавить новость
             </button>
           </div>
         </div>
 
+        <!-- Состояние загрузки -->
+        <div v-if="loading" class="loading-state">
+          <div class="loading-spinner"></div>
+          <p>Загружаем новости...</p>
+        </div>
+
+        <!-- Сообщение об ошибке -->
+        <div v-else-if="error" class="error-state">
+          <p>❌ {{ error }}</p>
+          <button class="btn btn-outline" @click="fetchNews">Попробовать снова</button>
+        </div>
+
         <!-- Сетка новостей -->
-        <div class="news-grid">
+        <div v-else class="news-grid">
           <article v-for="item in filteredNews" :key="item.id" class="news-card" :class="item.category">
             <div class="news-image">
               <img :src="getImageUrl(item.image)" :alt="item.title" class="news-img">
               <div class="news-category">{{ getCategoryLabel(item.category) }}</div>
-              <div class="news-date">{{ formatDate(item.date) }}</div>
+              <div class="news-date">{{ formatDate(item.created_at) }}</div>
             </div>
 
             <div class="news-content">
@@ -55,9 +73,13 @@
                   <span class="meta-icon">👁️</span>
                   {{ item.views }} просмотров
                 </div>
-                <div class="meta-item" v-if="item.comments">
+                <div class="meta-item">
                   <span class="meta-icon">💬</span>
-                  {{ item.comments }} комментариев
+                  {{ item.comments_count || 0 }} комментариев
+                </div>
+                <div class="meta-item">
+                  <span class="meta-icon">👤</span>
+                  {{ item.author.first_name }} {{ item.author.last_name }}
                 </div>
               </div>
 
@@ -65,100 +87,32 @@
                 <button class="btn-read-more" @click="openNewsModal(item)">
                   📖 Читать подробнее
                 </button>
-                <button class="btn-share" @click="shareNews(item)" title="Поделиться">
-                  📤
-                </button>
+                <div v-if="isAuthenticated && isAuthor(item.author_id)" class="news-owner-actions">
+                  <button class="btn-edit" @click="editNews(item)" title="Редактировать">
+                    ✏️
+                  </button>
+                  <button class="btn-delete" @click="deleteNews(item.id)" title="Удалить">
+                    🗑️
+                  </button>
+                </div>
               </div>
             </div>
           </article>
         </div>
 
         <!-- Кнопка загрузки еще -->
-        <div class="load-more" v-if="visibleNews < news.length">
+        <div class="load-more" v-if="!loading && !error && visibleNews < filteredNews.length">
           <button class="btn btn-outline" @click="loadMore">
             📰 Загрузить еще новости
           </button>
         </div>
-      </div>
-    </section>
 
-    <!-- Блок подписки -->
-    <section class="subscribe-section">
-      <div class="container">
-        <div class="subscribe-content">
-          <div class="subscribe-text">
-            <h2>📧 Не пропустите важные новости!</h2>
-            <p>Подпишитесь на рассылку и получайте уведомления о тренировках, забегах и мероприятиях первыми</p>
-            <ul class="subscribe-features">
-              <li>✅ Анонсы ближайших забегов</li>
-              <li>✅ Советы от тренера</li>
-              <li>✅ Эксклюзивные интервью</li>
-              <li>✅ Специальные предложения</li>
-            </ul>
-          </div>
-
-          <div class="subscribe-form">
-            <form @submit.prevent="handleSubscribe">
-              <div class="form-group">
-                <input v-model="subscribeEmail" type="email" placeholder="Ваш email" required class="email-input">
-              </div>
-              <button type="submit" class="btn btn-primary btn-subscribe">
-                📧 Подписаться на новости
-              </button>
-            </form>
-            <p class="privacy-note">Подписываясь, вы соглашаетесь с нашей политикой конфиденциальности</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Призыв к действию -->
-    <section class="cta-section">
-      <div class="container">
-        <div class="cta-content">
-          <h2>Хочешь быть в центре событий?</h2>
-          <p>Присоединяйся к нашему беговому сообществу и стань частью этих новостей!</p>
-
-          <div class="cta-features">
-            <div class="cta-feature">
-              <div class="feature-icon">🏃‍♂️</div>
-              <div class="feature-text">
-                <strong>Участвуй в забегах</strong>
-                <span>От городских стартов до марафонов</span>
-              </div>
-            </div>
-            <div class="cta-feature">
-              <div class="feature-icon">👥</div>
-              <div class="feature-text">
-                <strong>Общайся с единомышленниками</strong>
-                <span>Найди новых друзей и партнеров по тренировкам</span>
-              </div>
-            </div>
-            <div class="cta-feature">
-              <div class="feature-icon">📈</div>
-              <div class="feature-text">
-                <strong>Улучшай свои результаты</strong>
-                <span>С профессиональным тренером и поддержкой команды</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="cta-actions">
-            <router-link to="/register" class="btn btn-primary btn-large">
-              🏃 Вступить в клуб
-            </router-link>
-            <router-link to="/training" class="btn btn-secondary">
-              📅 Посмотреть расписание
-            </router-link>
-          </div>
-
-          <div class="cta-contacts">
-            <p>Или свяжись с нами напрямую:</p>
-            <div class="contact-links">
-              <a href="https://t.me/begushiybashkir" class="contact-link">📱 Telegram</a>
-              <a href="tel:+79273093095" class="contact-link">📞 +7 (927) 30-93-095</a>
-            </div>
-          </div>
+        <!-- Сообщение если новостей нет -->
+        <div v-if="!loading && !error && filteredNews.length === 0" class="empty-state">
+          <p>📭 Новостей пока нет</p>
+          <button v-if="isAuthenticated" class="btn btn-primary" @click="openCreateNewsModal">
+            Создать первую новость
+          </button>
         </div>
       </div>
     </section>
@@ -172,45 +126,155 @@
           <div class="modal-header">
             <div class="modal-meta">
               <span class="modal-category">{{ getCategoryLabel(selectedNews.category) }}</span>
-              <span class="modal-date">{{ formatDate(selectedNews.date) }}</span>
+              <span class="modal-date">{{ formatDate(selectedNews.created_at) }}</span>
               <span class="modal-views">👁️ {{ selectedNews.views }} просмотров</span>
             </div>
             <h2 class="modal-title">{{ selectedNews.title }}</h2>
+            <div class="modal-author">
+              <span class="author-avatar" v-if="selectedNews.author.avatar">
+                <img :src="getImageUrl(selectedNews.author.avatar)" :alt="selectedNews.author.first_name">
+              </span>
+              <span class="author-name">{{ selectedNews.author.first_name }} {{ selectedNews.author.last_name }}</span>
+            </div>
           </div>
 
-          <div class="modal-image">
+          <div class="modal-image" v-if="selectedNews.image">
             <img :src="getImageUrl(selectedNews.image)" :alt="selectedNews.title">
           </div>
 
           <div class="modal-body">
-            <div class="news-content-full" v-html="selectedNews.content"></div>
+            <div class="news-content-full" v-html="formatContent(selectedNews.content)"></div>
 
             <div class="modal-actions">
               <button class="btn-share-modal" @click="shareNews(selectedNews)">
                 📤 Поделиться новостью
               </button>
-              <router-link to="/register" class="btn btn-primary">
-                🏃 Присоединиться к клубу
-              </router-link>
+              <div v-if="isAuthenticated && isAuthor(selectedNews.author_id)" class="modal-owner-actions">
+                <button class="btn btn-outline" @click="editNews(selectedNews)">
+                  ✏️ Редактировать
+                </button>
+                <button class="btn btn-danger" @click="deleteNews(selectedNews.id)">
+                  🗑️ Удалить
+                </button>
+              </div>
             </div>
 
-            <div class="news-comments" v-if="selectedNews.comments">
-              <h4>💬 Комментарии ({{ selectedNews.comments }})</h4>
-              <div class="comments-placeholder">
-                <p>Комментарии будут доступны после регистрации в клубе</p>
-                <router-link to="/register" class="btn btn-outline">
-                  🔐 Войти для комментирования
+            <!-- Секция комментариев -->
+            <div class="news-comments">
+              <h4>💬 Комментарии ({{ comments.length }})</h4>
+              
+              <!-- Форма добавления комментария -->
+              <div v-if="isAuthenticated" class="comment-form">
+                <textarea v-model="newComment" placeholder="Напишите ваш комментарий..." 
+                          class="comment-input" rows="3"></textarea>
+                <button class="btn btn-primary" @click="addComment" 
+                        :disabled="!newComment.trim() || commentLoading">
+                  {{ commentLoading ? 'Отправка...' : '💬 Отправить комментарий' }}
+                </button>
+              </div>
+              <div v-else class="auth-prompt">
+                <p>🔐 Войдите, чтобы оставить комментарий</p>
+                <router-link to="/login" class="btn btn-outline">
+                  Войти
                 </router-link>
               </div>
+
+              <!-- Список комментариев -->
+              <div class="comments-list" v-if="comments.length > 0">
+                <div v-for="comment in comments" :key="comment.id" class="comment-item">
+                  <div class="comment-header">
+                    <div class="comment-author">
+                      <span class="author-avatar" v-if="comment.author.avatar">
+                        <img :src="getImageUrl(comment.author.avatar)" :alt="comment.author.first_name">
+                      </span>
+                      <span class="author-name">{{ comment.author.first_name }} {{ comment.author.last_name }}</span>
+                      <span class="comment-date">{{ formatDate(comment.created_at) }}</span>
+                    </div>
+                    <button v-if="isAuthenticated && isCommentAuthor(comment.author_id)" 
+                            class="btn-delete-comment" @click="deleteComment(comment.id)"
+                            title="Удалить комментарий">
+                      🗑️
+                    </button>
+                  </div>
+                  <div class="comment-content">{{ comment.content }}</div>
+                </div>
+              </div>
+              <div v-else class="no-comments">
+                <p>Пока нет комментариев. Будьте первым!</p>
+              </div>
             </div>
           </div>
         </article>
       </div>
     </div>
+
+    <!-- Модальное окно создания/редактирования новости -->
+    <div class="news-modal-overlay" :class="{ 'active': showNewsFormModal }" v-if="showNewsFormModal">
+      <div class="news-modal">
+        <button class="modal-close" @click="closeNewsFormModal">×</button>
+        
+        <div class="modal-content">
+          <h2 class="modal-title">{{ editingNews ? '✏️ Редактировать новость' : '📝 Создать новость' }}</h2>
+          
+          <form @submit.prevent="submitNewsForm" class="news-form">
+            <div class="form-group">
+              <label>Заголовок *</label>
+              <input v-model="newsForm.title" type="text" required 
+                     placeholder="Введите заголовок новости" class="form-input">
+            </div>
+            
+            <div class="form-group">
+              <label>Краткое описание *</label>
+              <textarea v-model="newsForm.excerpt" required 
+                        placeholder="Краткое описание новости (максимум 500 символов)"
+                        class="form-textarea" rows="3" maxlength="500"></textarea>
+              <div class="char-count">{{ newsForm.excerpt.length }}/500</div>
+            </div>
+            
+            <div class="form-group">
+              <label>Содержание *</label>
+              <textarea v-model="newsForm.content" required 
+                        placeholder="Полное содержание новости"
+                        class="form-textarea" rows="6"></textarea>
+            </div>
+            
+            <div class="form-group">
+              <label>Категория *</label>
+              <select v-model="newsForm.category" required class="form-select">
+                <option value="">Выберите категорию</option>
+                <option value="events">События</option>
+                <option value="training">Тренировки</option>
+                <option value="achievements">Достижения</option>
+                <option value="community">Сообщество</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label>Изображение (URL)</label>
+              <input v-model="newsForm.image" type="url" 
+                     placeholder="https://example.com/image.jpg" class="form-input">
+              <small>Оставьте пустым для изображения по умолчанию</small>
+            </div>
+            
+            <div class="form-actions">
+              <button type="button" class="btn btn-outline" @click="closeNewsFormModal">
+                Отмена
+              </button>
+              <button type="submit" class="btn btn-primary" :disabled="newsLoading">
+                {{ newsLoading ? 'Сохранение...' : (editingNews ? '💾 Сохранить изменения' : '📝 Создать новость') }}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState, mapActions } from 'pinia'
+import { useAuthStore } from '../stores/auth'
+
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
   name: 'News',
@@ -219,9 +283,23 @@ export default {
       activeFilter: 'all',
       visibleNews: 6,
       showNewsModal: false,
+      showNewsFormModal: false,
       selectedNews: null,
-      subscribeEmail: '',
-      news: [], // Теперь пустой массив
+      editingNews: null,
+      newsLoading: false,
+      commentLoading: false,
+      loading: false,
+      error: '',
+      newComment: '',
+      news: [],
+      comments: [],
+      newsForm: {
+        title: '',
+        excerpt: '',
+        content: '',
+        category: '',
+        image: ''
+      },
       filters: [
         { value: 'all', label: 'Все новости' },
         { value: 'events', label: 'События' },
@@ -232,71 +310,189 @@ export default {
     }
   },
   computed: {
+    ...mapState(useAuthStore, ['user', 'isAuthenticated']),
     totalNews() {
       return this.news.length
     },
     upcomingEvents() {
       return this.news.filter(item => item.category === 'events').length
     },
+    totalComments() {
+      return this.news.reduce((total, news) => total + (news.comments_count || 0), 0)
+    },
     filteredNews() {
-      if (this.activeFilter === 'all') {
-        return this.news.slice(0, this.visibleNews)
+      let filtered = this.news
+      if (this.activeFilter !== 'all') {
+        filtered = this.news.filter(item => item.category === this.activeFilter)
       }
-      return this.news
-        .filter(item => item.category === this.activeFilter)
-        .slice(0, this.visibleNews)
+      return filtered.slice(0, this.visibleNews)
     }
   },
   methods: {
+    ...mapActions(useAuthStore, ['fetchProfile']),
+    
     async fetchNews() {
+      this.loading = true
+      this.error = ''
       try {
-        const response = await this.$http.get('/api/news', {
-          params: {
-            limit: 20,
-            offset: 0
-          }
-        })
-        this.news = response.data.news
+        const response = await this.$http.get('/news')
+        this.news = response.data.news || response.data
       } catch (error) {
         console.error('Failed to fetch news:', error)
-        // Fallback на локальные данные если API недоступно
-        this.news = this.getFallbackNews()
+        this.error = 'Не удалось загрузить новости. Попробуйте позже.'
+      } finally {
+        this.loading = false
       }
     },
+    
+    async fetchComments(newsId) {
+      try {
+        const response = await this.$http.get(`/news/${newsId}/comments`)
+        this.comments = response.data.comments || response.data
+      } catch (error) {
+        console.error('Failed to fetch comments:', error)
+        this.comments = []
+      }
+    },
+    
     async openNewsModal(newsItem) {
       try {
-        // Получаем полную новость с API
-        const response = await this.$http.get(`/api/news/${newsItem.id}`)
+        const response = await this.$http.get(`/news/${newsItem.id}`)
         this.selectedNews = response.data
+        await this.fetchComments(newsItem.id)
       } catch (error) {
         console.error('Failed to fetch news details:', error)
         this.selectedNews = newsItem
       }
-
+      
       this.showNewsModal = true
       document.body.style.overflow = 'hidden'
     },
-    async handleSubscribe() {
+    
+    async addComment() {
+      if (!this.newComment.trim() || !this.selectedNews) return
+      
+      this.commentLoading = true
       try {
-        await this.$http.post('/api/subscribe', { email: this.subscribeEmail })
-        alert('Спасибо за подписку! Проверьте вашу почту для подтверждения.')
-        this.subscribeEmail = ''
+        await this.$http.post(`/news/${this.selectedNews.id}/comments`, {
+          content: this.newComment
+        })
+        
+        this.newComment = ''
+        await this.fetchComments(this.selectedNews.id)
+        await this.fetchNews() // Обновляем счетчик комментариев
       } catch (error) {
-        console.error('Subscription failed:', error)
-        alert('Ошибка подписки. Попробуйте позже.')
+        console.error('Failed to add comment:', error)
+        alert('Не удалось добавить комментарий. Попробуйте позже.')
+      } finally {
+        this.commentLoading = false
       }
     },
+    
+    async deleteComment(commentId) {
+      if (!confirm('Удалить этот комментарий?')) return
+      
+      try {
+        await this.$http.delete(`/news/comments/${commentId}`)
+        await this.fetchComments(this.selectedNews.id)
+        await this.fetchNews()
+      } catch (error) {
+        console.error('Failed to delete comment:', error)
+        alert('Не удалось удалить комментарий.')
+      }
+    },
+    
+    openCreateNewsModal() {
+      this.editingNews = null
+      this.newsForm = {
+        title: '',
+        excerpt: '',
+        content: '',
+        category: '',
+        image: ''
+      }
+      this.showNewsFormModal = true
+    },
+    
+    editNews(newsItem) {
+      this.editingNews = newsItem
+      this.newsForm = {
+        title: newsItem.title,
+        excerpt: newsItem.excerpt,
+        content: newsItem.content,
+        category: newsItem.category,
+        image: newsItem.image || ''
+      }
+      this.showNewsFormModal = true
+      if (this.showNewsModal) {
+        this.closeNewsModal()
+      }
+    },
+    
+    async submitNewsForm() {
+      this.newsLoading = true
+      try {
+        if (this.editingNews) {
+          await this.$http.put(`/news/${this.editingNews.id}`, this.newsForm)
+        } else {
+          await this.$http.post('/news', this.newsForm)
+        }
+        
+        this.closeNewsFormModal()
+        await this.fetchNews()
+      } catch (error) {
+        console.error('Failed to save news:', error)
+        alert('Не удалось сохранить новость. Проверьте все поля и попробуйте снова.')
+      } finally {
+        this.newsLoading = false
+      }
+    },
+    
+    async deleteNews(newsId) {
+      if (!confirm('Удалить эту новость? Это действие нельзя отменить.')) return
+      
+      try {
+        await this.$http.delete(`/news/${newsId}`)
+        await this.fetchNews()
+        if (this.showNewsModal) {
+          this.closeNewsModal()
+        }
+      } catch (error) {
+        console.error('Failed to delete news:', error)
+        alert('Не удалось удалить новость.')
+      }
+    },
+    
+    isAuthor(authorId) {
+      return this.user && this.user.id === authorId
+    },
+    
+    isCommentAuthor(authorId) {
+      return this.user && this.user.id === authorId
+    },
+    
     setFilter(filter) {
       this.activeFilter = filter
       this.visibleNews = 6
     },
+    
     loadMore() {
       this.visibleNews += 3
     },
+    
     closeNewsModal() {
       this.showNewsModal = false
+      this.selectedNews = null
+      this.comments = []
+      this.newComment = ''
       document.body.style.overflow = ''
     },
+    
+    closeNewsFormModal() {
+      this.showNewsFormModal = false
+      this.editingNews = null
+    },
+    
     shareNews(newsItem) {
       if (navigator.share) {
         navigator.share({
@@ -305,11 +501,11 @@ export default {
           url: window.location.href
         })
       } else {
-        // Fallback для браузеров без поддержки Web Share API
         navigator.clipboard.writeText(window.location.href)
         alert('Ссылка скопирована в буфер обмена!')
       }
     },
+    
     getCategoryLabel(category) {
       const labels = {
         'events': 'События',
@@ -319,6 +515,7 @@ export default {
       }
       return labels[category] || 'Новости'
     },
+    
     formatDate(dateString) {
       const date = new Date(dateString)
       return date.toLocaleDateString('ru-RU', {
@@ -327,14 +524,30 @@ export default {
         year: 'numeric'
       })
     },
+    
+    getImageUrl(imagePath) {
+      if (!imagePath) return '/images/default-news.jpg'
+      if (imagePath.startsWith('http')) return imagePath
+      return `https://begushiybashkir.ru${imagePath}`
+    },
+    
+    formatContent(content) {
+      return content.replace(/\n/g, '<br>')
+    },
+    
     handleKeydown(event) {
-      if (event.key === 'Escape' && this.showNewsModal) {
-        this.closeNewsModal()
+      if (event.key === 'Escape') {
+        if (this.showNewsModal) this.closeNewsModal()
+        if (this.showNewsFormModal) this.closeNewsFormModal()
       }
     }
   },
-  mounted() {
+  async mounted() {
     document.addEventListener('keydown', this.handleKeydown)
+    await this.fetchNews()
+    if (this.isAuthenticated) {
+      await this.fetchProfile()
+    }
   },
   beforeUnmount() {
     document.removeEventListener('keydown', this.handleKeydown)
@@ -344,12 +557,256 @@ export default {
 </script>
 
 <style scoped>
+/* Стили из предыдущей версии остаются без изменений, добавляем только новые */
+
+.news-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.news-owner-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-edit, .btn-delete, .btn-delete-comment {
+  background: none;
+  border: none;
+  padding: 5px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+}
+
+.btn-edit:hover {
+  background: #e3f2fd;
+  transform: scale(1.1);
+}
+
+.btn-delete:hover, .btn-delete-comment:hover {
+  background: #ffebee;
+  transform: scale(1.1);
+}
+
+.btn-danger {
+  background: #f44336;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #d32f2f;
+}
+
+.loading-state, .error-state, .empty-state {
+  text-align: center;
+  padding: 3rem;
+  color: #666;
+}
+
+.loading-spinner {
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #2e8b57;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.error-state {
+  color: #f44336;
+}
+
+/* Стили для комментариев */
+.comment-form {
+  margin-bottom: 2rem;
+}
+
+.comment-input {
+  width: 100%;
+  padding: 1rem;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 1rem;
+  resize: vertical;
+  margin-bottom: 1rem;
+}
+
+.comment-input:focus {
+  outline: none;
+  border-color: #2e8b57;
+}
+
+.auth-prompt {
+  text-align: center;
+  padding: 1.5rem;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.comments-list {
+  space-y: 1rem;
+}
+
+.comment-item {
+  background: #f8f9fa;
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+}
+
+.comment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.comment-author {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.author-avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.author-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.author-name {
+  font-weight: 600;
+  color: #2e8b57;
+}
+
+.comment-date {
+  color: #666;
+  font-size: 0.8rem;
+}
+
+.comment-content {
+  line-height: 1.5;
+  color: #333;
+}
+
+.no-comments {
+  text-align: center;
+  padding: 2rem;
+  color: #666;
+}
+
+/* Стили для формы новости */
+.news-form {
+  space-y: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.form-input, .form-textarea, .form-select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid #e9ecef;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 1rem;
+}
+
+.form-input:focus, .form-textarea:focus, .form-select:focus {
+  outline: none;
+  border-color: #2e8b57;
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+.char-count {
+  text-align: right;
+  font-size: 0.8rem;
+  color: #666;
+  margin-top: 0.25rem;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin-top: 2rem;
+}
+
+.modal-owner-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.modal-author {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  color: #666;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .news-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .news-owner-actions {
+    justify-content: center;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+  }
+  
+  .modal-owner-actions {
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .modal-owner-actions .btn {
+    width: 100%;
+  }
+}
+
+/* Остальные стили из предыдущей версии остаются без изменений */
 .news-page {
   min-height: 100vh;
   background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
 }
 
-/* Герой-секция */
 .hero-section {
   background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
   color: white;
@@ -395,7 +852,6 @@ export default {
   opacity: 0.8;
 }
 
-/* Основные стили */
 .container {
   max-width: 1200px;
   margin: 0 auto;
@@ -409,14 +865,8 @@ export default {
   font-weight: 700;
 }
 
-/* Заголовок новостей */
 .news-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   margin-bottom: 3rem;
-  flex-wrap: wrap;
-  gap: 2rem;
 }
 
 .news-filters {
@@ -445,7 +895,6 @@ export default {
   border-color: #2e8b57;
 }
 
-/* Сетка новостей */
 .news-section {
   padding: 4rem 0;
 }
@@ -539,6 +988,7 @@ export default {
   margin-bottom: 1rem;
   font-size: 0.8rem;
   color: #999;
+  flex-wrap: wrap;
 }
 
 .meta-item {
@@ -571,181 +1021,48 @@ export default {
   transform: translateY(-2px);
 }
 
-.btn-share {
-  background: #f8f9fa;
-  border: 2px solid #e9ecef;
-  padding: 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-size: 1.2rem;
+.load-more {
+  text-align: center;
+  margin-top: 2rem;
 }
 
-.btn-share:hover {
-  background: #e9ecef;
-  transform: scale(1.1);
-}
-
-/* Подписка */
-.subscribe-section {
-  background: white;
-  padding: 4rem 0;
-  border-top: 1px solid #e9ecef;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.subscribe-content {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 4rem;
+.btn {
+  display: inline-flex;
   align-items: center;
-  max-width: 900px;
-  margin: 0 auto;
-}
-
-.subscribe-text h2 {
-  color: #2e8b57;
-  margin-bottom: 1rem;
-  font-size: 2rem;
-}
-
-.subscribe-text p {
-  color: #666;
-  margin-bottom: 2rem;
-  line-height: 1.5;
-}
-
-.subscribe-features {
-  list-style: none;
-  padding: 0;
-}
-
-.subscribe-features li {
-  padding: 0.5rem 0;
-  color: #555;
-}
-
-.subscribe-form {
-  background: #f8fff8;
-  padding: 2rem;
-  border-radius: 15px;
-  border: 2px solid #e9ecef;
-}
-
-.email-input {
-  width: 100%;
-  padding: 15px;
-  border: 2px solid #e9ecef;
-  border-radius: 8px;
+  justify-content: center;
+  padding: 12px 24px;
+  border-radius: 50px;
+  text-decoration: none;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  gap: 0.5rem;
   font-size: 1rem;
-  margin-bottom: 1rem;
-  transition: border-color 0.3s ease;
+  cursor: pointer;
 }
 
-.email-input:focus {
-  outline: none;
+.btn-primary {
+  background: #ffd700;
+  color: #333;
+}
+
+.btn-primary:hover {
+  background: #e6c200;
+  transform: translateY(-2px);
+}
+
+.btn-outline {
+  background: transparent;
+  color: #2e8b57;
   border-color: #2e8b57;
 }
 
-.btn-subscribe {
-  width: 100%;
-  margin-bottom: 1rem;
-}
-
-.privacy-note {
-  font-size: 0.8rem;
-  color: #666;
-  text-align: center;
-}
-
-/* CTA секция */
-.cta-section {
-  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
+.btn-outline:hover {
+  background: #2e8b57;
   color: white;
-  padding: 80px 0;
-  text-align: center;
+  transform: translateY(-2px);
 }
 
-.cta-content h2 {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
-}
-
-.cta-content p {
-  font-size: 1.2rem;
-  opacity: 0.9;
-  margin-bottom: 3rem;
-}
-
-.cta-features {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
-  margin-bottom: 3rem;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.cta-feature {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  text-align: left;
-}
-
-.feature-icon {
-  font-size: 2.5rem;
-  flex-shrink: 0;
-}
-
-.feature-text {
-  display: flex;
-  flex-direction: column;
-}
-
-.feature-text strong {
-  font-size: 1.1rem;
-  margin-bottom: 0.3rem;
-}
-
-.feature-text span {
-  opacity: 0.8;
-  font-size: 0.9rem;
-}
-
-.cta-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-bottom: 2rem;
-}
-
-.cta-contacts p {
-  margin-bottom: 1rem;
-  opacity: 0.8;
-}
-
-.contact-links {
-  display: flex;
-  gap: 1.5rem;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.contact-link {
-  color: #ffd700;
-  text-decoration: none;
-  font-weight: 600;
-  transition: opacity 0.3s ease;
-}
-
-.contact-link:hover {
-  opacity: 0.8;
-}
-
-/* Модальное окно */
 .news-modal-overlay {
   position: fixed;
   top: 0;
@@ -858,25 +1175,12 @@ export default {
   margin-bottom: 2rem;
 }
 
-.news-content-full h3 {
-  color: #2e8b57;
-  margin: 1.5rem 0 1rem;
-}
-
-.news-content-full ul {
-  margin: 1rem 0;
-  padding-left: 1.5rem;
-}
-
-.news-content-full li {
-  margin-bottom: 0.5rem;
-}
-
 .modal-actions {
   display: flex;
   gap: 1rem;
   margin-bottom: 2rem;
   flex-wrap: wrap;
+  align-items: center;
 }
 
 .btn-share-modal {
@@ -905,73 +1209,6 @@ export default {
   margin-bottom: 1rem;
 }
 
-.comments-placeholder {
-  text-align: center;
-  padding: 2rem;
-  background: #f8f9fa;
-  border-radius: 10px;
-}
-
-/* Кнопки */
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 24px;
-  border-radius: 50px;
-  text-decoration: none;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  border: 2px solid transparent;
-  gap: 0.5rem;
-  font-size: 1rem;
-  cursor: pointer;
-}
-
-.btn-primary {
-  background: #ffd700;
-  color: #333;
-}
-
-.btn-primary:hover {
-  background: #e6c200;
-  transform: translateY(-2px);
-}
-
-.btn-secondary {
-  background: transparent;
-  color: white;
-  border-color: white;
-}
-
-.btn-secondary:hover {
-  background: white;
-  color: #2e8b57;
-  transform: translateY(-2px);
-}
-
-.btn-outline {
-  background: transparent;
-  color: #2e8b57;
-  border-color: #2e8b57;
-}
-
-.btn-outline:hover {
-  background: #2e8b57;
-  color: white;
-  transform: translateY(-2px);
-}
-
-.btn-large {
-  padding: 15px 30px;
-  font-size: 1.1rem;
-}
-
-.load-more {
-  text-align: center;
-  margin-top: 2rem;
-}
-
 /* Адаптивность */
 @media (max-width: 768px) {
   .hero-title {
@@ -986,48 +1223,24 @@ export default {
     font-size: 2rem;
   }
 
-  .news-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .news-filters {
-    justify-content: center;
+  .section-title {
+    font-size: 2rem;
   }
 
   .news-grid {
     grid-template-columns: 1fr;
   }
 
-  .subscribe-content {
-    grid-template-columns: 1fr;
-    gap: 2rem;
-  }
-
-  .cta-features {
-    grid-template-columns: 1fr;
-  }
-
-  .cta-actions {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .btn {
-    width: 100%;
-    max-width: 300px;
-  }
-
   .modal-content {
-    padding: 2rem 1.5rem;
+    padding: 2rem;
   }
 
   .modal-title {
     font-size: 1.5rem;
   }
 
-  .modal-actions {
-    flex-direction: column;
+  .news-modal-overlay {
+    padding: 1rem;
   }
 }
 
@@ -1040,171 +1253,29 @@ export default {
     font-size: 1.8rem;
   }
 
-  .section-title {
-    font-size: 2rem;
+  .hero-subtitle {
+    font-size: 1.1rem;
   }
 
-  .container {
-    padding: 0 15px;
+  .hero-stats {
+    gap: 1.5rem;
   }
 
-  .news-modal {
-    margin: 1rem;
+  .stat {
+    flex: 1;
   }
 
-  .modal-meta {
+  .news-section {
+    padding: 2rem 0;
+  }
+
+  .news-filters {
+    justify-content: center;
+  }
+
+  .news-controls {
     flex-direction: column;
-    gap: 0.5rem;
-  }
-}
-
-/* Категорийные стили для карточек */
-.news-card.events {
-  border-top: 4px solid #e74c3c;
-}
-
-.news-card.training {
-  border-top: 4px solid #3498db;
-}
-
-.news-card.achievements {
-  border-top: 4px solid #f39c12;
-}
-
-.news-card.community {
-  border-top: 4px solid #9b59b6;
-}
-
-/* Анимации */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.news-card {
-  animation: fadeInUp 0.6s ease;
-}
-
-/* Плавная прокрутка */
-html {
-  scroll-behavior: smooth;
-}
-
-/* Стили для состояния загрузки */
-.loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-/* Кастомный скроллбар */
-.news-modal::-webkit-scrollbar {
-  width: 8px;
-}
-
-.news-modal::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 0 20px 20px 0;
-}
-
-.news-modal::-webkit-scrollbar-thumb {
-  background: #2e8b57;
-  border-radius: 4px;
-}
-
-.news-modal::-webkit-scrollbar-thumb:hover {
-  background: #26734a;
-}
-
-/* Интерактивные состояния */
-.news-card.events:hover {
-  box-shadow: 0 10px 30px rgba(231, 76, 60, 0.15);
-}
-
-.news-card.training:hover {
-  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.15);
-}
-
-.news-card.achievements:hover {
-  box-shadow: 0 10px 30px rgba(243, 156, 18, 0.15);
-}
-
-.news-card.community:hover {
-  box-shadow: 0 10px 30px rgba(155, 89, 182, 0.15);
-}
-
-/* Анимация появления при прокрутке */
-@media (prefers-reduced-motion: no-preference) {
-  .news-card {
-    animation: fadeInUp 0.6s ease both;
-  }
-
-  .news-card:nth-child(odd) {
-    animation-delay: 0.1s;
-  }
-
-  .news-card:nth-child(even) {
-    animation-delay: 0.2s;
-  }
-}
-
-/* Улучшения доступности */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Фокус-стили для доступности */
-button:focus-visible,
-a:focus-visible {
-  outline: 2px solid #2e8b57;
-  outline-offset: 2px;
-}
-
-/* Темная тема поддержка */
-@media (prefers-color-scheme: dark) {
-  .news-page {
-    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-  }
-
-  .news-card {
-    background: #2d2d2d;
-    color: #ffffff;
-  }
-
-  .news-title {
-    color: #4CAF50;
-  }
-
-  .news-excerpt {
-    color: #cccccc;
-  }
-}
-
-/* Печать стили */
-@media print {
-
-  .hero-section,
-  .subscribe-section,
-  .cta-section,
-  .news-actions,
-  .modal-actions {
-    display: none;
-  }
-
-  .news-card {
-    break-inside: avoid;
-    box-shadow: none;
-    border: 1px solid #ddd;
+    gap: 1rem;
   }
 }
 </style>
\ No newline at end of file