Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Q-Simplified — The Financial Architect</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Work+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/> | |
| <style> | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{ | |
| --primary:#003465; | |
| --primary-mid:#004b8d; | |
| --surface:#f8f9fa; | |
| --surface-low:#f3f4f5; | |
| --surface-card:#ffffff; | |
| --tertiary-container:#8d2400; | |
| --on-tertiary:#ffdbd1; | |
| --accent:#651700; | |
| --text-primary:#191c1d; | |
| --text-secondary:#4e5f7b; | |
| --text-muted:#7a8fa6; | |
| --text-white:#ffffff; | |
| --shadow-ambient:0 4px 40px rgba(25,28,29,0.05); | |
| --radius-sm:0.5rem; | |
| --radius-md:1rem; | |
| --radius-lg:1.5rem; | |
| --radius-xl:3rem; | |
| --radius-full:9999px; | |
| } | |
| html{scroll-behavior:smooth} | |
| body{ | |
| font-family:'Work Sans',sans-serif; | |
| background:var(--surface); | |
| color:var(--text-primary); | |
| min-height:100vh; | |
| } | |
| /* NAV */ | |
| .nav-wrapper{ | |
| background:var(--primary); | |
| padding:0 2rem; | |
| } | |
| .nav{ | |
| max-width:1100px; | |
| margin:0 auto; | |
| display:flex; | |
| align-items:center; | |
| gap:2rem; | |
| height:64px; | |
| } | |
| .logo{ | |
| font-family:'Manrope',sans-serif; | |
| font-weight:800; | |
| font-size:1.25rem; | |
| color:#fff; | |
| text-decoration:none; | |
| white-space:nowrap; | |
| letter-spacing:-0.02em; | |
| } | |
| .nav-links{ | |
| display:flex; | |
| align-items:center; | |
| gap:0.25rem; | |
| flex:1; | |
| justify-content:center; | |
| } | |
| .nav-links a{ | |
| font-family:'Work Sans',sans-serif; | |
| font-size:0.875rem; | |
| font-weight:400; | |
| color:rgba(255,255,255,0.7); | |
| text-decoration:none; | |
| padding:0.4rem 0.75rem; | |
| border-radius:var(--radius-full); | |
| transition:all 0.2s; | |
| white-space:nowrap; | |
| } | |
| .nav-links a:hover{color:#fff;background:rgba(255,255,255,0.1)} | |
| .nav-links a.active{ | |
| color:#fff; | |
| font-weight:600; | |
| position:relative; | |
| } | |
| .nav-links a.active::after{ | |
| content:''; | |
| position:absolute; | |
| bottom:-4px; | |
| left:50%; | |
| transform:translateX(-50%); | |
| width:20px; | |
| height:2px; | |
| background:var(--on-tertiary); | |
| border-radius:var(--radius-full); | |
| } | |
| .btn-login{ | |
| font-family:'Work Sans',sans-serif; | |
| font-size:0.8125rem; | |
| font-weight:600; | |
| letter-spacing:0.05em; | |
| text-transform:uppercase; | |
| color:#fff; | |
| background:transparent; | |
| border:1.5px solid rgba(255,255,255,0.6); | |
| border-radius:var(--radius-full); | |
| padding:0.5rem 1.25rem; | |
| cursor:pointer; | |
| transition:all 0.2s; | |
| white-space:nowrap; | |
| text-decoration:none; | |
| } | |
| .btn-login:hover{background:#fff;color:var(--primary)} | |
| /* MAIN LAYOUT */ | |
| .page-body{ | |
| max-width:1100px; | |
| margin:0 auto; | |
| padding:2rem 1.5rem; | |
| display:grid; | |
| grid-template-columns:220px 1fr 240px; | |
| gap:1.5rem; | |
| align-items:start; | |
| } | |
| /* LEFT: INDICATORS */ | |
| .indicators-card{ | |
| background:var(--surface-card); | |
| border-radius:var(--radius-xl); | |
| padding:1.5rem; | |
| box-shadow:var(--shadow-ambient); | |
| } | |
| .indicators-header{ | |
| display:flex; | |
| align-items:center; | |
| gap:0.5rem; | |
| margin-bottom:0.25rem; | |
| } | |
| .indicators-header svg{color:var(--tertiary-container)} | |
| .indicators-title{ | |
| font-family:'Manrope',sans-serif; | |
| font-weight:700; | |
| font-size:0.9375rem; | |
| color:var(--text-primary); | |
| } | |
| .indicators-sub{ | |
| font-size:0.6875rem; | |
| font-weight:500; | |
| letter-spacing:0.08em; | |
| text-transform:uppercase; | |
| color:var(--text-muted); | |
| margin-bottom:1.25rem; | |
| } | |
| .indicator-row{ | |
| display:flex; | |
| align-items:center; | |
| gap:0.5rem; | |
| padding:0.625rem 0; | |
| border-radius:var(--radius-sm); | |
| cursor:pointer; | |
| transition:background 0.15s; | |
| } | |
| .indicator-row:hover{background:var(--surface-low);padding-left:0.5rem;padding-right:0.5rem} | |
| .ind-icon{ | |
| width:32px;height:32px; | |
| border-radius:var(--radius-sm); | |
| background:var(--surface-low); | |
| display:flex;align-items:center;justify-content:center; | |
| flex-shrink:0; | |
| font-size:0.875rem; | |
| } | |
| .ind-label{ | |
| font-size:0.8125rem; | |
| color:var(--text-primary); | |
| flex:1; | |
| } | |
| .ind-value{ | |
| font-size:0.8125rem; | |
| font-weight:600; | |
| color:var(--text-secondary); | |
| } | |
| .ind-value.positive{color:#1a7a4a} | |
| .ind-value.negative{color:#c0392b} | |
| .ind-divider{height:1px;background:var(--surface-low);margin:0.25rem 0} | |
| .btn-view-all{ | |
| width:100%; | |
| margin-top:1rem; | |
| padding:0.6rem; | |
| border-radius:var(--radius-full); | |
| border:1.5px solid var(--surface-low); | |
| background:var(--surface-low); | |
| font-family:'Work Sans',sans-serif; | |
| font-size:0.75rem; | |
| font-weight:600; | |
| letter-spacing:0.06em; | |
| text-transform:uppercase; | |
| color:var(--text-secondary); | |
| cursor:pointer; | |
| transition:all 0.2s; | |
| } | |
| .btn-view-all:hover{background:var(--primary);color:#fff;border-color:var(--primary)} | |
| .ind-social{ | |
| display:flex;gap:0.5rem; | |
| margin-top:1rem; | |
| justify-content:center; | |
| } | |
| .ind-social-btn{ | |
| width:32px;height:32px; | |
| border-radius:var(--radius-full); | |
| background:var(--surface-low); | |
| display:flex;align-items:center;justify-content:center; | |
| cursor:pointer; | |
| transition:background 0.2s; | |
| border:none; | |
| } | |
| .ind-social-btn:hover{background:var(--primary);color:#fff} | |
| .ind-social-btn svg{width:14px;height:14px;color:var(--text-muted)} | |
| .ind-social-btn:hover svg{color:#fff} | |
| /* CENTER: MAIN FEED */ | |
| .center-feed{display:flex;flex-direction:column;gap:1.5rem} | |
| /* FEATURED BLOG */ | |
| .featured-card{ | |
| background:var(--surface-card); | |
| border-radius:var(--radius-xl); | |
| overflow:hidden; | |
| box-shadow:var(--shadow-ambient); | |
| } | |
| .featured-hero{ | |
| background:linear-gradient(135deg,#8d2400 0%,#5c1700 50%,#3a0e00 100%); | |
| padding:2rem 2rem 1.5rem; | |
| position:relative; | |
| overflow:hidden; | |
| min-height:180px; | |
| display:flex; | |
| flex-direction:column; | |
| justify-content:flex-end; | |
| } | |
| .featured-hero::before{ | |
| content:''; | |
| position:absolute; | |
| right:-40px;top:-40px; | |
| width:250px;height:250px; | |
| background:rgba(255,255,255,0.03); | |
| border-radius:50%; | |
| } | |
| .featured-hero::after{ | |
| content:'BLOGS'; | |
| position:absolute; | |
| right:1.5rem;top:1rem; | |
| font-family:'Manrope',sans-serif; | |
| font-size:5rem; | |
| font-weight:800; | |
| color:rgba(255,255,255,0.05); | |
| line-height:1; | |
| pointer-events:none; | |
| user-select:none; | |
| } | |
| .featured-category-pill{ | |
| display:inline-block; | |
| background:var(--tertiary-container); | |
| color:var(--on-tertiary); | |
| font-size:0.6875rem; | |
| font-weight:600; | |
| letter-spacing:0.08em; | |
| text-transform:uppercase; | |
| padding:0.3rem 0.75rem; | |
| border-radius:var(--radius-full); | |
| margin-bottom:0.75rem; | |
| width:fit-content; | |
| } | |
| .featured-hero-title{ | |
| font-family:'Manrope',sans-serif; | |
| font-size:1.75rem; | |
| font-weight:800; | |
| color:#fff; | |
| line-height:1.2; | |
| letter-spacing:-0.02em; | |
| position:relative; | |
| z-index:1; | |
| } | |
| .featured-hero-desc{ | |
| font-size:0.875rem; | |
| color:rgba(255,255,255,0.75); | |
| margin-top:0.5rem; | |
| line-height:1.6; | |
| position:relative; | |
| z-index:1; | |
| } | |
| .featured-article-img{ | |
| width:100%; | |
| height:220px; | |
| object-fit:cover; | |
| display:block; | |
| background:linear-gradient(135deg,#b0c4de 0%,#708090 100%); | |
| position:relative; | |
| } | |
| .featured-article-img-placeholder{ | |
| width:100%; | |
| height:220px; | |
| background:linear-gradient(160deg,#8fa8c8 0%,#5c7a9e 40%,#3d5c7a 100%); | |
| display:flex; | |
| align-items:flex-end; | |
| padding:1rem; | |
| } | |
| .article-meta-pill{ | |
| background:var(--surface-card); | |
| color:var(--primary); | |
| font-size:0.6875rem; | |
| font-weight:700; | |
| letter-spacing:0.06em; | |
| text-transform:uppercase; | |
| padding:0.3rem 0.75rem; | |
| border-radius:var(--radius-full); | |
| width:fit-content; | |
| } | |
| .featured-article-body{padding:1.75rem} | |
| .article-meta-row{ | |
| display:flex; | |
| align-items:center; | |
| gap:1rem; | |
| margin-bottom:0.875rem; | |
| } | |
| .article-meta-date{ | |
| font-size:0.75rem; | |
| color:var(--text-muted); | |
| font-weight:500; | |
| letter-spacing:0.03em; | |
| } | |
| .article-meta-sep{width:4px;height:4px;border-radius:50%;background:var(--text-muted)} | |
| .article-meta-read{font-size:0.75rem;color:var(--text-muted);font-weight:500;letter-spacing:0.03em} | |
| .article-title{ | |
| font-family:'Manrope',sans-serif; | |
| font-size:1.375rem; | |
| font-weight:700; | |
| color:var(--text-primary); | |
| line-height:1.3; | |
| letter-spacing:-0.01em; | |
| margin-bottom:0.75rem; | |
| } | |
| .article-excerpt{ | |
| font-size:0.875rem; | |
| color:var(--text-secondary); | |
| line-height:1.7; | |
| margin-bottom:1.25rem; | |
| } | |
| .btn-read{ | |
| display:inline-flex; | |
| align-items:center; | |
| gap:0.5rem; | |
| font-size:0.8125rem; | |
| font-weight:600; | |
| letter-spacing:0.04em; | |
| text-transform:uppercase; | |
| color:var(--accent); | |
| text-decoration:none; | |
| cursor:pointer; | |
| background:none; | |
| border:none; | |
| padding:0; | |
| transition:gap 0.2s; | |
| } | |
| .btn-read:hover{gap:0.75rem} | |
| .btn-read svg{width:16px;height:16px} | |
| /* MINI CARDS GRID */ | |
| .mini-cards-grid{ | |
| display:grid; | |
| grid-template-columns:1fr 1fr; | |
| gap:1rem; | |
| } | |
| .mini-card{ | |
| background:var(--surface-card); | |
| border-radius:var(--radius-lg); | |
| padding:1.375rem; | |
| box-shadow:var(--shadow-ambient); | |
| cursor:pointer; | |
| transition:transform 0.2s; | |
| } | |
| .mini-card:hover{transform:translateY(-2px)} | |
| .mini-card-title{ | |
| font-family:'Manrope',sans-serif; | |
| font-size:1rem; | |
| font-weight:700; | |
| color:var(--text-primary); | |
| line-height:1.3; | |
| margin-bottom:0.625rem; | |
| letter-spacing:-0.01em; | |
| } | |
| .mini-card-desc{ | |
| font-size:0.8125rem; | |
| color:var(--text-secondary); | |
| line-height:1.6; | |
| margin-bottom:0.875rem; | |
| } | |
| .mini-card-tag{ | |
| font-size:0.6875rem; | |
| font-weight:600; | |
| color:var(--accent); | |
| text-transform:uppercase; | |
| letter-spacing:0.06em; | |
| } | |
| .mini-card-arrow{ | |
| display:inline-flex; | |
| align-items:center; | |
| gap:0.25rem; | |
| float:right; | |
| color:var(--text-muted); | |
| transition:color 0.2s; | |
| } | |
| .mini-card:hover .mini-card-arrow{color:var(--accent)} | |
| .mini-card-footer{ | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| margin-top:0.5rem; | |
| } | |
| /* RIGHT: SIDEBAR */ | |
| .right-sidebar{display:flex;flex-direction:column;gap:1.25rem} | |
| /* RECENT BLOGS */ | |
| .sidebar-section{ | |
| background:var(--surface-card); | |
| border-radius:var(--radius-xl); | |
| padding:1.25rem; | |
| box-shadow:var(--shadow-ambient); | |
| } | |
| .sidebar-header{ | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| margin-bottom:1rem; | |
| } | |
| .sidebar-title{ | |
| font-family:'Manrope',sans-serif; | |
| font-weight:700; | |
| font-size:0.9375rem; | |
| color:var(--text-primary); | |
| } | |
| .sidebar-action{ | |
| background:none; | |
| border:none; | |
| cursor:pointer; | |
| color:var(--text-muted); | |
| display:flex; | |
| align-items:center; | |
| } | |
| .blog-list-item{ | |
| padding:0.75rem 0; | |
| cursor:pointer; | |
| transition:opacity 0.15s; | |
| } | |
| .blog-list-item:hover{opacity:0.75} | |
| .blog-list-item:not(:last-child){border-bottom:none;padding-bottom:0.875rem} | |
| .blog-category-tag{ | |
| font-size:0.625rem; | |
| font-weight:600; | |
| letter-spacing:0.1em; | |
| text-transform:uppercase; | |
| color:var(--tertiary-container); | |
| margin-bottom:0.3rem; | |
| } | |
| .blog-list-title{ | |
| font-family:'Manrope',sans-serif; | |
| font-size:0.8125rem; | |
| font-weight:600; | |
| color:var(--text-primary); | |
| line-height:1.4; | |
| margin-bottom:0.25rem; | |
| } | |
| .blog-list-ago{ | |
| font-size:0.6875rem; | |
| color:var(--text-muted); | |
| } | |
| .blog-list-spacer{height:1px;background:var(--surface-low);margin:0.125rem 0} | |
| /* LIVE INSIGHTS */ | |
| .live-insights-card{ | |
| background:var(--primary); | |
| border-radius:var(--radius-xl); | |
| padding:1.25rem; | |
| } | |
| .live-insights-header{ | |
| display:flex; | |
| align-items:center; | |
| gap:0.5rem; | |
| margin-bottom:1rem; | |
| } | |
| .live-dot{ | |
| width:8px;height:8px; | |
| border-radius:50%; | |
| background:#4caf82; | |
| animation:pulse 2s infinite; | |
| } | |
| @keyframes pulse{ | |
| 0%,100%{box-shadow:0 0 0 0 rgba(76,175,130,0.4)} | |
| 50%{box-shadow:0 0 0 5px rgba(76,175,130,0)} | |
| } | |
| .live-title{ | |
| font-family:'Manrope',sans-serif; | |
| font-weight:700; | |
| font-size:0.8125rem; | |
| letter-spacing:0.1em; | |
| text-transform:uppercase; | |
| color:#fff; | |
| } | |
| .insight-pill{ | |
| background:rgba(255,255,255,0.1); | |
| border-radius:var(--radius-sm); | |
| padding:0.625rem 0.875rem; | |
| font-size:0.75rem; | |
| color:rgba(255,255,255,0.9); | |
| line-height:1.5; | |
| margin-bottom:0.5rem; | |
| cursor:pointer; | |
| transition:background 0.15s; | |
| } | |
| .insight-pill:hover{background:rgba(255,255,255,0.18)} | |
| .btn-all-news{ | |
| width:100%; | |
| margin-top:0.75rem; | |
| padding:0.6rem; | |
| border-radius:var(--radius-full); | |
| border:1.5px solid rgba(255,255,255,0.25); | |
| background:transparent; | |
| color:#fff; | |
| font-family:'Work Sans',sans-serif; | |
| font-size:0.75rem; | |
| font-weight:600; | |
| letter-spacing:0.06em; | |
| text-transform:uppercase; | |
| cursor:pointer; | |
| transition:all 0.2s; | |
| } | |
| .btn-all-news:hover{background:#fff;color:var(--primary)} | |
| /* STUDY ZONE CTA */ | |
| .study-zone-cta{ | |
| border-radius:var(--radius-xl); | |
| overflow:hidden; | |
| position:relative; | |
| min-height:160px; | |
| background:linear-gradient(160deg,#1a3a5c 0%,#003465 60%,#00214a 100%); | |
| display:flex; | |
| flex-direction:column; | |
| justify-content:flex-end; | |
| padding:1.25rem; | |
| cursor:pointer; | |
| box-shadow:var(--shadow-ambient); | |
| } | |
| .study-zone-cta::before{ | |
| content:''; | |
| position:absolute; | |
| top:-30px;right:-30px; | |
| width:120px;height:120px; | |
| border-radius:50%; | |
| background:rgba(255,255,255,0.04); | |
| } | |
| .study-cta-title{ | |
| font-family:'Manrope',sans-serif; | |
| font-weight:700; | |
| font-size:1rem; | |
| color:#fff; | |
| line-height:1.3; | |
| margin-bottom:0.625rem; | |
| position:relative; | |
| z-index:1; | |
| } | |
| .btn-enroll{ | |
| display:inline-block; | |
| font-size:0.6875rem; | |
| font-weight:700; | |
| letter-spacing:0.08em; | |
| text-transform:uppercase; | |
| color:var(--on-tertiary); | |
| text-decoration:none; | |
| position:relative; | |
| z-index:1; | |
| cursor:pointer; | |
| background:none; | |
| border:none; | |
| padding:0; | |
| } | |
| /* FOOTER */ | |
| .footer{ | |
| background:var(--primary); | |
| margin-top:3rem; | |
| } | |
| .footer-inner{ | |
| max-width:1100px; | |
| margin:0 auto; | |
| padding:2rem 1.5rem; | |
| display:flex; | |
| flex-wrap:wrap; | |
| align-items:center; | |
| gap:1rem; | |
| } | |
| .footer-logo{ | |
| font-family:'Manrope',sans-serif; | |
| font-weight:800; | |
| font-size:1.125rem; | |
| color:#fff; | |
| letter-spacing:-0.02em; | |
| } | |
| .footer-copy{ | |
| font-size:0.6875rem; | |
| color:rgba(255,255,255,0.4); | |
| margin-top:0.125rem; | |
| } | |
| .footer-links{ | |
| flex:1; | |
| display:flex; | |
| justify-content:center; | |
| gap:1.5rem; | |
| flex-wrap:wrap; | |
| } | |
| .footer-links a{ | |
| font-size:0.75rem; | |
| font-weight:500; | |
| letter-spacing:0.04em; | |
| text-transform:uppercase; | |
| color:rgba(255,255,255,0.5); | |
| text-decoration:none; | |
| transition:color 0.2s; | |
| } | |
| .footer-links a:hover{color:#fff} | |
| .footer-social{display:flex;gap:0.75rem} | |
| .footer-icon{ | |
| width:34px;height:34px; | |
| border-radius:var(--radius-full); | |
| border:1.5px solid rgba(255,255,255,0.2); | |
| display:flex;align-items:center;justify-content:center; | |
| cursor:pointer; | |
| transition:border-color 0.2s; | |
| } | |
| .footer-icon:hover{border-color:#fff} | |
| .footer-icon svg{width:15px;height:15px;color:rgba(255,255,255,0.6)} | |
| .footer-icon:hover svg{color:#fff} | |
| /* LOADING STATE */ | |
| .loading-shimmer{ | |
| background:linear-gradient(90deg,var(--surface-low) 25%,var(--surface-card) 50%,var(--surface-low) 75%); | |
| background-size:200% 100%; | |
| animation:shimmer 1.5s infinite; | |
| } | |
| @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} | |
| /* TICKER ANIMATION */ | |
| .ticker-value-updating{ | |
| animation:tick-update 0.3s ease; | |
| } | |
| @keyframes tick-update{ | |
| 0%{transform:translateY(-4px);opacity:0} | |
| 100%{transform:translateY(0);opacity:1} | |
| } | |
| @media(max-width:900px){ | |
| .page-body{grid-template-columns:1fr;grid-template-rows:auto} | |
| .right-sidebar{order:3} | |
| .mini-cards-grid{grid-template-columns:1fr} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAV --> | |
| <div class="nav-wrapper"> | |
| <nav class="nav"> | |
| <a href="/" class="logo">Q-Simplified</a> | |
| <div class="nav-links"> | |
| <a href="/about.html">About</a> | |
| <a href="/trends.html" class="active">Trends</a> | |
| <a href="/study-zone.html">Study Zone</a> | |
| <a href="/test-series.html">Test Series</a> | |
| <a href="/simplified-zone.html">Simplified Zone</a> | |
| <a href="/book-class.html">Book Class</a> | |
| </div> | |
| <a href="/login.html" class="btn-login">Login</a> | |
| </nav> | |
| </div> | |
| <!-- MAIN BODY --> | |
| <main class="page-body"> | |
| <!-- LEFT: INDICATORS --> | |
| <aside> | |
| <div class="indicators-card"> | |
| <div class="indicators-header"> | |
| <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg> | |
| <span class="indicators-title">Indicators/Trends</span> | |
| </div> | |
| <div class="indicators-sub">Real-Time Economic Data</div> | |
| <div id="indicators-list"> | |
| <!-- Populated by JS --> | |
| </div> | |
| <button class="btn-view-all">View All Trends</button> | |
| <div class="ind-social"> | |
| <button class="ind-social-btn" title="Play"> | |
| <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg> | |
| </button> | |
| <button class="ind-social-btn" title="Settings"> | |
| <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93A10 10 0 0 0 4.93 19.07M19.07 19.07A10 10 0 0 0 4.93 4.93"/></svg> | |
| </button> | |
| <button class="ind-social-btn" title="Share"> | |
| <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- CENTER: MAIN FEED --> | |
| <div class="center-feed"> | |
| <!-- FEATURED HERO --> | |
| <div class="featured-card"> | |
| <div class="featured-hero"> | |
| <div class="featured-category-pill">Blogs</div> | |
| <h1 class="featured-hero-title">Deep dives into the financial structures that shape our global economy.</h1> | |
| <p class="featured-hero-desc">Simplified for your growth.</p> | |
| </div> | |
| <!-- Article Image with Tag --> | |
| <div class="featured-article-img-placeholder"> | |
| <span class="article-meta-pill">Analysis</span> | |
| </div> | |
| <div class="featured-article-body"> | |
| <div class="article-meta-row"> | |
| <span class="article-meta-date" id="featured-date">June 24, 2024</span> | |
| <div class="article-meta-sep"></div> | |
| <span class="article-meta-read">12 Min Read</span> | |
| </div> | |
| <h2 class="article-title">The Structural Shifts in Global Bond Markets: What You Need to Know</h2> | |
| <p class="article-excerpt">As central banks pivot their strategies, we analyze the architectural changes in sovereign debt markets and how it impacts the everyday investor's portfolio balance.</p> | |
| <button class="btn-read" id="featured-read-btn" onclick="window.location.href='/blog.html?slug=structural-shifts-global-bond-markets'" style="cursor:pointer"> | |
| Read Full Insight | |
| <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- MINI CARDS --> | |
| <div class="mini-cards-grid"> | |
| <div id="mini-cards-grid" style="display:contents"> | |
| <div class="mini-card" onclick="window.location.href='/blog.html?slug=rbi-monetary-policy-decoded'" style="cursor:pointer"> | |
| <h3 class="mini-card-title">RBI Monetary Policy Decoded</h3> | |
| <p class="mini-card-desc">A granular look at the latest MPC meeting outcomes and future projections.</p> | |
| <div class="mini-card-footer"> | |
| <span class="mini-card-tag">Strategy</span> | |
| <span class="mini-card-arrow"> | |
| <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mini-card" onclick="window.location.href='/blog.html?slug=tax-planning-101'" style="cursor:pointer"> | |
| <h3 class="mini-card-title">Tax Planning 101</h3> | |
| <p class="mini-card-desc">Practical steps to optimize your financial year-end with maximum efficiency.</p> | |
| <div class="mini-card-footer"> | |
| <span class="mini-card-tag">Personal Finance</span> | |
| <span class="mini-card-arrow"> | |
| <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT: SIDEBAR --> | |
| <aside class="right-sidebar"> | |
| <!-- RECENT BLOGS --> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-header"> | |
| <span class="sidebar-title">Recent Blogs</span> | |
| <button class="sidebar-action"> | |
| <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> | |
| </button> | |
| </div> | |
| <div id="recent-blogs-list"> | |
| <!-- Populated by JS --> | |
| </div> | |
| </div> | |
| <!-- LIVE INSIGHTS --> | |
| <div class="live-insights-card"> | |
| <div class="live-insights-header"> | |
| <div class="live-dot"></div> | |
| <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24" style="color:#f4c430"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg> | |
| <span class="live-title">Live Insights</span> | |
| </div> | |
| <div id="live-insights-list"> | |
| <!-- Populated by JS --> | |
| </div> | |
| <button class="btn-all-news">All News</button> | |
| </div> | |
| <!-- STUDY ZONE CTA --> | |
| <div class="study-zone-cta"> | |
| <h3 class="study-cta-title">Master Your Finances with Our Expert Study Zone.</h3> | |
| <button class="btn-enroll">Enroll Now →</button> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- FOOTER --> | |
| <footer class="footer"> | |
| <div class="footer-inner"> | |
| <div> | |
| <div class="footer-logo">Q-Simplified</div> | |
| <div class="footer-copy">© 2024 Q-SIMPLIFIED. THE FINANCIAL ARCHITECT.</div> | |
| </div> | |
| <nav class="footer-links"> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Terms of Service</a> | |
| <a href="#">Contact Us</a> | |
| <a href="#">Sitemap</a> | |
| </nav> | |
| <div class="footer-social"> | |
| <div class="footer-icon"> | |
| <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> | |
| </div> | |
| <div class="footer-icon"> | |
| <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // ========================================== | |
| // API CONFIG | |
| // ========================================== | |
| const API_BASE = ''; // Same origin — FastAPI serves both frontend and API | |
| // ========================================== | |
| // AUTH: update nav button if logged in | |
| // ========================================== | |
| function checkAuth() { | |
| const user = JSON.parse(localStorage.getItem('qs_user') || 'null'); | |
| const exp = +localStorage.getItem('qs_token_exp'); | |
| if (user && exp && Date.now() < exp) { | |
| const btn = document.querySelector('.btn-login'); | |
| if (btn) { | |
| btn.textContent = user.full_name?.split(' ')[0] || 'Account'; | |
| btn.href = '/profile.html'; | |
| } | |
| } | |
| } | |
| // ========================================== | |
| // LIVE INSIGHTS from API | |
| // ========================================== | |
| async function fetchLiveInsights() { | |
| try { | |
| const res = await fetch(`${API_BASE}/api/news/live-insights`); | |
| if (!res.ok) return; | |
| const data = await res.json(); | |
| const insights = data.insights || []; | |
| if (insights.length > 0) { | |
| const container = document.getElementById('live-insights-list'); | |
| container.innerHTML = insights.map(i => `<div class="insight-pill">${i}</div>`).join(''); | |
| } | |
| } catch { /* use static */ } | |
| } | |
| // ========================================== | |
| // FEATURED BLOG from API | |
| // ========================================== | |
| async function fetchFeaturedBlog() { | |
| try { | |
| const res = await fetch(`${API_BASE}/api/blogs/featured`); | |
| if (!res.ok) return; | |
| const data = await res.json(); | |
| const blog = data.blog; | |
| if (!blog) return; | |
| const titleEl = document.querySelector('.article-title'); | |
| const excerptEl = document.querySelector('.article-excerpt'); | |
| const categoryEl = document.querySelector('.article-meta-pill'); | |
| const readTimeEl = document.querySelector('.article-meta-read'); | |
| const readBtn = document.getElementById('featured-read-btn'); | |
| if (titleEl) titleEl.textContent = blog.title; | |
| if (excerptEl) excerptEl.textContent = blog.excerpt; | |
| if (categoryEl) categoryEl.textContent = blog.category || 'Analysis'; | |
| if (readTimeEl) readTimeEl.textContent = `${blog.read_time_minutes || 5} Min Read`; | |
| if (readBtn) { | |
| readBtn.onclick = () => window.location.href = `/blog.html?slug=${blog.slug}`; | |
| } | |
| // Make whole featured card body clickable | |
| const cardBody = document.querySelector('.featured-article-body'); | |
| if (cardBody) { | |
| cardBody.style.cursor = 'pointer'; | |
| cardBody.querySelector('.article-title').onclick = () => window.location.href = `/blog.html?slug=${blog.slug}`; | |
| } | |
| } catch { /* keep static fallback */ } | |
| } | |
| // ========================================== | |
| // MINI CARDS from API | |
| // ========================================== | |
| const esc = s => String(s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"'); | |
| async function fetchMiniCards() { | |
| try { | |
| const res = await fetch(`${API_BASE}/api/blogs?limit=6`); | |
| if (!res.ok) return; | |
| const data = await res.json(); | |
| const blogs = (data.blogs || []).filter(b => !b.featured).slice(0, 2); | |
| if (blogs.length < 2) return; | |
| const grid = document.getElementById('mini-cards-grid'); | |
| if (!grid) return; | |
| grid.innerHTML = blogs.map(b => ` | |
| <div class="mini-card" onclick="window.location.href='/blog.html?slug=${esc(b.slug)}'" style="cursor:pointer"> | |
| <h3 class="mini-card-title">${esc(b.title)}</h3> | |
| <p class="mini-card-desc">${esc(b.excerpt)}</p> | |
| <div class="mini-card-footer"> | |
| <span class="mini-card-tag">${esc(b.category)}</span> | |
| <span class="mini-card-arrow"> | |
| <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> | |
| </span> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } catch { /* keep static fallback */ } | |
| } | |
| // ========================================== | |
| // LIVE BLOGS from API | |
| // ========================================== | |
| async function fetchRecentBlogs() { | |
| try { | |
| const res = await fetch(`${API_BASE}/api/blogs/recent?limit=3`); | |
| if (!res.ok) return; | |
| const data = await res.json(); | |
| if (data.blogs && data.blogs.length > 0) { | |
| const container = document.getElementById('recent-blogs-list'); | |
| const timeAgo = (date) => { | |
| const diff = Date.now() - new Date(date).getTime(); | |
| const days = Math.floor(diff / 86400000); | |
| return days === 0 ? 'Today' : days === 1 ? '1 day ago' : `${days} days ago`; | |
| }; | |
| container.innerHTML = data.blogs.map((b, i) => ` | |
| <div class="blog-list-item" onclick="window.location.href='/blog.html?slug=${esc(b.slug)}'"> | |
| <div class="blog-category-tag">${esc(b.category)}</div> | |
| <div class="blog-list-title">${esc(b.title)}</div> | |
| <div class="blog-list-ago">${esc(timeAgo(b.created_at))}</div> | |
| </div> | |
| ${i < data.blogs.length - 1 ? '<div class="blog-list-spacer"></div>' : ''} | |
| `).join(''); | |
| } | |
| } catch { /* use static */ } | |
| } | |
| // ========================================== | |
| // DATA LAYER — Replace with API calls later | |
| // ========================================== | |
| const INDICATORS = [ | |
| { icon:'🏦', label:'Repo Rate', value:'6.50%', type:'neutral' }, | |
| { icon:'📊', label:'CPI Inflation', value:'4.75%', type:'neutral' }, | |
| { icon:'💱', label:'USD/INR', value:'83.42', type:'neutral' }, | |
| { icon:'📈', label:'Sensex', value:'74,248', type:'positive' }, | |
| { icon:'📉', label:'Nifty 50', value:'22,513', type:'positive' }, | |
| { icon:'🛢️', label:'Crude Oil', value:'$82.40', type:'neutral' }, | |
| ]; | |
| const RECENT_BLOGS = [ | |
| { slug:'digital-rupee-progress-pitfalls', category:'Macroeconomics', title:'The Digital Rupee: Progress and Potential Pitfalls', ago:'2 days ago' }, | |
| { slug:'why-midcap-funds-finding-favor-2024', category:'Investment', title:'Why Mid-Cap Funds are Finding Favor in 2024', ago:'4 days ago' }, | |
| { slug:'understanding-yield-curves-simple-terms', category:'Education', title:'Understanding Yield Curves in Simple Terms', ago:'1 week ago' }, | |
| ]; | |
| const LIVE_INSIGHTS = [ | |
| "India's Forex reserves surge by $2.5 billion to reach $648.5 billion.", | |
| "Brent Crude futures settle lower as supply concerns ease slightly.", | |
| "Tech stocks lead recovery on NSE; midcaps hit record highs.", | |
| ]; | |
| // ========================================== | |
| // RENDER INDICATORS | |
| // ========================================== | |
| function renderIndicators() { | |
| const container = document.getElementById('indicators-list'); | |
| container.innerHTML = INDICATORS.map((ind, i) => ` | |
| <div class="indicator-row" onclick="handleIndicatorClick('${ind.label}')"> | |
| <div class="ind-icon">${ind.icon}</div> | |
| <span class="ind-label">${ind.label}</span> | |
| <span class="ind-value ${ind.type}">${ind.value}</span> | |
| </div> | |
| ${i < INDICATORS.length - 1 ? '<div class="ind-divider"></div>' : ''} | |
| `).join(''); | |
| } | |
| // ========================================== | |
| // RENDER RECENT BLOGS | |
| // ========================================== | |
| function renderRecentBlogs() { | |
| const container = document.getElementById('recent-blogs-list'); | |
| container.innerHTML = RECENT_BLOGS.map((b, i) => ` | |
| <div class="blog-list-item" onclick="window.location.href='/blog.html?slug=${b.slug}'" style="cursor:pointer"> | |
| <div class="blog-category-tag">${b.category}</div> | |
| <div class="blog-list-title">${b.title}</div> | |
| <div class="blog-list-ago">${b.ago}</div> | |
| </div> | |
| ${i < RECENT_BLOGS.length - 1 ? '<div class="blog-list-spacer"></div>' : ''} | |
| `).join(''); | |
| } | |
| // ========================================== | |
| // RENDER LIVE INSIGHTS | |
| // ========================================== | |
| function renderLiveInsights() { | |
| const container = document.getElementById('live-insights-list'); | |
| container.innerHTML = LIVE_INSIGHTS.map(insight => ` | |
| <div class="insight-pill">${insight}</div> | |
| `).join(''); | |
| } | |
| // ========================================== | |
| // LIVE DATA UPDATER (polls API every 60s) | |
| // ========================================== | |
| async function fetchMarketData() { | |
| try { | |
| // Production: replace with your Railway API URL | |
| const res = await fetch(`${API_BASE}/api/market-data/latest`); | |
| if (!res.ok) throw new Error('API not available'); | |
| const data = await res.json(); | |
| updateIndicators(data); | |
| } catch { | |
| // Dev: simulate small price movements | |
| simulatePriceMovement(); | |
| } | |
| } | |
| function simulatePriceMovement() { | |
| const sensexEl = document.querySelector('.ind-value.positive'); | |
| if (sensexEl) { | |
| sensexEl.classList.add('ticker-value-updating'); | |
| setTimeout(() => sensexEl.classList.remove('ticker-value-updating'), 400); | |
| } | |
| } | |
| function updateIndicators(data) { | |
| // Map API response to DOM | |
| const rows = document.querySelectorAll('.indicator-row'); | |
| rows.forEach(row => { | |
| const label = row.querySelector('.ind-label').textContent; | |
| if (data[label]) { | |
| const valueEl = row.querySelector('.ind-value'); | |
| valueEl.textContent = data[label].value; | |
| valueEl.className = `ind-value ${data[label].change > 0 ? 'positive' : data[label].change < 0 ? 'negative' : 'neutral'}`; | |
| valueEl.classList.add('ticker-value-updating'); | |
| setTimeout(() => valueEl.classList.remove('ticker-value-updating'), 400); | |
| } | |
| }); | |
| } | |
| function handleIndicatorClick(label) { | |
| console.log('Navigate to:', label); | |
| // TODO: route to /trends?indicator=label | |
| } | |
| // ========================================== | |
| // INIT | |
| // ========================================== | |
| document.addEventListener('DOMContentLoaded', () => { | |
| renderIndicators(); | |
| renderRecentBlogs(); | |
| renderLiveInsights(); | |
| // Update market data every 60 seconds | |
| fetchMarketData(); | |
| setInterval(fetchMarketData, 60_000); | |
| fetchLiveInsights(); | |
| fetchRecentBlogs(); | |
| fetchFeaturedBlog(); | |
| fetchMiniCards(); | |
| checkAuth(); | |
| // Set featured date | |
| document.getElementById('featured-date').textContent = new Date().toLocaleDateString('en-US', { | |
| month:'long', day:'numeric', year:'numeric' | |
| }).toUpperCase(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |