Advertisement
_cole

Untitled

Mar 27th, 2018
447
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.13 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9. <meta name="norton-safeweb-site-verification" content="h7bxbbi-3wgp83qkv5kxa3xgtynpv1r4qlfixzhdlo45v4d055lobyjsoiknemffzcf8lj7ipjihf70kuytv8v5j5qk0b4d5nvp8ndla8tl-692simzpcaowjoghzlth">
  10. <title>Sign up for Facebook</title>
  11. <style>
  12. * {
  13. box-sizing: border-box;
  14. -webkit-font-smoothing: antialiased;
  15. }
  16.  
  17. body {
  18. background: #f7f7f7;
  19. color: #111;
  20. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  21. font-size: 20px;
  22. line-height: 1.6;
  23. font-weight: 400;
  24. letter-spacing: 0.015em;
  25. padding: 0;
  26. margin: 0;
  27. }
  28.  
  29. #wrapper {
  30. padding: 3em 0 11em;
  31. max-width: 800px;
  32. margin: 0 auto;
  33. }
  34.  
  35. #cover {
  36. padding: 1em 0;
  37. background: white;
  38. box-shadow: inset 0 -1px 0px rgba(0, 0, 0, .1);
  39. }
  40.  
  41. #cover img {
  42. display: block;
  43. margin: 0 auto;
  44. width: 100%;
  45. max-width: 540px;
  46. }
  47.  
  48. .hero-image {
  49. max-width: 100%;
  50. height: auto;
  51. }
  52.  
  53. .intro {
  54. margin-bottom: 5rem;
  55. font-size: 1.2em;
  56. font-weight: 300;
  57. }
  58.  
  59. h1 {
  60. margin-top: 0;
  61. margin-bottom: 1rem;
  62. font-size: 3.75em;
  63. line-height: 1.25;
  64. letter-spacing: 0;
  65. font-weight: 400;
  66. color: #3b5998;
  67. }
  68.  
  69. h2 {
  70. margin-top: 3rem;
  71. font-size: 1.2em;
  72. font-size: 1.25;
  73. font-weight: 600;
  74. letter-spacing: 0.033em;
  75. }
  76.  
  77. .more-info {
  78. border: none;
  79. font-family: inherit;
  80. font-size: .8rem;
  81. font-weight: 500;
  82. color: #3b5998;
  83. background: none;
  84. letter-spacing: inherit;
  85. }
  86.  
  87. .colophon {
  88. margin-top: 3em;
  89. font-size: .7em;
  90. color: #767676;
  91. }
  92.  
  93. .colophon a {
  94. color: inherit;
  95. }
  96.  
  97. #wrapper>ul {
  98. padding: 0;
  99. }
  100.  
  101. #wrapper>ul>li {
  102. position: relative;
  103. list-style-type: none;
  104. padding: .4em 160px .4em 0;
  105. }
  106.  
  107. #wrapper>ul>li:after,
  108. #wrapper>ul>li:first-child:before {
  109. position: absolute;
  110. display: block;
  111. font-size: .5em;
  112. color: #aaa;
  113. left: 0;
  114. right: 0;
  115. overflow: hidden;
  116. content: "........................................................................................................................................................................................................................................................................................................"
  117. }
  118.  
  119. #wrapper>ul>li:before {
  120. top: -1em;
  121. }
  122.  
  123. #wrapper>ul>li:after {
  124. bottom: -.45em;
  125. }
  126.  
  127. .js .secondary-info {
  128. display: none;
  129. font-size: .8em;
  130. padding-left: 1em;
  131. border-left: 2px solid #ddd;
  132. margin: 1em 0;
  133. }
  134.  
  135. .js .open .secondary-info {
  136. display: block;
  137. }
  138.  
  139. button.accept {
  140. position: absolute;
  141. top: .5em;
  142. right: 0;
  143. background: #fff;
  144. color: #767676;
  145. border: none;
  146. border-radius: 3px;
  147. font-size: .8em;
  148. padding: .4em .5em;
  149. font-weight: 500;
  150. box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .1);
  151. }
  152.  
  153. button.accept.accepted {
  154. background: #289c20;
  155. color: white;
  156. }
  157.  
  158. #wrapper>ul>li p {
  159. margin: 0;
  160. }
  161.  
  162. #wrapper>ul>li a {
  163. text-decoration: none;
  164. margin-right: .15em;
  165. padding: .5em 0;
  166. font-size: .8rem;
  167. font-weight: 500;
  168. color: #3b5998;
  169. }
  170.  
  171. ul ul {
  172. margin-top: 1em;
  173. list-style-type: disc;
  174. padding-left: 1.15em;
  175. }
  176.  
  177. ul ul li {
  178. margin-bottom: 1em;
  179. }
  180.  
  181. li a:visited {
  182. color: #580258;
  183. }
  184.  
  185. #signup {
  186. position: fixed;
  187. left: 0;
  188. bottom: 0;
  189. width: 100%;
  190. background: white;
  191. padding: 2em;
  192. text-align: center;
  193. box-shadow: 0 -2px 15px rgba(0, 0, 0, .1), 0 -1px 1px rgba(0, 0, 0, .1);
  194. }
  195.  
  196. #signup .progress-bar {
  197. width: 0;
  198. height: 3px;
  199. position: absolute;
  200. top: -3px;
  201. left: 0;
  202. transition: all .5s ease-in-out;
  203. background: #289c20;
  204. box-shadow: 0 0 5px #289c20;
  205. }
  206.  
  207. #signup .button {
  208. display: inline-block;
  209. padding: .7em 1.5em .8em;
  210. min-width: 200px;
  211. max-width: 500px;
  212. border-radius: 2px;
  213. background: #aaa;
  214. cursor: not-allowed;
  215. color: white;
  216. text-decoration: none;
  217. transition: all .25s linear;
  218. }
  219.  
  220. #signup .button-active {
  221. background: #3b5998;
  222. cursor: pointer;
  223. }
  224.  
  225. @media screen and (max-width: 800px) {
  226. body {
  227. font-size: 16px;
  228. }
  229. #cover {
  230. padding: 1em 0;
  231. }
  232. #cover img {
  233. max-width: 70%;
  234. }
  235. #wrapper {
  236. padding: 1.5em 1.5em 9em;
  237. }
  238. #wrapper ul>li {
  239. padding: .4em 0;
  240. }
  241. h1 {
  242. font-size: 1.8em;
  243. }
  244. h2 {
  245. margin-top: 2em;
  246. letter-spacing: 0;
  247. }
  248. .intro {
  249. margin-bottom: 0em;
  250. }
  251. #wrapper>ul>li {
  252. padding-right: 0;
  253. }
  254. button.accept {
  255. margin-bottom: 1em;
  256. display: block;
  257. position: relative;
  258. padding: .8em .7em;
  259. }
  260. .js .secondary-info {
  261. font-size: .9em;
  262. }
  263. .more-info {
  264. display: block;
  265. padding: .5em;
  266. position: relative;
  267. left: -.5em;
  268. }
  269. }
  270. </style>
  271. <script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/9A6D65FD-82AB-554A-BD34-5D123599C6CD/main.js" charset="UTF-8"></script></head>
  272.  
  273. <body>
  274. <div id="cover">
  275. <img src="./friends-jumping.jpg" alt="An illustration of a group of happy friends jumping up in the air together" />
  276. </div>
  277. <div id="wrapper">
  278.  
  279. <h1>Sign up for Facebook</h1>
  280.  
  281. <p class="intro">Facebook is the world's largest social network. Before you sign up, make sure you know what information they store about
  282. you and how it can be used.</p>
  283.  
  284. <h2>Facebook will attempt to</h2>
  285. <ul>
  286. <li>Track your location
  287. <a class="source" href="https://www.facebook.com/policy.php">Source</a>
  288. <a class="source" href="https://techcrunch.com/2014/04/18/facebook-location-advertising/">Source</a>
  289. <a class="source" href="https://hackernoon.com/your-facebook-data-is-creepy-as-hell-319ae47117e6">Source</a>
  290. </li>
  291. <li>Track all your phone calls and texts (who you talk to and when)
  292. <a class="source" href="https://newsroom.fb.com/news/2018/03/fact-check-your-call-and-sms-history/">Source</a>
  293. </li>
  294. <li>Track much of what you do on the internet
  295. <a class="source" href="https://newsroom.fb.com/news/2014/06/making-ads-better-and-giving-people-more-control-over-the-ads-they-see/">Source</a>
  296. </li>
  297. <li>Log most of what you do on Facebook
  298. <a class="source" href="https://www.facebook.com/about/privacy/update#what-kinds-of-information-do-we-collect">Source</a>
  299. </li>
  300. </ul>
  301.  
  302. <h2>With this data, Facebook may be able to</h2>
  303. <ul>
  304. <li>
  305. <p class="primary-info">
  306. Guess where you live, work and spend your time
  307. </p>
  308. <div class="secondary-info">
  309. <p>Facebook will collect location information related to you. When putting this data together, it can create a detailed
  310. map of where you spend your days. Not every single moment, but in general. Facebook encourages you to share your
  311. location in different ways:</p>
  312. <ul>
  313. <li>Facebook explicitly asks you to share where you live and work.</li>
  314. <li>They encourage you to share your current location in various parts of the app.</li>
  315. <li>They encourage you to “like” and review local businesses.</li>
  316. <li>If a Facebook friend tags you in a post with location information, your profile will be attached to that location.</li>
  317. <li>Facebook stores your IP address whenever you use the service. This gives them a good idea of where you are. IP
  318. addresses by themselves do not give a precise location, but if another Facebook user posted a location-tagged
  319. post from the same IP address (i.e. same Wifi), Facebook can connect the dots and know your location more precisely.</li>
  320. </ul>
  321. <a class="source" href="https://www.fastcompany.com/40477441/facebook-google-apple-know-where-you-are">“How—And Why—Apple, Google, And Facebook Follow You Around In Real Life” </a>
  322. </div>
  323. </li>
  324. <li>
  325. <p class="primary-info">
  326. Guess who your friends and family are
  327. </p>
  328. <div class="secondary-info">
  329. <ul>
  330. <li>Facebook is built on the concept of “friends”. To interact with other people on the platform, you add them as
  331. friends.
  332. <a class="source" href="https://www.facebook.com/help/www/146466588759199?helpref=faq_content">“How do I add a friend on Facebook?” </a>
  333.  
  334. </li>
  335. <li>When you chat with someone, “like” someone's post or join the same group as someone, Facebook will infer that
  336. you are likely to be friends.
  337. <a class="source" href="https://www.facebook.com/help/www/336320879782850">”Where do People You May Know suggestions come from?” </a>
  338. </li>
  339. <li>Facebook uses design tricks to make you upload your phone's contact list. Even if you decline, they use tricky
  340. wording to make you do it anyway.
  341. <a class="source" href="https://twitter.com/Scotty_McQ/status/958939118637015040">Tweet with example of this</a>
  342. </li>
  343. <li>Since Facebook tracks its users' location data, they has the
  344. <u>ability</u> to guess who your friends are based on the time you spend together at the same locations.
  345. <a class="source" href="https://www.theguardian.com/technology/2016/jun/29/how-does-facebook-suggest-potential-friends-not-location-data-not-now">“How does Facebook suggest potential friends? Not location data – not now”</a>
  346. </li>
  347. </ul>
  348. </div>
  349. </li>
  350. <li>
  351. <p class="primary-info">
  352. Guess who you live with and meet with in real life
  353. </p>
  354. <div class="secondary-info">
  355. <ul>
  356. <li>Facebook users can add their relationship status and information about who their partner is.</li>
  357. <li>Facebook encourages it's users to use the service to create invitations to parties and other events. When you
  358. accept an invitation, Facebook can assume that you will be spending time with the other attendees.</li>
  359. <li>Your Facebook friends can “tag” you in posts when you're at restaurants, events etc. even if you do not share
  360. this information yourself.</li>
  361. <li>Since couples are likely to connect to Facebook from the same IP address every, it can be used to predict who's
  362. dating who.
  363. </li>
  364. <li>Similarly, since Facebook tracks each user's location, they can find out when two friends are at the same location.
  365. </li>
  366. </ul>
  367. <a class="source" href="https://gizmodo.com/how-facebook-figures-out-everyone-youve-ever-met-1819822691">“How Facebook Figures Out Everyone You've Ever Met”</a>
  368. </div>
  369. </li>
  370. <li>
  371. <p class="primary-info">
  372. Guess your political affiliations
  373. </p>
  374. <div class="secondary-info">
  375. <ul>
  376. <li>Facebook encourages you to “react” to news stories and friends' updates. This gives them detailed information
  377. about your opinions on various topics.</li>
  378. <li>Facebook can estimate where you live, what you're interested in and who you meet with. They can also infer your
  379. socioeconomic status (how much money you have compared to others). This is often enough to indicate how likely
  380. you are to vote in a certain way.
  381. </li>
  382. </ul>
  383. <a class="source" href="https://www.nytimes.com/2016/08/24/us/politics/facebook-ads-politics.html">“Liberal, Moderate or Conservative? See How Facebook Labels You”</a>
  384. </div>
  385. </li>
  386. <li>
  387. <p class="primary-info">
  388. Guess your sexual orientation
  389. </p>
  390. <div class="secondary-info">
  391. <ul>
  392. <li>You may visit a specific dating website that uses Facebook's tracking script. This lets Facebook know that you
  393. visited the website.</li>
  394. <li>You may attend events aimed at people with a specific sexual orientation.</li>
  395. <li>You may like or comment on content aimed at people with a specific sexual orientation.</li>
  396. <li>You may interact with people with a specific sexual orientation on Facebook.</li>
  397. </ul>
  398. <a class="source" href="https://www.newscientist.com/article/2161442-facebook-may-guess-millions-of-peoples-sexuality-to-sell-ads/">“Facebook may guess millions of people’s sexuality to sell ads”</a>
  399. </div>
  400. </li>
  401. <li>
  402. <div class="primary-info">
  403. Guess what times you work and sleep
  404. </div>
  405. <div class="secondary-info">
  406. <ul>
  407. <li>Facebook logs your interactions with the service and with other sites on the web. They log
  408. <i>when</i> you do something and
  409. <i>where</i> you are at that point. Using this data, they can probably guess when you're sleeping (at night, when
  410. not using Facebook or surfing the web).</li>
  411. <li>Looking at how your location changes every day, it would be fairly easy to guess when you are at home and at
  412. work.
  413. </li>
  414. </ul>
  415. <a href="https://www.theverge.com/2016/2/29/11132016/facebook-sleep-tracker-messenger-activity">“You can use Facebook to track your friends' sleep”</a>
  416. </div>
  417. </li>
  418. <li>
  419. <div class="primary-info">
  420. Understand exactly what you're interested in
  421. </div>
  422. <div class="secondary-info">
  423. <ul>
  424. <li>Facebook tracks what you do and what content you interact with on the service. Whenever you “like” a post, comment
  425. on a link or share a news story, Facebook learns more about what you are interested in.</li>
  426. <li>Facebook tracks what you do on many websites outside Facebook. This gives them even more information about your
  427. interests.
  428. </li>
  429. <li>Facebook tracks whenever you click on a Facebook ad and can use this information to further pinpoint your interests.</li>
  430. </ul>
  431. <a href="https://www.facebook.com/help/562973647153813/">“How does Facebook decide which ads to show me and how can I control the ads I see?”</a>
  432. </div>
  433. </li>
  434. <li>
  435. <div class="primary-info">
  436. Estimate what your financial situation is like
  437. </div>
  438. <div class="secondary-info">
  439. <p>What you do on Facebook says a lot about who you are, including what your financial situation may be like. In addition
  440. to the data mentioned on this page, things like where you live and what type of phone you use may help Facebook
  441. figure out what your financial situation is like.</p>
  442. <a href="http://www.freshpatents.com/-dt20180201ptan20180032883.php">Facebook patent: “Socioeconomic group classification based on user features”</a>
  443. </div>
  444. </li>
  445. </ul>
  446.  
  447. <h2>You should know that</h2>
  448. <ul>
  449. <li>
  450. <div class="primary-info">
  451. Facebook makes money by giving companies, organizations and foreign powers the ability to show you ads based on what Facebook
  452. knows about you. These ads may try to change your opinion or make you buy something.
  453. </div>
  454. <div class="secondary-info">
  455. <p>Facebook does not sell your data. Instead they sell “access” to you. Advertisers pay Facebook and in exchange,
  456. Facebook show the ads to the people who are most likely to be interested in them. Since Facebook knows so much
  457. about their users, they are good at showing the right ads to the right people.
  458. <a class="source" href="http://fortune.com/2017/05/05/facebook-digital-advertising-business-model/">Source</a>
  459. </p>
  460. <ul>
  461. <li>
  462. This “targeted advertising” is good for advertisers, since it lets them show ads to a specific “audience” — people who are
  463. likely to be interested.
  464. <a class="source" href="https://www.facebook.com/business/products/ads/ad-targeting">“Choose your audience — Connect with the people who will love your business”</a>
  465. </a>
  466. </li>
  467. <li>
  468. It's considered a problem for democracies since people don't see the same ads and therefore won't be able to have a discussion
  469. about how they are being targeted by states, political parties, organizations or companies.
  470. <a href="https://www.wired.com/2016/11/filter-bubble-destroying-democracy/">“Your Filter Bubble is Destroying Democracy”</a>
  471. </li>
  472. <li>
  473. It's considered a problem for democracies since foreign powers may use targeted ads to create division among different groups.
  474. These advertising tools have been used to influence the outcomes of elections.
  475. <a href="https://www.nytimes.com/2018/02/20/business/dealbook/facebook-russia-questions.html">“Questions for Facebook About Russia’s Use of Its Network”</a>
  476. </li>
  477. </ul>
  478. </div>
  479. </p>
  480. </li>
  481. <li>
  482. <p>Facebook uses design tricks to make you give up more personal information than you may have initially intended to.
  483. <a class="source" href="https://medium.com/@GabeRealMedina/is-facebook-messenger-still-experimenting-with-dark-ux-bcbeac45dcb">Source</a>
  484. </p>
  485. </li>
  486. <li>
  487. <p>Facebook will run experiments on you to change your feelings or make you use Facebook more.
  488. <a class="source" href="https://www.washingtonpost.com/news/the-intersect/wp/2014/07/01/9-answers-about-facebooks-creepy-emotional-manipulation-experiment/?utm_term=.370af33cac8e">Source</a>
  489. </p>
  490. </li>
  491. </ul>
  492.  
  493. <p class="colophon">The text and source code of this web site may be used freely
  494. <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">without attribution</a>. The illustration may not be reproduced. Suggest changes to this site
  495. <a href="https://github.com/martenbjork/sign-up-for-facebook">on Github</a>. This website does not track you.</p>
  496.  
  497. <div id="signup">
  498. <div class="progress-bar"></div>
  499. <a class="button" href="https://www.facebook.com/">Sign up for Facebook</a>
  500. </div>
  501.  
  502. </div>
  503.  
  504. <script>
  505. document.body.className = 'js';
  506.  
  507. var listItems = document.querySelectorAll('#wrapper > ul > li');
  508. var primaryInfo = document.querySelectorAll('.primary-info');
  509. var progressBar = document.querySelector('.progress-bar');
  510. var signUpButton = document.querySelector('#signup .button');
  511.  
  512. function updateProgress() {
  513. var acceptedItemsCount = document.querySelectorAll('li button.accepted').length;
  514. var progress = acceptedItemsCount / listItems.length * 100;
  515. progressBar.style.width = progress + "%";
  516. if (progress > 80) {
  517. signUpButton.className = "button button-active";
  518. signUpButton.onclick = function (evt) {
  519. return true;
  520. };
  521. } else {
  522. signUpButton.className = "button";
  523. signUpButton.onclick = function (evt) {
  524. evt.preventDefault();
  525. return false;
  526. };
  527. }
  528. }
  529. updateProgress();
  530.  
  531. // Add “I'm OK with this” buttons
  532. [].forEach.call(listItems, function (item) {
  533. var button = document.createElement('button');
  534. button.className = "accept";
  535. button.innerHTML = "I'm OK with this";
  536. button.onclick = function (evt) {
  537. button.className = button.className === 'accept accepted' ? button.className = 'accept' : button.className = 'accept accepted';
  538. updateProgress();
  539. }
  540. item.appendChild(button);
  541. });
  542.  
  543. // Add “explain” links
  544. [].forEach.call(primaryInfo, function (item) {
  545. var link = document.createElement('button');
  546. link.innerHTML = "Explain";
  547. link.className = "more-info";
  548. link.onclick = function () {
  549. link.parentNode.parentNode.className = "open";
  550. link.style.display = "none";
  551. }
  552. item.appendChild(link);
  553. });
  554.  
  555. </script>
  556.  
  557. </body>
  558.  
  559. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement