diff options
Diffstat (limited to 'ext/bg/options.html')
| -rw-r--r-- | ext/bg/options.html | 152 |
1 files changed, 79 insertions, 73 deletions
diff --git a/ext/bg/options.html b/ext/bg/options.html index f5bad2bd..b9be4c9d 100644 --- a/ext/bg/options.html +++ b/ext/bg/options.html @@ -6,7 +6,7 @@ <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"> <style> - .options-anki, .options-advanced { + #anki-spinner, #anki-general, #anki-error, #options-advanced { display: none; } @@ -16,15 +16,11 @@ border-right: 1px #ddd solid; padding: 10px; } - - .error-dlg { - display: none; - } </style> </head> <body> <div class="container"> - <div class="options-basic"> + <div> <h3>General Options</h3> <form class="form-horizontal"> @@ -47,14 +43,6 @@ <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> - <label class="control-label"><input type="checkbox" id="enable-anki-connect"> Enable <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a></label> - </div> - </div> - </div> - - <div class="form-group"> - <div class="col-sm-offset-2 col-sm-10"> - <div class="checkbox"> <label class="control-label"><input type="checkbox" id="show-advanced-options"> Show advanced options</label> </div> </div> @@ -62,7 +50,7 @@ </form> </div> - <div class="options-basic"> + <div> <h3>Scanning Options</h3> <form class="form-horizontal"> @@ -94,19 +82,35 @@ </form> </div> - <div class="options-anki"> + <div> + <img src="img/spinner.gif" class="pull-right" id="anki-spinner" alt> + <h3>Anki Options</h3> - <div class="alert alert-danger error-dlg error-dlg-connection"> - <strong>Unable to Connect</strong><br> - Is the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> installed and running? This software is required for Anki-related features. + <div class="alert alert-danger" id="anki-error"> + <strong>Error:</strong> <span></span> </div> - <div class="alert alert-warning error-dlg error-dlg-version"> - <strong>Unsupported Version</strong><br> - The installed version of the <a href="https://foosoft.net/projects/anki-connect">AnkiConnect</a> extension for <a href="http://ankisrs.net/">Anki</a> is not compatible with this release; please update it. + + <div class="form-group"> + <label class="control-label" for="anki-method">Connection method</label> + <select class="form-control" id="anki-method"> + <option value="disabled">Disabled (no auto flashcard creation)</option> + <option value="ankiweb">AnkiWeb (requires an account on AnkiWeb)</option> + <option value="ankiconnect">AnkiConnect (requires the AnkiConnect plugin)</option> + </select> </div> - <form class="form-horizontal options-anki-controls"> + <form class="form-horizontal" id="anki-general"> + <div class="form-group anki-login"> + <label for="anki-username" class="control-label col-sm-2">Username</label> + <div class="col-sm-10"><input type="text" id="anki-username" class="form-control anki-credential"></div> + </div> + + <div class="form-group anki-login"> + <label for="anki-password" class="control-label col-sm-2">Password</label> + <div class="col-sm-10"><input type="password" id="anki-password" class="form-control anki-credential"></div> + </div> + <div class="form-group"> <label for="anki-card-tags" class="control-label col-sm-2">Card tags</label> <div class="col-sm-10"><input type="text" id="anki-card-tags" class="form-control"></div> @@ -117,70 +121,72 @@ <div class="col-sm-10"><input type="number" min="1" id="sentence-extent" class="form-control"></div> </div> - <ul class="nav nav-tabs col-sm-offset-2 col-sm-10"> - <li class="active"><a href="#term" data-toggle="tab">Terms</a></li> - <li><a href="#kanji" data-toggle="tab">Kanji</a></li> - </ul> - - <div class="tab-content col-sm-offset-2 col-sm-10"> - <div id="term" class="tab-pane fade in active"> - <div class="form-group"> - <label class="col-sm-2 control-label" for="anki-term-deck">Deck</label> - <div class="col-sm-10"> - <select class="form-control anki-deck" id="anki-term-deck"></select> + <div id="anki-format"> + <ul class="nav nav-tabs col-sm-offset-2 col-sm-10"> + <li class="active"><a href="#term" data-toggle="tab">Terms</a></li> + <li><a href="#kanji" data-toggle="tab">Kanji</a></li> + </ul> + + <div class="tab-content col-sm-offset-2 col-sm-10"> + <div id="term" class="tab-pane fade in active"> + <div class="form-group"> + <label class="col-sm-2 control-label" for="anki-term-deck">Deck</label> + <div class="col-sm-10"> + <select class="form-control anki-deck" id="anki-term-deck"></select> + </div> </div> - </div> - <div class="form-group"> - <label class="col-sm-2 control-label" for="anki-term-model">Model</label> - <div class="col-sm-10"> - <select class="form-control anki-model" id="anki-term-model"></select> + <div class="form-group"> + <label class="col-sm-2 control-label" for="anki-term-model">Model</label> + <div class="col-sm-10"> + <select class="form-control anki-model" id="anki-term-model"></select> + </div> </div> - </div> - <table class="table table-bordered anki-fields"> - <thead> - <tr> - <th>Field</th> - <th>Value</th> - </tr> - </thead> - <tbody> - </tbody> - </table> - </div> + <table class="table table-bordered anki-fields"> + <thead> + <tr> + <th>Field</th> + <th>Value</th> + </tr> + </thead> + <tbody> + </tbody> + </table> + </div> - <div id="kanji" class="tab-pane fade"> - <div class="form-group"> - <label class="col-sm-2 control-label" for="anki-kanji-deck">Deck</label> - <div class="col-sm-10"> - <select class="form-control anki-deck" id="anki-kanji-deck"></select> + <div id="kanji" class="tab-pane fade"> + <div class="form-group"> + <label class="col-sm-2 control-label" for="anki-kanji-deck">Deck</label> + <div class="col-sm-10"> + <select class="form-control anki-deck" id="anki-kanji-deck"></select> + </div> </div> - </div> - <div class="form-group"> - <label class="col-sm-2 control-label" for="anki-kanji-model">Model</label> - <div class="col-sm-10"> - <select class="form-control anki-model" id="anki-kanji-model"></select> + <div class="form-group"> + <label class="col-sm-2 control-label" for="anki-kanji-model">Model</label> + <div class="col-sm-10"> + <select class="form-control anki-model" id="anki-kanji-model"></select> + </div> </div> - </div> - <table class="table table-bordered anki-fields"> - <thead> - <tr> - <th>Field</th> - <th>Value</th> - </tr> - </thead> - <tbody> - </tbody> - </table> + <table class="table table-bordered anki-fields"> + <thead> + <tr> + <th>Field</th> + <th>Value</th> + </tr> + </thead> + <tbody> + </tbody> + </table> + </div> </div> </div> </form> </div> - <div style="text-align: right;"> + <div class="pull-right"> <small><a href="https://foosoft.net/projects/yomichan-chrome">Homepage</a> • <a href="legal.html">Legal</a></small> </div> </div> |