Hugging Face's logo

Spaces:
Quran-Lab
/
README
Running

App Files Community
Muno459 commited on
Commit
b130aed
·
verified ·
1 Parent(s): 4ff4d70

org card: literal colours

Browse files
Files changed (1) hide show
  1. index.html +80 -86
index.html CHANGED
@@ -1,86 +1,80 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Quran Lab</title>
7
- <style>
8
- :root {
9
- --ink: #0b3d3a;
10
- --ink-soft: #2f5350;
11
- --ivory: #f8f4ea;
12
- --gold: #d4a853;
13
- }
14
- body {
15
- margin: 0;
16
- min-height: 100vh;
17
- display: grid;
18
- place-items: center;
19
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
20
- color: var(--ink);
21
- background:
22
- radial-gradient(ellipse at 18% 8%, rgba(212, 168, 83, 0.30), transparent 42%),
23
- radial-gradient(ellipse at 88% 96%, rgba(24, 112, 102, 0.55), transparent 48%),
24
- linear-gradient(140deg, #04201f 0%, #0a3a38 52%, #0f4d46 100%);
25
- }
26
- main {
27
- width: min(760px, calc(100vw - 32px));
28
- padding: 56px 56px 50px;
29
- border: 1px solid rgba(212, 168, 83, 0.5);
30
- border-radius: 30px;
31
- background: var(--ivory);
32
- box-shadow: 0 34px 90px rgba(2, 20, 19, 0.55);
33
- }
34
- h1 {
35
- margin: 0;
36
- color: var(--ink);
37
- font-size: clamp(44px, 8vw, 84px);
38
- font-weight: 800;
39
- letter-spacing: -0.045em;
40
- line-height: 0.95;
41
- }
42
- .rule {
43
- width: 168px;
44
- height: 5px;
45
- margin: 22px 0 26px;
46
- border-radius: 999px;
47
- background: var(--gold);
48
- }
49
- p {
50
- margin: 0 0 34px;
51
- max-width: 600px;
52
- color: var(--ink-soft);
53
- font-size: 19px;
54
- line-height: 1.6;
55
- }
56
- .row { display: flex; flex-wrap: wrap; gap: 12px; }
57
- a {
58
- display: inline-block;
59
- padding: 13px 22px;
60
- border-radius: 999px;
61
- border: 1.5px solid var(--ink);
62
- background: var(--ink);
63
- color: var(--ivory);
64
- font-weight: 600;
65
- font-size: 16px;
66
- text-decoration: none;
67
- transition: background 140ms ease, color 140ms ease, transform 140ms ease;
68
- }
69
- a.outline { background: transparent; color: var(--ink); }
70
- a:hover { transform: translateY(-1px); }
71
- a.outline:hover { background: var(--ink); color: var(--ivory); }
72
- </style>
73
- </head>
74
- <body>
75
- <main>
76
- <h1>Quran Lab</h1>
77
- <div class="rule"></div>
78
- <p>Open infrastructure for Quranic speech: restoration, recognition and honest benchmarks.</p>
79
- <div class="row">
80
- <a href="https://huggingface.co/Quran-Lab/sawt-v4">SAWT V4</a>
81
- <a class="outline" href="https://huggingface.co/Quran-Lab/zipformer_p-arabic-v3">Zipformer ASR</a>
82
- <a class="outline" href="https://huggingface.co/datasets/Quran-Lab/quranic-asr-benchmark">Benchmark</a>
83
- </div>
84
- </main>
85
- </body>
86
- </html>
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Quran Lab</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ min-height: 100vh;
11
+ display: grid;
12
+ place-items: center;
13
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
14
+ color: #0b3d3a;
15
+ background:
16
+ radial-gradient(ellipse at 18% 8%, rgba(212, 168, 83, 0.30), transparent 42%),
17
+ radial-gradient(ellipse at 88% 96%, rgba(24, 112, 102, 0.55), transparent 48%),
18
+ linear-gradient(140deg, #04201f 0%, #0a3a38 52%, #0f4d46 100%);
19
+ }
20
+ main {
21
+ width: min(760px, calc(100vw - 32px));
22
+ padding: 56px 56px 50px;
23
+ border: 1px solid rgba(212, 168, 83, 0.5);
24
+ border-radius: 30px;
25
+ background: #f8f4ea;
26
+ box-shadow: 0 34px 90px rgba(2, 20, 19, 0.55);
27
+ }
28
+ h1 {
29
+ margin: 0;
30
+ color: #0b3d3a;
31
+ font-size: clamp(44px, 8vw, 84px);
32
+ font-weight: 800;
33
+ letter-spacing: -0.045em;
34
+ line-height: 0.95;
35
+ }
36
+ .rule {
37
+ width: 168px;
38
+ height: 5px;
39
+ margin: 22px 0 26px;
40
+ border-radius: 999px;
41
+ background: #d4a853;
42
+ }
43
+ p {
44
+ margin: 0 0 34px;
45
+ max-width: 600px;
46
+ color: #2f5350;
47
+ font-size: 19px;
48
+ line-height: 1.6;
49
+ }
50
+ .row { display: flex; flex-wrap: wrap; gap: 12px; }
51
+ a {
52
+ display: inline-block;
53
+ padding: 13px 22px;
54
+ border-radius: 999px;
55
+ border: 1.5px solid #0b3d3a;
56
+ background: #0b3d3a;
57
+ color: #f8f4ea;
58
+ font-weight: 600;
59
+ font-size: 16px;
60
+ text-decoration: none;
61
+ transition: background 140ms ease, color 140ms ease, transform 140ms ease;
62
+ }
63
+ a.outline { background: transparent; color: #0b3d3a; }
64
+ a:hover { transform: translateY(-1px); }
65
+ a.outline:hover { background: #0b3d3a; color: #f8f4ea; }
66
+ </style>
67
+ </head>
68
+ <body>
69
+ <main style="background:#f8f4ea;border:1px solid rgba(212,168,83,0.5);border-radius:30px;">
70
+ <h1 style="color:#0b3d3a;">Quran Lab</h1>
71
+ <div class="rule" style="background:#d4a853;"></div>
72
+ <p style="color:#2f5350;">Open infrastructure for Quranic speech: restoration, recognition and honest benchmarks.</p>
73
+ <div class="row">
74
+ <a style="background:#0b3d3a;color:#f8f4ea;border:1.5px solid #0b3d3a;" href="https://huggingface.co/Quran-Lab/sawt-v4">SAWT V4</a>
75
+ <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>
76
+ <a class="outline" style="background:transparent;color:#0b3d3a;border:1.5px solid #0b3d3a;" href="https://huggingface.co/datasets/Quran-Lab/quranic-asr-benchmark">Benchmark</a>
77
+ </div>
78
+ </main>
79
+ </body>
80
+ </html>