feat: install wallet screen

toncenter · Dec 7, 2023 · e569d7c · e569d7c
1 parent 2f41edf
commit e569d7c
Show file tree

Hide file tree

Showing 13 changed files with 824 additions and 64 deletions.
diff --git a/docs/assets/fonts/Inter/Inter-400.woff2 b/docs/assets/fonts/Inter/Inter-400.woff2
diff --git a/docs/assets/fonts/Inter/Inter-500.woff2 b/docs/assets/fonts/Inter/Inter-500.woff2
diff --git a/docs/assets/fonts/Inter/Inter-600.woff2 b/docs/assets/fonts/Inter/Inter-600.woff2
diff --git a/docs/assets/fonts/Inter/Inter-700.woff2 b/docs/assets/fonts/Inter/Inter-700.woff2
diff --git a/docs/index.html b/docs/index.html
@@ -83,6 +83,46 @@
         </div>
     </div>
 
+    <!-- Install Wallet Screen -->
+
+    <div id="install" class="screen visibility-hidden">
+        <div class="middle">
+            <div class="container">
+                <div class="screen-title">How to sign in to services with TON Wallet</div>
+
+                <div class="widget">
+                    <div class="widget-icon">
+                        <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M39.1352 11.6667H16.8648C13.2991 11.6667 11.9766 11.9637 10.6651 12.6651C9.51547 13.2799 8.61325 14.1821 7.99843 15.3317C7.29704 16.6432 7 17.9658 7 21.5315V34.4685C7 38.0342 7.29704 39.3568 7.99843 40.6683C8.61325 41.8179 9.51547 42.7201 10.6651 43.3349C11.9766 44.0363 13.2991 44.3333 16.8648 44.3333H39.1352C42.7009 44.3333 44.0234 44.0363 45.3349 43.3349C46.4845 42.7201 47.3868 41.8179 48.0016 40.6683C48.703 39.3568 49 38.0342 49 34.4685V21.5315C49 17.9658 48.703 16.6432 48.0016 15.3317C47.3868 14.1821 46.4845 13.2799 45.3349 12.6651C44.0234 11.9637 42.7009 11.6667 39.1352 11.6667Z" stroke="#32AAFE" stroke-width="3.5"/>
+                            <path d="M43.0033 28H49V35H43.0033C42.1184 35 41.2697 34.6313 40.644 33.9749C40.0182 33.3185 39.6667 32.4283 39.6667 31.5V31.5C39.6667 30.5717 40.0182 29.6815 40.644 29.0251C41.2697 28.3687 42.1184 28 43.0033 28V28Z" stroke="#32AAFE" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M14 18.6667H20.5567" stroke="#32AAFE" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </div>
+                    <div class="widget-title">Install TON Wallet<br/>and log in to your wallet</div>
+                    <div class="widget-subtitle">Create a new wallet or import an existing one.</div>
+                    <a class="widget-button-link" target="_blank" href="https://play.google.com/store/apps/details?id=org.ton.wallet">
+                        <button class="widget-button">Google Play Store</button>
+                    </a>
+                </div>
+
+                <div class="widget">
+                    <div class="widget-icon">
+                        <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M21 21L29.5829 28L21 35" stroke="#32AAFE" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M28 28H9.33331" stroke="#32AAFE" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            <path d="M28 9.33334H36.8019C40.3676 9.33334 41.6901 9.63037 43.0016 10.3318C44.1512 10.9466 45.0534 11.8488 45.6682 12.9984C46.3696 14.3099 46.6667 15.6324 46.6667 19.1981V36.8019C46.6667 40.3676 46.3696 41.6901 45.6682 43.0016C45.0534 44.1512 44.1512 45.0534 43.0016 45.6682C41.6901 46.3696 40.3676 46.6667 36.8019 46.6667H28" stroke="#32AAFE" stroke-width="3.5" stroke-linecap="round"/>
+                        </svg>                                  
+                    </div>
+                    <div class="widget-title">Sign in with TON Wallet</div>
+                    <div class="widget-subtitle shortened">Click the button below or log in through the service page.</div>
+                    <a class="widget-button-link" href="#">
+                        <button class="widget-button">Sign in with TON Wallet</button>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Import Screen -->
 
     <div id="import" class="screen text-align-center visibility-hidden">

