source: extensions/piwigo_mobile/ios/www/index.html @ 13271

Last change on this file since 13271 was 12411, checked in by patdenice, 12 years ago

Add piwigo mobile for iOS

File size: 10.2 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3  <head>
4    <title>Piwigo</title>
5       
6    <link rel="stylesheet" href="jquery.mobile.min.css">
7    <link rel="stylesheet" href="jquery.mobile.scrollview.css">
8    <link rel="stylesheet" href="app.css">
9
10    <script type="text/javascript" src="js/jquery.min.js"></script>
11    <script type="text/javascript" src="js/jquery.sqrop.js"></script>
12    <script type="text/javascript" src="js/jquery.mobile.min.js"></script>
13    <script type="text/javascript" src="js/jquery.easing.js"></script>
14    <script type="text/javascript" src="js/jquery.mobile.scrollview.js"></script>
15    <script type="text/javascript" src="js/scrollview.js"></script>
16    <script type="text/javascript" src="phonegap.js"></script>
17    <script type="text/javascript" src="js/cameraExtended.js"></script>
18    <script type="text/javascript" src="js/app.js"></script>
19  </head>
20
21  <body>
22
23    <!-- Album page -->
24    <div data-role="page" id="album" data-add-back-btn="true" data-back-btn-text="Album">
25
26      <div data-role="header" data-theme="b">
27        <a href="#config" data-icon="gear" class="ui-btn-left" data-direction="reverse"><l10n>Settings</l10n></a>
28        <h1><l10n>Album</l10n></h1>
29        <a href="#photos" data-icon="arrow-r" data-iconpos="right"><l10n>Photos</l10n></a>
30      </div>
31
32      <div data-role="content">
33
34        <div id="existing_album_field">
35          <label for="existing_album" class="select"><l10n>Album</l10n>:</label>
36          <select name="existing_album" id="existing_album"></select>
37        </div>
38
39        <div>
40          <label for="privacy_level" class="select"><l10n>Who can see these photos</l10n>:</label>
41          <select name="privacy_level" id="privacy_level"></select>
42        </div>
43
44        <div>
45          <label for="action"><l10n>Actions</l10n>:</label>
46          <a href="#" data-role="button" onClick="getCategories();$(this).removeClass('ui-btn-hover-c').addClass('ui-btn-up-c');" data-icon="refresh"><l10n>Refresh albums list</l10n></a>
47          <a href="#new_album" data-role="button" data-icon="star"><l10n>Create a new album</l10n></a>
48          <a href="#photos" onClick="getPhoto();" data-role="button" data-icon="plus"><l10n>Add photo</l10n></a>
49          <a href="#" onClick="prepareUpload();" class="upload_button" data-role="button" data-theme="f" data-icon="arrow-r" style="display:none;"><l10n>Upload</l10n> (<span class="nb_photos"></span>)</a>
50        </div>
51               
52      </div>
53    </div>
54
55
56    <!-- Photo selection page -->
57    <div data-role="page" id="photos">
58
59      <div data-role="header" data-theme="b">
60        <a href="#album" data-icon="arrow-l" data-direction="reverse"><l10n>Album</l10n></a>
61        <h1><l10n>Photos</l10n></h1>
62        <a href="#" onClick="prepareUpload();" class="upload_button" data-theme="f" data-icon="arrow-r" data-iconpos="right" style="display:none;"><l10n>Upload</l10n></a>
63      </div>
64
65      <div data-role="content" id="photos_content">
66        <div id="no_photos_yet" class="pwg_center" style="margin-bottom:50px;">
67          <h4><l10n>No photos selected yet</l10n></h4>
68        </div>
69
70        <ul data-role="listview" id="photos_list" data-split-icon="delete"></ul>
71
72      </div>
73      <div id="prepare_photo" style="display:none;">
74        <ul data-role="listview" id="prepare_photos_list" data-split-icon="delete"></ul>
75      </div>
76     
77      <div data-role="footer" data-theme="c" class="ui-bar">
78        <a href="#" onClick="getPhoto();" id="add_photos_button" data-role="button" data-icon="plus"><l10n>Add photo</l10n></a>
79        <a href="#" onClick="removeAllPhotos();" id="remove_photos_button" data-role="button" data-icon="delete" style="display:none;"><l10n>Remove all</l10n></a>
80      </div>
81    </div>
82       
83
84    <!-- Photo dialog box -->
85    <div data-role="dialog" id="photobox" data-theme="c">
86     
87      <div data-role="header" id="photobox_header" data-theme="b">
88        <h1></h1>
89      </div>
90
91      <div data-role="content" id="photobox_content">
92     
93        <label for="photo_title"><l10n>Name</l10n>:</label>
94        <input type="text" name="photo_title" id="photo_title">
95                   
96        <label for="photo_author"><l10n>Author</l10n>:</label>
97        <input type="text" name="photo_author" id="photo_author">
98                   
99        <label for="photo_desc"><l10n>Description</l10n>:</label>
100        <textarea name="photo_desc" id="photo_desc"></textarea>
101
102        <input type="hidden" name="photo_id" id="photo_id">
103
104        <p class="pwg_buttons">
105          <a href="#photos" data-role="button" data-inline="true"><l10n>Cancel</l10n></a>
106          <a href="#photos" onClick="savePhotoData();" data-role="button" data-inline="true" data-theme="b"><l10n>OK</l10n></a>
107        </p>
108
109      </div>     
110    </div>
111       
112       
113    <!-- Album creation -->
114    <div data-role="dialog" id="new_album" data-theme="c">
115      <div data-role="header" data-theme="b">
116        <h1><l10n>New album</l10n></h1>
117      </div>
118
119      <div data-role="content">
120
121        <label for="parent_album" class="select"><l10n>Parent album</l10n>:</label>
122        <select name="parent_album" id="parent_album"></select>
123                   
124        <label for="album_name"><l10n>Album name</l10n>:</label>
125        <input type="text" name="album_name" id="album_name">
126             
127        <p class="pwg_buttons">
128          <a href="#album" data-role="button" data-inline="true"><l10n>Cancel</l10n></a>
129          <a href="#album" onClick="createNewAlbum();" data-role="button" data-inline="true" data-theme="b"><l10n>Create</l10n></a>
130        </p>
131     
132      </div>
133    </div>
134       
135
136    <!-- Uploading page -->
137    <div data-role="page" id="uploading" data-theme="c">
138      <div data-role="header" data-theme="b">
139        <h1><l10n>Upload</l10n></h1>
140      </div>
141
142      <div data-role="content" class="pwg_center">
143        <p id="uploaded_photo">
144          <img src="">
145        </p>
146        <p>
147          <img src="images/ajax-loader.gif"> &nbsp; <l10n>Uploading photo</l10n>
148          <span id="upload_current">0</span> / <span id="upload_total"></span>
149        </p>
150        <p>
151          <a href="#" data-role="button" onClick="cancelUpload();"><l10n>Cancel</l10n></a>
152        </p>
153
154        <div id="upload_complete">
155          <h3 style="margin-bottom:50px;"><l10n>Upload complete!</l10n></h3>
156          <a href="#album" data-role="button" data-direction="reverse"><l10n>Upload a new selection</l10n></a>
157          <a href="" data-role="button" id="uploaded_photos_url"><l10n>See photos in your gallery</l10n></a>
158        </div>
159       
160      </div>
161    </div>
162
163
164    <!-- Configuration page -->
165    <div data-role="page" id="config">
166               
167      <div data-role="header" data-theme="b">
168        <a href="#about" data-role="button" data-icon="info" data-transition="slideup"><l10n>About</l10n></a>
169        <h1><l10n>Settings</h1>
170        <a href="#" onClick="saveSettings();" data-icon="check" data-iconpos="right" data-theme="f"><l10n>OK</l10n></a>
171
172      </div>
173   
174      <div data-role="content" id="config_content" class="noscroll">
175   
176        <label for="url"><l10n>Gallery URL</l10n>:</label>
177        <input type="url" name="url" id="url" autocorrect="off" autocapitalize="off" value="http://">
178   
179        <label for="username"><l10n>Username</l10n>:</label>
180        <input type="text" name="username" id="username" autocorrect="off" autocapitalize="off">
181                       
182        <label for="password"><l10n>Password</l10n>:</label>
183        <input type="password" name="password" id="password" autocorrect="off" autocapitalize="off">
184                               
185      </div>
186
187      <div data-role="footer" data-theme="b" id="config_footer">
188        <div data-role="navbar">
189          <ul>
190            <li><a href="#config" class="ui-btn-active ui-state-persist" data-transition="none"><l10n>Connection</l10n></a></li>
191            <li><a href="#advanced_config" data-transition="none"><l10n>Advanced</l10n></a></li>
192          </ul>
193        </div>
194      </div>
195   
196    </div>
197
198
199
200    <!-- Advanced Configuration page -->
201    <div data-role="page" id="advanced_config">
202               
203      <div data-role="header" data-theme="b">
204        <a href="#about" data-role="button" data-icon="info" data-direction="reverse"><l10n>About</l10n></a>
205        <h1><l10n>Settings</h1>
206        <a href="#" onClick="saveSettings();" data-icon="check" data-iconpos="right" data-theme="f"><l10n>OK</l10n></a>
207       
208      </div>
209   
210      <div data-role="content" id="advanced_config_content" class="noscroll">
211   
212        <label for="default_author"><l10n>Default author</l10n>:</label>
213        <input type="text" name="default_author" id="default_author"/>
214   
215        <label for="quality" style="margin-top:10px;"><l10n>Photo quality</l10n>:</label>
216        <input type="range" name="quality" id="quality" value="95" min="0" max="100"/>
217
218        <div id="resize_id">
219          <label for="resize" style="margin-top:20px;"><l10n>Resize photos</l10n></label>
220          <input type="checkbox" checked="checked" name="resize" id="resize" data-theme="c"/>
221        </div>
222
223        <div id="resize_options">
224          <div>
225            <label for="max_width"><l10n>Maximum width</l10n>:</label>
226            <input type="range" name="max_width" id="max_width" value="800" min="0" max="2000"/>
227          </div>
228
229          <div>
230            <label for="max_height"><l10n>Maximum height</l10n>:</label>
231            <input type="range" name="max_height" id="max_height" value="600" min="0" max="2000"/>
232          </div>
233        </div>
234
235      </div>
236   
237      <div data-role="footer" data-theme="b">
238        <div data-role="navbar">
239          <ul>
240            <li><a href="#config" data-transition="none"><l10n>Connection</l10n></a></li>
241            <li><a href="#advanced_config" class="ui-btn-active ui-state-persist" data-transition="none"><l10n>Advanced</l10n></a></li>
242          </ul>
243        </div>
244      </div>
245
246    </div>
247
248
249    <!-- About page -->
250    <div data-role="page" id="about" data-theme="c">
251     
252      <div data-role="header" data-theme="b">
253        <h1><l10n>About</l10n></h1>
254      </div>
255
256      <div data-role="content">
257        <p><l10n>about message</l10n></p>
258        <p class="pwg_buttons"><a href="#" data-role="button" data-rel="back">OK</a></p>
259      </div>
260    </div>
261
262
263       
264  </body>
265</html>
Note: See TracBrowser for help on using the repository browser.