223 lines
11 KiB
HTML
223 lines
11 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>SiaDrive</title>
|
|
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
|
|
<link rel="stylesheet" type="text/css" href="css/general.css">
|
|
<script src="js/index.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1 class="digital app-header" id="ID_SiaDrive" style="height: 5vh;"></h1>
|
|
<div id="main_window" style="height: 94vh;"></div>
|
|
<div class="hidden-element" id="offline_window" style="height: inherit;">
|
|
<div style="display: flex; flex-direction: column; height: inherit;">
|
|
<div class="box" style="flex-grow: 0;">
|
|
<h1>Connecting</h1>
|
|
<p>Waiting to establish connection to Sia</p>
|
|
</div>
|
|
<div class="box" style="flex-grow: 1; display: flex; align-items: center;">
|
|
<img style="display: block; margin-left: auto; margin-right: auto; opacity: 0.35; width: 181px; height: 103px; border-radius: 10px;" src="./images/startup.gif">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="unlock_window">
|
|
<div class="box">
|
|
<h1>Unlock Wallet</h1>
|
|
<p>Enter wallet password and click 'Unlock' to continue.</p>
|
|
<input type="password" id="ID_WalletUnlockPwd" style="width: 100%;"/><br>
|
|
<button style="margin-top: 5px;" id="ID_UnlockWalletButton">Unlock</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="unlocking_window" style="height: inherit;">
|
|
<div style="display: flex; flex-direction: column; height: inherit;">
|
|
<div class="box" style="flex-grow: 0;">
|
|
<h1>Unlocking Wallet</h1>
|
|
<p>This may take several minutes, so please be patient.</p>
|
|
</div>
|
|
<div class="box" style="flex-grow: 1; display: flex; align-items: center;">
|
|
<img style="display: block; margin-left: auto; margin-right: auto; opacity: 0.35; width: 181px; height: 103px; border-radius: 10px;" src="./images/startup.gif">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="create_window">
|
|
<div class="box">
|
|
<h1>Create New Wallet</h1>
|
|
<p>Click 'Create' to create a new Sia wallet or exit the application if this is not what you want to do.</p>
|
|
<button id="ID_CreateWalletButton">Create</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="wallet_created_window">
|
|
<div class="box">
|
|
<h1>Wallet Seed</h1>
|
|
<p>Please backup your generated wallet seed in a safe place. The seed is required to unlock your wallet and you will loose everything if this is lost. Click 'OK' when you are ready.</p>
|
|
<textarea style="width: 100%"; rows="3" id="ID_WalletSeed"></textarea>
|
|
<button id="ID_WalletCreatedButton">OK</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="app_window">
|
|
<div class="box" id="general_info">
|
|
<h1>Sia Information <a href="javascript:void(0)" id="ID_Sia_Settings_Edit">settings</a></h1>
|
|
<div style="float: right;">
|
|
<table>
|
|
<tr>
|
|
<td style="text-align: right">Server Version:</td>
|
|
<td id="ID_ServerVersion"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<table>
|
|
<tr>
|
|
<td style="text-align: right">Available:</td>
|
|
<td id="ID_WalletConfirmedBalance" class="amount"></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right">Pending:</td>
|
|
<td id="ID_WalletBalanceUnconfirmed" class="amount"></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right">Total:</td>
|
|
<td id="ID_WalletTotalBalance" class="amount"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="box" id="receive_info">
|
|
<h1>Receive Address <a href="javascript:void(0)" id="ID_Wallet_Send">send</a></h1>
|
|
<label class="address" id="ID_WalletReceiveAddress" style="text-align: center; width: inherit;display: block;">...</label>
|
|
</div>
|
|
<div class="box" id="renter_info">
|
|
<h1>Renter Settings <a href="javascript:void(0)" id="ID_Renter_Edit">edit</a> <a href="javascript:void(0)" id="ID_Renter_Uploads">uploads</a></h1>
|
|
<table width="inherit" style="margin: 0 auto">
|
|
<tr>
|
|
<td style="text-align: right">Total Funding:</td>
|
|
<td class="amount" id="ID_Renter_AllocatedFunds" style="min-width:120px; word-wrap: break-word;"></td>
|
|
<td colspan="50%"></td>
|
|
<td style="text-align: right">Used Funding:</td>
|
|
<td class="amount" id="ID_Renter_UsedFunds" style="min-width:120px; word-wrap: break-word;"></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right">Available Funding:</td>
|
|
<td class="amount" id="ID_Renter_AvailableFunds"></td>
|
|
<td colspan="50%"></td>
|
|
<td style="text-align: right">Host Count:</td>
|
|
<td class="amount" id="ID_Renter_HostCount"></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="100%">
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right">Total:</td>
|
|
<td class="amount" id="ID_Renter_EstimatedSpace"></td>
|
|
<td colspan="50%"></td>
|
|
<td style="text-align: right">Price (per GB):</td>
|
|
<td class="amount" id="ID_Renter_EstimatedCost"></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right">Available:</td>
|
|
<td class="amount" id="ID_Renter_AvailablSpace"></td>
|
|
<td colspan="50%"></td>
|
|
<td style="text-align: right">Download (per GB):</td>
|
|
<td class="amount" id="ID_Renter_EstimatedDownloadCost"></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align: right">Used:</td>
|
|
<td class="amount" id="ID_Renter_UsedSpace"></td>
|
|
<td colspan="50%"></td>
|
|
<td style="text-align: right">Upload (per GB):</td>
|
|
<td class="amount" id="ID_Renter_EstimatedUploadCost"></td>
|
|
</tr>
|
|
</table>
|
|
<div class="tooltip" id="ID_Progress" style="display: none;">
|
|
<progress style="width: 100%; margin: 0; padding: 0;" id="ID_UploadProgress" value="100" max="100">
|
|
</progress>
|
|
<span class="tooltiptext" id="ID_UploadProgressTooltip"></span>
|
|
</div>
|
|
</div>
|
|
<div class="box" id="mount_info">
|
|
<h1>Mount Location</h1>
|
|
<p>Choose an available drive letter and click 'Mount'</p>
|
|
<table>
|
|
<tr>
|
|
<td style="text-align: left; vertical-align: top">
|
|
<select id="ID_MountDrives"></select>
|
|
<button id="ID_MountButton" type="button">Mount</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="width: inherit;margin: 0 10px;padding: 0;">
|
|
<table style="width: inherit;">
|
|
<tr>
|
|
<td style="text-align: left;white-space: nowrap;"><b>Height:</b></td>
|
|
<td style="white-space: nowrap;" id="ID_BlockHeight">...</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="renter_settings_window">
|
|
<div class="box" id="renter_settings">
|
|
<h1>Buy storage on the Sia Decentralized Network</h1>
|
|
<p>You need to allocate funds to upload and download on Sia. Your allowance remains locked for 3 months. Unspent funds are then refunded*. You can increase your allowance at any time.</p>
|
|
<p>Your storage allowance automatically refills every 6 weeks. Your computer must be online with your wallet unlocked to complete the refill. If Sia fails to refill the allowance by the end of the lock-in period, your data may be lost.</p>
|
|
<p class="footnote">*contract fees are non-refundable. They will be subtracted from the allowance that you set.</p>
|
|
<h1>Allocated Funds</h1>
|
|
<input type="number" id="ID_RenterSetFunds"> <label id="ID_RenterCalcStorage"></label><br><br>
|
|
<h1>Number of Hosts</h1>
|
|
<input type="number" id="ID_RenterSetHosts"><br><br>
|
|
<h1>Contract Period</h1>
|
|
<input type="number" id="ID_RenterSetPeriod"><br><br>
|
|
<h1>Renew Window</h1>
|
|
<input type="number" id="ID_RenterSetRenewWindow"><br><br>
|
|
<button id="ID_RenterSettingsDefaults" type="button">Defaults</button>
|
|
<button id="ID_RenterSettingsOK" type="button">Save</button>
|
|
<button id="ID_RenterSettingsCancel" type="button">Back</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="sia_settings_window">
|
|
<div class="box" id="sia_settings">
|
|
<h1>General Settings</h1>
|
|
<input type="checkbox" id="ID_Settings_AutoMountOnUnlock"> Auto-mount last location<br><br>
|
|
<input type="checkbox" id="ID_Settings_AutoStartOnLogon"> Auto-start on logon<br><br>
|
|
<input type="checkbox" id="ID_Settings_CloseToTray"> Close to system tray<br><br>
|
|
<input type="checkbox" id="ID_Settings_LaunchFileMgrOnMount"> Launch file manager on mount<br><br>
|
|
<input type="checkbox" id="ID_Settings_LockWalletOnExit"> Lock wallet on exit<br><br>
|
|
<input type="checkbox" id="ID_Settings_StoreUnlockPassword"> Store unlock password<br><br>
|
|
<input type="checkbox" id="ID_Settings_LaunchBundledSiad"> Use bundled siad<br><br>
|
|
<h1>API Port</h1>
|
|
<input type="number" id="ID_Settings_ApiPort"><br><br>
|
|
<h1>Host Port</h1>
|
|
<input type="number" id="ID_Settings_HostPort"><br><br>
|
|
<h1>RPC Port</h1>
|
|
<input type="number" id="ID_Settings_RpcPort"><br><br>
|
|
<button id="ID_SiaSettingsOK" type="button">Save</button>
|
|
<button id="ID_SiaSettingsCancel" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="upload_progress_window" style="height: inherit;">
|
|
<div style="display: flex; flex-direction: column; height: inherit;">
|
|
<div class="box" style="flex-grow: 1; display: flex; flex-direction: column;">
|
|
<h1 style="flex-grow: 0;">Upload Progress <a href="javascript:void(0)" id="ID_RenterUploadsOk">back</a></h1>
|
|
<div style="padding: 0; margin: 0; flex-grow: 1; display: flex; overflow-x: hidden; overflow-y: scroll;">
|
|
<table style="flex-grow: 1;white-space: nowrap;" id="ID_UploadProgressTable"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden-element" id="send_window">
|
|
<div class="box">
|
|
<h1>Available</h1>
|
|
<label id="ID_Send_Balance" class="amount"></label><br><br>
|
|
<h1>Send to Address</h1>
|
|
<input type="text" id="ID_Send_Address" style="width: 100%;"><br><br>
|
|
<h1>Send Amount <a href="javascript:void(0)" id="ID_SendMaxAmount">max</a></h1>
|
|
<input type="number" id="ID_Send_Amount"><br><br>
|
|
<button id="ID_SendOK" type="button">Send</button>
|
|
<button id="ID_SendCancel" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div id="shutdown_window" class="hidden-element" style="padding: 0; margin: 0;position: fixed; height: 100%; width: 100%;background-image: url(./images/shutdown.gif); background-size: 100% 100%; background-repeat: no-repeat; z-index: 99999"></div>
|
|
</body>
|
|
</html> |