diff --git a/src/css/main.css b/src/css/main.css index 2301f56..b0c91d7 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -2077,6 +2077,24 @@ input.email-form__input--email:disabled { top: 0; margin: 0 0 0 -407px; } +.slide__bg-area { + position: absolute; + background-color: white; + opacity: 0; + left: 50%; + top: -88px; + margin: 0 0 0 -200px; + width: 400px; + height: 400px; + border-radius: 50%; + -ms-transform: scale(0.1); + transform: scale(0.1); + animation-timing-function: ease; + animation-name: pulsateArea; + animation-duration: 3.4s; + animation-delay: 2.3s; + animation-iteration-count: infinite; } + .slide.slide--five .slide__bg-icon { position: absolute; top: 86px; @@ -2088,6 +2106,7 @@ input.email-form__input--email:disabled { background: #68C0F8; box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69); position: relative; + animation-timing-function: cubic-bezier(0.685, 0, 0.025, 1.185); animation-name: pulsate; animation-duration: 3.4s; animation-iteration-count: infinite; } @@ -2183,6 +2202,14 @@ input.email-form__input--email:disabled { transform: scale(1); box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69); } } +@keyframes pulsateArea { + 0% { + transform: scale(0.1); + opacity: .1; } + 100% { + transform: scale(1.4); + opacity: 0; } } + @media (max-width: 1140px) { .slide.slide--five .slide__inner { width: 860px; @@ -2221,6 +2248,279 @@ input.email-form__input--email:disabled { width: 100%; border-radius: 0; } } +.slide.slide--six { + padding: 40px 0 40px 0; + margin: 0 0 0 0; } + +.slide--shown { + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; } + +.slide.slide--six .slide__footer { + width: 450px; } + +.messages { + margin: 50px auto 30px; + width: 880px; + height: 600px; + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; + -ms-flex-pack: justify; + justify-content: space-between; } + +.message { + display: -ms-flexbox; + display: flex; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -ms-flex-direction: row; + flex-direction: row; + position: absolute; + opacity: 0; + transition: transform .6s ease, opacity .4s ease; + transition-delay: .1s; } + +.message.message--outcoming { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + transform: translate3d(10px, 20px, 0) scale(0.9) rotate(0); } + +.message.message--incoming { + transform: translate3d(-10px, 20px, 0) scale(0.9) rotate(0); } + +.message.message--one { + top: 120px; + left: 0; + transition-delay: .2s; } + +.message.message--two { + top: 0; + left: 200px; + transition-delay: .3s; } + +.message.message--three { + top: 135px; + right: 140px; + transition-delay: .4s; } + +.message.message--four { + top: 220px; + left: 160px; + transition-delay: .5s; } + +.message.message--five { + top: 355px; + left: 0px; + transition-delay: .6s; } + +.message.message--six { + top: 365px; + right: 0; + transition-delay: .7s; } + +.message.message--seven { + top: 365px; + right: 320px; + transition-delay: .8s; } + +.slide--shown .message.message--outcoming, +.slide--shown .message.message--incoming { + opacity: 1; + transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } + +.message__avatar { + width: 36px; + height: 36px; + border-radius: 50%; + box-shadow: 0 4px 18px 0 rgba(189, 208, 223, 0.26); + background-color: white; + background-size: 36px; + margin: 0 8px; } + +.message--one .message__avatar { + background-image: url(../img/new-site/face1@2x.png); } + +.message--two .message__avatar { + background-image: url(../img/new-site/face2@2x.png); } + +.message--three .message__avatar { + background-image: url(../img/new-site/face3@2x.png); } + +.message--four .message__avatar { + background-image: url(../img/new-site/face4@2x.png); } + +.message--five .message__avatar { + background-image: url(../img/new-site/face5@2x.png); } + +.message--six .message__avatar { + background-image: url(../img/new-site/face6@2x.png); } + +.message--seven .message__avatar { + background-image: url(../img/new-site/face7@2x.png); } + +.message__bubble { + background-color: white; + box-shadow: 0 4px 18px 0 rgba(189, 208, 223, 0.26); + border-radius: 8px; + max-width: 204px; } + +.message__name { + font-size: 14px; + color: #939BA1; + padding: 12px 12px 2px 12px; } + +.message__text { + padding: 0 12px 8px 12px; + font-size: 15px; + color: #000; } + +.message__location { + width: 180px; + height: 60px; + background-size: cover; + background-image: url(../img/new-site/location@2x.png); + margin: 0 12px 12px 12px; } + +.message__player { + width: 162px; + height: 52px; + background-size: cover; + background-image: url(../img/new-site/player@2x.png); + margin: 0 12px 12px 12px; } + +.message__transaction { + width: 180px; + padding: 0 12px 12px 12px; } + +.message__transaction__amount { + font-size: 25px; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } + +.message__transaction__amount .currency { + color: #C2C4CB; + letter-spacing: 2px; } + +.message__transaction__details { + padding: 8px 0 0 0; } + +.message__transaction__details .text-gray { + display: inline-block; + color: #C2C4CB; + width: 44px; } + +.message__custom { + margin: 0 12px 12px 12px; + width: 180px; + height: 150px; + border: 1px dashed #6E97E9; + border-radius: 8px; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; } + +.message__custom__icon-wrap { + width: 46px; + height: 46px; + background-color: #E0E9F9; + border-radius: 50%; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; } + +.message__custom__icon { + width: 24px; + height: 24px; + background-image: url(../img/new-site/icon-plus.svg); + background-size: 24px; } + +.message__custom__text { + text-align: center; + color: #95A3AD; + font-size: 14px; + line-height: 20px; + padding: 4px 16px 0; } + +.message__bubble-footer { + height: 40px; + line-height: 40px; + text-align: center; } + +.message__bubble-footer.message__bubble-footer--button { + color: white; + background-color: #6E97E9; + border-radius: 0px 0px 8px 8px; } + +.message__bubble-footer.message__bubble-footer--status { + border-top: 1px solid #E8EBEC; + color: #6E97E9; + border-radius: 0px 0px 8px 8px; } + +@media (max-width: 922px) { + .messages { + margin: 50px auto 30px; + width: 748px; + height: 620px; } + .message.message--three { + right: 30px; + top: 55px; } + .message.message--four { + left: 170px; + top: 225px; } + .message.message--five { + left: 0; + top: 355px; } + .message.message--six { + top: 255px; } + .message.message--seven { + right: 210px; + top: 405px; } } + +@media (max-width: 767px) { + .slide.slide--six { + padding: 0; } + .messages { + margin: 20px auto 10px; + width: 375px; + padding: 0 10px; } + .message.message--one { + left: 0; + top: 0; } + .message.message--two { + display: none; } + .message.message--three { + right: 0; + top: 88px; } + .message.message--four { + display: none; } + .message.message--five { + left: 0; + top: 278px; } + .message.message--six { + display: none; } + .message.message--seven { + right: 0px; + top: 406px; } } + +@media (max-width: 375px) { + .messages { + width: auto; } } + .footer { position: fixed; width: 100%; diff --git a/src/img/new-site/face1@2x.png b/src/img/new-site/face1@2x.png new file mode 100644 index 0000000..8a7dc11 Binary files /dev/null and b/src/img/new-site/face1@2x.png differ diff --git a/src/img/new-site/face2@2x.png b/src/img/new-site/face2@2x.png new file mode 100644 index 0000000..0cd7090 Binary files /dev/null and b/src/img/new-site/face2@2x.png differ diff --git a/src/img/new-site/face3@2x.png b/src/img/new-site/face3@2x.png new file mode 100644 index 0000000..dd1a037 Binary files /dev/null and b/src/img/new-site/face3@2x.png differ diff --git a/src/img/new-site/face4@2x.png b/src/img/new-site/face4@2x.png new file mode 100644 index 0000000..3d70adf Binary files /dev/null and b/src/img/new-site/face4@2x.png differ diff --git a/src/img/new-site/face5@2x.png b/src/img/new-site/face5@2x.png new file mode 100644 index 0000000..494ac4c Binary files /dev/null and b/src/img/new-site/face5@2x.png differ diff --git a/src/img/new-site/face6@2x.png b/src/img/new-site/face6@2x.png new file mode 100644 index 0000000..155255a Binary files /dev/null and b/src/img/new-site/face6@2x.png differ diff --git a/src/img/new-site/face7@2x.png b/src/img/new-site/face7@2x.png new file mode 100644 index 0000000..8c69197 Binary files /dev/null and b/src/img/new-site/face7@2x.png differ diff --git a/src/img/new-site/icon-plus.svg b/src/img/new-site/icon-plus.svg new file mode 100644 index 0000000..e69de29 diff --git a/src/img/new-site/icon_yt.svg b/src/img/new-site/icon_yt.svg index b119f11..b636bb7 100644 --- a/src/img/new-site/icon_yt.svg +++ b/src/img/new-site/icon_yt.svg @@ -1 +1 @@ -icon_yt \ No newline at end of file +icon_yt \ No newline at end of file diff --git a/src/img/new-site/location@2x.png b/src/img/new-site/location@2x.png new file mode 100644 index 0000000..8ccbb3c Binary files /dev/null and b/src/img/new-site/location@2x.png differ diff --git a/src/img/new-site/player@2x.png b/src/img/new-site/player@2x.png new file mode 100644 index 0000000..31de7bf Binary files /dev/null and b/src/img/new-site/player@2x.png differ diff --git a/src/index.html b/src/index.html index 2a8c21c..13fa092 100755 --- a/src/index.html +++ b/src/index.html @@ -404,6 +404,95 @@ +
+
+
+

Smarter private messaging

+

Status is more than a messenger. Send payments and smart contracts to friends from within chats, and enjoy end-to-end encryption by default using a peer-to-peer protocol that doesn’t rely +on centralized servers

+
+ +
+ +
+
+
+
Alex
+
Thanks, guys!
+
+
+
+
+
+
Justas
+
17 Washington Street, Noank, MA
+
+
+
+
+
+
+
Andrei
+
+
0.2323 ETH
+
+
Tojustas777
+
Fromandmironov
+ +
+
+
+ + Confirmed +
+
+
+
+
+
+
Lina
+
+
+
+
+
+
+
Daniel
+
Confirm with password
+
+ Enter password +
+
+
+
+
+
+
Gene
+
That would be 3.55 ETH
+
+ Send 3.55 ETH +
+
+
+
+
+
+
Felix
+
+
+
Design custom messages for your DApp
+
+
+
+ +
+
+ With Status, you can use smart contracts in your daily life, converse with chatbots, and help to preserve our collective human right to privacy +
+ +
+
+
@@ -411,6 +500,7 @@

Status is built together with its users. We’re completely open source and anyone is free to contribute. Together we can shape the future of Status, and facilitate the transition to a more open internet.

+
diff --git a/src/js/app.js b/src/js/app.js index 0f365bf..78ac009 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -9959,6 +9959,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol features = document.querySelectorAll(".features-wrap")[0], slideTwo = document.querySelectorAll(".slide--two")[0], slideThree = document.querySelectorAll(".slide--three")[0], + slideSix = document.querySelectorAll(".slide--six")[0], cookieButton = document.querySelectorAll(".cookie-popup-button")[0]; setTimeout(function () { @@ -10034,6 +10035,12 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol when: 1400, className: "slide--shown" } + }, { + element: slideSix, + reveal: { + when: 2200, + className: "slide--shown" + } }] }).init(); diff --git a/src/js/main.js b/src/js/main.js index 451a085..be871cb 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -9,6 +9,7 @@ let iphone = document.querySelectorAll(".phone-wrap--iphone")[0], features = document.querySelectorAll(".features-wrap")[0], slideTwo = document.querySelectorAll(".slide--two")[0], slideThree = document.querySelectorAll(".slide--three")[0], + slideSix = document.querySelectorAll(".slide--six")[0], cookieButton = document.querySelectorAll(".cookie-popup-button")[0] setTimeout(() => body.classList.add("shown"), 400) @@ -96,6 +97,14 @@ new ScrollOver({ when : 1400, className: "slide--shown" } + }, + { + element : slideSix, + reveal: + { + when : 2200, + className: "slide--shown" + } } ] }).init() diff --git a/src/scss/main.scss b/src/scss/main.scss index 35d4547..4d7a5b0 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -13,5 +13,6 @@ @import "slide--three"; @import "slide--four"; @import "slide--five"; +@import "slide--six"; @import "footer"; diff --git a/src/scss/slide--five.scss b/src/scss/slide--five.scss index e03c6cb..d48592d 100644 --- a/src/scss/slide--five.scss +++ b/src/scss/slide--five.scss @@ -27,6 +27,25 @@ margin: 0 0 0 -407px; } +.slide__bg-area { + position: absolute; + background-color: $colorWhite; + opacity: 0; + left: 50%; + top: -88px; + margin: 0 0 0 -200px; + width: 400px; + height: 400px; + border-radius: 50%; + + transform: scale(.1); + animation-timing-function: ease; + animation-name: pulsateArea; + animation-duration: 3.4s; + animation-delay: 2.3s; + animation-iteration-count: infinite; +} + .slide.slide--five .slide__bg-icon { position: absolute; top: 86px; @@ -39,7 +58,7 @@ box-shadow: 0 2px 9px 0 rgba(57,80,164,0.69); position: relative; - + animation-timing-function: cubic-bezier(0.685, 0.000, 0.025, 1.185); animation-name: pulsate; animation-duration: 3.4s; animation-iteration-count: infinite; @@ -129,6 +148,17 @@ } } +@keyframes pulsateArea { + 0% { + transform: scale(.1); + opacity: .1 + } + 100% { + transform: scale(1.4); + opacity: 0 + } +} + @media (max-width: 1140px) { .slide.slide--five .slide__inner { @@ -197,7 +227,3 @@ } } - -@media (max-width: 860px) { - -} diff --git a/src/scss/slide--six.scss b/src/scss/slide--six.scss new file mode 100644 index 0000000..11fe663 --- /dev/null +++ b/src/scss/slide--six.scss @@ -0,0 +1,234 @@ +.slide.slide--six { + padding: 40px 0 40px 0; + margin: 0 0 0 0; +} + +.slide--shown { + transform: scale(1); + opacity:1 +} + +.slide.slide--six .slide__footer { + width: 450px; +} + +.messages { + margin: 50px auto 30px; + width: 880px; + height: 600px; + position: relative; + display: flex; + flex-wrap: wrap; + align-content:flex-start; + justify-content: space-between; +} + +.message { + display: flex; + align-items: flex-start; + align-content: flex-start; + flex-direction: row; + position: absolute; + opacity: 0; + transition: transform .6s ease, opacity .4s ease; + transition-delay: .1s; +} + +.message.message--outcoming { + flex-direction: row-reverse; + transform: translate3d(10px, 20px, 0) scale(.9) rotate(0); +} +.message.message--incoming { + transform: translate3d(-10px, 20px, 0) scale(.9) rotate(0); +} + +.message.message--one { top: 120px; left: 0; transition-delay: .2s;} +.message.message--two { top: 0; left: 200px; transition-delay: .3s;} +.message.message--three { top: 135px; right: 140px; transition-delay: .4s;} +.message.message--four { top: 220px; left: 160px; transition-delay: .5s;} +.message.message--five { top: 355px; left: 0px; transition-delay: .6s;} +.message.message--six { top: 365px; right: 0; transition-delay: .7s;} +.message.message--seven { top: 365px; right: 320px; transition-delay: .8s;} + +.slide--shown .message.message--outcoming, +.slide--shown .message.message--incoming { + opacity: 1; + transform: translate3d(0, 0, 0) scale(1) rotate(0deg); +} + + + +.message__avatar { + width: 36px; + height: 36px; + border-radius: 50%; + box-shadow: 0 4px 18px 0 rgba(189,208,223,0.26); + background-color: $colorWhite; + background-size: 36px; + margin: 0 8px; +} + +.message--one .message__avatar { background-image: url(../img/new-site/face1@2x.png) } +.message--two .message__avatar { background-image: url(../img/new-site/face2@2x.png) } +.message--three .message__avatar { background-image: url(../img/new-site/face3@2x.png) } +.message--four .message__avatar { background-image: url(../img/new-site/face4@2x.png) } +.message--five .message__avatar { background-image: url(../img/new-site/face5@2x.png) } +.message--six .message__avatar { background-image: url(../img/new-site/face6@2x.png) } +.message--seven .message__avatar { background-image: url(../img/new-site/face7@2x.png) } + +.message__bubble { + background-color: $colorWhite; + box-shadow: 0 4px 18px 0 rgba(189,208,223,0.26); + border-radius: 8px; + max-width: 204px; +} + +.message__name { + font-size: 14px; + color: #939BA1; + padding: 12px 12px 2px 12px; +} + +.message__text { + padding: 0 12px 8px 12px; + font-size: 15px; + color: #000; +} + +.message__location { + width: 180px; + height: 60px; + background-size: cover; + background-image: url(../img/new-site/location@2x.png); + margin: 0 12px 12px 12px; +} + +.message__player { + width: 162px; + height: 52px; + background-size: cover; + background-image: url(../img/new-site/player@2x.png); + margin: 0 12px 12px 12px; +} + +.message__transaction { + width: 180px; + padding: 0 12px 12px 12px; +} + +.message__transaction__amount { + font-size: 25px; + font-family:$PostGroteskMedium; +} + +.message__transaction__amount .currency { + color: #C2C4CB; + letter-spacing: 2px; +} + +.message__transaction__details { + padding: 8px 0 0 0; +} + +.message__transaction__details .text-gray { + display: inline-block; + color: #C2C4CB; + width: 44px; +} + +.message__custom { + margin: 0 12px 12px 12px; + width: 180px; + height: 150px; + border: 1px dashed #6E97E9; + border-radius: 8px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.message__custom__icon-wrap { + width: 46px; + height: 46px; + background-color: #E0E9F9; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.message__custom__icon { + width: 24px; + height: 24px; + background-image: url(../img/new-site/icon-plus.svg); + background-size: 24px; +} + +.message__custom__text { + text-align: center; + color: #95A3AD; + font-size: 14px; + line-height: 20px; + padding: 4px 16px 0; +} + +.message__bubble-footer { + height: 40px; + line-height: 40px; + text-align: center; +} + +.message__bubble-footer.message__bubble-footer--button { + color: $colorWhite; + background-color: #6E97E9; + border-radius: 0px 0px 8px 8px; +} + +.message__bubble-footer.message__bubble-footer--status { + border-top: 1px solid #E8EBEC; + color: #6E97E9; + border-radius: 0px 0px 8px 8px; +} + +@media (max-width: 922px) { + + .messages { + margin: 50px auto 30px; + width: 748px; + height: 620px; + } + .message.message--three {right: 30px; top: 55px; } + .message.message--four { left:170px; top: 225px; } + .message.message--five { left:0; top: 355px; } + .message.message--six {top: 255px; } + .message.message--seven { right:210px; top: 405px;} + +} + +@media (max-width: 767px) { + + .slide.slide--six { + padding: 0; + } + + .messages { + margin: 20px auto 10px; + width: 375px; + padding: 0 10px; + } + + .message.message--one {left: 0; top: 0;} + .message.message--two {display: none;} + .message.message--three {right: 0; top: 88px;} + .message.message--four { display: none; } + .message.message--five { left:0; top: 278px;} + .message.message--six {display: none; } + .message.message--seven { right:0px; top: 406px;} +} + +@media (max-width: 375px) { + .messages { + width: auto; + } +}