diff --git a/onionshare_gui/static/loader.gif b/onionshare_gui/static/loader.gif new file mode 100644 index 00000000..1aeaff96 Binary files /dev/null and b/onionshare_gui/static/loader.gif differ diff --git a/onionshare_gui/static/loader_large.gif b/onionshare_gui/static/loader_large.gif deleted file mode 100644 index 39832d33..00000000 Binary files a/onionshare_gui/static/loader_large.gif and /dev/null differ diff --git a/onionshare_gui/static/loader_small.gif b/onionshare_gui/static/loader_small.gif deleted file mode 100644 index 4355fcac..00000000 Binary files a/onionshare_gui/static/loader_small.gif and /dev/null differ diff --git a/onionshare_gui/static/logo.png b/onionshare_gui/static/logo.png index 87bbec8d..979973ca 100644 Binary files a/onionshare_gui/static/logo.png and b/onionshare_gui/static/logo.png differ diff --git a/onionshare_gui/static/onionshare.js b/onionshare_gui/static/onionshare.js index 9f467e93..c8cf3125 100644 --- a/onionshare_gui/static/onionshare.js +++ b/onionshare_gui/static/onionshare.js @@ -43,21 +43,40 @@ $(function(){ }); } - // start onionshare + // initialize $.ajax({ - url: '/start_onionshare', + url: '/init_info', success: function(data, textStatus, jqXHR){ onionshare = JSON.parse(data); $('#basename').html(onionshare.basename); - //update(onionshare.strings['sha1_checksum']+": "+onionshare.filehash); - update(onionshare.strings['give_this_url']); - update($('').html(onionshare.url)); - copy_to_clipboard(); - $('#copy-button').show(); + $('#filesize .label').html(onionshare.strings['filesize']+':'); + $('#filehash .label').html(onionshare.strings['sha1_checksum']+':'); + $('#loading .calculating').html(onionshare.strings['calculating_sha1']); + + // after getting the initial info, start the onionshare server + $.ajax({ + url: '/start_onionshare', + success: function(data, textStatus, jqXHR){ + var data_obj = JSON.parse(data); + onionshare.filehash = data_obj.filehash; + onionshare.filesize = data_obj.filesize; + onionshare.url = data_obj.url; - setTimeout(check_for_requests, 1000); + $('#loading').remove(); + + $('#filesize .value').html(onionshare.filesize+' bytes'); + $('#filehash .value').html(onionshare.filehash); + $('#filesize').show(500); + $('#filehash').show(500); + + update(''+onionshare.strings['give_this_url']+'
'+onionshare.url+''); + copy_to_clipboard(); + $('#copy-button').show(); + + setTimeout(check_for_requests, 1000); + } + }); } }); - }); diff --git a/onionshare_gui/static/style.css b/onionshare_gui/static/style.css index 061be0d8..824eee38 100644 --- a/onionshare_gui/static/style.css +++ b/onionshare_gui/static/style.css @@ -1,5 +1,4 @@ body { - background-color: #ffffff; color: #000000; font-family: arial; width: 520px; @@ -16,33 +15,53 @@ body { #metadata { float: left; width: 200px; - height: 400px; + height: 380px; padding: 10px; + background-color: #ffffff; + text-align: center; } #metadata #basename { font-family: sans-serif; font-size: 18px; font-weight: bold; margin: 10px 0; + padding: 5px; color: #000000; - text-align: center; - word-wrap: break-word; + word-break: break-all; + background-color: #f9f9f9; + border: 1px solid #f0f0f0; +} +#metadata #filesize, +#metadata #filehash { + margin-bottom: 10px; + word-break: break-all; + text-align: left; + color: #666666; + display: none; +} +#metadata .label { + font-size: 12px; +} +#metadata .value { + font-weight: bold; + font-size: 12px; } ul#log { float: left; - width: 300px; + width: 299px; height: 400px; margin: 0; padding: 0; list-style: none; - background-color: #e0e0e0; + background-color: #f0f0f0; overflow: auto; word-wrap: break-word; font-family: monospace; + border-left: 1px solid #000000; } ul#log li { - margin: 0; + margin: 10px; padding: 10px; border-bottom: 1px solid #aaaaaa; } @@ -52,18 +71,29 @@ ul#log .weblog { } ul#log .weblog-error { - color: #990000; + color: #ff0000; font-weight: bold; } +ul#log li#loading { + text-align: center; + padding: 60px 30px; + border-bottom: 0; +} +ul#log li#loading .calculating { + color: #666666; + font-style: italic; + font-size: 12px; +} + .button { - -moz-box-shadow:inset 0px 1px 0px 0px #f29c93; - -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93; - box-shadow:inset 0px 1px 0px 0px #f29c93; - background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) ); - background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% ); - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100'); - background-color:#fe1a00; + -moz-box-shadow:inset 0px 1px 0px 0px #d197fe; + -webkit-box-shadow:inset 0px 1px 0px 0px #d197fe; + box-shadow:inset 0px 1px 0px 0px #d197fe; + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a53df6), color-stop(1, #7c16cb) ); + background:-moz-linear-gradient( center top, #a53df6 5%, #7c16cb 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a53df6', endColorstr='#7c16cb'); + background-color:#a53df6; -webkit-border-top-left-radius:0px; -moz-border-radius-topleft:0px; border-top-left-radius:0px; @@ -77,7 +107,7 @@ ul#log .weblog-error { -moz-border-radius-bottomleft:0px; border-bottom-left-radius:0px; text-indent:0; - border:1px solid #d83526; + border:1px solid #9c33ed; display:inline-block; color:#ffffff; font-family:Arial; @@ -86,13 +116,13 @@ ul#log .weblog-error { font-style:normal; text-decoration:none; text-align:center; - text-shadow:1px 1px 0px #b23e35; + text-shadow:1px 1px 0px #7d15cd; } .button:hover { - background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) ); - background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% ); - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00'); - background-color:#ce0100; + background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c16cb), color-stop(1, #a53df6) ); + background:-moz-linear-gradient( center top, #7c16cb 5%, #a53df6 100% ); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c16cb', endColorstr='#a53df6'); + background-color:#7c16cb; } #button-wrapper { @@ -102,11 +132,3 @@ ul#log .weblog-error { display: none; } -#loading { - width: 550px; - height: 300px; - background-color: #333333; - background-image: url('/static/loader_large.gif'); - background-repeat: no-repeat; - background-position: center center; -} diff --git a/onionshare_gui/templates/index.html b/onionshare_gui/templates/index.html index 565b1eb7..a3bb0a0a 100644 --- a/onionshare_gui/templates/index.html +++ b/onionshare_gui/templates/index.html @@ -6,17 +6,28 @@
- -

-

-

+ +
+
+ + +
+
+ + +
- -
+ + diff --git a/onionshare_gui/webapp.py b/onionshare_gui/webapp.py index 2e1522eb..773849c1 100644 --- a/onionshare_gui/webapp.py +++ b/onionshare_gui/webapp.py @@ -15,13 +15,22 @@ app = Flask(__name__, template_folder='./templates') def index(): return render_template('index.html') +@app.route("/init_info") +def init_info(): + global onionshare, filename + basename = os.path.basename(filename) + + return json.dumps({ + 'strings': onionshare.strings, + 'basename': basename + }) + @app.route("/start_onionshare") def start_onionshare(): global onionshare, onionshare_port, filename, onion_host, url url = 'http://{0}/{1}'.format(onion_host, onionshare.slug) - basename = os.path.basename(filename) filehash, filesize = onionshare.file_crunching(filename) onionshare.set_file_info(filename, filehash, filesize) @@ -31,8 +40,6 @@ def start_onionshare(): t.start() return json.dumps({ - 'strings': onionshare.strings, - 'basename': basename, 'filehash': filehash, 'filesize': filesize, 'url': url