Edit HTML Template

Preview Back to List

Template Information

Template Name *

Description

Active

Select Form *

Available Tags

System Tags:

{{form:name}}

{{form:description}}

{{calculation:date}}

{{calculation:session_id}}

{{current:date}}

{{current:datetime}}

Field Tags:

Loading field tags...

Tag Format Help

{{field_name:label}} - Display field label
{{field_name:value}} - Display field value
{{form:name}} - Display form name
{{calculation:date}} - Display calculation date
{{current:date}} - Display current date

Template Content

HTML Content *

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Oferta Serwisowa - Akonda sp. z o.o.</title>
  <style>
    /* --- Style dla całej strony --- */
    body {
      background-color: #f4f4f4;
      color: #333;
      line-height: 1.6;
      margin: 0;
      padding: 0;
    }

/* --- Nagłówek --- */
    .header {
      text-align: center;
      margin-bottom: 40px;
      border-bottom: 2px solid #eee;
      padding-bottom: 20px;
    }

.header h1 {
      margin: 0;
      font-size: 28px;
      color: #2c3e50;
    }

.header h2 {
      margin: 5px 0 0;
      font-size: 22px;
      font-weight: 300;
      color: #34495e;
    }

/* --- Tabela z danymi oferty --- */
    .offer-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 30px;
    }

.offer-table th, .offer-table td {
      padding: 12px 15px;
      border: 1px solid #ddd;
      text-align: left;
    }

.offer-table th {
      background-color: #f8f8f8;
      font-weight: bold;
    }

.offer-table td.label {
      width: 70%;
    }

.offer-table td.value {
      text-align: right;
      font-weight: bold;
      font-size: 16px;
    }

/* --- Sekcja z informacją o rozliczeniu godzinowym --- */
    .settlement-info {
      padding: 15px;
      margin-bottom: 30px;
      background-color: #eaf2f8;
      border-left: 4px solid #3498db;
      font-style: italic;
    }

/* --- Sekcja z dodatkowymi warunkami --- */
    .additional-info {
      font-size: 12px;
      color: #555;
      margin-top: 40px;
    }

.additional-info h3 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
      font-size: 16px;
      color: #333;
    }

.additional-info p {
      margin-bottom: 10px;
    }

/* --- Style dla druku --- */
    @media print {
      body {
        background-color: #fff;
      }
      .page-container {
        width: auto;
        min-height: auto;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
      }
      .no-print {
        display: none;
      }
    }
  </style>
</head>
<body>

<div class="page-container">

<header class="header">
    <h1>Akonda sp. z o.o.</h1>
    <h2>Oferta serwisowa</h2>
  </header>

<main>
    <table class="offer-table">
      <tbody>
      <tr>
        <td class="label">{{Size:label}}</td>
        <td class="value">{{Size:value}}</td>
      </tr>
      <tr>
        <td class="label">{{Paper:label}}</td>
        <td class="value">{{Paper:value}}</td>
      </tr>
      <tr>
        <td class="label">{{Printing:label}}</td>
        <td class="value">{{Printing:value}}</td>
      </tr>
      <tr>
        <td class="label">{{Finishing:label}}</td>
        <td class="value">{{Finishing:value}}</td>
      </tr>
      <tr>
        <td class="label">{{Rounded corners:label}}</td>
        <td class="value">{{Rounded corners:value}}</td>
      </tr>
      <tr>
        <td class="label">{{100 sztuk:label}}</td>
        <td class="value">{{100 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{200 sztuk:label}}</td>
        <td class="value">{{200 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{300 sztuk:label}}</td>
        <td class="value">{{300 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{400 sztuk:label}}</td>
        <td class="value">{{400 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{500 sztuk:label}}</td>
        <td class="value">{{500 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{600 sztuk:label}}</td>
        <td class="value">{{600 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{700 sztuk:label}}</td>
        <td class="value">{{700 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{800 sztuk:label}}</td>
        <td class="value">{{800 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{900 sztuk:label}}</td>
        <td class="value">{{900 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{1000 sztuk:label}}</td>
        <td class="value">{{1000 sztuk:value}}</td>
      </tr>
      <tr>
        <td class="label">{{2000 sztuk:label}}</td>
        <td class="value">{{2000 sztuk:value}}</td>
      </tr>
      </tbody>
    </table>

<div class="settlement-info">
      <p>Rozliczenie nastąpi na podstawie faktycznie zrealizowanych ilości godzin po stawce <strong>[stawka] zł netto</strong> za każdą rozpoczętą kolejną godzinę.</p>
    </div>

<div class="additional-info">
      <h3>Informacje dodatkowe i warunki usługi</h3>
      <p>Podano kwoty netto. Ceny części wymagających wymiany bądź naprawy zostaną przedstawione do akceptacji klienta po wykonaniu diagnostyki urządzenia.</p>
      <p>Zamawiają Państwo usługę technika z doświadczeniem w naprawie i instalacjach urządzeń. Będziemy podejmować wszelkie próby mające na celu naprawę Państwa sprzętu, ale nie możemy zagwarantować 100% powodzenia w rozwiązaniu problemu do którego zostaliśmy wezwani. Zamówiona usługa serwisowa będzie traktowana jako zrealizowana bez względu na jej końcowy rezultat.</p>
      <p>Jeśli Państwa zlecenie wymaga PILNEJ reakcji to w niektórych przypadkach możemy zaproponować usługę w trybie ekspresowym. W związku z tym, że wymaga to od nas przeorganizowania wcześniej ustalonego harmonogramu serwisu, usługi takie realizowane są za dodatkową opłatą w wysokości 50% kosztów robocizny. W przypadku zainteresowania takim rozwiązaniem proszę o stosowną informację. W razie dodatkowych pytań zapraszam do kontaktu.</p>
    </div>
  </main>

</div>

</body>
</html>