UI/sales_new.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><a href="#"><div></div><input class="search" placeholder="Search Products" type="text"> <img id="searchimg" src="img/search.png"> </div></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 class="current"><a href="sales_new.html">Sell</a></li>
<li><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 id="productsection" class="topmargin">
<div class="container">
<div class="cardgroup">
<div class="card">
<a href="view_product_details.html"><img src="img/gpixel2.jpg" class="cardimg"></a>
<div class="text-center cardbody" >
<h3 id="productname" data-name="Google Pixel 2">Google Pixel 2</h3>
<p>The Google Pixel 2 is powered by 1.9GHz octa-core </p>
<p>Quantity: 3</p>
<p id="productamount">Price: $649</p>
<input type="number" id="number" name="amount" placeholder="Quantity" >
<button class="button_1" onclick="addtocart('Google Pixel 2', '$649')">Add To Cart</button>
</div>
</div>
<div class="card">
<a href="view_product_details.html"><img src="img/gpixel3r.png" class="cardimg"></a>
<div class="text-center cardbody" >
<h3 id="productname" data-name="Google Pixel 2">Google Pixel 3</h3>
<p>The Pixel 3 is the latest causality. Wireless charging is.. </p>
<p>Quantity: 3</p>
<p id="productamount">Price: $649</p>
<input type="number" id="number" name="amount" placeholder="Quantity" >
<button class="button_1" onclick="addtocart('Google Pixel 2', '$649')">Add To Cart</button>
</div>
</div>
<div class="card">
<a href="view_product_details.html"><img src="img/iphonexs.png" class="cardimg"></a>
<div class="text-center cardbody" >
<h3 id="productname" data-name="Google Pixel 2">Iphone XS</h3>
<p>The iPhone XS display has rounded corners that... </p>
<p>Quantity: 3</p>
<p id="productamount">Price: $1500</p>
<input type="number" id="number" name="amount" placeholder="Quantity" >
<button class="button_1" onclick="addtocart('Google Pixel 2', '$649')">Add To Cart</button>
</div>
</div>
<div class="card">
<a href="view_product_details.html"><img src="img/iphonex.png" class="cardimg"></a>
<div class="text-center cardbody" >
<h3 id="productname" data-name="Google Pixel 2">IPhone X</h3>
<p>The phone comes with a 5.80-inch touchscreen display </p>
<p>Quantity: 3</p>
<p id="productamount">Price: $890</p>
<input type="number" id="number" name="amount" placeholder="Quantity" >
<button class="button_1" onclick="addtocart('Google Pixel 2', '$649')">Add To Cart</button>
</div>
</div>
<div class="card">
<a href="view_product_details.html"><img src="img/gpixel2.jpg" class="cardimg"></a>
<div class="text-center cardbody" >
<h3 id="productname" data-name="Google Pixel 2">Google Pixel 2</h3>
<p>The Google Pixel 2 is powered by 1.9GHz octa-core </p>
<p>Quantity: 3</p>
<p id="productamount">Price: $649</p>
<input type="number" id="number" name="amount" placeholder="Quantity" >
<button class="button_1" onclick="addtocart('Google Pixel 2', '$649')">Add To Cart</button>
</div>
</div>
<div class="card">
<a href="view_product_details.html"><img src="img/gpixel3r.png" class="cardimg"></a>
<div class="text-center cardbody" >
<h3 id="productname" data-name="Google Pixel 2">Google Pixel 3</h3>
<p>The Pixel 3 is the latest causality. Wireless charging is.. </p>
<p>Quantity: 3</p>
<p id="productamount">Price: $649</p>
<input type="number" id="number" name="amount" placeholder="Quantity" >
<button class="button_1" onclick="addtocart('Google Pixel 2', '$649')">Add To Cart</button>
</div>
</div>
<div class="card">
<a href="view_product_details.html"><img src="img/iphonexs.png" class="cardimg"></a>
<div class="text-center cardbody" >
<h3 id="productname" data-name="Google Pixel 2">Iphone XS</h3>
<p>The iPhone XS display has rounded corners that... </p>
<p>Quantity: 3</p>
<p id="productamount">Price: $1500</p>
<input type="number" id="number" name="amount" placeholder="Quantity" >
<button class="button_1" onclick="addtocart('Google Pixel 2', '$649')">Add To Cart</button>
</div>
</div>
<div class="card">
<a href="view_product_details.html"><img src="img/iphonex.png" class="cardimg"></a>
<div class="text-center cardbody" >
<h3 id="productname" data-name="Google Pixel 2">IPhone X</h3>
<p>The phone comes with a 5.80-inch touchscreen display </p>
<p>Quantity: 3</p>
<p id="productamount">Price: $890</p>
<input type="number" id="number" name="amount" placeholder="Quantity" >
<button class="button_1" onclick="addtocart('Google Pixel 2', '$649')">Add To Cart</button>
</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>