From 5048027273172223567d4dc0a0de8bc1d5fbf534 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 21 Dec 2025 17:08:17 -0500 Subject: [PATCH] update frontend --- src/main.jsx.swbak.20251219-170456 | 26 -- src/styles/mapMarkers.css | 654 ++--------------------------- 2 files changed, 29 insertions(+), 651 deletions(-) delete mode 100644 src/main.jsx.swbak.20251219-170456 diff --git a/src/main.jsx.swbak.20251219-170456 b/src/main.jsx.swbak.20251219-170456 deleted file mode 100644 index 63d1419..0000000 --- a/src/main.jsx.swbak.20251219-170456 +++ /dev/null @@ -1,26 +0,0 @@ -import "@fortawesome/fontawesome-free/css/all.min.css"; // local via npm (no CDN) - -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App.jsx"; - -import "./styles/base.css"; -import "./styles/layout.css"; -import "./styles/topbar.css"; -import "./styles/map.css"; -import "./styles/overlays.css"; -import "./styles/posts.css"; -import "./styles/theme.css"; -import "./styles/auth-modal.css"; -import "./styles/filters.css"; -import "./styles/mapMarkers.css"; - -import { AuthProvider } from "./auth/AuthContext.jsx"; - -ReactDOM.createRoot(document.getElementById("root")).render( - - - - - -); diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css index 0275996..7cdde95 100644 --- a/src/styles/mapMarkers.css +++ b/src/styles/mapMarkers.css @@ -1,3 +1,4 @@ +/* FIX: Cartes markers sur la carte - plus opaques et belles */ .post-pin { position: relative; width: 0; @@ -7,23 +8,24 @@ } .post-pin * { pointer-events: auto; box-sizing: border-box; } -.post-pin--compact .post-pin-bubble { - position: absolute; - left: 0; - top: 0; - transform: translate(-50%, calc(-100% - 12px)); - display: inline-flex; - align-items: center; - padding: 4px 8px; - border-radius: 999px; - background: rgba(6, 40, 80, 0.95); - border: 1px solid rgba(80, 180, 255, 0.9); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); - max-width: 180px; +/* Carte compacte (mini) - moins transparente */ +.post-pin--compact .sw-template-mini-wrap { + background: rgba(15, 23, 42, 0.98) !important; /* fond opaque */ + border-radius: 14px !important; + border: 1px solid rgba(148, 163, 184, 0.9) !important; + box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 12px rgba(56,189,248,0.4) !important; + padding: 8px 10px; + transform: translate(-50%, calc(-100% - 12px)) scale(0.62); + transform-origin: bottom center; } -.post-pin-dot { width:10px; height:10px; border-radius:999px; background:#ff8a00; margin-right:6px; flex-shrink:0; } -.post-pin-text { color:#e8f5ff; font-size:11px; font-weight:500; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } +/* Couleur par catégorie (comme dans templateSpecs.js) */ +body[data-theme="blue"] .post-pin--compact [data-category="NEWS"] { background: rgba(56,189,248,0.35) !important; border-color: #38bdf8 !important; } +body[data-theme="blue"] .post-pin--compact [data-category="EVENT"] { background: rgba(168,85,247,0.35) !important; border-color: #a855f7 !important; } +body[data-theme="blue"] .post-pin--compact [data-category="FRIENDS"] { background: rgba(34,197,94,0.35) !important; border-color: #22c55e !important; } +body[data-theme="blue"] .post-pin--compact [data-category="MARKET"] { background: rgba(250,204,21,0.35) !important; border-color: #facc15 !important; } + +/* Pointer (flèche en bas) plus propre */ .post-pin--compact .post-pin-pointer-small { position: absolute; left: 0; @@ -33,618 +35,20 @@ height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; - border-top: 9px solid rgba(6, 40, 80, 0.95); - filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); + border-top: 9px solid rgba(15, 23, 42, 0.98); /* même fond opaque */ + filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); } -/* ===== Template mini wrapper (keeps pointer unchanged) ===== */ -.sw-template-mini-wrap{ - position: absolute; - left: 0; - top: 0; - transform: translate(-50%, calc(-100% - 12px)) scale(0.62); - transform-origin: bottom center; - will-change: transform; -} - -@media (max-width: 640px){ - .sw-template-mini-wrap{ - transform: translate(-50%, calc(-100% - 12px)) scale(0.52); - } -} - -/* ========================================================= - NEW: FIXED EXPANDED OVERLAY - - Card is fixed near bottom (consistent) - - Pointer follows marker (consistent) - - No huge map recenter jumps - ========================================================= */ - -.sw-expanded-overlay-root{ - position:absolute; - inset:0; - z-index: 999999; - pointer-events:none; -} - -/* Card position: "dans le bas" (approx bottom zone), consistent on rotate */ -.sw-expanded-overlay-card{ - position:absolute; - left: 50%; - bottom: calc(12px + env(safe-area-inset-bottom) + var(--sw-below-overlap, 0px)); - transform: translateX(-50%); - width: min(92vw, 420px); - pointer-events: auto; -} - -/* Make card fit mobile nicely */ -.sw-expanded-overlay-card .post-card{ - width: 100%; - max-height: min(58vh, 640px); - overflow:auto; - -webkit-overflow-scrolling: touch; - background: rgba(8, 20, 40, 0.97); - border-radius: 14px; - padding: 10px 12px; - box-shadow: 0 10px 26px rgba(0, 0, 0, 0.85); - border: 1px solid rgba(90, 190, 255, 0.9); - color: #e8f5ff; -} - -/* Pointer on the marker position */ -.sw-overlay-pointer{ - position:absolute; - width:0; height:0; - border-left: 10px solid transparent; - border-right:10px solid transparent; - border-top: 11px solid rgba(8, 20, 40, 0.97); - filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); - transform: translate(-50%, -100%); - left: 0; - top: 0; -} - -/* Simple line from marker to card */ -.sw-overlay-line{ - position:absolute; - height: 2px; - background: rgba(56,189,248,0.35); - transform-origin: 0 50%; - left: 0; - top: 0; - width: 0; - filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); -} - -/* ===== Expanded layout pieces (same as before) ===== */ -.sw-expanded-shell{ padding: 10px 12px; } - -.sw-expanded-top{ - display:flex; - gap:10px; - align-items:flex-start; -} - -.sw-expanded-left{ flex: 1; } - -.sw-expanded-right{ - width: 150px; - min-width: 140px; - display:flex; - flex-direction:column; - gap:8px; - padding-top: 4px; -} - -.sw-watch-title{ - font-size: 11px; - font-weight: 800; - color:#bfdbfe; - text-transform: uppercase; - letter-spacing: .06em; -} - -.sw-watch-list{ display:flex; flex-direction:column; gap:6px; } - -.sw-watch-item{ - font-size: 11px; - color:#e8f5ff; - background: rgba(3, 14, 32, 0.75); - border: 1px solid rgba(90, 190, 255, 0.35); - border-radius: 10px; - padding: 6px 8px; -} - -.sw-watch-msg{ - opacity:.85; - margin-top:2px; - font-size: 10px; - color:#c7e3ff; -} - -.sw-add-feed-btn{ - margin-top: 2px; - border: 1px solid rgba(148,163,184,.7); - border-radius: 10px; - padding: 8px 10px; - background: rgba(5, 35, 70, 0.85); - color:#e8f5ff; - font-weight: 900; - font-size: 11px; - cursor:pointer; -} - -.sw-news-generated{ - margin-top: 10px; - padding: 8px 10px; - border-radius: 12px; - background: rgba(3, 14, 32, 0.75); - border: 1px solid rgba(90, 190, 255, 0.35); -} - -.sw-news-title{ - font-size: 12px; - font-weight: 900; - color:#e8f5ff; - margin-bottom: 2px; -} - -.sw-news-sub{ font-size: 10px; color:#9eb7ff; } - -.sw-actions-row{ margin-top: 8px; } - -.sw-livechat{ margin-top: 8px; } - -.sw-livechat-title{ - font-weight: 800; - letter-spacing:.04em; - margin-bottom: 6px; -} - -.sw-livechat-body{ - display:flex; - flex-direction:column; - gap:3px; - margin-bottom: 8px; - opacity:.95; -} - -.sw-chat-line{ font-size: 10px; color:#c7e3ff; } - -.sw-livechat-inputrow{ display:flex; gap:8px; align-items:center; } - -.sw-livechat-input{ - flex:1; - border-radius: 999px; - border: 1px solid rgba(90, 190, 255, 0.35); - background: rgba(3, 14, 32, 0.75); - color:#e8f5ff; - padding: 8px 10px; - font-size: 11px; - outline: none; -} - -.sw-livechat-post{ - border:none; - border-radius: 10px; - padding: 8px 12px; - background: rgba(56,189,248,0.22); - color:#e8f5ff; - font-weight: 900; - font-size: 11px; - cursor:pointer; -} - -/* Mobile: keep overlay readable */ -@media (max-width: 640px){ - .sw-expanded-overlay-card{ - width: min(94vw, 360px); - } - .sw-expanded-top{ - flex-direction: column; - } - .sw-expanded-right{ - display:none; - } -} - - -/* SW_FIX_FULL_WRAP_COLLAPSE:BEGIN */ -/* Fix: expanded template wrapper collapsing into a thin line */ -.post-pin--expanded .post-card.sw-expanded-shell{ - width: 360px !important; - min-width: 360px !important; - max-width: 360px !important; - height: 520px !important; - max-height: 520px !important; - overflow: hidden !important; /* no useless scroll */ -} - -.sw-template-full-wrap{ - display: block !important; - width: 360px !important; - height: 520px !important; -} - -.sw-template-full-wrap > *{ - display: block !important; -} -/* SW_FIX_FULL_WRAP_COLLAPSE:END */ - - - -/* ===== Expanded header (mock) ===== */ -.sw-expanded-badge{ - display:inline-flex; - align-items:center; - justify-content:center; - padding: 6px 10px; - border-radius: 999px; - font-weight: 900; - font-size: 12px; - background: rgba(56,189,248,0.18); - color: #D7F3FF; - width: fit-content; -} - -.sw-expanded-title{ - margin-top: 10px; - font-size: 26px; - font-weight: 900; - line-height: 1.05; - color: #F0F7FF; -} - -.sw-expanded-snippet{ - margin-top: 8px; - font-size: 14px; - font-weight: 700; - color: #B5C7E6; -} - -/* ========================================================= - SW_EXPANDED_POLISH (visual only) - - make expanded look like the mini gradients / modern UI - ========================================================= */ -.post-pin--expanded .post-card{ - background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(7,18,37,0.98) 55%, rgba(2,6,23,0.98)); - border: 1px solid rgba(96,165,250,0.75); - box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 24px rgba(56,189,248,0.22); -} - -.sw-expanded-badge{ - display:inline-flex; - align-items:center; - justify-content:center; - padding: 7px 12px; - border-radius: 999px; - font-weight: 900; - font-size: 12px; - letter-spacing: .04em; - color: #d7f3ff; - background: rgba(56,189,248,0.16); - border: 1px solid rgba(56,189,248,0.35); - margin-bottom: 10px; -} - -.sw-expanded-title{ - font-size: 28px; - font-weight: 950; - line-height: 1.05; - color: #f0f7ff; - margin-bottom: 8px; -} - -.sw-expanded-meta{ - font-size: 12px; - font-weight: 700; - color: rgba(181,199,230,0.95); - margin-bottom: 10px; -} - -.sw-expanded-snippet{ - font-size: 14px; - line-height: 1.35; - color: rgba(215,233,255,0.95); - background: rgba(3,14,32,0.45); - border: 1px solid rgba(90,190,255,0.22); - border-radius: 14px; - padding: 10px 12px; -} - -.post-card-btn{ - background: rgba(56,189,248,0.14); - border: 1px solid rgba(56,189,248,0.35); - color: #e8f5ff; - font-weight: 900; - padding: 6px 12px; -} - -.post-card-btn:active{ - transform: scale(0.98); -} - -/* ===== CENTER MODAL CONTENT (pretty + consistent) ===== */ -.sw-modal{ +/* Carte étendue (full) - moins transparente */ +.sw-expanded-overlay-card .post-card { + background: rgba(15, 23, 42, 0.98) !important; + border: 1px solid rgba(148, 163, 184, 0.9) !important; + box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 16px rgba(56,189,248,0.5) !important; padding: 12px 14px; } -.sw-modal-toprow{ - display:flex; - align-items:flex-start; - justify-content:space-between; - gap:10px; - margin-bottom: 10px; -} - -.sw-modal-badge{ - display:inline-flex; - align-items:center; - justify-content:center; - padding: 6px 10px; - border-radius: 999px; - font-size: 11px; - font-weight: 900; - letter-spacing: .06em; - background: rgba(56,189,248,0.16); - border: 1px solid rgba(90, 190, 255, 0.28); - color:#D7F3FF; - text-transform: uppercase; -} - -.sw-modal-meta{ - margin-top: 6px; - font-size: 11px; - color:#9eb7ff; - opacity:.95; - display:flex; - gap:6px; - flex-wrap:wrap; -} - -.sw-modal-x{ - border:none; - border-radius:999px; - width:34px; - height:34px; - background: rgba(3,14,32,0.55); - color:#e8f5ff; - font-weight:900; - cursor:pointer; - border:1px solid rgba(90,190,255,0.25); - flex-shrink:0; -} - -.sw-modal-hero{ - width:100%; - height: 180px; - border-radius: 16px; - overflow:hidden; - border: 1px solid rgba(90, 190, 255, 0.22); - background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.18), rgba(3,14,32,0.85)); - box-shadow: 0 10px 24px rgba(0,0,0,0.35); - margin-bottom: 10px; -} - -.sw-modal-hero img{ - width:100%; - height:100%; - object-fit: cover; - display:block; -} - -.sw-modal-hero-fallback{ - width:100%; - height:100%; - background: radial-gradient(circle at 35% 35%, rgba(56,189,248,0.22), rgba(3,14,32,0.85)); -} - -.sw-modal-title{ - font-size: 22px; - font-weight: 900; - line-height: 26px; - color:#F0F7FF; - margin: 6px 0 8px; -} - -.sw-modal-summary{ - font-size: 13px; - line-height: 17px; - color:#D7E9FF; - opacity:.95; - margin-bottom: 8px; -} - -.sw-stat-row{ - display:flex; - gap:8px; - flex-wrap:wrap; - margin: 6px 0 10px; -} - -.sw-stat-pill{ - font-size: 11px; - color:#c7e3ff; - background: rgba(3, 14, 32, 0.58); - border: 1px solid rgba(90, 190, 255, 0.22); - padding: 6px 10px; - border-radius: 999px; -} - -.sw-modal-cta-row{ - display:flex; - flex-direction:column; - gap:10px; - margin-bottom: 10px; -} - -.sw-cta-primary{ - width:100%; - border:none; - border-radius: 14px; - padding: 14px 12px; - font-weight: 900; - font-size: 14px; - color:#e8f5ff; - cursor:pointer; - background: rgba(56,189,248,0.22); - box-shadow: 0 10px 18px rgba(0,0,0,0.35); -} - -.sw-cta-primary:disabled{ - opacity:.55; - cursor:default; -} - -.sw-cta-actions{ - display:flex; - gap:8px; - flex-wrap:wrap; -} - -/* mobile tighten */ -@media (max-width: 640px){ - .sw-modal-hero{ height: 150px; } - .sw-modal-title{ font-size: 20px; line-height: 24px; } -} - - -/* ========================================= - SW_CENTERED_MODAL_ANIM - - fade + scale on open/close (slow) - ========================================= */ -.sw-centered-backdrop{ - position: fixed; - inset: 0; - z-index: 9999999; - background: rgba(0,0,0,0.08); - backdrop-filter: blur(1px); - display: flex; - align-items: center; - justify-content: center; - padding: 12px; - pointer-events: auto; - - opacity: 0; - transition: opacity 440ms ease; -} - -.sw-centered-modal{ - transform: scale(0.94); - opacity: 0.0; - transition: transform 440ms ease, opacity 440ms ease; - will-change: transform, opacity; -} - -.sw-centered-backdrop.sw-open{ - opacity: 1; -} - -.sw-centered-modal.sw-open{ - transform: scale(1); - opacity: 1.0; -} - -/* closing state (optional hook) */ -.sw-centered-backdrop.sw-closing{ - opacity: 0; -} - - -/* ========================================= - SW_MINI_SMOOTH_MOVE - - stop "sautillage/blink sec" while panning/zooming - - MapLibre animates marker transforms every frame. - - Any CSS transition/filter on marker subtree can cause shimmer/jitter on mobile. - ========================================= */ -.post-pin{ - will-change: transform; - transform: translate3d(0,0,0); -} - -/* NO transitions on marker subtree (prevents bounce/lag while map moves) */ -.post-pin, .post-pin *{ - transition: none !important; -} - -/* Make the mini template wrap GPU-friendly */ -.sw-template-mini-wrap{ - backface-visibility: hidden; - transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.62); - transform-origin: bottom center; -} - -/* Mobile scale keeps same behavior, but still GPU */ -@media (max-width: 640px){ - .sw-template-mini-wrap{ - transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.52); - } -} - -/* Drop-shadow filters on triangles can shimmer on Android أثناء الحركة */ -.post-pin--compact .post-pin-pointer-small{ - filter: none; -} - - -@media (prefers-reduced-motion: reduce){ - .sw-centered-backdrop, .sw-centered-modal{ - transition: none !important; - } -} - -/* SW_MARKER_SMOOTH_APPEAR:BEGIN */ -.post-pin.sw-appear{ - opacity: 0; - transform: translate3d(0,0,0) scale(0.96); - transition: opacity 840ms ease, transform 840ms ease; -} -.post-pin.sw-appear.sw-appear-in{ - opacity: 1; - transform: translate3d(0,0,0) scale(1); -} -.post-pin.sw-disappear{ - opacity: 0; - transform: translate3d(0,0,0) scale(0.96); - transition: opacity 840ms ease, transform 840ms ease; -} -/* SW_MARKER_SMOOTH_APPEAR:END */ - -/* SW_CENTER_MODAL_ANIM:BEGIN */ -.sw-centered-backdrop{ - opacity: 0; - transition: opacity 840ms ease; -} -.sw-centered-backdrop.sw-enter-active{ opacity: 1; } -.sw-centered-backdrop.sw-leave{ opacity: 0; } - -.sw-centered-modal{ - opacity: 0; - transform: translate3d(0,0,0) scale(0.92); - transition: opacity 840ms ease, transform 840ms cubic-bezier(.2,.9,.2,1); - will-change: opacity, transform; -} -.sw-centered-modal.sw-enter-active{ - opacity: 1; - transform: translate3d(0,0,0) scale(1); -} -.sw-centered-modal.sw-leave{ - opacity: 0; - transform: translate3d(0,0,0) scale(0.94); -} -/* SW_CENTER_MODAL_ANIM:END */ - -/* SW_MODAL_FADE:BEGIN */ -.sw-centered-backdrop{ opacity:0; transition: opacity 840ms ease; } -.sw-centered-backdrop.sw-enter-active{ opacity:1; } -.sw-centered-backdrop.sw-leave{ opacity:0; } - -.sw-centered-modal{ - opacity:0; - transform: translate3d(0,0,0) scale(0.92); - transition: opacity 840ms ease, transform 840ms cubic-bezier(.2,.9,.2,1); - will-change: opacity, transform; -} -.sw-centered-modal.sw-enter-active{ opacity:1; transform: translate3d(0,0,0) scale(1); } -.sw-centered-modal.sw-leave{ opacity:0; transform: translate3d(0,0,0) scale(0.94); } -/* SW_MODAL_FADE:END */ +/* Couleur catégorie sur carte étendue */ +.sw-expanded-overlay-card [data-category="NEWS"] .sw-modal-badge { background: rgba(56,189,248,0.35) !important; border-color: #38bdf8 !important; } +.sw-expanded-overlay-card [data-category="EVENT"] .sw-modal-badge { background: rgba(168,85,247,0.35) !important; border-color: #a855f7 !important; } +.sw-expanded-overlay-card [data-category="FRIENDS"] .sw-modal-badge { background: rgba(34,197,94,0.35) !important; border-color: #22c55e !important; } +.sw-expanded-overlay-card [data-category="MARKET"] .sw-modal-badge { background: rgba(250,204,21,0.35) !important; border-color: #facc15 !important; } \ No newline at end of file