pricewidget/pricev3.html at main · OilpriceAPI/pricewidget · 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
<!DOCTYPE html>
<html>
<head>
    <title>Oil Price Widget</title>
</head>
<body>
    <script>
        !function() {
            let container = document.createElement("div");
            container.innerHTML = `
                <div style="font-family: system-ui; border: 1px solid #ddd; padding: 15px; border-radius: 8px; max-width: 300px; box-shadow: 0 2px 4px rgba(0,0,0,0.1)">
                    <h3 style="margin: 0; color: #333;">Live Oil Price</h3>
                    <div id="oilprice" style="font-size: 28px; font-weight: bold; margin: 10px 0;">Loading...</div>
                    <div id="oiltime" style="font-size: 12px; color: #666;"></div>
                    <div style="font-size: 11px; margin-top: 10px; text-align: right;">via <a href="https://api.oilpriceapi.com" style="color: #007bff; text-decoration: none;">OilPriceAPI</a></div>
                </div>
            `;
            document.body.appendChild(container);

            const fetchPrice = async () => {
                try {
                    const response = await fetch('https://api.oilpriceapi.com/prices');
                    const data = await response.json();
                    document.getElementById("oilprice").textContent = data.formatted;
                    document.getElementById("oiltime").textContent = `Updated: ${new Date(data.created_at).toLocaleString()}`;
                } catch (error) {
                    document.getElementById("oilprice").textContent = "Error loading price";
                    console.error("Error:", error);
                }
            };

            fetchPrice();
            setInterval(fetchPrice, 300000); // Update every 5 minutes
        }();
    </script>
</body>
</html>