diff --git a/docs/main.css b/docs/main.css
@@ -16,6 +16,43 @@
     font-display: block;
 }
 
+/* Inter Regular */
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url("../assets/fonts/Inter/Inter-400.woff2") format("woff2");
+  }
+
+  /* Inter Medium */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+    src: url("../assets/fonts/Inter/Inter-500.woff2") format("woff2");
+  }
+
+  /* Inter Semi Bold */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+    src: url("../assets/fonts/Inter/Inter-600.woff2") format("woff2");
+  }
+
+  /* Inter Bold */
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 700;
+    font-display: block;
+    src: url("../assets/fonts/Inter/Inter-700.woff2") format("woff2");
+  }
+
+
 html {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
@@ -1272,4 +1309,173 @@ button {
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
+}
+
+#install .middle {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    background-color: #EFEFF3;
+}
+
+#install .container {
+    width: 100%;
+    max-width: 544px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+#install .screen-title {
+    max-width: 350px;
+    color: #000;
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 40px;
+    letter-spacing: -0.07px;
+
+    text-align: center;
+    margin-bottom: 8px;
+}
+
+#install #start_createBtn, #install #start_importBtn {
+    display: none;
+}
+
+#install .widget {
+    width: 100%;
+
+    display: flex;
+    padding: 26px 32px 32px;
+    flex-direction: column;
+    align-items: flex-start;
+
+    border-radius: 32px;
+    background: #FFF;
+}
+
+#install .widget-icon {
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    margin-bottom: 24px;
+}
+
+#install .widget-title {
+    color: #000;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 30px;
+    letter-spacing: -0.046px;
+
+    margin-bottom: 6px;
+}
+
+#install .widget-subtitle {
+    color: #728A96;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 28px;
+    letter-spacing: -0.025px;
+
+    margin-bottom: 24px;
+}
+
+#install .widget-subtitle.shortened {
+    max-width: 300px;
+}
+
+#install .widget-button-link {
+    width: 100%;
+    -webkit-tap-highlight-color: transparent;
+    text-decoration: none;
+}
+
+#install .widget-button-link:focus {
+    border-radius: 12px;
+    outline: solid #32AAFE 1px;
+}
+
+#install .widget-button {
+    width: 100%;
+
+    display: flex;
+    padding: 12px 24px;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 12px;
+    background: #32AAFE;
+    transition: opacity 0.2s linear;
+
+    color:#FFF;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: -0.018px;
+
+    outline: none;
+    border: none;
+}
+
+#install .widget-button:hover {
+    opacity: 0.9;
+}
+
+@media (max-width: 734px) {
+    #install .middle {
+        justify-content: flex-start;
+        padding: 16px;
+    }
+
+    #install .container {
+        gap: 8px;
+    }
+
+    #install .screen-title {
+        max-width: 320px;
+        font-size: 22px;
+        font-weight: 600;
+        line-height: 28px;
+        letter-spacing: -0.031px;
+        margin-bottom: 16px;
+    }
+
+    #install .widget {
+        border-radius: 24px;
+        padding: 18px 24px 24px 24px;
+    }
+
+    #install .widget-icon {
+        width: 48px;
+        height: 48px;
+
+        margin-bottom: 16px;
+    }
+
+    #install .widget-title {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 26px;
+        letter-spacing: -0.038px;
+    }
+
+    #install .widget-subtitle {
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: -0.018px;
+    }
+
+    #install .widget-button {
+        border-radius: 12px;
+
+        padding: 8px 24px;
+
+        font-size: 14px;
+        line-height: 24px;
+        letter-spacing: -0.008px;
+    }
 }