css improvement (1048518b) · Commits · e / devices / eOS Installer

app/src/static/assets/images/icons/survey-very-satisfied.svg

0 → 100644

+3 −0

Original line number	Diff line number	Diff line
		<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none">
		<path d="M29.5 16C29.5 12.5522 28.1304 9.24558 25.6924 6.80761C23.2544 4.36964 19.9478 3 16.5 3C13.0522 3 9.74558 4.36964 7.30761 6.80761C4.86964 9.24558 3.5 12.5522 3.5 16C3.5 19.4478 4.86964 22.7544 7.30761 25.1924C9.74558 27.6304 13.0522 29 16.5 29C19.9478 29 23.2544 27.6304 25.6924 25.1924C28.1304 22.7544 29.5 19.4478 29.5 16ZM0.5 16C0.5 11.7565 2.18571 7.68687 5.18629 4.68629C8.18687 1.68571 12.2565 0 16.5 0C20.7435 0 24.8131 1.68571 27.8137 4.68629C30.8143 7.68687 32.5 11.7565 32.5 16C32.5 20.2435 30.8143 24.3131 27.8137 27.3137C24.8131 30.3143 20.7435 32 16.5 32C12.2565 32 8.18687 30.3143 5.18629 27.3137C2.18571 24.3131 0.5 20.2435 0.5 16ZM8.66875 19.6187C8.40625 18.7687 9.1125 18 10 18H23.2812C24.1688 18 24.875 18.775 24.6125 19.6187C23.5625 23.025 20.3875 25.5 16.6375 25.5C12.8875 25.5 9.7125 23.025 8.66875 19.6187ZM9.525 12C9.525 11.4696 9.73571 10.9609 10.1108 10.5858C10.4859 10.2107 10.9946 10 11.525 10C12.0554 10 12.5641 10.2107 12.9392 10.5858C13.3143 10.9609 13.525 11.4696 13.525 12C13.525 12.5304 13.3143 13.0391 12.9392 13.4142C12.5641 13.7893 12.0554 14 11.525 14C10.9946 14 10.4859 13.7893 10.1108 13.4142C9.73571 13.0391 9.525 12.5304 9.525 12ZM21.525 10C22.0554 10 22.5641 10.2107 22.9392 10.5858C23.3143 10.9609 23.525 11.4696 23.525 12C23.525 12.5304 23.3143 13.0391 22.9392 13.4142C22.5641 13.7893 22.0554 14 21.525 14C20.9946 14 20.4859 13.7893 20.1108 13.4142C19.7357 13.0391 19.525 12.5304 19.525 12C19.525 11.4696 19.7357 10.9609 20.1108 10.5858C20.4859 10.2107 20.9946 10 21.525 10Z" fill="#00C95C"/>
		</svg>
		No newline at end of file

app/src/static/assets/languages/en.json

+28 −26

