Invoice/index.html at master · r1903/Invoice · 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
<!DOCTYPE html>
<html>
<head>
	<title>Invoice</title>
	<meta charset="UTF-8" />
  <link rel="stylesheet" href="styles.css">
  <script src="./products.js"></script>
  <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
  <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.min.js"></script>
</head>

<body>
    <p class="info">**********Please click on logo to toggle input fields to include a products to invoice**********</p>
    <div class="inputFields">
        <div class="toggle" style="display: none;">
            <label>ADD PRODUCT:
            <input type="text" id="products" placeholder="Product">
            <input type="number" value= 0  id="quantity" placeholder="Quantity">
            <input type="text" id="price" placeholder="price"></label>
            <button  class="addrow">+</button>
        </div>
        <div class="toggle" style="display: none;">
            <label>ADD CUSTOMER :
            <input type="text"  id="fname" placeholder="First Name">
            <input type="text"  id="lname" placeholder="Last Name">
            <input type="text"  id="Phoneno" placeholder="Phone Number"></label>
            <button  class="addname">+</button>
        </div>
    </div>
    <div class="container">
      <h1 class="header">INVOICE</h1>
      <div class="logo">
            <img src="logo.jpg" alt="logo" height=100px width=100px />
            <div>
                <p><span class="name">Raghav's - Inspired By Nature </span><br/><br/>
                    Mobile No: +44 XXXXXXXXXX</p>
                <p>Email ID: incoice@test.com</p>
                <p>Invoice No: <span class="invoiceno">2000</span></p>
                <p>Date: <span class="date"></span></p>
            </div>
      </div>
      <p class="bankdetails" >Invoice To:</p class="bankdetails">
      <p class="coustmer"></p>
      <p>Bristol</p>
      <p class="coustmerPhone"></p>
      <table class="table">
          <tr>
              <th>Iteam No</th>
              <th>Product</th>
              <th>Quantity</th>
              <th>Price/Kg</th>
              <th>Total</th>
          </tr>
      </table>

      <table class="table2">
          <tr>
              <th>Subtotal</th>
              <td>0.0</td>
          </tr>
          <tr>
              <th>Shipping Charge</th>
              <td><input type="text"  id="shipp" placeholder="Shipping Charge"></td>
          </tr>
          <tr>
              <th>Total</th>
              <td>0.0</td>
          </tr>
      </table>
      <div class="end"></div>
      <p class="bankdetails">Payment Details:</p>
      <p>Bank Name: XXXXX</p>
      <p>Account No.: XXXXX</p>
      <p>Sort Code: XXXX</p>
      <div class="end"></div>
    </div>
    <div class="savepdf">
      <button>Save as PDF</button>
    </div>
    <script src="index.js"></script>
</body>
</html>