104 lines
6.8 KiB
HTML
104 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Iqra Editorial UI/UX Proposals — Review Dashboard</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f1117; color: #f0f3f6; padding: 40px 24px; }
|
|
.wrap { max-width: 1200px; margin: 0 auto; }
|
|
h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; color: #fff; }
|
|
p.subtitle { font-size: 16px; color: #8b949e; margin-bottom: 32px; }
|
|
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
|
|
.card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; }
|
|
.card:hover { transform: translateY(-4px); border-color: #58a6ff; }
|
|
.card.featured { border: 2px solid #238636; }
|
|
.card-img-wrap { width: 100%; height: 320px; overflow: hidden; background: #0d1117; position: relative; border-bottom: 1px solid #30363d; }
|
|
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
|
|
.badge { position: absolute; top: 12px; left: 12px; background: #238636; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.card-content { padding: 20px; display: flex; flex-direction: column; flex: 1; }
|
|
.card-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; }
|
|
.card-desc { font-size: 14px; color: #8b949e; line-height: 1.5; margin-bottom: 20px; flex: 1; }
|
|
.card-actions { display: flex; gap: 12px; }
|
|
.btn { padding: 10px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; }
|
|
.btn-primary { background: #238636; color: #fff; flex: 1; }
|
|
.btn-primary:hover { background: #2ea043; }
|
|
.btn-secondary { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; }
|
|
.btn-secondary:hover { background: #30363d; color: #fff; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<h1>Iqra Editorial UI/UX Proposals</h1>
|
|
<p class="subtitle">Review the high-fidelity prototypes and full renders below. Click "Open Prototype" to view the live responsive HTML.</p>
|
|
|
|
<div class="grid">
|
|
<!-- DIRECTION 4 (HYBRID: FT/TERMINAL + NYT) -->
|
|
<div class="card featured">
|
|
<div class="card-img-wrap">
|
|
<span class="badge">Recommended Hybrid</span>
|
|
<img src="previews/ft_nyt_hybrid_preview.png" alt="Direction 4 Preview">
|
|
</div>
|
|
<div class="card-content">
|
|
<h2 class="card-title">Direction 4: The Sovereign Broadsheet (FT & NYT Hybrid)</h2>
|
|
<p class="card-desc">Blends the warm broadsheet aesthetics and live telemetry of Designs 1 & 3 with the 3-zone front-page architecture of The New York Times (Lead Package, Visual Anchor, and Voices of Iqra Opinion Rail).</p>
|
|
<div class="card-actions">
|
|
<a href="direction-4-herald-broadsheet.html" class="btn btn-primary" target="_blank">Open Interactive Prototype →</a>
|
|
<a href="previews/ft_nyt_hybrid_preview.png" class="btn btn-secondary" target="_blank">Full Render PNG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIRECTION 1 (FT.COM BENCHMARK) -->
|
|
<div class="card">
|
|
<div class="card-img-wrap">
|
|
<span class="badge" style="background: #0E4D36;">FT.com Benchmark</span>
|
|
<img src="previews/ft_gazette_preview.png" alt="Direction 1 Preview">
|
|
</div>
|
|
<div class="card-content">
|
|
<h2 class="card-title">Direction 1: The Falah Gazette (FT Benchmark)</h2>
|
|
<p class="card-desc">Signature FT warm salmon-linen paper (#FFF1E5), double-rule broadsheet masthead, live Nisab top ticker, asymmetric 3-column lead, The Jauhari Column, and Voices of Iqra 5-fellow horizontal rail.</p>
|
|
<div class="card-actions">
|
|
<a href="direction-1-falah-gazette.html" class="btn btn-primary" target="_blank">Open Interactive Prototype →</a>
|
|
<a href="previews/ft_gazette_preview.png" class="btn btn-secondary" target="_blank">Full Render PNG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIRECTION 3 (TERMINAL INTELLIGENCE) -->
|
|
<div class="card">
|
|
<div class="card-img-wrap">
|
|
<span class="badge" style="background: #026E54;">Bloomberg / Semafor</span>
|
|
<img src="previews/sovereign_rail_preview.png" alt="Direction 3 Preview">
|
|
</div>
|
|
<div class="card-content">
|
|
<h2 class="card-title">Direction 3: Sukuk & Sovereign Rail</h2>
|
|
<p class="card-desc">Modern financial intelligence terminal with Semafor-style structured takeaway micro-drawers (The Signal, The Fiqh, The Exposure) and an interactive quantitative suite dock.</p>
|
|
<div class="card-actions">
|
|
<a href="direction-3-sovereign-rail.html" class="btn btn-primary" target="_blank">Open Interactive Prototype →</a>
|
|
<a href="previews/sovereign_rail_preview.png" class="btn btn-secondary" target="_blank">Full Render PNG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DIRECTION 2 (AL-QALAM REVIEW) -->
|
|
<div class="card">
|
|
<div class="card-img-wrap">
|
|
<span class="badge" style="background: #165B33;">Scholarly Journal</span>
|
|
<img src="previews/alqalam_review_preview.png" alt="Direction 2 Preview">
|
|
</div>
|
|
<div class="card-content">
|
|
<h2 class="card-title">Direction 2: Al-Qalam Review</h2>
|
|
<p class="card-desc">Foreign Affairs and London Review of Books aesthetic. Generous whitespace on book-stock ivory paper, single-column grand monograph with pull-quotes and classical drop-caps.</p>
|
|
<div class="card-actions">
|
|
<a href="direction-2-alqalam-review.html" class="btn btn-primary" target="_blank">Open Interactive Prototype →</a>
|
|
<a href="previews/alqalam_review_preview.png" class="btn btn-secondary" target="_blank">Full Render PNG</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|