Home Explore Help
Sign In
ShariX_SportsFriend
/
sharix-sports-webservice-running
forked from ShariX_Open/sharix-open-webservice-running
6
0
Fork 0
Files
Browse Source

Добавлены страницы входа, оплаты и личного кабинета

Елена Контиевская 2 years ago
commit
2e20fea8d2
27 changed files with 1092 additions and 0 deletions
Unified View Show Diff Stats
  1. BIN
      .DS_Store
  2. 29 0
      authorization-fog-pass.html
  3. 28 0
      authorization.html
  4. 727 0
      css/style.css
  5. 3 0
      img/Vector.svg
  6. 3 0
      img/arrow.svg
  7. 4 0
      img/arrows.svg
  8. BIN
      img/assist.png
  9. BIN
      img/drive.png
  10. 6 0
      img/iot.svg
  11. BIN
      img/logo.png
  12. 2 0
      img/logo_open.svg
  13. BIN
      img/mc.png
  14. BIN
      img/mir.png
  15. BIN
      img/paymo.png
  16. 1 0
      img/people.svg
  17. 3 0
      img/plus.svg
  18. 1 0
      img/settings.svg
  19. BIN
      img/sharix-logo-final-400x-1-5@2x.png
  20. BIN
      img/sharix-logo-final-400x-1@2x.png
  21. BIN
      img/userPhoto.png
  22. BIN
      img/visa.png
  23. 15 0
      js/script.js
  24. 64 0
      payment.html
  25. 37 0
      payment_succ.html
  26. 37 0
      payment_unsucc.html
  27. 132 0
      personal_acc.html

BIN
.DS_Store
View File


+ 29 - 0
authorization-fog-pass.html
View File 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="shortcut icon" type="image/png" href="https://animaproject.s3.amazonaws.com/home/favicon.png" />
 
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
 
+  </head>
 
+  <body>
 
+    <div class="container-auth">
 
+
 
+      <div class="authfog-block">
 
+          <img class="logo400" src="img/logo_open.svg">
 
+          <form action="" method="" >
 
+            <p>Код для восстановления пароля был отправлен Вам по SMS на номер</p>
 
+            <p class="userNum">+7******1212</p>
 
+            <input type="number" name="phone">
 
+            <p class="resend">Отправить код повторно через</p>
 
+            <p id="secLeft">300 сек</p>
 
+            <div class="buttons">
 
+              <a id="enter" href="authorization.html">Войти</a>
 
+              <button type="submit" class="next">Далее</button>
 
+            </div>
 
+          </form>
 
+      </div>
 
+
 
+    </div>
 
+  </body>
 
+</html>

+ 28 - 0
authorization.html
View File 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="shortcut icon" type="image/png" href="https://animaproject.s3.amazonaws.com/home/favicon.png" />
 
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
 
+  </head>
 
+  <body>
 
+    <div class="container-auth">
 
+
 
+      <div class="auth-block">
 
+          <img class="logo400" src="img/logo_open.svg">
 
+          <form action="personal_acc.html" method="">
 
+            <input type="text" placeholder="Телефон или e-mail" name="login">
 
+            <input type="password" placeholder="Пароль" name="password">        
+            <p id="incorrect">Проверьте корректность логина или пароля</p>
 
+            <a id="forgot-pass" href="authorization-fog-pass.html">Забыли пароль?</a>
 
+            <div class="buttons">
 
+              <a id="register" href="register.html">Регистрация</a>
 
+              <button type="submit" class="enter">Войти</button>
 
+            </div>
 
+          </form>
 
+      </div>
 
+
 
+    </div>
 
+  </body>
 
+</html>

+ 727 - 0
css/style.css
View File 

@@ -0,0 +1,727 @@
 
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
 
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
 
+
 
+
 
+
 
+*{
 
+    margin: 0;
 
+    padding: 0;
 
+    font-family: 'Roboto', sans-serif;
 
+}
 
+
 
+main {
 
+    margin-top: 156px;
 
+}
 
+
 
+.wrapper {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    flex-wrap: wrap;
 
+}
 
+
 
+h2 {
 
+    font-size: 24px;
 
+}
 
+
 
+section {
 
+    margin-top: 26px;
 
+}
 
+
 
+section h2 {
 
+    margin-bottom: 35px;
 
+}
 
+
 
+input[type="number"]::-webkit-outer-spin-button,
 
+input[type="number"]::-webkit-inner-spin-button {
 
+  -webkit-appearance: none;
 
+  margin: 0;
 
+}
 
+
 
+
 
+/* header */
 
+
 
+
 
+header {
 
+    position: fixed;
 
+    margin-top: 11px;
 
+    top: 0;
 
+    left: 50%;
 
+    transform: translateY(-50%);
 
+    transform: translateX(-50%);
 
+    width: clamp(300px, 60vw, 1040px);
 
+    background: #FFFFFF;
 
+    box-shadow: 4px 5px 40px 0px #EEEEEE;
 
+    border-radius: 15px;
 
+    height: 60px;
 
+}
 
+
 
+header img {
 
+    margin: 9px 30px;
 
+}
 
+
 
+.logout {
 
+    position: fixed;
 
+    padding: 0;
 
+    margin-top: 15px;
 
+    top: 0;
 
+    left: 82%;
 
+    height: 70px;
 
+    width: 55px;
 
+}
 
+
 
+.logoutCircle {
 
+    position: absolute;
 
+    width: 55px;
 
+    height: 55px;
 
+    border-radius: 100%;
 
+    background: #FFFFFF;
 
+    box-shadow: 4px 5px 40px #EEEEEE;
 
+}
 
+
 
