forked from apelliccia/front-end
-
Notifications
You must be signed in to change notification settings - Fork 0
/
settings.html
189 lines (183 loc) · 7.08 KB
/
settings.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!doctype html>
<html lang="en" data-framework="javascript">
<head>
<meta charset="utf-8">
<title>Front End Demo</title>
<link href="resources/stylesheets/main.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="resources/stylesheets/settings.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="resources/stylesheets/tablet.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 1024px)" >
<link href="resources/stylesheets/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px)" >
</head>
<body>
<header class="header">
<div class="max-width">
<div class="left-floater left-fifteen">
<a href="index.html"><img src="resources/images/misc/logo.png" /></a>
</div>
<div class="right-floater">
<input type="button" class="new-message-btn" />
<div class="search-box desktop tablet">
<input type="textfield" class="search-input" /> <input type="button" class="search-btn" />
</div>
<div class="header-user right-fifteen">
<img id="header-user-img" src="resources/images/misc/header-user.png" />
<div class="down-arrow"></div>
<div class="drop-down desktop">
<div class="up-arrow"></div>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Followers</a></li>
<li><a href="#">Following</a></li>
<li><a href="settings.html">Settings</a></li>
</div>
</div>
</div>
</div>
<div class="drop-down-mobile tablet phone">
<ul>
<li id="serach-row">
<div class="search-box">
<input type="textfield" class="search-input" /> <input type="button" class="search-btn" />
</div>
</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Followers</a></li>
<li><a href="#">Following</a></li>
<li><a href="settings.html">Settings</a></li>
</div>
</header>
<div class="maincontent">
<div class="five-seventy-five center-floater left-right-fifteen">
<h1>Settings</h1>
<div class="fullWidth">
<div class="account-title">ACCOUNT</div>
<div >
<div class="account-left">
<img src="resources/images/misc/large-user.png" />
<input type="button" class="white-btn" value="change" />
</div>
<div class="account-right">
<div class="gray-input">
<input type="textfield" class="name-input white-input" value="Barrett Breshears" />
</div>
<div class="gray-input">
<input type="textfield" class="email-input white-input" value="barrettbreshears@gmail.com" />
</div>
<div class="gray-input">
<input type="password" class="password-input white-input" value="hello" /> <input type="button" class="white-btn-no-border" value="change" />
</div>
</div>
</div>
</div>
<hr/>
<div class="fullWidth">
<div class="account-title">NOTIFICATIONS</div>
<div class="row">
<label class="switch switch-green">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" ></span>
<span class="switch-handle"></span>
</label>
<span class="notifaction-switch-label">email me when my posts are marked as favorites</span>
</div>
<div class="row">
<label class="switch switch-green">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" ></span>
<span class="switch-handle"></span>
</label>
<span class="notifaction-switch-label">email me when I'm mentioned</span>
</div>
<div class="row">
<label class="switch switch-green">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label" ></span>
<span class="switch-handle"></span>
</label>
<span class="notifaction-switch-label">email me when I get a reply</span>
</div>
<div class="row">
<label class="switch switch-green">
<input type="checkbox" class="switch-input" checked>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
<span class="notifaction-switch-label">email me when someone follows me</span>
</div>
</div>
<hr/>
<div class="fullWidth radios">
<div class="account-title">PRIVACY</div>
<div class="row">
<input id="radio1" class="css-checkbox" type="checkbox" checked></input>
<label class="css-label" for="radio1"> allow anyonw to tag me</label>
</div>
<div class="row">
<input id="radio2" class="css-checkbox" type="checkbox" ></input>
<label class="css-label" for="radio2"> only Allow people I follow to tag me</label>
</div>
<div class="row">
<input id="radio3" class="css-checkbox" type="checkbox" ></input>
<label class="css-label" for="radio3"> don't allow anyone to tag me</label>
</div>
<div class="row">
<input id="radio4" class="css-checkbox" type="checkbox" checked></input>
<label class="css-label" for="radio4"> add a loction to my posts</label>
</div>
<div class="row">
<input id="radio5" class="css-checkbox" type="checkbox" checked></input>
<label class="css-label" for="radio5"> let others find me by my email address</label>
</div>
<div class="row">
<input id="radio6" class="css-checkbox" type="checkbox" checked></input>
<label class="css-label" for="radio6"> tailor ads based on my information</label>
</div>
</div>
<hr/>
<input type="button" class="green-btn left-floater" value="Save Changes" />
</div>
</div>
<footer id="footer">
<div class="center-floater five-seventy-five">
<ul>
<li>
<a href="#">ABOUT US</a>
</li>
<li>
<a href="#">SUPPORT</a>
</li>
<li>
<a href="#">PRIVACY</a>
</li>
<li>
<a href="#">TERMS</a>
</li>
<li>
© 2014 SIMPLYSOCIAL
</li>
</ul>
</div>
</footer>
<div class="overlay">
<div class="five-seventy-five center-floater left-right-fifteen">
<div class="message-box">
<div class="hideBtn">X</div>
<div class="title">
Create a new message
</div>
<textarea class="new-message-textarea"></textarea>
<input type="button" class="add-photo" value="Add Photo" /> <input type="button" class="add-video" value="Add Video" /> <input type="button" class="green-btn" value="Post" />
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="resources/js/3rdParty/jquery.screwDefaultButtonsV2.min.js"></script>
<script type="text/javascript" src="resources/js/3rdParty/jquery.wookmark.js"></script>
<script src="resources/js/models/Posts.js"></script>
<script src="resources/js/templates/GridBox.js"></script>
<script src="resources/js/templates/ListBox.js"></script>
<script src="resources/js/Controllers/Index.js"></script>
</body>
</html>