Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 1c13cfec authored by Paula's avatar Paula
Browse files

prettier

parent 1048518b

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

+5 −3
Original line number Diff line number Diff line
@@ -11,12 +11,14 @@ 
  "check-update-android-version": "Check & update your Android version",

  "check-update-android-version-caution": "<b>Caution</b>: before proceeding with the installation, verify if the latest Android firmware is available for your device.",

  "connect-your-phone": "Connect your phone",

  "connect": "Connect",

  "connect-your-phone-instructions": "Connect your phone to your computer with a USB cable. We will automatically detect your phone to install /e/OS.",

  "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.",

  "connect-your-phone-instructions-notes": "<b>Note</b>: ’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.",

  "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'",

  "device-detection-instructions-1": "We'll now connect your phone to the browser. When this pop-up appears, select your telephone from the list.",

  "device-detection-instructions-2": "Click on the button below to start the connection.",

  "device-detection-instructions-3": "A pop-up window should have appeared on your phone. Check 'always allow from this computer' before pressing ok.",

  "dissatisfied": "Dissatisfied",

  "donate": "Donate",

  "enable-usb-file-transfer": "Enable USB file transfer",

app/src/static/css/styles.css

+15 −8
Original line number Diff line number Diff line 
@font-face {

    font-family: "Century Gothic";

    src: url("../assets/fonts/century-gothic/Century-Gothic.ttf") format("truetype");

    font-weight: 400;

    font-style: normal;

}

@font-face {

    font-family: "Century Gothic Bold";

    src: url("../assets/fonts/century-gothic/Century-Gothic.ttf") format("truetype");

    font-weight: 600;

    font-style: normal;

}

:root {

    --top-banner-color: #191823;
@@ -17,6 +13,7 @@ 
    --text-color: #111111;

    --info-color: #027ffe;

    --base-color: #dedee5;

    --secondary-color: #898989;

    --base-color-alt: #f5f5f7;

    --blue: #2a7ae2;

    --white: white;
@@ -39,14 +36,23 @@ 
    background: var(--info-background-color);

    color: var(--info-text-color);

}



.secondary {

    color : var(--secondary-color);

}

.text-center {

    text-align: center;

}

button {

    border-radius: 100px;

    padding: 0.4rem 1.5rem;

    cursor: pointer;

    transition: background-color 0.25s ease-in-out;

}



button.success {

    background: var(--success-color);

    color: var(--button-text-color);

    border: none;

}