Original line number	Diff line number	Diff line
		@@ -15,43 +15,45 @@
		"connect-your-phone-instructions-notes": "Note: ’USB debugging’ is required for automatic device detection to work. If you haven't enabled it yet, we will help you out in the next steps.",
		"device-detection": "Device detection",
		"device-detection-detected": "A device has been detected.",
		"navigator-detection": "Navigator detection",
		"navigator-not-supported": "Your navigator is not supported",
		"navigator-not-supported-instructions": "You can use the following browsers: Microsoft Edge, Safari, Opera, Chrome",
		"device-detection-instructions-1": "Connect your device with your navigator by clicking on the button bellow.",
		"device-detection-instructions-2": "A pop-up will appear on your phone. Check 'always allow from this computer'",
		"dissatisfied": "Dissatisfied",
		"donate": "Donate",
		"installation-complete": "The installation is complete!",
		"installation-complete-instructions-1": "Congrats! While your phone is booting, you should see the logo below. This takes time, please be patient.",
		"installation-complete-instructions-2": "Tip: follow the instructions on your phone to set up your device. You can now add your files back to your phone.",
		"enable-usb-file-transfer": "Enable USB file transfer",
		"enable-usb-file-transfer-instructions-1": "Still inside the ‘Developer options’, scroll down to find ’Default USB configuration’ and top on it.",
		"enable-usb-file-transfer-instructions-2": "Now select the ’File Transfer’ option (on some devices it is called 'MTP mode (media transfer protocol)').",
		"erase-data-instructions-1": "1. Select Factory reset",
		"erase-data-instructions-2": "2. Select Format data / Factory reset option",
		"erase-data-instructions-3": "3. Next screen will display a warning that this action cannot be undone",
		"erase-data-instructions-4": "4. Select Format data to proceed or Cancel if you want to go back",
		"erase-data-instructions-5": "5. If you selected Format data, the format process will complete",
		"erase-data-instructions-6": "6. Display will now return to the Factory Reset screen",
		"follow-the-examples-below": "Follow the examples below:",
		"go-to-apply-update-instructions-1": "1. Select Apply Update",
		"go-to-apply-update-instructions-2": "2. Apply update from adb",
		"go-to-apply-update-instructions-3": "3. The device is now in sideload mode",
		"help": "Help",
		"device-detection-instructions-1": "Connect your device with your navigator by clicking on the button bellow.",
		"device-detection-instructions-2": "A pop-up will appear on your phone. Check 'always allow from this computer'",
		"help-us-improve-the-tool-instructions-1": "Please, rate your experience with the Easy Installer.",
		"help-us-improve-the-tool": "Help us improve the tool",
		"help-us-improve-the-tool-instructions-2": "Do you have any thoughts on how to improve this software?",
		"i-already-have-an-account": "I already have an account",
		"installation-complete": "The installation is complete!",
		"installation-complete-instructions-1": "Congrats! While your phone is booting, you should see the logo below. This takes time, please be patient.",
		"installation-complete-instructions-2": "Tip: follow the instructions on your phone to set up your device. You can now add your files back to your phone.",
		"let-s-get-started": "Let's get started",
		"murena-cloud-account": "Murena Cloud account",
		"sign-up-free": "Sign up FREE",
		"i-already-have-an-account": "I already have an account",
		"murena-cloud-account-instructions": "Keep your data safe and sync this device with your personal Murena Cloud account. 1GB free and paid plans available for more storage.",
		"navigator-detection": "Navigator detection",
		"navigator-not-supported": "Your navigator is not supported",
		"navigator-not-supported-instructions": "You can use the following browsers: Microsoft Edge, Safari, Opera, Chrome",
		"neutral": "Neutral",
		"next": "Next",
		"satisfied": "Satisfied",
		"sign-up-free": "Sign up FREE",
		"skip": "Skip",
		"start": "Start",




		"go-to-apply-update-instructions-1": "1. Select Apply Update",
		"go-to-apply-update-instructions-2": "2. Apply update from adb",
		"go-to-apply-update-instructions-3": "3. The device is now in sideload mode",

		"erase-data-instructions-1": "1. Select Factory reset",
		"erase-data-instructions-2": "2. Select Format data / Factory reset option",
		"erase-data-instructions-3": "3. Next screen will display a warning that this action cannot be undone",
		"erase-data-instructions-4": "4. Select Format data to proceed or Cancel if you want to go back",
		"erase-data-instructions-5": "5. If you selected Format data, the format process will complete",
		"erase-data-instructions-6": "6. Display will now return to the Factory Reset screen",
		"this-might-take-some-time-please-be-patient": "This might take some time please be patient",
		"help-us-improve-the-tool-instructions-1": "Please, rate your experience with the Easy Installer.",
		"help-us-improve-the-tool-instructions-2": "Do you have any thoughts on how to improve this software?"
		"very-dissatisfied": "Very Dissatisfied",
		"very-satisfied": "Very Satisfied",
		"send-to-e-team": "Send to /e/Team"
		}
		No newline at end of file

app/src/static/css/styles.css

+83 −11

