2012-10-30 04:34:14 +01:00
<!-- vim: set tabstop=4 shiftwidth=4 softtabstop=4 noexpandtab: -->
2012-09-18 16:53:35 +02:00
<!doctype html>
2012-12-26 11:57:11 +01:00
< html >
2012-09-18 16:53:35 +02:00
< head >
2012-10-30 04:34:14 +01:00
< link rel = "icon" href = "favicon.ico" / >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" >
2012-12-26 11:57:11 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2012-10-30 04:34:14 +01:00
< title > aria2 web client< / title >
< link rel = "stylesheet" href = "css/bootstrap.css" >
2013-01-04 12:16:41 +01:00
< link rel = "stylesheet" href = "css/font-awesome.css" >
2013-01-15 12:19:26 +01:00
2013-01-15 09:24:09 +01:00
< link rel = "stylesheet" href = "css/style.css" >
2013-01-15 12:19:26 +01:00
< link rel = "stylesheet" href = "css/download.css" >
2012-12-26 11:57:11 +01:00
2013-01-06 11:52:27 +01:00
<!-- external javascript dependencies -->
2012-12-26 11:57:11 +01:00
< script src = "js/libs/jquery-1.8.3.js" > < / script >
< script src = "js/libs/jquery.flot.js" > < / script >
< script src = "js/libs/jquery.flot.resize.js" > < / script >
2013-01-15 09:24:09 +01:00
< script src = "js/libs/underscore.js" > < / script >
2012-10-30 04:34:14 +01:00
< script src = "js/libs/bootstrap.js" > < / script >
< script src = "js/libs/mustache.js" > < / script >
< script src = "js/libs/piecon.js" > < / script >
2013-01-06 11:52:27 +01:00
<!-- webui core -->
2012-12-26 11:57:11 +01:00
< script src = "js/aria2_settings.js" > < / script >
2012-10-30 04:34:14 +01:00
< script src = "js/utils.js" > < / script >
< script src = "js/connection.js" > < / script >
2012-12-26 11:57:11 +01:00
2012-09-18 16:53:35 +02:00
2013-01-04 12:16:41 +01:00
<!-- {{{ css styles -->
2012-10-30 04:34:14 +01:00
< style >
2012-12-26 13:34:25 +01:00
/* hack to fix the 1 px height for collapsed span elements */
.more_info {
min-height: 0px;
}
2012-12-30 08:54:00 +01:00
2012-09-18 16:53:35 +02:00
.button_set {
float: right;
margin-bottom: 5px;
}
.stat_graph {
margin-top: 25px;
height: 220px;
}
.active_settings {
text-align: center;
margin-bottom: 3px;
}
.active_graph {
2012-12-30 08:54:00 +01:00
width: 80%;
2012-09-18 16:53:35 +02:00
margin-top: 10px;
margin-bottom: 10px;
}
.download_item {
margin-bottom: 10px;
padding-top: 10px;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}
.download_name {
overflow: hidden;
word-wrap: break-word;
}
2012-10-30 04:34:14 +01:00
< / style >
2013-01-04 12:16:41 +01:00
<!-- }}} -->
2012-09-18 16:53:35 +02:00
2013-01-17 07:51:03 +01:00
<!-- - {{{ download template -->
< script type = "text/mustache" id = "download_template" >
< table class = "{{type}}-download" data-gid = "{{gid}}" data-settingsName = {{sett_name}} >
2013-01-15 09:24:09 +01:00
< tbody >
< tr >
< td data-toggle = "collapse" data-target = "[data-gid={{gid}}] .download-detail .collapse" class = "download-overview" >
< b class = "download-name" > {{name}}< / b >
2013-01-18 12:41:22 +01:00
< / td >
2013-01-18 16:10:03 +01:00
< td class = "download-controls" rowspan = "2" >
2013-01-18 12:41:22 +01:00
< div class = "btn-group" >
{{#booleans.can_pause}}
2013-01-18 16:10:03 +01:00
< button class = "btn download_pause" > < i class = "icon-pause" > < / i > < / button >
2013-01-18 12:41:22 +01:00
{{/booleans.can_pause}}
{{#booleans.can_play}}
2013-01-18 16:10:03 +01:00
< button class = "btn download_play" > < i class = "icon-play" > < / i > < / button >
2013-01-18 12:41:22 +01:00
{{/booleans.can_play}}
{{#booleans.can_restart}}
2013-01-18 16:10:03 +01:00
< button class = "btn download_restart" > < i class = "icon-repeat" > < / i > < / button >
2013-01-18 12:41:22 +01:00
{{/booleans.can_restart}}
2013-01-18 16:10:03 +01:00
< button class = "btn download_remove hidden-phone" > < i class = "icon-stop" > < / i > < / button >
{{#booleans.has_settings}}
< button class = "btn download_settings hidden-phone" > < i class = "icon-cog" > < / i > < / button >
{{/booleans.has_settings}}
2013-01-18 12:41:22 +01:00
< button class = "btn dropdown-toggle" data-toggle = "dropdown" >
< span class = "caret" > < / span >
< / button >
< ul class = "dropdown-menu" >
{{#booleans.has_settings}}
2013-01-18 16:10:03 +01:00
< li > < a href = "#" class = "download_settings visible-phone" > < i class = "icon-cog" > < / i > Settings< / a > < / li >
2013-01-18 12:41:22 +01:00
{{#bittorrent}}
< li > < a href = "#" class = "torrent_info" > < i class = "icon-list-alt" > < / i > Peers< / a > < / li >
{{/bittorrent}}
{{/booleans.has_settings}}
< li > < a href = "#" data-toggle = "collapse" data-target = "[data-gid={{gid}}] .download-detail .collapse" > < i class = "icon-info-sign" > < / i > More Info< / a > < / li >
2013-01-18 16:10:03 +01:00
< li class = "visible-phone" > < a href = "#" class = "download_remove" > < i class = "icon-remove" > < / i > Remove< / a > < / li >
2013-01-18 12:41:22 +01:00
< / ul >
< / div >
< / td >
< / tr >
< tr >
2013-01-18 16:10:03 +01:00
< td data-toggle = "collapse" data-target = "[data-gid={{gid}}] .download-detail .collapse" class = "download-overview" >
< ul class = "stats pull-left" >
{{#booleans.can_pause}}
< li class = "label label-success hidden-phone hidden-tablet" > Status: < span class = "download-status" > {{status}}< / span > < / li >
< li class = "label label-success" > ETA: < span class = "download-eta" > {{eta}}< / span > < / li >
< li class = "label label-success hidden-phone" > Size: < span class = "download-size" > {{size}}< / span > < / li >
< li class = "label label-success hidden-phone hidden-tablet" > Progress: < span class = "download-percentage" > {{percentage}}< / span > %< / li >
< li class = "label label-success hidden-phone" > Downloaded: < span class = "download-downloaded" > {{downloaded}}< / span > < / li >
< li class = "label label-success" > Speed: < span class = "download-down_speed" > {{down_speed}}< / span > < / li >
{{#bittorrent}}
< li class = "label" > Upload Speed: < span class = "download-upload_speed" > {{upload_speed}}< / span > < / li >
{{/bittorrent}}
{{/booleans.can_pause}}
{{#booleans.can_play}}
< li class = "label label-info" > Status: < span class = "download-status" > {{status}}< / span > < / li >
< li class = "label label-info" > Size: < span class = "download-size" > {{size}}< / span > < / li >
< li class = "label label-info hidden-phone" > Downloaded: < span class = "download-downloaded" > {{downloaded}}< / span > < / li >
< li class = "label label-info hidden-phone" > Path: < span class = "download-dir" > {{dir}}< / span > < / li >
{{/booleans.can_play}}
{{#booleans.is_complete}}
< li class = "label" > Status: < span class = "download-status" > {{status}}< / span > < / li >
< li class = "label hidden-phone" > Path: < span class = "download-dir" > {{dir}}< / span > < / li >
< li class = "label" > Size: < span class = "download-size" > {{size}}< / span > < / li >
{{/booleans.is_complete}}
{{#booleans.is_removed}}
< li class = "label label-warning" > Status: < span class = "download-status" > {{status}}< / span > < / li >
< li class = "label label-warning hidden-phone" > Path: < span class = "download-dir" > {{dir}}< / span > < / li >
< li class = "label label-warning" > Size: < span class = "download-size" > {{size}}< / span > < / li >
{{/booleans.is_removed}}
{{#booleans.is_error}}
< li class = "label label-important" > Status: < span class = "download-status" > {{status}}< / span > < / li >
< li class = "label label-important hidden-phone" > Path: < span class = "download-dir" > {{dir}}< / span > < / li >
< li class = "label label-important" > Size: < span class = "download-size" > {{size}}< / span > < / li >
{{/booleans.is_error}}
< / ul >
< / td >
< / tr >
< tr >
< td class = "download-progress" colspan = "2" data-toggle = "collapse" data-target = "[data-gid={{gid}}] .download-detail .collapse" >
2013-01-17 07:51:03 +01:00
{{#booleans.can_pause}}
< div class = "progress progress-striped active" style = "width: 100%; margin: 0; padding: 0;" >
2013-01-15 09:24:09 +01:00
< div class = "bar" style = "width: {{percentage}}%;" > < / div >
< / div >
2013-01-17 07:51:03 +01:00
{{/booleans.can_pause}}
{{#booleans.can_play}}
< div class = "progress progress-info progress-striped" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{percentage}}%;" > < / div >
< / div >
{{/booleans.can_play}}
{{#booleans.is_error}}
< div class = "progress progress-danger progress-striped" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{percentage}}%;" > < / div >
< / div >
{{/booleans.is_error}}
{{#booleans.is_removed}}
< div class = "progress progress-warning progress-striped" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{percentage}}%;" > < / div >
< / div >
{{/booleans.is_removed}}
{{#booleans.is_complete}}
< div class = "progress progress-success progress-striped" style = "width: 100%; margin: 0; padding: 0;" >
< div class = "bar" style = "width: {{percentage}}%;" > < / div >
< / div >
{{/booleans.is_complete}}
2013-01-15 09:24:09 +01:00
< / td >
< / tr >
< tr data-toggle = "collapse" data-target = "[data-gid={{gid}}] .download-detail .collapse" class = "download-detail" >
< td colspan = "2" >
< div class = "collapse more_info" >
2013-01-18 12:41:22 +01:00
< canvas class = "progress chunk-canvas" width = "1400" style = "width: 100%; margin: 5px;" > < / canvas >
2013-01-15 09:24:09 +01:00
< ul class = "stats" >
< li class = "label" > Status: < span class = "download-status" > {{status}}< / span > < / li >
< li class = "label" > GID: < span class = "download-gid" > {{gid}}< / span > < / li >
< li class = "label" > Dir: < span class = "download-dir" > {{dir}}< / span > < / li >
< li class = "label" > Size: < span class = "download-size" > {{size}}< / span > < / li >
< li class = "label" > Downloaded: < span class = "download-downloaded" > {{downloaded}}< / span > < / li >
< li class = "label" > Num of Pieces: < span class = "download-numPieces" > {{numPieces}}< / span > < / li >
< li class = "label" > Piece Length: < span class = "download-pieceLength" > {{pieceLength}}< / span > < / li >
< li class = "label" > ETA: < span class = "download-eta" > {{eta}}< / span > < / li >
< li class = "label" > Down Speed: < span class = "download-down_speed" > {{down_speed}}< / span > < / li >
2013-01-18 16:10:03 +01:00
{{#bittorrent}}
2013-01-15 09:24:09 +01:00
< li class = "label" > Upload Speed: < span class = "download-upload_speed" > {{upload_speed}}< / span > < / li >
< li class = "label" > Upload Length: < span class = "download-uploadLength" > {{uploadLength}}< / span > < / li >
2013-01-18 16:10:03 +01:00
{{/bittorrent}}
2013-01-15 09:24:09 +01:00
< li class = "label" > Connections: < span class = "download-connections" > {{connections}}< / span > < / li >
< / ul >
< h4 class = "hidden-phone" > Download Files< / h4 >
< ul class = "download-files hidden-phone" >
{{#files}}
< li class = "label" > {{path}} ({{size}})< / li >
{{/files}}
< / ul >
< div >
< div class = "active_graph" > < / div >
< / div >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
2012-10-30 04:34:14 +01:00
< / script >
2013-01-17 07:51:03 +01:00
<!-- }}} -->
2012-09-18 16:53:35 +02:00
2012-10-30 04:34:14 +01:00
<!-- {{{ start global settings item template -->
< script type = "text/mustache" id = "global_general_settings_template" >
2012-09-18 16:53:35 +02:00
{{#settings}}
< fieldset >
< legend > {{name}}< / legend >
< div class = "control-group" >
2012-10-30 04:34:14 +01:00
{{#values}}
2012-09-18 16:53:35 +02:00
< label class = "control-label" for = "input_settings_{{name}}" > {{name}}< / label >
< div class = "controls" >
{{^options}}
{{#has_value}}
< input typ = "text" class = "input-xlarge" id = "input_settings_{{name}}" value = "{{value}}" / >
{{/has_value}}
{{^has_value}}
< input typ = "text" class = "input-xlarge" placeholder = "default" id = "input_settings_{{name}}" / >
{{/has_value}}
{{/options}}
{{#option}}
{{#has_value}}
< select id = "input_settings_{{name}}" >
{{/has_value}}
{{^has_value}}
< select id = "input_settings_{{name}}" >
< option value = "no_val" > Default< / option >
{{/has_value}}
{{/option}}
{{#options}}
{{#has_value}}
< option value = "{{& val}}" > {{disp}}< / option >
{{/has_value}}
{{^has_value}}
< option value = "{{& .}}" > {{.}}< / option >
{{/has_value}}
{{/options}}
{{#option}}
< / select >
{{/option}}
< p class = "help-block" > {{desc}}< / p >
< br > < br >
< / div >
2012-10-30 04:34:14 +01:00
{{/values}}
< / div >
< / fieldset >
{{/settings}}
2012-09-18 16:53:35 +02:00
2012-10-30 04:34:14 +01:00
< / script >
<!-- global settings template end }}} -->
2012-09-18 16:53:35 +02:00
2012-10-30 04:34:14 +01:00
<!-- {{{ torrent info template -->
< script type = "text/mustache" id = "torrent_info_template" >
< div class = "modal-header" >
2012-09-18 16:53:35 +02:00
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > Peers for {{info_name}}< / h3 >
2012-10-30 04:34:14 +01:00
< / div >
< div class = "modal-body" >
< table class = "table table-bordered table-striped table-condensed" >
< thead >
< td > Address< / td >
< td > Peer Choking Aria2< / td >
< td > Aria2 Choking Peer< / td >
< td > Seeder< / td >
< td > Upload Speed< / td >
< td > Download Speed< / td >
< / thead >
< tbody >
{{#peers}}
< tr >
< td > {{ip}}:{{port}}< / td >
< td > {{peerChoking}}< / td >
< td > {{amChoking}}< / td >
< td > {{seeder}}< / td >
< td > {{downloadSpeed}}< / td >
< td > {{uploadSpeed}}< / td >
{{/peers}}
{{^peers}}
< td colspan = "6" style = "text-align: center;" > < h2 > No peers connected!< / h2 > < / td >
{{/peers}}
< / tbody >
< / table >
< / div >
< div class = "modal-footer" >
< button class = "btn btn-success" data-dismiss = "modal" > Close< / button >
< / div >
< / script >
<!-- }}} -->
2013-01-15 09:24:09 +01:00
<!-- {{{ download settings template -->
2012-10-30 04:34:14 +01:00
< script type = "text/mustache" id = "download_settings_template" >
2012-09-18 16:53:35 +02:00
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > {{settings_name}} Download Settings< / h3 >
< / div >
< div class = "modal-body" >
< form class = "form-horizontal" id = "dynamic_download_settings" data-downloadSettingsGid = "{{gid}}" >
{{#settings}}
< fieldset >
< legend > {{name}}< / legend >
< div class = "control-group" >
2012-10-30 04:34:14 +01:00
{{#values}}
2012-09-18 16:53:35 +02:00
< label class = "control-label" for = "download_settings_{{name}}" > {{name}}< / label >
< div class = "controls" >
{{^options}}
{{#has_value}}
< input typ = "text" class = "input-xlarge" id = "download_settings_{{name}}" value = "{{value}}" / >
{{/has_value}}
{{^has_value}}
< input typ = "text" class = "input-xlarge" placeholder = "default" id = "download_settings_{{name}}" / >
{{/has_value}}
{{/options}}
{{#option}}
{{#has_value}}
< select id = "download_settings_{{name}}" >
{{/has_value}}
{{^has_value}}
< select id = "download_settings_{{name}}" >
2012-10-30 04:34:14 +01:00
< option value = "no_val" > Default< / option >
2012-09-18 16:53:35 +02:00
{{/has_value}}
{{/option}}
{{#options}}
{{#has_value}}
< option value = "{{& val}}" > {{disp}}< / option >
{{/has_value}}
{{^has_value}}
< option value = "{{& .}}" > {{.}}< / option >
{{/has_value}}
{{/options}}
{{#option}}
< / select >
{{/option}}
< p class = "help-block" > {{desc}}< / p >
< br > < br >
< / div >
2012-10-30 04:34:14 +01:00
{{/values}}
< / div >
< / fieldset >
{{/settings}}
2012-09-18 16:53:35 +02:00
< / form >
< / div >
< div class = "modal-footer" >
< button id = "save_download_settings" class = "btn btn-success" > Save< / button >
< / div >
< / script >
2013-01-15 09:24:09 +01:00
<!-- download settings template }}} -->
2012-09-18 16:53:35 +02:00
< / head >
< body >
2013-01-04 12:16:41 +01:00
<!-- {{{ top nav bar -->
2012-12-26 11:57:11 +01:00
< div class = "navbar navbar-inverse navbar-fixed-top" >
2012-09-18 16:53:35 +02:00
< div class = "navbar-inner" >
< div class = "container" >
2012-10-30 04:34:14 +01:00
<!-- .btn - navbar is used as the toggle for collapsed navbar content -->
< a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / a >
< a class = "brand" href = "#" > aria2 Web-Client< / a >
< div class = "nav-collapse" >
2012-09-18 16:53:35 +02:00
< ul class = "nav" >
< li class = "dropdown" id = "add_download" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#add_download" >
2012-12-31 13:18:12 +01:00
Add < b class = "caret" > < / b >
2012-09-18 16:53:35 +02:00
< / a >
< ul class = "dropdown-menu" >
2013-01-02 21:00:09 +01:00
< li > < a id = "newDownload" href = "#" > < i class = "icon-download" > < / i > Add Download URL< / a > < / li >
< li > < a id = "newDownload_metalink" href = "#" > < i class = "icon-file" > < / i > Add Metalink< / a > < / li >
< li > < a id = "newDownload_torrent" href = "#" > < i class = "icon-file" > < / i > Add Torrent< / a > < / li >
2012-09-18 16:53:35 +02:00
< / ul >
< / li >
< li class = "dropdown" id = "stop_downloads" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#stop_downloads" >
2012-12-31 13:18:12 +01:00
Manage
2012-09-18 16:53:35 +02:00
< b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
2012-12-31 13:18:12 +01:00
< li > < a href = "#" onclick = "force_pause_all()" > < i class = "icon-pause" > < / i > Pause All< / a > < / li >
< li > < a href = "#" onclick = "resume_paused()" > < i class = "icon-play" > < / i > Resume Paused< / a > < / li >
< li > < a href = "#" onclick = "purge_all()" > < i class = "icon-remove" > < / i > Purge Completed< / a > < / li >
2013-01-02 21:00:09 +01:00
< li > < a href = "#" onclick = "force_remove_all()" > < i class = "icon-fire" > < / i > Remove All< / a > < / li >
2012-09-18 16:53:35 +02:00
< / ul >
< / li >
< / ul >
2013-01-02 21:00:09 +01:00
< ul class = "nav" >
2012-09-18 16:53:35 +02:00
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >
2013-01-02 21:00:09 +01:00
Settings < b class = "caret" > < / b >
2012-09-18 16:53:35 +02:00
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" onclick = "custom_aria2_connect()" >
2013-01-02 21:00:09 +01:00
< i class = "icon-wrench" > < / i > Connection Settings< / a >
2012-09-18 16:53:35 +02:00
< / li >
< li > < a href = "#" onclick = "custom_global_settings()" >
2013-01-02 21:00:09 +01:00
< i class = "icon-wrench" > < / i > Global Settings< / a > < / li >
< / ul >
< / li >
< / ul >
< ul class = "nav pull-right" >
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >
About < b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
2012-09-18 16:53:35 +02:00
< li > < a href = "#" onclick = "custom_global_statistics()" >
< i class = "icon-list-alt" > < / i > Global Statistics< / a > < / li >
2013-01-02 21:00:09 +01:00
< li > < a href = "#" onclick = "show_about()" >
< i class = "icon-info-sign" > < / i > About< / a > < / li >
2012-09-18 16:53:35 +02:00
< / ul >
< / li >
< / ul >
2012-10-30 04:34:14 +01:00
< / div > <!-- /.nav - collapse -->
2012-09-18 16:53:35 +02:00
< / div >
< / div >
< / div >
2013-01-04 12:16:41 +01:00
<!-- }}} -->
2012-09-18 16:53:35 +02:00
< div role = "main" class = "container" >
<!-- Download items here -->
< div id = "active_downloads" > < / div >
< div id = "waiting_downloads" > < / div >
< div id = "stopped_downloads" > < / div >
< / div >
<!-- {{{ Hidden dialogs and out of screen HTML elements -->
<!-- {{{ error connection template -->
< div class = "modal hide" id = "error_connect" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > Connection to aria failed :( < / h3 >
< / div >
< div class = "modal-body" >
< p >
Make sure that aria2c is running and rpc is enabled.
aria2c --enable-rpc
< / p >
< / div >
< div class = "modal-footer" >
< a href = "#" onclick = "window.location.reload(true)" class = "btn" > Retry< / a >
< a href = "#" onclick = "custom_aria2_connect()" class = "btn btn-primary" > Use custom IP and port settings< / a >
< / div >
< / div >
<!-- error connection end }}} -->
<!-- {{{ No file api template -->
< div class = "modal hide" id = "error_file_api" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > Unfortunately your browser does not support HTML5 File Api :( < / h3 >
< / div >
< div class = "modal-body" >
< p >
To use this feature, please upgrade your browser to a somewhat recent version.
If you have no clue then head on to < a href = "http://firefox.com" > http://firefox.com< / a >
and follow instructions there.
< / p >
< / div >
< div class = "modal-footer" >
< a href = "#" onclick = "clear_dialogs()" class = "btn" > Close< / a >
< / div >
< / div >
<!-- no file api end }}} -->
<!-- {{{ About template -->
< div class = "modal hide" id = "about_modal" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > About < / h3 >
< / div >
< div class = "modal-body" >
< p >
aria2 version: < span class = "about_aria_version" > < / span >
< br >
Web-Client status: < span class = "about_webclient_version" > < / span >
< / p >
< p >
To download the latest version of the project head on to
< a href = "https://github.com/ziahamza/webui-aria2" > http://github.com/ziahamza/webui-aria2< / a >
< br >
Or you can open the latest version in browser through < a href = "http://ziahamza.github.com/webui-aria2" > http://ziahamza.github.com/webui-aria2< / a >
< / p >
< / div >
< div class = "modal-footer" >
< a href = "#" onclick = "clear_dialogs()" class = "btn" > Close< / a >
< / div >
< / div >
<!-- About end }}} -->
<!-- {{{ global statistics template -->
< div class = "modal hide" id = "global_statistics_modal" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > aria2 Global Statistics< / h3 >
< / div >
< div class = "modal-body" >
< p class = "row-fluid global_statistics_list" style = "text-align: center;" >
< h5 class = "span3 badge" style = "text-align: center; margin: 5px;" > Overall Download Speed: < span class = "stat_downloadSpeed" > < / span > < / h5 >
< h5 class = "span3 badge" style = "text-align: center; margin: 5px;" > Overall Upload Speed: < span class = "stat_uploadSpeed" > < / span > < / h5 >
< h5 class = "span3 badge" style = "text-align: center; margin: 5px;" > Total Active Downloads: < span class = "stat_numActive" > < / span > < / h5 >
< h5 class = "span3 badge" style = "text-align: center; margin: 5px;" > Total Waiting Downloads: < span class = "stat_numWaiting" > < / span > < / h5 >
< h5 class = "span3 badge" style = "text-align: center; margin: 5px;" > Total Stopped Downloads: < span class = "stat_numStopped" > < / span > < / h5 >
< div class = "span5 stat_graph" >
< / div >
< / p >
< / div >
< div class = "modal-footer" >
< a href = "#" onclick = "clear_dialogs()" class = "btn" > Close< / a >
< / div >
< / div >
<!-- global statistics end }}} -->
<!-- {{{ change aria2 rpc host and port template -->
< div class = "modal hide" id = "change_conf" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > Connection Settings< / h3 >
< / div >
< div class = "modal-body" >
< form class = "form-horizontal" >
< fieldset >
2012-10-30 04:34:14 +01:00
< legend > Aria2 RPC host and port< / legend >
2012-09-18 16:53:35 +02:00
< div class = "control-group" >
< label class = "control-label" for = "input_host" > Enter the host:< / label >
< div class = "controls" >
2012-10-02 20:06:37 +02:00
< div class = "input-prepend" > < span class = "add-on" > http(s)://< / span > < input type = "text" class = "input-xlarge" id = "input_host" placeholder = "localhost" / > < / div >
2012-09-18 16:53:35 +02:00
< p class = "help-block" > Enter the ip or dns name of the server on which the rpc for aria2 is running (default = localhost)< / p >
< / div >
< label class = "control-label" for = "input_port" > Enter the port:< / label >
< div class = "controls" >
< input type = "text" class = "input-xlarge" placeholder = "6800" id = "input_port" / >
< p class = "help-block" > Enter the port of the server on which the rpc for aria2 is running (default = 6800)< / p >
< / div >
2012-10-02 16:50:57 +02:00
< label class = "control-label" for = "input_encryption" > SSL/TLS encryption:< / label >
< div class = "controls" >
< button type = "button" class = "btn" data-toggle = "button" id = "input_encryption" > ON< / button >
< p class = "help-block" > Enable SSL/TLS encryption.< / p >
< / div >
2012-09-18 16:53:35 +02:00
< label class = "control-label" for = "input_user" > Enter the username (optional):< / label >
< div class = "controls" >
< input type = "text" class = "input-xlarge" id = "input_user" / >
< p class = "help-block" > Enter the aria2 RPC username (empty if authentication not enabled)< / p >
< / div >
< label class = "control-label" for = "input_pass" > Enter the password (optional):< / label >
< div class = "controls" >
< input type = "password" class = "input-xlarge" id = "input_pass" / >
< p class = "help-block" > Enter the aria2 RPC password (empty if authentication not enabled)< / p >
< / div >
< / div >
< / fieldset >
< / form >
< / div >
< div class = "modal-footer" >
< a href = "#" onclick = "window.location.reload(true)" class = "btn" > Retry with default configuration< / a >
< a href = "#" onclick = "update_server_conf()" class = "btn btn-primary" > Use custom IP and port settings< / a >
< / div >
< / div >
<!-- change aria2 rpc host and port template }}} -->
<!-- {{{ add new torrent -->
< div class = "modal hide" id = "new_torrent" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > Add new Torrents< / h3 >
< / div >
< div class = "modal-body" >
< form class = "form-horizontal" >
< fieldset >
< div class = "control-group" >
< label class = "control-label" for = "input_torrent" > Select the torrent file:< / label >
< div class = "controls" >
< input type = "file" class = "input-xlarge" id = "input_torrent" multiple / >
< p class = "help-block" >
Select the local torrent file to start download.
To add a magnet torrent url, use the add url option and add it there.
Note that you can select multiple torrent files to start at once.
< / p >
< / div >
< / div >
< / fieldset >
< / form >
< / div >
< div class = "modal-footer" >
< a href = "#" onclick = "add_torrent()" class = "btn" > Add< / a >
< a href = "#" onclick = "clear_dialogs()" class = "btn" > Cancel< / a >
< / div >
< / div >
<!-- add new torrent end }}} -->
<!-- {{{ add new metalink -->
< div class = "modal hide" id = "new_metalink" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > Add new Metalinks< / h3 >
< / div >
< div class = "modal-body" >
< form class = "form-horizontal" >
< fieldset >
2012-10-30 04:34:14 +01:00
< legend > Metalink File upload< / legend >
2012-09-18 16:53:35 +02:00
< div class = "control-group" >
< label class = "control-label" for = "input_metalink" > Select the Metalink file:< / label >
< div class = "controls" >
< input type = "file" class = "input-xlarge" id = "input_metalink" multiple / >
< p class = "help-block" >
Please select a local metalink file to initiate its downloads. Note that you
can select multiple metalink files at once to start
< / p >
< / div >
< / div >
< / fieldset >
< / form >
< / div >
< div class = "modal-footer" >
< a href = "#" onclick = "add_metalink()" class = "btn" > Add< / a >
< a href = "#" onclick = "clear_dialogs()" class = "btn" > Cancel< / a >
< / div >
< / div >
<!-- add new metalink end }}} -->
<!-- {{{ add new Download template -->
< div class = "modal hide" id = "newDownload_modal" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > Add a new Download< / h3 >
< / div >
< div class = "modal-body" >
< form class = "form-horizontal" >
< fieldset >
2012-10-30 04:34:14 +01:00
< legend > Download urls< / legend >
2012-09-18 16:53:35 +02:00
< div class = "control-group" >
< label class = "control-label" for = "newDownload_url" > Enter url for the Download:< / label >
< div class = "controls" >
< input type = "text" class = "input-xlarge" id = "newDownload_url" placeholder = "http://example.com" / >
< button class = "btn" href = "#" id = "multiple_uris" > < i class = "icon-plus-sign" > < / i > < / button >
< span class = "help-block" > URI can be HTTP(S)/FTP/BitTorrent Magnet URI. You can add multiple uris for the SAME file and the aria2 will accelerate download by downloading from many uris at the same time.< / span >
< / div >
< / div >
< / fieldset >
< / form >
< / div >
< div class = "modal-footer" >
< button id = "addNewDownload" class = "btn" > Add Download< / button >
< / div >
< / div >
<!-- add new Download template end }}} -->
<!-- {{{ global settings template start -->
< div class = "modal hide" id = "global_settings_modal" >
< div class = "modal-header" >
< button class = "close" data-dismiss = "modal" > x< / button >
< h3 > Global Settings< / h3 >
< / div >
< div class = "modal-body" >
< form class = "form-horizontal" id = "dynamic_global_settings" >
<!-- dynamic settings injection here -->
< / form >
< / div >
< div class = "modal-footer" >
< button id = "save_global_settings" class = "btn btn-success" > Save< / button >
< / div >
< / div >
<!-- global settings template end }}} -->
<!-- {{{ download settings template start -->
< div class = "modal hide" id = "download_settings_modal" >
< / div >
<!-- download settings template end }}} -->
<!-- {{{ torrent info modal -->
< div class = "modal hide" id = "torrent_info_modal" style = "width: 600px;" >
< / div >
<!-- }}} -->
<!-- }}} hidden modals end -->
< script src = "js/plugins.js" > < / script >
< script src = "js/script.js" > < / script >
< / body >
< / html >
