UI/view_product_details.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 | Add Products</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="index.html">Logout</a></li>
</div>
<div id="main">
<section id="productviewsection" class="topmargin">
<div class="container">
<div class="cardgroup">
<div class="card" id="productdetailsimg">
<img src="img/gpixel2.jpg" class="productviewcardimg">
</div>
<div id="productdetails">
<ul class="list-group">
<li class="list-group-item text-center"><strong>Product Name:</strong> Google Pixel 2</li>
<li class="list-group-item text-center"><strong>Description:</strong> The Google Pixel 2 is powered by 1.9GHz octa-core processor and it comes with 4GB of RAM. The phone packs 64GB of internal storage that cannot be expanded.</li>
<li class="list-group-item text-center"><strong>Price:</strong> $649</li>
<li class="list-group-item text-center"><strong>Quantity:</strong> 3</li>
</ul>
</div>
</div>
</div>
</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">
<p>Store Manager Copyright © 2018</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>