Skip to content

Commit 877177b

Browse files
yehiarasheedyehiarasheed
committed
Added Hint Pop-ups for both Login Panels in order to make the website more user-friendly for first-time visitors.
1 parent 0fc3cd1 commit 877177b

File tree

4 files changed

+178
-60
lines changed

4 files changed

+178
-60
lines changed

‎WebApplication2/Customer/Pages/CustomerComponent.aspx

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -312,65 +312,65 @@
312312
color: #e0e0e0;
313313
}
314314
315-
/* General dropdown styles */
316-
.styled-dropdown {
317-
width: 300px;
318-
padding: 10px;
319-
font-size: 16px;
320-
background-color: #fff;
321-
color: #333;
322-
border: 1px solid #ccc;
323-
border-radius: 5px;
324-
appearance: none; /* Removes default arrow for consistency */
325-
-moz-appearance: none;
326-
-webkit-appearance: none;
327-
outline: none;
328-
cursor: pointer;
329-
transition: all 0.3s;
330-
}
331-
332-
.styled-dropdown:focus {
333-
border-color: #0078d4;
334-
box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
335-
}
336-
337-
/* Add custom arrow */
338-
.styled-dropdown {
339-
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23333" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/></svg>');
340-
background-repeat: no-repeat;
341-
background-position: right 10px center;
342-
background-size: 20px;
343-
}
344-
345-
body.dark-mode .styled-dropdown {
346-
background-color: #2b2b40;
347-
color: #f0f0f0;
348-
border: 1px solid #555;
349-
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23f0f0f0" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/></svg>');
350-
}
351-
352-
body.dark-mode .styled-dropdown:focus {
353-
border-color: #5d85ff;
354-
box-shadow: 0 0 5px rgba(93, 133, 255, 0.5);
355-
}
356-
357-
/* Placeholder style */
358-
.styled-dropdown option:first-child {
359-
color: #aaa;
360-
}
361-
362-
body.dark-mode .styled-dropdown option:first-child {
363-
color: #666;
364-
}
365-
366-
/* Optional hover effect */
367-
.styled-dropdown:hover {
368-
border-color: #0078d4;
369-
}
370-
371-
body.dark-mode .styled-dropdown:hover {
372-
border-color: #5d85ff;
373-
}
315+
/* General dropdown styles */
316+
.styled-dropdown {
317+
width: 300px;
318+
padding: 10px;
319+
font-size: 16px;
320+
background-color: #fff;
321+
color: #333;
322+
border: 1px solid #ccc;
323+
border-radius: 5px;
324+
appearance: none; /* Removes default arrow for consistency */
325+
-moz-appearance: none;
326+
-webkit-appearance: none;
327+
outline: none;
328+
cursor: pointer;
329+
transition: all 0.3s;
330+
}
331+
332+
.styled-dropdown:focus {
333+
border-color: #0078d4;
334+
box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
335+
}
336+
337+
/* Add custom arrow */
338+
.styled-dropdown {
339+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23333" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/></svg>');
340+
background-repeat: no-repeat;
341+
background-position: right 10px center;
342+
background-size: 20px;
343+
}
344+
345+
body.dark-mode .styled-dropdown {
346+
background-color: #2b2b40;
347+
color: #f0f0f0;
348+
border: 1px solid #555;
349+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23f0f0f0" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/></svg>');
350+
}
351+
352+
body.dark-mode .styled-dropdown:focus {
353+
border-color: #5d85ff;
354+
box-shadow: 0 0 5px rgba(93, 133, 255, 0.5);
355+
}
356+
357+
/* Placeholder style */
358+
.styled-dropdown option:first-child {
359+
color: #aaa;
360+
}
361+
362+
body.dark-mode .styled-dropdown option:first-child {
363+
color: #666;
364+
}
365+
366+
/* Optional hover effect */
367+
.styled-dropdown:hover {
368+
border-color: #0078d4;
369+
}
370+
371+
body.dark-mode .styled-dropdown:hover {
372+
border-color: #5d85ff;
373+
}
374374
375375
/* CTA Section */
376376
.cta-section {

‎WebApplication2/Customer/Pages/login.aspx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,38 @@
105105
.customer-login-link a:hover {
106106
text-decoration: underline;
107107
}
108+
109+
.hint-popup {
110+
position: fixed;
111+
bottom: 20px;
112+
right: 20px;
113+
width: 300px;
114+
background-color: #fff;
115+
border: 1px solid #ccc;
116+
border-radius: 10px;
117+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
118+
padding: 20px;
119+
z-index: 1000;
120+
display: none; /* Initially hidden */
121+
}
122+
123+
.hint-popup-content {
124+
position: relative;
125+
}
126+
127+
.close-btn {
128+
position: absolute;
129+
top: 1px;
130+
right: 10px;
131+
font-size: 20px;
132+
cursor: pointer;
133+
color: #333;
134+
}
135+
136+
.close-btn:hover {
137+
color: #ff0000;
138+
}
139+
108140
</style>
109141
</head>
110142
<body>
@@ -127,5 +159,33 @@
127159
<div class="customer-login-link">
128160
Are you an admin? <a href="/Pages/Login/Login.aspx">Go to admin login</a>
129161
</form>
162+
163+
<div id="hintPopup" class="hint-popup">
164+
<div class="hint-popup-content">
165+
<span class="close-btn" onclick="closePopup()">&times;</span>
166+
<p><strong>Hint:</strong> Use Mobile Number: <em>01234567890</em> and Password: <em>pass</em> to log in.</p>
167+
</div>
168+
</div>
169+
130170
</body>
171+
<script>
172+
// Function to show the pop-up
173+
function showPopup() {
174+
document.getElementById('hintPopup').style.display = 'block';
175+
}
176+
177+
// Function to close the pop-up
178+
function closePopup() {
179+
document.getElementById('hintPopup').style.display = 'none';
180+
sessionStorage.setItem('closedCustomerLogin', 'true');
181+
}
182+
183+
// Show the pop-up when the page loads
184+
window.onload = function () {
185+
// Check if the user is visiting for the first time in this session
186+
if (!sessionStorage.getItem('closedCustomerLogin')) {
187+
showPopup();
188+
}
189+
}
190+
</script>
131191
</html>

‎WebApplication2/Pages/Login/Login.aspx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,38 @@
100100
.customer-login-link a:hover {
101101
text-decoration: underline;
102102
}
103+
104+
.hint-popup {
105+
position: fixed;
106+
bottom: 20px;
107+
right: 20px;
108+
width: 300px;
109+
background-color: #fff;
110+
border: 1px solid #ccc;
111+
border-radius: 10px;
112+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
113+
padding: 20px;
114+
z-index: 1000;
115+
display: none; /* Initially hidden */
116+
}
117+
118+
.hint-popup-content {
119+
position: relative;
120+
}
121+
122+
.close-btn {
123+
position: absolute;
124+
top: 17px;
125+
right: 10px;
126+
font-size: 20px;
127+
cursor: pointer;
128+
color: #333;
129+
}
130+
131+
.close-btn:hover {
132+
color: #ff0000;
133+
}
134+
103135
</style>
104136
</head>
105137
<body>
@@ -118,6 +150,32 @@
118150
Are you a customer? <a href="/Customer/Pages/login.aspx">Go to customer login</a>
119151
</div>
120152

153+
<div id="hintPopup" class="hint-popup">
154+
<div class="hint-popup-content">
155+
<span class="close-btn" onclick="closePopup()">&times;</span>
156+
<p><strong>Hint:</strong> Use Admin ID: <em>58-12345</em> and Password: <em>admin</em> to log in.</p>
157+
</div>
158+
</div>
121159
</form>
122160
</body>
161+
<script>
162+
// Function to show the pop-up
163+
function showPopup() {
164+
document.getElementById('hintPopup').style.display = 'block';
165+
}
166+
167+
// Function to close the pop-up
168+
function closePopup() {
169+
document.getElementById('hintPopup').style.display = 'none';
170+
sessionStorage.setItem('closedAdmin', 'true');
171+
}
172+
173+
// Show the pop-up when the page loads
174+
window.onload = function () {
175+
// Check if the user is visiting for the first time in this session
176+
if (!sessionStorage.getItem('closedAdmin')) {
177+
showPopup();
178+
}
179+
}
180+
</script>
123181
</html>

‎WebApplication2/Pages/Login/Login.aspx.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ protected void LoginButton(object sender, EventArgs e)
1717
string password = txtPassword.Value;
1818

1919

20-
if ((username == "58-1034" && password == "1234") || (username == "58-25160" && password=="1234"))
20+
if ((username == "58-1034" && password == "1234") || (username == "58-25160" && password == "1234") || (username == "58-12345" && password == "admin"))
2121
{
2222
Response.Redirect("/Pages/Home/Home.aspx");
2323
}

0 commit comments

Comments
 (0)