mirror of
https://github.com/onionshare/onionshare.git
synced 2024-12-24 23:09:42 -05:00
made GUI design look way nicer
This commit is contained in:
Micah Lee
parent
2191965adc
commit
5f3789eb5e
BIN
onionshare_gui/static/loader.gif
Normal file
BIN
onionshare_gui/static/loader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 9.0 KiB |
@ -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($('<strong>').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']);
|
||||
|
||||
setTimeout(check_for_requests, 1000);
|
||||
// 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;
|
||||
|
||||
$('#loading').remove();
|
||||
|
||||
$('#filesize .value').html(onionshare.filesize+' bytes');
|
||||
$('#filehash .value').html(onionshare.filehash);
|
||||
$('#filesize').show(500);
|
||||
$('#filehash').show(500);
|
||||
|
||||
update('<span>'+onionshare.strings['give_this_url']+'</span><br/><strong>'+onionshare.url+'</strong>');
|
||||
copy_to_clipboard();
|
||||
$('#copy-button').show();
|
||||
|
||||
setTimeout(check_for_requests, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -6,17 +6,28 @@
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<div id="metadata">
|
||||
<img src="static/logo.png" />
|
||||
<p id="basename"></p>
|
||||
<p id="filesize"></p>
|
||||
<p id="filehash"></p>
|
||||
<img id="logo" src="static/logo.png" />
|
||||
<div id="basename"></div>
|
||||
<div id="filesize">
|
||||
<span class="label"></span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
<div id="filehash">
|
||||
<span class="label"></span>
|
||||
<span class="value"></span>
|
||||
</div>
|
||||
<div id="button-wrapper">
|
||||
<button class="button" id="copy-button">Copy URL</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="log"></ul>
|
||||
</div>
|
||||
<ul id="log">
|
||||
<li id="loading">
|
||||
<img src="static/loader.gif" />
|
||||
<p class="calculating"></p>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<script src="static/jquery-1.11.1.min.js"></script>
|
||||
<script src="static/onionshare.js"></script>
|
||||
</body>
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user