+.logoutText {
 
+    font-family: 'Open Sans', sans-serif;
 
+    position: absolute;
 
+    left: 0;
 
+    right: 0;
 
+    bottom: 0;
 
+    text-align: center;
 
+    font-size: 10px;
 
+    text-decoration: none;
 
+    color: #b20000;
 
+}
 
+
 
+.logoutCircle img {
 
+    display: block;
 
+    margin: auto;
 
+    margin-top: 30%;
 
+    margin-bottom: 5px;
 
+}
 
+
 
+
 
+/* footer */
 
+
 
+
 
+footer {
 
+    padding-top: 23px;
 
+    padding-bottom: 23px;
 
+    margin-top: 48px;
 
+    background: #F3F3F3;
 
+}
 
+
 
+footer>ul {
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+    width: clamp(300px, 60vw, 1174px);
 
+    list-style: none;
 
+    display: flex;
 
+    justify-content: end;
 
+    flex-wrap: wrap;
 
+}
 
+
 
+footer li {
 
+    margin-left: 20px;
 
+}
 
+
 
+footer a {
 
+    color: #000;
 
+    text-decoration: none;
 
+    font-size: 14px;
 
+}
 
+
 
+footer #deleteAcc {
 
+    margin-right: auto;
 
+    margin-left: 0;
 
+}
 
+
 
+@media (max-width: 1000px) {
 
+    footer>ul {
 
+        flex-direction: column;
 
+    }
 
+    footer #deleteAcc {
 
+        margin-right: 0;
 
+        margin-left: 0;
 
+    }
 
+
 
+    footer li {
 
+        margin-left: 0px;
 
+    }
 
+    
+}
 
+
 
+
 
+/* personal_acc */
 
+
 
+
 
+.container-acc {
 
+    width: clamp(300px, 60vw, 650px);
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+    margin-top: 10vh;
 
+}
 
+
 
+
 
+
 
+.container-acc .person {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    border: 1px solid #C4C4C4;
 
+    box-sizing: border-box;
 
+    border-radius: 32px;
 
+    padding: 25px 32px;
 
+    margin-bottom: 24px;
 
+}
 
+
 
+.container-acc #userPhoto {
 
+    border-radius: 100%;
 
+}
 
+
 
+.container-acc .aboutUser {
 
+    margin-right: auto;
 
+    margin-left: 32px;
 
+}
 
+
 
+.container-acc .name {
 
+    font-size: 36px;
 
+    margin-bottom: 22px;
 
+}
 
+
 
+.container-acc .email {
 
+    font-size: 18px;
 
+    color: #A3A3A3;
 
+}
 
+
 
+.container-acc #settings {
 
+    margin-bottom: 32px;
 
+    cursor: pointer;
 
+}
 
+
 
+@media (max-width: 740px) {
 
+    .container-acc .person {
 
+        flex-direction: column;
 
+        text-align: center;
 
+    }
 
+
 
+    .container-acc .aboutUser {
 
+        margin: 0;
 
+        margin-top: 10px;
 
+    }
 
+    
+
 
+    .container-acc #settings {
 
+        margin-bottom: 0;
 
+        margin-top: 20px;
 
+    }
 
+}
 
+
 
+
 
+
 
+
 
+
 
+.container-acc .bnh>div {
 
+    border: 1px solid #C4C4C4;
 
+    box-sizing: border-box;
 
+    width: 311px;
 
+    min-height: 144px;
 
+    border-radius: 32px;
 
+    padding: 33px 21px;
 
+    margin-bottom: 24px;
 
+}
 
+
 
+.container-acc .bnh h2 {
 
+    display: inline-block;
 
+    margin-bottom: 20px;
 
+}
 
+
 
+.container-acc .bnh img {
 
+    float: right;
 
+    margin-right: 19px;
 
+}
 
+
 
+.container-acc .balance img {
 
+    margin-top: 5px;
 
+}
 
+
 
+.container-acc .history img {
 
+    margin-top: 10px;
 
+}
 
+
 
+.container-acc .balanceValue {
 
+    font-size: 24px;
 
+}
 
+
 
+.container-acc .historyElement { 
+    font-size: 18px;
 
+    width: 30px;
 
+    color: #4a4a4a;
 
+}
 
+
 
+.container-acc .historyElement p {
 
+    white-space: nowrap;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+}
 
+
 
+
 
+
 
+
 
+.container-acc .service {
 
+    border: 1px solid #C4C4C4;
 
+    box-sizing: border-box;
 
+    width: 311px;
 
+    min-height: 140px;
 
+    border-radius: 32px;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    margin-bottom: 24px;
 
+}
 
+
 
+@media (max-width: 1040px) {
 
+    .container-acc .bnh,
 
+    .container-acc .services,
 
+    .container-acc .courses {
 
+        flex-direction: column;
 
+    }
 
+}
 
+
 
+
 
+.container-acc .course {
 
+    box-sizing: border-box;
 
+    width: 317px;
 
+    min-height: 188px;
 
+    background: #4a4a4a;
 
+    border: 1px solid #000;
 
+    box-sizing: border-box;
 
+    border-radius: 30px;
 
+    padding-top: 18px;
 
+    padding-left: 22px;
 
+    padding-bottom: 18px;
 
+    margin-bottom: 24px;
 
+}
 
+
 
+.container-acc .courses a {
 
+    color: #fff;
 
+    font-size: 32px;
 
+    font-weight: 700;
 
+    text-decoration: none;
 
+}
 
+
 
+.container-acc .courses p {
 
+    margin-top: 15px;
 
+}
 
