diff --git a/contentscript.js b/contentscript.js index 191d5a4..04aba50 100644 --- a/contentscript.js +++ b/contentscript.js @@ -19,16 +19,38 @@ TODO function showBetter(alternative) { if(!alternative) return; let betterdiv = document.createElement("div"); - betterdiv.style.backgroundColor = "yellow"; + betterdiv.style.backgroundColor = "#ffcc49"; betterdiv.style.color = "red"; betterdiv.style.position = "fixed"; betterdiv.style.bottom = "10px"; betterdiv.style.right = "10px"; - betterdiv.style.width = "400px"; + betterdiv.style.width = "300px"; + betterdiv.style.boxShadow = "0px 10px 30px #222222"; + betterdiv.style.padding = "12px"; betterdiv.style.height = "200px"; betterdiv.style.textAlign = "center"; betterdiv.style.fontSize = "20px"; - betterdiv.innerHTML = alternative; + + let betterBrandText = document.createElement("h1"); + betterBrandText.innerHTML = "Better" + betterBrandText.setAttribute("style", "font-size: 32px; color: #222222; font-weight: bold; margin: 12px;") + + let alternativeText = document.createElement("p"); + alternativeText.innerHTML = alternative + alternativeText.setAttribute("style", "font-size: 20px; color: #222222; font-weight: bold; margin-top: 24px;") + + let alternativeCTA = document.createElement("a") + alternativeCTA.innerHTML = "Check it out →" + alternativeCTA.setAttribute("style", "display: inline-block; padding: 12px 24px; background-color: #222222; color: #ffffff; border-radius: 4px;") + + let dismissButton = document.createElement("button") + dismissButton.innerHTML = "✗ Dismiss suggestion for this URL" + dismissButton.setAttribute("style", "display: block; font-size: 14px; margin: 16px auto;") + + betterdiv.appendChild(betterBrandText); + betterdiv.appendChild(alternativeText); + betterdiv.appendChild(alternativeCTA); + betterdiv.appendChild(dismissButton); document.body.appendChild(betterdiv); }