Original line number	Diff line number	Diff line
		@@ -63,6 +63,7 @@ html, body {
		margin: 0px;
		background: var(--background-color);
		font-family: 'Century Gothic', 'Lato';
		font-size : 16px;
		}

		#background {
		@@ -139,38 +140,55 @@ html, body {
		display: block;
		}

		.logo-ctn {
		max-width: 780px;
		margin:auto;
		display: flex;
		gap: 16px;
		color : #F7F7F7;
		align-items: center;
		}
		/* <CARD> */
		.card {
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
		padding: 15px;
		max-width: 768px;
		max-width: 780px;
		border-radius: 6px;
		background: var(--white);
		margin: 50px auto auto;
		margin: 25px auto 50px auto;
		padding: 32px;
		}
		.card-title {
		.card-header {
		font-size: 28px;
		font-family: 'Century Gothic Bold';
		padding-bottom: 32px;
		}
		.card-footer {
		text-align : right;
		padding-top: 32px;
		}
		/* </CARD> */

		/* <let-s-get-started> */
		.let-s-get-started .instruction-ctn {
		padding : 12px 0;
		padding : 16px 0;
		display : flex;
		align-items: center;
		gap : 24px;
		}
		.let-s-get-started .instruction-img {
		width: 32px;
		height: 32px;
		.let-s-get-started .instruction-ctn {
		padding : 16px 0;
		display : flex;
		align-items: center;
		gap : 24px;
		}
		.let-s-get-started .instruction-title {
		font-size: 18px;
		font-weight: 600;
		padding-bottom: 8px;
		}
		.let-s-get-started .instruction-img {
		width: 32px;
		height: 32px;
		width: 42px;
		height: 42px;
		}
		/* </let-s-get-started> */
		.device-detection .instruction-img{
		@@ -181,3 +199,57 @@ html, body {
		max-width : 320px;
		text-align: center;
		}

		.help-us-improve-the-tool p {
		padding-top: 16px;
		padding-bottom: 16px;
		}

		.help-us-improve-the-tool .instructions-ctn {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 22px;
		text-align:center;
		font-size:14px;
		}
		.help-us-improve-the-tool .instruction-ctn.very-dissatisfied {
		color : #F35D47;
		border-color : #F35D47;
		}
		.help-us-improve-the-tool .instruction-ctn.dissatisfied {
		color : #F49138;
		border-color : #F49138;
		}
		.help-us-improve-the-tool .instruction-ctn.neutral {
		color : #f5be05;
		border-color : #f5be05;
		}
		.help-us-improve-the-tool .instruction-ctn.satisfied {
		color : #88d723;
		border-color : #88d723;
		}
		.help-us-improve-the-tool .instruction-ctn.very-satisfied {
		color : #00C95C;
		border-color : #00C95C;
		}
		.help-us-improve-the-tool .instruction-ctn {
		padding: 10px 12px ;
		border-radius : 8px;
		border-width : 1px;
		border-style: solid;
		}
		.help-us-improve-the-tool .instruction-img {
		width : 28px;
		height : 28px;
		padding: 6px 8px ;
		}
		.help-us-improve-the-tool .thoughts {
		width:100%;
		height:150px;
		resize: none;
		border-color:#C6CBDD;
		}
		.help-us-improve-the-tool .thoughts:focus {
		outline: none !important;
		border-color:#C6CBDD;
		}
		No newline at end of file

app/src/static/index.html

+54 −25

Original line number	Diff line number	Diff line
		@@ -29,7 +29,7 @@
		</div>

		<div id="navigator-detection" class="navigator-detection card inactive">
		<div class="card-title" data-translate="navigator-detection"></div>
		<div class="card-header" data-translate="navigator-detection"></div>
		<div class="card-body">
		<div class="instruction-ctn">
		<img class="instruction-img" src="assets/images/icons/critical-error.svg">
		@@ -38,9 +38,12 @@
		</div>
		</div>
		</div>

		<div id="let-s-get-started" class="let-s-get-started card inactive">
		<div class="card-title" data-translate="let-s-get-started"></div>
		<div class="logo-ctn">
		<img class="instruction-img" src="assets/images/icons/logo.png">
		<h1 class="title">/e/OS Easy Installer</h1>
		</div>
		<div id="let-s-get-started" class="let-s-get-started card">
		<div class="card-header" data-translate="let-s-get-started"></div>
		<div class="card-body">
		<div class="instruction-ctn">
		<img class="instruction-img" src="assets/images/icons/free-up-some-time.svg">
		@@ -84,7 +87,7 @@
		</div>

		<div id="check-your-android-version" class="card inactive">
		<div class="card-title" data-translate="check-update-android-version"></div>
		<div class="card-header" data-translate="check-update-android-version"></div>
		<div class="card-body">
		<div class="warning">
		<div data-translate="check-update-android-version-caution"></div>
		@@ -99,7 +102,7 @@
		</div>

		<div id="connect-your-phone" class="card inactive">
		<div class="card-title" data-translate="connect-your-phone"></div>
		<div class="card-header" data-translate="connect-your-phone"></div>
		<div class="card-body">
		<p data-translate="connect-your-phone-instructions"></p>
		<img class="instruction-img" src="assets/images/illustrations/connect-your-phone.png">
		@@ -110,7 +113,7 @@
		</div>
		</div>
		<div id="activate-developer-options" class="card inactive">
		<div class="card-title" data-translate="activate-developer-options"></div>
		<div class="card-header" data-translate="activate-developer-options"></div>
		<div class="card-body">
		<p data-translate="activate-developer-options-instructions-1"></p>
		<img class="instruction-img" src="assets/images/illustrations/activate-developer-options-1.png">
		@@ -122,7 +125,7 @@
		</div>
		</div>
		<div id="activate-usb-debugging" class="card inactive">
		<div class="card-title" data-translate="activate-usb-debugging"></div>
		<div class="card-header" data-translate="activate-usb-debugging"></div>
		<div class="card-body">
		<p data-translate="activate-usb-debugging-instructions-1"></p>
		<img class="instruction-img" src="assets/images/illustrations/activate-usb-debugging-1.png">
		@@ -134,7 +137,7 @@
		</div>
		</div>
		<div id="enable-usb-file-transfer" class="card inactive">
		<div class="card-title" data-translate="enable-usb-file-transfer"></div>
		<div class="card-header" data-translate="enable-usb-file-transfer"></div>
		<div class="card-body">
		<p data-translate="enable-usb-file-transfer-instructions-1"></p>
		<img class="instruction-img" src="assets/images/illustrations/enable-usb-file-transfer-1.png">
		@@ -147,7 +150,7 @@
		</div>

		<div id="device-detection" class="device-detection card inactive">
		<div class="card-title" data-translate="device-detection"></div>
		<div class="card-header" data-translate="device-detection"></div>
		<div class="card-body">
		<p data-translate="device-detection-instructions-1"></p>
		<button data-translate="connect" onclick="VIEW.executeStep(this, 'device-detection')"></button>
		@@ -162,7 +165,7 @@
		</div>

		<div id="downloading" class="card inactive">
		<div class="card-title" data-translate="Downloading /e/OS"></div>
		<div class="card-header" data-translate="Downloading /e/OS"></div>
		<div class="card-body">
		<p data-translate="this-might-take-some-time-please-be-patient"></p>
		<progress id="downloading-progress-bar" max="100" value="0"></progress>
		@@ -171,13 +174,13 @@
		</div>
		</div>
		<div id="connect-bootloader" class="card inactive">
		<div class="card-title" data-translate="connect-bootloader"></div>
		<div class="card-header" data-translate="connect-bootloader"></div>
		<div class="card-body">
		<button data-translate="next" class="" onclick="VIEW.executeStep(this, 'connect-bootloader')"></button>
		</div>
		</div>
		<div id="unlocking" class="card inactive">
		<div class="card-title" data-translate="Unlocking"></div>
		<div class="card-header" data-translate="Unlocking"></div>
		<div class="card-body">
		<button data-translate="next" class="next" onclick="VIEW.executeStep(this, 'unlocking')"></button>
		</div>
		@@ -186,7 +189,7 @@
		</div>
		</div>
		<div id="reboot-manually-to-bootloader" class="card inactive">
		<div class="card-title" data-translate="repeat-the-following-step"></div>
		<div class="card-header" data-translate="repeat-the-following-step"></div>
		<div class="card-body">
		<ul>
		<li data-translate="turn-off-your-phone"></li>
		@@ -198,14 +201,14 @@
		</div>
		</div>
		<div id="flashing" class="card inactive">
		<div class="card-title" data-translate="installing"></div>
		<div class="card-header" data-translate="installing"></div>
		<div class="card-body">
		<p data-translate="this-might-take-some-time-please-be-patient"></p>
		<progress id="installing-progress-bar" max="100" value="0"></progress>
		</div>
		</div>
		<div id="erase-data-recovery" class="card inactive">
		<div class="card-title" data-translate="restart-to-recovery"></div>
		<div class="card-header" data-translate="restart-to-recovery"></div>
		<div class="card-body">
		<p data-translate="erase-data-instructions-1"></p>
		<p data-translate="erase-data-instructions-2"></p>
		@@ -219,7 +222,7 @@
		</div>
		</div>
		<div id="go-to-apply-update" class="card inactive">
		<div class="card-title" data-translate="go-to-sideload"></div>
		<div class="card-header" data-translate="go-to-sideload"></div>
		<div class="card-body">
		<p data-translate="go-to-apply-update-instructions-1"></p>
		<p data-translate="go-to-apply-update-instructions-2"></p>
		@@ -230,7 +233,7 @@
		</div>
		</div>
		<div id="sideload" class="card inactive">
		<div class="card-title" data-translate="sideload"></div>
		<div class="card-header" data-translate="sideload"></div>
		<div class="card-body">
		<p data-translate="sideload-instruction"></p>
		</div>
		@@ -239,7 +242,7 @@
		</div>
		</div>
		<div id="locking" class="card inactive">
		<div class="card-title" data-translate="locking"></div>
		<div class="card-header" data-translate="locking"></div>
		<div class="card-body">
		click to lock
		<button data-translate="next" class="locking" onclick="VIEW.executeStep(this, 'locking')"></button>
		@@ -249,7 +252,7 @@
		</div>
		</div>
		<div id="murena-cloud-account" class="card inactive">
		<div class="card-title" data-translate="murena-cloud-account"></div>
		<div class="card-header" data-translate="murena-cloud-account"></div>
		<div class="card-body">
		<img class="instruction-img" src="assets/images/illustrations/murena-cloud-account.png">
		<p data-translate="murena-cloud-account-instructions"></p>
		@@ -259,7 +262,7 @@
		</div>
		</div>
		<div id="installation-complete" class="card inactive">
		<div class="card-title" data-translate="installation-complete"></div>
		<div class="card-header" data-translate="installation-complete"></div>
		<div class="card-body">
		<p data-translate="installation-complete-instructions-1"></p>
		<img class="instruction-img" src="assets/images/illustrations/installation-complete.png">
		@@ -268,13 +271,39 @@
		<div class="card-footer">
		</div>
		</div>
		<div id="help-us-improve-the-tool" class="card inactive">
		<div class="card-title" data-translate="help-us-improve-the-tool"></div>
		<div id="help-us-improve-the-tool" class="help-us-improve-the-tool card inactive">
		<div class="card-header" data-translate="help-us-improve-the-tool"></div>
		<div class="card-body">
		<form>
		<p data-translate="help-us-improve-the-tool-instructions-1"></p>
		<div class="instructions-ctn">
		<div class="instruction-ctn very-dissatisfied">
		<img class="instruction-img" src="assets/images/icons/survey-very-dissatisfied.svg">
		<div data-translate="very-dissatisfied"></div>
		</div>
		<div class="instruction-ctn dissatisfied">
		<img class="instruction-img" src="assets/images/icons/survey-dissatisfied.svg">
		<div data-translate="dissatisfied"></div>
		</div>
		<div class="instruction-ctn neutral">
		<img class="instruction-img" src="assets/images/icons/survey-neutral.svg">
		<div data-translate="neutral"></div>
		</div>
		<div class="instruction-ctn satisfied">
		<img class="instruction-img" src="assets/images/icons/survey-satisfied.svg">
		<div data-translate="satisfied"></div>
		</div>
		<div class="instruction-ctn very-satisfied">
		<img class="instruction-img" src="assets/images/icons/survey-very-satisfied.svg">
		<div data-translate="very-satisfied"></div>
		</div>
		</div>
		<p data-translate="help-us-improve-the-tool-instructions-2"></p>
		<textarea class="thoughts"></textarea>
		</form>
		</div>
		<div class="card-footer">
		<button data-translate="send-to-e-team" class="next"></button>
		</div>
		</div>
		</div>

app/src/static/js/controller.manager.js

+2 −2

Original line number	Diff line number	Diff line
		@@ -19,14 +19,14 @@ export class Controller {
		new Step("device-detection", 'connect adb', true),

		];
		this.currentIndex = 6;
		this.currentIndex = 0;//6;
		}


		async init() {
		this.deviceManager = new DeviceManager();
		await this.deviceManager.init();
		VIEW.onStepStarted(this.steps[this.currentIndex]);
		//VIEW.onStepStarted(this.steps[this.currentIndex]);
		}

		async next() {