├── LICENSE
├── README.md
├── company.json
├── img
    ├── logo.png
    ├── signature.png
    └── stamp.jpg
├── index.html
└── invoice.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Anton Zhiyanov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Генератор счетов
 2 | 
 3 | Как использовать:
 4 | 
 5 | 1. Форкнуть или скачать репозиторий
 6 | 2. Прописать реквизиты своей компании в `company.json`
 7 | 3. Скопировать логотип, печать и факсимиле в каталог `img`
 8 | 4. Выставлять счета!
 9 | 
10 | Чтобы выставить счет, достаточно передать реквизиты счета в `invoice.html` через параметры URL. Например, хотим выставить счет с такими реквизитами:
11 | 
12 | -   Номер счета: 1234
13 | -   Покупатель: ООО «Магазинчик»
14 | -   Товар или услуга: Подписка на год
15 | -   Стоимость: 5000 ₽
16 | 
17 | Получится такая строка запроса:
18 | 
19 | ```
20 | invoice.html?number=1234&company=ООО+«Магазинчик»&item=Подписка+на+год&price=5000
21 | ```
22 | 
23 | [Пример счета](https://nalgeon.github.io/invoice/invoice.html?number=1234&company=ООО+«Магазинчик»&item=Подписка+на+год&price=5000)
24 | 
25 | [Конструктор счета](https://nalgeon.github.io/invoice/)
26 | 


--------------------------------------------------------------------------------
/company.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ООО «Моторика»",
 3 |     "inn": "2901298957",
 4 |     "kpp": "290101001",
 5 |     "address": "163002, Архангельская обл, г Архангельск, ул Коммунальная, д 6 стр 5",
 6 |     "phone": "+7 999 223-12-23",
 7 |     "account": "40101810045250010041",
 8 |     "bank": {
 9 |         "name": "АО «АЛЬФА-БАНК»",
10 |         "bik": "044525593",
11 |         "account": "30101810200000000593"
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nalgeon/invoice/1a9bf39a798efd200c6315a298025185ea14c6db/img/logo.png


--------------------------------------------------------------------------------
/img/signature.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nalgeon/invoice/1a9bf39a798efd200c6315a298025185ea14c6db/img/signature.png


--------------------------------------------------------------------------------
/img/stamp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nalgeon/invoice/1a9bf39a798efd200c6315a298025185ea14c6db/img/stamp.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <title>Генератор ссылок на счета</title>
  8 |     <link rel="stylesheet" href="https://unpkg.com/awsm.css/dist/awsm.min.css">
  9 | </head>
 10 | 
 11 | <body>
 12 |     <section>
 13 |         <form onsubmit="generateInvoice(); return false;">
 14 |             <fieldset>
 15 |                 <legend>Конструктор счета</legend>
 16 |                 <label for="number">Номер</label>
 17 |                 <input id="number" type="text" placeholder="1234">
 18 | 
 19 |                 <label for="date">Дата <small>(пустая = сегодня)</small></label>
 20 |                 <input id="date" type="date">
 21 | 
 22 |                 <label for="company">Покупатель</label>
 23 |                 <input id="company" type="text" placeholder="ООО «Магазинчик»">
 24 | 
 25 |                 <label for="item">Товар или услуга</label>
 26 |                 <input id="item" type="text" placeholder="Подписка на год">
 27 | 
 28 |                 <label for="price">Стоимость в ₽</label>
 29 |                 <input id="price" type="number" placeholder="5000">
 30 | 
 31 |                 <input type="submit" value="Сформировать счет">
 32 |             </fieldset>
 33 |             <p><a href="https://github.com/nalgeon/invoice">исходники на GitHub</a></p>
 34 |             <p><a href="https://antonz.ru/too-simple/">предыстория</a></p>
 35 |         </form>
 36 |     </section>
 37 |     <script>
 38 |         function generateInvoice(event) {
 39 |             try {
 40 |                 const params = gatherParams();
 41 |                 save(params);
 42 |                 const invoiceUrl = buildUrl(params);
 43 |                 document.location.assign(invoiceUrl);
 44 |             } catch (exc) {
 45 |                 console.log(exc);
 46 |             }
 47 |         }
 48 | 
 49 |         function gatherParams() {
 50 |             const form = document.forms[0];
 51 |             return {
 52 |                 number: form.number.value,
 53 |                 date: form.date.value,
 54 |                 company: form.company.value,
 55 |                 item: form.item.value,
 56 |                 price: form.price.value
 57 |             };
 58 |         }
 59 | 
 60 |         function buildUrl(params) {
 61 |             const invoiceUrl = new URL("invoice.html", document.location.href);
 62 |             invoiceUrl.searchParams.set("number", params.number);
 63 |             invoiceUrl.searchParams.set("date", params.date);
 64 |             invoiceUrl.searchParams.set("company", params.company);
 65 |             invoiceUrl.searchParams.set("item", params.item);
 66 |             invoiceUrl.searchParams.set("price", params.price);
 67 |             return invoiceUrl;
 68 |         }
 69 | 
 70 |         function save(params) {
 71 |             window.localStorage.setItem("params", JSON.stringify(params));
 72 |         }
 73 | 
 74 |         function load() {
 75 |             const paramsStr = window.localStorage.getItem("params");
 76 |             if (paramsStr) {
 77 |                 return JSON.parse(paramsStr);
 78 |             } else {
 79 |                 return null;
 80 |             }
 81 |         }
 82 | 
 83 |         function initForm(params) {
 84 |             if (!params) {
 85 |                 return;
 86 |             }
 87 |             const form = document.forms[0];
 88 |             form.number.value = params.number;
 89 |             form.date.value = params.date;
 90 |             form.company.value = params.company;
 91 |             form.item.value = params.item;
 92 |             form.price.value = params.price;
 93 |         }
 94 | 
 95 |         const params = load();
 96 |         initForm(params);
 97 |     </script>
 98 | </body>
 99 | 
100 | </html>


--------------------------------------------------------------------------------
/invoice.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ru">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8" />
  6 |     <title>Счет на оплату</title>
  7 |     <style>
  8 |         .invoicePreview {
  9 |             position: relative;
 10 |             font-family: sans-serif;
 11 |         }
 12 | 
 13 |         .invoicePreview__company-block {
 14 |             width: 60%;
 15 |         }
 16 | 
 17 |         .invoicePreview__company-block .invoicePreview__company-name {
 18 |             font-weight: 700;
 19 |         }
 20 | 
 21 |         .invoicePreview__company-block .invoicePreview__company-address,
 22 |         .invoicePreview__company-block .invoicePreview__company-phone {
 23 |             margin-top: 10px;
 24 |         }
 25 | 
 26 |         .invoicePreview__logo-block {
 27 |             position: absolute;
 28 |             top: -16px;
 29 |             right: 0;
 30 |         }
 31 | 
 32 |         .invoicePreview__logo-block .invoicePreview__logo-change-block {
 33 |             text-align: right;
 34 |         }
 35 | 
 36 |         .invoicePreview__logo-block .invoicePreview__logo-change-block .invoicePreview__logo-wrapper {
 37 |             height: 100px;
 38 |             width: 200px;
 39 |             vertical-align: middle;
 40 |             display: table-cell;
 41 |             overflow: hidden;
 42 |             font-size: 0;
 43 |         }
 44 | 
 45 |         .invoicePreview__logo-block .invoicePreview__logo-change-block .invoicePreview__logo-wrapper .invoicePreview__logo {
 46 |             max-height: 100px;
 47 |             width: auto;
 48 |         }
 49 | 
 50 |         .invoicePreview__bank-details-block {
 51 |             margin-top: 50px;
 52 |         }
 53 | 
 54 |         .invoicePreview__bank-details-block .invoicePreview__bank-details-sample {
 55 |             font-size: 11px;
 56 |             padding-bottom: 5px;
 57 |         }
 58 | 
 59 |         .invoicePreview__bank-details-block .invoicePreview__bank-details {
 60 |             table-layout: fixed;
 61 |             border-collapse: collapse;
 62 |             width: 100%;
 63 |         }
 64 | 
 65 |         .invoicePreview__bank-details-block .invoicePreview__bank-details td {
 66 |             border: 1px solid #d9d9d9;
 67 |             padding: 5px;
 68 |             position: relative;
 69 |             vertical-align: top;
 70 |         }
 71 | 
 72 |         .invoicePreview__bank-details-block .invoicePreview__bank-details td.with-description {
 73 |             padding-bottom: 22px;
 74 |         }
 75 | 
 76 |         .invoicePreview__bank-details-block .invoicePreview__bank-details td.description {
 77 |             font-size: 12px;
 78 |             padding-top: 7px;
 79 |         }
 80 | 
 81 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__table-layout td {
 82 |             border: none;
 83 |             padding: 0;
 84 |         }
 85 | 
 86 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__bank-details-bank-name {
 87 |             width: 60%;
 88 |         }
 89 | 
 90 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__bank-details-bank-bik {
 91 |             width: 8%;
 92 |         }
 93 | 
 94 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__bank-details-bank-bik-number {
 95 |             width: 32%;
 96 |         }
 97 | 
 98 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__bank-details-id,
 99 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__bank-details-kpp {
100 |             width: 8%;
101 |         }
102 | 
103 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__bank-details-id-number,
104 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__bank-details-kpp-number {
105 |             width: 22%;
106 |         }
107 | 
108 |         .invoicePreview__bank-details-block .invoicePreview__bank-details .invoicePreview__bank-details-description {
109 |             position: absolute;
110 |             bottom: 5px;
111 |             left: 5px;
112 |             font-size: 11px;
113 |         }
114 | 
115 |         .invoicePreview__invoice-number {
116 |             padding: 50px 0;
117 |             font-size: 24px;
118 |             font-weight: 700;
119 |             text-align: center;
120 |         }
121 | 
122 |         .invoicePreview__recipient,
123 |         .invoicePreview__supplier {
124 |             padding-bottom: 5px;
125 |         }
126 | 
127 |         .invoicePreview__items-block {
128 |             padding-top: 25px;
129 |         }
130 | 
131 |         .invoicePreview__items-block .invoicePreview__items {
132 |             border-collapse: collapse;
133 |             table-layout: fixed;
134 |             width: 100%;
135 |         }
136 | 
137 |         .invoicePreview__items-block .invoicePreview__items td,
138 |         .invoicePreview__items-block .invoicePreview__items th {
139 |             border: 1px solid #e0e0e0;
140 |             box-sizing: border-box;
141 |             padding: 5px 8px;
142 |         }
143 | 
144 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-header th {
145 |             font-weight: 400;
146 |             text-align: left;
147 |         }
148 | 
149 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-header .invoicePreview__items-header-number {
150 |             width: 2em;
151 |         }
152 | 
153 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-header .invoicePreview__items-header-count {
154 |             width: 5em;
155 |         }
156 | 
157 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-header .invoicePreview__items-header-price,
158 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-header .invoicePreview__items-header-total {
159 |             width: 8em;
160 |         }
161 | 
162 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-header .invoicePreview__items-header-count,
163 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-header .invoicePreview__items-header-price,
164 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-header .invoicePreview__items-header-total,
165 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-items .invoicePreview__items-items-count,
166 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-items .invoicePreview__items-items-price,
167 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-items .invoicePreview__items-items-total {
168 |             text-align: right;
169 |         }
170 | 
171 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-total td {
172 |             border: none;
173 |             height: 33px;
174 |             text-align: right;
175 |         }
176 | 
177 |         .invoicePreview__items-block .invoicePreview__items .invoicePreview__items-total .super-total-row {
178 |             font-weight: 700;
179 |         }
180 | 
181 |         .invoicePreview__comment {
182 |             position: relative;
183 |             z-index: 10;
184 |             padding-top: 25px;
185 |         }
186 | 
187 |         .invoicePreview__sign {
188 |             padding: 60px 0 80px;
189 |             position: relative;
190 |         }
191 | 
192 |         .invoicePreview__sign .invoicePreview__sign-name,
193 |         .invoicePreview__sign .invoicePreview__sign-placeholder,
194 |         .invoicePreview__sign .invoicePreview__sign-position {
195 |             position: relative;
196 |             z-index: 1;
197 |             display: inline-block;
198 |         }
199 | 
200 |         .invoicePreview__sign .invoicePreview__sign-placeholder {
201 |             width: 220px;
202 |             margin: 0 10px;
203 |             color: transparent;
204 |         }
205 | 
206 |         .invoicePreview__sign .invoicePreview__sign-placeholder:after {
207 |             display: block;
208 |             content: " ";
209 |             position: absolute;
210 |             left: 0;
211 |             right: 0;
212 |             height: 0;
213 |             border-top: 1px solid rgba(0, 0, 0, 0.2);
214 |             z-index: 5;
215 |         }
216 | 
217 |         .invoicePreview__sign .invoicePreview__sign-placeholder .invoicePreview__sign-sign-block {
218 |             position: absolute;
219 |             left: 40px;
220 |             bottom: 100%;
221 |             margin-bottom: -10px;
222 |         }
223 | 
224 |         .invoicePreview__sign .invoicePreview__sign-placeholder .invoicePreview__sign-sign-block .invoicePreview__sign-sign {
225 |             position: absolute;
226 |             bottom: 100%;
227 |             margin-bottom: -30px;
228 |             left: -20px;
229 |             max-width: 200px;
230 |             max-height: 100px;
231 |         }
232 | 
233 |         .invoicePreview__sign .invoicePreview__sign-placeholder .invoicePreview__sign-sign-block.loaded .invoicePreview__sign-sign-upload {
234 |             display: none;
235 |         }
236 | 
237 |         .invoicePreview__sign .invoicePreview__sign-placeholder .invoicePreview__sign-stamp-block {
238 |             position: absolute;
239 |             left: 40px;
240 |             top: 100%;
241 |             margin-top: 8px;
242 |         }
243 | 
244 |         .invoicePreview__sign .invoicePreview__sign-placeholder .invoicePreview__sign-stamp-block .invoicePreview__sign-stamp {
245 |             position: absolute;
246 |             max-width: 160px;
247 |             max-height: 160px;
248 |             margin-top: -90px;
249 |             left: 60px;
250 |         }
251 | 
252 |         .invoicePreview__sign .invoicePreview__sign-placeholder .invoicePreview__sign-stamp-block.loaded .invoicePreview__sign-stamp-upload {
253 |             display: none;
254 |         }
255 | 
256 |         .invoicePreview__sign .invoicePreview__sign-placeholder .invoicePreview__sign-stamp-block .invoicePreview__sign-stamp-upload {
257 |             width: 145px;
258 |         }
259 | 
260 |         .invoicePreview__sign .invoicePreview__sign-sign-change,
261 |         .invoicePreview__sign .invoicePreview__sign-stamp-change {
262 |             position: absolute;
263 |             right: 0;
264 |             display: none;
265 |             width: 145px;
266 |         }
267 | 
268 |         .invoicePreview__sign .invoicePreview__sign-sign-change.loaded,
269 |         .invoicePreview__sign .invoicePreview__sign-stamp-change.loaded {
270 |             display: inline-block;
271 |         }
272 | 
273 |         .invoicePreview__sign .invoicePreview__sign-sign-change {
274 |             top: 40px;
275 |         }
276 | 
277 |         .invoicePreview__sign .invoicePreview__sign-stamp-change {
278 |             bottom: 50px;
279 |         }
280 | 
281 |         .invoicePreview__logo-select-file,
282 |         .invoicePreview__sign-select-file,
283 |         .invoicePreview__stamp-select-file {
284 |             display: none;
285 |         }
286 | 
287 |         .statusSelector {
288 |             display: inline-block;
289 |             font-size: 0;
290 |         }
291 | 
292 |         .statusSelector__item {
293 |             display: inline-block;
294 |             width: 120px;
295 |             font-size: 15px;
296 |             text-align: center;
297 |             border: 1px solid #cbd2d6;
298 |             box-sizing: border-box;
299 |             padding: 9px 0;
300 |             margin-left: -1px;
301 |             cursor: pointer;
302 |         }
303 | 
304 |         .statusSelector__item:hover {
305 |             background-color: #f7f7f5;
306 |         }
307 | 
308 |         .statusSelector__item.selected {
309 |             position: relative;
310 |             border: none;
311 |             padding: 10px 0;
312 |             color: #fff;
313 |         }
314 | 
315 |         .statusSelector__item.status-new.selected {
316 |             box-shadow: 0 3px 0 0 #546877 inset;
317 |             background-color: #667c8d;
318 |         }
319 | 
320 |         .statusSelector__item.status-paid.selected {
321 |             box-shadow: 0 3px 0 0 #00a358 inset;
322 |             background-color: #00c269;
323 |         }
324 | 
325 |         .statusSelector__item.status-unpaid.selected {
326 |             box-shadow: 0 3px 0 0 #be0000 inset;
327 |             background-color: red;
328 |         }
329 | 
330 |         .statusSelector.waiting .statusSelector__item.selected {
331 |             background-image: url(/assets/images/loading/loading-bars.svg);
332 |             background-repeat: no-repeat;
333 |             background-position: 50% 49%;
334 |             color: transparent;
335 |         }
336 | 
337 |         .statusSelector__item:first-child {
338 |             border-top-left-radius: 3px;
339 |             border-bottom-left-radius: 3px;
340 |         }
341 | 
342 |         .statusSelector__item:last-child {
343 |             border-top-right-radius: 3px;
344 |             border-bottom-right-radius: 3px;
345 |         }
346 | 
347 |         .statusButton,
348 |         .statusButton__button {
349 |             position: relative;
350 |             display: inline-block;
351 |         }
352 | 
353 |         .statusButton__button {
354 |             -webkit-user-select: none;
355 |             -moz-user-select: none;
356 |             -ms-user-select: none;
357 |             user-select: none;
358 |             padding: 9px 40px 10px 20px;
359 |             background-color: #0d7bde;
360 |             color: #fff;
361 |             border-radius: 3px;
362 |             cursor: pointer;
363 |         }
364 | 
365 |         .statusButton__button.status-new {
366 |             background-color: #a5a5a5;
367 |         }
368 | 
369 |         .statusButton__button.status-new:hover {
370 |             background-color: #9b9b9b;
371 |         }
372 | 
373 |         .statusButton__button.status-sent {
374 |             background-color: #0d7bde;
375 |         }
376 | 
377 |         .statusButton__button.status-sent:hover {
378 |             background-color: #0b72cf;
379 |         }
380 | 
381 |         .statusButton__button.status-viewed {
382 |             background-color: #810aef;
383 |         }
384 | 
385 |         .statusButton__button.status-viewed:hover {
386 |             background-color: #780cdd;
387 |         }
388 | 
389 |         .statusButton__button.status-paid {
390 |             background-color: #00c269;
391 |         }
392 | 
393 |         .statusButton__button.status-paid:hover {
394 |             background-color: #00b260;
395 |         }
396 | 
397 |         .statusButton__button.status-unpaid {
398 |             background-color: red;
399 |         }
400 | 
401 |         .statusButton__button.status-unpaid:hover {
402 |             background-color: #e90000;
403 |         }
404 | 
405 |         .statusButton__button .statusButton__button-icon {
406 |             position: absolute;
407 |             right: 20px;
408 |             top: 50%;
409 |             margin-top: -3px;
410 |             margin-left: -5px;
411 |             fill: currentColor;
412 |         }
413 | 
414 |         .statusButton__dropdown {
415 |             -webkit-user-select: none;
416 |             -moz-user-select: none;
417 |             -ms-user-select: none;
418 |             user-select: none;
419 |             display: none;
420 |             position: absolute;
421 |             top: 0;
422 |             left: 0;
423 |             z-index: 1;
424 |             width: 120px;
425 |             box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
426 |             background-color: #fff;
427 |             border-radius: 3px;
428 |         }
429 | 
430 |         .statusButton__dropdown.visible {
431 |             display: block;
432 |         }
433 | 
434 |         .statusButton__dropdown .statusButton__dropdown-item {
435 |             padding: 10px 5px 10px 20px;
436 |             cursor: pointer;
437 |         }
438 | 
439 |         .statusButton__dropdown .statusButton__dropdown-item.status-new {
440 |             border-radius: 3px 3px 0 0;
441 |             color: #a5a5a5;
442 |         }
443 | 
444 |         .statusButton__dropdown .statusButton__dropdown-item.status-sent {
445 |             color: #0d7bde;
446 |         }
447 | 
448 |         .statusButton__dropdown .statusButton__dropdown-item.status-viewed {
449 |             color: #810aef;
450 |         }
451 | 
452 |         .statusButton__dropdown .statusButton__dropdown-item.status-paid {
453 |             color: #00c269;
454 |         }
455 | 
456 |         .statusButton__dropdown .statusButton__dropdown-item.status-unpaid {
457 |             border-radius: 0 0 3px 3px;
458 |             color: red;
459 |         }
460 | 
461 |         .statusButton__dropdown .statusButton__dropdown-item:hover {
462 |             background-color: #f3f9ff;
463 |         }
464 | 
465 |         .invoiceView {
466 |             position: relative;
467 |             padding: 20px 90px 0;
468 |         }
469 | 
470 |         .invoiceView__actions-back {
471 |             -webkit-user-select: none;
472 |             -moz-user-select: none;
473 |             -ms-user-select: none;
474 |             user-select: none;
475 |             position: absolute;
476 |             top: 36px;
477 |             left: 30px;
478 |             width: 40px;
479 |             height: 40px;
480 |             cursor: pointer;
481 |             border-radius: 40px;
482 |             background-color: transparent;
483 |             transition: background-color 0.3s;
484 |         }
485 | 
486 |         .invoiceView__actions-back:hover {
487 |             border-radius: 40px;
488 |             background-color: #e7e7e7;
489 |             transition: none;
490 |         }
491 | 
492 |         .invoiceView__actions-back:active {
493 |             background-color: #d3d3d3;
494 |             transition: none;
495 |         }
496 | 
497 |         .invoiceView__actions-back svg {
498 |             position: absolute;
499 |             top: 50%;
500 |             left: 50%;
501 |             margin-top: -10px;
502 |             margin-left: -8px;
503 |         }
504 | 
505 |         .invoiceView__header {
506 |             margin-bottom: 10px;
507 |         }
508 | 
509 |         .invoiceView__details {
510 |             font-size: 18px;
511 |             color: #999;
512 |         }
513 | 
514 |         .invoiceView__actions {
515 |             margin-top: 30px;
516 |         }
517 | 
518 |         .invoiceView__actions-download,
519 |         .invoiceView__actions-edit,
520 |         .invoiceView__actions-send,
521 |         .invoiceView__actions-status {
522 |             margin-right: 20px;
523 |         }
524 | 
525 |         .invoiceView__content {
526 |             margin-top: 40px;
527 |             width: 860px;
528 |             padding: 80px;
529 |             margin-bottom: 80px;
530 |             box-sizing: border-box;
531 |             box-shadow: 0 1px 8px -3px;
532 |             background-color: #fff;
533 |         }
534 | 
535 |         .publicInvoice {
536 |             position: relative;
537 |             min-height: 100%;
538 |         }
539 | 
540 |         .publicInvoice__content {
541 |             background-color: #fff;
542 |             width: 860px;
543 |             padding: 40px 80px 80px 80px;
544 |             margin: 0 auto;
545 |             box-sizing: border-box;
546 |         }
547 | 
548 |         #print {
549 |             margin-bottom: 2rem;
550 |             border: 2px solid hsl(216, 5%, 60%);
551 |             padding: 1rem;
552 |             text-align: center;
553 |             font-family: sans-serif;
554 |         }
555 | 
556 |         #print button {
557 |             padding: 0.5rem 1rem;
558 |         }
559 | 
560 |         #print p {
561 |             margin: 0;
562 |         }
563 | 
564 |         @media print {
565 |             @page {
566 |                 margin: 0;
567 |             }
568 | 
569 |             .no-print {
570 |                 display: none !important;
571 |             }
572 | 
573 |             .publicInvoice__content {
574 |                 padding: 80px;
575 |             }
576 |         }
577 |     </style>
578 | </head>
579 | 
580 | <body>
581 |     <div class="publicInvoice">
582 |         <div class="publicInvoice__content">
583 |             <div id="print" class="no-print">
584 |                 Распечатайте этот счёт или сохраните как PDF&nbsp;
585 |                 <button onclick="window.print()">Распечатать</button>
586 |                 <p><a href="javascript:history.go(-1)">вернуться на сайт</a></p>
587 |             </div>
588 |             <div class="invoicePreview">
589 |                 <div class="invoicePreview__company-block">
590 |                     <div class="invoicePreview__company-name">
591 |                         <span id="company-name">ООО «Компания»</span>
592 |                     </div>
593 |                     <div class="invoicePreview__company-address">
594 |                         <span id="company-address">000000, город, улица, дом</span>
595 |                     </div>
596 |                     <div class="invoicePreview__company-phone">
597 |                         <span id="company-phone">+7 999 111-11-11</span>
598 |                     </div>
599 |                 </div>
600 |                 <div class="invoicePreview__logo-block">
601 |                     <div class="invoicePreview__logo-change-block">
602 |                         <div class="invoicePreview__logo-wrapper">
603 |                             <img src="img/logo.png" class="invoicePreview__logo" />
604 |                         </div>
605 |                     </div>
606 |                 </div>
607 |                 <div class="invoicePreview__bank-details-block">
608 |                     <div class="invoicePreview__bank-details-sample">
609 |                         Образец заполнения платежного поручения
610 |                     </div>
611 |                     <table class="invoicePreview__bank-details">
612 |                         <tbody>
613 |                             <tr class="invoicePreview__table-layout">
614 |                                 <td class="invoicePreview__bank-details-id"></td>
615 |                                 <td class="invoicePreview__bank-details-id-number"></td>
616 |                                 <td class="invoicePreview__bank-details-kpp"></td>
617 |                                 <td class="invoicePreview__bank-details-kpp-number"></td>
618 |                                 <td class="invoicePreview__bank-details-bank-bik"></td>
619 |                                 <td class="invoicePreview__bank-details-bank-bik-number"></td>
620 |                             </tr>
621 |                             <tr>
622 |                                 <td rowspan="2" colspan="4"
623 |                                     class="invoicePreview__bank-details-bank-name with-description">
624 |                                     <span id="bank-name">Банк</span>
625 |                                     <div class="invoicePreview__bank-details-description">
626 |                                         Банк получателя
627 |                                     </div>
628 |                                 </td>
629 |                                 <td class="invoicePreview__bank-details-bank-bik description">
630 |                                     БИК
631 |                                 </td>
632 |                                 <td class="invoicePreview__bank-details-bank-bik-number">
633 |                                     <span id="bank-bik">123456789</span>
634 |                                 </td>
635 |                             </tr>
636 |                             <tr>
637 |                                 <td class="description">Сч. №</td>
638 |                                 <td>
639 |                                     <span id="bank-account">12345678901234567890</span>
640 |                                 </td>
641 |                             </tr>
642 |                             <tr>
643 |                                 <td class="invoicePreview__bank-details-id description">
644 |                                     ИНН
645 |                                 </td>
646 |                                 <td class="invoicePreview__bank-details-id-number">
647 |                                     <span id="company-inn">1234567890</span>
648 |                                 </td>
649 |                                 <td class="invoicePreview__bank-details-kpp description">
650 |                                     КПП
651 |                                 </td>
652 |                                 <td class="invoicePreview__bank-details-kpp-number">
653 |                                     <span id="company-kpp">123456789</span>
654 |                                 </td>
655 |                                 <td rowspan="2" class="description">
656 |                                     Сч. №
657 |                                 </td>
658 |                                 <td rowspan="2">
659 |                                     <span id="company-account">12345678901234567890</spam>
660 |                                 </td>
661 |                             </tr>
662 |                             <tr>
663 |                                 <td rowspan="2" colspan="4" class="with-description">
664 |                                     <span id="company-name-2">ООО «Дейта Кью»</span>
665 |                                     <div class="invoicePreview__bank-details-description">
666 |                                         Получатель
667 |                                     </div>
668 |                                 </td>
669 |                             </tr>
670 |                         </tbody>
671 |                     </table>
672 |                 </div>
673 |                 <div class="invoicePreview__invoice-number">
674 |                     Счет на оплату №<span id="invoice-number">****</span> от <span id="invoice-date">**.**.****</span>
675 |                 </div>
676 |                 <div class="invoicePreview__supplier">
677 |                     Поставщик: <span id="company-name-3">ООО «Компания»</span>, <span
678 |                         id="company-address-2">адрес</span>
679 |                 </div>
680 |                 <div class="invoicePreview__recipient">
681 |                     Покупатель: <span id="recipient">ООО «Покупатель»</span>
682 |                 </div>
683 |                 <div class="invoicePreview__items-block">
684 |                     <table class="invoicePreview__items">
685 |                         <thead class="invoicePreview__items-header">
686 |                             <tr>
687 |                                 <th class="invoicePreview__items-header-number">
688 |                                     №
689 |                                 </th>
690 |                                 <th class="invoicePreview__items-header-item">
691 |                                     Товар или услуга
692 |                                 </th>
693 |                                 <th class="invoicePreview__items-header-count">
694 |                                     Кол-во
695 |                                 </th>
696 |                                 <th class="invoicePreview__items-header-price">
697 |                                     Цена
698 |                                 </th>
699 |                                 <th class="invoicePreview__items-header-total">
700 |                                     Сумма
701 |                                 </th>
702 |                             </tr>
703 |                         </thead>
704 |                         <tbody class="invoicePreview__items-items">
705 |                             <tr>
706 |                                 <td class="invoicePreview__items-items-number">
707 |                                     1
708 |                                 </td>
709 |                                 <td class="invoicePreview__items-items-item">
710 |                                     <span id="item">Название товара</span>
711 |                                 </td>
712 |                                 <td class="invoicePreview__items-items-count">
713 |                                     1
714 |                                 </td>
715 |                                 <td class="invoicePreview__items-items-price">
716 |                                     <span id="price">1 000,00</span>
717 |                                 </td>
718 |                                 <td class="invoicePreview__items-items-total">
719 |                                     <span id="total">1 000,00</span>
720 |                                 </td>
721 |                             </tr>
722 |                         </tbody>
723 |                         <tbody class="invoicePreview__items-total">
724 |                             <tr>
725 |                                 <td></td>
726 |                                 <td></td>
727 |                                 <td></td>
728 |                                 <td>Итого</td>
729 |                                 <td class="invoicePreview__items-total-total">
730 |                                     <span id="total-total">1 000,00</span>
731 |                                 </td>
732 |                             </tr>
733 |                             <tr>
734 |                                 <td></td>
735 |                                 <td></td>
736 |                                 <td colspan="2" class="invoicePreview__items-total-tax">
737 |                                     Без НДС
738 |                                 </td>
739 |                                 <td class="invoicePreview__items-total-total with-tax">
740 |                                     0,00
741 |                                 </td>
742 |                             </tr>
743 |                             <tr class="super-total-row">
744 |                                 <td></td>
745 |                                 <td></td>
746 |                                 <td></td>
747 |                                 <td>Всего</td>
748 |                                 <td class="invoicePreview__items-total-total invoicePreview__items-super-total">
749 |                                     <span id="super-total">1 000,00</span>
750 |                                 </td>
751 |                             </tr>
752 |                         </tbody>
753 |                     </table>
754 |                 </div>
755 |                 <div class="invoicePreview__comment"></div>
756 |                 <div class="invoicePreview__sign">
757 |                     <div class="invoicePreview__sign-position">
758 |                         Генеральный директор
759 |                     </div>
760 |                     <div class="invoicePreview__sign-placeholder">
761 |                         (подпись)
762 |                         <div class="invoicePreview__sign-sign-block">
763 |                             <div class="invoicePreview__sign-sign-wrapper">
764 |                                 <img src="img/signature.png" class="invoicePreview__sign-sign" />
765 |                             </div>
766 |                         </div>
767 |                         <div class="invoicePreview__sign-stamp-block">
768 |                             <div class="invoicePreview__sign-stamp-wrapper">
769 |                                 <img src="img/stamp.jpg" class="invoicePreview__sign-stamp" />
770 |                             </div>
771 |                         </div>
772 |                     </div>
773 |                     <div class="invoicePreview__sign-name">
774 |                         <span id="manager">Абакумова Ольга Валерьевна</span>
775 |                     </div>
776 |                 </div>
777 |             </div>
778 |         </div>
779 |     </div>
780 |     <script>
781 |         fetch("company.json")
782 |             .then(response => response.json())
783 |             .then(company => prepare(company));
784 | 
785 |         function prepare(company) {
786 |             const state = getState();
787 |             fillCompany(company);
788 |             fillRecipient(state);
789 |         }
790 | 
791 |         function getState() {
792 |             const url = new URL(window.location.href);
793 |             const dateOptions = { year: 'numeric', month: 'numeric', day: 'numeric' };
794 |             const dateParam = url.searchParams.get("date");
795 |             const date = dateParam && new Date(dateParam) || new Date();
796 |             const dateRu = date.toLocaleDateString("ru-RU", dateOptions);
797 |             const state = {
798 |                 number: url.searchParams.get("number") || "***",
799 |                 date: dateRu,
800 |                 recipient: url.searchParams.get("company") || "***",
801 |                 item: url.searchParams.get("item") || "***",
802 |                 price: url.searchParams.get("price") || "***",
803 |             };
804 |             state.recipient = decodeURIComponent(state.recipient);
805 |             state.price += ",00";
806 |             return state;
807 |         }
808 | 
809 |         function fillCompany(company) {
810 |             document.querySelector("#company-name").innerText = company.name;
811 |             document.querySelector("#company-name-2").innerText = company.name;
812 |             document.querySelector("#company-name-3").innerText = company.name;
813 |             document.querySelector("#company-inn").innerText = company.inn;
814 |             document.querySelector("#company-address").innerText = company.address;
815 |             document.querySelector("#company-address-2").innerText = company.address;
816 |             document.querySelector("#company-phone").innerText = company.phone;
817 |             document.querySelector("#company-account").innerText = company.account;
818 |             document.querySelector("#bank-name").innerText = company.bank.name;
819 |             document.querySelector("#bank-bik").innerText = company.bank.bik;
820 |             document.querySelector("#bank-account").innerText = company.bank.account;
821 |         }
822 | 
823 |         function fillRecipient(state) {
824 |             document.querySelector("#invoice-number").innerText = state.number;
825 |             document.querySelector("#invoice-date").innerText = state.date;
826 |             document.querySelector("#recipient").innerText = state.recipient;
827 |             document.querySelector("#item").innerText = state.item;
828 |             document.querySelector("#price").innerText = state.price;
829 |             document.querySelector("#total").innerText = state.price;
830 |             document.querySelector("#total-total").innerText = state.price;
831 |             document.querySelector("#super-total").innerText = state.price;
832 |         }
833 |     </script>
834 | </body>
835 | 
836 | </html>
837 | 


--------------------------------------------------------------------------------