Skip to content

Commit 5fe7d41

Browse files
TranHuuDat2004TranHuuDat2004
committed
add image
1 parent d9d7b7b commit 5fe7d41

1 file changed

Lines changed: 120 additions & 40 deletions

File tree

‎brickshop.html‎

Lines changed: 120 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
<style>
2323
body {
2424
cursor: none;
25-
/* Main custom cursor is handled by JS element */
2625
position: relative;
2726
}
2827

@@ -31,12 +30,10 @@
3130
input[type="submit"],
3231
.form-control {
3332
cursor: url('assets/hand_blue.png'), auto;
34-
/* Custom hand cursor for interactive elements */
3533
}
3634

37-
/* Custom Gradient for "Projects" Title */
3835
.text-gradient-purple-pink {
39-
background: -webkit-linear-gradient(315deg, #8A2BE2 0%, #FF69B4 100%); /* BlueViolet to HotPink */
36+
background: -webkit-linear-gradient(315deg, #8A2BE2 0%, #FF69B4 100%);
4037
background: linear-gradient(135deg, #8A2BE2 0%, #FF69B4 100%);
4138
-webkit-background-clip: text;
4239
-moz-background-clip: text;
@@ -48,72 +45,105 @@
4845

4946
.project-card {
5047
margin-bottom: 2.5rem;
51-
position: relative; /* For absolute positioning of the tag */
48+
position: relative;
5249
}
5350

54-
/* E-commerce Dev Tag/Ribbon */
5551
.project-category-tag-wrapper {
5652
position: absolute;
5753
top: 25px;
58-
left: -5px; /* Slightly overlap the card edge if card has no border, or adjust if it has border */
54+
left: -5px;
5955
z-index: 1;
6056
display: flex;
6157
align-items: stretch;
6258
}
6359
.project-category-tag-arrow {
6460
width: 15px;
6561
background-color: #0D6EFD;
66-
clip-path: polygon(100% 0%, 0% 50%, 100% 100%); /* Triangle pointing left */
67-
margin-right: -1px; /* Slight overlap to prevent gap */
62+
clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
63+
margin-right: -1px;
6864
}
6965
.project-category-tag-text {
7066
background-color: #0D6EFD;
7167
color: white;
7268
padding: 7px 12px 7px 10px;
73-
font-size: 0.8rem; /* Smaller font for the tag */
69+
font-size: 0.8rem;
7470
font-weight: bold;
7571
border-radius: 0 4px 4px 0;
7672
line-height: 1.2;
77-
text-transform: uppercase; /* As it appears in the image */
73+
text-transform: uppercase;
7874
}
7975

80-
8176
.tech-badge {
8277
margin-right: 0.4rem;
8378
margin-bottom: 0.4rem;
84-
font-size: 0.80em; /* Slightly smaller badges */
79+
font-size: 0.80em;
8580
padding: 0.4em 0.75em;
86-
border-radius: 10px; /* More rounded badges like image */
81+
border-radius: 10px;
8782
font-weight: 500;
88-
color: white; /* Default text color for badges */
89-
border: 1px solid transparent; /* For consistency */
83+
color: white;
84+
border: 1px solid transparent;
9085
}
91-
92-
.tech-badge.html5 { background-color: #0D6EFD; /* Blue */ }
93-
.tech-badge.css3 { background-color: #D63384; /* Pink */ }
94-
.tech-badge.bootstrap { background-color: #0DCAF0; color: #212529; /* Cyan, dark text */ }
95-
.tech-badge.javascript { background-color: #FFDA07; color: #212529; /* Yellow, dark text */ }
96-
.tech-badge.nodejs { background-color: #198754; /* Green */ }
97-
.tech-badge.mysql { background-color: #DC3545; /* Red */ }
86+
.tech-badge.html5 { background-color: #0D6EFD; }
87+
.tech-badge.css3 { background-color: #D63384; }
88+
.tech-badge.bootstrap { background-color: #0DCAF0; color: #212529; }
89+
.tech-badge.javascript { background-color: #FFDA07; color: #212529; }
90+
.tech-badge.nodejs { background-color: #198754; }
91+
.tech-badge.mysql { background-color: #DC3545; }
9892

9993
.feature-list {
100-
padding-left: 1.2rem;
94+
padding-left: 0; /* Remove default padding for list-unstyled */
10195
font-size: 0.95rem;
10296
}
103-
10497
.feature-list li {
10598
margin-bottom: 0.3rem;
10699
}
107100

108101
.project-card .card-body {
109-
padding-top: 2.5rem !important; /* Default p-5 is 3rem, adjust to slightly less overall */
102+
padding-top: 2.5rem !important;
110103
}
111104
.project-card-content-wrapper {
112-
padding-top: 35px; /* Space for the tag above the title */
105+
padding-top: 35px;
106+
}
107+
108+
/* Screenshot Table Styles */
109+
.screenshot-table-header {
110+
background-color: #f8f9fa; /* Light grey for headers */
111+
font-weight: 600;
112+
font-size: 0.85rem; /* Slightly smaller header text */
113+
padding: 0.6rem 0.5rem; /* Adjust padding */
114+
}
115+
.screenshot-table td {
116+
padding: 0.5rem; /* Padding around images */
117+
background-color: #fff;
118+
}
119+
.screenshot-img {
120+
max-height: 170px; /* Max height for screenshot */
121+
width: 100%;
122+
object-fit: contain; /* Scale image down to fit, preserving aspect ratio */
123+
border: 1px solid #e9ecef;
124+
border-radius: 0.25rem;
125+
}
126+
.screenshot-table-header.visually-hidden-empty,
127+
.screenshot-table td.visually-hidden-empty {
128+
/* Let table-bordered handle borders. Content is   */
129+
}
130+
.screenshot-table-header.visually-hidden-empty {
131+
background-color: #f8f9fa; /* Match other headers */
132+
}
133+
.screenshot-table td.visually-hidden-empty {
134+
background-color: #fff; /* Match other td */
135+
}
136+
137+
/* Underline style for screenshot section title */
138+
.underlined-heading {
139+
text-decoration: underline;
140+
text-decoration-color: #adb5bd; /* Softer underline color */
141+
text-underline-offset: 5px; /* Space between text and underline */
142+
text-decoration-thickness: 1px; /* Thinner underline */
113143
}
114144

115145

116-
/* Cursor styles (same as your original) */
146+
/* Cursor styles */
117147
.cursor-element {
118148
position: fixed;
119149
display: flex;
@@ -123,17 +153,14 @@
123153
opacity: 0;
124154
transition: opacity 0.3s ease-in-out;
125155
}
126-
127156
.cursor-element.visible {
128157
opacity: 1;
129158
}
130-
131159
.cursor-element img {
132160
width: 28px;
133161
height: auto;
134162
margin-right: 8px;
135163
}
136-
137164
.cursor-element .cursor-text {
138165
background-color: #0d6efd;
139166
color: white;
@@ -145,7 +172,6 @@
145172
opacity: 1;
146173
transition: opacity 0.3s ease-in-out;
147174
}
148-
149175
.cursor-element .cursor-text.fade-out {
150176
opacity: 0;
151177
}
@@ -188,13 +214,13 @@ <h1 class="display-5 fw-bolder mb-0"><span class="text-gradient-purple-pink d-in
188214
<div class="project-category-tag-arrow"></div>
189215
<div class="project-category-tag-text">E-commerce Dev</div>
190216
</div>
191-
<div class="card-body p-4"> <!-- Adjusted padding -->
192-
<div class="project-card-content-wrapper"> <!-- Wrapper for content below tag -->
217+
<div class="card-body p-4">
218+
<div class="project-card-content-wrapper">
193219
<h2 class="fw-bolder">BrickShop - Building Block Toy Paradise <span role="img" aria-label="brick emoji">🧱</span></h2>
194220
<p class="text-muted">Welcome to BrickShop, an e-commerce website project dedicated to providing creative building block toys from leading brands like Qman, Keeppley, and LEGO. Explore a world of creativity with diverse themes and a seamless shopping experience.</p>
195221

196222
<h5 class="mt-4 mb-3">Technology Stack:</h5>
197-
<div class="mb-4"> <!-- Wrapper for badges -->
223+
<div class="mb-4">
198224
<span class="badge tech-badge html5">HTML5</span>
199225
<span class="badge tech-badge css3">CSS3</span>
200226
<span class="badge tech-badge bootstrap">Bootstrap</span>
@@ -235,9 +261,65 @@ <h6 class="fw-semibold">For Administrators:</h6>
235261
</a>
236262
</p>
237263
<p class="mt-3"><small class="text-muted">License: CC BY-NC 4.0</small></p>
238-
</div>
239-
</div>
240-
</div>
264+
265+
<!-- CUSTOMER INTERFACE SCREENSHOTS SECTION -->
266+
<hr class="my-4">
267+
<h5 class="mb-3 fw-semibold underlined-heading">Customer Interface (Bootstrap) Screenshots</h5>
268+
<p class="small text-muted mb-3">Note: Ensure screenshot images are placed in <code>assets/screenshots/</code> directory with correct names.</p>
269+
<div class="table-responsive mt-2">
270+
<table class="table table-bordered align-middle text-center screenshot-table">
271+
<tbody>
272+
<tr>
273+
<th scope="col" class="screenshot-table-header">Home Page</th>
274+
<th scope="col" class="screenshot-table-header">LEGO Introduction</th>
275+
<th scope="col" class="screenshot-table-header">Qman Introduction</th>
276+
</tr>
277+
<tr>
278+
<td><img src="assets/screenshots/customer-home.png" alt="BrickShop Home Page" class="img-fluid screenshot-img"></td>
279+
<td><img src="assets/screenshots/customer-lego-intro.png" alt="BrickShop LEGO Introduction" class="img-fluid screenshot-img"></td>
280+
<td><img src="assets/screenshots/customer-qman-intro.png" alt="BrickShop Qman Introduction" class="img-fluid screenshot-img"></td>
281+
</tr>
282+
283+
<tr>
284+
<th scope="col" class="screenshot-table-header">Keeppley Introduction</th>
285+
<th scope="col" class="screenshot-table-header">Products Page</th>
286+
<th scope="col" class="screenshot-table-header">Product Detail Page</th>
287+
</tr>
288+
<tr>
289+
<td><img src="assets/screenshots/customer-keeppley-intro.png" alt="BrickShop Keeppley Introduction" class="img-fluid screenshot-img"></td>
290+
<td><img src="assets/screenshots/customer-products-page.png" alt="BrickShop Products Page" class="img-fluid screenshot-img"></td>
291+
<td><img src="assets/screenshots/customer-product-detail.png" alt="BrickShop Product Detail Page" class="img-fluid screenshot-img"></td>
292+
</tr>
293+
294+
<tr>
295+
<th scope="col" class="screenshot-table-header">Account Settings - Info</th>
296+
<th scope="col" class="screenshot-table-header">Account Settings - Avatar</th>
297+
<th scope="col" class="screenshot-table-header">Account Settings - Social Links</th>
298+
</tr>
299+
<tr>
300+
<td><img src="assets/screenshots/customer-settings-info.png" alt="BrickShop Account Settings - Info" class="img-fluid screenshot-img"></td>
301+
<td><img src="assets/screenshots/customer-settings-avatar.png" alt="BrickShop Account Settings - Avatar" class="img-fluid screenshot-img"></td>
302+
<td><img src="assets/screenshots/customer-settings-social.png" alt="BrickShop Account Settings - Social Links" class="img-fluid screenshot-img"></td>
303+
</tr>
304+
305+
<tr>
306+
<th scope="col" class="screenshot-table-header">Order Detail</th>
307+
<th scope="col" class="screenshot-table-header visually-hidden-empty"> </th> <!-- Placeholder for 2nd header cell -->
308+
<th scope="col" class="screenshot-table-header visually-hidden-empty"> </th> <!-- Placeholder for 3rd header cell -->
309+
</tr>
310+
<tr>
311+
<td><img src="assets/screenshots/customer-order-detail.png" alt="BrickShop Order Detail" class="img-fluid screenshot-img"></td>
312+
<td class="visually-hidden-empty"> </td> <!-- Placeholder for 2nd image cell -->
313+
<td class="visually-hidden-empty"> </td> <!-- Placeholder for 3rd image cell -->
314+
</tr>
315+
</tbody>
316+
</table>
317+
</div>
318+
<!-- END CUSTOMER INTERFACE SCREENSHOTS SECTION -->
319+
320+
</div> <!-- End of project-card-content-wrapper -->
321+
</div> <!-- End of card-body -->
322+
</div> <!-- End of project-card -->
241323
</div>
242324
</div>
243325
</div>
@@ -332,8 +414,6 @@ <h6 class="fw-semibold">For Administrators:</h6>
332414
updateCursorPosition(e.clientX, e.clientY);
333415
});
334416

335-
// IMPORTANT: .project-card is REMOVED from this list
336-
// The custom text cursor will NOT hide when hovering over .project-card
337417
const interactiveElements = document.querySelectorAll('a, button, input[type="submit"], .form-control');
338418

339419
interactiveElements.forEach(el => {

0 commit comments

Comments
 (0)