Merge pull request #6 from SlimusMinus/add_feed

added feed

src/App.js

@@ -1,12 +1,15 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import RegisterPage from './pages/AuthPage';
+import FeedPage from './pages/FeedPage'; // ← добавь импорт
 
 function App() {
   return (
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Navigate to="/register" replace />} />
+          <Route path="/" element={<Navigate to="/feed" replace />} />
+
           <Route path="/register" element={<RegisterPage />} />
+          <Route path="/feed" element={<FeedPage />} />
         </Routes>
       </BrowserRouter>
   );

src/components/AdCard.jsx

@@ -0,0 +1,51 @@
+import PinIcon from "./icons/PinIcon";
+import CalendarIcon from "./icons/CalendarIcon";
+import PhoneIcon from "./icons/PhoneIcon";
+import MapIcon from "./icons/MapIcon";
+import HeartIcon from "./icons/HeartIcon";
+
+export default function AdCard({ ad, liked, onLike }) {
+  return (
+      <div className="f-card">
+        <div className="f-card-img">
+          {ad.image
+              ? <img src={ad.image} alt={ad.title} />
+              : <span className="f-card-emoji">{ad.emoji || "📋"}</span>
+          }
+          {ad.category && <div className="f-cat-badge">{ad.category}</div>}
+          <div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss" : "f-type-found"}`}>
+            {ad.type === "loss" ? "Потеря" : "Находка"}
+          </div>
+        </div>
+        <div className="f-card-body">
+          <div className="f-card-title">{ad.title}</div>
+          <div className="f-card-desc">{ad.description}</div>
+          <div className="f-card-meta">
+            {ad.location && <div className="f-meta-pill"><PinIcon /> {ad.location}</div>}
+            {ad.date     && <div className="f-meta-pill"><CalendarIcon /> {ad.date}</div>}
+          </div>
+          {ad.location && (
+              <button className="f-card-map" onClick={e => e.stopPropagation()}>
+                <MapIcon /> Показать на карте — {ad.location}
+              </button>
+          )}
+          <div className="f-card-foot">
+            {ad.phone
+                ? <a className="f-card-phone" href={`tel:${ad.phone}`} onClick={e => e.stopPropagation()}>
+                  <PhoneIcon /> {ad.phone}
+                </a>
+                : <span />
+            }
+            <span className="f-card-date">{ad.date || ""}</span>
+            <button
+                className={`f-like-btn${liked ? " liked" : ""}`}
+                onClick={e => { e.stopPropagation(); onLike(ad.id); }}
+            >
+              <HeartIcon filled={liked} />
+              {liked ? (ad.likes || 0) + 1 : (ad.likes || 0)}
+            </button>
+          </div>
+        </div>
+      </div>
+  );
+}

src/components/PostModal.jsx

