UI/sales_view.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A web application that helps store owners manage sales and product inventory records.">
<meta name="keywords" content="Store Manager">
<title>Store Manager | View Sales</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/ico" sizes="32x32" href="img/favicon.ico">
</head>
<body>
<nav class="navbar">
<span class="open-slide">
<a href="#" id="openslidemenu" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#ffffff"
stroke-width="5"/>
<path d="M0,14 30,14" stroke="#ffffff"
stroke-width="5"/>
<path d="M0,23 30,23" stroke="#ffffff"
stroke-width="5"/>
</svg>
</a></span>
<ul>
<li><a href="store_attendant_profile.html" style="padding-top: 10px"><div><img id="userimg" src="../uploads/users/default-avatar.png"> </div></a></li>
<li id="shoppingcart"><a href="#"><label id="shoppingcartlabel">0</label ><img id="cartimage" src="img/cart.png"></a></li>
<li id="appnameli"><a href="dashboard.html"><h1 id="appname"><span class="highlight">Store</span> Manager</h1></a></li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSlideMenu()">×</a>
<li><a class="dashboard" href="dashboard.html">Dashboard</a></li>
<li><a href="sales_new.html">Sell</a></li>
<li class="current"><a href="sales_view.html">View Sales Record</a></li>
<li><a href="store_attendant_profile.html">Profile</a></li>
<li><a href="index.html">Logout</a></li>
</div>
<div id="main">
<section class="topmargin">
<div class="container text-center">
<table class="table">
<caption>Sales</caption>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Product</th>
<th scope="col">Amount</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Date">04/10/2018</td>
<td data-label="Product">iPhone Xs</td>
<td data-label="Amount">$1,190</td>
<td data-label="Status">Completed</td>
</tr>
<tr>
<td data-label="Date">04/10/2018</td>
<td data-label="Product">Google Pixel 2</td>
<td data-label="Amount">$790</td>
<td data-label="Status">Completed</td>
</tr>
<tr>
<td data-label="Date">07/10/2018</td>
<td data-label="Product">iPhone 7</td>
<td data-label="Amount">$500</td>
<td data-label="Status">Completed</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content" id="cartmodaldiv">
<span class="close">×</span>
<table >
<thead>
<th>PRODUCT</th>
<th>AMOUNT</th>
<th>QUANTITY</th>
</thead>
<tbody id="carttablebody"></tbody>
</table>
<br>
<div class="text-center">
<button class="button_1">BUY</button>
<button class="button_1" id="clear" onclick="clearCart()">CLEAR</button>
</div>
</div>
</div>
<footer id="footer" class="footerstickbottom">
<p>Store Manager Copyright © 2018</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>