Sprzątanie projektu - dodanie podglądu gpx - dodanie obsługi logo i avatara - dodanie editable config do prostej edycji tekstów na stronie

_EDITABLE_CONFIG/ai_prompts.ts

@@ -0,0 +1,267 @@
+
+import { WizardState } from '../types';
+
+// === HELPER CONSTANTS ===
+
+const CONTEXT_PROMPTS = {
+  relacja: `
+### KROK 1: KONTEKST - RELACJA (VLOG)
+Twoim zadaniem jest opisanie wydarzenia, w którym brałeś bezpośredni udział. Piszesz z pierwszej osoby ("ja"). Skup się na autentyczności, tym co widziałeś, czułeś i robiłeś. To ma być dynamiczny zapis Twoich doświadczeń, a nie suchy raport.
+  `,
+  opowiesc: `
+### KROK 1: KONTEKST - OPOWIEŚĆ (STORYTELLING)
+- RAMY CZASOWE: Przeszłość. Spojrzenie z dystansu.
+- NARRACJA: Refleksyjna, uporządkowana, posiadająca morał.
+- CEL: Zainspirowanie lub wyciągnięcie wniosków z minionego wydarzenia.
+- ZASADA: Buduj klasyczny łuk narracyjny (Wstęp -> Punkt zwrotny -> Zakończenie).
+  `
+};
+
+const STORY_STYLE_PROMPTS = {
+  noir: `
+### KROK 1B: STYL - KRYMINAŁ NOIR
+- KLIMAT: Mroczny, deszczowy, cyniczny, pełen cieni i kontrastów.
+- NARRATOR: Zmęczony życiem detektyw/bohater, który widział już wszystko.
+- JĘZYK: Krótkie, cięte zdania. Wewnętrzny monolog. Metafory związane z miastem, nocą, zbrodnią i brudem.
+- PRZYKŁAD: "To nie był zwykły bieg. To była ucieczka przed własnymi demonami w strugach brudnego deszczu."
+  `,
+  fantasy: `
+### KROK 1B: STYL - PRZYGODA FANTASY (EPIC)
+- KLIMAT: Epicki, magiczny, heroiczny, tajemniczy.
+- NARRATOR: Bohater wyruszający na wyprawę (Quest).
+- JĘZYK: Stylizowany, podniosły. Traktuj zwykłe obiekty jak artefakty (np. buty biegowe to "Siedmiomilowe Buty Prędkości"). Przeszkody to "potwory" lub "klątwy".
+- PRZYKŁAD: "Wyruszyłem o świcie, gdy mgła wciąż spowijała Dolinę Cieni, uzbrojony jedynie w wolę przetrwania."
+  `
+};
+
+const EVENT_PROMPTS = {
+  sport: `
+### KROK 2: TYP - SPORT & WYSIŁEK
+- SŁOWNICTWO: Kadencja, strefy tętna, PB (Personal Best), bomba, ściana, endorfiny, laktat, tempo, waty, regeneracja.
+- FOKUS: Walka ze słabościami, liczby, progres, fizyczne odczucia (ból, euforia).
+  `,
+  culture: `
+### KROK 2: TYP - KULTURA & SZTUKA
+- SŁOWNICTWO: Kompozycja, estetyka, światło, interpretacja, wernisaż, performance, akt, scena, nastrojowość, głębia.
+- FOKUS: Wrażliwość na piękno, detale, intelektualna stymulacja, atmosfera.
+  `,
+  trip: `
+### KROK 2: TYP - PODRÓŻE (TRAVEL)
+- SŁOWNICTWO: Hidden gems, lokalsi, vibe, bucket list, view, golden hour, backpack, eksploracja, off-road, wanderlust.
+- FOKUS: Odkrywanie nieznanego, wolność, zachwyt naturą/architekturą, przygoda.
+  `,
+  party: `
+### KROK 2: TYP - IMPREZA & FESTIWAL
+- SŁOWNICTWO: Line-up, drop, bas, parkiet, after, before, ekipa, energia, sunrise, vibe check, main stage.
+- FOKUS: Energia tłumu, muzyka, taniec, radość, chaos, nocne życie.
+  `,
+  work: `
+### KROK 2: TYP - PRACA & ROZWÓJ
+- SŁOWNICTWO: Networking, insights, key takeaways, branża, innowacja, leadership, hustle, growth mindset, B2B.
+- FOKUS: Budowanie autorytetu, wymiana wiedzy, lekcje biznesowe, profesjonalizm.
+  `,
+  other: `
+### KROK 2: TYP - LIFESTYLE / CODZIENNOŚĆ
+- SŁOWNICTWO: Rutyna, małe rzeczy, wdzięczność, storytime, plot twist, lifehack, cozy, day-in-the-life.
+- FOKUS: Autentyczność, relacje, codzienne wyzwania i radości.
+  `
+};
+
+const PLATFORM_PROMPTS = {
+  instagram: `
+### KROK 3: PLATFORMA - INSTAGRAM (PROFESSIONAL CAROUSEL)
+- ZASADA GŁÓWNA: Twoim celem jest zatrzymanie scrollowania (Stop the scroll).
+- FORMAT: Karuzela (Slide Deck).
+- LICZBA SLAJDÓW: Dobierz automatycznie optymalną liczbę z zakresu 5-12. Nie rozciągaj historii na siłę, ale też jej nie ucinaj.
+
+### STRUKTURA SLAJDÓW (JSON 'slides'):
+1. SLAJD 1 (HOOK): Musi być mocnym nagłówkiem, który obiecuje wartość lub szokuje. Krótko i dosadnie.
+2. ŚRODEK: Storytelling wizualny. Jeden slajd = jedna główna myśl.
+3. OSTATNI SLAJD (CTA): Wezwanie do akcji.
+
+### INSTRUKCJA GRAFICZNA ('image_prompt'):
+- JĘZYK: Polski.
+- CEL: Sugeruj użytkownikowi, jakie zdjęcie z własnej galerii powinien wybrać.
+- PRZYKŁAD: "Zdjęcie z perspektywy pierwszej osoby (POV) na buty", "Selfie z szerokim uśmiechem", "Detale medalu", "Szeroki kadr krajobrazu".
+
+### FORMATOWANIE OPISU (JSON 'caption'):
+To NIE MOŻE być ściana tekstu. Formatuj tekst tak, by był czytelny (scannable).
+- NAGŁÓWEK: Pierwsza linia WIELKIMI LITERAMI jako tytuł.
+- ODSTĘPY: Używaj podwójnych enterów między akapitami.
+- LISTY: Używaj emoji jako punktorów (np. 👉, ✅, 🔥) zamiast myślników.
+- PODKREŚLENIA: Używaj WIELKICH LITER do najważniejszych słów (Instagram nie obsługuje **bold**).
+- STRUKTURA OPISU:
+  [MOCNY NAGŁÓWEK]
+  
+  [Krótki wstęp łapiący kontekst]
+  
+  👇 KLUCZOWE MOMENTY / WNIOSKI:
+  👉 Punkt 1
+  👉 Punkt 2
+  👉 Punkt 3
+  
+  [Podsumowanie / Emocje]
+  
+  [Call To Action - Pytanie do odbiorców]
+  
+  [Hashtagi - 3 bloki po 5 hashtagów]
+  `,
+
+  youtube: `
+### KROK 3: PLATFORMA - YOUTUBE SHORTS / TIKTOK / REELS
+- ZASADA GŁÓWNA: Retencja. Widz musi obejrzeć do końca.
+- FORMAT: Scenariusz wideo wertykalnego (9:16).
+
+### STRUKTURA SCENARIUSZA (JSON 'slides' jako SCENY):
+- TEMPO: Bardzo szybkie. Zmiana kadru co 2-4 sekundy.
+- SCENA 1 (0-3s): VISUAL HOOK. Coś dziwnego/szokującego/pięknego na start.
+- TREŚĆ: Buduj napięcie. Nie zdradzaj puenty od razu.
+- AUDIO: Sugeruj efekty dźwiękowe w polu 'notes' (np. [Dźwięk przyspieszonego oddechu], [Bass drop]).
+
+### INSTRUKCJA GRAFICZNA ('image_prompt'):
+- JĘZYK: Polski.
+- CEL: Opisz reżysersko, co ma być widać w kadrze.
+- PRZYKŁAD: "Szybki montaż ujęć z trasy", "Zbliżenie na twarz mówiącą do kamery", "Widok z drona (lub symulacja)".
+
+### FORMATOWANIE OPISU (JSON 'caption'):
+- SEO: Opis musi zawierać słowa kluczowe dla danej niszy.
+- STRUKTURA:
+  [Chwytliwy Tytuł Filmu]
+  
+  [2-3 zdania opisu sytuacji dla algorytmu SEO]
+  
+  [Hashtagi wertykalne np. #shorts #fyp]
+  `,
+
+  strava: `
+### KROK 3: PLATFORMA - STRAVA (2026 TRENDS: DIRTY REALISM & MICRO-BLOGGING)
+- ZASADA GŁÓWNA: Autentyczność i Dane > Perfekcja. To platforma "anty-scrollowania", gdzie liczy się "Brudny Realizm".
+- FORMAT: "Micro-blog" z galerią zdjęć (Vertical 4:5).
+
+### FORMATOWANIE OPISU (JSON 'caption'):
+- TYTUŁ (HOOK): Zamiast "Poranny bieg", daj konkret lub pytanie. Np. "Test nowych butów – czy oddają energię?" lub "Bomba na 30km".
+- TREŚĆ (MICRO-BLOG):
+  1. ANALIZA NERDA: Opisz cierpienie lub sukces przez cyferki (tętno, waty, tempo). Np. "Czułem się ciężko, tętno +10 ud/min, chyba wchodzi choroba".
+  2. LOKALNE WSKAZÓWKI: Buduj ekspertyzę. Np. "Rozkopali drogę na 5km", "Idealny asfalt pod interwały".
+  3. WERDYKT: Krótkie podsumowanie. Czy było warto?
+- HASHTAGI: Minimalistyczne, tylko kluczowe dla sportu (np. #marathontraining #garmin).
+
+### GALERIA ZDJĘĆ (JSON 'slides' - Sugestie dla użytkownika):
+Strava to nie Instagram. Zdjęcia mają być pionowe (4:5) i dokumentować wysiłek, a nie wyglądać jak z reklamy.
+Generuj sugestie w polu 'image_prompt' w języku polskim:
+
+1. ZDJĘCIE 1 (SOCIAL PROOF): Najlepsze ujęcie krajobrazu LUB Twoja twarz (zmęczona/szczęśliwa). Żadnych stockowych uśmiechów.
+2. ZDJĘCIE 2 (HARD DATA): Zbliżenie na zegarek (Garmin/Apple), licznik rowerowy lub screen wykresu ze strefami tętna/mocy. "Dirty Realism" - pot, brud, cyfry.
+3. ZDJĘCIE 3 (THE REWARD): "Nagroda" po treningu - kawa, ciastko, piwo, nogi w górze na kanapie.
+4. ZDJĘCIE 4 (OPCJONALNIE): Detal sprzętu (błoto na butach, kokpit roweru, nowa część).
+
+W polu 'overlay_text' dla Stravy wpisuj tylko krótkie hasła typu: "DANE", "TWARZ", "NAGRODA", "SPRZĘT" - jako etykiety dla użytkownika.
+  `
+};
+
+const TONE_PROMPTS = {
+  funny: `
+### KROK 4A: TON - LUZAK / ŚMIESZEK (Funny & Casual)
+- STYL: Autoironia, żarty sytuacyjne, slang, memiczny język.
+- ZASADA: "Nie bierz życia zbyt serio". Jeśli była porażka - wyśmiej ją.
+- PRZYKŁAD: Zamiast "Było ciężko", napisz "Moje nogi właśnie złożyły pozew o rozwód z resztą ciała 💀".
+  `,
+  serious: `
+### KROK 4A: TON - EKSPERT / PROFESJONALISTA (Serious & Direct)
+- STYL: Konkretny, merytoryczny, analityczny, pewny siebie.
+- ZASADA: "Fakty ponad uczucia". Dostarczaj wiedzę i konkrety. Unikaj "lania wody".
+- PRZYKŁAD: Zamiast "Fajnie biegałem", napisz "Średnie tempo 4:30/km utrzymane przez 21km mimo narastającego zmęczenia".
+  `,
+  inspirational: `
+### KROK 4A: TON - MENTOR / MOTYWATOR (Inspirational)
+- STYL: Podniosły, emocjonalny, głęboki, storytellingowy.
+- ZASADA: "Każda historia ma morał". Szukaj głębszego sensu i uniwersalnej prawdy.
+- PRZYKŁAD: Zamiast "Wygrałem", napisz "To nie jest medal za bieg. To medal za te wszystkie poranki, gdy chciałem się poddać, a jednak wstałem".
+  `
+};
+
+const GOAL_PROMPTS = {
+  engagement: `
+### KROK 4B: CEL - BUDOWANIE SPOŁECZNOŚCI (Engagement)
+- STRATEGIA: Zadawaj pytania, bądź kontrowersyjny lub bardzo "relatable" (buduj tożsamość).
+- CTA (Call to Action): Zachęcaj do dyskusji w komentarzach. Pytaj o doświadczenia odbiorców.
+- HOOK: Musi zatrzymać scrollowanie poprzez szok lub identyfikację ("Też tak masz?").
+  `,
+  viral: `
+### KROK 4B: CEL - ZASIĘG (Viral Reach)
+- STRATEGIA: Krótko, dynamicznie, szokująco. Emocje muszą być skrajne (śmiech lub płacz).
+- CTA: Zachęcaj do udostępniania (Share) i zapisywania (Save).
+- HOOK: Bardzo wizualny, obiecujący natychmiastową nagrodę (dopaminę) lub rozwiązanie problemu w 5 sekund.
+  `,
+  sales: `
+### KROK 4B: CEL - AKCJA / SPRZEDAŻ (Conversion)
+- STRATEGIA: Model AIDA (Attention, Interest, Desire, Action). Buduj autorytet -> Pokaż problem -> Daj rozwiązanie.
+- CTA: Jasna instrukcja (Kliknij link w BIO, Kup teraz, Zapisz się).
+- HOOK: Obietnica korzyści lub rozwiązania palącego problemu.
+  `
+};
+
+// === MAIN GENERATOR FUNCTION ===
+
+export const getSystemPrompt = (data: WizardState): string => {
+  
+  // 1. KROK 1: KONTEKST
+  let contextPrompt = data.context 
+    ? CONTEXT_PROMPTS[data.context]
+    : CONTEXT_PROMPTS.relacja;
+
+  // 1b. KROK 1b: STYL OPOWIEŚCI
+  if (data.context === 'opowiesc' && data.storyStyle) {
+    const stylePrompt = STORY_STYLE_PROMPTS[data.storyStyle];
+    contextPrompt += `\n\n${stylePrompt}`;
+  }
+
+  // 2. KROK 2: TYP WYDARZENIA
+  const eventPrompt = data.eventType 
+    ? EVENT_PROMPTS[data.eventType] 
+    : EVENT_PROMPTS.other;
+
+  // 3. KROK 3: PLATFORMA
+  const platformPrompt = data.platform 
+    ? PLATFORM_PROMPTS[data.platform] 
+    : PLATFORM_PROMPTS.instagram;
+
+  // 4a. KROK 4a: TON
+  const tonePrompt = data.tone 
+    ? TONE_PROMPTS[data.tone] 
+    : TONE_PROMPTS.funny;
+
+  // 4b. KROK 4b: CEL
+  const goalPrompt = data.goal 
+    ? GOAL_PROMPTS[data.goal] 
+    : GOAL_PROMPTS.engagement;
+
+  // SKLEJANIE MASTER PROMPTU
+  return `
+Jesteś światowej klasy ekspertem od Content Marketingu i Social Media.
+Twoim zadaniem jest stworzenie treści idealnie dopasowanej do poniższej konfiguracji "puzzli".
+
+=== KONFIGURACJA MASTER PROMPT (PUZZLE) ===
+
+${contextPrompt}
+
+${eventPrompt}
+
+${platformPrompt}
+
+${tonePrompt}
+
+${goalPrompt}
+
+=== INSTRUKCJA KOŃCOWA ===
+Twoim zadaniem jest synteza powyższych elementów w jedną spójną całość.
+1. Przyjmij perspektywę czasową z kroku 1 (KONTEKST).
+2. Jeśli zdefiniowano STYL (Noir/Fantasy), bezwzględnie narzuć ten klimat na całą narrację.
+3. Użyj słownictwa i atmosfery z kroku 2 (TYP).
+4. Sformatuj wynik technicznie zgodnie z wymogami kroku 3 (PLATFORMA).
+5. Nadaj wypowiedzi charakter i styl z kroku 4a (TON).
+6. Zrealizuj cel biznesowy/społeczny z kroku 4b (CEL).
+
+Nie dodawaj meta-komentarzy. Zwróć czysty JSON zgodny ze schematem zdefiniowanym w sekcji PLATFORMA.
+  `;
+};

