-
Notifications
You must be signed in to change notification settings - Fork 1
/
deleteProduct.html
137 lines (127 loc) · 6.77 KB
/
deleteProduct.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delete Product</title>
<link rel="stylesheet" href="./adminPanelBasicStructionStyle.css">
<link rel="stylesheet" href="./deleteProductStyle.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" >
<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" style="background-color: #F2F6FE;">
<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>
<div class="card">
<div class="productImgContainer"><img class="productImage" src="./Apple iPhone 14.webp" alt=""></div>
<p class="productName">Apple iPhone 13 (Blue, 128gb)</p>
<div class="rating"><img src="./rateStar.svg" alt="rating"><span>(123)</span></div>
<p>₹45,000 only</p>
<div class="deleteButtonContainer"><button class="deleteBtnStyle">Delete</button></div>
</div>
<div class="card">
<div class="productImgContainer"><img class="productImage" src="./OnePlus Nord CE 3 Lite 5G (Pastel Lime, 128 GB) (8 GB RAM).webp" alt=""></div>
<p class="productName">OnePlus Nord CE 3 Lite 5G </p>
<div class="rating"><img src="./rateStar.svg" alt="rating"><span>(123)</span></div>
<p>₹45,000 only</p>
<div class="deleteButtonContainer"><button class="deleteBtnStyle">Delete</button></div>
</div>
<div class="card">
<div class="productImgContainer"><img class="productImage" src="./POCO M6 Pro 5G.webp" alt=""></div>
<p class="productName">POCO M6 Pro 5G (Blue, 128gb)</p>
<div class="rating"><img src="./rateStar.svg" alt="rating"><span>(123)</span></div>
<p>₹45,000 only</p>
<div class="deleteButtonContainer"><button class="deleteBtnStyle">Delete</button></div>
</div>
<div class="card">
<div class="productImgContainer"><img class="productImage" src="./SAMSUNG Galaxy S23 Ultra 5G.webp" alt=""></div>
<p class="productName">SAMSUNG Galaxy S23 Ultra 5G</p>
<div class="rating"><img src="./rateStar.svg" alt="rating"><span>(123)</span></div>
<p>₹45,000 only</p>
<div class="deleteButtonContainer"><button class="deleteBtnStyle">Delete</button></div>
</div>
<div class="card">
<div class="productImgContainer"><img class="productImage" src="./vivo t3 5g.webp" alt=""></div>
<p class="productName">Vivo t3 5g</p>
<div class="rating"><img src="./rateStar.svg" alt="rating"><span>(123)</span></div>
<p>₹45,000 only</p>
<div class="deleteButtonContainer"><button class="deleteBtnStyle">Delete</button></div>
</div>
</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>
</body>
</html>