Jak postawić sobie panel sterowania biznesem z Claude

Zbuduj mi osobisty dashboard jako jeden plik dashboard.html w tym folderze. Ma działać po otwarciu w przeglądarce prosto z dysku, bez internetu i bez zewnętrznych bibliotek. Cały kod, style, fonty i dane trzymaj w środku pliku.

Zanim zaczniesz, zadaj mi jedno pytanie: jak ma wyglądać mój asystent (jakie zwierzę albo przedmiot, jakie kolory, jakie cechy charakterystyczne). Poczekaj na odpowiedź i dopiero wtedy pisz kod.

DANE

Wszystko, co się zmienia, umieść w jednym bloku JSON na początku pliku, oznaczonym komentarzem „DANE DO PODMIANY". Reszta pliku ma tylko czytać ten blok i rysować z niego stronę. Wypełnij go przykładowymi danymi. Nie zostawiaj w nim pól, których strona nie używa.

UKŁAD

Bez nagłówka powitalnego. Na górze, po prawej, drobne „zaktualizowano [godzina]". Pod tym trzy równe kolumny obok siebie, w tej kolejności: Plan dnia (Kalendarz Google), Skrzynka (Gmail), Zadania (Asana). Każdy blok ma przy tytule kolorową kropkę swojego źródła: kalendarz błękitną, Gmail różową, Asana oliwkową. Bez stopki.

PLAN DNIA

Różowa pigułka z dzisiejszą datą po polsku, liczona z zegara komputera. Pod nią oś czasu dnia: po lewej godziny co 30 minut drobnym szarym tekstem, po prawej karty spotkań (okrągła pastelowa ikonka, nazwa, miejsce, zakres godzin). Spotkania, które minęły, wyszarzone. Najbliższe wyróżnione ciemniejszym tłem. Przez oś biegnie przerywana linia z aktualną godziną w różowej pigułce, odświeżana co minutę. Karty nie mogą na siebie nachodzić, gdy tekst się zawinie. Jeśli nie ma spotkań, jedno zdanie „dziś bez spotkań".

SKRZYNKA

Nagłówek „Skrzynka", podpis „z Gmaila, ostatnie 24 godziny". Pod nim jedno zdanie w musztardowym pasku, np. „12 maili od wczoraj, 3 czekają na odpowiedź". Niżej lista „co zrobić": każdy wiersz to polecenie, np. „odpisz Ani w sprawie terminu nagrania", pod nim drobno nadawca i temat. Na końcu zwinięta linijka „N maili tylko do wiadomości", po kliknięciu rozwija jednozdaniowe streszczenia.

ZADANIA

Nagłówek „Zadania", podpis „z Asany", liczba otwartych w czarnej pigułce po prawej. Lista w białych wierszach: kropka w kolorze projektu, nazwa, pod nią projekt i termin. Przeterminowane na górze, z terminem w różowej pigułce. Zamknięte dziś na dole, przekreślone i wyszarzone.

STYL

Tło #F5F1E8, bloki #FBF9F4, wiersze białe, tekst #1A1A1A, drugorzędny #7A7770. Akcenty tylko cztery: różowy #F3C4DD, musztardowy #E8D36A, oliwkowy #A9B27C, błękitny #B9CEEA. Czerń #1A1A1A na pigułki. Zaokrąglenia: bloki 28 px, wiersze 16 px, pigułki pełne. Bez ramek i cieni. Dużo powietrza. Ma dobrze wyglądać przy szerokości 1000–1400 px.

FONTY

Nagłówki, pigułki, godziny na osi i przyciski w Space Mono. Wszyj font w plik jako base64, zawężony do polskich znaków, żeby działał offline. Treść wierszy w systemowej bezszeryfowej: "Helvetica Neue", Inter, "Segoe UI", Arial.

KOT

W prawym dolnym rogu, na stałe przy przewijaniu, około 80 px, narysowany w SVG płaskimi kształtami w tej samej palecie, według opisu, który Ci podam. Pod nim mały czarny przycisk w pigułce „wypuść mnie", który otwiera ten sam plik w małym oknie (300×360, przez window.open z parametrem ?kot). W tym oknie widać tylko kota z dymkiem, na kremowym tle, i okno przeładowuje się samo co 5 minut.

