1 2 3 4<!DOCTYPE html> 5<html lang="zxx" dir="ltr"> 6 7<head> 8 <!-- Standard Meta --> 9 <meta charset="utf-8"> 10 <meta name="description" content=""> 11 <meta name="keywords" content=""> 12 <meta name="author" content="Daro Data Teknologi"> 13 <meta name="viewport" content="width=device-width, initial-scale=1"> 14 <meta name="theme-color" content="#e9e8f0" /> 15 16 <!-- Site Properties --> 17 <title>iBank</title> 18 19 <!--favicon icon--> 20 <link rel="icon" href="../ibank/assets/img/icon_app_ibank_lite.png" type="image/png" sizes="16x16"> 21 22 <!--google fonts--> 23 <!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7COpen+Sans&display=swap" rel="stylesheet"> --> 24 <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet"> 25 26 <!--Bootstrap css--> 27 <link rel="stylesheet" href="css2/bootstrap.min.css"> 28 <!--Magnific popup css--> 29 <link rel="stylesheet" href="css2/magnific-popup.css"> 30 <!--Themify icon css--> 31 <link rel="stylesheet" href="css2/themify-icons.css"> 32 <link rel="stylesheet" type="text/css" href="css2/font-awsome.css"> 33 <!--animated css--> 34 <link rel="stylesheet" href="css2/animate.min.css"> 35 <!--ytplayer css--> 36 <link rel="stylesheet" href="css2/jquery.mb.YTPlayer.min.css"> 37 <!--Owl carousel css--> 38 <link rel="stylesheet" href="css2/owl.carousel.min.css"> 39 <link rel="stylesheet" href="css2/owl.theme.default.min.css"> 40 <!--custom css--> 41 <link rel="stylesheet" href="css2/style.css"> 42 <link rel="stylesheet" href="fonts2/icomoon/style.css"> 43 <!-- Minified Font Awesome CSS --> 44 <link rel="stylesheet" type="text/css" href="css2/font-awesome.min.css"> 45 46 <!-- WhatsChat Layout CSS --> 47 <link rel="stylesheet" type="text/css" href="css2/whatschat-layout.css"/> 48 <!-- WhatsChat Custom Style-1 CSS (required) --> 49 <link rel="stylesheet" type="text/css" href="css2/style/whatschat-style10.css"/> 50 <!-- WhatsChat Color CSS (This is only for Live Demo) --> 51 <link id="whatschat-color" rel="stylesheet" href="css2/colors/color-green.css"> 52 53 <!--responsive css--> 54 <link rel="stylesheet" href="css2/responsive.css"> 55 <style type="text/css"> 56 </style> 57 58
58<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
58 59 <style type="text/css"> 60 .uk-link-text { 61 list-style: none; 62 padding-left: 0; 63 } 64 65 .uk-link-text li a { 66 color: #333333; 67 font-weight: 600; 68 } 69 </style> 70 <style> 71 .rate-page { 72 background: linear-gradient(180deg, #f7f9fb 0%, #eef3f6 100%); 73 } 74 75 .ptb-50 { 76 padding: 50px 0; 77 } 78 79 .rate-page .section-title { 80 display: flex; 81 align-items: flex-start; 82 gap: 16px; 83 } 84 85 .rate-page .section-title-bar { 86 width: 5px; 87 height: 50px; 88 border-radius: 3px; 89 background: linear-gradient(180deg, #d8a633 0%, #a3781f 100%); 90 flex-shrink: 0; 91 margin-top: 3px; 92 } 93 94 .rate-page .section-heading h2 { 95 color: #17324d; 96 letter-spacing: 0; 97 font-size: 30px; 98 font-weight: 800; 99 line-height: 1.15; 100 margin-bottom: 4px; 101 } 102 103 .rate-page .section-heading p { 104 font-size: 13px; 105 color: #6c757d; 106 margin-bottom: 0; 107 } 108 109 .rate-page .section-heading .update-badge { 110 display: inline-flex; 111 align-items: center; 112 gap: 8px; 113 padding: 7px 16px; 114 border-radius: 999px; 115 background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%); 116 border: 1px solid rgba(23, 50, 77, 0.08); 117 box-shadow: 0 6px 18px rgba(23, 50, 77, 0.08); 118 font-size: 12px; 119 color: #526678; 120 } 121 122 .rate-page .section-heading .update-badge .update-label { 123 font-weight: 600; 124 } 125 126 .rate-page .section-heading .update-badge strong { 127 color: #17324d; 128 font-weight: 800; 129 } 130 131 .rate-page .section-heading .update-badge .update-dot { 132 width: 7px; 133 height: 7px; 134 border-radius: 50%; 135 background: #11875d; 136 flex-shrink: 0; 137 animation: update-pulse 1.6s ease-out infinite; 138 } 139 140 @keyframes update-pulse { 141 0% { box-shadow: 0 0 0 0 rgba(17, 135, 93, 0.45); } 142 70% { box-shadow: 0 0 0 7px rgba(17, 135, 93, 0); } 143 100% { box-shadow: 0 0 0 0 rgba(17, 135, 93, 0); } 144 } 145 146 .metal-panel { 147 border: 1px solid rgba(23, 50, 77, 0.08) !important; 148 border-radius: 12px !important; 149 overflow: hidden; 150 box-shadow: 0 18px 45px rgba(23, 50, 77, 0.08) !important; 151 } 152 153 154 .metal-panel .card-body { 155 padding: 28px; 156 } 157 158 .rate-metal-grid { 159 align-items: stretch; 160 } 161 162 .rate-metal-col { 163 display: flex; 164 } 165 166 .rate-metal-grid .metal-panel { 167 width: 100%; 168 height: 100%; 169 border: 0 !important; 170 border-radius: 6px !important; 171 box-shadow: none !important; 172 } 173 174 .rate-metal-grid .metal-panel .card-body { 175 display: flex; 176 flex-direction: column; 177 padding: 26px; 178 } 179 180 .rate-metal-grid .gold-panel { 181 background: linear-gradient(180deg, #d6a52f 0%, #b88718 100%); 182 border-top: 0 !important; 183 color: #fff; 184 } 185 186 .rate-metal-grid .silver-panel { 187 background: linear-gradient(180deg, #b9c0c6 0%, #8d979f 100%); 188 border-top: 0 !important; 189 color: #fff; 190 } 191 192 .metal-panel.gold-panel {
193 border-top: 4px solid #c99b2f !important; 194 } 195 196 .metal-panel.silver-panel { 197 border-top: 4px solid #8c98a4 !important; 198 } 199 200 .rate-metal-grid .metal-panel.gold-panel, 201 .rate-metal-grid .metal-panel.silver-panel { 202 border-top: 0 !important; 203 } 204 205 .metal-logo-wrap { 206 min-height: 92px; 207 display: flex; 208 align-items: center; 209 justify-content: center; 210 } 211 212 .metal-logo { 213 display: block; 214 width: auto; 215 max-width: 380px; 216 height: auto; 217 max-height: 82px; 218 object-fit: contain; 219 } 220 221 .rate-metal-grid .metal-logo-wrap { 222 justify-content: flex-start; 223 min-height: 58px; 224 margin-bottom: 18px !important; 225 padding-bottom: 14px; 226 border-bottom: 1px solid rgba(255, 255, 255, 0.36); 227 } 228 229 .rate-metal-grid .metal-logo { 230 max-width: 250px; 231 max-height: 50px; 232 filter: brightness(0) invert(1); 233 } 234 235 .price-card { 236 min-height: 148px; 237 border: 1px solid rgba(23, 50, 77, 0.08) !important; 238 border-radius: 12px !important; 239 background: #ffffff !important; 240 color: #17324d; 241 overflow: hidden; 242 position: relative; 243 box-shadow: none; 244 } 245 246 .price-card.buy-card, 247 .price-card.sell-card, 248 .price-card.silver-buy, 249 .price-card.silver-sell { 250 background: #ffffff !important; 251 } 252 253 .price-card small { 254 display: block; 255 color: #6c757d; 256 font-weight: 700; 257 letter-spacing: 0.2px; 258 text-transform: uppercase; 259 } 260 261 .price-card h3 { 262 margin-top: 10px; 263 font-size: 27px; 264 font-weight: 800; 265 color: #17324d; 266 } 267 268 .rate-metal-grid .price-card { 269 min-height: 0; 270 border-radius: 12px !important; 271 background: #ffffff !important; 272 border: 1px solid rgba(23, 50, 77, 0.08) !important; 273 box-shadow: none; 274 color: #17324d; 275 } 276 277 .rate-metal-grid .price-card:after { 278 display: none; 279 } 280 281 .rate-metal-grid .price-card .card-body { 282 padding: 18px 16px 20px; 283 align-items: center; 284 justify-content: center; 285 text-align: center; 286 } 287 288 .rate-metal-grid .price-card small { 289 width: auto; 290 min-height: 0; 291 display: inline-flex; 292 align-items: center; 293 justify-content: center; 294 padding: 4px 14px; 295 border-radius: 999px; 296 background: #f4f6f8; 297 color: #526678; 298 font-size: 10px; 299 font-weight: 800; 300 letter-spacing: 1.5px; 301 line-height: 1; 302 text-transform: uppercase; 303 } 304 305 .rate-metal-grid .price-card.buy-card small, 306 .rate-metal-grid .price-card.silver-buy small { 307 color: #11875d; 308 background: rgba(17, 135, 93, 0.10); 309 } 310 311 .rate-metal-grid .price-card.sell-card small, 312 .rate-metal-grid .price-card.silver-sell small { 313 color: #c4493d; 314 background: rgba(196, 73, 61, 0.10); 315 } 316 317 .rate-metal-grid .price-card h3 { 318 color: #17324d; 319 font-size: 23px; 320 line-height: 1.2; 321 margin: 14px 0 0 !important; 322 word-break: break-word; 323 } 324 325 .rate-metal-grid .price-value { 326 display: inline-block; 327 white-space: nowrap; 328 } 329 330 .rate-metal-grid .price-tail, 331 .rate-metal-grid .price-unit { 332 display: inline-block; 333 font-size: 56%; 334 font-weight: 800; 335 line-height: 1; 336 vertical-align: baseline; 337 color: #9a8f76; 338 } 339 340 .rate-metal-grid .price-unit { 341 margin-left: 2px; 342 } 343 344 .rate-metal-grid .rate-badge { 345 display: inline-flex !important; 346 align-items: center; 347 justify-content: center; 348 gap: 6px; 349 min-height: 24px; 350 margin-top: 12px; 351 padding: 4px 10px; 352 border-radius: 999px; 353 border: 1px solid rgba(23, 50, 77, 0.1); 354 background: #f8f9fb; 355 box-shadow: none; 356 color: #526678 !important; 357 font-size: 12px; 358 font-weight: 800; 359 line-height: 1; 360 } 361 362 .rate-metal-grid .rate-badge.rate-trend-up { 363 color: #11875d !important; 364 background: rgba(17, 135, 93, 0.08); 365 border-color: rgba(17, 135, 93, 0.18); 366 } 367 368 .rate-metal-grid .rate-badge.rate-trend-down { 369 color: #c4493d !important; 370 background: rgba(196, 73, 61, 0.08); 371 border-color: rgba(196, 73, 61, 0.18); 372 } 373 374 .rate-metal-grid .rate-badge .fa { 375 width: 17px; 376 height: 17px; 377 display: inline-flex; 378 align-items: center; 379 justify-content: center; 380 margin-right: 0; 381 border-radius: 50%; 382 background: rgba(255, 255, 255, 0.9); 383 color: #fff; 384 font-size: 9px; 385 } 386 387 .rate-metal-grid .rate-badge.rate-trend-up .fa { 388 background: #11875d; 389 } 390 391 .rate-metal-grid .rate-badge.rate-trend-down .fa { 392 background: #c4493d; 393 } 394 395 .rate-metal-grid .rate-badge.rate-trend-flat .fa { 396 background: #6f7f84; 397 } 398 399 .rate-update-line { 400 display: flex; 401 flex-wrap: wrap; 402 align-items: center; 403 gap: 5px; 404 margin-top: 2px; 405 color: rgba(255, 255, 255, 0.9); 406 font-size: 12px; 407 line-height: 1.4; 408 } 409 410 .rate-page .section-heading .rate-update-line { 411 justify-content: flex-end; 412 margin-top: 0;
413 color: #526678; 414 } 415 416 .rate-update-line strong { 417 color: #fff; 418 font-weight: 800; 419 } 420 421 .rate-page .section-heading .rate-update-line strong { 422 color: #17324d; 423 } 424 425 .rate-badge { 426 border-radius: 999px; 427 padding: 6px 10px; 428 font-weight: 800; 429 box-shadow: 0 6px 14px rgba(23, 50, 77, 0.12); 430 } 431 432 .rate-badge .fa { 433 margin-right: 5px; 434 font-size: 11px; 435 } 436 437 .update-card { 438 min-height: 148px; 439 border: 1px solid rgba(201, 155, 47, 0.24) !important; 440 border-radius: 10px !important; 441 background: #fffaf0; 442 } 443 444 .update-card h5 { 445 color: #17324d; 446 font-weight: 800; 447 } 448 449 .rate-alert { 450 border: 0; 451 border-left: 4px solid #d8a633; 452 border-radius: 10px; 453 background: #fff8e6; 454 color: #73551b; 455 font-weight: 600; 456 } 457 458 .rate-metal-grid .update-card { 459 display: none; 460 } 461 462 .rate-metal-grid .chart-card { 463 margin-top: 8px; 464 } 465 466 .rate-metal-grid .chart-card .card-body { 467 padding: 18px; 468 } 469 470 .rate-metal-grid .chart-card h4 { 471 font-size: 18px; 472 } 473 474 .rate-metal-grid .rate-alert { 475 margin-top: 18px !important; 476 margin-bottom: 0; 477 padding: 0; 478 border: 0; 479 background: transparent; 480 color: rgba(255, 255, 255, 0.92); 481 font-size: 12px; 482 line-height: 1.65; 483 } 484 485 .rate-alert-list { 486 margin: 0; 487 padding: 0; 488 list-style: none; 489 } 490 491 .rate-alert-list li { 492 position: relative; 493 margin-bottom: 16px; 494 padding-left: 44px; 495 color: #fff; 496 font-size: 15px; 497 line-height: 1.65; 498 font-weight: 500; 499 } 500 501 .rate-alert-list li:last-child { 502 margin-bottom: 0; 503 } 504 505 .rate-alert-list li:before { 506 content: ""; 507 position: absolute; 508 top: 7px; 509 left: 10px; 510 width: 15px; 511 height: 8px; 512 border-left: 4px solid #fff; 513 border-bottom: 4px solid #fff; 514 transform: rotate(-45deg); 515 } 516 517 .rate-metal-grid .row.mt-4 > [class*="col-lg"] { 518 flex: 0 0 100%; 519 max-width: 100%; 520 } 521 522 .chart-card { 523 border: 1px solid rgba(23, 50, 77, 0.08) !important; 524 border-radius: 12px !important; 525 box-shadow: 0 12px 30px rgba(23, 50, 77, 0.07) !important; 526 } 527 528 .chart-card h4 { 529 color: #17324d; 530 font-weight: 800; 531 } 532 533 #goldChart, 534 #silverChart { 535 width: 100%; 536 height: 300px; 537 background: #fff; 538 border: 1px solid rgba(23, 50, 77, 0.06); 539 border-radius: 10px; 540 overflow: hidden; 541 } 542 543 .chart-plot { 544 position: relative; 545 } 546 547 .chart-tooltip { 548 position: absolute; 549 pointer-events: none; 550 opacity: 0; 551 transition: opacity 0.1s ease; 552 background: #f8f9fb; 553 border: 1px solid rgba(23, 50, 77, 0.12); 554 padding: 7px 10px; 555 border-radius: 8px; 556 box-shadow: 0 6px 16px rgba(23, 50, 77, 0.12); 557 z-index: 5; 558 white-space: nowrap; 559 } 560 561 .chart-tooltip .tt-date { 562 font-size: 10px; 563 color: #9a8f76; 564 margin-bottom: 2px; 565 } 566 567 .chart-tooltip .tt-price { 568 font-size: 13px; 569 font-weight: 700; 570 color: #17324d; 571 font-variant-numeric: tabular-nums; 572 } 573
574 .chart-stats { 575 display: flex; 576 flex-wrap: wrap; 577 gap: 8px; 578 margin-top: 14px; 579 } 580 581 .chart-stat { 582 flex: 1 1 0; 583 min-width: 110px; 584 padding: 10px 12px; 585 background: #f8f9fb; 586 border: 1px solid rgba(23, 50, 77, 0.06); 587 border-radius: 8px; 588 text-align: center; 589 } 590 591 .chart-stat-label { 592 display: block; 593 font-size: 10px; 594 text-transform: uppercase; 595 letter-spacing: 0.5px; 596 color: #6c757d; 597 margin-bottom: 4px; 598 font-weight: 700; 599 } 600 601 .chart-stat-value { 602 font-size: 13px; 603 font-weight: 800; 604 color: #17324d; 605 font-variant-numeric: tabular-nums; 606 } 607 608 .chart-change-info { 609 display: flex; 610 align-items: center; 611 flex-wrap: wrap; 612 gap: 6px; 613 font-size: 12.5px; 614 padding: 10px 14px; 615 background: #ffffff; 616 border: 1px solid rgba(23, 50, 77, 0.08); 617 border-radius: 10px; 618 margin-bottom: 14px; 619 box-shadow: 0 4px 14px rgba(23, 50, 77, 0.05); 620 } 621 622 .chart-change-info .change-label { 623 color: #6c757d; 624 font-weight: 600; 625 } 626 627 .chart-change-info .change-chip { 628 display: inline-flex; 629 align-items: center; 630 padding: 3px 10px; 631 border-radius: 999px; 632 font-weight: 800; 633 font-size: 12px; 634 line-height: 1.4; 635 } 636 637 .chart-change-info .change-chip.price-up { 638 color: #11875d; 639 background: rgba(17, 135, 93, 0.10); 640 } 641 642 .chart-change-info .change-chip.price-down { 643 color: #c4493d; 644 background: rgba(196, 73, 61, 0.10); 645 } 646 647 .chart-change-info .change-sep { 648 width: 1px; 649 height: 16px; 650 background: rgba(23, 50, 77, 0.12); 651 } 652 653 .chart-change-info .change-label-change { 654 font-size: 10px; 655 } 656 657 .chart-change-info .change-label-period { 658 font-size: 10px; 659 } 660 661 .chart-change-info #goldTfLabel, 662 .chart-change-info #silverTfLabel { 663 font-size: 10px; 664 } 665 666 .chart-change-info #goldPeriod, 667 .chart-change-info #silverPeriod { 668 color: #17324d; 669 font-size: 10px; 670 } 671 672 .chart-change-info .text-muted { 673 color: #9a8f76; 674 } 675 676 .gold-mode, 677 .silver-mode, 678 .gold-range, 679 .silver-range { 680 min-width: 50px; 681 margin: 3px; 682 border-radius: 999px !important; 683 font-weight: 800; 684 border-width: 1px; 685 box-shadow: none !important; 686 } 687 688 .gold-mode.btn-success, 689 .silver-mode.btn-success, 690 .gold-range.btn-success, 691 .silver-range.btn-success { 692 background: #11875d !important; 693 border-color: #11875d !important; 694 color: #fff !important; 695 } 696 697 .gold-mode.btn-danger, 698 .silver-mode.btn-danger { 699 background: #c4493d !important; 700 border-color: #c4493d !important; 701 color: #fff !important; 702 } 703 704 705 @media (max-width: 767.98px) { 706 .rate-page .section-title-bar { 707 height: 42px; 708 } 709 710 .rate-page .section-heading h2 { 711 font-size: 23px; 712 } 713 714 .rate-page .section-heading .rate-update-line { 715 justify-content: flex-start; 716 margin-top: 12px; 717 } 718 719 .rate-page .section-heading .update-badge { 720 padding: 5px 12px; 721 font-size: 11px; 722 } 723 724 .metal-panel .card-body { 725 padding: 20px; 726 } 727 728 .rate-metal-grid .metal-panel .card-body { 729 padding: 22px; 730 } 731 732 .metal-logo-wrap { 733 min-height: 58px; 734 margin-bottom: 12px !important; 735 } 736 737 .metal-logo { 738 max-width: 220px; 739 max-height: 48px; 740 } 741 742 #goldChart, 743 #silverChart { 744 height: 230px; 745 } 746 747 .price-card h3 { 748 font-size: 23px; 749 } 750 751 .rate-metal-grid .rate-price-row > .col-6 { 752 padding-left: 6px; 753 padding-right: 6px; 754 } 755 756 .rate-metal-grid .price-card small { 757 padding: 4px 12px; 758 font-size: 9px; 759 letter-spacing: 1px; 760 } 761 762 .rate-metal-grid .price-card h3 { 763 font-size: 17px; 764 margin-top: 10px !important; 765 } 766 767 .rate-metal-grid .price-tail, 768 .rate-metal-grid .price-unit { 769 font-size: 55%; 770 } 771 772 .rate-metal-grid .rate-badge { 773 min-height: 22px; 774 margin-top: 9px; 775 padding: 4px 9px; 776 font-size: 11px; 777 } 778 779 .rate-update-line { 780 margin-top: 4px; 781 font-size: 11px; 782 } 783 784 .rate-alert-list li { 785 margin-bottom: 10px; 786 padding-left: 34px; 787 font-size: 12px; 788 } 789 790 .rate-alert-list li:before { 791 top: 6px; 792 left: 8px; 793 width: 12px; 794 height: 7px; 795 border-left-width: 3px; 796 border-bottom-width: 3px; 797 } 798 } 799 800 @media (max-width: 420px) { 801 .rate-metal-grid .rate-price-row > .col-6 { 802 flex: 0 0 100%; 803 max-width: 100%; 804 } 805 806 .rate-metal-grid .price-card { 807 margin-bottom: 14px !important; 808 } 809 810 .rate-metal-grid .price-card h3 { 811 font-size: 18px; 812 } 813 } 814 815 @media (max-width: 340px) { 816 .rate-metal-grid .price-card h3 { 817 font-size: 16px; 818 } 819 } 820 821 /* SHIMMER LOADING */ 822 .shimmer-box { 823 display: inline-block; 824 background: rgba(23, 50, 77, 0.05); 825 background-image: linear-gradient(to right, 826 rgba(23, 50, 77, 0.04) 0%, 827 rgba(23, 50, 77, 0.12) 20%, 828 rgba(23, 50, 77, 0.04) 40%, 829 rgba(23, 50, 77, 0.04) 100%); 830 background-size: 800px 100%; 831 animation: shimmer 2s infinite linear forwards; 832 border-radius: 6px; 833 color: transparent !important; 834 } 835 836 .shimmer-light { 837 background: rgba(255, 255, 255, 0.15); 838 background-image: linear-gradient(to right, 839 rgba(255, 255, 255, 0.1) 0%, 840 rgba(255, 255, 255, 0.35) 20%, 841 rgba(255, 255, 255, 0.1) 40%, 842 rgba(255, 255, 255, 0.1) 100%); 843 } 844 845 @keyframes shimmer { 846 0% { background-position: -468px 0; } 847 100% { background-position: 468px 0; } 848 } 849 </style> 850 851 852</head> 853 854<body> 855 856 <!--header section start--> 857 <header class="header"> 858 <!--start navbar--> 859 <nav class="navbar navbar-expand-lg fixed-top white-bg"> 860 <div class="container"> 861 <a class="navbar-brand" href="portal.do"> 862 863 <img src="../img/logoIbank/ibank_lite.png" style="height:55px !important;width:auto;" alt="logo" class="img-fluid"> 864 865 </a> 866 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" 867 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
868 <span class="ti-menu"></span> 869 </button> 870 871 <div class="collapse navbar-collapse main-menu" id="navbarSupportedContent"> 872 <ul class="navbar-nav ml-auto"> 873 <li class="nav-item dropdown"> 874 <a class="nav-link page-scroll" href="portal.do#home">Beranda</a> 875 </li> 876 <li class="nav-item dropdown"> 877 <a class="nav-link page-scroll" href="portal.do#about">Tentang Kami</a> 878 </li> 879 <li class="nav-item dropdown"> 880 <a class="nav-link page-scroll" href="portal.do#feature">Fitur</a> 881 </li> 882 <li class="nav-item dropdown"> 883 <a class="nav-link" href="kurs.do">Kurs</a> 884 </li> 885 <li class="nav-item"> 886 <a class="nav-link page-scroll" href="portal.do#faq">FAQ</a> 887 </li> 888 <li class="nav-item"> 889 <a class="nav-link page-scroll" href="portal.do#footer">Hubungi Kami</a> 890 </li> 891 892 <li class="nav-item p-0"> 893 <div class="navbar-btn nav-link ml-3 page-scroll" href="#"> 894 <a href="https://portal.ibank.co.id/ibank/login.do" class="m-0 px-2 d-inline-block">MASUK</a> 895 <a href="https://portal.ibank.co.id/ibank/register.do" class="m-0 px-2 d-inline-block">DAFTAR</a> 896 </div> 897 </li> 898 899 </ul> 900 </div> 901 </div> 902 </nav> 903 <!--end navbar--> 904 </header> 905 <!--header section end--> 906 907 908 909<!--body content wrap start--> 910<div class="main"> 911 912 <!-- Kurs Section --> 913 <section id="kurs" class="promo-section ptb-50 rate-page"> 914 <div class="container"> 915 916 <!-- Heading --> 917 <div class="row align-items-center mb-4 section-heading"> 918 <div class="col-lg-8"> 919 <div class="section-title"> 920 <div class="section-title-bar"></div> 921 <div> 922 <h2 class="font-weight-bold">Informasi Kurs</h2> 923 <p class="text-muted"> 924 Harga beli dan harga jual emas serta perak diperbarui secara realtime. 925 </p> 926 </div> 927 </div> 928 </div> 929 <div class="col-lg-4"> 930 <div class="rate-update-line"> 931 <span class="update-badge"> 932 <span class="update-dot"></span> 933 <span class="update-label">Terakhir update:</span> 934 <strong id="ratesLastUpdate"><span class="shimmer-box" style="width: 120px; height: 12px;"></span></strong> 935 </span> 936 </div> 937 </div> 938 </div> 939 940 <!-- ==================== GOLD ==================== --> 941 942 <div class="row rate-metal-grid"> 943 944 <div class="col-lg-6 rate-metal-col mb-4 mb-lg-0"> 945 <div class="card metal-panel gold-panel"> 946 <div class="card-body"> 947 948 <div class="text-center mb-4 metal-logo-wrap"> 949 <img src="img/goldsaving_md.png" class="metal-logo" alt="Goldgram"> 950 </div> 951 952 <!-- Harga --> 953 <div class="row rate-price-row"> 954 955 <div class="col-6 mb-3"> 956 <div class="card price-card sell-card"> 957 <div class="card-body"> 958 <small>JUAL</small> 959 <h3 class="mb-2" id="goldSellPrice"><div class="shimmer-box shimmer-light" style="width: 140px; height: 32px;"></div></h3> 960
961 <span class="badge badge-light text-success rate-badge d-inline-flex align-items-center" id="goldSellBadge"> 962 <span class="shimmer-box" style="width: 45px; height: 12px;"></span> 963 </span> 964 965 </div> 966 </div> 967 </div> 968 969 <div class="col-6 mb-3"> 970 <div class="card price-card buy-card"> 971 <div class="card-body"> 972 <small>BELI</small> 973 <h3 class="mb-2" id="goldBuyPrice"><div class="shimmer-box shimmer-light" style="width: 140px; height: 32px;"></div></h3> 974 975 <span class="badge badge-light text-success rate-badge d-inline-flex align-items-center" id="goldBuyBadge"> 976 <span class="shimmer-box" style="width: 45px; height: 12px;"></span> 977 </span> 978 979 </div> 980 </div> 981 </div> 982 983 </div> 984 985 986 987 <!-- Grafik --> 988 <div class="row"> 989 990 <div class="col-lg-12"> 991 992 <div class="card chart-card"> 993 994 <div class="card-body"> 995 996 <div class="d-flex justify-content-between align-items-center mb-4"> 997 998 <h4 class="mb-0"> 999 Grafik Kurs 1000 </h4> 1001 1002 <div> 1003 1004 <button class="btn btn-success btn-sm gold-mode active" data-mode="beli">Beli</button> 1005 <button class="btn btn-outline-danger btn-sm gold-mode" data-mode="jual">Jual</button> 1006 1007 </div> 1008 1009 </div> 1010 1011 <div class="chart-change-info" id="goldChangeInfo" style="display:none;"> 1012 <span class="change-label change-label-change">Perubahan:</span> 1013 <span id="goldChangeRupiah" class="change-chip price-up"></span> 1014 <span class="change-sep"></span> 1015 <span class="change-label change-label-period">Periode:</span> 1016 <span id="goldPeriod" class="font-weight-bold"></span> 1017 <span class="text-muted">(<span id="goldTfLabel"></span>)</span> 1018 </div> 1019 1020 <!-- Chart --> 1021 <div class="chart-plot"> 1022 <div id="goldChart"></div> 1023 <div class="chart-tooltip" id="goldTooltip"></div> 1024 </div> 1025 1026 <div class="text-center mt-4" id="goldTimeframeContainer"> 1027 <!-- Buttons generated via JS --> 1028 </div> 1029 1030 <div class="chart-stats"> 1031 <div class="chart-stat"> 1032 <span class="chart-stat-label">Harga Tertinggi</span> 1033 <span class="chart-stat-value text-success" id="goldStatHigh"><span class="shimmer-box" style="width: 80px; height: 14px;"></span></span> 1034 </div> 1035 <div class="chart-stat"> 1036 <span class="chart-stat-label">Harga Terendah</span>
1037 <span class="chart-stat-value text-danger" id="goldStatLow"><span class="shimmer-box" style="width: 80px; height: 14px;"></span></span> 1038 </div> 1039 <div class="chart-stat"> 1040 <span class="chart-stat-label">Harga Rata-rata</span> 1041 <span class="chart-stat-value" id="goldStatAvg"><span class="shimmer-box" style="width: 80px; height: 14px;"></span></span> 1042 </div> 1043 </div> 1044 1045 </div> 1046 1047 </div> 1048 1049 </div> 1050 1051 </div> 1052 1053 <div class="alert rate-alert mt-4"> 1054 <ul class="rate-alert-list"> 1055 <li>Kurs diatas merupakan kurs Emas tanpa ongkos cetak.</li> 1056 <li>Pengambilan fisik emas dikenakan ongkos cetak sesuai merchant iBank.</li> 1057 <li>Harga diatas dapat berubah sewaktu-waktu (mengikuti fluktuasi pasar) tanpa pemberitahuan.</li> 1058 </ul> 1059 </div> 1060 1061 </div> 1062 </div> 1063 </div> 1064 1065 <!-- ==================== SILVER ==================== --> 1066 1067 <div class="col-lg-6 rate-metal-col"> 1068 <div class="card metal-panel silver-panel"> 1069 1070 <div class="card-body"> 1071 1072 <div class="text-center mb-4 metal-logo-wrap"> 1073 1074 <img src="img/silversaving_md.png" class="metal-logo" alt="Silvergram"> 1075 1076 </div> 1077 1078 <!-- Harga --> 1079 1080 <div class="row rate-price-row"> 1081 1082 <div class="col-6"> 1083 1084 <div class="card price-card silver-sell mb-3"> 1085 <div class="card-body"> 1086 <small>JUAL</small> 1087 <h3 id="silverSellPrice"><div class="shimmer-box shimmer-light" style="width: 140px; height: 32px;"></div></h3> 1088 <span class="badge badge-light text-danger rate-badge d-inline-flex align-items-center" id="silverSellBadge"> 1089 <span class="shimmer-box" style="width: 45px; height: 12px;"></span> 1090 </span> 1091 </div> 1092 </div> 1093 1094 </div> 1095 1096 <div class="col-6"> 1097 1098 <div class="card price-card silver-buy mb-3"> 1099 <div class="card-body"> 1100 <small>BELI</small> 1101 <h3 id="silverBuyPrice"><div class="shimmer-box shimmer-light" style="width: 140px; height: 32px;"></div></h3> 1102 <span class="badge badge-light text-danger rate-badge d-inline-flex align-items-center" id="silverBuyBadge"> 1103 <span class="shimmer-box" style="width: 45px; height: 12px;"></span> 1104 </span> 1105 </div> 1106 </div> 1107 1108 </div> 1109 1110 </div> 1111 1112 <div class="row"> 1113 1114 <div class="col-lg-12"> 1115 1116 <div class="card chart-card"> 1117 <div class="card-body"> 1118 1119 <div class="d-flex justify-content-between align-items-center mb-4"> 1120 1121 <h4>Grafik Kurs</h4> 1122 1123 <div> 1124 1125 <button class="btn btn-success btn-sm silver-mode active" data-mode="beli">Beli</button> 1126 1127 <button class="btn btn-outline-danger btn-sm silver-mode" data-mode="jual">Jual</button> 1128 1129 </div> 1130 1131 </div> 1132 1133 <div class="chart-change-info" id="silverChangeInfo" style="display:none;">
1134 <span class="change-label change-label-change">Perubahan:</span> 1135 <span id="silverChangeRupiah" class="change-chip price-up"></span> 1136 <span class="change-sep"></span> 1137 <span class="change-label change-label-period">Periode:</span> 1138 <span id="silverPeriod" class="font-weight-bold"></span> 1139 <span class="text-muted">(<span id="silverTfLabel"></span>)</span> 1140 </div> 1141 1142 <div class="chart-plot"> 1143 <div id="silverChart"></div> 1144 <div class="chart-tooltip" id="silverTooltip"></div> 1145 </div> 1146 1147 <div class="text-center mt-4" id="silverTimeframeContainer"> 1148 <!-- Buttons generated via JS --> 1149 </div> 1150 1151 <div class="chart-stats"> 1152 <div class="chart-stat"> 1153 <span class="chart-stat-label">Harga Tertinggi</span> 1154 <span class="chart-stat-value text-success" id="silverStatHigh"><span class="shimmer-box" style="width: 80px; height: 14px;"></span></span> 1155 </div> 1156 <div class="chart-stat"> 1157 <span class="chart-stat-label">Harga Terendah</span> 1158 <span class="chart-stat-value text-danger" id="silverStatLow"><span class="shimmer-box" style="width: 80px; height: 14px;"></span></span> 1159 </div> 1160 <div class="chart-stat"> 1161 <span class="chart-stat-label">Harga Rata-rata</span> 1162 <span class="chart-stat-value" id="silverStatAvg"><span class="shimmer-box" style="width: 80px; height: 14px;"></span></span> 1163 </div> 1164 </div> 1165 1166 </div> 1167 </div> 1168 1169 </div> 1170 1171 </div> 1172 1173 <div class="alert rate-alert mt-4"> 1174 <ul class="rate-alert-list"> 1175 <li>Kurs diatas merupakan kurs Perak tanpa ongkos cetak.</li> 1176 <li>Pengambilan fisik perak dikenakan ongkos cetak sesuai merchant iBank.</li> 1177 <li>Harga diatas dapat berubah sewaktu-waktu (mengikuti fluktuasi pasar) tanpa pemberitahuan.</li> 1178 </ul> 1179 </div> 1180 1181 </div> 1182 </div> 1183 </div> 1184 </div> 1185 1186 </div> 1187 </section> 1188 1189</div> 1190 1191 1192<!--footer section start--> 1193 <footer class="footer-section"> 1194 <!-- Button Style 3 --> 1195 <div class="wc-style10"> 1196 <a class="wc-list wc-button3" data-number="628211000045" data-message="" style="z-index: 99;"> 1197 <i class="fa fa-whatsapp"></i> 1198 <span>Butuh Bantuan?</span> 1199 </a> 1200 </div> 1201 1202 <!--footer top start--> 1203 <div id="footer" class="footer-top pt-100 pb-5 background-img-2" 1204 style="background: #eee;"> 1205 <div class="container"> 1206 <div class="row justify-content-between"> 1207 <div class="col-lg-4 col-md-6 mb-3 mb-lg-0"> 1208 <div class="footer-nav-wrap"> 1209 <img src="../img/logoIbank/ibank_lite.png" alt="footer logo" width="240" class="img-fluid mb-3"> 1210 1211 1212 1213 </div> 1214 </div> 1215 <div class="col-lg-3 col-md-6 ml-auto mb-4 mb-lg-0"> 1216 <div class="footer-nav-wrap"> 1217 <h5 class="mb-3">Dukungan</h5> 1218 <ul class="list-unstyled"> 1219 <li class="mb-2"><a href="hubungi-kami.do" class="page-scroll">Hubungi Kami</a></li> 1220 <li class="mb-2"><a href="terms-and-conditions.do" class="page-scroll">Syarat & Ketentuan</a></li> 1221 <li class="mb-2"><a href="privacy-policy.do" class="page-scroll">Kebijakan & Privasi</a></li> 1222 </ul> 1223 </div> 1224 </div> 1225 <div class="col-lg-5 col-md-6 ml-auto mb-4 mb-lg-0"> 1226 <div class="footer-nav-wrap mb-4"> 1227 <h5 class="mb-3">Layanan Nasabah</h5> 1228 <ul class="list-unstyled support-list"> 1229 <li class="mb-2 d-flex align-items-center">
1230 <span class="ti-mobile mr-2"></span> 1231 <a href="https://api.whatsapp.com/send?phone=628211000045"> +628211000045</a> 1232 </li> 1233 <li class="mb-2 d-flex align-items-center"> 1234 <span class="ti-email mr-2"></span> 1235 <a href="mailto:[email protected]"> [email protected]</a> 1236 </li> 1237 </ul> 1238 </div> 1239 1240 <div class="footer-nav-wrap"> 1241 <h5 class="mb-3">Waktu Kerja</h5> 1242 <div class="powered-lg"> 1243 <div class="form-group row" style="padding-left: 15px;"> 1244 <ul class="list-unstyled support-list"> 1245 <li class="mb-2 d-flex align-items-center"> 1246 Senin - Jumat : 11:00 - 13:30 1247 </li> 1248 </ul> 1249 </div> 1250 </div> 1251 </div> 1252 </div> 1253 </div> 1254 <div class="footer-bottom-content"> 1255 <div class="footer-content-left"> 1256 <div class="copyrights site-info"> 1257 <p>© 2024 Bank Syariah Attaqwa. All right reserved</p> 1258 </div> 1259 </div> 1260 </div> 1261 </div> 1262 </div> 1263 <!--footer top end--> 1264 </footer> 1265 <!--footer section end--> 1266 1267 <!--jQuery--> 1268
1268<script src="js2/jquery-3.5.0.min.js"></script>
1268 1269 <!--Popper js--> 1270
1270<script src="js2/popper.min.js"></script>
1270 1271 <!--Bootstrap js--> 1272
1272<script src="js2/bootstrap.min.js"></script>
1272 1273 <!--Magnific popup js--> 1274
1274<script src="js2/jquery.touchSwipe.min.js"></script>
1274 1275
1275<script src="js2/jquery.magnific-popup.min.js"></script>
1275 1276 <!--jquery easing js--> 1277
1277<script src="js2/jquery.easing.min.js"></script>
1277 1278 <!--jquery ytplayer js--> 1279
1279<script src="js2/jquery.mb.YTPlayer.min.js"></script>
1279 1280 <!--wow js--> 1281
1281<script src="js2/wow.min.js"></script>
1281 1282 <!--owl carousel js--> 1283
1283<script src="js2/owl.carousel.min.js"></script>
1283 1284 <!--countdown js--> 1285
1285<script src="js2/jquery.countdown.min.js"></script>
1285 1286 <!--validator js--> 1287
1287<script src="js2/validator.min.js"></script>
1287 1288 <!--custom js--> 1289
1289<script src="js2/scripts.js"></script>
1289 1290 <!-- jQuery library --> 1291
1291<script src="js2/whatschat-layout.js"></script>
1291 1292 <!-- WhatsChat style2 js library (required) --> 1293
1293<script src="js2/whatschat-style10.js"></script>
1293 1294 1295
1295<script type="text/javascript"> 1296 1297 $(".carousel").swipe({ 1298 1299 swipe: function(event, direction, distance, duration, fingerCount, fingerData) { 1300 1301 if (direction == 'left') $(this).carousel('next'); 1302 if (direction == 'right') $(this).carousel('prev'); 1303 1304 }, 1305 allowPageScroll:"vertical" 1306 1307 }); 1308 </script>
1308 1309 1310
1311<script> 1312 var goldMode = "beli"; 1313 var silverMode = "beli"; 1314 1315 /*================================================== 1316 = LIGHTWEIGHT CHARTS INIT 1317 ==================================================*/ 1318 1319 var goldLWChart, goldLWSeries; 1320 var silverLWChart, silverLWSeries; 1321 1322 function parseTimeLabel(label) { 1323 var s = (label || '').toString().trim(); 1324 if (!s) return null; 1325 1326 var monthMap = { 1327 'Januari': 'January', 'Februari': 'February', 'Maret': 'March', 1328 'April': 'April', 'Mei': 'May', 'Juni': 'June', 1329 'Juli': 'July', 'Agustus': 'August', 'September': 'September', 1330 'Oktober': 'October', 'November': 'November', 'Desember': 'December', 1331 'Agu': 'Aug', 'Okt': 'Oct', 'Des': 'Dec', 'Sep': 'Sep', 1332 'Mei': 'May', 1333 }; 1334 Object.keys(monthMap).forEach(function(k) { 1335 if (s.indexOf(k) !== -1) s = s.replace(new RegExp(k, 'g'), monthMap[k]); 1336 }); 1337 1338 var m = s.match(/^(\d{1,4})[-/.](\d{1,2})[-/.](\d{1,4})(?:[\sT]+(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?$/); 1339 if (m) { 1340 var a = parseInt(m[1], 10), b = parseInt(m[2], 10), c = parseInt(m[3], 10); 1341 var hh = m[4] ? parseInt(m[4], 10) : 0, mm = m[5] ? parseInt(m[5], 10) : 0, ss = m[6] ? parseInt(m[6], 10) : 0; 1342 var year, month, day; 1343 if (a >= 1000) { 1344 year = a; month = b; day = c; 1345 } else if (c >= 1000) { 1346 year = c; month = b; day = a; 1347 } else if (c >= 32 || a > 12) { 1348 year = 2000 + c; month = b; day = a; 1349 } else { 1350 return null; 1351 } 1352 if (year < 100) year += year > 70 ? 1900 : 2000; 1353 if (month < 1 || month > 12 || day < 1 || day > 31) return null; 1354 return Math.floor(Date.UTC(year, month - 1, day, hh, mm, ss) / 1000); 1355 } 1356 1357 m = s.match(/^(\d{1,2})?[\s-]*([A-Za-z]{3,})[\s-]+(\d{2,4})$/); 1358 if (m) { 1359 var months = { 'jan': 0, 'feb': 1, 'mar': 2, 'apr': 3, 'may': 4, 'jun': 5, 'jul': 6, 'aug': 7, 'sep': 8, 'oct': 9, 'nov': 10, 'dec': 11 }; 1360 var mn = months[m[2].substring(0, 3).toLowerCase()]; 1361 if (mn !== undefined) { 1362 var day1 = m[1] ? parseInt(m[1], 10) : 1; 1363 var y2 = parseInt(m[3], 10); 1364 if (y2 < 100) y2 += y2 > 70 ? 1900 : 2000; 1365 if (day1 < 1 || day1 > 31) return null; 1366 return Math.floor(Date.UTC(y2, mn, day1) / 1000); 1367 } 1368 } 1369 1370 m = s.match(/^(\d{1,4})[-/.](\d{1,4})$/); 1371 if (m) { 1372 var p1 = parseInt(m[1], 10), p2 = parseInt(m[2], 10); 1373 var y3, mo; 1374 if (p1 > 12) { y3 = p1; mo = p2; } 1375 else { y3 = p2; mo = p1; } 1376 if (mo >= 1 && mo <= 12 && y3 >= 1900 && y3 <= 2100) { 1377 return Math.floor(Date.UTC(y3, mo - 1, 1) / 1000); 1378 } 1379 } 1380 1381 m = s.match(/^(\d{4})$/); 1382 if (m) { 1383 return Math.floor(Date.UTC(parseInt(m[1], 10), 0, 1) / 1000); 1384 } 1385 1386 var d = new Date(s); 1387 if (!isNaN(d.getTime())) { 1388 return Math.floor(d.getTime() / 1000); 1389 } 1390 1391 return null; 1392 } 1393 1394 function buildChartSeriesData(categories, values) { 1395 var baseTs = Math.floor(Date.now() / 1000) - (categories.length || 1) * 86400; 1396 var out = []; 1397 var prevTime = 0; 1398 for (var i = 0; i < categories.length; i++) { 1399 var ts = parseTimeLabel(categories[i]); 1400 if (ts === null || ts === undefined || isNaN(ts) || ts <= 0) { 1401 ts = baseTs + i * 86400; 1402 } 1403 if (i > 0 && ts <= prevTime) { 1404 ts = prevTime + 1; 1405 } 1406 prevTime = ts; 1407 out.push({ time: ts, value: values[i] }); 1408 } 1409 return out; 1410 } 1411 1412 function fmtRpFull(v) {
1413 return 'Rp ' + Math.round(v).toLocaleString('id-ID'); 1414 } 1415 1416 function formatTooltipTime(ts) { 1417 var d = new Date(ts * 1000); 1418 var hh = ('0' + d.getUTCHours()).slice(-2); 1419 var mm = ('0' + d.getUTCMinutes()).slice(-2); 1420 var dateStr = d.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' }); 1421 return dateStr + ' \u00b7 ' + hh + ':' + mm; 1422 } 1423 1424 function bindTooltip(metal) { 1425 var chart = metal === 'gold' ? goldLWChart : silverLWChart; 1426 var series = metal === 'gold' ? goldLWSeries : silverLWSeries; 1427 var tooltipEl = document.getElementById(metal + 'Tooltip'); 1428 var container = document.getElementById(metal + 'Chart'); 1429 1430 chart.subscribeCrosshairMove(function(param) { 1431 if (!param.time || !param.point || param.point.x < 0 || param.point.y < 0) { 1432 tooltipEl.style.opacity = '0'; 1433 return; 1434 } 1435 var point = param.seriesData.get(series); 1436 if (!point) { 1437 tooltipEl.style.opacity = '0'; 1438 return; 1439 } 1440 tooltipEl.innerHTML = 1441 '<div class="tt-date">' + formatTooltipTime(param.time) + '</div>' + 1442 '<div class="tt-price">' + fmtRpFull(point.value) + '</div>'; 1443 tooltipEl.style.opacity = '1'; 1444 1445 var plotWidth = container.clientWidth; 1446 var left = param.point.x + 14; 1447 if (left + 170 > plotWidth) left = param.point.x - 170; 1448 tooltipEl.style.left = Math.max(left, 0) + 'px'; 1449 tooltipEl.style.top = Math.max(param.point.y - 42, 4) + 'px'; 1450 }); 1451 } 1452 1453 function createLWChart(containerId) { 1454 var container = document.getElementById(containerId); 1455 return LightweightCharts.createChart(container, { 1456 autoSize: true, 1457 layout: { 1458 background: { color: '#ffffff' }, 1459 textColor: '#526678', 1460 fontFamily: "'Nunito', 'Lato', sans-serif", 1461 fontSize: 11, 1462 }, 1463 grid: { 1464 vertLines: { color: 'rgba(23,50,77,0.06)' }, 1465 horzLines: { color: 'rgba(23,50,77,0.06)' }, 1466 }, 1467 crosshair: { 1468 mode: LightweightCharts.CrosshairMode.Normal, 1469 vertLine: { color: '#9a8f76', width: 1, style: 2, labelBackgroundColor: '#17324d' }, 1470 horzLine: { color: '#9a8f76', width: 1, style: 2, labelBackgroundColor: '#17324d' }, 1471 }, 1472 rightPriceScale: { 1473 borderColor: 'rgba(23,50,77,0.08)', 1474 scaleMargins: { top: 0.15, bottom: 0.1 }, 1475 }, 1476 timeScale: { 1477 borderColor: 'rgba(23,50,77,0.08)', 1478 timeVisible: true, 1479 secondsVisible: false, 1480 }, 1481 handleScroll: { 1482 vertTouchDrag: true, 1483 horzTouchDrag: true, 1484 mouseWheel: true, 1485 pressedMouseMove: true, 1486 }, 1487 handleScale: { 1488 axisPressedMouseMove: true, 1489 axisDoubleClickReset: true, 1490 mouseWheel: true, 1491 pinch: true, 1492 }, 1493 localization: { 1494 priceFormatter: function(price) { 1495 if (price >= 1000000) { 1496 return 'Rp' + (price / 1000000).toFixed(2) + ' jt'; 1497 } 1498 return 'Rp' + Math.round(price / 1000) + ' rb'; 1499 }, 1500 }, 1501 }); 1502 } 1503 1504 function initGoldChart() { 1505 goldLWChart = createLWChart('goldChart'); 1506 goldLWSeries = goldLWChart.addAreaSeries({ 1507 lineColor: '#11875d', 1508 topColor: 'rgba(17,135,93,0.22)', 1509 bottomColor: 'rgba(17,135,93,0.02)', 1510 lineWidth: 2, 1511 priceLineVisible: false, 1512 crosshairMarkerRadius: 4, 1513 }); 1514 bindTooltip('gold'); 1515 } 1516 1517 function initSilverChart() { 1518 silverLWChart = createLWChart('silverChart');
1519 silverLWSeries = silverLWChart.addAreaSeries({ 1520 lineColor: '#4c9f90', 1521 topColor: 'rgba(76,159,144,0.22)', 1522 bottomColor: 'rgba(76,159,144,0.02)', 1523 lineWidth: 2, 1524 priceLineVisible: false, 1525 crosshairMarkerRadius: 4, 1526 }); 1527 bindTooltip('silver'); 1528 } 1529 1530 function updateChartColors(series, mode) { 1531 if (mode === 'beli') { 1532 var accent = series === goldLWSeries ? '#11875d' : '#4c9f90'; 1533 series.applyOptions({ 1534 lineColor: accent, 1535 topColor: series === goldLWSeries ? 'rgba(17,135,93,0.22)' : 'rgba(76,159,144,0.22)', 1536 bottomColor: series === goldLWSeries ? 'rgba(17,135,93,0.02)' : 'rgba(76,159,144,0.02)', 1537 }); 1538 } else { 1539 series.applyOptions({ 1540 lineColor: '#c4493d', 1541 topColor: 'rgba(196,73,61,0.20)', 1542 bottomColor: 'rgba(196,73,61,0.02)', 1543 }); 1544 } 1545 } 1546 1547 function updatePriceChangeInfo(metal, dataArr) { 1548 var changeInfo = $('#' + metal + 'ChangeInfo'); 1549 if (!dataArr || dataArr.length < 2) { 1550 changeInfo.hide(); 1551 return; 1552 } 1553 var first = dataArr[0]; 1554 var last = dataArr[dataArr.length - 1]; 1555 var change = last - first; 1556 var pct = first !== 0 ? (change / first) * 100 : 0; 1557 1558 var absVal = Math.abs(change); 1559 var formattedRupiah = absVal.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }); 1560 var signRupiah = change >= 0 ? '+' : '-'; 1561 var signPct = pct >= 0 ? '+' : ''; 1562 1563 var activeBtn = $('.' + metal + '-range.active'); 1564 var tfLabel = activeBtn.length ? activeBtn.data('range') : ''; 1565 1566 $('#' + metal + 'ChangeRupiah') 1567 .text(signRupiah + 'Rp ' + formattedRupiah + '(' + signPct + pct.toFixed(2) + '%)') 1568 .removeClass('price-up price-down') 1569 .addClass(change >= 0 ? 'price-up' : 'price-down'); 1570 1571 $('#' + metal + 'TfLabel').text(tfLabel); 1572 changeInfo.show(); 1573 } 1574 1575 function formatRupiahJs(val) { 1576 if (!val) return 'Rp 0'; 1577 var num = parseFloat(val.toString().replace(/,/g, '')); 1578 if (isNaN(num)) return 'Rp 0'; 1579 return 'Rp ' + num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); 1580 } 1581 1582 function computeChartStats(dataArr) { 1583 if (!dataArr || dataArr.length === 0) return null; 1584 var min = dataArr[0]; 1585 var max = dataArr[0]; 1586 var sum = 0; 1587 for (var i = 0; i < dataArr.length; i++) { 1588 var v = parseFloat(dataArr[i]); 1589 if (isNaN(v)) continue; 1590 if (v < min) min = v; 1591 if (v > max) max = v; 1592 sum += v; 1593 } 1594 return { high: max, low: min, avg: sum / dataArr.length }; 1595 } 1596 1597 function updateChartStats(metal, dataArr) { 1598 var stats = computeChartStats(dataArr); 1599 if (!stats) return; 1600 $('#' + metal + 'StatHigh').html(formatRupiahJs(stats.high)); 1601 $('#' + metal + 'StatLow').html(formatRupiahJs(stats.low)); 1602 $('#' + metal + 'StatAvg').html(formatRupiahJs(stats.avg)); 1603 } 1604 1605 function updateChartPeriod(metal, chartData) { 1606 var periodEl = $('#' + metal + 'Period'); 1607 if (!chartData || chartData.length < 2) { 1608 periodEl.text('-'); 1609 return; 1610 } 1611 var fmtDay = function(d) { 1612 return d.toLocaleDateString('id-ID', { day: 'numeric', timeZone: 'UTC' }); 1613 }; 1614 var fmtDayMonth = function(d) { 1615 return d.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', timeZone: 'UTC' }); 1616 }; 1617 var fmtFull = function(d) { 1618 return d.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' }); 1619 }; 1620 var start = new Date(chartData[0].time * 1000); 1621 var end = new Date(chartData[chartData.length - 1].time * 1000); 1622 1623 var sameMonthYear = start.getUTCFullYear() === end.getUTCFullYear() && start.getUTCMonth() === end.getUTCMonth(); 1624 var sameYear = start.getUTCFullYear() === end.getUTCFullYear(); 1625 if (sameMonthYear) { 1626 periodEl.text(fmtDay(start) + ' - ' + fmtFull(end)); 1627 } else if (sameYear) { 1628 periodEl.text(fmtDayMonth(start) + ' - ' + fmtFull(end)); 1629 } else { 1630 periodEl.text(fmtFull(start) + ' - ' + fmtFull(end)); 1631 } 1632 } 1633 1634 function renderGoldChart(range) { 1635 var selectedGold = goldHistory[range]; 1636 if (!selectedGold) return; 1637 1638 var dataArr = goldMode === 'beli' ? selectedGold.beli : selectedGold.jual; 1639 updateChartColors(goldLWSeries, goldMode); 1640 1641 var chartData = buildChartSeriesData(selectedGold.categories, dataArr); 1642 goldLWSeries.setData(chartData); 1643 goldLWChart.timeScale().fitContent(); 1644 1645 updatePriceChangeInfo('gold', dataArr); 1646 updateChartStats('gold', dataArr);
1647 updateChartPeriod('gold', chartData); 1648 } 1649 1650 function renderSilverChart(range) { 1651 var selectedSilver = silverHistory[range]; 1652 if (!selectedSilver) return; 1653 1654 var dataArr = silverMode === 'beli' ? selectedSilver.beli : selectedSilver.jual; 1655 updateChartColors(silverLWSeries, silverMode); 1656 1657 var chartData = buildChartSeriesData(selectedSilver.categories, dataArr); 1658 silverLWSeries.setData(chartData); 1659 silverLWChart.timeScale().fitContent(); 1660 1661 updatePriceChangeInfo('silver', dataArr); 1662 updateChartStats('silver', dataArr); 1663 updateChartPeriod('silver', chartData); 1664 } 1665 1666 /*================================================== 1667 = GOLD & SILVER TIMELINE DATA 1668 ==================================================*/ 1669 1670 var goldHistory = {}; 1671 var silverHistory = {}; 1672 1673 var globalTimeframes = []; 1674 function renderTimeframeButtons(timeframes) { 1675 if (!timeframes || timeframes.length === 0) return; 1676 globalTimeframes = timeframes; 1677 var goldHtml = ''; 1678 var silverHtml = ''; 1679 for (var i = 0; i < timeframes.length; i++) { 1680 var tf = timeframes[i]; 1681 var btnClass = (i === 0) ? 'btn-success active' : 'btn-outline-success'; 1682 var btn = '<button class="btn ' + btnClass + ' btn-sm gold-range" style="margin-right: 4px;" data-range="' + tf.code + '" data-tipe="' + tf.tipe + '" data-nvalue="' + tf.nvalue + '">' + tf.code + '</button>'; 1683 var btnS = '<button class="btn ' + btnClass + ' btn-sm silver-range" style="margin-right: 4px;" data-range="' + tf.code + '" data-tipe="' + tf.tipe + '" data-nvalue="' + tf.nvalue + '">' + tf.code + '</button>'; 1684 goldHtml += btn; 1685 silverHtml += btnS; 1686 } 1687 $('#goldTimeframeContainer').html(goldHtml); 1688 $('#silverTimeframeContainer').html(silverHtml); 1689 } 1690 1691 function fetchChartData(metal, range, tipeParam, nvalueParam, forceUpdate) { 1692 if (!forceUpdate) { 1693 if (metal === 'gold' && goldHistory[range]) { 1694 renderGoldChart(range); 1695 return; 1696 } 1697 if (metal === 'silver' && silverHistory[range]) { 1698 renderSilverChart(range); 1699 return; 1700 } 1701 } 1702 1703 var tipe = tipeParam || 'day'; 1704 var value = nvalueParam || 7; 1705 var productCode = metal === 'gold' ? 'gold' : 'silver'; 1706 $.ajax({
1707 url: '../kursIbankLite.jsp?action=getRatesByTimeframe', 1708 type: 'GET', 1709 data: { 1710 produk: productCode, 1711 tipe: tipe, 1712 n: value 1713 }, 1714 dataType: 'json', 1715 success: function(response) { 1716 var responseData = response.data; 1717 if (Array.isArray(responseData) && responseData.length > 0) responseData = responseData[0]; 1718 if (!responseData) responseData = response; 1719 1720 if (responseData.grafik_kurs) { 1721 responseData = responseData.grafik_kurs; 1722 } 1723 1724 var dataArr = responseData.data || []; 1725 1726 var categories = []; 1727 var beli = []; 1728 var jual = []; 1729 1730 for (var i = 0; i < dataArr.length; i++) { 1731 var item = dataArr[i]; 1732 categories.push(item.label_kurs); 1733 beli.push(parseFloat(item.harga_beli)); 1734 jual.push(parseFloat(item.harga_jual)); 1735 } 1736 1737 var parsedData = { 1738 categories: categories, 1739 beli: beli, 1740 jual: jual, 1741 stats: responseData 1742 }; 1743 1744 if (metal === 'gold') { 1745 goldHistory[range] = parsedData; 1746 renderGoldChart(range); 1747 } else { 1748 silverHistory[range] = parsedData; 1749 renderSilverChart(range); 1750 } 1751 }, 1752 error: function(xhr, status, error) { 1753 console.error('Gagal mengambil data chart ' + metal + ' dari backend:', error); 1754 } 1755 }); 1756 } 1757 1758 function updateTrendBadge(elementId, trend, percentageLabel) { 1759 var el = $('#' + elementId); 1760 el.removeClass('text-success text-danger text-secondary rate-trend-up rate-trend-down rate-trend-flat'); 1761 var trendValue = (trend || '').toString().toUpperCase(); 1762 var percentValue = (percentageLabel || '0.00%').toString(); 1763 var numericPercent = parseFloat(percentValue.replace('%', '').replace(',', '.')); 1764 1765 var iconHtml = ''; 1766 if (trendValue === 'UP' || trendValue === 'NAIK' || trendValue === 'PLUS' || numericPercent > 0) { 1767 el.addClass('text-success rate-trend-up'); 1768 iconHtml = '<i class="fa fa-arrow-up"></i> '; 1769 } else if (trendValue === 'DOWN' || trendValue === 'TURUN' || trendValue === 'MINUS' || numericPercent < 0) { 1770 el.addClass('text-danger rate-trend-down'); 1771 iconHtml = '<i class="fa fa-arrow-down"></i> '; 1772 } else { 1773 el.addClass('text-secondary rate-trend-flat'); 1774 iconHtml = '<i class="fa fa-minus"></i> '; 1775 } 1776 1777 el.html(iconHtml + percentValue); 1778 } 1779 1780 function formatRatePriceLabel(priceLabel) { 1781 var label = (priceLabel || '0').toString().replace(/^Rp\s*/i, '').replace(/\/gr\s*$/i, '').trim(); 1782 var priceParts = label.match(/^(.*?)([.,]?)(\d{2})$/); 1783 1784 if (!priceParts) { 1785 return '<span class="price-value">Rp ' + label + '<span class="price-unit">/gr</span></span>'; 1786 } 1787 1788 return '<span class="price-value">Rp ' + priceParts[1] + priceParts[2] + '<span class="price-tail">' + priceParts[3] + '</span><span class="price-unit">/gr</span></span>'; 1789 } 1790 1791 function loadRatesSummary(isAutoUpdate) { 1792 $.ajax({
1793 url: '../kursIbankLite.jsp?action=getRatesSummary', 1794 type: 'GET', 1795 dataType: 'json', 1796 success: function(response) { 1797 var data = response.data; 1798 if (Array.isArray(data) && data.length > 0) data = data[0]; 1799 if (!data) data = response; 1800 1801 if (!isAutoUpdate && data.list_timeframe && data.list_timeframe.length > 0) { 1802 renderTimeframeButtons(data.list_timeframe); 1803 } 1804 1805 var ratesLastUpdateLabel = ''; 1806 1807 if (data.gold_current_rate) { 1808 var gold = data.gold_current_rate; 1809 if (gold.buy_price != null) $('#goldBuyPrice').html(formatRatePriceLabel(gold.buy_price_label)); 1810 if (gold.sell_price != null) $('#goldSellPrice').html(formatRatePriceLabel(gold.sell_price_label)); 1811 if (gold.created_at || gold.create_date) ratesLastUpdateLabel = gold.created_at_label || gold.create_date_label; 1812 1813 updateTrendBadge('goldBuyBadge', gold.buy_trend, gold.buy_percentage_label); 1814 updateTrendBadge('goldSellBadge', gold.sell_trend, gold.sell_percentage_label); 1815 } 1816 1817 if (data.silver_current_rate) { 1818 var silver = data.silver_current_rate; 1819 if (silver.buy_price != null) $('#silverBuyPrice').html(formatRatePriceLabel(silver.buy_price_label)); 1820 if (silver.sell_price != null) $('#silverSellPrice').html(formatRatePriceLabel(silver.sell_price_label)); 1821 if (!ratesLastUpdateLabel && (silver.created_at || silver.create_date)) ratesLastUpdateLabel = silver.created_at_label || silver.create_date_label; 1822 1823 updateTrendBadge('silverBuyBadge', silver.buy_trend, silver.buy_percentage_label); 1824 updateTrendBadge('silverSellBadge', silver.sell_trend, silver.sell_percentage_label); 1825 } 1826 1827 if (ratesLastUpdateLabel) { 1828 $('#ratesLastUpdate').html(ratesLastUpdateLabel); 1829 } 1830 1831 if (!isAutoUpdate) { 1832 if (data.list_timeframe && data.list_timeframe.length > 0) { 1833 var defaultTf = data.list_timeframe[0]; 1834 fetchChartData('gold', defaultTf.code, defaultTf.tipe, defaultTf.nvalue); 1835 fetchChartData('silver', defaultTf.code, defaultTf.tipe, defaultTf.nvalue); 1836 } 1837 } else { 1838 var activeGold = $('.gold-range.active'); 1839 if (activeGold.length > 0) { 1840 fetchChartData('gold', activeGold.data('range'), activeGold.data('tipe'), activeGold.data('nvalue'), true); 1841 } 1842 var activeSilver = $('.silver-range.active'); 1843 if (activeSilver.length > 0) { 1844 fetchChartData('silver', activeSilver.data('range'), activeSilver.data('tipe'), activeSilver.data('nvalue'), true); 1845 } 1846 } 1847 }, 1848 error: function(xhr, status, error) { 1849 console.error('Gagal mengambil data summary dari backend:', error); 1850 } 1851 }); 1852 } 1853 1854 1855 /*================================================== 1856 = BUTTON GOLD RANGE 1857 ==================================================*/ 1858 1859 $(document).on('click', '.gold-range', function() { 1860 $('.gold-range') 1861 .removeClass('btn-success active') 1862 .addClass('btn-outline-success'); 1863 1864 $(this) 1865 .removeClass('btn-outline-success') 1866 .addClass('btn-success active'); 1867 1868 fetchChartData('gold', $(this).data('range'), $(this).data('tipe'), $(this).data('nvalue')); 1869 }); 1870 1871 1872 /*================================================== 1873 = BUTTON SILVER RANGE 1874 ==================================================*/ 1875 1876 $(document).on('click', '.silver-range', function() { 1877 $('.silver-range') 1878 .removeClass('btn-success active') 1879 .addClass('btn-outline-success'); 1880 1881 $(this) 1882 .removeClass('btn-outline-success') 1883 .addClass('btn-success active'); 1884 1885 fetchChartData('silver', $(this).data('range'), $(this).data('tipe'), $(this).data('nvalue')); 1886 }); 1887 1888 1889 /*================================================== 1890 = BUTTON MODE (BELI / JUAL) 1891 ==================================================*/ 1892 1893 $(document).on('click', '.gold-mode', function() { 1894 $('.gold-mode') 1895 .removeClass('btn-success btn-danger active') 1896 .addClass('btn-outline-secondary'); 1897 1898 if ($(this).data('mode') === 'beli') { 1899 $(this).removeClass('btn-outline-secondary').addClass('btn-success active'); 1900 } else { 1901 $(this).removeClass('btn-outline-secondary').addClass('btn-danger active'); 1902 } 1903 1904 goldMode = $(this).data('mode'); 1905 renderGoldChart($('.gold-range.active').data('range'));
1906 }); 1907 1908 $(document).on('click', '.silver-mode', function() { 1909 $('.silver-mode') 1910 .removeClass('btn-success btn-danger active') 1911 .addClass('btn-outline-secondary'); 1912 1913 if ($(this).data('mode') === 'beli') { 1914 $(this).removeClass('btn-outline-secondary').addClass('btn-success active'); 1915 } else { 1916 $(this).removeClass('btn-outline-secondary').addClass('btn-danger active'); 1917 } 1918 1919 silverMode = $(this).data('mode'); 1920 renderSilverChart($('.silver-range.active').data('range')); 1921 }); 1922 1923 1924 /*================================================== 1925 = DEFAULT LOAD 1926 ==================================================*/ 1927 1928 $(document).ready(function() { 1929 initGoldChart(); 1930 initSilverChart(); 1931 1932 loadRatesSummary(false); 1933 1934 setInterval(function() { 1935 loadRatesSummary(true); 1936 }, 60000); 1937 }); 1938 1939 </script>
1939 1940 1941</body> 1942</html> 1943
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.