Skip to content

Commit 9b0bda7

Browse files
Take-A-ByteTake-A-Byte
committed
first prototype of bill ready
1 parent fb9d599 commit 9b0bda7

File tree

3 files changed

+216
-0
lines changed

3 files changed

+216
-0
lines changed

‎BillGeneration_electron_window/Scripts/BillPrototype_renderer.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const CompanyName = document.getElementById('companyName');
2+
CompanyName.innerHTML = "Name of the Company";
3+
4+
const Address = document.getElementById('address');
5+
Address.innerHTML = "Apartment number, Building Name, Society, Area, City - 000 000";
6+
7+
const EmailID = document.getElementById('emailID');
8+
EmailID.innerHTML = "[email protected]";
9+
10+
const Contact = document.getElementById('contact');
11+
Contact.innerHTML = "(+11) 1234567890";
12+
13+
const BuyerName = document.getElementById('buyerName');
14+
BuyerName.innerHTML = "Name of the Buyer Company";
15+
16+
const AddressLine1 = document.getElementById('addressLine1');
17+
AddressLine1.innerHTML = "Apartment number, Building Name,";
18+
19+
const AddressLine2 = document.getElementById('addressLine2');
20+
AddressLine2.innerHTML = "Society name, Area,";
21+
22+
const AddressLine3 = document.getElementById('addressLine3');
23+
AddressLine3.innerHTML = "City - 000 000";
24+
25+
const OrderID = document.getElementById('orderID');
26+
OrderID.innerHTML = "AZ12345678";
27+
28+
const DateHolder = document.getElementById('date');
29+
DateHolder.innerHTML = "dd/mm/yyyy";
30+
31+
const Terms = document.getElementById('terms');
32+
Terms.innerHTML = "*These Terms will be governed by and interpreted in accordance " +
33+
"with the laws of the State of Country, and you submit to the " +
34+
"non-exclusive jurisdiction of the state and federal courts located " +
35+
"in Country for the resolution of any disputes.";
36+
37+
const CompanyNameForFooter = document.getElementById('companyNameForFooter');
38+
CompanyNameForFooter.innerHTML = "For Name of the Company";

‎BillGeneration_electron_window/Styles/billPrototypeStyles.css

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
body {
2+
background: rgb(204,204,204);
3+
}
4+
page {
5+
background: white;
6+
display: block;
7+
margin: 1rem auto;
8+
margin-bottom: 0.5cm;
9+
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
10+
padding: 1.5rem;
11+
}
12+
page[size="A4"] {
13+
width: 21cm;
14+
height: 29.7cm;
15+
}
16+
page[size="A4"][layout="landscape"] {
17+
width: 29.7cm;
18+
height: 21cm;
19+
}
20+
page[size="A3"] {
21+
width: 29.7cm;
22+
height: 42cm;
23+
}
24+
page[size="A3"][layout="landscape"] {
25+
width: 42cm;
26+
height: 29.7cm;
27+
}
28+
page[size="A5"] {
29+
width: 14.8cm;
30+
height: 21cm;
31+
}
32+
page[size="A5"][layout="landscape"] {
33+
width: 21cm;
34+
height: 14.8cm;
35+
}
36+
@media print {
37+
body, page {
38+
margin: 0;
39+
box-shadow: 0;
40+
}
41+
}
42+
43+
.adderss{
44+
padding-top: -0.5rem !important;
45+
}
46+
47+
td{
48+
margin: 50px !important;
49+
}

