forked from apigee/usergrid-sample-html5-messagee
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
161 lines (149 loc) · 7.46 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
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
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<style type="text/css">.error{ background-color: #ffaaaa; } </style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="js/usergrid.js" type="text/javascript"></script>
<script src="js/extensions/usergrid.validation.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="page-login">
<div data-role="header" data-theme="b">
<h1>Messagee</h1>
</div>
<div data-role="content">
<h3>Messagee is a sample messaging app, like Twitter</h3>
<p>
<h4>Log in using your Messagee account.</h4>
Don't have an account? use our test account (username: myuser / password: mypass), or create a new one!
</p>
<span id="login-section-error"></span>
<form name="form-login" id="form-login">
<label for="username">Username For YOur User</label>
<input type="text" name="username" id="username" class="span4" />
<label for="password">Password</label>
<input type="password" name="password" id="password" class="span4" />
</form>
<div style="width: 50%; float: left">
<a href="#login" id="btn-login" data-role="button">Login</a>
</div>
<div style="width: 50%; float: right">
<a href="#page-new-account" id="btn-show-create-new-account" data-role="button" data-rel="dialog" data-transition="pop">New Account</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>© Apigee</h1>
</div>
</div>
<div data-role="page" data-theme="b" id="page-new-account">
<div data-role="header" data-theme="b">
<h1>Messagee</h1>
</div>
<div data-role="content">
<p>Account Info</p>
<form name="form-create-new-account" id="form-create-new-account">
<label for="new-name">Name</label>
<input type="text" name="new-name" id="new-name" class="span4" />
<label for="new-email">Email</label>
<input type="text" name="new-email" id="new-email" class="span4" />
<label for="new-username">Username</label>
<input type="text" name="new-username" id="new-username" class="span4" />
<label for="new-password">Password</label>
<input type="password" name="new-password" id="new-password" class="span4" />
</form>
<div style="width: 50%; float: left">
<button id="btn-create-new-account">Go!</button>
</div>
<div style="width: 50%; float: right">
<a href="#login" id="btn-close-update-account-page" data-role="button">Close</a>
</div>
</div>
</div>
<div data-role="page" data-theme="b" id="page-update-account">
<div data-role="header" data-theme="b">
<h1>Messagee</h1>
</div>
<div data-role="content">
<div id="user-message-update-account"></div>
<p>Account Info</p>
<form name="form-update-new-account" id="form-update-new-account">
<label for="update-name">Name</label>
<input type="text" name="update-name" id="update-name" class="span4" />
<label for="update-email">Email</label>
<input type="text" name="update-email" id="update-email" class="span4" />
<label for="update-username">Username</label>
<input type="text" name="update-username" id="update-username" class="span4" />
<label for="update-oldpassword">Current Password</label>
<input type="password" name="update-oldpassword" id="update-oldpassword" class="span4" />
<label for="update-newpassword">New Password</label>
<input type="password" name="update-newpassword" id="update-newpassword" class="span4" />
</form>
<div style="width: 50%; float: left">
<button id="btn-update-account">Update</button>
</div>
<div style="width: 50%; float: right">
<a href="#page-messages-list" id="btn-close" data-role="button">Close</a>
</div>
</div>
</div>
<div data-role="page" data-theme="b" id="page-messages-list">
<div data-role="header" data-theme="b">
<h1>Messagee</h1>
<a href="#login" id="btn-logout" data-role="button">Logout</a>
<a href="#page-update-account" id="btn-show-page-update-account" data-role="button" data-icon="gear" data-rel="dialog" data-transition="fade">Settings</a>
</div>
<a href="#page-new-message" id="btn-show-create-message" data-role="button" data-rel="dialog" data-transition="fade">Compose Message</a>
<div style="width: 50%; float: left">
<a href="#" data-role="button" data-icon="home" id="btn-show-my-feed">My Stream</a>
</div>
<div style="width: 50%; float: right">
<a href="#" data-role="button" data-icon="grid" id="btn-show-full-feed" class="ui-btn-up-c">All Posts</a>
</div>
<div id="messages-list" data-role="content">
No messages yet!
</div>
<div id="feed-btn-container" data-role="content">
<div style="width: 50%; float: left" id="previous-btn-container">
<button id="btn-previous" data-role="button" data-icon="arrow-l">Previous</button>
</div>
<div style="width: 50%; float: right" id="next-btn-container">
<button id="btn-next" data-role="button" data-icon="arrow-r" data-iconpos="right">Next</button>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>© Apigee</h1>
</div>
</div>
<div data-role="page" data-theme="b" id="page-new-message">
<div data-role="header" data-theme="b">
<h1>Create a new message</h1>
</div>
<div data-role="content">
<form name="login" id="login-form">
<label for="content">Message (150 Chars max)</label>
<textarea id="content" class="input-xlarge" rows="3" style="margin: 0px; width: 100%; height: 125px; "></textarea>
</form>
<div style="width: 50%; float: left">
<button id="post-message">Post</button>
</div>
<div style="width: 50%; float: right">
<a href="#page-messages-list" id="btn-close-new-message" data-role="button">Cancel</a>
</div>
</div>
</div>
<div data-role="page" data-theme="b" id="page-now-following">
<div data-role="header" data-theme="b">
<h1>Congratulations!</h1>
</div>
<div data-role="content">
<div id="now-following-text" style="height: 75px;"></div>
<a href="#" data-rel="back" data-role="button" data-icon="delete">OK</a>
</div>
</div>
</body>
</html>