cc-invoice/src/app/app.component.html

Simple Invoice App Made with Angular @latest

<div class="container">
	<div class="spaceTop"></div>
	<div class="spaceBottom"></div>
	<header role="banner">
		<div id="identity">
			<div id="logo">
				<img id="image" width="100%" height="auto" src="/assets/img/logo.png" alt="Logo">
			</div><!-- logo -->
			<table id="meta">
				<tr>
					<td class="meta-head">Invoice #</td>
					<td><textarea>000123</textarea></td>
				</tr>
				<tr>
					<td class="meta-head">Date</td>
					<td><textarea id="date">December 15, 2009</textarea></td>
				</tr>
			</table>
		</div><!-- identity -->
		<div id="customer">
			<table class="items" border="0" width="800">
				<tr>
					<th width="50%">COMPANY</th>
					<th width="50%">CLIENT</th>
				</tr>
				<tr>
					<td width="50%">
						<div class="address">
							<p><b>Company: </b> You Company Name</p>
							<p><b>Website: </b> www.example.com</p>
							<p><b>Email: </b> email@example.com</p>
							<p><b>Phone: </b> (000) 000 000 0000</p>
							<p><b>Mobile: </b> (000) 000 000 0000</p>
							<p><b>Address: </b> Location to our Office comes here,<br>Area, Cit, Zip, Country</p>
						</div>
					</td>
					<td width="50%">
						<div class="address">
							<p><b>Company: </b> Client's Company Name</p>
							<p><b>Website: </b> www.example.com</p>
							<p><b>Email: </b> email@example.com</p>
							<p><b>Phone: </b> (000) 000 000 0000</p>
							<p><b>Mobile: </b> (000) 000 000 0000</p>
							<p><b>Address: </b> Location to our Office comes here,<br>Area, Cit, Zip, Country</p>
						</div>
					</td>
				</tr>
			</table>
		</div><!-- customer -->
		<div class="clear"></div>
	</header>
	<main role="main">
		<table class="items" width="800">
			<tr>
				<th width="40">Item</th>
				<th width="420">Product/Specification</th>
				<th width="60">Quantity</th>
				<th width="140">Unit Price</th>
				<th width="140">Total Price</th>
			</tr>
			<tr class="item-row">
				<td width="40" class="item-name">
					<div class="delete-wpr"><textarea rows="1">1</textarea><a class="delete" href="javascript:;"
							title="Remove row">X</a></div>
				</td>
				<td width="420" class="description"><textarea rows="1">Item Details</textarea></td>
				<td width="60"><textarea rows="1" class="qty">0</textarea></td>
				<td width="140"><textarea rows="1" class="cost">Rs. 0.00</textarea></td>
				<td width="140"><span class="price">Rs. 0.00</span></td>
			</tr>
		</table>
		<div class="clear"></div>
		<button id="addrow" href="javascript:;" title="Add a row">Add a row</button>
		<div class="clear"></div>
		<table class="items" style="border:0;" width="800">
			<tr>
				<td width="40" align="right" class="blank">&nbsp;</td>
				<td width="420" align="right" class="blank">&nbsp;</td>
				<td width="60" align="right" class="blank">&nbsp;</td>
				<td width="140" class="total-line goldbg">Subtotal</td>
				<td width="140" class="total-value goldbg">
					<div id="subtotal">Rs. 0.00</div>
				</td>
			</tr>
			<tr>
				<td width="40" align="right" class="blank">&nbsp;</td>
				<td width="400" align="right" class="blank">&nbsp;</td>
				<td width="60" align="right" class="blank">&nbsp;</td>
				<td width="140" class="total-line goldbg">Grand Total</td>
				<td width="140" class="total-value goldbg">
					<div id="total">Rs. 0.00</div>
				</td>
			</tr>
		</table>
	</main>
	<footer>
		<p>This invoice is computer generated, please keep a copy of this with you.</p>
	</footer>
</div>

<router-outlet></router-outlet>