-
- logo -
-
-
-
- Flash Image - Clone Image - +
+ +
+ + Checking… +
+ + + +
-
- + + +
+ + +
+
OPERATION MODE
+
+ +
+
+ + +
+
+
TARGET DEVICE
+ +
+ +
+ +
+ +
+
+ +
+ + + + +
+ + +
+
SOURCE IMAGE
+ +
+ + + +
+
+ + +
+
+
+
VERIFICATION
+ +
+ +
+
+
STATUS
+
Ready
+
+
+ Waiting for operation... +
+
+
+
+ + +
+
+
+
PROGRESS
+
0%
+
+
+
+
+
+
+ + +
+ + + +
-
- + + + +
+
+
+ +
+
+

Confirm device selection

+

This device is not removable. Writing to it can destroy data.

+ +
+
+
+
+ +
+ + +
+ + + + +
+
+
+ +
+
+

Unmount volumes before writing?

+

+ Litho will unmount the volumes below automatically, then flash or clone the whole disk. +

+
+

+ Close apps using these paths. All data on the target disk will be overwritten. +

+
+
+
+ +
+ + +
+ + + +
+ Made with ♥ by + Girish Joshi
-
-
-
- 0% - 0%
-
-
made with ❤️ by Girish Joshi     
- - + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 37ca373..55d5f93 100644 --- a/src/main.js +++ b/src/main.js @@ -1,139 +1,18 @@ -const { invoke } = window.__TAURI__.tauri; -const { open, save } = window.__TAURI__.dialog; -const { emit, listen } = window.__TAURI__.event; +const { invoke } = window.__TAURI__.core; -var selected_file = ""; -var selected_disk = ""; -var clone_or_flash = ""; -var target_size = 0; -var is_writing = false; +let greetInputEl; +let greetMsgEl; -var removable_devices = []; -var non_removable_devices = []; - -function add_storage_device_names() { - invoke("get_storage_devices").then((res) => { - console.log(res); - var diskSelect = document.getElementById("diskSelect"); - for (var i = 0; i < res.length; i++) { - console.log(res[i]); - var value = res[i]; - const device_name = JSON.parse(value); // Parse the JSON string to an object - console.log(device_name); - var option = document.createElement("option"); - - option.text = device_name.model_name; - option.value = value; - - if (device_name.removable) { - option.text = option.text + " (Removable)"; - removable_devices.push(option); - } else { - option.text = option.text + " (Not Removable)"; - non_removable_devices.push(option); - } - } - - for (var i = 0; i < removable_devices.length; i++) { - diskSelect.appendChild(removable_devices[i]); - } - for (var i = 0; i < non_removable_devices.length; i++) { - diskSelect.appendChild(non_removable_devices[i]); - } - diskSelect.selectedIndex = 0; - }); -} - -function get_root() { - invoke("get_root").then((res) => { - console.log(res); - var status = document.getElementById("status-lebal"); - if (res) { - status.innerHTML = "Running as root"; - } else { - status.innerHTML = "Not running as root"; - } - }); -} - -function write_file_on_click(e) { - console.log(e); - clone_or_flash = "flash"; - open({ - multiple: false, - }).then((res) => { - console.log(res); - var filename = res; - selected_file = filename; - var status = document.getElementById("status-lebal"); - status.innerHTML = `File selected: ${selected_file}`; - }); -} - -function clone_disk_on_click(e) { - console.log(e); - clone_or_flash = "clone"; - save({ - multiple: false, - }).then((res) => { - console.log(res); - selected_file = res; - }); -} - -async function start_process_on_click(e) { - if (!is_writing) { - is_writing = true; - console.log(e); - const command_line = `litho ${clone_or_flash} -f ${selected_file} -d ${selected_disk} -b ${target_size}`;//16777216`; - console.log(command_line); - - invoke("execute", { operation: clone_or_flash, device: selected_disk, image: selected_file, size: target_size }); - - await listen("percent", (event) => { - console.log(event); - var status = document.getElementById("status-lebal"); - status.innerHTML = event.payload.percentage + "%"; - updateProgressBar(event.payload.percentage); - if (percent == 100) { - is_writing = false; - } - }); - } -} - -function select_device_on_click(e) { - if (e.target.value == "default") { - return; - } - device_details = JSON.parse(e.target.value); - selected_disk = device_details.device_name; - target_size = device_details.size; - console.log("selested device:" + device_details); - console.log(selected_disk); -} - - -function updateProgressBar(percentage) { - - const progressBarFill = document.getElementById('progress'); - progressBarFill.value = percentage; +async function greet() { + // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/ + greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value }); } window.addEventListener("DOMContentLoaded", () => { - add_storage_device_names(); - var flast_element = document.getElementById("writeFile"); - flast_element.addEventListener("click", write_file_on_click); - - var clocne_element = document.getElementById("cloneDiskToFile"); - clocne_element.addEventListener("click", clone_disk_on_click); - - var start_elelment = document.getElementById("startProcess"); - start_elelment.addEventListener("click", start_process_on_click); - - var disk_select_element = document.getElementById("diskSelect"); - disk_select_element.addEventListener("change", select_device_on_click); - - get_root(); + greetInputEl = document.querySelector("#greet-input"); + greetMsgEl = document.querySelector("#greet-msg"); + document.querySelector("#greet-form").addEventListener("submit", (e) => { + e.preventDefault(); + greet(); + }); }); - diff --git a/src/styles.css b/src/styles.css index 2ea5202..e57b8ac 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,322 +1,112 @@ -/* Page */ -.page { - position: absolute; - width: auto; - height: auto; - left: 5%; - /*top: 100px;*/ - background-color: rgba(15, 33, 47, 1); - display: flex; - flex-direction: column; - align-items: start; - justify-content: start; - gap: 0px; - padding: 0px 86px; - flex-wrap: nowrap; -} - -/* main_content */ -.main-content { - position: relative; - width: 100%; - height: 100%; - background-color: rgba(15, 33, 47, 1); +.logo.vanilla:hover { + filter: drop-shadow(0 0 2em #ffe21c); } +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; -/* logo-area */ -.logo-area { - position: relative; - width: 853px; - height: 188px; - left: 0px; - background-color: rgba(15, 33, 47, 1); -} + color: #0f0f0f; + background-color: #f6f6f6; -/* logo-img */ -.logo-img { - position: relative; - width: 100px; - height: 100px; - left: 371px; - /* top: 44px;*/ + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; } -/* centeral-controls */ -.centeral-controls { - position: absolute; - width: auto; - height: auto; - left: 0px; - top: 188px; +.container { + margin: 0; + padding-top: 10vh; display: flex; flex-direction: column; - align-items: start; - justify-content: start; - gap: 0px; - padding: 5px 0px; - flex-wrap: nowrap; -} - -/* indicator-row */ -.indicator-row { - position: relative; - width: 842px; - height: 83px; -} - -/* central-control-row */ -.central-control-row { - position: relative; - width: auto; - height: auto; - display: flex; - flex-direction: row; - align-items: center; - justify-content: start; - gap: 0px; - padding: 0px; - flex-wrap: nowrap; -} - -/* flash-indicator */ -.flash-indicator { - position: absolute; - width: 242px; - height: 83px; - left: 600px; - display: flex; - flex-direction: row; - align-items: center; justify-content: center; - gap: 0px; - padding: 17.5px 26px; - flex-wrap: nowrap; -} - -/* flash-icon */ -.flash-icon { - width: 20px; - height: 48px; - color: rgba(130, 155, 200, 1); - font-family: 'sourcesanspro'; - font-style: normal; - font-size: 20px; - font-weight: 400; - line-height: 1.2; - letter-spacing: 0px; - text-decoration: none; - text-transform: none; + text-align: center; } -/* destination-indicator */ -.destination-indicator { - position: absolute; - width: 358px; - height: 83px; - left: 242px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 0px; - padding: 17.5px 35px; - flex-wrap: nowrap; +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: 0.75s; } -/* destination-icon */ -.destination-icon { - width: 20px; - height: 48px; - color: rgba(130, 155, 200, 1); - font-family: 'sourcesanspro'; - font-style: normal; - font-size: 20px; - font-weight: 400; - line-height: 1.2; - letter-spacing: 0px; - text-decoration: none; - text-transform: none; +.logo.tauri:hover { + filter: drop-shadow(0 0 2em #24c8db); } -/* source-indicator */ -.source-indicator { - position: absolute; - width: 238px; - height: 83px; - left: 24px; +.row { display: flex; - flex-direction: row; - align-items: center; justify-content: center; - gap: 0px; - padding: 17.5px 35px; - flex-wrap: nowrap; } -/* source-icon */ -.source-icon { - width: 20px; - height: 48px; - color: rgba(130, 155, 200, 1); - font-family: 'sourcesanspro'; - font-style: normal; - font-size: 20px; - font-weight: 400; - line-height: 1.2; - letter-spacing: 0px; - text-decoration: none; - text-transform: none; +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; } -/* central-control-row */ -.central-control-row { - position: relative; - width: auto; - height: auto; - display: flex; - flex-direction: row; - align-items: center; - justify-content: start; - gap: 0px; - padding: 0px; - flex-wrap: nowrap; +a:hover { + color: #535bf2; } -/* left-text-column */ -.left-text-column { - position: relative; - width: auto; - height: auto; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 0px; - padding: 23px 25px; - flex-wrap: nowrap; - align-self: center; +h1 { + text-align: center; } -/* Flash image */ -.flash-image { - width: 193px; - height: 26px; - color: powderblue; - font-family: 'sourcesanspro'; - font-style: normal; - font-size: 18px; - font-weight: 400; - line-height: 1.2; - letter-spacing: 0px; - text-decoration: none; - text-transform: none; - cursor: pointer; +input, +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + color: #0f0f0f; + background-color: #ffffff; + transition: border-color 0.25s; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } -/* Clone Image */ -.clone-image { - width: 193px; - height: 26px; - color: powderblue; - font-family: 'sourcesanspro'; - font-style: normal; - font-size: 18px; - font-weight: 400; - line-height: 1.2; - letter-spacing: 0px; - text-decoration: none; - text-transform: none; +button { cursor: pointer; } -/* Clone Device */ -.clone-device { - width: 193px; - height: 26px; - color: powderblue; - /*rgba(255, 255, 255, 1);*/ - font-family: 'sourcesanspro'; - font-style: normal; - font-size: 18px; - font-weight: 400; - line-height: 1.2; - letter-spacing: 0px; - text-decoration: none; - text-transform: none; +button:hover { + border-color: #396cd8; } - -/* Select-device-column */ -.select-device-column { - position: relative; - width: 400px; - height: 107px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 0px; - padding: 0px; - flex-wrap: nowrap; +button:active { + border-color: #396cd8; + background-color: #e8e8e8; } -/* Select-device-dropdown */ -.select-device-dropdown { - width: 400px; - height: 38px; - background-color: rgba(75, 69, 152, 1); +input, +button { + outline: none; } -/* start-column */ -.start-column { - position: relative; - width: 243px; - height: 108px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 0px; - padding: 24px 43px; - flex-wrap: nowrap; - align-self: center; -} - - -/* start-button */ -.start-button { - width: 90px; - height: 38px; - /*background-color: rgba(88, 150, 82, 1);*/ +#greet-input { + margin-right: 5px; } -/* Status-row */ -.status-row { - position: absolute; - width: 853px; - height: auto; - left: 0px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 0px; - padding: 0px; - flex-wrap: nowrap; -} +@media (prefers-color-scheme: dark) { + :root { + color: #f6f6f6; + background-color: #2f2f2f; + } -/* progress-bar */ -.progress-bar { - width: 622px; - height: 30px; - /*background-color: rgba(80, 106, 178, 1);*/ - align-self: center; -} + a:hover { + color: #24c8db; + } -.bottom-text { - position: fixed; - left: 50%; - bottom: 20px; - transform: translate(-50%, -50%); - margin: 0 auto; - color: powderblue; + input, + button { + color: #ffffff; + background-color: #0f0f0f98; + } + button:active { + background-color: #0f0f0f69; + } } diff --git a/src/vendor/.keepme b/src/vendor/.keepme new file mode 100644 index 0000000..e69de29