Skip to content

Commit af15629

Browse files
shaialtshaialt
committed
search
1 parent 2dd7e52 commit af15629

4 files changed

Lines changed: 53 additions & 51 deletions

File tree

โ€Žclient/pages/login.htmlโ€Ž

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
<section class="log_in_box_wallpaper">
4848
<div class="log_in_glass_box">
4949
<div class="log_in_box">
50-
<form action="login.html" method="post">
50+
<form action="login.html" method="get">
5151
<div class="log_in">
5252
<h1>Sign in</h1>
5353

@@ -63,12 +63,12 @@ <h1>Sign in</h1>
6363
<p>Or use your email for password</p>
6464

6565
<div class="log_in_input_box">
66-
<input id="email" type="email" required><br>
66+
<input id="email" type="email" name="email" required><br>
6767
<label for="email">Email</label>
6868
</div>
6969

7070
<div class="log_in_input_box">
71-
<input id="password" type="password" required><br>
71+
<input id="password" type="password" name="password" required><br>
7272
<label for="password">Password</label>
7373
</div>
7474

@@ -78,7 +78,7 @@ <h1>Sign in</h1>
7878
</div>
7979
</form>
8080

81-
<form action="login.html" method="post">
81+
<form action="login.html" method="get">
8282
<div class="sign_up">
8383
<h1>Create Account</h1>
8484

@@ -94,17 +94,17 @@ <h1>Create Account</h1>
9494
<p>Or use your email for registration</p>
9595

9696
<div class="log_in_input_box">
97-
<input id="name" type="text" required><br>
97+
<input id="name" type="text" name="name" required><br>
9898
<label for="name">Username</label>
9999
</div>
100100

101101
<div class="log_in_input_box">
102-
<input id="email" type="email" required><br>
102+
<input id="email" type="email" name="email" required><br>
103103
<label for="email">Email</label>
104104
</div>
105105

106106
<div class="log_in_input_box">
107-
<input id="password" type="password" required><br>
107+
<input id="password" type="password" name="password" required><br>
108108
<label for="password">Password</label>
109109
</div>
110110

โ€Žclient/public/data/users.jsonโ€Ž

Whitespace-only changes.

โ€Žclient/src/main.cssโ€Ž

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,8 @@ header {
430430
}
431431

432432
.a_nav {
433-
color: white;
433+
color: goldenrod;
434+
text-shadow: #000 1px 2px 2px;
434435
text-decoration: none;
435436
font-weight: bold;
436437
}

