inFakt Styleguide



01. Regulamin bez przycisków

<div class="modal width-770">
  <a href="#" class="modal-close x-close-modal">Zamknij</a>
  <h1>Regulamin Programu Bonus</h1>
  <div class="modal-wrapper group">
    <div class="modal-content">
      <article class="statute">
        <h2>Regulamin Programu Bonus</h2>
          <h3>§1 Postanowienia ogólne</h3>
          <ol>
            <li>Regulamin niniejszy określa zasady uczestnictwa w rabatowym Programie Bonus.</li>
            <li>
              Użyte w niniejszym regulaminie pojęcia mają następujące znaczenie:
              <ol class="alphabethic-list">
                <li>
                  <strong>Infakt</strong> &ndash; Infakt Spółka z ograniczoną odpowiedzialnością z siedzibą w Krakowie, z adresem przy ul. Kącik 4, 30-549 Kraków,
                  zarejestrowana w rejestrze przedsiębiorców Krajowego Rejestru Sądowego przez Sąd Rejonowy dla Krakowa-Śródmieścia Wydział
                  XI Krajowego Rejestru Sądowego pod numerem 0000325203, posiadająca NIP 945-212-16-81, organizator Programu;
                </li>
                <li><strong>Klient</strong> &ndash; klient Infakt bądź podmiotu z Infakt powiązanego;</li>
                <li><strong>Nowy Klient</strong> &ndash; osoba, która zawarła z Infakt bądź z podmiotem z Infakt powiązanym umowę o świadczenie Usług;</li>
                <li><strong>Program</strong> &ndash; Program Bonus, czyli akcja marketingowa, której celem jest polecenie Usług osobom trzecim przez dotychczasowych klientów Infakt bądź podmiotów z Infakt powiązanych w zamian za Rabaty przyznawane na warunkach określanych w Regulaminie;</li>
                <li><strong>Polecenie</strong> &ndash; czynność dokonana przez Klienta, w wyniku której Infakt bądź podmioty z Infakt powiązane pozyskują Nowego Klienta;</li>
                <li><strong>Rabat</strong> &ndash; wynosząca 20 % obniżka wskazanej w stosownym cenniku ceny odpłatnej Usługi;</li>
                <li><strong>Serwis</strong> &ndash; prowadzony przez Infakt serwis znajdujący się pod adresem www.infakt.pl;</li>
                <li><strong>Usługi</strong> &ndash; świadczone przez Infakt bądź podmioty z Infakt powiązane za pośrednictwem Serwisu.</li>
              </ol>
            </li>
          </ol>
      </article>
    </div>
  </div>
</div>

02. Regulamin z przyciskami

<div class="modal width-770">
  <a href="#" class="modal-close x-close-modal">Zamknij</a>
  <h1>Regulamin Ogólnopolskiego Biura Rachunkowego</h1>
  <div class="modal-wrapper group">
    <div class="modal-content">
      <article class="statute">
        <h1>
          Regulamin usługi Ogólnopolskie Biuro Rachunkowe
          <br>
          (regulamin świadczenia usług drogą elektroniczną)
        </h1>

        <h2>§ 1 Przedmiot regulaminu</h2>
        <p>
          Niniejszy regulamin określa warunki korzystania przez Przedsiębiorców z aplikacji internetowej, o której mowa w Umowie o obsługę księgową w ramach Ogólnopolskiego Biura Rachunkowego, do której dostęp zapewnia serwis, znajdujący się pod adresem www.infakt.pl.
        </p>

        <h2>§ 2 Słowniczek</h2>
        <p>Użyte w niniejszym dokumencie terminy oznaczają:</p>
        <ol>
          <li> <strong>Aplikacja</strong>
            &ndash; aplikacja internetowa, do której dostęp zabezpieczony jest Loginem oraz Hasłem, a która umożliwia Przedsiębiorcy tworzenie Dokumentów oraz monitorowanie realizacji Umowy przez Spółkę.
          </li>
          <li> <strong>Dokument</strong>
            &ndash; umożliwiający obliczenie przychodu bądź kosztu stworzony bądź w ramach korzystania z Aplikacji przez Przedsiębiorcę, tj. edytowalny i możliwy do wydrukowania wpis dokonywany w formie elektronicznej, w tym wypełniona przez niego faktura sprzedaży (VAT, proforma, zaliczkowa, marża, korygująca) lub dowód wewnętrzny, bądź dostarczony przez Przedsiębiorcę Spółce w sposób określony w Umowie inny dokument.
          </li>
          <li>
            <strong>Hasło</strong>
            &ndash; stworzony przez Przedsiębiorcę ciąg minimum 5 (pięciu) znaków, używany do zabezpieczenia dostępu do Aplikacji;
          </li>
          <li>
            <strong>Login</strong>
            &ndash; stworzone dla potrzeb korzystania z Aplikacji przez Przedsiębiorcę jego oznaczenie, składające się z minimum 5 (pięciu) znaków lub adres e­mail Przedsiębiorcy;
          </li>
        </ol>
      </article>
    </div>

    <div class="btn--group group">
      <div class="left">
        <a class="btn blue" href="#">Zapisz PDF</a>
      </div>
      <div class="right">
        <a class="x-close-modal" href="#">Zamknij</a>
        <button type="submit" class="btn green btn--ok">Akceptuję</button>
      </div>
    </div>
  </div>
