source: trunk/web/index.html @ 9460

Last change on this file since 9460 was 9460, checked in by kjg, 13 years ago

(trunk web) show pieces info in the inspector

  • Property svn:executable set to *
File size: 15.1 KB
Line 
1<!DOCTYPE html>
2<html>
3        <head>
4                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5                <meta http-equiv="cache-control" content="Private" />
6                <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
7                <meta name="apple-mobile-web-app-capable" content="yes" />
8                <link href="./images/favicon.ico" rel="icon" />
9                <link href="./images/favicon.png" rel="shortcut icon" />
10                <link rel="apple-touch-icon" href="./images/webclip-icon.png"/>
11                <script type="text/javascript" src="./javascript/jquery/jquery.min.js"></script>
12                <link media="only screen and (max-device-width: 480px)" href="./stylesheets/iphone.css" type= "text/css" rel="stylesheet" />
13                <link media="screen and (min-device-width: 481px)" href="./stylesheets/common.css" type="text/css" rel="stylesheet" />
14                <!--[if IE]>
15                  <link media="screen" href="./stylesheets/common.css" type="text/css" rel="stylesheet" />
16                  <link media="screen" href="./stylesheets/ieAll.css" type="text/css" rel="stylesheet" />
17                <![endif]-->
18                <!--[if IE 6]><link media="screen" href="./stylesheets/ie6.css" type="text/css" rel="stylesheet" /><![endif]-->
19                <!--[if IE 7]><link media="screen" href="./stylesheets/ie7.css" type="text/css" rel="stylesheet" /><![endif]-->
20                <script type="text/javascript" src="./javascript/jquery/jquery.transmenu.min.js"></script>
21                <script type="text/javascript" src="./javascript/jquery/jquery.contextmenu.min.js"></script>
22                <script type="text/javascript" src="./javascript/menu.js"></script>
23                <script type="text/javascript" src="./javascript/jquery/jquery.form.min.js"></script>
24                <script type="text/javascript" src="./javascript/jquery/json.min.js"></script>
25                <script type="text/javascript" src="./javascript/common.js"></script>
26                <script type="text/javascript" src="./javascript/transmission.remote.js"></script>
27                <script type="text/javascript" src="./javascript/transmission.js"></script>
28                <script type="text/javascript" src="./javascript/torrent.js"></script>
29                <script type="text/javascript" src="./javascript/dialog.js"></script>
30                <title>Transmission Web Interface</title>
31        </head>
32        <body id="transmission_body">
33
34                <div class="torrent_global_menu">
35                         <ul>   
36                                 <li id="open"><div id="open_link"><div class="toolbar_image"></div>Open</div></li>
37                                 <li id="remove" class="disabled"><div id="remove_link"><div class="toolbar_image"></div>Remove</div></li>
38                                 <li class="divider">&nbsp;</li>
39                                 <li id="pause_selected" class="disabled"><div id="pause_selected_link"><div class="toolbar_image"></div>Pause</div></li>
40                                 <li id="resume_selected" class="disabled"><div id="resume_selected_link"><div class="toolbar_image"></div>Resume</div></li>
41                                 <li class="divider">&nbsp;</li>
42                                 <li id="pause_all" class="disabled"><div id="pause_all_link"><div class="toolbar_image"></div>Pause All</div></li>
43                                 <li id="resume_all" class="disabled"><div id="resume_all_link"><div class="toolbar_image"></div>Resume All</div></li>
44                                 <li id="inspector"><div id="inspector_link"><div class="toolbar_image"></div>Inspector</div></li>
45                                 <li id="filter"><div id="filter_toggle_link"><div class="toolbar_image"></div>Filter</div></li>
46                         </ul>
47                </div>
48               
49                <div class="torrent_global_details">
50                        <div id="torrent_global_transfer">0 Transfers</div>
51                        <div id="torrent_global_upload">0 B/s</div>
52                        <div id="torrent_global_download">0 B/s</div>
53                </div>
54               
55                <div id="torrent_filter_bar">
56                        <ul>   
57                                 <li><a href="#all" id="filter_all_link" class="active">All</a></li>
58                                 <li><a href="#downloading" id="filter_downloading_link">Downloading</a></li>
59                                 <li><a href="#seeding" id="filter_seeding_link">Seeding</a></li>
60                                 <li><a href="#paused" id="filter_paused_link">Paused</a></li>
61                        </ul>
62                        <input type="search" id="torrent_search" placeholder="Filter" results="0" />
63                </div>
64                <div id="torrent_inspector" style="display:none;">
65                       
66                <div style="display:none;" class="inspector_close" id="inspector_close"><img id="inspector_close_image" src="./images/buttons/cancel.png"/></div>
67
68                        <div id="inspector_tabs">
69                                <div class="inspector_tab selected" id="inspector_tab_info"><a href="#info"><img src="images/buttons/info_general.png" alt="Information"/></a></div>
70                                <div class="inspector_tab" id="inspector_tab_activity"><a href="#activity"><img src="images/buttons/info_activity.png" alt="Activity"/></a></div>
71                                <div class="inspector_tab" id="inspector_tab_files"><a href="#files"><img src="images/buttons/info_files.png" alt="Files"/></a></div>
72                        </div>
73                       
74                        <div id="inspector_header">
75                                <h1 id="torrent_inspector_name"></h1>
76                                <span id="torrent_inspector_size"></span>
77                        </div>
78                       
79                        <div class="inspector_container" id="inspector_tab_info_container">
80                                <div class="inspector_group">
81                                        <div class="inspector_group_label">Information</div>
82                                        <div class="inspector_row">
83                                                <div class="inspector_label">Pieces:</div>
84                                                <div id="torrent_inspector_pieces"></div>
85                                        </div>
86                                        <div class="inspector_row">
87                                                <div class="inspector_label">Hash:</div>
88                                                <div id="torrent_inspector_hash"></div>
89                                        </div>
90                                        <div class="inspector_row">
91                                                <div class="inspector_label">Secure:</div>
92                                                <div id="torrent_inspector_secure"></div>
93                                        </div>
94                                        <div class="inspector_row">
95                                                <div class="inspector_label">Comment:</div>
96                                                <div id="torrent_inspector_comment"></div>
97                                        </div>
98                                </div><!-- class="inspector_group"-->
99                               
100                                <div class="inspector_group">
101                                        <div class="inspector_group_label">Created By</div>
102                                        <div class="inspector_row">
103                                                <div class="inspector_label">Creator:</div>
104                                                <div id="torrent_inspector_creator">N/A</div>
105                                        </div>
106                                        <div class="inspector_row">
107                                                <div class="inspector_label">Date:</div>
108                                                <div id="torrent_inspector_creator_date">N/A</div>
109                                        </div>
110                                </div><!-- class="inspector_group"-->
111
112                                <div class="inspector_group">
113                                        <div class="inspector_group_label">Where</div>
114                                        <div class="inspector_row">
115                                                <div class="inspector_label">Download Dir:</div>
116                                                <div id="torrent_inspector_download_dir">N/A</div>
117                                        </div>
118                                </div><!-- class="inspector_group"-->
119                        </div><!-- id="inspector_tab_info_container" -->
120                       
121                        <div style="display:none;" class="inspector_container" id="inspector_tab_activity_container">
122
123                                <div class="inspector_group">
124                                        <div class="inspector_group_label">Activity</div>
125                                        <div class="inspector_row">
126                                                <div class="inspector_label">State:</div>
127                                                <div id="torrent_inspector_state">N/A</div>
128                                        </div>
129                                        <div class="inspector_row">
130                                                <div class="inspector_label">Progress:</div>
131                                                <div id="torrent_inspector_progress">N/A</div>
132                                        </div>
133                                        <div class="inspector_row">
134                                                <div class="inspector_label">Have:</div>
135                                                <div id="torrent_inspector_have">N/A</div>
136                                        </div>
137                                        <div class="inspector_row">
138                                                <div class="inspector_label">Downloaded:</div>
139                                                <div id="torrent_inspector_downloaded">N/A</div>
140                                        </div>
141                                        <div class="inspector_row">
142                                                <div class="inspector_label">Uploaded:</div>
143                                                <div id="torrent_inspector_uploaded">N/A</div>
144                                        </div>
145                                        <div class="inspector_row">
146                                                <div class="inspector_label">Ratio:</div>
147                                                <div id="torrent_inspector_ratio">N/A</div>
148                                        </div>
149                                        <div class="inspector_row">
150                                                <div class="inspector_label">Swarm Rate:</div>
151                                                <div id="torrent_inspector_swarm_speed">N/A</div>
152                                        </div>
153                                        <div class="inspector_row">
154                                                <div class="inspector_label">Error:</div>
155                                                <div id="torrent_inspector_error">N/A</div>
156                                        </div>
157                                        <div class="inspector_row">
158                                                <div class="inspector_label">DL Speed:</div>
159                                                <div id="torrent_inspector_download_speed">N/A</div>
160                                        </div>
161                                        <div class="inspector_row">
162                                                <div class="inspector_label">UL Speed:</div>
163                                                <div id="torrent_inspector_upload_speed">N/A</div>
164                                        </div>
165                                </div><!-- class="inspector_group"-->
166                               
167                                <div class="inspector_group">
168                                        <div class="inspector_group_label">Peers</div>
169                                        <div class="inspector_row">
170                                                <div class="inspector_label">UL To:</div>
171                                                <div id="torrent_inspector_upload_to">N/A</div>
172                                        </div>
173                                        <div class="inspector_row">
174                                                <div class="inspector_label">DL From:</div>
175                                                <div id="torrent_inspector_download_from">N/A</div>
176                                        </div>
177                                </div><!-- class="inspector_group"-->
178                        </div><!-- id="inspector_tab_activity_container" -->
179
180                        <div style="display:none;" class="inspector_container" id="inspector_tab_files_container">
181                                <div id="inspector_file_list"></div>
182                        </div><!-- id="inspector_tab_files_container" -->
183
184                </div>
185               
186                <div id="torrent_container">
187                        <ul class="torrent_list" id="torrent_list"><li style="display: none;"></li></ul>
188                </div>
189               
190               
191               
192                <div class="dialog_container" id="dialog_container" style="display:none;">
193                        <div class="dialog_top_bar"></div>
194                        <div class="dialog_window">
195                                <img src="images/graphics/logo.png" alt="Transmission Logo" />
196                                <h2 class="dialog_heading" id="dialog_heading"></h2>
197                                <div class="dialog_message" id="dialog_message"></div>
198                                <a href="#confirm" id="dialog_confirm_button">Confirm</a>
199                                <a href="#cancel" id="dialog_cancel_button">Cancel</a>                 
200                </div>
201                </div>
202               
203                <div class="dialog_container" id="prefs_container" style="display:none;">
204                        <div class="dialog_top_bar"></div>
205                        <div class="dialog_window">
206                                <h2 class="dialog_heading">Preferences</h2>
207                                <div id="pref_error"></div>
208                                <form action="" id="prefs_form">
209                                        <div class="preference download_location">
210                                                <label class="category">Add transfers:</label>
211                                                <div class="formdiv">
212                                                        <label for="download_location" class="item">Download to:</label>
213                                                        <input type="text" name="download_location" id="download_location"/>
214                                                </div>
215                                                <div class="formdiv checkbox auto_start">
216                                                        <input type="checkbox" name="auto_start" id="auto_start"/>
217                                                        <label for="auto_start" class="item">Start transfers when added</label>
218                                                </div>
219                                        </div>
220                                        <div class="preference port">
221                                                <label class="category">Network:</label>
222                                                <div class="formdiv">
223                                                        <label for="port" class="item">Incoming TCP Port:</label>
224                                                        <input type="text" id="port" name="port"/>
225                                                </div>
226                                        </div>
227                                        <div class="preference encryption">
228                                                <label class="category">Encryption:</label>
229                                                <div class="formdiv checkbox">
230                                                        <input type="checkbox" name="encryption" id="encryption"/>
231                                                        <label for="encryption" class="item">Ignore unencrypted peers</label>
232                                                </div>
233                                        </div>
234                                        <div class="preference limit_total">
235                                                <label class="category">Limit total bandwidth:</label>
236                                                <div class="formdiv checkbox">
237                                                        <input type="checkbox" name="limit_download" id="limit_download"/>
238                                                        <label for="limit_download" class="item">Download Rate:</label>
239                                                        <input type="text" name="download_rate" id="download_rate"/>
240                                                        <label class="suffix">KB/s</label>
241                                                </div>
242                                                <div class="formdiv checkbox">
243                                                        <input type="checkbox" name="limit_upload" id="limit_upload"/>
244                                                        <label for="limit_upload" class="item">Upload Rate:</label>
245                                                        <input type="text" name="upload_rate" id="upload_rate"/>
246                                                        <label class="suffix">KB/s</label>
247                                                </div>
248                                        </div>
249                                        <div class="preference web_gui">
250                                                <label class="category">Web Client:</label>
251                                                <div class="formdiv">
252                                                        <label for="refresh_rate" class="item">Refresh Rate:</label>
253                                                        <input type="text" name="refresh_rate" id="refresh_rate"/>
254                                                        <label class="suffix">seconds</label>
255                                                </div>
256                                        </div>
257                                        <a href="#save" id="prefs_save_button">Save</a>
258                                        <a href="#cancel" id="prefs_cancel_button">Cancel</a>
259                                </form>
260                        </div>
261                </div>
262               
263                <div class="dialog_container" id="upload_container" style="display:none;">
264                        <div class="dialog_top_bar"></div>
265                        <div class="dialog_window">
266                                <img src="images/graphics/logo.png" alt="Transmission Logo" />
267                                <h2 class="dialog_heading">Upload Torrent Files</h2>
268                                <form action="#" method="post" id="torrent_upload_form" 
269                                        enctype="multipart/form-data" target="torrent_upload_frame"> 
270                                        <div class="dialog_message">
271                                                <label for="torrent_upload_file">Please select a torrent file to upload:</label>
272                                                        <input type="file" name="torrent_files[]" id="torrent_upload_file" multiple="multiple" />
273                                                <label for="torrent_upload_url">Or enter a URL:</label>
274                                                        <input type="text" id="torrent_upload_url"/>
275                                        </div>
276                                        <a href="#upload" id="upload_confirm_button">Upload</a>
277                                        <a href="#cancel" id="upload_cancel_button">Cancel</a>
278                                </form>
279                        </div>
280                </div>
281                <div class="torrent_footer">   
282                        <div id="disk_space_container"></div>   
283                        <ul id="settings_menu">
284                                <li id="button">&nbsp;
285                                        <ul id="footer_super_menu">
286                                                <li id="preferences">Preferences</li>
287                                                <li class="separator"></li>
288                                                <li>Total Download Rate
289                                                        <ul id="footer_download_rate_menu">
290                                                                <li id="unlimited_download_rate">Unlimited</li>
291                                                                <li id="limited_download_rate">Limit (10 KB/s)</li>
292                                                                <li class="separator"></li>
293                                                                <li>5 KB/s</li>
294                                                                <li>10 KB/s</li>
295                                                                <li>20 KB/s</li>
296                                                                <li>30 KB/s</li>
297                                                                <li>40 KB/s</li>
298                                                                <li>50 KB/s</li>
299                                                                <li>75 KB/s</li>
300                                                                <li>100 KB/s</li>
301                                                                <li>150 KB/s</li>
302                                                                <li>200 KB/s</li>
303                                                                <li>250 KB/s</li>
304                                                                <li>500 KB/s</li>
305                                                                <li>750 KB/s</li>
306                                                        </ul>
307                                                </li>
308                                                <li>Total Upload Rate
309                                                        <ul id="footer_upload_rate_menu">
310                                                                <li id="unlimited_upload_rate">Unlimited</li>
311                                                                <li id="limited_upload_rate">Limit (10 KB/s)</li>
312                                                                <li class="separator"></li>
313                                                                <li>5 KB/s</li>
314                                                                <li>10 KB/s</li>
315                                                                <li>20 KB/s</li>
316                                                                <li>30 KB/s</li>
317                                                                <li>40 KB/s</li>
318                                                                <li>50 KB/s</li>
319                                                                <li>75 KB/s</li>
320                                                                <li>100 KB/s</li>
321                                                                <li>150 KB/s</li>
322                                                                <li>200 KB/s</li>
323                                                                <li>250 KB/s</li>
324                                                                <li>500 KB/s</li>
325                                                                <li>750 KB/s</li>
326                                                        </ul>
327                                                </li>
328                                                <li class="separator"></li>
329                                                <li>Sort Transfers By
330                                                        <ul id="footer_sort_menu">
331                                                                <li id="sort_by_activity">Activity</li>
332                                                                <li id="sort_by_age">Age</li>
333                                                                <li id="sort_by_name">Name</li>
334                                                                <li id="sort_by_percent_completed">Progress</li>
335                                                                <li id="sort_by_queue_order">Queue Order</li>
336                                                                <li id="sort_by_state">State</li>
337                                                                <li class="separator"></li>
338                                                                <li id="reverse_sort_order">Reverse Sort Order</li>
339                                                        </ul>
340                                                </li>
341                                        </ul>
342                                </li>
343                        </ul>
344                </div>
345               
346<div class="contextMenu" id="torrent_context_menu">
347                        <ul>
348                                <li id="context_pause_selected" class="disabled context_pause_selected">Pause Selected</li>
349                                <li id="context_resume_selected" class="disabled context_resume_selected">Resume Selected</li>
350                                <li class="separator"></li>
351                                <li id="context_remove">Remove From List...</li>
352                                <li id="context_removedata">Trash Data & Remove From List...</li>
353                                <li class="separator"></li>
354                                <li id="context_verify">Verify Local Data</li>
355                                <li class="separator"></li>
356                                <li id="context_toggle_inspector">Show Inspector</li>
357                                <li class="separator"></li>
358                                <li id="context_select_all" class="context_select_all">Select All</li>
359                                <li id="context_deselect_all" class="context_deselect_all">Deselect All</li>
360                        </ul>
361                </div>
362               
363                <iframe name="torrent_upload_frame" id="torrent_upload_frame" src="about:blank" ></iframe>
364        </body>
365</html>
Note: See TracBrowser for help on using the repository browser.