_EDITABLE_CONFIG/author.ts

@@ -0,0 +1,10 @@
+
+export const AUTHOR_CONFIG = {
+  name: "Arkadiusz AreBynd[] Bykowski",
+  description: "Zamieniam Twoją stronę w maszynkę do zarabiania pieniędzy. Od 12 lat projektuję strony, które sprzedają bez Twojego udziału – póki Ty śpisz, one robią za Ciebie robotę. Specjalizuję się w landing page'ach, które budują zaufanie i zmieniają odwiedzających w płacących klientów.",
+  tags: ["Product Design", "AI Automation", "No-Code"],
+  websiteUrl: "https://bykowski.pro/",
+  websiteLabel: "Odwiedź stronę",
+  // Nazwa pliku w folderze public
+  avatarImage: "avatar.jpeg" 
+};

_EDITABLE_CONFIG/ui_text.ts

@@ -0,0 +1,143 @@
+
+export const UI_TEXT = {
+  header: {
+    appTitle: "PromptStory",
+    resetBtn: "Resetuj",
+    logoutBtn: "Wyloguj"
+  },
+  steps: {
+    labels: ['Kontekst', 'Typ', 'Platforma', 'Vibe & Cel', 'Szczegóły'],
+    nav: {
+      back: "Wróć",
+      next: "Dalej"
+    }
+  },
+  stepContext: {
+    title: "Wybierz Kontekst",
+    subtitle: "Jaki rodzaj historii chcesz opowiedzieć?",
+    relacja: {
+      title: "Relacja (Vlog)",
+      desc: "Tu i teraz, emocje, akcja."
+    },
+    opowiesc: {
+      title: "Opowieść",
+      desc: "Wspomnienia, refleksja, morał."
+    },
+    styles: {
+      title: "Wybierz Styl Opowieści",
+      subtitle: "Nadaj historii unikalny klimat.",
+      noir: {
+        title: "Kryminał NOIR",
+        desc: "Mrok, deszcz, cyniczny detektyw."
+      },
+      fantasy: {
+        title: "Przygoda Fantasy",
+        desc: "Epicka podróż, magia, artefakty."
+      }
+    }
+  },
+  stepType: {
+    title: "Rodzaj Wydarzenia",
+    subtitle: "Czego dotyczy Twoja relacja?",
+    types: {
+      sport: "Wydarzenie Sportowe",
+      culture: "Wydarzenie Kulturalne",
+      trip: "Wycieczka / Podróż",
+      party: "Impreza",
+      work: "Praca / Konferencja",
+      other: "Inne"
+    }
+  },
+  stepPlatform: {
+    title: "Wybierz Platformę",
+    subtitle: "Gdzie opublikujesz materiał?",
+    instagram: {
+      title: "Instagram",
+      desc: "Carousel / Post"
+    },
+    youtube: {
+      title: "YouTube",
+      desc: "Shorts / Video"
+    },
+    strava: {
+      title: "Strava",
+      desc: "Activity / Photos"
+    }
+  },
+  stepToneGoal: {
+    toneTitle: "Wybierz Ton (Vibe)",
+    toneSubtitle: "Jak chcesz brzmieć?",
+    goalTitle: "Wybierz Cel",
+    goalSubtitle: "Co chcesz osiągnąć tym postem?",
+    nextBtn: "Przejdź do szczegółów",
+    tones: {
+      funny: { label: "Luzak", desc: "Humor, dystans, memy" },
+      serious: { label: "Ekspert", desc: "Konkrety, wiedza, liczby" },
+      inspirational: { label: "Mentor", desc: "Emocje, głębia, lekcja" }
+    },
+    goals: {
+      engagement: { label: "Społeczność", desc: "Komentarze i dyskusja" },
+      viral: { label: "Zasięg", desc: "Udostępnienia (Share)" },
+      sales: { label: "Sprzedaż", desc: "Kliknięcie w link / Zakup" }
+    }
+  },
+  stepDetails: {
+    title: "Szczegóły",
+    subtitleTrip: "Zaplanuj trasę i opisz przebieg podróży.",
+    subtitleEvent: "Uzupełnij informacje o wydarzeniu.",
+    tripSection: {
+      title: "Plan Podróży",
+      apiKeyMissing: "Brak klucza w konfiguracji (VITE_GOOGLE_MAPS_KEY)",
+      apiKeyMissingDesc: "Wklej klucz ręcznie poniżej, aby mapy zadziałały.",
+      apiKeyPlaceholder: "Wklej klucz Google Maps API (AIza...)",
+      modeDriving: "Samochód / Droga",
+      modeWalking: "Pieszo / Szlak",
+      modeRequired: "* Wybór rodzaju trasy jest wymagany",
+      startPoint: "Punkt Startowy (np. Kraków)",
+      startDesc: "Opis startu (np. Zbiórka o 6:00)",
+      endPoint: "Punkt Końcowy (np. Zakopane)",
+      endDesc: "Opis końca (np. Nareszcie piwo)",
+      stopPlaceholder: "Przystanek",
+      stopDescPlaceholder: "Co tam robiliście?",
+      addStop: "Dodaj przystanek"
+    },
+    fields: {
+      title: "Tytuł wydarzenia",
+      titlePlaceholder: "np. Roadtrip po Bałkanach",
+      desc: "Krótki opis / Notatki",
+      descPlaceholder: "Ogólny klimat, emocje, dodatkowe szczegóły...",
+      files: "Materiały pomocnicze (Max 3)",
+      filesDrop: "Kliknij, aby dodać pliki",
+      filesSub: "GPX, PDF, JPG, PNG",
+      gpxPreviewBtn: "👁️ Podgląd danych dla AI"
+    },
+    generateBtn: {
+      loading: "Generowanie Historii...",
+      idle: "Generuj Relację"
+    }
+  },
+  stepResult: {
+    title: "Twój Vibe Gotowy! 🎉",
+    subtitle: "Oto kompletna struktura Twojego posta. Skopiuj i publikuj.",
+    editBtn: "Edytuj / Popraw",
+    captionTitle: "Post Caption (Opis)",
+    slidesTitle: "Struktura Wizualna (Slajdy / Zdjęcia)",
+    copy: "Kopiuj",
+    copied: "Skopiowano!",
+    editPanel: {
+      title: "Wprowadź poprawki",
+      regenerating: "Nanoszę poprawki...",
+      slidesLabel: "Liczba slajdów / Elementów",
+      feedbackLabel: "Co chcesz zmienić w treści?",
+      feedbackPlaceholder: "np. Zmień 'ból szczęki' na 'ból głowy'. Dodaj więcej emoji...",
+      applyBtn: "Zastosuj poprawki"
+    }
+  },
+  login: {
+    title: "Dostęp Chroniony",
+    desc: "Wprowadź hasło, aby uzyskać dostęp.",
+    btn: "Odblokuj",
+    error: "Nieprawidłowe hasło",
+    configError: "Błąd Konfiguracji"
+  }
+};