322 lines
17 KiB
Handlebars
322 lines
17 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="{{@site.locale}}">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>{{meta_title page=(t " (Page %)")}}</title>
|
|
|
|
{{!-- Critical CSS - Above the fold --}}
|
|
<style>
|
|
*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.5;color:#000;background:#fff}h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,serif;font-weight:700;line-height:1.1;color:#000}h1{font-size:36px}h2{font-size:28px}h3{font-size:24px}a{color:#007A4D;text-decoration:none}a:hover{color:#006B42}.ft-container{max-width:1200px;margin:0 auto;padding:0 32px}.ft-container-article{max-width:800px;margin:0 auto;padding:0 32px}.ft-nav{position:sticky;top:0;z-index:300;background:#fff;border-bottom:1px solid #e0e0e0}.ft-nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:56px}.ft-nav-logo{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:700;color:#000;text-decoration:none}.ft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-family:'Source Serif 4',Georgia,serif;font-size:14px;font-weight:500;line-height:1;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all 150ms ease;text-decoration:none;white-space:nowrap}.ft-btn-primary{background:#0d7680;color:#fff;border-color:#0d7680}.ft-btn-primary:hover{background:#005a63;border-color:#005a63;color:#fff}.ft-hero{position:relative;width:100%;min-height:50vh;display:flex;align-items:flex-end;background:#fff}.ft-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.ft-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 40%,transparent 100%);z-index:1}.ft-hero-content{position:relative;z-index:2;width:100%;max-width:800px;margin:0 auto;padding:48px 32px 72px;color:#fff}.ft-hero-title{font-size:48px;font-weight:700;line-height:1.1;margin-bottom:24px;color:#fff;max-width:90%}.ft-hero-excerpt{font-size:20px;line-height:1.6;color:rgba(255,255,255,0.95);margin-bottom:36px;max-width:70%}.ft-stream{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:1024px){.ft-stream{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.ft-stream{grid-template-columns:1fr}}.ft-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e0e0e0;border-radius:4px;overflow:hidden;transition:box-shadow 250ms ease,transform 250ms ease}.ft-card:hover{box-shadow:0 4px 6px rgba(0,0,0,0.07);transform:translateY(-2px)}.ft-card-image{width:100%;aspect-ratio:16/9;object-fit:cover}.ft-card-content{padding:16px;flex:1;display:flex;flex-direction:column}.ft-card-title{font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:700;line-height:1.3;margin-bottom:8px;color:#000}.ft-card-title a{color:inherit;text-decoration:none}.ft-card-title a:hover{color:#007A4D;text-decoration:underline}
|
|
|
|
html, body {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
.site {
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
*, *:before, *:after {
|
|
box-sizing: border-box;
|
|
}
|
|
.kg-card, .kg-audio-card, .kg-embed-card, iframe, video, audio {
|
|
max-width: 100% !important;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.ft-calculator-tabs {
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.ft-tab-btn {
|
|
flex-shrink: 0;
|
|
margin-right: 0;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
.ft-share-bar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
.ft-share-label {
|
|
width: 100%;
|
|
}
|
|
.ft-share-progress {
|
|
width: 100%;
|
|
}
|
|
.ft-table {
|
|
display: block;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
|
|
<link rel="stylesheet" href="{{asset "built/ft-search.css"}}">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{asset "built/broadsheet-hybrid.css"}}">
|
|
|
|
{{ghost_head}}
|
|
{{{block "meta_tags"}}}
|
|
<meta name="description" content="{{#if meta_description}}{{meta_description}}{{else}}{{@site.description}}{{/if}}">
|
|
<meta property="og:description" content="{{#if meta_description}}{{meta_description}}{{else}}{{@site.description}}{{/if}}">
|
|
<meta property="og:title" content="{{meta_title}}">
|
|
<meta property="og:image" content="{{#if @site.cover_image}}{{@site.cover_image}}{{else}}https://iqra.falahos.my/content/images/size/w256h256/2026/07/72961271-45ce-44d6-80cc-b57033d915d5.jpeg{{/if}}">
|
|
|
|
{{!-- Progressive Web App (PWA) & iOS Standalone Meta --}}
|
|
<link rel="manifest" href="{{asset "manifest.webmanifest"}}">
|
|
<meta name="theme-color" content="#0d7680">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Iqra">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{asset "icons/apple-touch-icon.png"}}">
|
|
<link rel="stylesheet" href="{{asset "built/pwa.css"}}">
|
|
<link rel="stylesheet" href="{{asset "built/tools.css"}}">
|
|
|
|
</head>
|
|
|
|
<body class="{{body_class}}{{{block "body_class"}}}">
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<div class="site">
|
|
{{> "ft-masthead-strip"}}
|
|
<!-- FT Navigation -->
|
|
<header class="ft-nav" role="banner">
|
|
<div class="ft-nav-inner">
|
|
<div class="ft-nav-brand">
|
|
<a class="ft-nav-logo" href="{{@site.url}}">
|
|
{{#if @site.logo}}
|
|
<img src="{{@site.logo}}" alt="{{@site.title}}">
|
|
{{else}}
|
|
{{@site.title}}
|
|
{{/if}}
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="ft-nav-menu" role="navigation" aria-label="Main navigation">
|
|
{{navigation}}
|
|
</nav>
|
|
|
|
<div class="ft-nav-actions">
|
|
<div class="ft-nav-search">
|
|
{{> "ft-search"}}
|
|
</div>
|
|
|
|
{{#if @site.members_enabled}}
|
|
<div class="ft-nav-members">
|
|
{{#unless @member}}
|
|
{{#unless @site.members_invite_only}}
|
|
<a class="ft-btn ft-btn-ghost ft-btn-sm" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
|
|
<a class="ft-btn ft-btn-primary ft-btn-sm" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
|
|
{{else}}
|
|
<a class="ft-btn ft-btn-primary ft-btn-sm" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
|
|
{{/unless}}
|
|
{{else}}
|
|
<a class="ft-btn ft-btn-secondary ft-btn-sm" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
|
|
{{/unless}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<button class="ft-nav-burger" aria-label="{{t "Toggle menu"}}" aria-expanded="false" aria-controls="mobile-menu">
|
|
{{> "icons/menu"}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Mobile Menu -->
|
|
<nav class="ft-nav-menu ft-md:hidden" id="mobile-menu" role="navigation" aria-label="Mobile navigation">
|
|
{{navigation}}
|
|
{{#if @site.members_enabled}}
|
|
<div class="ft-nav-members ft-py-4 ft-border-t">
|
|
{{#unless @member}}
|
|
{{#unless @site.members_invite_only}}
|
|
<a class="ft-btn ft-btn-primary ft-w-full ft-mb-2" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
|
|
<a class="ft-btn ft-btn-outline ft-w-full" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
|
|
{{else}}
|
|
<a class="ft-btn ft-btn-primary ft-w-full" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
|
|
{{/unless}}
|
|
{{else}}
|
|
<a class="ft-btn ft-btn-secondary ft-w-full" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
|
|
{{/unless}}
|
|
</div>
|
|
{{/if}}
|
|
</nav>
|
|
|
|
<!-- Left Rail (Desktop) -->
|
|
<aside class="ft-left-rail ft-lg:hidden" role="complementary" aria-label="Sidebar navigation">
|
|
<div class="ft-left-rail-section">
|
|
<h3 class="ft-left-rail-title">Products</h3>
|
|
<a class="ft-left-rail-link" href="/products">Digital Products</a>
|
|
<a class="ft-left-rail-link" href="/tag/falah-cast/">Falah Cast</a>
|
|
<a class="ft-left-rail-link" href="/tag/learning-pack/">Learning Packs</a>
|
|
</div>
|
|
<div class="ft-left-rail-section">
|
|
<h3 class="ft-left-rail-title">Sections</h3>
|
|
{{navigation type="secondary"}}
|
|
</div>
|
|
<div class="ft-left-rail-section">
|
|
<h3 class="ft-left-rail-title">Newsletters</h3>
|
|
<a class="ft-left-rail-link" href="/newsletters/morning-brief">Morning Brief</a>
|
|
<a class="ft-left-rail-link" href="/newsletters/evening-brief">Evening Brief</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<main id="main-content" class="site-content ft-lg:ml-[260px]">
|
|
{{#is "home"}}
|
|
{{> "ft-hero"}}
|
|
{{> "ft-editorial"}}
|
|
{{/is}}
|
|
|
|
{{{body}}}
|
|
</main>
|
|
|
|
<!-- Sticky Newsletter Banner -->
|
|
<div class="ft-newsletter-banner" id="newsletter-banner" role="region" aria-label="Newsletter signup">
|
|
<div class="ft-newsletter-banner-content">
|
|
<div class="ft-newsletter-banner-text">
|
|
<h3 class="ft-newsletter-banner-title">Get the best of Iqra Times</h3>
|
|
<p class="ft-newsletter-banner-desc">Daily Islamic insights, product updates, and exclusive content.</p>
|
|
</div>
|
|
<form class="ft-newsletter-banner-form" action="#/portal/signup" method="POST" data-members-form>
|
|
<input class="ft-newsletter-banner-input" type="email" name="email" placeholder="Your email address" required>
|
|
<button class="ft-btn ft-btn-primary" type="submit">Subscribe</button>
|
|
</form>
|
|
<button class="ft-newsletter-banner-close" aria-label="Dismiss newsletter banner">{{> "icons/x"}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="ft-footer" role="contentinfo">
|
|
<div class="ft-footer-inner">
|
|
<div class="ft-footer-brand">
|
|
<a class="ft-footer-logo" href="{{@site.url}}">{{@site.title}}</a>
|
|
<p class="ft-footer-tagline">{{@site.description}}</p>
|
|
<div class="ft-footer-social">
|
|
{{#each @site.social_links}}
|
|
<a class="ft-footer-social-link" href="{{href}}" target="_blank" rel="noopener" aria-label="{{name}}">
|
|
{{#> (concat "icons/" type)}}
|
|
<span>{{name}}</span>
|
|
{{/undefined}}
|
|
</a>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
|
|
{{#if @site.secondary_navigation}}
|
|
<nav class="ft-footer-section" aria-label="Footer navigation">
|
|
<h3 class="ft-footer-section-title">Sections</h3>
|
|
<ul class="ft-footer-links">
|
|
{{#foreach navigation type="secondary"}}
|
|
<li><a class="ft-footer-link" href="{{url}}">{{label}}</a></li>
|
|
{{/foreach}}
|
|
</ul>
|
|
</nav>
|
|
{{/if}}
|
|
|
|
<nav class="ft-footer-section" aria-label="About">
|
|
<h3 class="ft-footer-section-title">About</h3>
|
|
<ul class="ft-footer-links">
|
|
<li><a class="ft-footer-link" href="/about">About Iqra Times</a></li>
|
|
<li><a class="ft-footer-link" href="/contact">Contact</a></li>
|
|
<li><a class="ft-footer-link" href="/careers">Careers</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<nav class="ft-footer-section" aria-label="Products">
|
|
<h3 class="ft-footer-section-title">Products</h3>
|
|
<ul class="ft-footer-links">
|
|
<li><a class="ft-footer-link" href="/products">Digital Products</a></li>
|
|
<li><a class="ft-footer-link" href="/tag/falah-cast/">Falah Cast</a></li>
|
|
<li><a class="ft-footer-link" href="/tag/learning-pack/">Learning Packs</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<nav class="ft-footer-section" aria-label="Legal">
|
|
<h3 class="ft-footer-section-title">Legal</h3>
|
|
<ul class="ft-footer-links">
|
|
<li><a class="ft-footer-link" href="/privacy">Privacy Policy</a></li>
|
|
<li><a class="ft-footer-link" href="/terms">Terms of Service</a></li>
|
|
<li><a class="ft-footer-link" href="/refunds">Refund Policy</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="ft-footer-bottom">
|
|
<p class="ft-footer-copyright">{{@site.title}} © {{date format="YYYY"}}</p>
|
|
<nav class="ft-footer-legal" aria-label="Legal links">
|
|
<a href="/privacy">Privacy</a>
|
|
<a href="/terms">Terms</a>
|
|
<a href="/cookies">Cookies</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
{{#is "post, page"}}
|
|
{{> "pswp"}}
|
|
{{/is}}
|
|
|
|
{{!-- Fixes 100vh issue on mobile browsers with toolbar on the bottom --}}
|
|
<script>
|
|
if (document.body.classList.contains('with-full-cover') && (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
|
|
const cover = document.getElementsByClassName('ft-hero')[0] || document.getElementsByClassName('cover')[0];
|
|
if (cover) cover.style.height = window.innerHeight + 'px';
|
|
}
|
|
</script>
|
|
|
|
<script src="{{asset "built/tts.js"}}"></script>
|
|
|
|
<script src="{{asset "built/search.js"}}"></script>
|
|
|
|
<script src="https://gumroad.com/js/gumroad.js"></script>
|
|
<script src="{{asset "built/pwa-app.js"}}" defer></script>
|
|
{{ghost_foot}}
|
|
|
|
<script>
|
|
// Mobile menu toggle
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const burger = document.querySelector('.ft-nav-burger');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
if (burger && mobileMenu) {
|
|
burger.addEventListener('click', function() {
|
|
mobileMenu.classList.toggle('open');
|
|
burger.setAttribute('aria-expanded', mobileMenu.classList.contains('open'));
|
|
});
|
|
}
|
|
|
|
// Newsletter banner
|
|
const banner = document.getElementById('newsletter-banner');
|
|
const closeBtn = banner?.querySelector('.ft-newsletter-banner-close');
|
|
if (banner && closeBtn) {
|
|
closeBtn.addEventListener('click', function() {
|
|
banner.style.display = 'none';
|
|
});
|
|
|
|
// Show banner after 30 seconds
|
|
setTimeout(function() {
|
|
if (!localStorage.getItem('newsletter_dismissed')) {
|
|
banner.classList.add('visible');
|
|
}
|
|
}, 30000);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|