@@ -0,0 +1,157 @@
+import {useCallback, useState} from "react";
+import {API_URL} from "../config/constants";
+import PinIcon from "./icons/PinIcon";
+import CloseIcon from "./icons/CloseIcon";
+import { EMPTY_FORM, CATEGORIES } from "../config/feedConstants";
+
+export default function PostModal({ onClose, onSuccess }) {
+  const [form, setForm] = useState(EMPTY_FORM);
+  const [errors, setErrors] = useState({});
+  const [loading, setLoading] = useState(false);
+  const [apiError, setApiError] = useState("");
+
+  const set = useCallback((k, v) => {
+    setForm(p => ({ ...p, [k]: v }));
+    setErrors(p => ({ ...p, [k]: "" }));
+    setApiError("");
+  }, []);
+
+  const validate = () => {
+    const e = {};
+    if (!form.title.trim())       e.title       = "Введите название";
+    if (!form.description.trim()) e.description = "Введите описание";
+    if (!form.category)           e.category    = "Выберите категорию";
+    if (!form.phone.trim())       e.phone       = "Введите номер телефона";
+    setErrors(e);
+    return !Object.keys(e).length;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
+    setLoading(true);
+    setApiError("");
+    try {
+      const res = await fetch(`${API_URL}/api/ads`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.message || `Ошибка ${res.status}`);
+      }
+      const newAd = await res.json();
+      onSuccess(newAd);
+      onClose();
+    } catch (err) {
+      setApiError(err.message || "Не удалось разместить объявление");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+      <div className="f-modal-bg" onClick={e => e.target === e.currentTarget && onClose()}>
+        <div className="f-modal">
+          <div className="f-modal-head">
+            <span className="f-modal-title">Новое объявление</span>
+            <button className="f-close-btn" onClick={onClose}><CloseIcon /></button>
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Тип объявления</label>
+            <div className="f-type-toggle">
+              <button className={`f-type-opt${form.type === "loss" ? " loss" : ""}`} onClick={() => set("type", "loss")}>
+                Потеря
+              </button>
+              <button className={`f-type-opt${form.type === "found" ? " found" : ""}`} onClick={() => set("type", "found")}>
+                Находка
+              </button>
+            </div>
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Название</label>
+            <input
+                className={`f-m-field${errors.title ? " err" : ""}`}
+                type="text"
+                placeholder="Например: Кошелёк чёрный кожаный"
+                value={form.title}
+                onChange={e => set("title", e.target.value)}
+            />
+            {errors.title && <p className="f-err-msg">{errors.title}</p>}
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Описание</label>
+            <textarea
+                className={`f-m-field${errors.description ? " err" : ""}`}
+                rows={3}
+                placeholder="Подробно опишите предмет — цвет, размер, особые приметы..."
+                value={form.description}
+                onChange={e => set("description", e.target.value)}
+            />
+            {errors.description && <p className="f-err-msg">{errors.description}</p>}
+          </div>
+
+          <div className="f-m-row">
+            <div className="f-m-group">
+              <label className="f-m-label">Категория</label>
+              <select
+                  className={`f-m-field${errors.category ? " err" : ""}`}
+                  value={form.category}
+                  onChange={e => set("category", e.target.value)}
+              >
+                <option value="">Выбрать...</option>
+                {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
+              </select>
+              {errors.category && <p className="f-err-msg">{errors.category}</p>}
+            </div>
+            <div className="f-m-group">
+              <label className="f-m-label">Дата события</label>
+              <input
+                  className="f-m-field"
+                  type="date"
+                  value={form.date}
+                  onChange={e => set("date", e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Место на карте</label>
+            <div className="f-map-pick">
+              <PinIcon size={14} />
+              Нажмите, чтобы отметить место
+            </div>
+            <p className="f-hint">Карта будет добавлена в следующей версии</p>
+          </div>
+
+          <div className="f-m-group">
+            <label className="f-m-label">Номер телефона</label>
+            <input
+                className={`f-m-field${errors.phone ? " err" : ""}`}
+                type="tel"
+                placeholder="+7 (___) ___-__-__"
+                value={form.phone}
+                onChange={e => set("phone", e.target.value)}
+            />
+            {errors.phone && <p className="f-err-msg">{errors.phone}</p>}
+          </div>
+
+          {apiError && (
+              <p className="f-err-msg" style={{ textAlign: "center", marginBottom: 10 }}>
+                {apiError}
+              </p>
+          )}
+
+          <button className="f-m-submit" onClick={handleSubmit} disabled={loading}>
+            <div className="f-m-submit-row">
+              {loading && <div className="f-m-spinner" />}
+              {loading ? "Размещаем..." : "Разместить объявление"}
+            </div>
+          </button>
+        </div>
+      </div>
+  );
+}

src/components/RightSidebar.jsx

@@ -0,0 +1,14 @@
+export default function RightSidebar() {
+  return (
+      <div className="f-right">
+        <div className="f-right-label">Реклама</div>
+        <div className="f-right-empty">
+          <div className="f-right-empty-icon">📢</div>
+          <div className="f-right-empty-text">
+            Здесь будет<br />ваша реклама
+          </div>
+          <button className="f-add-promo-btn">+ Добавить рекламу</button>
+        </div>
+      </div>
+  );
+}

src/components/Sidebar.jsx

@@ -0,0 +1,46 @@
+import LogoIcon from "./icons/LogoIcon";
+import React from "react";
+import {NAV_BOTTOM, NAV_ITEMS} from "../config/feedConstants";
+import {NavIcons} from "./icons/NavIcons";
+
+export default function Sidebar({ open, activeNav, onClose, onNavClick }) {
+  return (
+      <>
+        <div className={`f-overlay${open ? " show" : ""}`} onClick={onClose} />
+        <div className={`f-sidebar${open ? " open" : ""}`}>
+          <div className="f-sb-head">
+            <div className="f-sb-logo"><LogoIcon /></div>
+            <span className="f-sb-name">Находка</span>
+          </div>
+          <nav className="f-sb-nav">
+            {NAV_ITEMS.map(({ icon, label }) => {
+              const Ic = NavIcons[icon];
+              return (
+                  <div
+                      key={label}
+                      className={`f-sb-item${activeNav === label ? " active" : ""}`}
+                      onClick={() => { onNavClick(label); onClose(); }}
+                  >
+                    <Ic /> {label}
+                  </div>
+              );
+            })}
+          </nav>
+          <div className="f-sb-bottom">
+            {NAV_BOTTOM.map(({ icon, label }) => {
+              const Ic = NavIcons[icon];
+              return (
+                  <div
+                      key={label}
+                      className={`f-sb-item${activeNav === label ? " active" : ""}`}
+                      onClick={() => { onNavClick(label); onClose(); }}
+                  >
+                    <Ic /> {label}
+                  </div>
+              );
+            })}
+          </div>
+        </div>
+      </>
+  );
+}

src/components/icons/CalendarIcon.jsx

@@ -0,0 +1,10 @@
+export default function CalendarIcon () {
+  return (
+      <svg width={12} height={12} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <rect x="3" y="4" width="18" height="18" rx="2" />
+        <line x1="16" y1="2" x2="16" y2="6" />
+        <line x1="8" y1="2" x2="8" y2="6" />
+        <line x1="3" y1="10" x2="21" y2="10" />
+      </svg>
+  );
+}

src/components/icons/CloseIcon.jsx

@@ -0,0 +1,9 @@
+export default function CloseIcon() {
+  return (
+      <svg width={16} height={16} viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" strokeWidth={2.5} strokeLinecap="round">
+        <line x1="18" y1="6" x2="6" y2="18"/>
+        <line x1="6" y1="6" x2="18" y2="18"/>
+      </svg>
+  );
+}

src/components/icons/HeartIcon.jsx

@@ -0,0 +1,10 @@
+export default function HeartIcon({filled}) {
+  return (
+      <svg width={14} height={14} viewBox="0 0 24 24"
+           fill={filled ? "#ff6b6b" : "none"} stroke="#ff6b6b" strokeWidth={2}
+           strokeLinecap="round">
+        <path
+            d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+      </svg>
+  );
+}

src/components/icons/LogoIcon.jsx

@@ -0,0 +1,13 @@
+import magnifier from "../../assets/magnifier.png";
+
+export default function LogoIcon() {
+  return (
+      <img
+          src={magnifier}
+          alt="logo"
+          width={20}
+          height={20}
+          style={{ objectFit: "contain" }}
+      />
+  );
+}

src/components/icons/MapIcon.jsx

@@ -0,0 +1,10 @@
+export default function MapIcon() {
+  return (
+      <svg width={14} height={14} viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/>
+        <line x1="8" y1="2" x2="8" y2="18"/>
+        <line x1="16" y1="6" x2="16" y2="22"/>
+      </svg>
+  );
+}

src/components/icons/MenuIcon.jsx

@@ -0,0 +1,9 @@
+export default function MenuIcon () {
+  return (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.8)" strokeWidth={2.2} strokeLinecap="round">
+        <line x1="3" y1="6" x2="21" y2="6" />
+        <line x1="3" y1="12" x2="21" y2="12" />
+        <line x1="3" y1="18" x2="21" y2="18" />
+      </svg>
+  );
+}

src/components/icons/NavIcons.jsx

@@ -0,0 +1,39 @@
+export const NavIcons = {
+  grid: () => (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" />
+        <rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
+      </svg>
+  ),
+  alert: () => (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
+      </svg>
+  ),
+  search: () => (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <circle cx="11" cy="11" r="7" /><line x1="16.5" y1="16.5" x2="21" y2="21" />
+      </svg>
+  ),
+  chat: () => (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+      </svg>
+  ),
+  file: () => (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" />
+      </svg>
+  ),
+  user: () => (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
+      </svg>
+  ),
+  settings: () => (
+      <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <circle cx="12" cy="12" r="3" />
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+      </svg>
+  ),
+};

src/components/icons/PhoneIcon.jsx

@@ -0,0 +1,9 @@
+export default function PhoneIcon() {
+  return (
+      <svg width={12} height={12} viewBox="0 0 24 24" fill="none"
+           stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <path
+            d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.77a16 16 0 0 0 6.29 6.29l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
+      </svg>
+  );
+}

src/components/icons/PinIcon.jsx

@@ -0,0 +1,8 @@
+export default function PinIcon ({ size = 12 }) {
+  return (
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
+        <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z" />
+        <circle cx="12" cy="10" r="3" />
+      </svg>
+  );
+}

src/config/feedConstants.js

@@ -0,0 +1,29 @@
+// ─── CONSTANTS ────────────────────────────────────────────────────────────────
+export const NAV_ITEMS = [
+  { icon: "grid",   label: "Главная" },
+  { icon: "alert",  label: "Потери" },
+  { icon: "search", label: "Находки" },
+  { icon: "chat",   label: "Чат" },
+  { icon: "file",   label: "Мои объявления" },
+];
+
+export const NAV_BOTTOM = [
+  { icon: "user",     label: "Профиль" },
+  { icon: "settings", label: "Настройки" },
+];
+
+export const CATEGORIES = [
+  "Документы", "Электроника", "Животные",
+  "Ключи", "Одежда", "Украшения", "Другое",
+];
+
+// ─── EMPTY FORM ───────────────────────────────────────────────────────────────
+export const EMPTY_FORM = {
+  type: "loss",
+  title: "",
+  description: "",
+  category: "",
+  location: "",
+  phone: "",
+  date: "",
+};

src/pages/FeedPage.jsx

@@ -0,0 +1,141 @@
+import {useState, useEffect, useCallback} from "react";
+import "../styles/feed.css";
+import {API_URL} from "../config/constants";
+import Sidebar from "../components/Sidebar";
+import RightSidebar from "../components/RightSidebar";
+import AdCard from "../components/AdCard";
+import PostModal from "../components/PostModal";
+import MenuIcon from "../components/icons/MenuIcon"
+
+// ─── FEED PAGE ────────────────────────────────────────────────────────────────
+export default function FeedPage() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [activeNav, setActiveNav] = useState("Главная");
+  const [modalOpen, setModalOpen] = useState(false);
+  const [ads, setAds] = useState([]);
+  const [liked, setLiked] = useState(new Set());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  // Загрузка объявлений с бэка
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const res = await fetch(`${API_URL}/api/ads`);
+        if (!res.ok) {
+          throw new Error(`Ошибка ${res.status}`);
+        }
+        const data = await res.json();
+        // поддерживаем { items: [] } и просто []
+        setAds(Array.isArray(data) ? data : (data.items ?? []));
+      } catch (err) {
+        setError(err.message || "Не удалось загрузить объявления");
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  const toggleLike = useCallback((id) => {
+    setLiked(prev => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }, []);
+
+  // Новое объявление — добавляем в начало ленты
+  const handleNewAd = useCallback((ad) => {
+    setAds(prev => [ad, ...prev]);
+  }, []);
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+          <div className="f-center">
+            <div className="f-spinner-wrap">
+              <div className="f-spinner"/>
+              Загружаем объявления...
+            </div>
+          </div>
+      );
+    }
+    if (error) {
+      return (
+          <div className="f-center">
+            <div className="f-center-icon">⚠️</div>
+            <div className="f-center-title">Не удалось загрузить ленту</div>
+            <div className="f-center-sub">{error}</div>
+          </div>
+      );
+    }
+    if (!ads.length) {
+      return (
+          <div className="f-center">
+            <div className="f-center-icon">🔍</div>
+            <div className="f-center-title">Объявлений пока нет</div>
+            <div className="f-center-sub">
+              Будьте первым — разместите объявление<br/>о потере или находке
+            </div>
+          </div>
+      );
+    }
+    return ads.map(ad => (
+        <AdCard key={ad.id} ad={ad} liked={liked.has(ad.id)}
+                onLike={toggleLike}/>
+    ));
+  };
+
+  return (
+      <>
+        <div className="f-app">
+
+          <Sidebar
+              open={sidebarOpen}
+              activeNav={activeNav}
+              onClose={() => setSidebarOpen(false)}
+              onNavClick={setActiveNav}
+          />
+
+          <div className="f-main">
+            <div className="f-topbar">
+              <button className="f-menu-btn"
+                      onClick={() => setSidebarOpen(v => !v)}>
+                <MenuIcon/>
+              </button>
+              <div className="f-topbar-center">
+                <button className="f-post-btn"
+                        onClick={() => setModalOpen(true)}>
+                  <span style={{
+                    fontSize: "1.15rem",
+                    fontWeight: 900,
+                    lineHeight: 1
+                  }}>+</span>
+                  Разместить объявление
+                </button>
+              </div>
+              <div className="f-topbar-spacer"/>
+            </div>
+
+            <div className="f-wrap">
+              <div className="f-feed">
+                {renderContent()}
+              </div>
+              <RightSidebar/>
+            </div>
+          </div>
+
+          {modalOpen && (
+              <PostModal
+                  onClose={() => setModalOpen(false)}
+                  onSuccess={handleNewAd}
+              />
+          )}
+
+        </div>
+      </>
+  );
+}

