Skip to content

Commit 231836c

Browse files
anujsharma8danujsharma8d
committed
fix: merge duplicate project statistics sections
1 parent 7cdc45c commit 231836c

3 files changed

Lines changed: 14 additions & 311 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 0 additions & 257 deletions
Original file line numberDiff line numberDiff line change
@@ -7214,260 +7214,3 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
72147214
}
72157215

72167216
}
7217-
7218-
/* ============================================
7219-
PROJECT STATISTICS DASHBOARD
7220-
============================================ */
7221-
7222-
.stats-dashboard-section {
7223-
padding: 3rem 0 1.5rem 0;
7224-
position: relative;
7225-
}
7226-
7227-
/* Dashboard Title - Styled like TRACK-ROUTE badge */
7228-
.stats-dashboard-section .section-header {
7229-
margin-bottom: 2rem;
7230-
text-align: center;
7231-
}
7232-
7233-
.stats-dashboard-section .section-heading {
7234-
font-family: var(--font-sans);
7235-
font-size: clamp(1.5rem, 4vw, 2.75rem);
7236-
font-weight: 800;
7237-
line-height: 1.05;
7238-
letter-spacing: -0.04em;
7239-
display: inline-flex;
7240-
align-items: center;
7241-
justify-content: center;
7242-
gap: 0.75rem;
7243-
position: relative;
7244-
margin: 0 auto;
7245-
background: linear-gradient(135deg, var(--accent), #06b6d4);
7246-
-webkit-background-clip: text;
7247-
-webkit-text-fill-color: transparent;
7248-
background-clip: text;
7249-
text-transform: uppercase;
7250-
padding-bottom: 8px;
7251-
}
7252-
7253-
.stats-dashboard-section .section-heading::after {
7254-
content: '';
7255-
position: absolute;
7256-
bottom: -4px;
7257-
left: 50%;
7258-
transform: translateX(-50%);
7259-
width: 80%;
7260-
height: 4px;
7261-
border-radius: 2px;
7262-
background: linear-gradient(90deg, transparent, var(--accent), #06b6d4, transparent);
7263-
opacity: 0.8;
7264-
box-shadow: 0 0 12px var(--accent-glow);
7265-
transition: width 0.3s ease;
7266-
}
7267-
7268-
.stats-dashboard-section .section-heading:hover::after {
7269-
width: 100%;
7270-
}
7271-
7272-
.stats-dashboard-section .section-heading .heading-icon {
7273-
font-size: 1.8rem;
7274-
line-height: 1;
7275-
-webkit-text-fill-color: initial;
7276-
background: none;
7277-
}
7278-
7279-
.stats-dashboard-section .section-heading .heading-text {
7280-
background: linear-gradient(135deg, var(--accent), #06b6d4);
7281-
-webkit-background-clip: text;
7282-
-webkit-text-fill-color: transparent;
7283-
background-clip: text;
7284-
}
7285-
7286-
/* Stats Grid */
7287-
.stats-dashboard {
7288-
display: grid;
7289-
grid-template-columns: repeat(6, 1fr);
7290-
gap: 1rem;
7291-
margin-top: 1.5rem;
7292-
}
7293-
7294-
/* Stats Cards */
7295-
.stats-card {
7296-
background: var(--surface-color);
7297-
border: 1px solid var(--border-color);
7298-
border-radius: 14px;
7299-
padding: 1.2rem 0.8rem;
7300-
text-align: center;
7301-
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
7302-
cursor: default;
7303-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
7304-
position: relative;
7305-
overflow: hidden;
7306-
}
7307-
7308-
/* Card hover effect */
7309-
.stats-card:hover {
7310-
transform: translateY(-4px);
7311-
border-color: var(--accent-color);
7312-
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
7313-
}
7314-
7315-
/* Card glow on hover */
7316-
.stats-card::before {
7317-
content: '';
7318-
position: absolute;
7319-
top: 0;
7320-
left: 0;
7321-
right: 0;
7322-
height: 3px;
7323-
background: linear-gradient(90deg, transparent, var(--accent-color, #22c55e), transparent);
7324-
opacity: 0;
7325-
transition: opacity 0.3s ease;
7326-
}
7327-
7328-
.stats-card:hover::before {
7329-
opacity: 1;
7330-
}
7331-
7332-
/* Card numbers */
7333-
.stats-card h3 {
7334-
font-family: var(--font-sans, 'Space Grotesk', sans-serif);
7335-
font-size: 2rem;
7336-
font-weight: 700;
7337-
margin: 0;
7338-
background: linear-gradient(135deg, var(--accent-color, #22c55e), #06b6d4);
7339-
-webkit-background-clip: text;
7340-
-webkit-text-fill-color: transparent;
7341-
background-clip: text;
7342-
letter-spacing: -0.02em;
7343-
line-height: 1.2;
7344-
}
7345-
7346-
/* Card labels */
7347-
.stats-card p {
7348-
font-size: 0.75rem;
7349-
font-weight: 600;
7350-
color: var(--text-secondary);
7351-
margin: 0.4rem 0 0 0;
7352-
text-transform: uppercase;
7353-
letter-spacing: 0.06em;
7354-
}
7355-
7356-
/* Category-specific accent colors */
7357-
.stats-card[data-filter="games"] h3 {
7358-
background: linear-gradient(135deg, #ec4899, #f43f5e);
7359-
-webkit-background-clip: text;
7360-
-webkit-text-fill-color: transparent;
7361-
background-clip: text;
7362-
}
7363-
7364-
.stats-card[data-filter="games"]::before {
7365-
background: linear-gradient(90deg, transparent, #ec4899, transparent);
7366-
}
7367-
7368-
.stats-card[data-filter="math"] h3 {
7369-
background: linear-gradient(135deg, #6366f1, #8b5cf6);
7370-
-webkit-background-clip: text;
7371-
-webkit-text-fill-color: transparent;
7372-
background-clip: text;
7373-
}
7374-
7375-
.stats-card[data-filter="math"]::before {
7376-
background: linear-gradient(90deg, transparent, #6366f1, transparent);
7377-
}
7378-
7379-
.stats-card[data-filter="utilities"] h3 {
7380-
background: linear-gradient(135deg, #10b981, #059669);
7381-
-webkit-background-clip: text;
7382-
-webkit-text-fill-color: transparent;
7383-
background-clip: text;
7384-
}
7385-
7386-
.stats-card[data-filter="utilities"]::before {
7387-
background: linear-gradient(90deg, transparent, #10b981, transparent);
7388-
}
7389-
7390-
.stats-card[data-filter="favorites"] h3 {
7391-
background: linear-gradient(135deg, #f59e0b, #d97706);
7392-
-webkit-background-clip: text;
7393-
-webkit-text-fill-color: transparent;
7394-
background-clip: text;
7395-
}
7396-
7397-
.stats-card[data-filter="favorites"]::before {
7398-
background: linear-gradient(90deg, transparent, #f59e0b, transparent);
7399-
}
7400-
7401-
/* Clickable stats cards */
7402-
.stats-card[data-filter] {
7403-
cursor: pointer;
7404-
}
7405-
7406-
.stats-card[data-filter]:hover {
7407-
border-color: var(--accent-color);
7408-
}
7409-
7410-
/* Responsive - Tablet */
7411-
@media (max-width: 768px) {
7412-
.stats-dashboard {
7413-
grid-template-columns: repeat(3, 1fr);
7414-
gap: 0.75rem;
7415-
}
7416-
7417-
.stats-card {
7418-
padding: 1rem 0.5rem;
7419-
}
7420-
7421-
.stats-card h3 {
7422-
font-size: 1.5rem;
7423-
}
7424-
7425-
.stats-dashboard-section .section-heading {
7426-
font-size: 1.25rem;
7427-
}
7428-
}
7429-
7430-
/* Responsive - Mobile */
7431-
@media (max-width: 480px) {
7432-
.stats-dashboard {
7433-
grid-template-columns: repeat(2, 1fr);
7434-
gap: 0.5rem;
7435-
}
7436-
7437-
.stats-card {
7438-
padding: 0.8rem 0.4rem;
7439-
border-radius: 10px;
7440-
}
7441-
7442-
.stats-card h3 {
7443-
font-size: 1.2rem;
7444-
}
7445-
7446-
.stats-card p {
7447-
font-size: 0.65rem;
7448-
letter-spacing: 0.04em;
7449-
}
7450-
7451-
.stats-dashboard-section .section-heading {
7452-
font-size: 1rem;
7453-
}
7454-
7455-
.stats-dashboard-section .section-heading .heading-icon {
7456-
font-size: 1.2rem;
7457-
}
7458-
}
7459-
7460-
/* Reduced motion preference */
7461-
@media (prefers-reduced-motion: reduce) {
7462-
.stats-card {
7463-
transition: none;
7464-
}
7465-
7466-
.stats-card:hover {
7467-
transform: none;
7468-
}
7469-
7470-
.stats-dashboard-section .section-heading::after {
7471-
transition: none;
7472-
}
7473-
}

‎web-app/index.html‎

Lines changed: 11 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -249,10 +249,16 @@ <h1 class="hero-title">
249249
</div>
250250

251251
<div class="hero-meta">
252-
<span><strong id="heroProjectCount">0</strong> total projects</span>
253-
<span><strong id="heroGameCount">0</strong> games</span>
254-
<span><strong id="heroMathCount">0</strong> maths</span>
255-
<span><strong id="heroUtilityCount">0</strong> utilities</span>
252+
<div>
253+
<span><strong id="heroProjectCount">0</strong> total projects</span>
254+
<span><strong id="heroGameCount">0</strong> games</span>
255+
<span><strong id="heroMathCount">0</strong> maths</span>
256+
<span><strong id="heroUtilityCount">0</strong> utilities</span>
257+
</div>
258+
<div>
259+
<span data-filter="favorites"><strong id="heroFavoriteCount">0</strong>Favorites</span>
260+
<span><strong id="heroViewedCount">0</strong>Recently Viewed</span>
261+
</div>
256262
</div>
257263
</div>
258264
</section>
@@ -287,52 +293,6 @@ <h1 class="hero-title">
287293
</div>
288294
</div>
289295

290-
<section class="stats-dashboard-section">
291-
<div class="container">
292-
293-
<div class="section-header">
294-
<h2 class="section-heading">
295-
<span class="heading-text">Project Statistics</span>
296-
</h2>
297-
</div>
298-
299-
<div class="stats-dashboard">
300-
301-
<div class="stats-card" data-filter="all">
302-
<h3 id="statsTotal">0</h3>
303-
<p>Total Projects</p>
304-
</div>
305-
306-
<div class="stats-card" data-filter="games">
307-
<h3 id="statsGames">0</h3>
308-
<p>Games</p>
309-
</div>
310-
311-
<div class="stats-card" data-filter="math">
312-
<h3 id="statsMath">0</h3>
313-
<p>Math</p>
314-
</div>
315-
316-
<div class="stats-card" data-filter="utilities">
317-
<h3 id="statsUtilities">0</h3>
318-
<p>Utilities</p>
319-
</div>
320-
321-
<div class="stats-card" data-filter="favorites">
322-
<h3 id="statsFavorites">0</h3>
323-
<p>Favorites</p>
324-
</div>
325-
326-
<div class="stats-card">
327-
<h3 id="statsViewed">0</h3>
328-
<p>Recently Viewed</p>
329-
</div>
330-
331-
</div>
332-
333-
</div>
334-
</section>
335-
336296
<!-- Timeline Section -->
337297
<section class="hero-timeline-section" id="timelineSection">
338298
<div class="timeline-background" aria-hidden="true"></div>
@@ -1197,7 +1157,7 @@ <h3>${proj.title}</h3>
11971157
animateCounter("statsUtilities",utils);
11981158
document.getElementById("statsFavorites").textContent = favorites.length;
11991159
const viewed= JSON.parse(localStorage.getItem("recentlyViewed")||"[]");
1200-
animateCounter("statsViewed",viewed.length);
1160+
animateCounter("heroViewedCount",viewed.length);
12011161

12021162
console.log(
12031163
`✅ Loaded ${total} projects: ${games} games, ${math} math, ${utils} utilities`

‎web-app/js/main.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1499,9 +1499,9 @@ document.addEventListener("DOMContentLoaded", function () {
14991499
}
15001500

15011501
// Update stats dashboard
1502-
const statsFavorites = document.getElementById("statsFavorites");
1503-
if (statsFavorites) {
1504-
statsFavorites.textContent = count;
1502+
const heroFavoriteCount = document.getElementById("heroFavoriteCount");
1503+
if (heroFavoriteCount) {
1504+
heroFavoriteCount.textContent = count;
15051505
}
15061506
}
15071507
updateFavoritesCountBadge();

0 commit comments

Comments
 (0)