-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
109 lines (97 loc) · 4.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<title>Load Your Facebook Data Here</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="static/style.css" type="text/css"/>
</head>
<body>
<div class="container-fluid d-flex flex-column justify-content-between">
<div class="row d-flex justify-content-start">
<header class="col-12 d-flex justify-content-start">
<h2 class="app-title"><b>Facebook Audit</b></h2>
</header>
</div>
<div class="row justify-content-center">
<div class="col-12 col-sm-10">
<main id="main">
<div class="row d-flex justify-content-center">
<div class="col-10 col-sm-8">
<h1>Inspect your Facebook Data</h1>
<ol>
<li><a href="https://www.facebook.com/dyi/" target="_blank">Start here</a>, then click
<b>Download Your Information.</b></li>
<li>Under <i>New File</i>, set Format to JSON and Media Quality to Low.</li>
<li>Once Facebook generates the zip file, download it and then open it below.</li>
</ol>
<form>
<div class="custom-file">
<input type="file" id="file-picker" class="custom-file-input" accept=".zip, application/zip"/>
<label class="custom-file-label" for="file-picker">Open your file here: </label>
</div>
</form>
<p>
We respect your privacy by writing the app to run 100% client-side — feel free to turn off your internet
before uploading. <strong>Your file never leaves the browser, so we'll never see your data.</strong>
</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-10 col-sm-8">
<h1>Why?</h1>
<p>
It's no secret that Facebook has massive amounts of data on nearly everyone in the world. It's also not a
surprise to hear that recently Facebook
<a href="https://www.nytimes.com/2018/09/28/technology/facebook-hack-data-breach.html" target="_blank">
hasn't exactly done</a>
<a href="https://www.nytimes.com/interactive/2018/05/14/technology/facebook-ads-congress.html"
target="_blank">a good job</a>
<a href="https://www.nytimes.com/2018/03/17/us/politics/cambridge-analytica-trump-campaign.html"
target="_blank">managing that data.</a>
Yet most users have never actually seen <em>their</em> account's data. This tool aims to
inform social media users of the data exposure they've incurred over their lifetime on the platform, and
to start a conversation about the downsides of a strong online presence.
</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-10 col-sm-8">
<h1>About</h1>
<p>
Facebook Audit was designed by Daniel Rassaby, Michael Wheeler, Samuel Xifaras, and Julian Zucker. It was
created and submitted as an entry for <a href="http://hackbeanpot.com/" target="_blank">HackBeanpot 2019
</a>, where it won the "Hack to Give Back" award. Its creators care deeply about privacy online and hope
to add new features in the near future.
</p>
</div>
</div>
</main>
</div>
</div>
<div class="row">
<footer class="col-12">
<a href="https://github.com/mikewheel/facebook-audit" target="_blank">Github</a>
</footer>
</div>
</div>
<!-- Library imports -->
<script src="lib/d3.v5.min.js"></script>
<script src="lib/inflate.js"></script>
<script src="lib/deflate.js"></script>
<script src="lib/zip.js"></script>
<script src="lib/z-worker.js"></script>
<!-- App-specific imports -->
<script src="upload/load_facebook_data.js" type="text/javascript"></script>
<script src="etl/etl_from_fb_json.js" type="text/javascript"></script>
<script src="state_changes/state_changes.js" type="text/javascript"></script>
<script src="vis/visualization.js" type="text/javascript"></script>
<script src="vis/lineCharts.js" type="text/javascript"></script>
<script src="vis/ordinalBarChart.js" type="text/javascript"></script>
<script src="vis/statistics.js" type="text/javascript"></script>
<script src="vis/utilities.js" type="text/javascript"></script>
<script src="controller.js"></script>
</body>
</html>