</div>

03. Popup z przyciskami

<div class="modal width-450">
  <a href="#" class="modal-close x-close-modal">Zamknij</a>
  <h1>Przerwanie procesu zamawiania usługi</h1>
  <div class="modal-wrapper group">
    <div class="modal-content">
      Czy na pewno chcesz przerwać proces zamówienia pakietu Program do Księgowości? Pozostając przy obecnym planie nie będziesz mógł prowadzić rozliczeń kosztów działalności.
    </div>
    <div class="btn--group group">
      <div class="right">
        <a href="#" class="x-close-modal">Anuluj</a>
        <button type="submit" class="btn green btn--ok x-close-modal">Kontynuuję</button>
      </div>
    </div>
  </div>
</div>

04. Pop-up podsumowanie

<div class="modal width-450">
  <a href="#" class="modal-close x-close-modal">Zamknij</a>
  <h1>Wykorzystane usługi dodatkowe</h1>
  <div class="modal-wrapper group">
    <div class="modal-content">
      <table class="summary-details">
        <tfoot>
          <tr>
            <th>Razem:</th>
            <td class="align-right" colspan="2">80,00 zł</td>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>Usługa księgowa</td>
            <td>x1</td>
            <td class="align-right">50,00 zł</td>
          </tr>
          <tr>
            <td>Usługa podatkowa</td>
            <td>x1</td>
            <td class="align-right">30,00 zł</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

05. Pop-up radiobutton – 1 kolumna

<div class="modal width-450">
  <a href="#" class="modal-close x-close-modal">Zamknij</a>
  <h1>Rodzaj koperty</h1>
  <div class="modal-wrapper">
    <div class="modal-content">
      <div class="modal-field modal-flex">
        <label>Rodzaj koperty</label>
        <ul class="modal-list">
          <li>
            <input type="radio" checked="" name="print" id="a1">
            <label for="a1">koperta C5 <span class="grey">(229 × 324 mm)</span></label>
          </li>
          <li>
            <input type="radio" name="print" id="a2">
            <label for="a2">koperta A4 <span class="grey">(210 x 297 mm)</span></label>
          </li>
          <li>
            <input type="radio" name="print" id="a3">
            <label for="a3">koperta C6 <span class="grey">(114 × 162 mm)</span></label>
          </li>
          <li>
            <input type="radio" name="print" id="a4">
            <label for="a4">koperta DL <span class="grey">(110 × 220 mm)</span></label>
          </li>
        </ul>
      </div>
    </div>
    <div class="btn--group group">
      <div class="right">
        <a href="#">Anuluj</a>
        <button type="submit" class="btn green btn--ok x-close-modal">Drukuj</button>
      </div>
    </div>
  </div>
</div>

06. Pop-up radiobutton – 2 kolumny

