Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <meta name="norton-safeweb-site-verification" content="h7bxbbi-3wgp83qkv5kxa3xgtynpv1r4qlfixzhdlo45v4d055lobyjsoiknemffzcf8lj7ipjihf70kuytv8v5j5qk0b4d5nvp8ndla8tl-692simzpcaowjoghzlth">
- <title>Sign up for Facebook</title>
- <style>
- * {
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- }
- body {
- background: #f7f7f7;
- color: #111;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- font-size: 20px;
- line-height: 1.6;
- font-weight: 400;
- letter-spacing: 0.015em;
- padding: 0;
- margin: 0;
- }
- #wrapper {
- padding: 3em 0 11em;
- max-width: 800px;
- margin: 0 auto;
- }
- #cover {
- padding: 1em 0;
- background: white;
- box-shadow: inset 0 -1px 0px rgba(0, 0, 0, .1);
- }
- #cover img {
- display: block;
- margin: 0 auto;
- width: 100%;
- max-width: 540px;
- }
- .hero-image {
- max-width: 100%;
- height: auto;
- }
- .intro {
- margin-bottom: 5rem;
- font-size: 1.2em;
- font-weight: 300;
- }
- h1 {
- margin-top: 0;
- margin-bottom: 1rem;
- font-size: 3.75em;
- line-height: 1.25;
- letter-spacing: 0;
- font-weight: 400;
- color: #3b5998;
- }
- h2 {
- margin-top: 3rem;
- font-size: 1.2em;
- font-size: 1.25;
- font-weight: 600;
- letter-spacing: 0.033em;
- }
- .more-info {
- border: none;
- font-family: inherit;
- font-size: .8rem;
- font-weight: 500;
- color: #3b5998;
- background: none;
- letter-spacing: inherit;
- }
- .colophon {
- margin-top: 3em;
- font-size: .7em;
- color: #767676;
- }
- .colophon a {
- color: inherit;
- }
- #wrapper>ul {
- padding: 0;
- }
- #wrapper>ul>li {
- position: relative;
- list-style-type: none;
- padding: .4em 160px .4em 0;
- }
- #wrapper>ul>li:after,
- #wrapper>ul>li:first-child:before {
- position: absolute;
- display: block;
- font-size: .5em;
- color: #aaa;
- left: 0;
- right: 0;
- overflow: hidden;
- content: "........................................................................................................................................................................................................................................................................................................"
- }
- #wrapper>ul>li:before {
- top: -1em;
- }
- #wrapper>ul>li:after {
- bottom: -.45em;
- }
- .js .secondary-info {
- display: none;
- font-size: .8em;
- padding-left: 1em;
- border-left: 2px solid #ddd;
- margin: 1em 0;
- }
- .js .open .secondary-info {
- display: block;
- }
- button.accept {
- position: absolute;
- top: .5em;
- right: 0;
- background: #fff;
- color: #767676;
- border: none;
- border-radius: 3px;
- font-size: .8em;
- padding: .4em .5em;
- font-weight: 500;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 3px rgba(0, 0, 0, .1);
- }
- button.accept.accepted {
- background: #289c20;
- color: white;
- }
- #wrapper>ul>li p {
- margin: 0;
- }
- #wrapper>ul>li a {
- text-decoration: none;
- margin-right: .15em;
- padding: .5em 0;
- font-size: .8rem;
- font-weight: 500;
- color: #3b5998;
- }
- ul ul {
- margin-top: 1em;
- list-style-type: disc;
- padding-left: 1.15em;
- }
- ul ul li {
- margin-bottom: 1em;
- }
- li a:visited {
- color: #580258;
- }
- #signup {
- position: fixed;
- left: 0;
- bottom: 0;
- width: 100%;
- background: white;
- padding: 2em;
- text-align: center;
- box-shadow: 0 -2px 15px rgba(0, 0, 0, .1), 0 -1px 1px rgba(0, 0, 0, .1);
- }
- #signup .progress-bar {
- width: 0;
- height: 3px;
- position: absolute;
- top: -3px;
- left: 0;
- transition: all .5s ease-in-out;
- background: #289c20;
- box-shadow: 0 0 5px #289c20;
- }
- #signup .button {
- display: inline-block;
- padding: .7em 1.5em .8em;
- min-width: 200px;
- max-width: 500px;
- border-radius: 2px;
- background: #aaa;
- cursor: not-allowed;
- color: white;
- text-decoration: none;
- transition: all .25s linear;
- }
- #signup .button-active {
- background: #3b5998;
- cursor: pointer;
- }
- @media screen and (max-width: 800px) {
- body {
- font-size: 16px;
- }
- #cover {
- padding: 1em 0;
- }
- #cover img {
- max-width: 70%;
- }
- #wrapper {
- padding: 1.5em 1.5em 9em;
- }
- #wrapper ul>li {
- padding: .4em 0;
- }
- h1 {
- font-size: 1.8em;
- }
- h2 {
- margin-top: 2em;
- letter-spacing: 0;
- }
- .intro {
- margin-bottom: 0em;
- }
- #wrapper>ul>li {
- padding-right: 0;
- }
- button.accept {
- margin-bottom: 1em;
- display: block;
- position: relative;
- padding: .8em .7em;
- }
- .js .secondary-info {
- font-size: .9em;
- }
- .more-info {
- display: block;
- padding: .5em;
- position: relative;
- left: -.5em;
- }
- }
- </style>
- <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>
- <body>
- <div id="cover">
- <img src="./friends-jumping.jpg" alt="An illustration of a group of happy friends jumping up in the air together" />
- </div>
- <div id="wrapper">
- <h1>Sign up for Facebook</h1>
- <p class="intro">Facebook is the world's largest social network. Before you sign up, make sure you know what information they store about
- you and how it can be used.</p>
- <h2>Facebook will attempt to</h2>
- <ul>
- <li>Track your location
- <a class="source" href="https://www.facebook.com/policy.php">Source</a>
- <a class="source" href="https://techcrunch.com/2014/04/18/facebook-location-advertising/">Source</a>
- <a class="source" href="https://hackernoon.com/your-facebook-data-is-creepy-as-hell-319ae47117e6">Source</a>
- </li>
- <li>Track all your phone calls and texts (who you talk to and when)
- <a class="source" href="https://newsroom.fb.com/news/2018/03/fact-check-your-call-and-sms-history/">Source</a>
- </li>
- <li>Track much of what you do on the internet
- <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>
- </li>
- <li>Log most of what you do on Facebook
- <a class="source" href="https://www.facebook.com/about/privacy/update#what-kinds-of-information-do-we-collect">Source</a>
- </li>
- </ul>
- <h2>With this data, Facebook may be able to</h2>
- <ul>
- <li>
- <p class="primary-info">
- Guess where you live, work and spend your time
- </p>
- <div class="secondary-info">
- <p>Facebook will collect location information related to you. When putting this data together, it can create a detailed
- map of where you spend your days. Not every single moment, but in general. Facebook encourages you to share your
- location in different ways:</p>
- <ul>
- <li>Facebook explicitly asks you to share where you live and work.</li>
- <li>They encourage you to share your current location in various parts of the app.</li>
- <li>They encourage you to “like” and review local businesses.</li>
- <li>If a Facebook friend tags you in a post with location information, your profile will be attached to that location.</li>
- <li>Facebook stores your IP address whenever you use the service. This gives them a good idea of where you are. IP
- addresses by themselves do not give a precise location, but if another Facebook user posted a location-tagged
- post from the same IP address (i.e. same Wifi), Facebook can connect the dots and know your location more precisely.</li>
- </ul>
- <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>
- </div>
- </li>
- <li>
- <p class="primary-info">
- Guess who your friends and family are
- </p>
- <div class="secondary-info">
- <ul>
- <li>Facebook is built on the concept of “friends”. To interact with other people on the platform, you add them as
- friends.
- <a class="source" href="https://www.facebook.com/help/www/146466588759199?helpref=faq_content">“How do I add a friend on Facebook?” </a>
- </li>
- <li>When you chat with someone, “like” someone's post or join the same group as someone, Facebook will infer that
- you are likely to be friends.
- <a class="source" href="https://www.facebook.com/help/www/336320879782850">”Where do People You May Know suggestions come from?” </a>
- </li>
- <li>Facebook uses design tricks to make you upload your phone's contact list. Even if you decline, they use tricky
- wording to make you do it anyway.
- <a class="source" href="https://twitter.com/Scotty_McQ/status/958939118637015040">Tweet with example of this</a>
- </li>
- <li>Since Facebook tracks its users' location data, they has the
- <u>ability</u> to guess who your friends are based on the time you spend together at the same locations.
- <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>
- </li>
- </ul>
- </div>
- </li>
- <li>
- <p class="primary-info">
- Guess who you live with and meet with in real life
- </p>
- <div class="secondary-info">
- <ul>
- <li>Facebook users can add their relationship status and information about who their partner is.</li>
- <li>Facebook encourages it's users to use the service to create invitations to parties and other events. When you
- accept an invitation, Facebook can assume that you will be spending time with the other attendees.</li>
- <li>Your Facebook friends can “tag” you in posts when you're at restaurants, events etc. even if you do not share
- this information yourself.</li>
- <li>Since couples are likely to connect to Facebook from the same IP address every, it can be used to predict who's
- dating who.
- </li>
- <li>Similarly, since Facebook tracks each user's location, they can find out when two friends are at the same location.
- </li>
- </ul>
- <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>
- </div>
- </li>
- <li>
- <p class="primary-info">
- Guess your political affiliations
- </p>
- <div class="secondary-info">
- <ul>
- <li>Facebook encourages you to “react” to news stories and friends' updates. This gives them detailed information
- about your opinions on various topics.</li>
- <li>Facebook can estimate where you live, what you're interested in and who you meet with. They can also infer your
- socioeconomic status (how much money you have compared to others). This is often enough to indicate how likely
- you are to vote in a certain way.
- </li>
- </ul>
- <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>
- </div>
- </li>
- <li>
- <p class="primary-info">
- Guess your sexual orientation
- </p>
- <div class="secondary-info">
- <ul>
- <li>You may visit a specific dating website that uses Facebook's tracking script. This lets Facebook know that you
- visited the website.</li>
- <li>You may attend events aimed at people with a specific sexual orientation.</li>
- <li>You may like or comment on content aimed at people with a specific sexual orientation.</li>
- <li>You may interact with people with a specific sexual orientation on Facebook.</li>
- </ul>
- <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>
- </div>
- </li>
- <li>
- <div class="primary-info">
- Guess what times you work and sleep
- </div>
- <div class="secondary-info">
- <ul>
- <li>Facebook logs your interactions with the service and with other sites on the web. They log
- <i>when</i> you do something and
- <i>where</i> you are at that point. Using this data, they can probably guess when you're sleeping (at night, when
- not using Facebook or surfing the web).</li>
- <li>Looking at how your location changes every day, it would be fairly easy to guess when you are at home and at
- work.
- </li>
- </ul>
- <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>
- </div>
- </li>
- <li>
- <div class="primary-info">
- Understand exactly what you're interested in
- </div>
- <div class="secondary-info">
- <ul>
- <li>Facebook tracks what you do and what content you interact with on the service. Whenever you “like” a post, comment
- on a link or share a news story, Facebook learns more about what you are interested in.</li>
- <li>Facebook tracks what you do on many websites outside Facebook. This gives them even more information about your
- interests.
- </li>
- <li>Facebook tracks whenever you click on a Facebook ad and can use this information to further pinpoint your interests.</li>
- </ul>
- <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>
- </div>
- </li>
- <li>
- <div class="primary-info">
- Estimate what your financial situation is like
- </div>
- <div class="secondary-info">
- <p>What you do on Facebook says a lot about who you are, including what your financial situation may be like. In addition
- to the data mentioned on this page, things like where you live and what type of phone you use may help Facebook
- figure out what your financial situation is like.</p>
- <a href="http://www.freshpatents.com/-dt20180201ptan20180032883.php">Facebook patent: “Socioeconomic group classification based on user features”</a>
- </div>
- </li>
- </ul>
- <h2>You should know that</h2>
- <ul>
- <li>
- <div class="primary-info">
- Facebook makes money by giving companies, organizations and foreign powers the ability to show you ads based on what Facebook
- knows about you. These ads may try to change your opinion or make you buy something.
- </div>
- <div class="secondary-info">
- <p>Facebook does not sell your data. Instead they sell “access” to you. Advertisers pay Facebook and in exchange,
- Facebook show the ads to the people who are most likely to be interested in them. Since Facebook knows so much
- about their users, they are good at showing the right ads to the right people.
- <a class="source" href="http://fortune.com/2017/05/05/facebook-digital-advertising-business-model/">Source</a>
- </p>
- <ul>
- <li>
- This “targeted advertising” is good for advertisers, since it lets them show ads to a specific “audience” — people who are
- likely to be interested.
- <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>
- </a>
- </li>
- <li>
- 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
- about how they are being targeted by states, political parties, organizations or companies.
- <a href="https://www.wired.com/2016/11/filter-bubble-destroying-democracy/">“Your Filter Bubble is Destroying Democracy”</a>
- </li>
- <li>
- It's considered a problem for democracies since foreign powers may use targeted ads to create division among different groups.
- These advertising tools have been used to influence the outcomes of elections.
- <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>
- </li>
- </ul>
- </div>
- </p>
- </li>
- <li>
- <p>Facebook uses design tricks to make you give up more personal information than you may have initially intended to.
- <a class="source" href="https://medium.com/@GabeRealMedina/is-facebook-messenger-still-experimenting-with-dark-ux-bcbeac45dcb">Source</a>
- </p>
- </li>
- <li>
- <p>Facebook will run experiments on you to change your feelings or make you use Facebook more.
- <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>
- </p>
- </li>
- </ul>
- <p class="colophon">The text and source code of this web site may be used freely
- <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
- <a href="https://github.com/martenbjork/sign-up-for-facebook">on Github</a>. This website does not track you.</p>
- <div id="signup">
- <div class="progress-bar"></div>
- <a class="button" href="https://www.facebook.com/">Sign up for Facebook</a>
- </div>
- </div>
- <script>
- document.body.className = 'js';
- var listItems = document.querySelectorAll('#wrapper > ul > li');
- var primaryInfo = document.querySelectorAll('.primary-info');
- var progressBar = document.querySelector('.progress-bar');
- var signUpButton = document.querySelector('#signup .button');
- function updateProgress() {
- var acceptedItemsCount = document.querySelectorAll('li button.accepted').length;
- var progress = acceptedItemsCount / listItems.length * 100;
- progressBar.style.width = progress + "%";
- if (progress > 80) {
- signUpButton.className = "button button-active";
- signUpButton.onclick = function (evt) {
- return true;
- };
- } else {
- signUpButton.className = "button";
- signUpButton.onclick = function (evt) {
- evt.preventDefault();
- return false;
- };
- }
- }
- updateProgress();
- // Add “I'm OK with this” buttons
- [].forEach.call(listItems, function (item) {
- var button = document.createElement('button');
- button.className = "accept";
- button.innerHTML = "I'm OK with this";
- button.onclick = function (evt) {
- button.className = button.className === 'accept accepted' ? button.className = 'accept' : button.className = 'accept accepted';
- updateProgress();
- }
- item.appendChild(button);
- });
- // Add “explain” links
- [].forEach.call(primaryInfo, function (item) {
- var link = document.createElement('button');
- link.innerHTML = "Explain";
- link.className = "more-info";
- link.onclick = function () {
- link.parentNode.parentNode.className = "open";
- link.style.display = "none";
- }
- item.appendChild(link);
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement