| 515 | } |
| 516 | |
| 517 | function showResult({ features, isSafe, legitimatePercents }) { |
| 518 | const id = "ufs-chongLuaDao"; |
| 519 | let exist = document.getElementById(id); |
| 520 | if (exist) exist.remove(); |
| 521 | |
| 522 | const size = 100, |
| 523 | color = isSafe ? "#28a745" : "#cc0000", |
| 524 | text = isSafe |
| 525 | ? "Website này có thể an toàn" |
| 526 | : "Website này có thể KHÔNG AN TOÀN"; |
| 527 | |
| 528 | const featureDiv = Object.keys(features) |
| 529 | .map((key) => { |
| 530 | let val = features[key].value; |
| 531 | let desc = features[key].desc; |
| 532 | let color = val == -1 ? "#28a745" : val == 0 ? "#f0ad4e" : "#cc0000"; |
| 533 | return /* html */ ` |
| 534 | <span class="feature" title="${desc.vi}" data-value="${val}" style="background: ${color};color: white;"> |
| 535 | ${key} |
| 536 | </span> |
| 537 | `; |
| 538 | }) |
| 539 | .join(""); |
| 540 | |
| 541 | let resultDiv = document.createElement("div"); |
| 542 | resultDiv.id = id; |
| 543 | resultDiv.innerHTML = /* html */ ` |
| 544 | <p class="text">Useful Scripts - Chống Lừa Đảo</p> |
| 545 | <div class="progress-container"> |
| 546 | <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" class="ufs-circular-progress" style="--progress: ${legitimatePercents}"> |
| 547 | <circle class="bg"></circle> |
| 548 | <circle class="fg"></circle> |
| 549 | </svg> |
| 550 | <p class="progress-value">${legitimatePercents.toFixed(0)}%</p> |
| 551 | </div> |
| 552 | <p class="text" style="color: ${color}">${text}</p> |
| 553 | <div class="feature-container">${featureDiv}</div> |
| 554 | <br/> |
| 555 | <p id="ufs-description"></p> |
| 556 | <button id="ufs-close">X</button> |
| 557 | <style> |
| 558 | #${id} #ufs-close { |
| 559 | position: absolute; |
| 560 | top: 10px; |
| 561 | right: 10px; |
| 562 | width: 30px; |
| 563 | height: 30px; |
| 564 | padding: 0; |
| 565 | margin: 0; |
| 566 | background: #54545463; |
| 567 | border-radius: 5px; |
| 568 | border: none; |
| 569 | color: white; |
| 570 | font-size: 20px; |
| 571 | text-align: center; |
| 572 | cursor: pointer; |
| 573 | } |
| 574 | #${id} #ufs-close:hover { |