+ 
+.container-acc .modal {
 
+    display: none; /* Hidden by default */
 
+    position: fixed; /* Stay in place */
 
+    z-index: 1; /* Sit on top */
 
+    padding-top: 30vh; /* Location of the box */
 
+    left: 0;
 
+    top: 0;
 
+    width: 100%; /* Full width */
 
+    height: 100%; /* Full height */
 
+    overflow: scroll; /* Enable scroll if needed */
 
+    background-color: rgb(0,0,0); /* Fallback color */
 
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 
+}
 
+
 
+@media (max-width: 800px) {
 
+    .container-acc .modal {
 
+        padding-top: 20px;
 
+    }
 
+}
 
+  
+  
+.container-acc .modal-content {
 
+    position: relative;
 
+    margin: auto;
 
+    padding-left: 24px;
 
+    padding-right: 24px;
 
+    padding-bottom: 30px;
 
+    width: clamp(300px, 60vw, 493px);
 
+    background: #FFFFFF;
 
+    border: 1px solid #CACACA;
 
+    box-sizing: border-box;
 
+    border-radius: 24px;
 
+
 
+}
 
+
 
+.container-acc .modal form {
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+    justify-content: space-between;
 
+}
 
+
 
+.container-acc .modal input {
 
+    padding: 15px;
 
+    margin-top: 15px;
 
+    background: #FFFFFF;
 
+    border: 1px solid #9D9D9D;
 
+    box-sizing: border-box;
 
+    border-radius: 6px;
 
+    height: 45px;
 
+}
 
+
 
+.container-acc .formElement {
 
+    margin-top: 32px;
 
+    font-size: 14px;
 
+    font-weight: 600;
 
+    
+}
 
+
 
+
 
+.container-acc #name {
 
+    width: 216px; 
+}
 
+
 
+.container-acc #surname {
 
+    width: 208px;
 
+}
 
+
 
+.container-acc #email {
 
+    width: 253px;
 
+}
 
+
 
+.container-acc #phone {
 
+    width: 171px;
 
+    
+}
 
+
 
+.container-acc .formBtns {
 
+    margin-top: 58px;
 
+    margin-left: auto;
 
+    font-family: 'Open Sans', sans-serif;
 
+}
 
+
 
+.container-acc #closeModal {
 
+    font-size: 14px;
 
+    font-weight: 600;
 
+    color: #479FF8;
 
+    margin-right: 30px;
 
+}
 
+
 
+.container-acc #save {
 
+    font-size: 14px;
 
+    font-weight: 700;
 
+    outline: none;
 
+    border: none;
 
+    width: 135px;
 
+    height: 35px;
 
+    color: #fff;
 
+    background: linear-gradient(226.01deg, #00A4FF -13.24%, #0076C7 119.18%);
 
+    border-radius: 6px;
 
+    cursor: pointer;
 
+}
 
+
 
+
 
+/* payment */
 
+
 
+
 
+.column-wrapper {
 
+    width: clamp(300px, 60vw, 790px);
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    text-align: center;
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+}
 
+
 
+.column-wrapper p {
 
+    font-family: 'Open Sans', sans-serif;
 
+    font-size: 18px;
 
+    color: #5F5E5E;
 
+    line-height: 24.51px;
 
+    margin-bottom: 25px;
 
+}
 
+
 
+.column-wrapper form {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    text-align: center;
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+}
 
+
 
+
 
+
 
+.req-wrapper .payImages {
 
+    width: clamp(300px, 60vw, 315px);
 
+    display: flex;
 
+    justify-content: space-around;
 
+    flex-wrap: wrap;
 
+    align-items: center;
 
+    margin-top: 9px;
 
+}
 
+
 
+.req-wrapper .payImages img {
 
+    height: 100%;
 
+    width: auto;
 
+    margin-bottom: 40px;
 
+}
 
+
 
+.req-wrapper #sum {
 
+    width: 309px;
 
+    height: 52px;
 
+    background: #FFFFFF;
 
+    border: 1px solid #9D9D9D;
 
+    box-sizing: border-box;
 
+    border-radius: 6px;
 
+    padding-left: 10px;
 
+    margin-top: 15px;
 
+    margin-bottom: 34px;
 
+
 
+    font-size: 18px;
 
+}
 
+
 
+.req-wrapper #sum::placeholder{
 
+    color: #C4C4C4;
 
+}
 
+
 
+.req-wrapper #pay {
 
+    font-size: 18px;
 
+    font-weight: 700;
 
+    outline: none;
 
+    border: none;
 
+    width: 211px;
 
+    height: 52px;
 
+    color: #fff;
 
+    background: #4a4a4a;
 
+    border-radius: 11px;
 
+    cursor: pointer;
 
+}
 
+
 
+.req-wrapper #back {
 
+    color: #4a4a4a;
 
+    font-family: 'Open Sans', sans-serif;
 
+    font-weight: 600;
 
+    font-size: 18px;
 
+    margin-top: 20px;
 
+    
+}
 
+
 
+.req-wrapper + hr {
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+    margin-top: 60px;
 
+    margin-bottom: 14px;
 
+    width: clamp(300px, 60vw, 750px);
 
+}
 
+
 
+.container-req {
 
+    width: clamp(300px, 60vw, 820px);
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+    margin-top: 40px;
 
+}
 
+
 
+.requisites>div {
 
+    background: #FFFFFF;
 
+    border: 1px solid #C4C4C4;
 
+    box-sizing: border-box;
 
+    border-radius: 32px;
 
+    padding-left: 34px;
 
+    padding-right: 34px;
 
+    padding-top: 20px;
 
+    padding-bottom: 10px;
 
+}
 
+
 
+.requisites>div p {
 
+    font-size: 18px;
 
+    color: #5F5E5E;
 
+    margin-bottom: 20px;
 
+}
 
+
 
+.requisites>div a {
 
+    color: #004879;
 
+}
 
+
 
+.footer-pay {
 
+    margin-top: 25px;
 
+}
 
+
 
+.getPay-footer {
 
+    margin-top: 0;
 
+}
 
+
 
+
 
+/* payment_mess */
 
+
 
+
 
+.fullH {
 
+    text-align: center;
 
+    display: flex;
 
+    flex-direction: column;
 
+    margin-top: 0;
 
+    height: 50em;
 
+}
 
+
 
+
 
+.fullH p {
 
+    font-size: 36px;
 
+    font-weight: 700;
 
+    margin-top: 230px;
 
+    margin-bottom: 37px;
 
+}
 
+
 
+.fullH #back {
 
+    font-family: 'Roboto', sans-serif;
 
+    font-weight: 600;
 
+    color: #4a4a4a;
 
+    font-size: 18px;
 
+}
 
+
 
+
 
+/* auths */
 
+
 
+
 
+.auth-block,
 
+.authfog-block {
 
+    width: clamp(300px, 60vw, 544px);
 
+    min-height: 559px;
 
+    border-radius: 32px;
 
+    box-sizing: border-box;
 
+    padding: 86px 106px;
 
+    border: 1px solid #9d9d9de3;
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+    margin-top: 25vh;
 
+}
 
+
 
+.logo400 {
 
+    display: block;
 
+    width: 204px;
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+}
 
+
 
+.auth-block form,
 
+.authfog-block form {
 
+    margin-top: 60px;
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+    width: 312px;
 
+}
 
+
 
+
 
+.auth-block input,
 
+.authfog-block input {
 
+    display: block;
 
+    height: 45px;
 
+    box-sizing: border-box;
 
+    width: 100%;
 
+    border-radius: 6px;
 
+    padding: 0px 12px;
 
+    background: #FFFFFF;
 
+    border: 1px solid #9D9D9D;
 
+    font-size: 18px;
 
+    
+}
 
+
 
+.auth-block input[name="password"] {
 
+    margin-top: 20px;
 
+    margin-bottom: 15px;
 
+}
 
+
 
+.auth-block #incorrect {
 
+    display: none;
 
+    color: #ff1616;
 
+    font-size: 14px;
 
+    margin-top: 30px;
 
+    margin-bottom: 30px;
 
+}
 
+
 
+.auth-block #forgot-pass {
 
+    color: #4a4a4a;
 
+    font-weight: 700;
 
+    font-size: 14px;
 
+}
 
+
 
+.auth-block .buttons,
 
+.authfog-block .buttons {
 
+    margin-top: 35px;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    flex-wrap: wrap;
 
+    align-items: center;
 
+}
 
+
 
+.auth-block #register,
 
+.authfog-block #enter {
 
+    color: #4a4a4a;
 
+    font-weight: 600;
 
+    font-size: 14px;
 
+}
 
+
 
+.auth-block .enter,
 
+.authfog-block .next {
 
+    box-sizing: border-box;
 
+    width: 103px;
 
+    height: 35px;
 
+    font-weight: 700;
 
+    font-family: 'Open Sans', sans-serif;
 
+    color: #fff;
 
+    font-size: 14px;
 
+    cursor: pointer;
 
+    outline: none;
 
+    border: none;
 
+    background: #4a4a4a;
 
+    border-radius: 7px;
 
+}
 
+
 
+.authfog-block {
 
+    padding: 60px 98px;
 
+}
 
+
 
+.authfog-block form {
 
+    text-align: center;
 
+    width: 337px;
 
+}
 
+
 
+.authfog-block form p {
 
+    font-size: 18px;
 
+}
 
+
 
+.authfog-block .userNum {
 
+    margin-top: 44px;
 
+    font-weight: 700;
 
+}
 
+
 
+
 
+.authfog-block input[name="phone"] {
 
+    margin-top: 20px;
 
+    margin-bottom: 20px;
 
+    width: 207px;
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+}
 
+
 
+.authfog-block .resend {
 
+    font-weight: 700;
 
+    color: #a7a7a7;
 
+}
 
+
 
+.authfog-block #secLeft {
 
+    color: #a7a7a7;
 
+    font-weight: 300;
 
+    margin-top: 8px;
 
+}
 
+
 
+.authfog-block .buttons {
 
+    margin-top: 42px;
 
+}
 
+
 
+@media (max-width: 830px) {
 
+    .auth-block,
 
+    .authfog-block {
 
+        padding: 100px 10px;
 
+    }
 
+
 
+    .auth-block form,
 
+    .authfog-block form {
 
+        margin-top: 30px;
 
+        width: 200px;
 
+    }
 
+}

+ 3 - 0
img/Vector.svg
View File 

@@ -0,0 +1,3 @@
 
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M13.0277 10.7093C13.9637 9.93842 14.6469 8.8813 14.9822 7.68501C15.3176 6.48872 15.2884 5.21276 14.8987 4.03464C14.5091 2.85652 13.7784 1.83483 12.8082 1.11171C11.8381 0.388591 10.6768 0 9.48584 0C8.29491 0 7.13359 0.388591 6.16345 1.11171C5.19331 1.83483 4.46259 2.85652 4.07295 4.03464C3.6833 5.21276 3.65412 6.48872 3.98946 7.68501C4.32479 8.8813 5.00796 9.93842 5.94394 10.7093C4.34013 11.382 2.94075 12.4976 1.89499 13.9374C0.849226 15.3771 0.19628 17.0869 0.00575854 18.8846C-0.00803236 19.0159 0.00300573 19.1487 0.0382423 19.2754C0.0734789 19.4022 0.132224 19.5205 0.211124 19.6235C0.370469 19.8316 0.602234 19.9648 0.855434 19.994C1.10863 20.0231 1.36253 19.9458 1.56126 19.779C1.75999 19.6122 1.88729 19.3695 1.91514 19.1045C2.12478 17.1508 3.01465 15.3465 4.41473 14.0362C5.81482 12.7259 7.62696 12.0016 9.50493 12.0016C11.3829 12.0016 13.1951 12.7259 14.5951 14.0362C15.9952 15.3465 16.8851 17.1508 17.0947 19.1045C17.1207 19.3501 17.2326 19.5769 17.4089 19.7411C17.5852 19.9054 17.8134 19.9955 18.0494 19.994H18.1544C18.4047 19.9638 18.6334 19.8314 18.7908 19.6254C18.9482 19.4195 19.0214 19.1568 18.9946 18.8946C18.8031 17.0918 18.1467 15.3776 17.0955 13.9357C16.0444 12.4937 14.6382 11.3784 13.0277 10.7093V10.7093ZM9.48584 9.99973C8.73056 9.99973 7.99224 9.76527 7.36425 9.326C6.73626 8.88672 6.2468 8.26237 5.95776 7.53189C5.66873 6.8014 5.5931 5.9976 5.74045 5.22212C5.8878 4.44665 6.2515 3.73433 6.78557 3.17524C7.31963 2.61615 8.00007 2.23541 8.74084 2.08115C9.4816 1.9269 10.2494 2.00607 10.9472 2.30865C11.645 2.61122 12.2414 3.12362 12.661 3.78103C13.0806 4.43845 13.3046 5.21137 13.3046 6.00204C13.3046 7.06229 12.9023 8.07912 12.1861 8.82883C11.47 9.57855 10.4986 9.99973 9.48584 9.99973Z" fill="#B30000"/>
 
+</svg>

+ 3 - 0
img/arrow.svg
View File 

@@ -0,0 +1,3 @@
 
+<svg width="21" height="12" viewBox="0 0 21 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M12.0649 11.31L20.5399 2.82C20.6805 2.68056 20.7921 2.51466 20.8683 2.33187C20.9444 2.14908 20.9836 1.95302 20.9836 1.755C20.9836 1.55699 20.9444 1.36093 20.8683 1.17814C20.7921 0.995349 20.6805 0.829448 20.5399 0.690003C20.2589 0.410627 19.8787 0.253815 19.4824 0.253815C19.0862 0.253815 18.706 0.410627 18.4249 0.690003L10.9249 8.115L3.49994 0.690003C3.2189 0.410626 2.83872 0.253814 2.44244 0.253814C2.04617 0.253814 1.66599 0.410626 1.38494 0.690003C1.24321 0.828925 1.13046 0.994592 1.05321 1.17741C0.975967 1.36022 0.935769 1.55654 0.934945 1.755C0.935769 1.95346 0.975967 2.14979 1.05321 2.3326C1.13046 2.51541 1.24321 2.68108 1.38494 2.82L9.85994 11.31C10.0004 11.4623 10.1709 11.5838 10.3606 11.6669C10.5504 11.75 10.7553 11.7929 10.9624 11.7929C11.1696 11.7929 11.3745 11.75 11.5643 11.6669C11.754 11.5838 11.9245 11.4623 12.0649 11.31V11.31Z" fill="#4A4A4A"/>
 
+</svg>

+ 4 - 0
img/arrows.svg
View File 

@@ -0,0 +1,4 @@
 
+<svg width="58" height="47" viewBox="0 0 58 47" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M55.7341 17.9594L40.2674 2.29144C37.2553 -0.763814 32.3446 -0.763814 29.3325 2.29144C27.8709 3.76815 27.0667 5.73839 27.0667 7.83007C27.0667 9.92174 27.8709 11.892 29.3325 13.3687L39.3317 23.498L29.3325 33.6274C27.8709 35.108 27.0667 37.0743 27.0667 39.166C27.0667 41.2577 27.8709 43.224 29.3325 44.7046C30.7941 46.1853 32.7352 47 34.8 47C36.8648 47 38.8058 46.1853 40.2674 44.7046L55.7341 29.0367C57.1957 27.56 57.9999 25.5897 57.9999 23.498C57.9999 21.4064 57.1957 19.4361 55.7341 17.9594ZM53.0003 26.2674L37.5337 41.9353C36.0682 43.416 33.5317 43.416 32.0662 41.9353C30.5582 40.4077 30.5582 37.9243 32.0662 36.3967L44.7992 23.498L32.0662 10.5994C31.3354 9.85907 30.9333 8.87591 30.9333 7.83007C30.9333 6.78423 31.3354 5.80107 32.0662 5.06076C32.8202 4.29694 33.8101 3.91308 34.8 3.91308C35.7898 3.91308 36.7797 4.29694 37.5337 5.05684L53.0003 20.7248C53.7311 21.469 54.1333 22.4522 54.1333 23.498C54.1333 24.5439 53.7311 25.527 53.0003 26.2674Z" fill="white"/>
 
