diff --git a/docs/wallet/wallet-screen/display-screen.md b/docs/wallet/wallet-screen/altme-display-screen.md similarity index 73% rename from docs/wallet/wallet-screen/display-screen.md rename to docs/wallet/wallet-screen/altme-display-screen.md index a948803..20c9328 100644 --- a/docs/wallet/wallet-screen/display-screen.md +++ b/docs/wallet/wallet-screen/altme-display-screen.md @@ -1,12 +1,12 @@ -# Discover +# Altme - Discover Updated the 14th of October 2024. -
-
- Talao Discover Screen +
+
+ Altme Discover Screen
-
+

This is the Discover screen of the wallet to access issuers.

  1. My Wallet: to access the main screen of the wallet with all verifiable credentials represented as cards.
    2. diff --git a/docs/wallet/wallet-screen/altme-settings-menu-screen.md b/docs/wallet/wallet-screen/altme-settings-menu-screen.md new file mode 100644 index 0000000..3b1c465 --- /dev/null +++ b/docs/wallet/wallet-screen/altme-settings-menu-screen.md @@ -0,0 +1,24 @@ +# Altme - Settings + +Updated the 14th of October 2024. + +
    +
    + Talao Settings Screen +
    +
    +

    This is the Settings menu of the wallet.

    +
      +
    1. Wallet Profiles: allows you to select one of the embedded ecosystem profiles.
      2. +
    2. Wallet Security: allows you to change the PIN code, use biometrics, show the wallet recovery phrase, manage user consent, backup, and restore features.
      3. +
    3. Wallet Settings: allows you to change the language and themes.
      4. +
    4. Blockchain Settings : allows you to manage accounts, connected dApps & Networks
      5. +
    5. Self-Sovereign identity (SSI) : allows you to manage your Decentralized ID, backup or rester credentials
      6. +
    6. Developer Mode: allows advanced users to access raw data and protocol requests and responses.
      7. +
    7. Help center: access to the help center and FAQs
      8. +
    8. About: access the terms and conditions document.
      9. +
    9. Reset: resets the wallet, deleting all credentials and private keys with no option to undo if no backup is available.
      10. +
    +

    The menu may vary depending on the configuration of the wallet.

    +
    +
    diff --git a/docs/wallet/wallet-screen/wallet-screen.md b/docs/wallet/wallet-screen/altme-wallet-screen.md similarity index 82% rename from docs/wallet/wallet-screen/wallet-screen.md rename to docs/wallet/wallet-screen/altme-wallet-screen.md index c099ace..22c4bc1 100644 --- a/docs/wallet/wallet-screen/wallet-screen.md +++ b/docs/wallet/wallet-screen/altme-wallet-screen.md @@ -1,12 +1,12 @@ -# My wallet +# Altme - My wallet Updated the 14th of October 2024. -
    -
    - Altme Wallet Main Screen +
    +
    + Altme Wallet Main Screen
    -
    +

    This is the main screen of the wallet where all verifiable credentials stored in the wallet are displayed.

    1. My Wallet: to access the main screen of the wallet (this screen) with all verifiable credentials represented as cards.
      2. diff --git a/docs/wallet/wallet-screen/talao-display-screen.md b/docs/wallet/wallet-screen/talao-display-screen.md new file mode 100644 index 0000000..36039f8 --- /dev/null +++ b/docs/wallet/wallet-screen/talao-display-screen.md @@ -0,0 +1,24 @@ +# Talao - Discover + +Updated the 14th of October 2024. + +
      +
      + Talao Discover Screen +
      +
      +

      This is the Discover screen of the wallet to access issuers.

      +
        +
      1. My Wallet: to access the main screen of the wallet with all verifiable credentials represented as cards.
        2. +
      2. Discover: to access the issuer marketplace of the wallet to get all the issuer links.
        3. +
      3. Scan: to open the wallet scanner.
        4. +
      4. Search: to search any cards from the discover
        5. +
      5. Settings: to access the settings menu.
        6. +
      6. Issuer links.
        7. +
      7. Issuer links.
        8. +
      8. Issuer links.
        9. +
      9. Settings: to access the settings menu.
        10. +
      +

      The issuer links depend on the configuration of the wallet.

      +
      +
      diff --git a/docs/wallet/wallet-screen/settings-menu-screen.md b/docs/wallet/wallet-screen/talao-settings-menu-screen.md similarity index 81% rename from docs/wallet/wallet-screen/settings-menu-screen.md rename to docs/wallet/wallet-screen/talao-settings-menu-screen.md index 717aa2f..6e1e2d3 100644 --- a/docs/wallet/wallet-screen/settings-menu-screen.md +++ b/docs/wallet/wallet-screen/talao-settings-menu-screen.md @@ -1,12 +1,12 @@ -# Settings +# Talao - Settings Updated the 14th of October 2024. -
      -
      - Talao Settings Screen +
      +
      + Talao Settings Screen
      -
      +

      This is the Settings menu of the wallet.

      1. Wallet Profiles: allows you to select one of the embedded ecosystem profiles.
        2. diff --git a/docs/wallet/wallet-screen/talao-wallet-screen.md b/docs/wallet/wallet-screen/talao-wallet-screen.md new file mode 100644 index 0000000..819431d --- /dev/null +++ b/docs/wallet/wallet-screen/talao-wallet-screen.md @@ -0,0 +1,23 @@ +# Talao - My wallet + +Updated the 14th of October 2024. + +
        +
        + Altme Wallet Main Screen +
        +
        +

        This is the main screen of the wallet where all verifiable credentials stored in the wallet are displayed.

        +
          +
        1. My Wallet: to access the main screen of the wallet (this screen) with all verifiable credentials represented as cards.
          2. +
        2. Discover: to access the issuer marketplace of the wallet to get all the issuer links.
          3. +
        3. Scan button.
          4. +
        4. Search: to search any cards from the discover
          5. +
        5. Settings: to access the settings menu.
          6. +
        6. Your contact information
          7. +
        7. Add cards: to access the issuer marketplace.
          8. +
        8. Add cards: to access the issuer marketplace.
          9. +
        9. Settings: to access the settings menu.
          10. +
        +
        +
        diff --git a/sidebars.ts b/sidebars.ts index 5cb0696..5fe2ae0 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -22,9 +22,12 @@ const sidebars: SidebarsConfig = { type: 'category', label: 'Wallet Screens', items: [ - 'wallet/wallet-screen/wallet-screen', - 'wallet/wallet-screen/display-screen', - 'wallet/wallet-screen/settings-menu-screen', + 'wallet/wallet-screen/altme-wallet-screen', // add nft + coins + 'wallet/wallet-screen/altme-display-screen', + 'wallet/wallet-screen/altme-settings-menu-screen', + 'wallet/wallet-screen/talao-wallet-screen', + 'wallet/wallet-screen/talao-display-screen', + 'wallet/wallet-screen/talao-settings-menu-screen', ], }, 'wallet/wallet-profiles', diff --git a/src/css/custom.css b/src/css/custom.css index df1698b..6f6d8db 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -28,3 +28,146 @@ --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + +/* Custom responsive styles for wallet screens */ +.responsive-container { + display: flex; + align-items: center; + margin-bottom: 20px; + /* flex-direction: row-reverse; */ +} + +/* DIsplay screen */ + +.responsive-image-display { + flex: 0 0 30%; + margin-left: 20px; + margin-bottom: 80px; +} + +.responsive-text-display { + flex: 0 0 70%; + margin-left: 20px; +} + +/* Mobile: 50% image, 50% text */ +@media (max-width: 768px) { + .responsive-image-display { + flex: 0 0 60%; + margin-left: -5px; + margin-bottom: 900px; + } + + .responsive-text-display { + flex: 0 0 40%; + margin-left: 10px; + } +} + +/* Settings screen */ + +.responsive-image-setting { + flex: 0 0 30%; + margin-left: 20px; + margin-bottom: -55px; +} + +.responsive-text-setting { + flex: 0 0 70%; + margin-left: 20px; +} + +/* Mobile: 50% image, 50% text */ +@media (max-width: 768px) { + .responsive-image-setting { + flex: 0 0 60%; + margin-left: -5px; + margin-bottom: 1340px; + } + + .responsive-text-setting { + flex: 0 0 40%; + margin-left: 10px; + } +} + +/* Wallet screen */ + +.responsive-image-wallet { + flex: 0 0 30%; + /* margin-left: 20px; */ + margin-bottom: 170px; +} + +.responsive-text-wallet { + flex: 0 0 70%; + margin-left: 20px; +} + +/* Mobile: 50% image, 50% text */ +@media (max-width: 768px) { + .responsive-image-wallet { + flex: 0 0 60%; + margin-left: -5px; + margin-bottom: 1600px; + } + + .responsive-text-wallet { + flex: 0 0 40%; + margin-left: 7px; + } +} + +/* Talao discover */ + +.responsive-image-display-talao { + flex: 0 0 30%; + margin-left: 20px; + margin-bottom: -20px; +} + +.responsive-text-display-talao { + flex: 0 0 70%; + margin-left: 20px; +} + +/* Mobile: 50% image, 50% text */ +@media (max-width: 768px) { + .responsive-image-display-talao { + flex: 0 0 60%; + margin-left: -5px; + margin-bottom: 650px; + } + + .responsive-text-display-talao { + flex: 0 0 40%; + margin-left: 10px; + } +} + +/* Talao wallet */ + +.responsive-image-wallet-talao { + flex: 0 0 30%; + margin-left: 20px; + margin-bottom: -20px; +} + +.responsive-text-wallet-talao { + flex: 0 0 70%; + margin-left: 20px; +} + +/* Mobile: 50% image, 50% text */ +@media (max-width: 768px) { + .responsive-image-wallet-talao { + flex: 0 0 60%; + margin-left: -5px; + margin-bottom: 750px; + } + + .responsive-text-wallet-talao { + flex: 0 0 40%; + margin-left: 10px; + } +} \ No newline at end of file diff --git a/static/img/ssi_screen/altme_discover.png b/static/img/ssi_screen/altme_discover.png new file mode 100644 index 0000000..8587628 Binary files /dev/null and b/static/img/ssi_screen/altme_discover.png differ diff --git a/static/img/ssi_screen/altme_settings.png b/static/img/ssi_screen/altme_settings.png new file mode 100644 index 0000000..18ec6af Binary files /dev/null and b/static/img/ssi_screen/altme_settings.png differ diff --git a/static/img/ssi_screen/altme_wallet_coins.png b/static/img/ssi_screen/altme_wallet_coins.png new file mode 100644 index 0000000..13ca319 Binary files /dev/null and b/static/img/ssi_screen/altme_wallet_coins.png differ diff --git a/static/img/ssi_screen/altme_wallet_nft.png b/static/img/ssi_screen/altme_wallet_nft.png new file mode 100644 index 0000000..83a26d8 Binary files /dev/null and b/static/img/ssi_screen/altme_wallet_nft.png differ diff --git a/static/img/ssi_screen/talao_discover.png b/static/img/ssi_screen/talao_discover.png index 8587628..5c58cf2 100644 Binary files a/static/img/ssi_screen/talao_discover.png and b/static/img/ssi_screen/talao_discover.png differ diff --git a/static/img/ssi_screen/talao_wallet.png b/static/img/ssi_screen/talao_wallet.png new file mode 100644 index 0000000..b5e3944 Binary files /dev/null and b/static/img/ssi_screen/talao_wallet.png differ