ui-stuff/invoice-generator/invoice.html at main · Maxvyr/ui-stuff · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
  <head>
    <title>Invoice Generator Demo</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="invoice.css" />
    <script src="invoice.js"></script>

    <!-- PROGRESSIVE WEB APP -->
    <link rel="icon" href="logo.png" type="image/png" />
    <link rel="manifest" href="manifest.json" />
    <script>
      if ("serviceWorker" in navigator) {
        //REGISTER SERVICE WORKER
        navigator.serviceWorker.register("worker.js", { scope: "/" });

        //CACHE WEB APP FILES
        caches
          .open("invoice")
          .then((cache) =>
            cache.addAll([
              "invoice.css",
              "invoice.html",
              "invoice.js",
              "logo.png",
              "manifest.json",
              "print.css",
              "print.html",
            ])
          );
      }
    </script>
  </head>
  <body>
    <form onsubmit="return invoice.print()">
      <!-- INVOICE -->
      <div class="header">Invoice</div>
      <div id="inRow">
        <input type="text" id="inNum" placeholder="Invoice Number" required />
        <input type="date" id="inDate" required />
      </div>
      <textarea id="inBill" placeholder="Bill To" required></textarea>

      <!-- ITEMS -->
      <div class="header">Items</div>
      <div id="itemsList"></div>
      <div id="itemsAdd" class="irow">
        <input type="number" class="qty" min="1" placeholder="Qty" />
        <input
          type="text"
          class="item"
          list="itemsData"
          placeholder="Item Name"
          onchange="invoice.price(this)"
        />
        <input
          type="number"
          class="price"
          min="0.00"
          step="0.01"
          placeholder="Price Each"
        />
        <input
          type="button"
          class="action"
          value="+"
          onclick="invoice.add(true)"
        />
      </div>
      <datalist id="itemsData"></datalist>

      <!-- TOTALS -->
      <div class="header">Totals</div>
      <div id="totals">Total: €0.00</div>

      <!-- CONTROLS -->
      <div id="controls">
        <label id="loader">
          <input type="file" accept=".json" onchange="invoice.load()" /> Load
        </label>
        <input type="button" value="Save" onclick="invoice.save()" />
        <input type="submit" value="Print" />
      </div>
    </form>
  </body>
</html>