+<path d="M28.6675 17.9594L13.2008 2.29144C10.1887 -0.763814 5.278 -0.763814 2.26587 2.29144C0.804267 3.76815 0 5.7384 0 7.83007C0 9.92174 0.804267 11.892 2.26587 13.3687L12.2651 23.498L2.26587 33.6274C0.804267 35.108 0 37.0743 0 39.166C0 41.2577 0.804267 43.224 2.26587 44.7046C3.72747 46.1853 5.66854 47 7.73334 47C9.79814 47 11.7392 46.1853 13.2008 44.7046L28.6675 29.0367C30.1291 27.56 30.9334 25.5897 30.9334 23.498C30.9334 21.4064 30.1291 19.4361 28.6675 17.9594ZM25.9338 26.2674L10.4671 41.9353C9.00161 43.416 6.46507 43.416 4.9996 41.9353C3.4916 40.4077 3.4916 37.9243 4.9996 36.3967L17.7325 23.498L4.9996 10.5994C4.2688 9.85907 3.86667 8.87591 3.86667 7.83007C3.86667 6.78423 4.2688 5.80107 4.9996 5.06076C5.7536 4.29694 6.74347 3.91308 7.73334 3.91308C8.72321 3.91308 9.71307 4.29694 10.4671 5.05684L25.9338 20.7248C26.6646 21.469 27.0667 22.4522 27.0667 23.498C27.0667 24.5439 26.6646 25.527 25.9338 26.2674Z" fill="white"/>
 
+</svg>

BIN
img/assist.png
View File


BIN
img/drive.png
View File


+ 6 - 0
img/iot.svg
View File 

@@ -0,0 +1,6 @@
 
+<svg width="55" height="54" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M18.983 0.167969H6.45098C2.97148 0.167969 0.140625 2.93568 0.140625 6.33757V18.5901C0.140625 21.992 2.97148 24.7597 6.45098 24.7597H18.983C22.4625 24.7597 25.2934 21.992 25.2934 18.5901V6.33757C25.2934 2.93568 22.4625 0.167969 18.983 0.167969ZM21.0302 18.5901C21.0302 19.6937 20.1118 20.5916 18.983 20.5916H6.45098C5.32219 20.5916 4.4038 19.6937 4.4038 18.5901V6.33757C4.4038 5.23397 5.32219 4.33606 6.45098 4.33606H18.983C20.1118 4.33606 21.0302 5.23397 21.0302 6.33757V18.5901Z" fill="white"/>
 
+<path d="M48.3146 0.167969H35.9514C32.4253 0.167969 29.5566 2.97268 29.5566 6.4201V18.5076C29.5566 21.955 32.4253 24.7597 35.9514 24.7597H48.3146C51.8407 24.7597 54.7094 21.955 54.7094 18.5076V6.4201C54.7094 2.97268 51.8407 0.167969 48.3146 0.167969ZM50.4462 18.5076C50.4462 19.6567 49.49 20.5916 48.3146 20.5916H35.9514C34.776 20.5916 33.8198 19.6567 33.8198 18.5076V6.4201C33.8198 5.27096 34.776 4.33606 35.9514 4.33606H48.3146C49.49 4.33606 50.4462 5.27096 50.4462 6.4201V18.5076Z" fill="white"/>
 
+<path d="M18.983 28.9297H6.45098C2.97148 28.9297 0.140625 31.6974 0.140625 35.0993V47.3518C0.140625 50.7537 2.97148 53.5214 6.45098 53.5214H18.983C22.4625 53.5214 25.2934 50.7537 25.2934 47.3518V35.0993C25.2934 31.6974 22.4625 28.9297 18.983 28.9297ZM21.0302 47.3518C21.0302 48.4554 20.1118 49.3533 18.983 49.3533H6.45098C5.32219 49.3533 4.4038 48.4554 4.4038 47.3518V35.0993C4.4038 33.9957 5.32219 33.0978 6.45098 33.0978H18.983C20.1118 33.0978 21.0302 33.9957 21.0302 35.0993V47.3518Z" fill="white"/>
 
+<path d="M48.3146 28.9297H35.9514C32.4253 28.9297 29.5566 31.7344 29.5566 35.1818V47.2693C29.5566 50.7167 32.4253 53.5214 35.9514 53.5214H48.3146C51.8407 53.5214 54.7094 50.7167 54.7094 47.2693V35.1818C54.7094 31.7344 51.8407 28.9297 48.3146 28.9297ZM50.4462 47.2693C50.4462 48.4184 49.49 49.3533 48.3146 49.3533H35.9514C34.776 49.3533 33.8198 48.4184 33.8198 47.2693V35.1818C33.8198 34.0327 34.776 33.0978 35.9514 33.0978H48.3146C49.49 33.0978 50.4462 34.0327 50.4462 35.1818V47.2693Z" fill="white"/>
 
+</svg>

BIN
img/logo.png
View File


File diff suppressed because it is too large
+ 2 - 0
img/logo_open.svg


BIN
img/mc.png
View File


BIN
img/mir.png
View File


BIN
img/paymo.png
View File


File diff suppressed because it is too large
+ 1 - 0
img/people.svg


+ 3 - 0
img/plus.svg
View File 

@@ -0,0 +1,3 @@
 
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M22.5 10.5H13.5V1.5C13.5 1.10218 13.342 0.720645 13.0607 0.43934C12.7794 0.158036 12.3978 0 12 0C11.6022 0 11.2206 0.158036 10.9393 0.43934C10.658 0.720645 10.5 1.10218 10.5 1.5V10.5H1.5C1.10218 10.5 0.720645 10.658 0.43934 10.9393C0.158036 11.2206 0 11.6022 0 12C0 12.3978 0.158036 12.7794 0.43934 13.0607C0.720645 13.342 1.10218 13.5 1.5 13.5H10.5V22.5C10.5 22.8978 10.658 23.2794 10.9393 23.5607C11.2206 23.842 11.6022 24 12 24C12.3978 24 12.7794 23.842 13.0607 23.5607C13.342 23.2794 13.5 22.8978 13.5 22.5V13.5H22.5C22.8978 13.5 23.2794 13.342 23.5607 13.0607C23.842 12.7794 24 12.3978 24 12C24 11.6022 23.842 11.2206 23.5607 10.9393C23.2794 10.658 22.8978 10.5 22.5 10.5Z" fill="#4A4A4A"/>
 
