-
Notifications
You must be signed in to change notification settings - Fork 1
/
addproduct.html
148 lines (132 loc) · 6.79 KB
/
addproduct.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Product</title>
<link rel="stylesheet" href="./adminPanelBasicStructionStyle.css">
<link rel="stylesheet" href="./addProductStyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<section class="headerContainer">
<header>
<div id="logo">
<div class="logoCircle"></div>
<span class="logoName"><span class="logoFirstName">Apni</span> <span class=" hideMenu">Dukan</span></span>
</div>
<div class="menuContainer">
<a href="./addproduct.html" class="menu" style="background-color: #F2F6FE;">
<div class="menuIcon"><img class="menuIcon" src="./addProductIcono.svg" alt=""></div>
<div class="menuoption hideMenu" >Add Product</div>
</a>
<a href="./deleteProduct.html" class="menu">
<div class="menuIcon"><img class="menuIcon" src="./deleteProductIcon.svg" alt=""></div>
<div class="menuoption hideMenu">Delete Product</div>
</a>
<a href="./Order Request.html" class="menu">
<div class="menuIcon"><img class="menuIcon" src="./deliveryProductIcon.svg" alt=""></div>
<div class="menuoption hideMenu">Orders Request</div>
</a>
<a href="./returnRequest.html" class="menu">
<div class="menuIcon"><img class="menuIcon" src="./returnProductIcon.svg" alt=""></div>
<div class="menuoption hideMenu">Return Request</div>
</a>
<div id="emptySpace"></div>
<a class="menu">
<div class="menuIcon"><img class="menuIcon" src="./adminAccountIcon.svg" alt=""></div>
<div class="menuoption hideMenu"><b>Account</b></div>
</a>
</div>
</header>
</section>
<section class="mainContainer">
<section class="greetingArea">
<span class="greetings">Welcome Back</span>
<nav onclick="hideNavigation()">
<img src="./menuIcon.svg" class="navBtnIcon" alt="">
</nav>
</section>
<main>
<form id="addProductForm" action="#" method="post" enctype="multipart/form-data">
<input type="file" id="fileInput" style="display:none" />
<label class="formElementCenter" for="fileInput">
<img src="./imageUpload.svg" alt="Upload Image" style="cursor:pointer" />
</label>
<input type="text" name="productName" id="productNameInput" placeholder="Product Name *">
<input type="text" name="productPrice" id="productPriceInput" placeholder="Product Price *">
<input type="text" name="productQuantity" id="productQuantityInput" placeholder="Product Name *">
<input type="text" name="chooseWarranty" id="chooseWarrantyInput" placeholder="Product Quantity *">
<span class="productDescriptionContainer">
<input type="text" name="productDescription[]" class="productDescriptionInput" placeholder="Product Description *">
<input type="button" onclick="addInputField(this)" value="+" id="addDescriptionBtn" class="addDescriptionBtn">
</span>
<span class="formElementCenter"><button type="submit" id="addProductBtn">Add Product</button></span>
</form>
</main>
</section>
<script>
function hideNavigation() {
// Toggle visibility of divs with the class 'menuoption hideMenu'
var divsToToggle = document.getElementsByClassName('hideMenu');
for (var i = 0; i < divsToToggle.length; i++) {
divsToToggle[i].style.display = divsToToggle[i].style.display === 'none' ? 'block' : 'none';
}
// Toggle grid-template-columns of the body tag
document.body.style.gridTemplateColumns = document.body.style.gridTemplateColumns === '7rem 1fr 1fr' ? '16.5rem 1fr 1fr' : '7rem 1fr 1fr';
// Toggle padding of the header element
var headerElement = document.querySelector('header');
var paddingTop = window.getComputedStyle(headerElement).paddingTop;
var paddingRight = window.getComputedStyle(headerElement).paddingRight;
var paddingBottom = window.getComputedStyle(headerElement).paddingBottom;
var paddingLeft = window.getComputedStyle(headerElement).paddingLeft;
// Assuming default browser font-size of 16px for rem to px conversion
if (paddingTop === '32px' && paddingRight === '16px' && paddingBottom === '16px' && paddingLeft === '16px') {
headerElement.style.padding = '2rem 1rem 1rem 0.3rem';
} else {
headerElement.style.padding = '2rem 1rem 1rem 1rem';
}
}
function checkDeviceAndHideNavigation() {
// Check if the screen width is less than or equal to 768px (common breakpoint for tablets and mobile devices)
if (window.matchMedia('(max-width: 830px)').matches) {
// If the screen is of a tablet or mobile, call the hideNavigation function
hideNavigation();
}
}
// Call the function on window resize and on initial load
window.addEventListener('resize', checkDeviceAndHideNavigation);
window.addEventListener('load', checkDeviceAndHideNavigation);
</script>
<script>
function addInputField(button) {
// Create a container span for the new input and button
var newContainer = document.createElement('span');
newContainer.className = 'productDescriptionContainer';
// Create a new input element for product description
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.name = 'productDescription[]';
newInput.placeholder = 'Product Description *';
newInput.className = 'productDescriptionInput';
// Create a new add button
var newAddButton = document.createElement('input');
newAddButton.type = 'button';
newAddButton.value = '+';
newAddButton.className = 'addDescriptionBtn';
newAddButton.id = 'addDescriptionBtn';
newAddButton.onclick = function() { addInputField(newAddButton); };
// Append the new input and button to the container span
newContainer.appendChild(newInput);
newContainer.appendChild(newAddButton);
// Insert the new container after the parent span of the button that was clicked
button.parentNode.parentNode.insertBefore(newContainer, button.parentNode.nextSibling);
}
</script>
</body>
</html>