src/styles/feed.css

@@ -0,0 +1,388 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --teal: #2de0c8;
+  --teal2: #1fc9b0;
+  --border: rgba(255,255,255,0.09);
+  --muted: rgba(255,255,255,0.38);
+  --muted2: rgba(255,255,255,0.15);
+  --font: 'Nunito', sans-serif;
+  --err: #ff6b6b;
+}
+
+.f-app {
+  display: flex; height: 100vh;
+  background: linear-gradient(135deg, #1a2340 0%, #0d1018 100%);
+  overflow: hidden; font-family: var(--font); position: relative;
+}
+
+/* Overlay */
+.f-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
+  z-index: 40; opacity: 0; pointer-events: none; transition: opacity .32s;
+}
+.f-overlay.show { opacity: 1; pointer-events: all; }
+
+/* Left Sidebar */
+.f-sidebar {
+  width: 260px; min-width: 260px;
+  background: linear-gradient(180deg, #1a2540 0%, #111827 100%);
+  border-right: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  transform: translateX(-100%);
+  transition: transform .32s cubic-bezier(.4,0,.2,1);
+  position: fixed; left: 0; top: 0; height: 100%; z-index: 50;
+}
+.f-sidebar.open { transform: translateX(0); }
+
+.f-sb-head {
+  padding: 22px 20px 16px;
+  display: flex; align-items: center; gap: 11px;
+  border-bottom: 1px solid var(--border);
+}
+.f-sb-logo {
+  width: 36px; height: 36px;
+  background: linear-gradient(135deg, var(--teal2), var(--teal));
+  border-radius: 10px;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.f-sb-name { color: #fff; font-weight: 900; font-size: 1.1rem; letter-spacing: -.3px; }
+.f-sb-nav { padding: 12px 0; flex: 1; }
+.f-sb-bottom { padding: 12px 0; border-top: 1px solid var(--border); }
+.f-sb-item {
+  display: flex; align-items: center; gap: 13px;
+  padding: 11px 20px; cursor: pointer;
+  transition: background .15s, color .15s;
+  color: var(--muted); font-size: .9rem; font-weight: 700;
+  border-left: 3px solid transparent;
+}
+.f-sb-item:hover { background: rgba(255,255,255,.05); color: #fff; }
+.f-sb-item.active { background: rgba(45,224,200,.1); color: var(--teal); border-left-color: var(--teal); }
+
+/* Main */
+.f-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+
+/* Topbar */
+.f-topbar {
+  display: flex; align-items: center; gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  background: rgba(13,16,24,.7); backdrop-filter: blur(12px);
+  position: sticky; top: 0; z-index: 10;
+}
+.f-menu-btn {
+  background: none; border: none; cursor: pointer;
+  padding: 6px; border-radius: 8px; transition: background .15s;
+  flex-shrink: 0; line-height: 0; width: 32px;
+}
+.f-menu-btn:hover { background: rgba(255,255,255,.08); }
+.f-topbar-center { flex: 1; display: flex; justify-content: center; }
+.f-topbar-spacer { width: 32px; flex-shrink: 0; }
+
+.f-post-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  padding: 12px 28px;
+  border-radius: 16px;
+
+  font-family: var(--font);
+  font-weight: 900;
+  font-size: 0.95rem;
+  letter-spacing: 0.3px;
+
+  color: #eafffb;
+
+  background: rgba(45, 224, 200, 0.12);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+
+  border: 1px solid rgba(45, 224, 200, 0.25);
+
+  box-shadow:
+      0 8px 24px rgba(0, 0, 0, 0.35),
+      inset 0 0 12px rgba(45, 224, 200, 0.15),
+      0 0 18px rgba(45, 224, 200, 0.15);
+
+  cursor: pointer;
+  transition: all 0.25s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+/* градиентное "стекло" сверху */
+.f-post-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+      120deg,
+      rgba(255,255,255,0.25),
+      rgba(255,255,255,0.05) 40%,
+      transparent 60%
+  );
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* glow при наведении */
+.f-post-btn:hover {
+  transform: translateY(-2px) scale(1.02);
+
+  border-color: rgba(45, 224, 200, 0.5);
+
+  box-shadow:
+      0 12px 32px rgba(0, 0, 0, 0.45),
+      inset 0 0 18px rgba(45, 224, 200, 0.25),
+      0 0 26px rgba(45, 224, 200, 0.35);
+}
+
+/* нажатие */
+.f-post-btn:active {
+  transform: translateY(0) scale(0.98);
+  box-shadow:
+      0 4px 12px rgba(0, 0, 0, 0.4),
+      inset 0 0 10px rgba(45, 224, 200, 0.2);
+}
+
+/* плюсик */
+.f-post-btn span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 22px;
+  height: 22px;
+
+  border-radius: 50%;
+
+  background: rgba(45, 224, 200, 0.2);
+  box-shadow: 0 0 10px rgba(45, 224, 200, 0.4);
+
+  font-size: 1.2rem;
+}
+
+.f-post-btn span {
+  transform: translateY(-2px);
+}
+
+@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
+
+/* Feed wrap */
+.f-wrap { display: flex; flex: 1; overflow: hidden; }
+
+/* Feed */
+.f-feed {
+  flex: 1; overflow-y: auto;
+  padding: 16px; display: flex; flex-direction: column; gap: 14px;
+}
+.f-feed::-webkit-scrollbar { width: 4px; }
+.f-feed::-webkit-scrollbar-track { background: transparent; }
+.f-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
+
+/* States */
+.f-center {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 12px; color: var(--muted); text-align: center; padding: 40px;
+}
+.f-center-icon { font-size: 2.8rem; opacity: .3; }
+.f-center-title { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.5); }
+.f-center-sub { font-size: .82rem; line-height: 1.6; }
+.f-spinner-wrap { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .88rem; }
+.f-spinner {
+  width: 20px; height: 20px;
+  border: 2px solid rgba(45,224,200,.2); border-top-color: var(--teal);
+  border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Ad Card */
+.f-card {
+  background: linear-gradient(155deg, #1d2436, #131720);
+  border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
+  transition: border-color .2s, transform .2s; cursor: pointer;
+}
+.f-card:hover { border-color: rgba(45,224,200,.3); transform: translateY(-2px); }
+
+.f-card-img {
+  width: 100%; height: 160px;
+  background: linear-gradient(135deg, #1a3a4a 0%, #0f2235 100%);
+  display: flex; align-items: center; justify-content: center;
+  position: relative; overflow: hidden;
+}
+.f-card-img img { width: 100%; height: 100%; object-fit: cover; }
+.f-card-emoji { font-size: 3rem; opacity: .22; }
+.f-cat-badge {
+  position: absolute; top: 10px; left: 10px;
+  background: rgba(13,16,24,.8); backdrop-filter: blur(8px);
+  border: 1px solid var(--border); border-radius: 20px;
+  padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--teal);
+}
+.f-type-badge {
+  position: absolute; top: 10px; right: 10px;
+  border-radius: 20px; padding: 3px 10px; font-size: .72rem; font-weight: 900;
+}
+.f-type-loss { background: rgba(255,107,107,.2); color: #ff6b6b; border: 1px solid rgba(255,107,107,.3); }
+.f-type-found { background: rgba(45,224,200,.2); color: #2de0c8; border: 1px solid rgba(45,224,200,.3); }
+
+.f-card-body { padding: 14px 16px; }
+.f-card-title { color: #fff; font-weight: 900; font-size: 1rem; margin-bottom: 5px; line-height: 1.3; }
+.f-card-desc {
+  color: var(--muted); font-size: .82rem; line-height: 1.5; margin-bottom: 10px;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.f-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
+.f-meta-pill {
+  display: flex; align-items: center; gap: 4px;
+  background: rgba(255,255,255,.05); border: 1px solid var(--border);
+  border-radius: 20px; padding: 3px 9px; font-size: .73rem; color: var(--muted);
+}
+.f-card-map {
+  width: 100%; height: 76px;
+  background: #080f1c; margin-bottom: 14px; border-radius: 12px;
+  border: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: center;
+  gap: 8px; color: var(--muted); font-size: .78rem;
+  cursor: pointer; transition: border-color .2s;
+  font-family: var(--font); font-weight: 600;
+}
+.f-card-map:hover { border-color: rgba(45,224,200,.3); color: var(--teal); }
+.f-card-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  padding-top: 10px; border-top: 1px solid var(--border);
+}
+.f-card-phone {
+  color: var(--teal); font-size: .82rem; font-weight: 700;
+  text-decoration: none; display: flex; align-items: center; gap: 5px;
+}
+.f-card-date { color: var(--muted2); font-size: .75rem; }
+.f-like-btn {
+  display: flex; align-items: center; gap: 5px;
+  background: none; border: 1px solid var(--border);
+  border-radius: 20px; padding: 5px 11px; cursor: pointer;
+  font-family: var(--font); font-size: .8rem; font-weight: 700;
+  color: var(--muted); transition: all .2s; line-height: 1;
+}
+.f-like-btn:hover, .f-like-btn.liked {
+  border-color: rgba(255,107,107,.5); color: #ff6b6b; background: rgba(255,107,107,.08);
+}
+
+/* Right Sidebar */
+.f-right {
+  width: 220px; min-width: 220px; padding: 16px 12px;
+  border-left: 1px solid var(--border);
+  display: flex; flex-direction: column; gap: 14px; overflow-y: auto;
+}
+.f-right::-webkit-scrollbar { width: 3px; }
+.f-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }
+.f-right-label {
+  font-size: .65rem; font-weight: 900;
+  text-transform: uppercase; letter-spacing: .8px; color: var(--muted2);
+}
+.f-right-empty {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 12px; text-align: center;
+  border: 1.5px dashed rgba(255,255,255,.08);
+  border-radius: 16px; padding: 20px; min-height: 200px;
+}
+.f-right-empty-icon { font-size: 2rem; opacity: .2; }
+.f-right-empty-text { color: var(--muted); font-size: .78rem; line-height: 1.5; }
+.f-add-promo-btn {
+  background: rgba(45,224,200,.08); border: 1px solid rgba(45,224,200,.25);
+  border-radius: 10px; padding: 9px 14px;
+  color: var(--teal); font-family: var(--font);
+  font-size: .8rem; font-weight: 800; cursor: pointer;
+  transition: background .2s, transform .15s;
+}
+.f-add-promo-btn:hover { background: rgba(45,224,200,.15); transform: translateY(-1px); }
+
+/* Modal */
+.f-modal-bg {
+  position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 100;
+  display: flex; align-items: center; justify-content: center;
+  animation: mfadeIn .2s ease;
+}
+@keyframes mfadeIn { from{opacity:0} to{opacity:1} }
+.f-modal {
+  background: linear-gradient(155deg, #1d2436, #131720);
+  border: 1px solid rgba(255,255,255,.12); border-radius: 24px;
+  width: 440px; max-height: 90vh; overflow-y: auto; padding: 26px 28px 24px;
+  animation: mslideUp .3s cubic-bezier(.34,1.56,.64,1);
+}
+@keyframes mslideUp { from{opacity:0;transform:translateY(30px) scale(.96)} to{opacity:1;transform:none} }
+.f-modal::-webkit-scrollbar { width: 4px; }
+.f-modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
+
+.f-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
+.f-modal-title { color: #fff; font-weight: 900; font-size: 1.1rem; }
+.f-close-btn {
+  background: rgba(255,255,255,.07); border: 1px solid var(--border);
+  border-radius: 8px; width: 32px; height: 32px;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; color: var(--muted); transition: background .15s;
+}
+.f-close-btn:hover { background: rgba(255,255,255,.13); color: #fff; }
+
+.f-m-group { margin-bottom: 14px; }
+.f-m-row { display: flex; gap: 10px; }
+.f-m-row .f-m-group { flex: 1; }
+.f-m-label {
+  display: block; color: rgba(255,255,255,.45);
+  font-size: .72rem; font-weight: 700; letter-spacing: .6px;
+  margin-bottom: 6px; text-transform: uppercase; font-family: var(--font);
+}
+.f-m-field {
+  width: 100%; background: rgba(255,255,255,.055);
+  border: 1.5px solid rgba(255,255,255,.09); border-radius: 12px;
+  padding: 11px 14px; color: #fff; font-family: var(--font);
+  font-size: .9rem; outline: none; resize: none;
+  transition: border-color .2s, box-shadow .2s;
+}
+.f-m-field:focus { border-color: #2de0c8; background: rgba(45,224,200,.07); box-shadow: 0 0 0 3px rgba(45,224,200,.12); }
+.f-m-field::placeholder { color: rgba(255,255,255,.32); }
+.f-m-field option { background: #1d2436; color: #fff; }
+.f-m-field.err { border-color: rgba(255,107,107,.55); }
+
+.f-type-toggle { display: flex; gap: 8px; }
+.f-type-opt {
+  flex: 1; padding: 10px; border-radius: 10px;
+  border: 1.5px solid rgba(255,255,255,.09); background: rgba(255,255,255,.04);
+  color: var(--muted); font-family: var(--font); font-size: .85rem;
+  font-weight: 800; cursor: pointer; text-align: center; transition: all .2s;
+}
+.f-type-opt.loss { border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.12); color: #ff6b6b; }
+.f-type-opt.found { border-color: rgba(45,224,200,.5); background: rgba(45,224,200,.1); color: #2de0c8; }
+
+.f-map-pick {
+  height: 80px; background: linear-gradient(135deg, #0f2235, #0a1a2e);
+  border-radius: 12px; border: 1.5px dashed rgba(255,255,255,.15);
+  display: flex; align-items: center; justify-content: center;
+  gap: 8px; color: var(--muted); font-size: .83rem; cursor: pointer;
+  transition: border-color .2s; font-family: var(--font); font-weight: 600;
+}
+.f-map-pick:hover { border-color: rgba(45,224,200,.4); color: var(--teal); }
+.f-hint { font-size: .72rem; color: var(--muted); margin-top: 4px; }
+.f-err-msg { font-size: .78rem; color: var(--err); margin-top: 5px; }
+
+.f-m-submit {
+  width: 100%;
+  background: linear-gradient(90deg, #1fc9b0, #2de0c8, #1fc9b0);
+  background-size: 200% 100%; border: none; border-radius: 13px;
+  padding: 14px; color: #082320; font-family: var(--font);
+  font-size: 1rem; font-weight: 900; cursor: pointer; margin-top: 6px;
+  animation: shimmer 3s linear infinite; transition: opacity .15s, transform .15s;
+}
+.f-m-submit:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
+.f-m-submit:active:not(:disabled) { transform: translateY(0); }
+.f-m-submit:disabled { opacity: .5; cursor: not-allowed; animation: none; background: #444; color: #aaa; }
+.f-m-submit-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
+.f-m-spinner {
+  width: 16px; height: 16px;
+  border: 2px solid rgba(8,35,32,.3); border-top-color: #082320;
+  border-radius: 50%; animation: spin .7s linear infinite;
+}