This HTML structure represents a dynamic web page for adding new stock items, designed with Bootstrap, Semantic-UI, and custom CSS. It features a vertical navigation bar with links to various pages such as Dashboard, Bill, View Stocks, and Add Stock, making it a user-friendly admin interface. The page includes a form where users can enter stock details like item number, ID, name, category, brand, size, amount, quantity, stock date, and time. The design is responsive, includes a toggleable sidebar, and has a cloneable table row feature for adding multiple items efficiently.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Custom CSS-->
<link rel="stylesheet" href="/css/style.css">
<!--Semantic-UI CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Add New Stock</title>
</head>
<body>
<!--Vertical Navbar-->
<div class="vertical-nav bg-white" id="sidebar">
<div class="py-4 px-3 mb-4" style="background: linear-gradient(to top, #00FF7F 0%, #ff8ab3 68%);">
<div class="media d-flex align-items-center"><img src="/css/admin.svg" alt="..." width="65" class="mr-3 rounded-circle img-thumbnail shadow-sm">
 <div class="media-body">
<h4 class="m-0"><p class="text-white">Hubuk Garments</h4>
<p class="font-weight-light text-white mb-0"></p>
</div>
</div>
</div>
<form action="/logout?_method=DELETE" method="POST">
<center><button type="submit" class="btn btn-danger" ><p class="text-white">Log Out</p></button></center>
</form>
<h5 class="ui horizontal divider header text-primary">
MAIN
</h5>
<ul class="nav flex-column bg-white mb-0">
<li class="nav-item">
<a href="/" class="nav-link text-dark font-italic">
<i class="home icon"></i>
Dashboard
</a>
</li>
<li class="nav-item">
<a href="/bill" class="nav-link text-dark font-italic">
<i class="rupee sign icon"></i>
Bill
</a>
</li>
<li class="nav-item">
<a href="/orders" class="nav-link text-dark font-italic">
<i class="eye icon"></i>
View Orders
</a>
</li>
<li class="nav-item">
<a href="/viewstocks" class="nav-link text-dark font-italic">
<i class="tags icon"></i>
View Stocks
</a>
</li>
<li class="nav-item">
<a href="/stocks" class="nav-link text-dark font-italic" style="background: linear-gradient(to right, #00FF7F 0%, #ff8ab3 68%);">
<p class="text-white"><i class="plus circle icon"></i>
Add Stock
</p>
</a>
</li>
</ul>
<h5 class="ui horizontal divider header text-primary">
CUSTOMIZE
</h5>
<ul class="nav flex-column bg-white mb-0">
<!-- <li class="nav-item">
<a href="/stocks" class="nav-link text-dark font-italic">
<i class="fa fa-area-chart mr-3 text-primary fa-fw"></i>
Add Stock
</a>
</li> -->
<li class="nav-item">
<a href="/brands" class="nav-link text-dark font-italic">
<i class="yelp icon"></i>
Brand
</a>
</li>
<li class="nav-item">
<a href="/categories" class="nav-link text-dark font-italic">
<i class="bookmark icon"></i>
Category
</a>
</li>
<li class="nav-item">
<a href="/sizes" class="nav-link text-dark font-italic">
<i class="check square icon"></i>
Size
</a>
</li>
</ul>
<h5 class="ui horizontal divider header text-primary">
FILTERS
</h5>
<ul class="nav flex-column bg-white mb-0">
<li class="nav-item">
<a href="/sales_filter" class="nav-link text-dark font-italic">
<i class="yelp icon"></i>
Sales
</a>
</li>
<li class="nav-item">
<a href="/stock_filter" class="nav-link text-dark font-italic">
<i class="bookmark icon"></i>
Stock
</a>
</li>
</ul>
</div>
<!-- End vertical navbar -->
<!-- Page content holder -->
<div class="page-content p-5" id="content" style="background: linear-gradient(to right, #90EE90 47%, #FFB385 68%);">
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4"><i class="align justify icon"></i><small class="text-uppercase font-weight-bold">Menu</small></button>
<!-- Page content -->
<h1>Add New Stock</h1>
<br>
<center><img class="ui medium rounded image" src="/css/addstock.svg"></center>
<br>
<center><span class="btn btn-lg btn-primary btn_row_add_below_end">Add New Item <i class="plus circle icon"></i></span></center>
<br>
<br>
<div class="ui fluid container">
<form action="/stocks/submitstock" method="POST">
<table class="ui inverted pink celled table tbl_code_with_mark" id="myTable">
<thead>
<tr style="background: linear-gradient(to left, #00FF7F 0%, #ff8ab3 68%);">
<th>Item No.</th>
<th>Item ID</th>
<th>Item Name</th>
<th>Category</th>
<th>Brand</th>
<th>Size</th>
<th>Amount</th>
<th>Qty</th>
<th>Stock Date</th>
<th>Stock Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-info"><center><input type="text" id="number1" value=1 name="number1" style="border:0;outline:0" size="4"/></center></td>
<td class="table-danger">
<div class="form-floating">
<input type="text" class="form-control" id="itemid1" name="ItemID" required>
<label for="floatingInput">Item ID</label>
</div>
</td>
<td class="table-primary">
<div class="form-floating">
<input type="text" class="form-control" id="itemname1" name="ItemName" required>
<label for="floatingInput">Item Name</label>
</div>
</td>
<td class="table-warning">
<div class="form-floating">
<select class="form-select" aria-label="Default select example" name="Category" id="category1" required>
<% category.forEach(function(order){ %>
<option name="<%= order.Category %>" value="<%= order.Category %>"><%= order.Category %></option>
<% }); %>
</select>
<label for="floatingInput">Category</label>
</div>
</td>
<td class="table-warning">
<div class="form-floating">
<select class="form-select" aria-label="Default select example" name="Brand" id="brand1" required>
<% brand.forEach(function(order){ %>
<option value="<%= order.Brand %>"><%= order.Brand %></option>
<% }); %>
</select>
<label for="floatingInput">Brand</label>
</div>
</td>
<td class="table-warning">
<div class="form-floating">
<select class="form-select" aria-label="Default select example" name="Size" id="size1" required>
<% size.forEach(function(order){ %>
<option value="<%= order.Size %>"><%= order.Size %></option>
<% }); %>
</select>
<label for="floatingInput">Size</label>
</div>
</td>
<td class="table-success">
<div class="form-floating">
<input type="number" class="form-control" name="Amount" placeholder="Enter Amount" value=0 id="amount1" required>
<label for="floatingInput">Amount</label>
</div>
</td>
<td class="table-success">
<div class="form-floating">
<input type="number" class="form-control" name="quantity" id="quantity" min="1" placeholder="Enter Quantity" required>
<label for="quantity">Qty</label>
</div>
</td>
<td class="table-success">
<div class="form-floating">
<input type="date" class="form-control" name="StockDate" id="stockDate" required>
<label for="floatingInput">Stock Date</label>
</div>
</td>
<td class="table-success">
<div class="form-floating">
<input type="time" class="form-control" name="StockTime" id="stockTime" required>
<label for="floatingInput">Stock Time</label>
</div>
</td>
</tr>
</tbody>
</table>
<center><button type="submit" class="ui teal submit button">Submit</button></center>
</form>
</div>
</div>
<div class="page-content p-5" id="content" style="background: linear-gradient(to right, #e9edf1 47%, #ff8ab3 100%);
">
</div>
<div class="page-content p-5" id="content" style="background: linear-gradient(to right, #e9edf1 47%, #ff8ab3 100%);
"></div>
<!-- Semnatic-UI Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script>
$(document).ready(function($)
{
//--->add row at the end > start
$(document).on('click',".btn_row_add_below_end", function(e)
{
var tableBody = $(document).find('.tbl_code_with_mark').find("tbody");
var trLast = tableBody.find("tr:last");
var trNew = trLast.clone();
var x = document.getElementById('myTable');
var len = x.rows.length;
console.log(No. of rows = ${len})
trLast.after(trNew);
// trNew[0].getElementsByTagName('num').textContent = len;
// var value = parseInt(document.getElementById('number').value, 10);
// console.log(value);
// value = isNaN(value) ? 0 : value;
// console.log(value);
// value++;
// console.log(value);
// document.getElementById('number').value = value;
// console.log(ele)
// ele.innerHTML.text = len;
// console.log(ele.innerHTML.text)
// trNew[0].getElementById('num').textContent = len;
var inputs = document.getElementsByTagName("input");
var flag1=flag2=1;
for (var i = 0; i < inputs.length; i++) {
// console.log(Before value = ${tables[i].innerText})
// tables[i].value = (i+1).toString()
// tables[i].value = i + 1
// console.log(tables[i].valueAsNumber)
inputs[i].id = (inputs[i].id).replace(/\d+/g, '')
inputs[i].name = (inputs[i].name).replace(/\d+/g, '')
inputs[i].id = inputs[i].id + (flag1).toString();
inputs[i].name = inputs[i].name + (flag1).toString();
if(flag2%4==0)
{
flag1++;
}
flag2++;
// console.log((tables[i].innerHTML).id)
}
var count = 0
for (var i = 0; i < inputs.length; i++) {
if((inputs[i].id).includes("number")){
// console.log(Item Name = ${inputs[i]})
// console.log(Before value = ${inputs[i].value})
inputs[i].value = count + 1
// console.log(After value = ${inputs[i].value})
count++;
}
}
for (var i = 0; i < inputs.length; i++) {
if((inputs[i].id).includes(len.toString()) && !((inputs[i].id).includes("number")) ){
inputs[i].value = ""
inputs[i].innerText = ""
}
}
console.log(inputs)
selects = document.getElementsByTagName("select");
var flag1=flag2=1;
for (var i = 0; i < selects.length; i++) {
selects[i].id = (selects[i].id).replace(/\d+/g, '')
selects[i].name= (selects[i].name).replace(/\d+/g, '')
selects[i].id = selects[i].id + (flag1).toString()
selects[i].name = selects[i].name + (flag1).toString();
if(flag2%3==0)
{
flag1++;
}
flag2++;
}
console.log(selects)
});
});
</script>
<script>
$(function() {
// Sidebar toggle behavior
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
});
});
document.getElementById('stockDate').value = new Date().toDateString()
document.getElementById('stockTime').value = new Date().toTimeString().split(' ')[0].slice(0, 5);
//generate time and date automatic
window.onload = function() {
// Get the current date and time
const now = new Date();
// Set the current date in YYYY-MM-DD format
const date = now.toISOString().split('T')[0];
document.getElementById('stockDate').value = date;
// Set the current time in HH:MM format
const time = now.toTimeString().split(' ')[0].slice(0, 5);
document.getElementById('stockTime').value = time;
};
</script>
</body>
</html>
Comments
Post a Comment