commit 1ecd3f2641264b1389c90af03c6310dbdb53e7e6 Author: Matthew Finkel <sysrqb@torproject.org> Date: Wed Sep 29 19:41:15 2021 +0000 Bug 40049: Add banner for VPN survey to about:tor --- chrome/content/aboutTor/aboutTor.xhtml | 11 ++++++++ chrome/skin/aboutTor.css | 47 ++++++++++++++++++++++++++++++++++ chrome/skin/tor-survey-icon.svg | 1 + 3 files changed, 59 insertions(+) diff --git a/chrome/content/aboutTor/aboutTor.xhtml b/chrome/content/aboutTor/aboutTor.xhtml index f3a9032f..56318d48 100644 --- a/chrome/content/aboutTor/aboutTor.xhtml +++ b/chrome/content/aboutTor/aboutTor.xhtml @@ -65,6 +65,17 @@ </form> </div> + <div id="surveyBanner"> + <img id="surveyImg" src="resource://torbutton-assets/tor-survey-icon.svg" /> + <div id="surveyTextCol"> + <div id="surveyHeader">Do you use a VPN?</div> + <br /> + <div id="surveyDescription">We’d like to learn more about how and why our users use VPNs. Complete this short ten-minute survey to tell us about your experience:</div> + <br /> + <a id="surveyLink" target="_blank" href="http://eh5esdnd6fkbkapfc6nuyvkjgbtnzq2is72lmpwbdbxepd2z7zbgzsqd.onion/index.php/664393">Launch the Survey</a> + </div> + </div> + <div id="bottom"> <p id="donate" class="moreInfoLink">&aboutTor.donationBanner.freeToUse; <a href="https://donate.torproject.org/">&aboutTor.donationBanner.buttonA; »</a> diff --git a/chrome/skin/aboutTor.css b/chrome/skin/aboutTor.css index 38486241..e0d692c9 100644 --- a/chrome/skin/aboutTor.css +++ b/chrome/skin/aboutTor.css @@ -220,6 +220,53 @@ body:not([showmanual]) .showForManual { background-color: rgba(12, 12, 13, 0.1); /* same as Firefox's about:home */ } +#surveyBanner { + width: 690px; + padding: 20px 25px 25px; + background: rgba(0, 0, 0, 0.3); + border-radius: 6px; + margin: 35px auto 0px; + display: flex; + flex-direction: row; + align-items: flex-start; + position: static; +} + +@media only screen and (min-width: 900px) { + #surveyBanner { + margin: 35px 0px 0px 135px; + } +} + +#surveyTextCol { + padding: 8px 0px 0px 15px; + font-size: 15px; + line-height: normal; + color: #FFFFFF; + width: 633px; +} + +#surveyHeader { + font-weight: bold; +} + +#surveyImg { + width: 32px; + position: static; +} + +div.surveyDescription, div.surveyLink { + padding-top: 10px; +} + +a#surveyLink { + text-decoration: underline; +} + +a#surveyLink:hover { + text-decoration: none; +} + /* #search-text is the search input field */ #search-text { flex: 1; diff --git a/chrome/skin/tor-survey-icon.svg b/chrome/skin/tor-survey-icon.svg new file mode 100644 index 00000000..2a0749bd --- /dev/null +++ b/chrome/skin/tor-survey-icon.svg @@ -0,0 +1 @@ +<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" fill="#df58a9" r="16"/><path d="m16 5.6875c-2.735 0-5.3581 1.08649-7.29204 3.02046-1.93397 1.93394-3.02046 4.55704-3.02046 7.29204s1.08649 5.3581 3.02046 7.292c1.93394 1.934 4.55704 3.0205 7.29204 3.0205s5.3581-1.0865 7.292-3.0205c1.934-1.9339 3.0205-4.557 3.0205-7.292s-1.0865-5.3581-3.0205-7.29204c-1.9339-1.93397-4.557-3.02046-7.292-3.02046zm3.3646 2.40625c1.4118.60622 2.6355 1.57956 3.5437 2.81885.9082 1.2393 1.4679 2.6992 1.6208 4.228h-3.0649c-.1692-2.5604-1.0947-5.0129-2.6592-7.04685zm-2.8174 0c1.8605 1.89985 2.9907 4.39535 3.1914 7.04685h-7.4772c.2007-2.6515 1.3309-5.147 3.1914-7.04685zm-3.9132 0h.561c-1.5639 2.03425-2.4893 4.48665-2.6592 7.04685h-3.06493c.15266-1.5287.71207-2.9886 1.62007-4.2279.908-1.23927 2.13146-2.21266 3.54306-2.81895zm0 15.81245c-1.4118-.606-2.63538-1.5793-3.54342-2.8187-.90803-1.2393-1.46734-2.6993-1.61971-4.2281h3.06493c.1692 2.5604 1.0 947 5.0129 2.6592 7.0468zm2.8188 0c-1.8605-1.8998-2.9907-4.3953-3.1914-7.0468h7.4759c-.2008 2.6515-1.331 5.147-3.1914 7.0468zm3.9132 0h-.5624c1.5651-2.0335 2.4906-4.4863 2.6593-7.0468h3.0648c-.1523 1.5286-.7115 2.9885-1.6193 4.2278-.9077 1.2392-2.1309 2.2127-3.5424 2.819z" fill="#240a3b"/></svg> \ No newline at end of file