Spaces:
Sleeping
Sleeping
| <html lang="pl"><head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Generator faktur</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head><body> | |
| <main class="container"> | |
| <div class="brand-banner"> | |
| <img src="small_logotyp do strony.jpg" alt="Logotyp FakturON!" class="brand-logo"> | |
| </div> | |
| <section id="hero-panel" class="panel hero-panel"> | |
| <div class="hero-columns"> | |
| <div class="hero-content"> | |
| <p class="eyebrow">Bezpłatny panel faktur</p> | |
| <h1 class="app-title">Generator faktur</h1> | |
| <p class="app-description"> | |
| Proste narzędzie do wystawiania i analizowania faktur: logujesz się, uzupełniasz dane kontrahenta, | |
| zapisujesz dokument i od razu widzisz efekty w dashboardzie. Zero opłat, zero limitów. | |
| </p> | |
| <p class="hero-lead"> | |
| Cały proces zamyka się w jednym widoku – formularze, podgląd i historia korzystają z tej samej siatki, | |
| dzięki czemu wyglądają identycznie na desktopie i na telefonie. | |
| </p> | |
| <ul class="header-highlights"> | |
| <li> | |
| <strong>Zawsze bezpłatnie</strong> | |
| <span>Generator działa bez limitów dokumentów i bez pakietów abonamentowych.</span> | |
| </li> | |
| <li> | |
| <strong>Szybkie wystawianie</strong> | |
| <span>W jednym formularzu zbierasz dane sprzedawcy, nabywcy i pozycje, a podgląd generuje się automatycznie.</span> | |
| </li> | |
| <li> | |
| <strong>Spójny wygląd</strong> | |
| <span>Każdy etap korzysta z tej samej siatki, więc łatwo pracować na desktopie i na telefonie.</span> | |
| </li> | |
| <li> | |
| <strong>Dashboard i historia</strong> | |
| <span>Po zalogowaniu od razu widać statystyki i listę faktur gotowych do pobrania.</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <section id="auth-section" class="auth-panel"> | |
| <div class="auth-panel-header"> | |
| <p class="eyebrow">Logowanie</p> | |
| <h2 class="auth-headline">Wejdź do generatora</h2> | |
| <p class="auth-copy">Zaloguj się i prowadź całą obsługę faktur w jednym darmowym panelu.</p> | |
| </div> | |
| <div class="auth-login"> | |
| <div class="auth-card login-card"> | |
| <h3>Zaloguj się</h3> | |
| <form id="login-form" class="form"> | |
| <label> | |
| <input type="email" name="email" autocomplete="email" required> | |
| </label> | |
| <label> | |
| Hasło | |
| <input type="password" name="password" autocomplete="current-password" required> | |
| </label> | |
| <button type="submit">Zaloguj</button> | |
| <hr class="form-divider"> | |
| </form> | |
| <p id="login-feedback" class="feedback" aria-live="polite"></p> | |
| <div class="auth-actions"> | |
| <span>Nie masz konta?</span> | |
| <button id="show-register-button" type="button" class="ghost-button">Stwórz konto</button> | |
| </div> | |
| <p id="legacy-login-hint" class="hint hidden"></p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </section> | |
| <section id="register-section" class="panel hidden"> | |
| <div class="auth-card register-card"> | |
| <div class="register-header"> | |
| <h3>Załóż konto</h3> | |
| <button id="back-to-login" type="button" class="link-button">Wróć do logowania</button> | |
| </div> | |
| <form id="register-form" class="form"> | |
| <div class="register-fields"> | |
| <div class="field-grid register-credentials"> | |
| <label> | |
| <input type="email" name="email" autocomplete="email" required> | |
| </label> | |
| <label> | |
| Hasło | |
| <input type="password" name="password" autocomplete="new-password" required> | |
| </label> | |
| <label> | |
| Powtórz hasło | |
| <input type="password" name="confirm_password" autocomplete="new-password" required> | |
| </label> | |
| </div> | |
| <div class="field-grid register-company"> | |
| <label> | |
| Nazwa firmy | |
| <input type="text" name="company_name" required> | |
| </label> | |
| <label> | |
| Imię i nazwisko właściciela | |
| <input type="text" name="owner_name" required> | |
| </label> | |
| <label> | |
| Ulica i numer | |
| <input type="text" name="address_line" required> | |
| </label> | |
| <label> | |
| Kod pocztowy | |
| <input type="text" name="postal_code" required> | |
| </label> | |
| <label> | |
| Miejscowość | |
| <input type="text" name="city" required> | |
| </label> | |
| <label> | |
| NIP | |
| <input type="text" name="tax_id" required> | |
| </label> | |
| <label> | |
| Numer konta bankowego | |
| <input type="text" name="bank_account" required> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="form-actions"> | |
| <button type="submit">Utwórz konto</button> | |
| <button id="cancel-register" type="button" class="link-button">Anuluj</button> | |
| </div> | |
| </form> | |
| <p id="register-feedback" class="feedback"></p> | |
| <p class="hint">Wskazowka: dane firmy zaktualizujesz pozniej w sekcji "Dane sprzedawcy".</p> | |
| </div> | |
| </section> | |
| <section id="app-section" class="panel hidden"> | |
| <header class="app-header"> | |
| <div> | |
| <h2>Panel faktur</h2> | |
| </div> | |
| <div id="login-badge" class="login-badge hidden" aria-live="polite"> | |
| <span class="badge-label">Zalogowany jako</span> | |
| <span id="current-login-label" class="badge-value"></span> | |
| </div> | |
| <nav class="app-nav"> | |
| <button type="button" class="app-nav-button active" data-view="invoice-builder">Nowa faktura</button> | |
| <button type="button" class="app-nav-button" data-view="dashboard">Dashboard</button> | |
| </nav> | |
| <button id="logout-button" type="button" class="link-button">Wyloguj</button> | |
| </header> | |
| <section id="invoice-builder-section" class="app-view"> | |
| <section class="business-section"> | |
| <div class="business-section-header"> | |
| <h3>Dane sprzedawcy</h3> | |
| <div class="business-actions"> | |
| <button id="toggle-business-form" type="button" class="pill-button">Edycja danych</button> | |
| <label for="logo-input" class="pill-button secondary"> | |
| <input id="logo-input" type="file" accept="image/png,image/jpeg" hidden> | |
| Wgraj logo | |
| </label> | |
| <button id="remove-logo-button" type="button" class="pill-button danger hidden">Usuń logo</button> | |
| </div> | |
| </div> | |
| <div id="business-display" class="business-display"></div> | |
| <div id="logo-preview" class="logo-preview hidden"> | |
| <span class="logo-preview-label">Logo sprzedawcy</span> | |
| <img id="logo-preview-image" alt="Logo firmy"> | |
| </div> | |
| <p id="logo-feedback" class="feedback"></p> | |
| <form id="business-form" class="form hidden"> | |
| <div class="field-grid"> | |
| <label> | |
| Nazwa firmy | |
| <input type="text" name="company_name" required> | |
| </label> | |
| <label> | |
| Imię i nazwisko właściciela | |
| <input type="text" name="owner_name" required> | |
| </label> | |
| <label> | |
| Ulica i numer | |
| <input type="text" name="address_line" required> | |
| </label> | |
| <label> | |
| Kod pocztowy | |
| <input type="text" name="postal_code" required> | |
| </label> | |
| <label> | |
| Miejscowość | |
| <input type="text" name="city" required> | |
| </label> | |
| <label> | |
| NIP | |
| <input type="text" name="tax_id" required> | |
| </label> | |
| <label> | |
| Numer konta bankowego | |
| <input type="text" name="bank_account" required> | |
| </label> | |
| </div> | |
| <div class="form-actions"> | |
| <button type="submit">Zapisz</button> | |
| <button id="cancel-business-update" type="button" class="link-button">Anuluj</button> | |
| </div> | |
| <p id="business-feedback" class="feedback"></p> | |
| </form> | |
| </section> | |
| <form id="invoice-form" class="form"> | |
| <fieldset> | |
| <legend>Informacje o fakturze</legend> | |
| <div class="field-grid"> | |
| <label> | |
| Data sprzedaży / wykonania usługi | |
| <input type="date" name="saleDate"> | |
| </label> | |
| <label> | |
| Termin płatności (dni) | |
| <input type="number" name="paymentTerm" min="1" step="1" value="14"> | |
| </label> | |
| </div> | |
| </fieldset> | |
| <fieldset> | |
| <legend>Dane nabywcy</legend> | |
| <div class="client-lookup"> | |
| <label for="client-search"> | |
| Szybkie wyszukiwanie nabywcy | |
| <input type="text" id="client-search" placeholder="Wpisz NIP lub nazwę klienta"> | |
| </label> | |
| <div id="client-suggestions" class="client-suggestions hidden" role="listbox"></div> | |
| </div> | |
| <div class="field-grid"> | |
| <label> | |
| Nazwa / Imię i nazwisko | |
| <input type="text" name="clientName"> | |
| </label> | |
| <label> | |
| NIP | |
| <input type="text" name="clientTaxId"> | |
| </label> | |
| <label> | |
| Ulica i numer | |
| <input type="text" name="clientAddress"> | |
| </label> | |
| <label> | |
| Kod pocztowy | |
| <input type="text" name="clientPostalCode"> | |
| </label> | |
| <label> | |
| Miejscowość | |
| <input type="text" name="clientCity"> | |
| </label> | |
| <label> | |
| Numer telefonu | |
| <input type="tel" name="clientPhone"> | |
| </label> | |
| </div> | |
| </fieldset> | |
| <section class="items-section"> | |
| <header class="items-header"> | |
| <h3>Pozycje faktury</h3> | |
| <button type="button" id="add-item-button">Dodaj pozycję</button> | |
| </header> | |
| <div class="items-table-wrapper"> | |
| <table class="items-table"> | |
| <thead> | |
| <tr> | |
| <th>Nazwa towaru/usługi</th> | |
| <th>Ilość</th> | |
| <th>Jednostka</th> | |
| <th>Cena jedn. brutto (PLN)</th> | |
| <th>Stawka VAT</th> | |
| <th>Wartość brutto (PLN)</th> | |
| <th></th> | |
| </tr> | |
| </thead> | |
| <tbody id="items-body"></tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <div id="totals-container" class="totals"> | |
| <span id="total-net">Suma netto: 0.00 PLN</span> | |
| <span id="total-vat">Kwota VAT: 0.00 PLN</span> | |
| <span id="total-gross">Suma brutto: 0.00 PLN</span> | |
| </div> | |
| <section id="rate-summary" class="rate-summary"></section> | |
| <div id="exemption-note-wrapper" class="hidden"> | |
| <label for="exemption-reason">Powód zastosowania stawki ZW/0%</label> | |
| <select id="exemption-reason" class="form-select"> | |
| <option value="">Wybierz podstawę zwolnienia...</option> | |
| </select> | |
| <label for="exemption-note" id="exemption-note-label">Podstawa prawna zwolnienia</label> | |
| <textarea id="exemption-note" rows="3" placeholder="np. Art. 43 ust. 1 pkt 19 ustawy o VAT"></textarea> | |
| </div> | |
| <div class="form-actions"> | |
| <button type="submit" id="save-invoice-button">Generuj fakturę</button> | |
| <button id="cancel-edit-invoice" type="button" class="link-button hidden">Anuluj edycję</button> | |
| </div> | |
| </form> | |
| <section id="invoice-result" class="panel hidden"> | |
| <h3>Podgląd faktury</h3> | |
| <div id="invoice-output" class="invoice-preview"></div> | |
| <button id="download-button" type="button">Pobierz jako plik PDF</button> | |
| </section> | |
| </section> | |
| <section id="dashboard-section" class="app-view hidden"> | |
| <header class="dashboard-header"> | |
| <div class="filters"> | |
| <label> | |
| Od | |
| <input type="date" id="filter-start-date"> | |
| </label> | |
| <label> | |
| Do | |
| <input type="date" id="filter-end-date"> | |
| </label> | |
| <button type="button" id="clear-filters" class="button secondary">Wyczyść</button> | |
| </div> | |
| <p id="dashboard-feedback" class="feedback"></p> | |
| </header> | |
| <section class="dashboard-summary"> | |
| <div class="summary-card"> | |
| <span class="summary-label">Ostatnie 30 dni</span> | |
| <span id="summary-month-count" class="summary-count">0 faktur</span> | |
| <span id="summary-month-amount" class="summary-amount">0.00 PLN</span> | |
| </div> | |
| <div class="summary-card"> | |
| <span class="summary-label">Bieżący kwartał</span> | |
| <span id="summary-quarter-count" class="summary-count">0 faktur</span> | |
| <span id="summary-quarter-amount" class="summary-amount">0.00 PLN</span> | |
| </div> | |
| <div class="summary-card"> | |
| <span class="summary-label">Bieżący rok</span> | |
| <span id="summary-year-count" class="summary-count">0 faktur</span> | |
| <span id="summary-year-amount" class="summary-amount">0.00 PLN</span> | |
| </div> | |
| </section> | |
| <section class="dashboard-chart"> | |
| <canvas id="invoices-chart" aria-label="Podsumowanie faktur"></canvas> | |
| </section> | |
| <section class="dashboard-table"> | |
| <div class="items-table-wrapper"> | |
| <table class="items-table"> | |
| <thead> | |
| <tr> | |
| <th>Numer</th> | |
| <th>Data wystawienia</th> | |
| <th>Nabywca</th> | |
| <th>Suma brutto</th> | |
| <th>Akcje</th> | |
| </tr> | |
| </thead> | |
| <tbody id="invoices-table-body"></tbody> | |
| </table> | |
| <p id="invoices-empty" class="hint hidden">Brak faktur do wyświetlenia.</p> | |
| </div> | |
| </section> | |
| </section> | |
| </section> | |
| </main> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" defer></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js" defer></script> | |
| <script src="main.js" defer></script> | |
| </body> | |
| </html> | |