diff --git a/index.html b/index.html
index b2e8ba9..3703602 100644
--- a/index.html
+++ b/index.html
@@ -3,60 +3,87 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <!-- Sertakan axios dari CDN -->
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+ <title>Oil Price frame</title>
+
</head>
<body>
<style>
.oilpricenettable2 {
display: none;
}
+ td a {
+ pointer-events: none;
+ font-weight: 600;
+ text-decoration: none;
+ }
+
+ table {
+ border: 1px solid !important;
+ }
+ td {
+ border: 1px solid;
+ }
+
+ .up {
+ color: #008000;
+ }
+ .down {
+ color: #ff0000;
+ }
</style>
<script type="text/javascript" src="https://www.oil-price.net/TABLE3/gen.php?lang=en"> </script>
<script type="text/javascript" src="https://www.oil-price.net/widgets/brent_text/gen.php?lang=en"> </script>
<script type="text/javascript" src="https://www.oil-price.net/widgets/natural_gas_text/gen.php?lang=en"> </script>
<script type="text/javascript" src="https://www.gold-quote.net/TABLE2/gen.php?lang=en"> </script>
+<noscript> To get the <a href="http://www.gold-quote.net">gold price</a>, please enable Javascript.</noscript>
+<table summary="Gold oil price (c) http://oil-price.net" cellspacing="5" cellpadding="5" border="0"
+ style="font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif; font-size: 12px ; margin: 5px; border-collapse: collapse; text-align: left; border-color: #FFFFFF; border-width: 0px 0px 0px 0px;">
+ <tbody>
+ <tr valign="bottom" id="targetRow">
+ <!-- code -->
+ <td><a href="#">Gold Price</a></td>
+ </tr>
+ </tbody>
+</table>
+<script>
+ function transferData() {
+
+ const sourceTable = document.querySelector('.oilpricenettable2');
+ const goldPrice = sourceTable.querySelector('tr:nth-child(2) td:first-child span').textContent.trim();
+ const dataTds = sourceTable.querySelectorAll('tr:nth-child(2) td');
+
+ const targetRow = document.getElementById('targetRow');
-<script>
- // Ambil semua tabel dengan kelas 'oilpricenettable2'
-const tables = document.querySelectorAll('.oilpricenettable2');
-
-// Loop melalui setiap tabel
-tables.forEach((table, index) => {
- // Ambil semua elemen <tr> dalam tabel tersebut
- const rows = table.querySelectorAll('tr');
-
- // Periksa apakah ada <tr> kedua
- if (rows.length > 1) {
- // Ambil elemen <tr> kedua
- const secondRow = rows[2];
-
- // Ambil semua elemen <td> dari <tr> kedua
- const tds = secondRow.querySelectorAll('td');
-
- // Buat elemen <div> untuk menampung hasil
- const outputDiv = document.createElement('div');
- outputDiv.classList.add(`output-table-${index}`); // Tambahkan kelas unik untuk identifikasi
-
- // Loop melalui setiap <td> dan masukkan kontennya ke dalam <p>
- tds.forEach(td => {
- const paragraph = document.createElement('td');
- paragraph.textContent = td.textContent.trim();
- outputDiv.appendChild(paragraph);
- });
-
- // Tambahkan elemen baru ini ke body atau elemen lain di halaman
- document.body.appendChild(outputDiv);
- }
-});
+
+ const goldPriceTd = document.createElement('td');
+ goldPriceTd.textContent = goldPrice.replace('$', '');
+ targetRow.appendChild(goldPriceTd);
+
+
+ const changeSymbol = dataTds[1].textContent.trim().charAt(0);
+ const percentageContent = dataTds[3].textContent.trim();
+ const newTd = document.createElement('td');
+
+ if (changeSymbol === '▲') {
+ newTd.textContent = `+${percentageContent}`;
+ newTd.classList.add('up');
+ } else if (changeSymbol === '▼') {
+ newTd.textContent = `-${percentageContent}`;
+ newTd.classList.add('down');
+ } else {
+ newTd.textContent = percentageContent;
+ }
+
+ targetRow.appendChild(newTd);
+ }
+ window.onload = transferData;
</script>
</body>
</html>