-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (106 loc) · 5.61 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
110
111
112
113
114
115
116
117
118
119
<html>
<head>
<title>Ian A Wilson - Social Digital Portrait</title>
<link rel="stylesheet" href="index.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>
<script type='text/javascript' src='./js/jquery.color.js'></script>
<script type='text/javascript' src='./js/pixastic.custom.js'></script>
<script type='text/javascript' src="http://connect.facebook.net/en_US/all.js"></script>
<script type='text/javascript' src="./js/jquery.getimagedata.min.js"></script>
<script type='text/javascript' src='./js/mosaic.js'></script>
<script type='text/javascript' src='./js/facebook.js'></script>
<script type='text/javascript' src='./js/interactive.js'></script>
</head>
<body>
<div id="fb-root"></div>
<div id="app">
<!-- center -->
<div id="content">
<img id="profile-loading" src="wait30trans.gif" />
<div id="original"></div>
<div id="mosaic"></div>
</div>
<!-- left -->
<div id="left-backdrop" class="backdrop"></div>
<div id="instructions">
<h2>start here</h2>
<!-- <div class="large-note aboveOverlay">Click any of the following to highlight the relevant control.</div> -->
<h3>we load your info</h3>
<div class="instruct instruct-stats">Make sure your photos and friends are completely loaded.
<div class='note'>It's likely that not all of your friends will load
because some have probably disabled access to their information in third-party apps.</div>
</div>
<h3>load photos of your friends</h3>
<div id="friends">To load more photos, search for
a friend. Clicking on them will load photos of that person.
<input id="friend-filter" type="text" title="type to search for friends" class="hidden" />
<div id="friend-instructions" class="hidden note">
Choose a friend to load their photos. Friends who do not allow their photos to be used by external applications will not appear.
</div>
<div class="loading-div"><img id="friend-loading" src="wait30.gif" /></div>
<ul id="friend-list"></ul>
</div>
<h3 class="">build your mosaic</h3>
<div class="">Once you have 300 - 1000 photos, build your mosaic.
<div>
<button id="load-mosaic" type="button" class="hidden" onclick="javascript:newIdealMosaic();">build ideal mosaic</button>
<div class="loading-div">
<img id="photos-loading" src="wait30.gif" />
<span id="mosaic-loading" class="hidden">... building mosaic ...<br />[please be patient]</span>
</div>
</div>
</div>
<h3>explore your mosaic</h3>
<div class="">Hide the transparent original of your profile picture and mouse over the mosaic to see your images close up.
<div class="control">
<button id="toggle-original" type="button" onclick="javascript:showHideOriginal();">show/hide original</button>
</div>
</div>
<h3>get more photos</h3>
<div class="instruct instruct-friends instruct-mosaic">
Want more detail? Load more friends and rebuild your mosaic.
</div>
<h3>information and logout</h3>
<div id="welcome-button" class="control">
<button type="button" onclick="javascript:fadeToWelcome();">return to welcome screen</button>
</div>
</div>
<!-- right -->
<div id="right-backdrop" class="backdrop"></div>
<div id="stats">
<div><span id="stats-photos">0</span> total photo(s) loaded</div>
<div><span id="stats-photos-me">0</span> photo(s) of me loaded</div>
<div id="stats-friends">0 friend(s) loaded</div>
</div>
<div id="log"></div>
</div>
<div id="welcome">
<div id="info">
<h1>social digital portrait</h1>
<p>Your profile picture is the essence of your online existence. How well does this represent the rest of the images of your digital self?</p> <p>How well does any of that represent you?</p>
</div>
<div id="login">
<hr />
<p>To use this application please</p>
<a id="login-button" class="fb_button fb_button_medium">
<span class="fb_button_text">Login with Facebook</span>
</a>
</div>
<div id="logout">
<hr />
<p id="greeting">Logged in as </p>
<a id="logout-button" class="fb_button fb_button_medium">
<span class="fb_button_text">Logout</span>
</a>
</div>
<div id="continue">
<hr />
<p><button type="button" onclick="javascript:fadeToApp();">continue to application</button></p>
</div>
<div id="footer">Best viewed in <a href="https://www.google.com/chrome">Chrome</a>. Design and implementation by <a href="http://ianawilson.com">Ian A Wilson</a>.</div>
</div>
<div id="overlay" class="hidden"></div>
</body>
</html>