+</svg>

File diff suppressed because it is too large
+ 1 - 0
img/settings.svg


BIN
img/sharix-logo-final-400x-1-5@2x.png
View File


BIN
img/sharix-logo-final-400x-1@2x.png
View File


BIN
img/userPhoto.png
View File


BIN
img/visa.png
View File


+ 15 - 0
js/script.js
View File 

@@ -0,0 +1,15 @@
 
+var modal = document.getElementById('myModal');
 
+var btn = document.getElementById("settings");
 
+    
+ 
+btn.onclick = function() {
 
+    modal.style.display = "block";
 
+}
 
+       
+window.onclick = function(event) {
 
+    if (event.target == modal) {
 
+        console.log(event.target);
 
+        modal.style.display = "none";
 
+    }
 
+}
 
+

+ 64 - 0
payment.html
View File 

@@ -0,0 +1,64 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="shortcut icon" type="image/png" href="https://animaproject.s3.amazonaws.com/home/favicon.png" />
 
+    <link rel="stylesheet" type="text/css" href="css/style.css">
 
+    
+  </head>
 
+  <body>
 
+    <header>
 
+        <a href="personal_acc.html"><img src="img/logo_open.svg" alt="sharix" style="height:42px"></a>
 
+    </header>
 
+    <div class="logout">
 
+        <a href="" class="logoutCircle"><img src="img/Vector.svg"></a>
 
+        <a href="" class="logoutText">Выйти</a>
 
+    </div>
 
+
 
+    <main>
 
+        <div class="column-wrapper req-wrapper">
 
+            <p>Доступна оплата картой и по реквизитам. При оплате заказа банковской картой, обработка платежа происходит на странице платежного провайдера PAYMO.</p> 
+            <p>Вам будет необходимо ввести данные Вашей банковской карты: МИР; VISA International; Mastercard Worldwide.</p>
 
+            <p>Карты только 3D-Secure.</p>
 
+            <form method="" action="">
 
+                <input id="sum" name="sum" type="number" placeholder="Введите необходимую сумму">
 
+                <p>После пополнения, средства можно использовать для оплаты услуг дочерних сервисов.</p>
 
+                <div class="payImages">
 
+                    <img src="img/visa.png">
 
+                    <img src="img/mc.png">
 
+                    <img src="img/mir.png">
 
+                    <img src="img/paymo.png">
 
+                </div>
 
+                <button id="pay" type="submit">Пополнить</button>
 
+                <a href="" id="back">Назад</a>
 
+              </form>
 
+        </div>
 
+        <hr>
 
+        <section class="requisites container-req">
 
+            <h2>Реквизиты</h2>
 
+            <div>
 
+                <p><b>ООО «*name*»</b></p>
 
+                <p>Юридический адрес: <b>*address*</b></p>
 
+                <p>Электронная почта: <a href="mailto:*mail*">*mail*</a></p>
 
+                <p>ИНН: <b>*inn*</b></p>
 
+                <p>Банк: <b>*bank_name*</b></p>
 
+                <p>Бик: <b>*bik*</b></p>
 
+                <p>Расчетный счет: <b>*calculated*</b></p>
 
+                <p>Корреспондентский счет: <b>*correspondent*</b></p>
 
+            </div>
 
+        </section>
 
+    </main>
 
+    
+    <footer class="footer-pay">
 
+        <ul>
 
+            <li id="deleteAcc"><a href="">Удалить аккаунт</a></li>
 
+            <li><a href="">Контакты</a></li>
 
+            <li><a href="">Условия использования</a></li>
 
+            <li><a href="">Политика конфиденциальности</a></li>  
+        </ul>
 
+    </footer>
 
+
 
+  </body>
 
+
 
+</html>

+ 37 - 0
payment_succ.html
View File 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="shortcut icon" type="image/png" href="https://animaproject.s3.amazonaws.com/home/favicon.png" />
 
+    <link rel="stylesheet" type="text/css" href="css/style.css">
 
+    
+  </head>
 
+  <body>
 
+    <header>
 
+        <a href="personal_acc.html"><img src="img/logo_open.svg" alt="sharix" style="height:42px"></a>
 
+    </header>
 
+    <div class="logout">
 
+        <a href="" class="logoutCircle"><img src="img/Vector.svg"></a>
 
+        <a href="" class="logoutText">Выйти</a>
 
+    </div>
 
+
 
+    <main>
 
+        <div class="fullH">
 
+            <p>Оплата прошла успешно!</p>
 
+            <a href="payment.html" id="back">Назад</a>
 
+        </div>
 
+    </main>
 
+    
+    <footer class="getPay-footer">
 
+        <ul>
 
+            <li id="deleteAcc"><a href="">Удалить аккаунт</a></li>
 
+            <li><a href="">Контакты</a></li>
 
+            <li><a href="">Условия использования</a></li>
 
+            <li><a href="">Политика конфиденциальности</a></li>  
+        </ul>
 
+    </footer>
 
+
 
+  </body>
 
+
 
+</html>

+ 37 - 0
payment_unsucc.html
View File 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="shortcut icon" type="image/png" href="https://animaproject.s3.amazonaws.com/home/favicon.png" />
 
+    <link rel="stylesheet" type="text/css" href="css/style.css">
 
+    
+  </head>
 
+  <body>
 
+    <header>
 
+        <a href="personal_acc.html"><img src="img/logo_open.svg" alt="sharix" style="height:42px"></a>
 