<div class="modal width-450">
  <a href="#" class="modal-close x-close-modal">Zamknij</a>
  <h1>Drukuj fakturę</h1>
  <div class="modal-wrapper">
    <div class="modal-content modal-flex">
      <div class="modal-field modal-flex">
        <label>Rodzaj</label>
        <ul class="modal-list">
          <li>
            <input type="radio" checked="" name="print" id="a5">
            <label for="a5">1 egzemplarz</label>
          </li>
          <li>
            <input type="radio" name="print" id="a6">
            <label for="a6">2 egzemplarze</label>
          </li>
          <li>
            <input type="radio" name="print" id="a7">
            <label for="a7">duplikat</label>
          </li>
        </ul>
      </div>
      <div class="modal-field modal-flex">
        <label>Język</label>
        <ul class="modal-list">
          <li>
            <input type="radio" checked="" name="lang" id="a8">
            <label for="a8">polski</label>
          </li>
          <li>
            <input type="radio" name="lang" id="a9">
            <label for="a9">angielski</label>
          </li>
          <li>
            <input type="radio" name="lang" id="a10">
            <label for="a10">polski i angielski</label>
          </li>
        </ul>
      </div>
    </div>
    <div class="btn--group group">
      <div class="right">
        <a href="#">Anuluj</a>
        <button type="submit" class="btn green btn--ok x-close-modal">Drukuj</button>
      </div>
    </div>
  </div>
</div>

07. Pop-up input – inline

<div class="modal width-450">
  <a href="#" class="modal-close x-close-modal">Zamknij</a>
  <h1>Oznacz jako zapłaconą</h1>
  <div class="modal-wrapper group">
    <div class="modal-content">
      <p>Czy na pewno chcesz oznaczyć jako zapłaconą fakturę o numerze <strong>2014/01/5</strong> wystawioną dla <strong>Aligatores Sp. z o.o.</strong> na kwotę <strong>3148,80 PLN</strong>?</p>
      <label for="a11">Zapłacono</label>
      <input type="text" placeholder="3148,80" id="a11">
      <label for="a12">PLN dnia</label>
      <input type="text" id="a12">
    </div>
    <div class="btn--group group">
      <div class="right">
        <a href="#">Anuluj</a>
        <button type="submit" class="btn green btn--ok x-close-modal">Oznacz jako zapłaconą</button>
      </div>
    </div>
  </div>
</div>

08. Pop-up input

<div class="modal width-450">
  <a href="#" class="modal-close x-close-modal">Zamknij</a>
  <h1>Oznacz jako zapłaconą</h1>
  <div class="modal-wrapper group">
    <div class="modal-content">
      <p>Czy na pewno chcesz oznaczyć jako zapłaconą fakturę o numerze <strong>2014/01/5</strong> wystawioną dla <strong>Aligatores Sp. z o.o.</strong> na kwotę <strong>3148,80 PLN</strong>?</p>
      <label for="a13">Zapłacono dnia</label>
      <input type="text" id="a13">
    </div>
    <div class="btn--group group">
      <div class="right">
        <a href="#">Anuluj</a>
        <button type="submit" class="btn green btn--ok x-close-modal">Oznacz jako zapłaconą</button>
      </div>
    </div>
  </div>
</div>

09. Pop-up unknow

<div class="bonus-content">
  <div class="modal width-690">
    <h1>Poleć inFakt i odbierz 20% rabatu</h1>

    <div class="modal-wrapper group">

      <div class="modal-content modal-flex">

        <div class="modal-field">
          <h2>Poleć inFakt swoim znajomym</h2>
          <ul class="modal-list">
            <li>
              <input type="radio" checked="" name="print" id="a14">
              <label for="a14">Poleć wszystkim swoim klientom<span class="grey">Zaproszenia zostaną wysłane do wszystkich klientów, którzy nie otrzymali ich jeszcze od Ciebie</span></label>
            </li>
            <li>
              <input type="radio" name="print" id="a15">
              <label for="a15">Poleć wybranym klientom</label>
            </li>
            <li>
              <input type="radio" name="print" id="a16">
              <label for="a16">Poleć inFakt wysyłając e-mail do znajomych</label>
            </li>
          </ul>
        </div>
        <div class="modal-field">
          <h2>Tekst wysyłany w e-mailu</h2>
          <textarea>Polecam Ci inFakt.pl - wygodne usługi fakturowania i księgowości online połączone z profesjonalną obsługą księgowych. Zarejestruj się a otrzymasz 20% rabatu na najbliższą płatność w inFakt.pl! Możesz założyć konto klikając tutaj: http://www.infakt.pl/polec/id58957452</textarea>
        </div>
      </div>

      <div class="btn--group group">
        <div class="left">
          <input type="checkbox" id="a17">
          <label for="a17">Zapoznałem się i akceptuję <a href="#">Regulamin Programu Bonus</a></label>
        </div>
        <div class="right">
          <a class="x-close-modal link" href="#">Anuluj</a>
          <button type="submit" class="btn green btn--ok">Wyślij</button>
        </div>
      </div>

    </div>
  </div>
