-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_paul.html
73 lines (57 loc) · 3.91 KB
/
index_paul.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
<html>
<head>
<title>Surveillance Stories</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
body {margin:1em;padding:0;font-family:'Helvetica Neue'; font-size:120%;line-height:149%;width:100%;}
div#main {text-align:center;}
div#header {height:250px;top:0px;
margin-left:auto;margin-right:auto;
width:100%;
background:aqua;position:fixed;
}
div#narrative {margin-top:300px;width:100%;text-align:left;}
div#stripe {top:260px;position:fixed;background:black;height:30px;width:100%;}
div#cursor {top:260px;position:fixed;left:10%;background:red;height:30px;width:50px;}
div#cursor:hover {background:pink;}
span.annotation {display:none;font-size:10pt;color:#888;width:100%;}
span.identity {background:#ffc;}
span.identity:hover {background:#eeb;}
span.ethics {background:#fcc;}
span.ethics:hover {background:#ebb;}
</style>
<script>
$(document).ready(
function(){
$(".statement").click(function(e){ // filter , click listeners .. go get everything that is class .statement (which is really filter) when it is clicked, call function (e) which is event == which can have mouse position ,et c
var offset = $(this).attr('offset'); // when clicked on it loads offset which has % value
var kid = $(this).children('span.annotation');
kid.css({display: 'block'});
$("div#header").html(kid);
var offset = $(this).attr('offset');
$("div#cursor").css({left: offset}); // this is the offset that moves the cursor along the timeline
});
});
</script>
</head>
<body>
<div id="main">
<div id="header">
<div id="left-column"></div>
<div id="right-column"></div>
</div>
<div id="stripe">
<div id="cursor"></div>
</div>
<div id="narrative">
<p>I saw what was happening, <span class="statement identity" offset="30%">but I didn’t know how to feel. Richard was breaking the law and risking his job for this girl.
<span class="annotation"><span class="anno-left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
<span class="anno-right"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></span>
</span> He used his authority to access private information, to learn about John, to justify fears, and to contact me at my home, the only private places I had left. I wa there in the strings, just waiting to be pulled: Victim, Nicole Jones, Single, White, Female, Born 1983, Living, Austin, Texas.</p>
<p>I put Richard’s <span class="statement ethics" offset="50%">business card in my pocket and thought about national security</span>. Was it okay for him to be here, as a government employee, asking me for a favor? Was I even surprised? Would he threaten to kill me if I talked about it, the way John had?</p>
<p>I didn’t know what to do or what the right thing was. This was all happening in the gray areas between victim, criminal, government, and network. A man with a lot of power and responsibility was at my door, pleading for help. He seemed genuinely kind and concerned. He asked me to tell a story that I alone could tell. I never really had that chance before. I was too young to testify during the trial. The authorities were afraid it would be too painful for me, and I’m sure they were right.</p>
</div>
</div>
</body>
</html>