‎BillGeneration_electron_window/Views/BillPrototype.html

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="../Styles/commonStyles.css">
8+
<link rel="stylesheet" href="../Styles/billPrototypeStyles.css">
9+
<title>Bill Prototype</title>
10+
</head>
11+
<body>
12+
<page size="A4">
13+
<div class="container" style="height: 100%; border: 2px solid black;">
14+
15+
<div id="header" class="row" style="border-bottom: 1px solid black; height: 3.2cm;">
16+
<div class="col-2">
17+
<img id="companyIcon" src="../node_modules/bootstrap-icons/icons/square-fill.svg"
18+
style="height: 3cm !important;">
19+
</div>
20+
<div class="col-10" style="padding: 0.75rem 1.25rem;">
21+
<h2 id="companyName" style="padding-bottom: 0.25rem; border-bottom: 1px solid
22+
black; text-align: center;"></h2>
23+
<h6 id="address" style="margin: 0.5rem 1rem; margin-top: -0.2rem; text-align: center;"></h6>
24+
<div class="row">
25+
<div class="col-6">
26+
<h6 style="margin-left: 1rem; margin-top: -0.5rem;">
27+
<span style="font-weight: 650;">Email: </span>
28+
<span id="emailID"></span>
29+
</h6>
30+
</div>
31+
<div class="col-6">
32+
<h6 style="margin-right: 1rem; margin-top: -0.5rem; text-align: right;">
33+
<span style="font-weight: 650;">Contact:</span>
34+
<span id="contact"></span></h6>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div id="buyerDetails" class="row" style="border-bottom: 1px solid black; height: 4.35cm;">
41+
<div class="col-8" style="padding:0.5rem 1rem; border-right: 1px solid black;">
42+
<h5 style="font-weight: 700;">To,</h5>
43+
<div class="container">
44+
<h5><span id="buyerName"></span><span>,</span></h5>
45+
<h5 style="margin-top: -0.4rem; font-weight: 400;">
46+
<span id="addressLine1"></span>
47+
</h5>
48+
<h5 style="margin-top: -0.4rem; font-weight: 400;">
49+
<span id="addressLine2"></span>
50+
</h5>
51+
<h5 style="margin-top: -0.4rem; font-weight: 400;">
52+
<span id="addressLine3"></span>
53+
</h5>
54+
</div>
55+
</div>
56+
<div class="col-4" style="padding:0.75rem 1rem;">
57+
<h5>
58+
<span style="font-weight: 700;">Order Id:</span>
59+
<span id="orderID"></span>
60+
</h5>
61+
<h5 style="margin-top: -0.4rem;">
62+
<span style="font-weight: 700;">Date:</span>
63+
<span id="date"></span>
64+
</h5>
65+
</div>
66+
</div>
67+
68+
69+
70+
<div id="orderDetails" class="row" style=" border-bottom: 1px solid black; height: 16.75cm;">
71+
<div class="col-12">
72+
<table class="table table-bordered" style="width: 104.5%; margin-left: -0.9rem;">
73+
<col width="10%">
74+
<col width="50%">
75+
<col width="10%">
76+
<col width="15%">
77+
<col width="15%">
78+
<thead class="thead-dark">
79+
<tr>
80+
<th scope="col">
81+
<div>Sr.</div>
82+
<div style="margin-top: -0.5rem;">No.</div>
83+
</th>
84+
<th scope="col">Description</th>
85+
<th scope="col">Qty.</th>
86+
<th scope="col">Unit Price</th>
87+
<th scope="col">Amount</th>
88+
</tr>
89+
</thead>
90+
<tr>
91+
<th>1</th>
92+
<td></td>
93+
<td></td>
94+
<td></td>
95+
<td></td>
96+
</tr>
97+
<tr>
98+
<th>2</th>
99+
<td></td>
100+
<td></td>
101+
<td></td>
102+
<td></td>
103+
</tr>
104+
</table>
105+
</div>
106+
</div>
107+
108+
109+
<div id="total" class="row" style="border-bottom: 1px solid black; height: 1.25cm;">
110+
</div>
111+
112+
113+
<div id="footer" class="row" style="height: 2.8cm;">
114+
<div class="col-6" style="border-right: 1px solid black;">
115+
<span id="terms" style="font-weight: 400; font-size: x-small; line-height: 50%;"></span>
116+
</div>
117+
<div class="col-6">
118+
<h5 style="position: absolute; bottom: 0.05cm; width: 100%; text-align: center;">
119+
<span id="companyNameForFooter"></span>
120+
</h5>
121+
</div>
122+
</div>
123+
124+
</div>
125+
</page>
126+
127+
<script src="../Scripts/BillPrototype_renderer.js"></script>
128+
</body>
129+
</html>

0 commit comments

Comments
 (0)