</div>

10. Pop-up unknow-2

<div class="bonus-content">
  <div class="modal width-690">
    <h1>Poleć inFakt i odbierz 20% rabatu</h1>

    <div class="modal-wrapper group">
      <div class="modal-content modal-flex">

      <div class="modal-field">
        <h2>Poleć inFakt swoim znajomym</h2>
        <ul class="modal-list">
          <li>
            <input type="radio" name="print" id="a18">
            <label for="a18">Poleć wszystkim swoim klientom</label>
          </li>
          <li>
            <input type="radio" name="print" id="a19">
            <label for="a19">Poleć wybranym klientom</label>
          </li>
          <li>
            <input type="radio" checked="" name="print" id="a20">
            <label for="a20">Poleć inFakt wysyłając e-mail do znajomych<span class="grey">Wprowadź adresy znajomych, oddzielając je
              przecinkami np.: biuro@infakt.pl, info@infakt.pl</span></label>
            <input type="text" id="mail">
          </li>
        </ul>
      </div>

      <div class="modal-field">
        <h2>Tekst wysyłany w e-mailu</h2>
        <textarea>Polecam Ci inFakt.pl - wygodne usługi fakturowania i księgowości online połączone z profesjonalną obsługą księgowych. Zarejestruj się a otrzymasz 20% rabatu na najbliższą płatność w inFakt.pl! Możesz założyć konto klikając tutaj: http://www.infakt.pl/polec/id58957452</textarea>
      </div>

    </div>

      <div class="btn--group group">
        <div class="left">
          <input type="checkbox" id="a21">
          <label for="a21">Zapoznałem się i akceptuję <a href="#">Regulamin Programu Bonus</a></label>
        </div>
       <div class="right">
          <a class="x-close-modal link" href="#">Anuluj</a>
          <button type="submit" class="btn green btn--ok">Wyślij</button>
        </div>
      </div>
    </div>
  </div>
</div>

11. Pop-up unknow-3

<div class="bonus-content">
  <div class="modal width-690">
    <h1>Poleć inFakt i odbierz 20% rabatu</h1>
    <div class="modal-wrapper group">

      <div class="modal-content modal-flex">

        <div class="modal-field">
          <h2>Poleć inFakt swoim znajomym</h2>
          <ul class="modal-list">
            <li>
              <input type="radio" name="a22" id="a22">
              <label for="a22">Poleć wszystkim swoim klientom</label>
            </li>
            <li>
              <input type="radio" checked="" name="a22" id="a23">
              <label for="a23">Poleć wybranym klientom<span class="grey">Zaznacz klientów, którym chcesz polecić inFakt. Na liście znajdują się jedynie klienci, którzy podali adres e-mail i nie otrzymali jeszcze zaproszeń.</span></label>
              <ul class="modal-list-inner">
                <li>
                  <input type="checkbox" id="a24">
                  <label for="a24">Adam Adamowski</label>
                </li>
                <li>
                  <input type="checkbox" id="a25">
                  <label for="a25">Bertram Bonaventura</label>
                </li>
                <li>
                  <input type="checkbox" id="a26">
                  <label for="a26">Cyryl Cypryjski</label>
                </li>
              </ul>
            </li>
            <li>
              <input type="radio" name="a22" id="a27">
              <label for="a27">Poleć inFakt wysyłając e-mail do znajomych</label>
            </li>
          </ul>
        </div>

        <div class="modal-field">
          <h2>Tekst wysyłany w e-mailu</h2>
          <textarea>Polecam Ci inFakt.pl - wygodne usługi fakturowania i księgowości online połączone z profesjonalną obsługą księgowych. Zarejestruj się a otrzymasz 20% rabatu na najbliższą płatność w inFakt.pl! Możesz założyć konto klikając tutaj: http://www.infakt.pl/polec/id58957452</textarea>
        </div>

      </div>

      <div class="btn--group group">
        <div class="left">
          <input type="checkbox" id="a28">
          <label for="a28">Zapoznałem się i akceptuję <a href="#">Regulamin Programu Bonus</a></label>
        </div>
        <div class="right">
          <a class="x-close-modal link" href="#">Zamknij</a>
          <button type="submit" class="btn green btn--ok">Wyślij</button>
        </div>
      </div>

    </div>
  </div>
