File size: 6,750 Bytes
4aa69ed | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | <!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>
|