โ€Žclient/src/main.jsโ€Ž

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -254,9 +254,9 @@ document.addEventListener('DOMContentLoaded', () => {
254254
let filteredProducts = []; // ื”ื’ื“ืจื” ื‘ื—ื•ืฅ
255255

256256
// ื˜ื™ืคื•ืœ ื‘ืœื—ื™ืฆื” ืขืœ Enter
257-
search.addEventListener('keypress', function(e) {
258-
if (e.key === 'Enter') {
259-
e.preventDefault();
257+
search.addEventListener('keypress', function(event) {
258+
if (event.key === 'Enter') {
259+
event.preventDefault();
260260
if (filteredProducts.length > 0) {
261261
// ืฉืžื™ืจืช ืชื•ืฆืื•ืช ื”ื—ื™ืคื•ืฉ ื‘-localStorage
262262
localStorage.setItem('searchResults', JSON.stringify(filteredProducts));
@@ -278,8 +278,9 @@ document.addEventListener('DOMContentLoaded', () => {
278278
console.log('Filtered products:', filteredProductsNames);
279279
}
280280

281+
// ื™ืฆื™ืจืช ืชื™ื‘ืช ื”ืฆืขื•ืช
281282
if (filteredProducts.length > 0) {
282-
let suggestionsBox = document.createElement('div');
283+
const suggestionsBox = document.createElement('div');
283284
suggestionsBox.classList.add('suggestions_box');
284285
suggestionsBox.style.width = '100%';
285286
suggestionsBox.style.height = 'auto';
@@ -290,54 +291,57 @@ document.addEventListener('DOMContentLoaded', () => {
290291
suggestionsBox.style.left = '0';
291292
suggestionsBox.style.zIndex = '997';
292293
suggestionsBox.style.border = '1px solid #601E1E';
293-
suggestionsBox.style.borderTop = '3px solid white';
294+
suggestionsBox.style.borderTop = '1px solid white';
294295
suggestionsBox.style.borderBottomLeftRadius = '6px';
295296
suggestionsBox.style.borderBottomRightRadius = '6px';
296297
suggestionsBox.style.overflowY = 'auto';
297298
suggestionsBox.style.opacity = '0'; // Start hidden
298299
suggestionsBox.style.transform = 'translateY(-10px)'; // Start slightly above
300+
suggestionsBox.style.scrollbarWidth = 'thin';
299301

300302
// Add transition for smooth animation
301303
suggestionsBox.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
302304

303305
// ื”ื•ืกืคืช ื”ืชื•ืฆืื•ืช ืœืชื™ื‘ื”
304-
filteredProducts.forEach(product => {
305-
const suggestion = document.createElement('div');
306-
suggestion.style.padding = '10px';
307-
suggestion.style.borderBottom = '1px solid #eee';
308-
suggestion.style.cursor = 'pointer';
309-
suggestion.style.display = 'flex';
310-
suggestion.style.alignItems = 'center';
311-
suggestion.style.justifyContent = 'space-between';
312-
313-
// ื™ืฆื™ืจืช ืชื™ื‘ื” ืœื˜ืงืกื˜
314-
const textDiv = document.createElement('div');
315-
textDiv.textContent = product.name;
316-
textDiv.style.flex = '1';
317-
318-
// ื™ืฆื™ืจืช ืชืžื•ื ื” ืžืžื•ื–ืขืจืช
319-
const thumbnailImg = document.createElement('img');
320-
thumbnailImg.src = product.image;
321-
thumbnailImg.style.width = '40px';
322-
thumbnailImg.style.height = '40px';
323-
thumbnailImg.style.objectFit = 'cover';
324-
thumbnailImg.style.marginLeft = '10px';
325-
thumbnailImg.style.borderRadius = '4px';
326-
327-
// ื”ื•ืกืคืช ืื™ืจื•ืข ืœื—ื™ืฆื” ืœื›ืœ ื”ืฆืขื”
328-
suggestion.addEventListener('click', () => {
329-
const urlParams = new URLSearchParams();
330-
urlParams.append('category', product.category);
331-
urlParams.append('id', product.id);
332-
urlParams.append('name', product.name);
333-
window.location.href = `pages/product.html?${urlParams.toString()}`;
334-
});
306+
filteredProducts.forEach(product => {
307+
const suggestion = document.createElement('div');
308+
suggestion.style.padding = '10px';
309+
suggestion.style.borderBottom = '1px solid #eee';
310+
suggestion.style.cursor = 'pointer';
311+
suggestion.style.display = 'flex';
312+
suggestion.style.alignItems = 'center';
313+
suggestion.style.justifyContent = 'space-between';
314+
315+
// ื”ื•ืกืคืช ืฉื ื”ืžื•ืฆืจ
316+
const textDiv = document.createElement('div');
317+
textDiv.textContent = product.name;
318+
textDiv.style.flex = '1';
319+
320+
// ื™ืฆื™ืจืช ืชืžื•ื ื” ืžืžื•ื–ืขืจืช
321+
const thumbnailImg = document.createElement('img');
322+
thumbnailImg.src = product.image;
323+
thumbnailImg.alt = product.name;
324+
thumbnailImg.style.width = '40px';
325+
thumbnailImg.style.height = '40px';
326+
thumbnailImg.style.objectFit = 'cover';
327+
thumbnailImg.style.marginLeft = '10px';
328+
thumbnailImg.style.borderRadius = '4px';
329+
330+
// ื”ื•ืกืคืช ืื™ืจื•ืข ืœื—ื™ืฆื” ืœื›ืœ ื”ืฆืขื”
331+
suggestion.addEventListener('click', () => {
332+
const urlParams = new URLSearchParams();
333+
urlParams.append('category', product.category);
334+
urlParams.append('id', product.id);
335+
urlParams.append('name', product.name);
336+
window.location.href = `pages/product.html?${urlParams.toString()}`;
337+
});
335338

336-
suggestion.appendChild(textDiv);
337-
suggestion.appendChild(thumbnailImg);
338-
suggestionsBox.appendChild(suggestion);
339-
});
339+
suggestion.appendChild(textDiv);
340+
suggestion.appendChild(thumbnailImg);
341+
suggestionsBox.appendChild(suggestion);
342+
});
340343

344+
// ื”ื•ืกืคืช ืชื™ื‘ืช ื”ื”ืฆืขื•ืช ืœืžื™ื›ืœ ื”ื—ื™ืคื•ืฉ
341345
const container = document.querySelector('.welcome_animation_box');
342346
if (container) {
343347
container.style.position = 'relative';
@@ -348,9 +352,6 @@ document.addEventListener('DOMContentLoaded', () => {
348352
suggestionsBox.style.transform = 'translateY(0)'; // Move down to original position
349353
});
350354
}
351-
352-
document.querySelector('.welcome_animation_box').style.borderBottomLeftRadius = '0px !important';
353-
document.querySelector('.welcome_animation_box').style.borderBottomRightRadius = '0px !important';
354355
}
355356
});
356357
})

0 commit comments

Comments
ย (0)