<!-- vim: set tabstop=4 shiftwidth=4 softtabstop=4 noexpandtab: --> <!doctype html> <html> <head> <link rel="icon" href="favicon.ico" /> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>aria2 web client</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/download.css"> <!-- external javascript dependencies --> <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> <script src="js/libs/underscore.js"></script> <script src="js/libs/bootstrap.js"></script> <script src="js/libs/mustache.js"></script> <script src="js/libs/piecon.js"></script> <!-- webui core --> <script src="js/old/aria2_settings.js"></script> <script src="js/old/utils.js"></script> <script src="js/old/connection.js"></script> <!-- {{{ css styles --> <style> /* hack to fix the 1 px height for collapsed span elements */ .more_info { min-height: 0px; } .button_set { float: right; margin-bottom: 5px; } .stat_graph { margin-top: 25px; height: 220px; } .active_settings { text-align: center; margin-bottom: 3px; } .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; } </style> <!-- }}} --> <!-- {{{ download template --> <script type="text/mustache" id="download_template"> <table class="{{type}}-download" data-gid="{{gid}}" data-settingsName={{sett_name}}> <tbody> <tr> <td data-toggle="collapse" data-target="[data-gid={{gid}}] .download-detail .collapse" class="download-overview"> <b class="download-name">{{name}}</b> </td> <td class="download-controls" rowspan="2"> <div class="btn-group"> {{#booleans.can_pause}} <button class="btn download_pause"><i class="icon-pause"></i></button> {{/booleans.can_pause}} {{#booleans.can_play}} <button class="btn download_play"><i class="icon-play"></i></button> {{/booleans.can_play}} {{#booleans.can_restart}} <button class="btn download_restart"><i class="icon-repeat"></i></button> {{/booleans.can_restart}} <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}} <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> {{#booleans.has_settings}} <li><a href="#" class="download_settings visible-phone"><i class="icon-cog"></i> Settings</a></li> {{#booleans.bittorrent}} <li><a href="#" class="torrent_info"><i class="icon-list-alt"></i> Peers</a></li> {{/booleans.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> <li class="visible-phone"><a href="#" class="download_remove"><i class="icon-remove"></i> Remove</a></li> </ul> </div> </td> </tr> <tr> <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-totalLength">{{totalLength}}</span></li> <li class="label label-success hidden-phone">Downloaded: <span class="download-completedLength">{{completedLength}}</span></li> <li class="label label-success hidden-phone hidden-tablet">Progress: <span class="download-percentage">{{percentage}}</span>%</li> <li class="label label-success">Speed: <span class="download-downloadSpeed">{{downloadSpeed}}</span></li> {{#booleans.bittorrent}} <li class="label label-success hidden-phone">Upload Speed: <span class="download-uploadSpeed">{{uploadSpeed}}</span></li> {{/booleans.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-totalLength">{{totalLength}}</span></li> <li class="label label-info hidden-phone">Downloaded: <span class="download-completedLength">{{completedLength}}</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-totalLength">{{totalLength}}</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-totalLength">{{totalLength}}</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-totalLength">{{totalLength}}</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"> {{#booleans.can_pause}} <div class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;"> <div class="bar" style="width: {{percentage}}%;"></div> </div> {{/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}} </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"> <canvas class="progress chunk-canvas" width="1400" style="width: 100%; margin: 5px;"></canvas> <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-totalLength">{{totalLength}}</span></li> <li class="label">Downloaded: <span class="download-completedLength">{{completedLength}}</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-downloadSpeed">{{downloadSpeed}}</span></li> {{#booleans.bittorrent}} <li class="label">Upload Speed: <span class="download-uploadSpeed">{{uploadSpeed}}</span></li> <li class="label">Upload Length: <span class="download-uploadLength">{{uploadLength}}</span></li> {{/booleans.bittorrent}} <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}} ({{length}})</li> {{/files}} </ul> <div> <div class="download-graph"></div> </div> </div> </td> </tr> </tbody> </table> </script> <!-- }}} --> <!--{{{ start global settings item template --> <script type="text/mustache" id="global_general_settings_template"> {{#settings}} <fieldset> <legend>{{name}}</legend> <div class="control-group"> {{#values}} <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> {{/values}} </div> </fieldset> {{/settings}} </script> <!-- global settings template end }}}--> <!-- {{{ torrent info template --> <script type="text/mustache" id="torrent_info_template"> <div class="modal-header"> <button class="close" data-dismiss="modal">x</button> <h3>Peers for {{info_name}}</h3> </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> <!-- }}} --> <!--{{{ download settings template --> <script type="text/mustache" id="download_settings_template"> <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"> {{#values}} <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}}"> <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> {{/values}} </div> </fieldset> {{/settings}} </form> </div> <div class="modal-footer"> <button id="save_download_settings" class="btn btn-success">Save</button> </div> </script> <!-- download settings template }}}--> </head> <body> <!-- {{{ top nav bar --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <!-- .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"> <ul class="nav"> <li class="dropdown" id="add_download"> <a class="dropdown-toggle" data-toggle="dropdown" href="#add_download"> Add <b class="caret"></b> </a> <ul class="dropdown-menu"> <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> </ul> </li> <li class="dropdown" id="stop_downloads"> <a class="dropdown-toggle" data-toggle="dropdown" href="#stop_downloads"> Manage <b class="caret"></b> </a> <ul class="dropdown-menu"> <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> <li><a href="#" onclick="force_remove_all()"><i class="icon-fire"></i> Remove All</a></li> </ul> </li> </ul> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Settings <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#" onclick="custom_aria2_connect()"> <i class="icon-wrench"></i> Connection Settings</a> </li> <li><a href="#" onclick="custom_global_settings()"> <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"> <li><a href="#" onclick="custom_global_statistics()"> <i class="icon-list-alt"></i> Global Statistics</a></li> <li><a href="#" onclick="show_about()"> <i class="icon-info-sign"></i> About</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <!-- }}} --> <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> <legend>Aria2 RPC host and port</legend> <div class="control-group"> <label class="control-label" for="input_host">Enter the host:</label> <div class="controls"> <div class="input-prepend"><span class="add-on">http(s)://</span><input type="text" class="input-xlarge" id="input_host" placeholder="localhost"/></div> <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> <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> <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> <legend>Metalink File upload</legend> <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> <legend>Download urls</legend> <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/old/plugins.js"></script> <script src="js/old/script.js"></script> </body> </html>