button.next {

    background: var(--button-color);

    color: var(--button-text-color);
@@ -159,8 +165,9 @@ html, body { 
}

.card-header {

    font-size: 28px;

    font-family: 'Century Gothic Bold';

    font-family: 'Century Gothic';

    padding-bottom: 32px;

    font-weight: 600;

}

.card-footer {

    text-align : right;

app/src/static/index.html

+272 −240
Original line number Diff line number Diff line
@@ -49,35 +49,45 @@ 
                <img class="instruction-img" src="assets/images/icons/free-up-some-time.svg">

                <div>

                    <div class="instruction-title">1. Free up some time</div>

                        <div class="instruction-text">The complete installation process requires around 1 hour. Be patient!</div>

                    <div class="instruction-text">The complete installation process requires around 1 hour. Be

                        patient!

                    </div>

                </div>

            </div>

            <div class="instruction-ctn">

                <img class="instruction-img" src="assets/images/icons/free-up-some-disk-space.svg">

                <div>

                    <div class="instruction-title">2. Free up some disk space</div>

                        <div class="instruction-text">You'll need to have at least 6GB of free space in your computer to download and install /e/OS. Make sure you have enough free disk space.</div>

                    <div class="instruction-text">You'll need to have at least 6GB of free space in your computer to

                        download and install /e/OS. Make sure you have enough free disk space.

                    </div>

                </div>

            </div>

            <div class="instruction-ctn">

                <img class="instruction-img" src="assets/images/icons/charge-your-phone.svg">

                <div>

                    <div class="instruction-title">3. Charge your phone</div>

                        <div class="instruction-text">Before installing /e/OS, ensure your phone has at least 50% battery charge.</div>

                    <div class="instruction-text">Before installing /e/OS, ensure your phone has at least 50% battery

                        charge.

                    </div>

                </div>

            </div>

            <div class="instruction-ctn">

                <img class="instruction-img" src="assets/images/icons/back-up-your-data.svg">

                <div>

                    <div class="instruction-title">4. Back up your data</div>

                        <div class="instruction-text">All data will be erased from your smartphone during the installation, so we recommend that you back up your data.</div>

                    <div class="instruction-text">All data will be erased from your smartphone during the installation,

                        so we recommend that you back up your data.

                    </div>

                </div>

            </div>

            <div class="instruction-ctn">

                <img class="instruction-img" src="assets/images/icons/grab-a-USB-data-cable.svg">

                <div>

                    <div class="instruction-title">5. Grab a USB data cable</div>

                        <div class="instruction-text">A working USB data cable is required. Power cables don't transfer date and will not work! We recommend USB 3.x or newer.</div>

                    <div class="instruction-text">A working USB data cable is required. Power cables don't transfer date

                        and will not work! We recommend USB 3.x or newer.

                    </div>

                </div>

            </div>

        </div>
@@ -105,8 +115,10 @@ 
        <div class="card-header" data-translate="connect-your-phone"></div>

        <div class="card-body">

            <p data-translate="connect-your-phone-instructions"></p>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/connect-your-phone.png">

                <p data-translate="connect-your-phone-instructions-notes"></p>

            </div>

            <p class="secondary" data-translate="connect-your-phone-instructions-notes"></p>

        </div>

        <div class="card-footer">

            <button data-translate="next" class="next" onclick="VIEW.onNext(this)"></button>
@@ -116,10 +128,14 @@ 
        <div class="card-header" data-translate="activate-developer-options"></div>

        <div class="card-body">

            <p data-translate="activate-developer-options-instructions-1"></p>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/activate-developer-options-1.png">

            </div>

            <p data-translate="activate-developer-options-instructions-2"></p>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/activate-developer-options-2.png">

            </div>

        </div>

        <div class="card-footer">

            <button data-translate="next" class="next" onclick="VIEW.onNext(this)"></button>

        </div>
@@ -128,10 +144,14 @@ 
        <div class="card-header" data-translate="activate-usb-debugging"></div>

        <div class="card-body">

            <p data-translate="activate-usb-debugging-instructions-1"></p>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/activate-usb-debugging-1.png">

            </div>

            <p data-translate="activate-usb-debugging-instructions-2"></p>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/activate-usb-debugging-2.png">

            </div>

        </div>

        <div class="card-footer">

            <button data-translate="next" class="next" onclick="VIEW.onNext(this)"></button>

        </div>
@@ -140,10 +160,14 @@ 
        <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>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/enable-usb-file-transfer-1.png">

            </div>

            <p data-translate="enable-usb-file-transfer-instructions-2"></p>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/enable-usb-file-transfer-2.png">

            </div>

        </div>

        <div class="card-footer">

            <button data-translate="next" class="next" onclick="VIEW.onNext(this)"></button>

        </div>
@@ -153,11 +177,18 @@ 
        <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>

                <p data-translate="device-detection-instructions-2"></p>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/allow-usb-debugging-1.png">

            </div>

            <p data-translate="device-detection-instructions-2"></p>

            <div class="text-center">

                <button data-translate="connect" class="success" onclick="VIEW.executeStep(this, 'device-detection')"></button>

            </div>

            <p data-translate="device-detection-instructions-3"></p>

            <div class="text-center">

                <img class="instruction-img" src="assets/images/illustrations/allow-usb-debugging-2.png">

            </div>

        </div>

        <div class="card-body inactive">

            <p data-translate="device-detection-detected"></p>

            <img class="instruction-img" src="assets/images/icons/check-success.svg">
@@ -312,6 +343,7 @@ 
    function sleep(ms) {

        return new Promise(resolve => setTimeout(resolve, ms));

    }



    var VIEW = new ViewManager();

    var exports = {};

    document.addEventListener('DOMContentLoaded', async () => {