| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Quran Lab</title> |
| <style> |
| body { |
| margin: 0; |
| min-height: 100vh; |
| display: grid; |
| place-items: center; |
| font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| color: #0b3d3a; |
| background: linear-gradient(140deg, #04201f 0%, #0a3a38 52%, #0f4d46 100%); |
| } |
| .frame { |
| width: min(780px, calc(100vw - 32px)); |
| padding: 2px; |
| border-radius: 32px; |
| background: linear-gradient(120deg, #d4a853, #f1dfae, #0f7a6e, #d4a853, #f1dfae); |
| background-size: 300% 300%; |
| animation: frame 14s ease-in-out infinite; |
| box-shadow: 0 34px 90px rgba(2, 20, 19, 0.55); |
| } |
| @keyframes frame { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| main { |
| position: relative; |
| overflow: hidden; |
| padding: 56px 56px 52px; |
| border-radius: 30px; |
| background: linear-gradient(160deg, #faf7f0 0%, #f4eee0 100%); |
| } |
| .wash { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(48px); |
| pointer-events: none; |
| will-change: transform; |
| } |
| .w1 { width: 520px; height: 520px; left: -160px; top: -240px; |
| background: radial-gradient(circle, rgba(212, 168, 83, 0.55), rgba(212, 168, 83, 0) 70%); |
| animation: float1 16s ease-in-out infinite alternate; } |
| .w2 { width: 560px; height: 560px; right: -220px; top: -120px; |
| background: radial-gradient(circle, rgba(15, 122, 110, 0.38), rgba(15, 122, 110, 0) 70%); |
| animation: float2 19s ease-in-out infinite alternate; } |
| .w3 { width: 480px; height: 480px; left: 30%; bottom: -300px; |
| background: radial-gradient(circle, rgba(241, 223, 174, 0.7), rgba(241, 223, 174, 0) 70%); |
| animation: float3 22s ease-in-out infinite alternate; } |
| @keyframes float1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(140px, 90px) scale(1.2); } } |
| @keyframes float2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-160px, 120px) scale(0.9); } } |
| @keyframes float3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-120px, -90px) scale(1.25); } } |
| .content { position: relative; } |
| h1 { |
| display: inline-block; |
| margin: 0; |
| padding: 0 0.06em 0.14em 0; |
| color: #0b3d3a; |
| font-size: clamp(44px, 8vw, 84px); |
| font-weight: 800; |
| letter-spacing: -0.045em; |
| line-height: 1; |
| background: linear-gradient(100deg, #0b3d3a 0%, #0b3d3a 42%, #1f8a7b 50%, #0b3d3a 58%, #0b3d3a 100%); |
| background-size: 250% 100%; |
| -webkit-background-clip: text; |
| background-clip: text; |
| -webkit-text-fill-color: transparent; |
| animation: sheen 7s ease-in-out infinite, rise 900ms cubic-bezier(.2,.7,.2,1) both; |
| } |
| @keyframes sheen { |
| 0%, 55% { background-position: 100% 0; } |
| 75%, 100% { background-position: 0% 0; } |
| } |
| .rule { |
| width: 168px; height: 5px; |
| margin: 10px 0 26px; |
| border-radius: 999px; |
| background: linear-gradient(90deg, #d4a853, #f1dfae, #d4a853); |
| background-size: 200% 100%; |
| animation: shimmer 5s linear infinite, rise 900ms 120ms cubic-bezier(.2,.7,.2,1) both; |
| } |
| @keyframes shimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } } |
| p { |
| margin: 0 0 30px; |
| max-width: 600px; |
| color: #2f5350; |
| font-size: 19px; |
| line-height: 1.6; |
| animation: rise 900ms 220ms cubic-bezier(.2,.7,.2,1) both; |
| } |
| .row { display: flex; flex-wrap: wrap; gap: 12px; } |
| a { |
| position: relative; |
| overflow: hidden; |
| display: inline-block; |
| padding: 13px 22px; |
| border-radius: 999px; |
| border: 1.5px solid #0b3d3a; |
| background: #0b3d3a; |
| color: #f8f4ea; |
| font-weight: 600; |
| font-size: 16px; |
| text-decoration: none; |
| transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease; |
| animation: rise 800ms cubic-bezier(.2,.7,.2,1) both; |
| } |
| a:nth-child(1) { animation-delay: 320ms; } |
| a:nth-child(2) { animation-delay: 400ms; } |
| a:nth-child(3) { animation-delay: 480ms; } |
| a.outline { background: transparent; color: #0b3d3a; } |
| a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11, 61, 58, 0.25); } |
| a.outline:hover { background: #0b3d3a; color: #f8f4ea; } |
| a::after { |
| content: ""; |
| position: absolute; top: 0; left: -80%; |
| width: 50%; height: 100%; |
| background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0)); |
| transform: skewX(-20deg); |
| transition: left 500ms ease; |
| } |
| a:hover::after { left: 130%; } |
| @keyframes rise { |
| from { opacity: 0; transform: translateY(14px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| @media (prefers-reduced-motion: reduce) { |
| .frame, .wash, h1, .rule, p, a { animation: none !important; } |
| h1 { -webkit-text-fill-color: #0b3d3a; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="frame" style="background:linear-gradient(120deg,#d4a853,#f1dfae,#0f7a6e,#d4a853);border-radius:32px;padding:2px;"> |
| <main style="background:#f8f4ea;border-radius:30px;"> |
| <div class="wash w1"></div> |
| <div class="wash w2"></div> |
| <div class="wash w3"></div> |
| <div class="content"> |
| <h1 style="color:#0b3d3a;">Quran Lab</h1> |
| <div class="rule" style="background:#d4a853;"></div> |
| <p style="color:#2f5350;">Open infrastructure for Quranic speech: restoration, recognition and honest benchmarks.</p> |
| <div class="row"> |
| <a style="background:#0b3d3a;color:#f8f4ea;border:1.5px solid #0b3d3a;" href="https://huggingface.co/Quran-Lab/sawt-v4">SAWT V4</a> |
| <a class="outline" style="background:transparent;color:#0b3d3a;border:1.5px solid #0b3d3a;" href="https://huggingface.co/Quran-Lab/zipformer_p-arabic-v3">Zipformer ASR</a> |
| <a class="outline" style="background:transparent;color:#0b3d3a;border:1.5px solid #0b3d3a;" href="https://huggingface.co/spaces/Quran-Lab/quranic-asr-leaderboard">Leaderboard</a> |
| </div> |
| </div> |
| </main> |
| </div> |
| </body> |
| </html> |
|
|
