sora-rates/index.html at main · kush0511/sora-rates · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SORA Rates — Singapore</title>
    <meta name="description"
        content="Live SORA, 1-Month and 3-Month Compounded SORA interest rates from the Monetary Authority of Singapore.">
    <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=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
    <script
        src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <main class="app">
        <!-- ─── Header ─── -->
        <header class="header">
            <div class="pill">MAS Domestic Interest Rates</div>
            <h1 class="title">SORA</h1>
            <p class="subtitle">Singapore Overnight Rate Average</p>
            <div class="status" id="status">
                <span class="status-dot"></span>
                <span id="statusText">Connecting…</span>
            </div>
        </header>

        <!-- ─── Rate Hero Cards ─── -->
        <section class="rate-cards" id="rateCards">
            <div class="rate-card rc-sora">
                <div class="rc-label">Overnight SORA</div>
                <div class="rc-value" id="heroSora">—</div>
                <div class="rc-change" id="heroSoraChange"></div>
            </div>
            <div class="rate-card rc-1m">
                <div class="rc-label">1M Compounded</div>
                <div class="rc-value" id="hero1m">—</div>
                <div class="rc-change" id="hero1mChange"></div>
            </div>
            <div class="rate-card rc-3m">
                <div class="rc-label">3M Compounded</div>
                <div class="rc-value" id="hero3m">—</div>
                <div class="rc-change" id="hero3mChange"></div>
            </div>
        </section>

        <!-- ─── Chart ─── -->
        <section class="panel chart-panel" id="chartPanel">
            <div class="panel-bar">
                <h2>Rate Trends</h2>
                <div class="legend">
                    <span class="lg"><i class="dot d-sora"></i>SORA</span>
                    <span class="lg"><i class="dot d-1m"></i>1M</span>
                    <span class="lg"><i class="dot d-3m"></i>3M</span>
                </div>
            </div>
            <div class="chart-area">
                <canvas id="chart"></canvas>
            </div>
        </section>


        <!-- ─── Table ─── -->
        <section class="panel table-panel" id="tablePanel">
            <div class="panel-bar">
                <h2>Daily Rates</h2>
                <button class="toggle-btn" id="toggleBtn">Show all</button>
            </div>
            <table id="ratesTable">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>SORA</th>
                        <th>1M</th>
                        <th>3M</th>
                    </tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
        </section>

        <!-- ─── Footer ─── -->
        <footer class="foot">
            <p>Data sourced via <a href="https://housingloansg.com/hl/charts/sora-and-compounded-sora-trend"
                    target="_blank" rel="noopener">HousingLoanSG</a> &middot; Updated daily</p>
        </footer>
    </main>

    <script src="script.js"></script>
</body>

</html>