+    </header>
 
+    <div class="logout">
 
+        <a href="" class="logoutCircle"><img src="img/Vector.svg"></a>
 
+        <a href="" class="logoutText">Выйти</a>
 
+    </div>
 
+
 
+    <main>
 
+        <div class="fullH">
 
+            <p>Оплата не произошла :(</p>
 
+            <a href="payment.html" id="back">Назад</a>
 
+        </div>
 
+    </main>
 
+    
+    <footer class="getPay-footer">
 
+        <ul>
 
+            <li id="deleteAcc"><a href="">Удалить аккаунт</a></li>
 
+            <li><a href="">Контакты</a></li>
 
+            <li><a href="">Условия использования</a></li>
 
+            <li><a href="">Политика конфиденциальности</a></li>  
+        </ul>
 
+    </footer>
 
+
 
+  </body>
 
+
 
+</html>

+ 132 - 0
personal_acc.html
View File 

@@ -0,0 +1,132 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link rel="shortcut icon" type="image/png" href="https://animaproject.s3.amazonaws.com/home/favicon.png" />
 
+    <link rel="stylesheet" type="text/css" href="css/style.css">
 
+    
+  </head>
 
+  <body>
 
+    <header>
 
+        <a href="personal_acc.html"><img src="img/logo_open.svg" alt="sharix" style="height:42px"></a>
 
+    </header>
 
+    <div class="logout">
 
+        <a href="" class="logoutCircle"><img src="img/Vector.svg"></a>
 
+        <a href="" class="logoutText">Выйти</a>
 
+    </div>
 
+
 
+    <main>
 
+        <div class="container-acc">
 
+
 
+            <div class="person">
 
+                <img src="img/userPhoto.png" id="userPhoto">
 
+                <div class="aboutUser">
 
+                    <p class="name">Антон Долин</p>
 
+                    <p class="email">anton@dolin.ru</p>
 
+                </div>
 
+                <img src="img/settings.svg" id="settings">
 
+            </div>
 
+
 
+
 
+            <div id="myModal" class="modal">
 
+
 
+ 
+                <div class="modal-content">
 
+                  <form method="" action="">
 
+                    <div class="formElement">
 
+                        <p>Имя</p>
 
+                        <input id="name" name="name" type="text" value="Антон">
 
+                      </div>
 
+                    <div class="formElement">
 
+                        <p>Фамилия</p>
 
+                        <input id="surname" name="surname" type="text" value="Долин">
 
+                    </div>
 
+                    <div class="formElement">
 
+                        <p>Электронная почта</p>
 
+                        <input id="email" name="email" type="text" value="anton@dolin.ru">
 
+                    </div>
 
+                    <div class="formElement">
 
+                        <p>Номер телефона</p>
 
+                        <input id="phone" name="phone" type="text" value="+71231231212">
 
+                    </div>
 
+                    <div class="formBtns">
 
+                        <a href="" id="closeModal">Отмена</a>
 
+                        <button id="save" type="submit">Сохранить</button>
 
+                    </div>
 
+                  </form>
 
+                </div>
 
+              
+            </div>
 
+                
+
 
+
 
+            <div class="wrapper bnh">
 
+                <div class="balance">
 
+                    <div class="titleGroup">
 
+                        <h2>Баланс</h2>
 
+                        <a href="" id="plus"><img src="img/plus.svg" id="plus"></a>
 
+                    </div>
 
+                    <p class="balanceValue">1 500 000, 83 &#8381;</p>
 
+                </div>
 
+                <div class="history">
 
+                    <div class="titleGroup">
 
+                        <h2>История</h2>
 
+                        <a href="" id="arrow"><img src="img/arrow.svg" id="plus"></a>
 
+                    </div> 
+                    <a href="" class="historyElement"><p>Покупка курса "Основы работы с ShariX"</p></a>
 
+                </div>
 
+            </div>
 
+
 
+            <section class="myServices">
 
+                <h2>Мои сервисы</h2>
 
+                <div class="wrapper services">
 
+                    <div class="service">
 
+                        <a href=""><img src="img/logo_open.svg"></a>
 
+                    </div>
 
+                    <div class="service">
 
+                        <a href=""><img src="img/logo_open.svg"></a>
 
+                    </div>
 
+                </div>
 
+            </section>
 
+
 
+            <section class="myCourses">
 
+                <h2>Мои курсы</h2>
 
+                <div class="wrapper courses">
 
+                    <a href="">
 
+                        <div class="course">
 
+                            <img src="img/people.svg">
 
+                            <p>Основы работы с ShariX</p>
 
+                        </div>
 
+                    </a>
 
+                    <a href="">
 
+                        <div class="course">
 
+                            <img src="img/iot.svg">
 
+                            <p>Интернет вещей</p>
 
+                        </div>
 
+                    </a>
 
+                    <a href="">
 
+                        <div class="course">
 
+                            <img src="img/arrows.svg">
 
+                                <p>Введение в Sharing-сервисы</p>
 
+                        </div>
 
+                    </a>
 
+                </div>
 
+            </section>
 
+            
+        </div>
 
+    </main>
 
+    
+    <footer>
 
+        <ul>
 
+            <li id="deleteAcc"><a href="">Удалить аккаунт</a></li>
 
+            <li><a href="">Контакты</a></li>
 
+            <li><a href="">Условия использования</a></li>
 
+            <li><a href="">Политика конфиденциальности</a></li>  
+        </ul>
 
+    </footer>
 
+
 
+    <script src="js/script.js"></script>
 
+  </body>
 
+
 
+</html>

Some files were not shown because too many files changed in this diff