Nad kotem dymek: biała chmurka z ogonkiem wskazującym kota, w trzech poziomach. Etykieta (Space Mono, wersaliki, rozstrzelona, w kolorze źródła, np. „ZA 40 MIN", „KALENDARZ", „ZADANIA", „SKRZYNKA"), tytuł (nazwa spotkania albo liczba spraw, ciemny, pogrubiony) i meta (godziny, miejsce, „2 po terminie", drobne, szare).

Stany kota, liczone z danych i z zegara, sprawdzane co minutę:
- śpi: nic nie czeka i do spotkania ponad godzina
- czuwa: są sprawy do zrobienia
- przypomina: do spotkania od 60 do 16 minut
- macha: do spotkania 15 minut lub mniej

Animacje mają chodzić w krótkich seriach raz na kilka sekund, a między seriami kot stoi bez ruchu. Nic nie może się ruszać w kółko bez przerwy.

Tryby kota. Kliknięcie w kota przełącza to, co jest w dymku: auto → kalendarz → zadania → maile → auto. Rysunek kota zawsze pokazuje stan z automatu, przełącznik zmienia tylko treść dymka. Wybrany tryb ma przeżyć przeładowanie okienka.

DO SPRAWDZANIA

Dorzuć parametr ?stan= do wymuszenia każdego stanu w podglądzie (?stan=spi, ?stan=czuwa, ?stan=przypomina, ?stan=macha). Zadbaj o odmianę liczebników po polsku („1 zadanie, 3 zadania, 5 zadań") i o teksty dla pustych stanów. Nie wrzucaj długich linków do dymka.

Na koniec napisz, jak otworzyć plik, wypuścić kota i sprawdzić każdy stan.

Zaktualizuj mój dashboard. Pracujesz na pliku dashboard.html w tym folderze.

PLAN DNIA (Kalendarz Google)

Pobierz wszystkie dzisiejsze wydarzenia: nazwę, godzinę rozpoczęcia i zakończenia, miejsce albo link do rozmowy. Kolejność w prompcie odpowiada kolumnom w pliku: Plan dnia, Skrzynka, Zadania. Wpisuj dane w tej strukturze, którą już ma blok „DANE DO PODMIANY", nie wymyślaj nowych pól.

SKRZYNKA (Gmail)

Przejrzyj maile z ostatnich 24 godzin. Pomiń newslettery, powiadomienia automatyczne i reklamy, w ogóle ich nie licz.

Resztę podziel na dwie grupy:
- Do zrobienia: maile od ludzi, którzy czegoś ode mnie chcą (odpowiedzi, decyzji, pliku, terminu). Każdy zamień na jedno zadanie napisane jak polecenie dla mnie, np. „odpisz Ani w sprawie terminu nagrania" albo „wyślij Markowi fakturę za sierpień". Zapisz przy nim nadawcę i temat.
- Do wiadomości: maile, które są tylko informacją. Każdy streść w jednym zdaniu.

Napisz jedno zdanie o skrzynce do musztardowego paska, np. „12 maili od wczoraj, 3 czekają na odpowiedź". Jeśli to przegląd południowy, napisz, co przyszło od rana. Jeśli w mailu jest termin albo spotkanie, którego nie ma w kalendarzu, dopisz to w treści zadania, nie dodawaj niczego do kalendarza.

ZADANIA (Asana)

Pobierz moje zadania z terminem na dziś i wszystkie przeterminowane. Dla każdego zapisz nazwę, projekt, termin i czy jest zamknięte. Zamknięte dziś zostaw na liście z oznaczeniem, że zrobione.

ZAPISZ

W dashboard.html podmień wyłącznie blok oznaczony „DANE DO PODMIANY": godzinę aktualizacji, spotkania, zadania, zdanie o skrzynce, listę „do zrobienia" i listę „do wiadomości". Reszty pliku nie ruszaj, asystent liczy swój stan z tych samych danych.

ZASADY

Nie wysyłaj żadnych maili. Nie zmieniaj niczego w Asanie ani w kalendarzu. Nie twórz szkiców. Twoje zadanie to odczytać, uporządkować i zapisać w pliku. Jeśli któreś narzędzie nie odpowie, zostaw jego blok bez zmian, dopisz przy nim „bez aktualizacji" i zaktualizuj resztę.