</div>

`

12. Pop-up input + textarea

<div class="bonus-content">
  <div class="modal width-490">
    <h1>Dziękujemy za polecenie inFakt!</h1>
    <div class="modal-wrapper group">
      <div class="modal-content">

        <h2>Zwiększ swój Rabat! Udostępnij link na Facebooku.</h2>
        <p>Powiadom swoich znajomych o inFakcie na Facebooku - wystarczy, że
        opublikujesz poniższy link:</p>
        <input type="text" value="http://www.infakt.pl/polec/infakt/id58756254" id="link-2">
        <textarea>Kupmy razem, będzie taniej! Kliknij w link i wykup dowolną usługę inFakt.pl a i ja i Ty otrzymasz po 20% rabatu! :)</textarea>

      </div>

      <div class="btn--group group">
        <div class="right">
          <a class="x-close-modal link" href="#">Anuluj</a>
          <button type="submit" class="btn green btn--ok">Udostępnij na Facebooku</button>
        </div>
      </div>

    </div>
  </div>
</div>

13. Pop-up – selectbox

<div class="modal width-450">
  <a class="modal-close x-close-modal" href="#">Zamknij</a>
  <h1>Ostatnio złożona deklaracja</h1>
  <div class="modal-wrapper group">
    <div class="modal-content">
    <p>Wybierz, która wersja deklaracji za <strong>Kwartał III 2014</strong> została złożona do Urzędu Skarbowego jako ostatnia (późniejsze zostaną usunięte):</p>
      <select>
        <option>Wersja 1</option>
        <option>Wersja 2</option>
        <option>Wersja 3</option>
      </select>
    </div>
    <div class="btn--group group">
      <div class="right">
        <a href="#">Anuluj</a>
        <button class="btn green btn--ok x-close-modal" type="submit">Zapisz</button>
      </div>
    </div>
  </div>
</div>

14. Pop-up radio button + input

<div class="modal width-450">
  <h1>Oznacz jako zapłacone składki ZUS</h1>
  <div class="modal-wrapper group">
    <form action="#">
      <div class="modal-content">
        <div class="field inline-field">
          <label for="a29">Zapłacono dnia</label>
          <input type="text" value="2014-05-24" id="a29">
        </div>

        <hr class="hr-modal-16-16">

        <p>Które składki zostasły opłacone i w jakiej wysokości:</p>

        <div class="checkbox-input--mix field-row">
          <div class="field">
            <div class="checkbox">
              <input type="checkbox" checked id="a30">
              <label for="a30">Składki społeczne:</label>
              <input type="text" value="233,20">
            </div>
          </div>

          <div class="field">
            <div class="checkbox">
              <input type="checkbox" checked id="a31">
              <label for="a31">Składka zdrowotna:</label>
              <input type="text" value="323,12">
            </div>
          </div>

          <div class="field">
            <div class="checkbox">
              <input type="checkbox" id="a32">
              <label for="a32">Fundusz pracy:</label>
              <input type="text" value="">
            </div>
          </div>
        </div>

      </div>

      <div class="btn--group group">
        <div class="right">
          <a href="#" class="x-close-modal link">Anuluj</a>
          <button class="btn green btn--ok" type="submit">Oznacz jako zapłacone</button>
        </div>
      </div>
    </form>
  </div>
</div>

15. Popup 2 rzędy

<div class="modal width-450">
  <h1>Oznacz jako zapłacone składki ZUS</h1>
  <div class="modal-wrapper group">
    <form action="#">
      <div class="modal-content">
        <p>Aby pomniejszyć składki ZUS za okres choroby, podaj daty przebywania na zwolnieniu lekarskim (znajdziesz je na druku ZUS ZLA):</p>

        <div class="field-row">
          <div class="field">
            <label for="a33">Pierwszy dzień zwolnienia</label>
            <input type="text" value="2014-05-24" id="a33">
          </div>

          <div class="field">
            <label for="a34">Ostatni dzień zwolnienia</label>
            <input type="text" value="2014-05-24" id="a34">
          </div>
        </div>

      </div>

      <div class="btn--group group">
        <div class="right">
          <a href="#" class="x-close-modal link">Anuluj</a>
          <button class="btn green btn--ok" type="submit">Oznacz jako zapłacone</button>
        </div>
      </div>
    </form>
  </div>
</div>