From f5f226089f942be858954286e2bf5a847dad3a54 Mon Sep 17 00:00:00 2001 From: Shivam Agrawal Date: Fri, 7 Nov 2025 22:40:49 +0530 Subject: [PATCH 1/2] changeing the width Changed the width from 1200 to 900 --- src/pages/License/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/License/index.css b/src/pages/License/index.css index 019e306b..6a8c13fb 100644 --- a/src/pages/License/index.css +++ b/src/pages/License/index.css @@ -176,7 +176,7 @@ html[data-theme="light"] { .lic-content-wrapper { position: relative; z-index: 1; - max-width: 1200px; + max-width: 900px; margin: 0 auto; padding: 4rem 1.5rem; animation: fadeInUp 0.8s ease-out; From a76945a26368b9e578c92d6e52a9f031dea75a40 Mon Sep 17 00:00:00 2001 From: Shivam Agrawal Date: Fri, 7 Nov 2025 23:14:28 +0530 Subject: [PATCH 2/2] changed the ui for the ebooks page updated the ui of the ebooks page to look same as the podcasts page --- src/pages/ebooks/index.css | 995 ++++++++++++++++++++++++++++++------- src/pages/ebooks/index.tsx | 383 +++++++++++--- 2 files changed, 1132 insertions(+), 246 deletions(-) diff --git a/src/pages/ebooks/index.css b/src/pages/ebooks/index.css index 754f7ab0..11e396ca 100644 --- a/src/pages/ebooks/index.css +++ b/src/pages/ebooks/index.css @@ -1,269 +1,908 @@ -/* ------------------------------ - Root Container ------------------------------- */ -.ebook-container { - padding: 4rem 1.5rem; - max-width: 1280px; - margin: 0 auto; - font-family: var(--ifm-font-family-base); +:root { + /* Dark Theme Variables (Default) */ + --ebook-bg-primary: linear-gradient( + 135deg, + #0f0f23 0%, + #1a1a2e 25%, + #16213e 50%, + #0f3460 75%, + #533483 100% + ); + --ebook-bg-card: rgba(255, 255, 255, 0.03); + --ebook-bg-card-hover: rgba(255, 255, 255, 0.08); + --ebook-bg-blur: rgba(255, 255, 255, 0.05); + --ebook-text-primary: #ffffff; + --ebook-text-secondary: #e2e8f0; + --ebook-text-muted: #cbd5e1; + --ebook-text-dim: #94a3b8; + --ebook-border: rgba(255, 255, 255, 0.1); + --ebook-border-hover: rgba(102, 126, 234, 0.3); + --ebook-accent-primary: #667eea; + --ebook-accent-secondary: #764ba2; + --ebook-accent-tertiary: #f093fb; + --ebook-shadow: rgba(0, 0, 0, 0.2); + --ebook-shadow-hover: rgba(0, 0, 0, 0.3); + --ebook-glow: rgba(102, 126, 234, 0.4); + --ebook-read: #10b981; + --ebook-read-hover: #059669; +} + +/* Light Theme Variables */ +[data-theme="light"] { + --ebook-bg-primary: linear-gradient( + 135deg, + #f8fafc 0%, + #e2e8f0 25%, + #cbd5e1 50%, + #94a3b8 75%, + #64748b 100% + ); + --ebook-bg-card: rgba(255, 255, 255, 0.9); + --ebook-bg-card-hover: rgba(255, 255, 255, 0.95); + --ebook-bg-blur: rgba(255, 255, 255, 0.8); + --ebook-text-primary: #0f172a; + --ebook-text-secondary: #1e293b; + --ebook-text-muted: #334155; + --ebook-text-dim: #64748b; + --ebook-border: rgba(0, 0, 0, 0.1); + --ebook-border-hover: rgba(102, 126, 234, 0.4); + --ebook-accent-primary: #4f46e5; + --ebook-accent-secondary: #7c3aed; + --ebook-accent-tertiary: #ec4899; + --ebook-shadow: rgba(0, 0, 0, 0.1); + --ebook-shadow-hover: rgba(0, 0, 0, 0.15); + --ebook-glow: rgba(79, 70, 229, 0.3); + --ebook-read: #10b981; + --ebook-read-hover: #059669; +} + +/* Force theme variables on specific elements */ +html[data-theme="light"] { + --ebook-bg-primary: linear-gradient( + 135deg, + #f8fafc 0%, + #e2e8f0 25%, + #cbd5e1 50%, + #94a3b8 75%, + #64748b 100% + ); + --ebook-bg-card: rgba(255, 255, 255, 0.9); + --ebook-bg-card-hover: rgba(255, 255, 255, 0.95); + --ebook-bg-blur: rgba(255, 255, 255, 0.8); + --ebook-text-primary: #0f172a; + --ebook-text-secondary: #1e293b; + --ebook-text-muted: #334155; + --ebook-text-dim: #64748b; + --ebook-border: rgba(0, 0, 0, 0.1); + --ebook-border-hover: rgba(102, 126, 234, 0.4); + --ebook-shadow: rgba(0, 0, 0, 0.1); + --ebook-shadow-hover: rgba(0, 0, 0, 0.15); + --ebook-glow: rgba(79, 70, 229, 0.3); +} + +/* Keyframe Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + +@keyframes pulseGlow { + 0%, + 100% { + box-shadow: 0 0 0 0 var(--ebook-glow); + } + 50% { + box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1); + } +} + +@keyframes bounce { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-4px); + } +} + +@keyframes backgroundShift { + 0%, + 100% { + transform: translateX(0px) translateY(0px) scale(1); + } + 25% { + transform: translateX(30px) translateY(-20px) scale(1.02); + } + 50% { + transform: translateX(-10px) translateY(30px) scale(0.98); + } + 75% { + transform: translateX(-25px) translateY(-15px) scale(1.01); + } +} + +/* Main Container */ +.enhanced-ebook-container { + font-family: + "Inter", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + sans-serif; + background: var(--ebook-bg-primary); + color: var(--ebook-text-secondary); + min-height: 100vh; + position: relative; + overflow: hidden; + transition: all 0.3s ease; } -/* ------------------------------ - Hero Section ------------------------------- */ +/* Background Effects */ +.enhanced-ebook-container::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient( + circle at 20% 80%, + rgba(120, 119, 198, 0.08) 0%, + transparent 60% + ), + radial-gradient( + circle at 80% 20%, + rgba(255, 119, 198, 0.06) 0%, + transparent 60% + ), + radial-gradient( + circle at 40% 40%, + rgba(120, 219, 255, 0.04) 0%, + transparent 60% + ); + animation: backgroundShift 25s ease-in-out infinite; + pointer-events: none; +} + +/* Light theme background effects */ +[data-theme="light"] .enhanced-ebook-container::before { + background: + radial-gradient( + circle at 20% 80%, + rgba(79, 70, 229, 0.05) 0%, + transparent 60% + ), + radial-gradient( + circle at 80% 20%, + rgba(124, 58, 237, 0.04) 0%, + transparent 60% + ), + radial-gradient( + circle at 40% 40%, + rgba(236, 72, 153, 0.03) 0%, + transparent 60% + ); +} + +/* Hero Section */ .ebook-hero { + padding: 80px 20px 60px; text-align: center; - margin-bottom: 3rem; - animation: fadeIn 0.6s ease-in; + position: relative; + z-index: 1; } -.ebook-title { - font-size: 3rem; - font-weight: 700; - color: var(--ifm-heading-color); +.ebook-hero-content { + max-width: 800px; + margin: 0 auto; + animation: fadeInUp 0.8s ease-out; } -.ebook-subtitle { - color: var(--ifm-color-gray-700); - margin-top: 0.75rem; - font-size: 1.2rem; - max-width: 700px; - margin-left: auto; - margin-right: auto; +.hero-badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 12px 24px; + background: var(--ebook-bg-blur); + border: 1px solid var(--ebook-border); + border-radius: 50px; + font-size: 14px; + font-weight: 600; + margin-bottom: 24px; + backdrop-filter: blur(10px); + color: var(--ebook-text-muted); } -/* ------------------------------ - Search Wrapper + Input ------------------------------- */ -.ebook-search-wrapper { +.badge-icon { + font-size: 16px; + animation: bounce 2s infinite; +} + +.ebook-hero-title { + font-size: 48px; + font-weight: 900; + background: linear-gradient( + 135deg, + var(--ebook-text-primary) 0%, + var(--ebook-text-secondary) 30%, + var(--ebook-text-muted) 60%, + var(--ebook-text-dim) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 0 0 24px 0; + line-height: 1.1; + letter-spacing: -0.02em; +} + +.ebook-hero-description { + font-size: 18px; + color: var(--ebook-text-muted); + line-height: 1.6; + margin: 0 0 40px 0; + opacity: 0.9; +} + +/* Stats */ +.ebook-stats { + display: flex; + justify-content: center; + gap: 40px; + margin-top: 40px; +} + +.stat-item { + text-align: center; +} + +.stat-number { + font-size: 32px; + font-weight: 900; + background: linear-gradient( + 135deg, + var(--ebook-accent-primary) 0%, + var(--ebook-accent-secondary) 50%, + var(--ebook-accent-tertiary) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin-bottom: 8px; +} + +.stat-label { + font-size: 14px; + background: linear-gradient( + 135deg, + var(--ebook-text-primary) 0%, + var(--ebook-text-secondary) 30%, + var(--ebook-text-muted) 60%, + var(--ebook-text-dim) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +/* Filters Section */ +.ebook-filters { + background: var(--ebook-bg-blur); + border: 1px solid var(--ebook-border); + border-radius: 20px; + padding: 24px; + margin: 40px auto; + max-width: 1200px; + backdrop-filter: blur(20px); + display: flex; + flex-direction: column; + gap: 20px; position: relative; - display: inline-block; - width: 60%; - max-width: 480px; - margin-top: 1.5rem; + z-index: 2; } -.ebook-search-wrapper .search-icon { +.filter-search { + position: relative; + max-width: 400px; + margin: 0 auto; +} + +.search-icon { position: absolute; - left: 12px; + left: 16px; top: 50%; transform: translateY(-50%); - pointer-events: none; /* clicks go to input */ - font-size: 1.2rem; - color: var(--ifm-color-gray-700); + font-size: 18px; opacity: 0.6; + color: var(--ebook-text-dim); } -.ebook-search-wrapper input.ebook-search { - padding-left: 36px; /* space for the icon */ +.search-input { width: 100%; - height: 40px; + padding: 16px 16px 16px 48px; + background: var(--ebook-bg-card); + border: 1px solid var(--ebook-border); border-radius: 12px; - border: 1px solid var(--ifm-toc-border-color); - font-size: 1rem; - background-color: var(--ifm-background-color); - color: var(--ifm-heading-color); - box-shadow: var(--ifm-global-shadow-lw); - transition: all 0.25s ease; + color: var(--ebook-text-primary); + font-size: 16px; + backdrop-filter: blur(10px); + transition: all 0.3s ease; } -.ebook-search-wrapper input.ebook-search::placeholder { - color: var(--ifm-heading-color); - opacity: 0.6; +.search-input:focus { + outline: none; + border-color: var(--ebook-accent-primary); + background: var(--ebook-bg-card-hover); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); } -.ebook-search-wrapper input.ebook-search:focus { - border-color: var(--ifm-color-primary); - box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15); - outline: none; +.search-input::placeholder { + color: var(--ebook-text-dim); +} + +.filter-tabs { + display: flex; + justify-content: center; + gap: 12px; + flex-wrap: wrap; +} + +.filter-tab { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + background: var(--ebook-bg-card); + border: 1px solid var(--ebook-border); + border-radius: 12px; + color: var(--ebook-text-muted); + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.filter-tab::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(102, 126, 234, 0.2), + transparent + ); + transition: left 0.6s ease; +} + +.filter-tab:hover::before { + left: 100%; +} + +.filter-tab:hover { + background: var(--ebook-bg-card-hover); + border-color: var(--ebook-border-hover); + transform: translateY(-2px); + color: var(--ebook-text-primary); +} + +.filter-tab.active { + background: linear-gradient( + 135deg, + var(--ebook-accent-primary) 0%, + var(--ebook-accent-secondary) 50%, + var(--ebook-accent-tertiary) 100% + ); + border-color: transparent; + color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 8px 25px var(--ebook-glow); +} + +.tab-icon { + font-size: 16px; +} + +/* Content Section */ +.ebook-content-section { + padding: 40px 20px 80px; + position: relative; + z-index: 2; } -/* ------------------------------ - Grid Section ------------------------------- */ .ebook-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 2rem; - justify-items: center; - animation: fadeInUp 0.6s ease-in; + grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); + gap: 32px; + max-width: 1400px; + margin: 0 auto; } -/* ------------------------------ - Ebook Card ------------------------------- */ -.ebook-card { - width: 100%; - max-width: 280px; - background: var(--ifm-card-background-color); - border-radius: 16px; - box-shadow: var(--ifm-global-shadow-lw); - overflow: hidden; +/* Enhanced Ebook Cards */ +.enhanced-ebook-card { + background: var(--ebook-bg-card); + border: 1px solid var(--ebook-border); + border-radius: 20px; + padding: 20px; + backdrop-filter: blur(20px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; + position: relative; + z-index: 1; + overflow: hidden; + animation: fadeInUp 0.6s ease-out both; display: flex; flex-direction: column; - transition: - transform 0.3s ease, - box-shadow 0.3s ease; } -.ebook-card:hover { - transform: translateY(-8px); - box-shadow: var(--ifm-global-shadow-md); +.enhanced-ebook-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(102, 126, 234, 0.02) 0%, + rgba(240, 147, 251, 0.02) 100% + ); + opacity: 0; + transition: opacity 0.4s ease; +} + +[data-theme="light"] .enhanced-ebook-card::before { + background: linear-gradient( + 135deg, + rgba(79, 70, 229, 0.03) 0%, + rgba(236, 72, 153, 0.03) 100% + ); } -/* ------------------------------ - Image Section ------------------------------- */ +.enhanced-ebook-card:hover::before { + opacity: 1; +} + +.enhanced-ebook-card:hover { + background: var(--ebook-bg-card-hover); + border-color: var(--ebook-border-hover); + transform: translateY(-8px) scale(1.02); + box-shadow: + 0 20px 40px var(--ebook-shadow), + 0 10px 20px var(--ebook-glow); +} + +.ebook-card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 16px; +} + +.card-actions { + display: flex; + gap: 8px; + opacity: 0; + transition: opacity 0.3s ease; + position: relative; + z-index: 10; + pointer-events: auto; +} + +.enhanced-ebook-card:hover .card-actions { + opacity: 1; +} + +.action-btn.share { + background-color: rgba(123, 124, 128, 0.15); + border: 1px solid rgba(123, 124, 128, 0.3); + transition: all 0.3s ease; + color: inherit; + border-radius: 8px; + width: 36px; + height: 36px; + cursor: pointer; + font-size: 14px; + position: relative; + z-index: 15; + user-select: none; +} + +.action-btn.share:hover { + background-color: rgba(123, 124, 128, 0.25); + border-color: rgba(123, 124, 128, 0.5); + transform: scale(1.1); +} + +.action-btn.share:active { + transform: scale(0.95); +} + +.action-btn { + width: 36px; + height: 36px; + border: none; + background: var(--ebook-bg-blur); + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + font-size: 14px; + position: relative; + z-index: 15; + pointer-events: auto !important; + user-select: none; +} + +.action-btn:hover { + background: var(--ebook-bg-card-hover); + transform: scale(1.1); +} + +.action-btn.favorite { + transition: all 0.2s ease; + border: 1px solid transparent; +} + +.action-btn.favorite:active { + transform: scale(0.95); +} + +.action-btn.favorite.unfavorited { + background-color: rgba(123, 124, 128, 0.15); + color: white; + border-color: rgba(123, 124, 128, 0.3); +} + +.action-btn.favorite.unfavorited:hover { + background-color: rgba(123, 124, 128, 0.15); +} + +/* Ebook Title */ +.ebook-title-wrapper { + flex: 1; +} + +.ebook-type-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + background: linear-gradient( + 135deg, + var(--ebook-accent-primary) 0%, + var(--ebook-accent-secondary) 100% + ); + border-radius: 20px; + font-size: 12px; + font-weight: 600; + color: white; + margin-bottom: 12px; +} + +.type-icon { + font-size: 12px; +} + +.ebook-title-text { + font-size: 18px; + font-weight: 700; + color: var(--ebook-text-primary); + margin: 0; + line-height: 1.3; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Ebook Image */ .ebook-image-wrapper { - height: 220px; + width: 100%; + height: 280px; + border-radius: 16px; overflow: hidden; + margin: 16px 0; position: relative; - border-bottom: 1px solid var(--ifm-toc-border-color); + box-shadow: 0 8px 25px var(--ebook-shadow); + transition: all 0.3s ease; +} + +.enhanced-ebook-card:hover .ebook-image-wrapper { + box-shadow: 0 12px 30px var(--ebook-shadow-hover); + transform: scale(1.01); } .ebook-image { width: 100%; height: 100%; object-fit: cover; - transition: transform 0.35s ease; + transition: transform 0.4s ease; } -.ebook-card:hover .ebook-image { +.enhanced-ebook-card:hover .ebook-image { transform: scale(1.05); } -/* ------------------------------ - Content Section ------------------------------- */ -.ebook-content { +/* Ebook Card Content */ +.ebook-card-content { flex: 1; display: flex; flex-direction: column; - justify-content: flex-start; - padding: 1.5rem 1.25rem; + gap: 16px; } -.ebook-card-title { - font-weight: 600; - font-size: 1.3rem; - color: var(--ifm-heading-color); - margin-bottom: 0.6rem; -} - -.ebook-card-desc { - color: var(--ifm-color-gray-700); - font-size: 1rem; - line-height: 1.55; - margin-bottom: 0.8rem; -} - -/* ------------------------------ - Category Tag ------------------------------- */ -.ebook-category { - display: inline-block; - margin-top: 1rem; - font-size: 0.85rem; - font-weight: 500; - color: var(--ifm-color-primary); - background-color: rgba(0, 122, 255, 0.08); - padding: 0.4rem 0.8rem; - border-radius: 6px; - text-transform: uppercase; - letter-spacing: 0.5px; - align-self: flex-start; +.ebook-description { + color: var(--ebook-text-muted); + font-size: 14px; + line-height: 1.6; + margin: 0; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + flex: 1; } -/* ------------------------------ - Button ------------------------------- */ -.ebook-read-btn { - color: #fff; - background-color: var(--ifm-color-primary); +.ebook-read-button { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 12px 24px; + background: linear-gradient( + 135deg, + var(--ebook-read) 0%, + var(--ebook-read-hover) 100% + ); + color: white; border: none; - border-radius: 10px; - padding: 0.7rem 1.3rem; - font-size: 0.95rem; - font-weight: 500; + border-radius: 12px; + font-weight: 600; + font-size: 14px; cursor: pointer; - transition: - background-color 0.25s ease, - transform 0.2s ease; + transition: all 0.3s ease; + opacity: 0; + transform: translateY(10px); align-self: flex-start; } -.ebook-read-btn:hover { +.enhanced-ebook-card:hover .ebook-read-button { + opacity: 1; + transform: translateY(0); +} + +.ebook-read-button:hover { + background: linear-gradient( + 135deg, + var(--ebook-read-hover) 0%, + var(--ebook-read) 100% + ); + transform: translateY(-2px) scale(1.05); + box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); +} + +.read-icon { + font-size: 14px; +} + +/* Enhanced Pagination */ +.enhanced-pagination { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; + margin-top: 60px; + padding: 24px; + background: var(--ebook-bg-blur); + border: 1px solid var(--ebook-border); + border-radius: 20px; + backdrop-filter: blur(20px); + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.pagination-nav { + padding: 12px 20px; + background: var(--ebook-bg-card); + border: 1px solid var(--ebook-border); + border-radius: 12px; + color: var(--ebook-text-muted); + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.pagination-nav:hover:not(:disabled) { + background: var(--ebook-bg-card-hover); + color: var(--ebook-text-primary); + transform: translateY(-2px); +} + +.pagination-nav:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.pagination-numbers { + display: flex; + gap: 8px; +} + +.pagination-number { + width: 44px; + height: 44px; + border: 1px solid var(--ebook-border); + border-radius: 12px; + background: var(--ebook-bg-card); + color: var(--ebook-text-muted); + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.pagination-number:hover { + background: var(--ebook-bg-card-hover); + color: var(--ebook-text-primary); + transform: translateY(-2px); +} + +.pagination-number.active { + background: linear-gradient( + 135deg, + var(--ebook-accent-primary) 0%, + var(--ebook-accent-secondary) 100% + ); + border-color: transparent; + color: white; transform: translateY(-2px); - background-color: #0056d2; + box-shadow: 0 8px 20px var(--ebook-glow); } -/* ------------------------------ - No Results ------------------------------- */ +/* No Results */ .no-results { + display: flex; + flex-direction: column; text-align: center; - padding: 50px 0; - font-size: 1.2rem; - grid-column: 1 / -1; + padding: 80px 20px; + max-width: 400px; + margin: 0 auto; } -/* ------------------------------ - Animations ------------------------------- */ -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } +.no-results-icon { + font-size: 64px; + opacity: 0.6; + margin: 0; } -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); +.no-results h3 { + font-size: 24px; + font-weight: 700; + color: var(--ebook-text-primary); +} + +.no-results p { + color: var(--ebook-text-dim); + font-size: 16px; +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .ebook-grid { + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 28px; } } -/* ------------------------------ - Media Queries ------------------------------- */ @media (max-width: 768px) { - .ebook-search-wrapper { - width: 90%; + .enhanced-ebook-container { + padding: 0 16px; } - .ebook-title { - font-size: 2.4rem; + .ebook-hero { + padding: 60px 20px 40px; } - .ebook-card { - max-width: 95%; + .ebook-hero-title { + font-size: 36px; } -} -@media (min-width: 1024px) { - .ebook-grid { - grid-template-columns: repeat(4, 1fr); + .ebook-stats { + gap: 24px; + } + + .stat-number { + font-size: 24px; + } + + .ebook-filters { + margin: 20px 16px; + } + + .filter-tabs { + flex-direction: column; + gap: 8px; + } + + .filter-tab { + justify-content: center; + width: 100%; } -} -@media (min-width: 768px) and (max-width: 1023px) { .ebook-grid { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 1fr; + gap: 24px; + } + + .enhanced-pagination { + flex-direction: column; + gap: 16px; + } + + .pagination-nav { + order: 2; + } + + .pagination-numbers { + order: 1; + flex-wrap: wrap; + justify-content: center; } } -@media (max-width: 767px) { - .ebook-grid { - grid-template-columns: repeat(1, 1fr); +@media (max-width: 480px) { + .ebook-hero-title { + font-size: 28px; + } + + .ebook-stats { + flex-direction: column; + gap: 20px; + align-items: center; + } + + .enhanced-ebook-card { + padding: 16px; + } + + .ebook-title-text { + font-size: 16px; + } + + .ebook-image-wrapper { + height: 220px; + } + + .search-input { + font-size: 14px; } } diff --git a/src/pages/ebooks/index.tsx b/src/pages/ebooks/index.tsx index 9b4b5dee..16ce2ec7 100644 --- a/src/pages/ebooks/index.tsx +++ b/src/pages/ebooks/index.tsx @@ -1,106 +1,353 @@ import React, { useState } from "react"; import Layout from "@theme/Layout"; +import type { ReactElement } from "react"; import { useHistory } from "@docusaurus/router"; +import books from "../../database/ebooks/index"; import "./index.css"; -interface Ebook { - id: string; +interface EbookData { + id: number; title: string; + image: string; description: string; - contentLink: string; - category: string; + link: string; + category?: string; } -// Redirection URL Ebook Data -const ebooks: Ebook[] = [ - { - id: "1", - title: "Mastering Data Science with Python", - description: "Learn Data Science with examples and real-world projects.", - contentLink: "https://learn.recodehive.com/datascience", - category: "Programming", - }, - - // add here more ebooks or resources as needed for redirection - // sample - /* - { - id: '2', - title: 'Understanding React Hooks', - description: 'A deep dive into React Hooks for better state management.', - contentLink: 'https://learn.recodehive.com/react-hooks', - category: 'Web Development', - }, - */ -]; - -// -------------------------- -// Ebook Card Component -// -------------------------- -const EbookCard: React.FC<{ ebook: Ebook }> = ({ ebook }) => { +// Extract categories from books +const getCategory = (title: string): string => { + if (title.toLowerCase().includes("python")) return "Programming"; + if (title.toLowerCase().includes("java")) return "Programming"; + if (title.toLowerCase().includes("c++") || title.toLowerCase().includes("cpp")) return "Programming"; + if (title.toLowerCase().includes("c ")) return "Programming"; + return "Programming"; +}; + +const ebooksData: EbookData[] = books.map((book) => ({ + ...book, + category: getCategory(book.title), +})); + +const EbookTitle: React.FC<{ + title: string; + category: string; +}> = ({ title, category }) => ( +
+
+ 📚 + {category} +
+

{title}

+
+); + +export default function Ebooks(): ReactElement { const history = useHistory(); + const [currentPage, setCurrentPage] = useState(1); + const [searchTerm, setSearchTerm] = useState(""); + const [selectedFilter, setSelectedFilter] = useState< + "all" | "Programming" | "Web Development" | "Data Science" + >("all"); + const [favorites, setFavorites] = useState(() => { + if (typeof window !== "undefined") { + const saved = localStorage.getItem("ebook-favorites"); + return saved ? JSON.parse(saved) : []; + } + return []; + }); + const [ebooks] = useState(ebooksData); + const ebooksPerPage = 9; + + const filteredEbooks = ebooks.filter((ebook) => { + const matchesFilter = + selectedFilter === "all" || ebook.category === selectedFilter; + const matchesSearch = + searchTerm === "" || + (ebook.title && + ebook.title.toLowerCase().includes(searchTerm.toLowerCase())) || + (ebook.description && + ebook.description.toLowerCase().includes(searchTerm.toLowerCase())); + return matchesFilter && matchesSearch; + }); - const handleClick = () => { - if (ebook.contentLink.startsWith("http")) { - window.open(ebook.contentLink, "_blank"); + const indexOfLastEbook = currentPage * ebooksPerPage; + const indexOfFirstEbook = indexOfLastEbook - ebooksPerPage; + const currentEbooks = filteredEbooks.slice( + indexOfFirstEbook, + indexOfLastEbook, + ); + const totalPages = Math.ceil(filteredEbooks.length / ebooksPerPage); + + const handlePageChange = (pageNumber: number) => { + setCurrentPage(pageNumber); + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + + const handleShare = async (ebook: EbookData) => { + if (navigator.share) { + try { + await navigator.share({ + title: `Check out this ebook: ${ebook.title}`, + url: ebook.link, + }); + } catch { + navigator.clipboard.writeText(ebook.link); + } } else { - history.push(ebook.contentLink); + navigator.clipboard.writeText(ebook.link); } }; - return ( -
-
-

{ebook.title}

-

{ebook.description}

-
{ebook.category}
- -
-
- ); -}; + const handleFavorite = (ebook: EbookData, event: React.MouseEvent) => { + event.stopPropagation(); -// -------------------------- -// Main Ebook Page -// -------------------------- -export default function EbookPage(): JSX.Element { - const [searchTerm, setSearchTerm] = useState(""); + setFavorites((prev) => { + const isFavorited = prev.includes(ebook.id); + const newFavorites = isFavorited + ? prev.filter((id) => id !== ebook.id) + : [...prev, ebook.id]; + if (typeof window !== "undefined") { + localStorage.setItem("ebook-favorites", JSON.stringify(newFavorites)); + } + return newFavorites; + }); + }; - const filteredEbooks = ebooks.filter((ebook) => - ebook.title.toLowerCase().includes(searchTerm.toLowerCase()), + const handleEbookClick = ( + ebook: EbookData, + event: React.MouseEvent | React.KeyboardEvent, + ) => { + const target = event.target as HTMLElement; + + if ( + target.closest(".ebook-image-wrapper") || + target.closest(".action-btn") || + target.closest(".card-actions") || + target.classList.contains("action-btn") || + target.classList.contains("favorite") || + target.classList.contains("share") || + target.closest(".ebook-read-button") + ) { + return; + } + + if (ebook.link.startsWith("http")) { + window.open(ebook.link, "_blank"); + } else { + history.push(ebook.link); + } + }; + + const handleReadNow = (ebook: EbookData, event: React.MouseEvent) => { + event.stopPropagation(); + if (ebook.link.startsWith("http")) { + window.open(ebook.link, "_blank"); + } else { + history.push(ebook.link); + } + }; + + // Get unique categories + const categories = Array.from( + new Set(ebooks.map((ebook) => ebook.category || "Programming")), ); return ( - -
- {/* Hero Section */} + +
-

📚 Explore Ebooks

-

+

+
+ 📚 + Premium Learning Resources +
+

Explore Ebooks

+

Read high-quality ebooks on programming, tools, and development. -

-
- 🔍 + Dive into comprehensive guides that inspire, educate, and help you + master new skills. +

+
+
+
{ebooks.length}+
+
Ebooks
+
+
+
{categories.length}+
+
Categories
+
+
+
100%
+
Free
+
+
+
+
+ +
+
+
🔍
setSearchTerm(e.target.value)} + className="search-input" />
+
+ + {categories.map((category) => ( + + ))} +
- {/* Grid Section */} +
+ {currentEbooks.length > 0 ? ( + <>
- {filteredEbooks.length === 0 && ( + {currentEbooks.map((ebook, index) => ( +
handleEbookClick(ebook, e)} + role="button" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + handleEbookClick(ebook, e); + } + }} + style={{ animationDelay: `${index * 0.1}s` }} + > +
+ +
{ + e.stopPropagation(); + e.preventDefault(); + }} + onMouseDown={(e) => { + e.stopPropagation(); + }} + > + + +
+
+ +
e.stopPropagation()} + > + {ebook.title} +
+ +
+

{ebook.description}

+ +
+
+ ))} +
+ + {totalPages > 1 && ( +
+ + +
+ {Array.from({ length: totalPages }, (_, i) => i + 1).map( + (number) => ( + + ), + )} +
+ + +
+ )} + + ) : (
-

No ebooks found. Try a different search.

+
🔍
+

No ebooks found

+

Try adjusting your filters or search terms

)} - {filteredEbooks.map((ebook) => ( - - ))}