TRI-293: add customer-form + adaptive

AuthApp/views.py

@@ -111,11 +111,16 @@ def profile_page_View(request, page_name, id=None):
     page_html = get_profile_page_content_html(request, page_name, id)
     if not page_html:
         raise Http404
+    if page_name == 'create_route_for_customer':
+        tag = 'tb_base2.html'
+    else:
+        tag = 'tb_base.html'
 
     Dict = {
         'page_html': page_html,
         'page_name': page_name,
-        'page_type': 'profile'
+        'page_type': 'profile',
+        'tag': tag
     }
 
     if request.session and 'mailingSubscribeRequired' in request.session and request.session['mailingSubscribeRequired'] == 'true':

RoutesApp/funcs.py

@@ -107,7 +107,7 @@ def get_profile_new_route_page_html(request, data):
         # form.errors.append({'__all__': f'Ошибка: {str(e)}'})
         print(str(e))
 
-    html = render_to_string('blocks/profile/b_new_route.html', Dict, request=request)
+    html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request)
     return html
 
 

TWB/settings.py

@@ -17,6 +17,8 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 
 SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
 CSRF_TRUSTED_ORIGINS = ['https://tripwb.com']
+# hide in production
+#CSRF_TRUSTED_ORIGINS=["http://localhost:3000"]
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/

static/css/critical.css

@@ -0,0 +1 @@
+.container{margin:0 auto;max-width:1280px;position:relative;box-sizing:border-box}.container.black{background-color:#0088cc;height:200px;margin:0}@media (min-width: 1760px){.container{max-width:1720px}}@media (max-width: 1319.98px){.container{max-width:952px}}@media (max-width: 991.98px){.container{width:728px}}@media (max-width: 767.98px){.container{width:536px}}@media (max-width: 575.98px){.container{max-width:100vw;margin:0;padding:0 16px}}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}@media (min-width: 576px){.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}@media (min-width: 768px){.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (min-width: 992px){.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}}@media (min-width: 1320px){.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}}@media (min-width: 1760px){.col-xxl-12{width:100%}.col-xxl-11{width:91.66666667%}.col-xxl-10{width:83.33333333%}.col-xxl-9{width:75%}.col-xxl-8{width:66.66666667%}.col-xxl-7{width:58.33333333%}.col-xxl-6{width:50%}.col-xxl-5{width:41.66666667%}.col-xxl-4{width:33.33333333%}.col-xxl-3{width:25%}.col-xxl-2{width:16.66666667%}.col-xxl-1{width:8.33333333%}}:root{--brand-primary: #FF613A;--brand-white: #fff;--brand-black: #000;--brand-black2: #272424;--brand-grey: #F1F1F1;--brand-grey2: #E6E6E6;--brand-grey3: #7A7979;--brand-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198,199,203,0.2),0 -1px 10px 0 rgba(198,199,203,0.2);--base-border-radius: 10px;--base-border: 2.5px solid #E6E6E6;--base-input-height: 60px;text-align:center;color:var(--brand-black2)}html,body{max-width:100vw;max-height:initial;overflow-x:hidden}html{overflow:hidden}label{display:inline-block}label[required]:before{content:"*";color:var(--brand-primary)}input,textarea{outline:none;border:var(--base-border);border-radius:var(--base-border-radius);height:var(--base-input-height);width:100%;font-size:16px;line-height:22px;cursor:pointer;padding:10px 40px 10px 7px;box-sizing:border-box;max-width:100%}input.date,textarea.date{background:white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat}input.locate,textarea.locate{background:white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat}.btn{display:inline-flex;text-decoration:none;color:black;line-height:22px;border-radius:10px;padding:20px 76px 18px;justify-content:center;align-items:center;margin:0 3px;letter-spacing:0.2px;font-size:18px}.btn--primary{background:var(--brand-primary);color:var(--brand-white)}

static/img/svg/Info3.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#FF613A" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M12 7.5V12.75" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17.25C12.6213 17.25 13.125 16.7463 13.125 16.125C13.125 15.5037 12.6213 15 12 15C11.3787 15 10.875 15.5037 10.875 16.125C10.875 16.7463 11.3787 17.25 12 17.25Z" fill="#FF613A"/>
+</svg>

static/img/svg/MapPinLine.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 29H25" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 17C18.2091 17 20 15.2091 20 13C20 10.7909 18.2091 9 16 9C13.7909 9 12 10.7909 12 13C12 15.2091 13.7909 17 16 17Z" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 13C26 22 16 29 16 29C16 29 6 22 6 13C6 10.3478 7.05357 7.8043 8.92893 5.92893C10.8043 4.05357 13.3478 3 16 3C18.6522 3 21.1957 4.05357 23.0711 5.92893C24.9464 7.8043 26 10.3478 26 13V13Z" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

styles/base/btn.scss

@@ -0,0 +1,20 @@
+@import "variables";
+
+.btn {
+  display: inline-flex;
+  text-decoration: none;
+  color: black;
+  line-height: 22px;
+  border-radius: 10px;
+  padding: 20px 76px 18px;
+  justify-content: center;
+  align-items: center;
+  margin: 0 3px;
+  letter-spacing: 0.2px;
+  font-size: 18px;
+}
+
+.btn--primary {
+  background: var(--brand-primary);
+  color: var(--brand-white);
+}

styles/base/cargo.scss

@@ -0,0 +1,55 @@
+.cargo {
+
+  &--inline {
+    display: inline-block;
+    margin-right: 33px;
+  }
+
+  &--info {
+    label {
+      background: url(/static/img/svg/Info3.svg) right bottom 45% no-repeat;
+      background-size: 20px;
+      padding-right: 26px;
+
+      @media (max-width: $screen-xs-max) {
+        padding-right: 20px;
+      }
+    }
+  }
+
+  input {
+    width: 0;
+    height: 0;
+    display: none;
+
+    &:checked {
+      + label::before {
+        background-color: var(--brand-primary);
+        border-color: var(--brand-primary);
+      }
+    }
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    margin-bottom: 0;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      width: 26px;
+      height: 26px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      border: var(--base-border);
+      border-radius: var(--base-border-radius);
+      margin-right: 10px;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: 50% 50%;
+      background-color: white;
+    }
+  }
+}

styles/base/grid.scss

@@ -0,0 +1,278 @@
+@import "variables";
+
+.container {
+  margin: 0 auto;
+  max-width: $container-xl; //1280
+  position: relative;
+  box-sizing: border-box;
+
+  &.black {
+    background-color: #0088cc;
+    height: 200px;
+    margin: 0;
+  }
+}
+
+@media (min-width: $screen-xxl-min) {
+  .container {
+    max-width: $container-xxl; //1720
+  }
+}
+
+@media (max-width: $screen-lg-max) {
+  .container {
+    max-width: $container-lg; //1720
+  }
+}
+
+@media (max-width: $screen-md-max) {
+  .container {
+    width: $container-md;
+  }
+}
+
+@media (max-width: $screen-sm-max) {
+  .container {
+    width: $container-sm;
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  .container {
+    max-width: 100vw;
+    margin: 0;
+    padding: 0 16px;
+  }
+}
+
+.col-12 {
+  width: 100%
+}
+.col-11 {
+  width: 91.66666667%
+}
+.col-10 {
+  width: 83.33333333%
+}
+.col-9 {
+  width: 75%
+}
+.col-8 {
+  width: 66.66666667%
+}
+.col-7 {
+  width: 58.33333333%
+}
+.col-6 {
+  width: 50%
+}
+.col-5 {
+  width: 41.66666667%
+}
+.col-4 {
+  width: 33.33333333%
+}
+.col-3 {
+  width: 25%
+}
+.col-2 {
+  width: 16.66666667%
+}
+.col-1 {
+  width: 8.33333333%
+}
+
+@media (min-width: $screen-sm-min) {
+  .col-sm-12 {
+    width: 100%
+  }
+  .col-sm-11 {
+    width: 91.66666667%
+  }
+  .col-sm-10 {
+    width: 83.33333333%
+  }
+  .col-sm-9 {
+    width: 75%
+  }
+  .col-sm-8 {
+    width: 66.66666667%
+  }
+  .col-sm-7 {
+    width: 58.33333333%
+  }
+  .col-sm-6 {
+    width: 50%
+  }
+  .col-sm-5 {
+    width: 41.66666667%
+  }
+  .col-sm-4 {
+    width: 33.33333333%
+  }
+  .col-sm-3 {
+    width: 25%
+  }
+  .col-sm-2 {
+    width: 16.66666667%
+  }
+  .col-sm-1 {
+    width: 8.33333333%
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .col-md-12 {
+    width: 100%
+  }
+  .col-md-11 {
+    width: 91.66666667%
+  }
+  .col-md-10 {
+    width: 83.33333333%
+  }
+  .col-md-9 {
+    width: 75%
+  }
+  .col-md-8 {
+    width: 66.66666667%
+  }
+  .col-md-7 {
+    width: 58.33333333%
+  }
+  .col-md-6 {
+    width: 50%
+  }
+  .col-md-5 {
+    width: 41.66666667%
+  }
+  .col-md-4 {
+    width: 33.33333333%
+  }
+  .col-md-3 {
+    width: 25%
+  }
+  .col-md-2 {
+    width: 16.66666667%
+  }
+  .col-md-1 {
+    width: 8.33333333%
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .col-lg-12 {
+    width: 100%
+  }
+  .col-lg-11 {
+    width: 91.66666667%
+  }
+  .col-lg-10 {
+    width: 83.33333333%
+  }
+  .col-lg-9 {
+    width: 75%
+  }
+  .col-lg-8 {
+    width: 66.66666667%
+  }
+  .col-lg-7 {
+    width: 58.33333333%
+  }
+  .col-lg-6 {
+    width: 50%
+  }
+  .col-lg-5 {
+    width: 41.66666667%
+  }
+  .col-lg-4 {
+    width: 33.33333333%
+  }
+  .col-lg-3 {
+    width: 25%
+  }
+  .col-lg-2 {
+    width: 16.66666667%
+  }
+  .col-lg-1 {
+    width: 8.33333333%
+  }
+}
+
+@media (min-width: $screen-xl-min) {
+  .col-xl-12 {
+    width: 100%
+  }
+  .col-xl-11 {
+    width: 91.66666667%
+  }
+  .col-xl-10 {
+    width: 83.33333333%
+  }
+  .col-xl-9 {
+    width: 75%
+  }
+  .col-xl-8 {
+    width: 66.66666667%
+  }
+  .col-xl-7 {
+    width: 58.33333333%
+  }
+  .col-xl-6 {
+    width: 50%
+  }
+  .col-xl-5 {
+    width: 41.66666667%
+  }
+  .col-xl-4 {
+    width: 33.33333333%
+  }
+  .col-xl-3 {
+    width: 25%
+  }
+  .col-xl-2 {
+    width: 16.66666667%
+  }
+  .col-xl-1 {
+    width: 8.33333333%
+  }
+}
+
+@media (min-width: $screen-xxl-min) {
+  .col-xxl-12 {
+    width: 100%
+  }
+  .col-xxl-11 {
+    width: 91.66666667%
+  }
+  .col-xxl-10 {
+    width: 83.33333333%
+  }
+  .col-xxl-9 {
+    width: 75%
+  }
+  .col-xxl-8 {
+    width: 66.66666667%
+  }
+  .col-xxl-7 {
+    width: 58.33333333%
+  }
+  .col-xxl-6 {
+    width: 50%
+  }
+  .col-xxl-5 {
+    width: 41.66666667%
+  }
+  .col-xxl-4 {
+    width: 33.33333333%
+  }
+  .col-xxl-3 {
+    width: 25%
+  }
+  .col-xxl-2 {
+    width: 16.66666667%
+  }
+  .col-xxl-1 {
+    width: 8.33333333%
+  }
+}

styles/base/redefine.scss

@@ -0,0 +1,44 @@
+@import "variables";
+
+header {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+footer {
+  overflow: hidden;
+}
+
+.wrapper_header_content {
+  max-width: initial;
+}
+
+@media only screen and (max-width: $screen-xl-max) {
+
+  section.profile {
+    width: 100%;
+  }
+
+  .info_profile {
+    width: 100%;
+  }
+}
+
+@media (max-width: $screen-sm-max) {
+
+  .menu_buttons.right.open {
+    right: 0;
+    transition: 200ms;
+    position: fixed;
+    display: block;
+    padding-top: 0;
+    top: 45px;
+    background: #ffffff;
+  }
+}
+
+@media (max-width: $screen-sm-max) {
+  .menu_buttons.right.open {
+    //display: none;
+  }
+}

styles/base/typograph.scss

@@ -0,0 +1,67 @@
+@import "variables";
+
+:root {
+  --brand-primary: #{$brand-primary};
+  --brand-white: #{$brand-white};
+  --brand-black: #{$brand-black};
+  --brand-black2: #{$brand-black2};
+  --brand-grey: #{$brand-grey};
+  --brand-grey2: #{$brand-grey2};
+  --brand-grey3: #{$brand-grey3};
+  --brand-orange: #{$brand-orange};
+
+  --box-shadow-primary: #{$box-shadow-primary};
+
+  --base-border-radius: #{$base-border-radius};
+  --base-border: #{$base-border};
+  --base-input-height: #{$base-input-height};
+
+
+  text-align: center;
+  color: var(--brand-black2);
+}
+
+html,
+body {
+  max-width: 100vw;
+  max-height: initial;
+  overflow-x: hidden;
+}
+
+html {
+  overflow: hidden;
+}
+
+label {
+  display: inline-block;
+
+  &[required] {
+
+    &:before {
+      content: "*";
+      color: var(--brand-primary);
+    }
+  }
+}
+
+input, textarea {
+  outline: none;
+  border: var(--base-border);
+  border-radius: var(--base-border-radius);
+  height: var(--base-input-height);
+  width: 100%;
+  font-size: 16px;
+  line-height: 22px;
+  cursor: pointer;
+  padding: 10px 40px 10px 7px;
+  box-sizing: border-box;
+  max-width: 100%;
+
+  &.date {
+    background: white url(/static/img/svg/Calendar.svg) right 2% bottom 45% no-repeat;
+  }
+
+  &.locate {
+    background: white url(/static/img/svg/MapPinLine.svg) right 2% bottom 45% no-repeat;
+  }
+}

styles/base/variables.scss

@@ -0,0 +1,56 @@
+//================================================================================//
+//================================== grid ========================================//
+//================================================================================//
+
+$grid-columns:                      12;
+
+//$grid-gutter-width:                 20px;
+
+// media breakpoints
+$screen-xxl-min:                    1760px;//*
+$container-xxl:                     1720px;//*
+
+$screen-xl-min:                     1320px;
+$container-xl:                      1280px;
+$screen-xl-max:                     ($screen-xl-min - .02);
+
+$screen-lg-min:                     992px;
+$container-lg:                      952px;
+$screen-lg-max:                     ($screen-xl-min - .02);
+
+$screen-md-min:                     768px;
+$container-md:                      728px;
+$screen-md-max:                     ($screen-lg-min - .02);
+
+$screen-sm-min:                     576px;
+$container-sm:                      536px;
+$screen-sm-max:                     ($screen-md-min - .02);
+
+$screen-xs-min:                     0;
+$screen-xs-max:                     ($screen-sm-min - .02);
+
+//================================================================================//
+//================================= colors =======================================//
+//================================================================================//
+$brand-primary:   #FF613A;
+$brand-white:     #FFFFFF;
+$brand-black:     #000000;
+$brand-black2:    #272424;
+$brand-grey:      #F1F1F1;
+$brand-grey2:     #E6E6E6;
+$brand-grey3:     #7A7979;
+$brand-orange:    #FF613A;
+
+
+//================================================================================//
+//================================ Shadow ========================================//
+//================================================================================//
+$box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
+  0 -1px 10px 0 rgba(198, 199, 203, 0.20);
+
+//================================================================================//
+//================================ Inputs ========================================//
+//================================================================================//
+$base-border-radius:        10px;
+$base-border:               2.5px solid $brand-grey2;
+$base-input-height:         60px;

styles/create_poster.scss

@@ -0,0 +1,4 @@
+@import "./base/variables";
+@import "./base/cargo";
+@import "./base/redefine";
+@import "./create_poster/create_poster";

styles/create_poster/create_poster.scss

@@ -0,0 +1,307 @@
+@import "../base/variables";
+
+.poster {
+  text-align: left;
+  box-sizing: border-box;
+  padding-top: 31px;
+
+  @media (max-width: $screen-lg-max) {
+    max-width: 65%;
+  }
+
+  @media (max-width: $screen-md-max) {
+    max-width: 55%;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    max-width: 100%;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    padding-top: 44px;
+  }
+
+  &__title {
+    max-width: 95%;
+    margin: 0 auto 5px;
+    font-size: 44px;
+    font-weight: 700;
+    line-height: 52px;
+    text-align: center;
+
+    @media (min-width: $screen-xl-min) {
+      max-width: 100%;
+      margin-bottom: 21px;
+    }
+
+    @media (max-width: $screen-lg-max) {
+      font-size: 32px;
+      line-height: 38.73px;
+      margin-bottom: 0;
+    }
+
+    @media (max-width: $screen-xs-max) {
+      max-width: 100%;
+    }
+  }
+
+  &__row {
+    display: flex;
+    padding: 40px 0;
+    border-bottom: 1px solid #E6E6E6;
+    gap: 40px;
+
+    @media (min-width: $screen-xl-min) {
+      padding: 39px 0;
+    }
+
+    @media (max-width: $screen-lg-max) {
+      display: block;
+    }
+
+
+    &--from-to {
+
+      @media (max-width: $screen-md-max) {
+        padding-top: 14px
+      }
+
+      @media (max-width: $screen-sm-max) {
+        padding-top: 30px;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        padding-top: 40px;
+      }
+
+
+      label {
+        padding-left: 9px;
+
+        @media (max-width: $screen-lg-max) {
+          padding-left: 0;
+        }
+
+        @media (max-width: $screen-md-max) {
+          padding-left: 11px;
+        }
+      }
+    }
+
+    &--cargo {
+      @media (max-width: $screen-xs-max) {
+        padding-bottom: 29px;
+      }
+    }
+
+    &--date {
+      @media (max-width: $screen-lg-max) {
+        padding-bottom: 20px;
+      }
+
+      label {
+        padding-left: 9px;
+
+        @media (max-width: $screen-lg-max) {
+          margin-bottom: 20px;
+        }
+
+        @media (max-width: $screen-xs-max) {
+          padding-left: 0;
+        }
+      }
+    }
+
+    &--transport {
+
+      @media (max-width: $screen-lg-max) {
+        padding-bottom: 50px;
+      }
+
+      @media (max-width: $screen-md-max) {
+        padding-bottom: 39px;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        padding-top: 42px;
+      }
+
+
+      label {
+        margin-bottom: 20px;
+
+        @media (max-width: $screen-xs-max) {
+          margin-bottom: 19px;
+        }
+      }
+    }
+
+    &--phone {
+
+      @media (max-width: $screen-lg-max) {
+        padding-top: 29px;
+      }
+
+      @media (max-width: $screen-md-max) {
+        padding-top: 38px;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        padding-top: 40px;
+        padding-bottom: 39px;
+      }
+
+      label {
+        padding-left: 9px;
+        margin-bottom: 11px;
+
+        @media (max-width: $screen-lg-max) {
+          padding-left: 0;
+          margin-bottom: 20px;
+        }
+      }
+
+      input {
+        margin-bottom: 21px;
+      }
+    }
+
+    &--description {
+
+      @media (max-width: $screen-md-max) {
+        padding-top: 30px;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        padding-top: 39px;
+      }
+
+      label {
+        padding-left: 9px;
+        margin-bottom: 10px;
+
+        @media (max-width: $screen-lg-max) {
+          padding-left: 0;
+          margin-bottom: 20px;
+        }
+      }
+
+      textarea {
+        min-height: 128px;
+        padding-top: 18px;
+        margin-bottom: 3px;
+
+        @media (max-width: $screen-lg-max) {
+          min-height: 210px;
+          margin-bottom: 6px;
+        }
+
+        @media (max-width: $screen-md-max) {
+          min-height: 305px;
+        }
+      }
+    }
+
+    &--distribution {
+      border-bottom: 0;
+
+      @media (max-width: $screen-lg-max) {
+        padding-bottom: 30px;
+      }
+
+      @media (max-width: $screen-md-max) {
+        padding-top: 38px;
+        padding-bottom: 40px;
+      }
+
+      label {
+        letter-spacing: -0.08px;
+      }
+    }
+  }
+
+  &__col {
+    flex: 1;
+
+    @media (max-width: $screen-lg-max) {
+      &:not(:last-child) {
+
+        margin-bottom: 20px;
+      }
+    }
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+
+    @media (min-width: $screen-xl-min) {
+      max-width: 80%;
+      margin-bottom: 37px;
+    }
+
+    @media (max-width: $screen-lg-max) {
+      grid-template-columns: repeat(auto-fill, 261px);
+    }
+
+    label {
+      margin-bottom: 0;
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+
+  &__info {
+    padding-left: 30px;
+    background: url(/static/img/svg/Info3.svg) left top no-repeat;
+    line-height: 22px;
+
+    @media (max-width: $screen-lg-max) {
+      font-size: 12px;
+      line-height: 20px;
+      max-width: 90%;
+    }
+  }
+
+  &__label {
+    margin-bottom: 10px;
+  }
+
+  &__area-descr {
+    text-align: right;
+    font-size: 14px;
+    line-height: 20px;
+    padding-right: 11px;
+    color: var(--brand-grey3);
+
+    @media (max-width: $screen-sm-max) {
+      padding-right: 0;
+    }
+  }
+
+  &__errors {
+
+    @media (max-width: $screen-lg-max) {
+      margin-bottom: 2px;
+    }
+  }
+
+  .btn {
+    margin: 0;
+
+    @media (max-width: $screen-xs-max) {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+  }
+
+  .cargo {
+
+    &--inline {
+
+      @media (max-width: $screen-sm-max) {
+        width: 100%;
+      }
+    }
+  }
+}

styles/critical.scss

@@ -0,0 +1,4 @@
+@import "./base/variables";
+@import "./base/grid";
+@import "./base/typograph";
+@import "./base/btn";

styles/moover/animate.scss

@@ -1,7 +1,7 @@
 .animate {
   padding: 60px 40px 49px;
   opacity: 0;
-  background-color: var(--color-black2);
+  background-color: var(--brand-black2);
   border-radius: 30px;
   color: white;
   margin-bottom: 160px;

styles/moover/cards.scss

@@ -94,7 +94,7 @@
     }
 
     a {
-      color: var(--color-orange);
+      color: var(--brand-orange);
     }
   }
 

styles/moover/chatterbox.scss

@@ -157,7 +157,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--color-primary);
+      background: var(--brand-primary);
       border: 0;
       border-radius: 50%;
       transition: opacity 100ms linear;

styles/moover/easy.scss

@@ -82,7 +82,7 @@
 
   &__item {
     border-radius: 30px;
-    background-color: var(--color-grey);
+    background-color: var(--brand-grey);
     /*background-color: #a72525;*/
     text-align: left;
     padding: 21px;

styles/moover/header.scss

@@ -18,7 +18,7 @@
     padding-top: 7px;
     padding-bottom: 7px;
     box-shadow: var(--box-shadow-primary);
-    border-bottom: 1px solid var(--color-grey);
+    border-bottom: 1px solid var(--brand-grey);
   }
 
   &__grid,

styles/moover/root.scss

@@ -33,19 +33,19 @@
 }
 
 :root {
-  --color-primary: #FF613A;
-  --color-white: #FFFFFF;
-  --color-black: #000000;
-  --color-black2: #272424;
-  --color-grey: #F1F1F1;
-  --color-grey2: #7A7979;
-  --color-orange: #FF613A;
+  --brand-primary: #FF613A;
+  --brand-white: #FFFFFF;
+  --brand-black: #000000;
+  --brand-black2: #272424;
+  --brand-grey: #F1F1F1;
+  --brand-grey3: #7A7979;
+  --brand-orange: #FF613A;
 
 
   --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
   0 -1px 10px 0 rgba(198, 199, 203, 0.20);
   text-align: center;
-  color: var(--color-black2);
+  color: var(--brand-black2);
 }
 
 html,

styles/moover/use.scss

@@ -56,7 +56,7 @@
     font-size: 18px;
     font-weight: 600;
     line-height: 26px;
-    color: var(--color-grey2);
+    color: var(--brand-grey3);
   }
 
   .title {

templates/blocks/profile/b_create_form_poster.html

@@ -0,0 +1,200 @@
+{% load static %}
+{% load i18n %}
+{% trans "300" as maxLetterLength %}
+
+{% if owner_type == 'customer' %}
+  {% trans "Заполните форму, чтобы отправить посылку" as p_title %}
+{% elif owner_type == 'mover' %}
+  {% trans "Заполните форму, чтобы перевезти посылку" as p_title %}
+{% endif %}
+<link rel="stylesheet" href="{% static 'css/ion.rangeSlider.min.css' %}">
+<link rel="stylesheet" href="{% static 'css/create_poster.css' %}">
+<div hidden>
+  csrfmiddlewaretoken: eoN2nLYYo46PpDIhi82dmTFASHH4ONiBdEQOz1jQNyUpsHJ4RrvcmFwfnM45TNtl
+  type_transport: road
+  from_address_point: 59613
+  from_address_point_txt: Москаленки / Россия
+  to_address_point: 2824
+  to_address_point_txt: Берлар / Бельгия
+  departure_DT: 17.12.2024 23:04
+  arrival_DT: 29.12.2024 20:04
+  from_place: other
+  to_place: other
+  cargo_type: parcel
+  weight: 500
+  phone: 2604195
+  extra_phone: test
+  receive_msg_by_email: on
+  owner_type: customer
+  hiddenTime: 16 декабря 2024 г. 23:04
+</div>
+
+<div class="poster">
+  <h1 class="poster__title">{{ p_title }}</h1>
+
+
+  <form class="poster__form"
+        name="new_route"
+        method="post"
+        id="new_route"
+  >
+    {% csrf_token %}
+    {#from-to#}
+    <div class="poster__row poster__row--from-to">
+      <div class="poster__col">
+        <label for="from" class="poster__label " required>
+          {% translate "Откуда забрать посылку" %}
+        </label>
+        <input type="text" name="from" id="from" class="locate" placeholder="{% translate "Укажите город" %}">
+      </div>
+      <div class="poster__col">
+        <label for="to" class="poster__label " required>
+          {% translate "Куда доставить посылку" %}
+        </label>
+        <input type="text" name="to" id="to" class="locate" placeholder="{% translate "Укажите город" %}">
+      </div>
+    </div>
+    {#cargo-type#}
+    <div class="poster__row poster__row--cargo">
+      <div class="poster__col col-12">
+        <label class="poster__label col-12" required>
+          {% translate "Выберите кого (что) вы можете перевезти:" %}
+        </label>
+        <div class="poster__grid">
+
+          {% for item in form.fields.cargo_type.choices %}
+            <div class="cargo">
+              <input
+                  class="cargo__inp"
+                  type="radio"
+                  name="cargo_type"
+
+                  id="cargo_type_{{ forloop.counter }}"
+                  required
+                  value="{{ item.0 }}"
+                  {% if item.checked %}
+                  checked="checked"
+                  {% endif %}
+              />
+
+              <label class="cargo__label"
+                     for="cargo_type_{{ forloop.counter }}">
+                <span>{{ item.1 }}</span>
+              </label>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+    {#date-poster#}
+    <div class="poster__row poster__row--date">
+      <div class="poster__col">
+
+        <label from="date-to" required class="poster__label col-12 ">
+          {% translate "Дата доставки посылки" %}
+        </label>
+        <input type="text" name="date-to" class="poster__date date">
+      </div>
+      <div class="poster__col"></div>
+    </div>
+    {#type-transport#}
+    <div class="poster__row poster__row--transport">
+      <div class="poster__col col-12">
+
+        <label for="type_transport" class="poster__label col-12" required>
+          {% translate "Каким способом Вы хотите отправить?" %}
+        </label>
+        {% for item in form.fields.type_transport.choices %}
+          <div class="cargo cargo--inline">
+            <input
+                class="cargo__inp"
+                type="radio"
+                name="type_transport"
+                id="type_transport_{{ forloop.counter }}"
+                value="{{ item.0 }}"
+                {% if form.initial.type_transport == item.0 %}
+                checked="checked"
+                {% endif %}
+            >
+            <label class="cargo__label"
+                   for="type_transport_{{ forloop.counter }}">
+              <span>{{ item.1 }}</span>
+            </label>
+          </div>
+        {% endfor %}
+        <div class="poster__errors">
+
+        </div>
+        <div class="poster__info">
+          {% translate "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" %}
+        </div>
+      </div>
+    </div>
+    {#phone#}
+    <div class="poster__row poster__row--phone">
+      <div class="poster__col col-12">
+
+        <label for="phone" class="col-12">
+          {% translate "Контактный номер телефона, по которому с Вами могут связаться перевозчики" %}
+        </label>
+        <input class="col-12 col-xl-6" type="tel" placeholder="{% translate "Укажите телефон" %}">
+        <div class="poster__info">
+          {% translate "Если вы оставите это поле пустым - перевозчики смогут только написать вам в личные сообщения на нашем сайте TripWB.com" %}
+        </div>
+      </div>
+    </div>
+    {#description#}
+    <div class="poster__row poster__row--description">
+      <div class="poster__col col-12">
+
+        <label for="description" class="col-12">
+          {% translate "Примечание (необязательно)" %}
+        </label>
+        <textarea
+            name="description"
+            id="description"
+            maxlength="{{ maxLetterLength }}"
+            placeholder="{% translate "Если желаете, то здесь можно указать важную информацию, например: вес, габариты посылки, количество попутчиков и т.д.)" %}"
+        ></textarea>
+        <div class="poster__area-descr">
+          <span class="js-letter-count">0</span>
+          {% translate "из" %}
+          {{ maxLetterLength }}
+          {% translate "символов" %}
+        </div>
+      </div>
+    </div>
+    {#distribution#}
+    <div class="poster__row poster__row--distribution">
+      <div class="cargo cargo--info">
+
+        <input type="checkbox"
+               name="receive_msg_by_email"
+               class="cargo__inp"
+            {% if form.initial.receive_msg_by_email == True %}
+               checked="checked"
+            {% endif %}
+               id="id_receive_msg_by_email">
+
+        <label class="cargo__label" for="id_receive_msg_by_email">
+          {% translate "Хочу получать уведомления на E-mail о появлении перевозчика по моим критериям" %}
+        </label>
+      </div>
+
+
+
+      {% if not errors_off and form.errors and form.errors.receive_msg_by_email %}
+        {{ form.errors.receive_msg_by_email }}
+      {% endif %}
+    </div>
+
+    <button type="submit"
+            class="btn btn--primary col-12"
+            onclick="sendRoute(this,
+                {% if route.id %}{{ route.id }}{% endif %})"
+    >
+      {% translate "Разместить объявление" %}
+    </button>
+
+  </form>
+</div>

templates/pages/profile/p_user_profile.html

@@ -1,4 +1,4 @@
-{% extends 'tb_base.html' %}
+{% extends tag %}
 {% load static %}
 {% load i18n %}
 

templates/tb_base2.html

@@ -0,0 +1,172 @@
+{% load static %}
+{% load tt_chat %}
+{% load i18n %}
+{% load webpush_notifications %}
+
+<!DOCTYPE html>
+<html lang="{{ request.LANGUAGE_CODE }}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,height=device-height">
+  {% if page.description %}
+    <meta name="description" content="{{ page.description }}">
+  {% else %}
+    {% block default_meta_description %}{% endblock %}
+  {% endif %}
+  <meta name="vapid-key" content="{{ vapid_key }}">
+  {% webpush_header %}
+  <meta name="google-site-verification" content="4V4upJSK2_4MBrr5ZXjcCLw3bBwXc4_gsnKudJAaWqI"/>
+  <meta name="yandex-verification" content="b8a976575e41fbbc"/>
+
+  {% include "inter/meta_OpenGraph_Schema.html" %}
+
+
+  <!-- Event snippet for Sign-up conversion page
+  In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
+  <script>
+    function gtag_report_conversion(url) {
+      var callback = function () {
+        if (typeof (url) != 'undefined') {
+          window.location = url;
+        }
+      };
+      gtag('event', 'conversion', {
+        'send_to': 'AW-16654215692/tPyZCPyJgcYZEIzUrIU-',
+        'event_callback': callback
+      });
+      return false;
+    }
+  </script>
+
+  <title>
+    {% if page.title %}
+      {{ page.title }}
+    {% else %}
+      {% block title %}{% endblock %}
+    {% endif %}
+  </title>
+
+  {% include "inter/meta_names.html" %}
+  <script type="text/javascript" src="{% static "js/jquery_3_2_1.js" %}"></script>
+  <script type="text/javascript" src="{% static "js/moment_js.js" %}"></script>
+  <script type="text/javascript" src="{% static "js/moment-with-locales.js" %}"></script>
+  <script type="text/javascript" src="{% static "js/datarangepicker.js" %}"></script>
+  <script type="text/javascript" src="{% static "js/push/registerSw.js" %}"></script>
+  <script src="{% static "js/rangecalendartech.js" %}"></script>
+
+  <link rel="stylesheet" href="{% static 'css/datarangepicker.css' %}"/>
+  <script src="{% static "js/global_js.js" %}"></script>
+  <script src="{% static "js/chat_socket_start.js" %}"></script>
+  {% if user and not user.is_anonymous %}
+    {% include "connect_ws_js.html" %}
+    <script src='{% static "js/chat_sockets.js" %}'></script>
+    <script>
+
+      {#var user_id = {{ user.id }}#}
+      {% if prod %}
+        ws_url = `wss://{% get_ws_address %}/ws/socket-server/?user_id={{ user.id }}`;
+      {% else %}
+        ws_url = `ws://{% get_ws_address %}/ws/socket-server/?user_id={{ user.id }}`;
+      {% endif %}
+      var chatSocket;
+      init_ws()
+      const beep = new Audio('/static/sounds/beep_2.mp3')
+    </script>
+
+  {% endif %}
+
+
+
+  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+  <link rel="stylesheet" href="{% static 'css/styles(boris).css' %}">
+  <link rel="stylesheet" href="{% static 'css/mobile_styles.css' %}">
+
+
+  <link rel="stylesheet" href="{% static 'css/critical.css' %}">
+
+  <script src='{% static "js/find_route.js" %}'></script>
+  <script src="{% static "js/filters_functions_find_route.js" %}"></script>
+  <script src="{% static "js/dynamic_loading_routes.js" %}"></script>
+  <script src="{% static "js/user_profile.js" %}"></script>
+  <script src="{% static "js/user_profile_2.js" %}"></script>
+  <script src="{% static "js/ion.rangeSlider.min.js" %}"></script>
+  <link rel="stylesheet" href="{% static "css/ion.rangeSlider.min.css" %}">
+
+
+  <script src="{% static "js/range_calendar.js" %}"></script>
+
+  <link rel="icon" href="{% static 'favicon/favicon.svg' %}" sizes="any" type="image/svg+xml">
+  <link rel="apple-touch-icon" sizes="57x57" href={% static 'favicon/apple-icon-57x57.png' %}>
+  <link rel="apple-touch-icon" sizes="60x60" href={% static "favicon/apple-icon-60x60.png" %}>
+  <link rel="apple-touch-icon" sizes="72x72" href={% static "favicon/apple-icon-72x72.png" %}>
+  <link rel="apple-touch-icon" sizes="76x76" href={% static "favicon/apple-icon-76x76.png" %}>
+  <link rel="apple-touch-icon" sizes="114x114" href={% static "favicon/apple-icon-114x114.png" %}>
+  <link rel="apple-touch-icon" sizes="120x120" href={% static "favicon/apple-icon-120x120.png" %}>
+  <link rel="apple-touch-icon" sizes="144x144" href={% static "favicon/apple-icon-144x144.png" %}>
+  <link rel="apple-touch-icon" sizes="152x152" href={% static "favicon/apple-icon-152x152.png" %}>
+  <link rel="apple-touch-icon" sizes="180x180" href={% static "favicon/apple-icon-180x180.png" %}>
+  <link rel="icon" type="image/png" sizes="192x192" href={% static "favicon/android-icon-192x192.png" %}>
+  <link rel="icon" type="image/png" sizes="32x32" href={% static "favicon/favicon-32x32.png" %}>
+  <link rel="icon" type="image/png" sizes="96x96" href={% static "favicon/favicon-96x96.png" %}>
+  <link rel="icon" type="image/png" sizes="16x16" href={% static "favicon/favicon-16x16.png" %}>
+
+
+  {% block meta %}
+  {% endblock %}
+
+</head>
+
+<body>
+<div
+    class="block_overlay  {% if page_type == 'profile' %}hidden{% elif page_type == 'routes' %} routes n_profile hidden{% else %}hidden n_profile{% endif %}"
+    onclick="close_open_curtain()">
+</div>
+
+<div class="container">
+
+  {# header#}
+  {% include 'blocks/b_header.html' %}
+
+  {#aside#}
+  <div class="cut_width_f_curtain close{% if page_type == 'profile' %}{% else %} n_profile{% endif %} right"
+       onclick="reAdressClickOnbackrground(event,this)">
+    <div
+        class="menu_buttons curtain right {% if page_type == 'profile' %}padding_remove {% if not mobile %}open{% else %}close{% endif %}{% else %} n_profile close{% endif %}"
+        data-name="<img style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);' src='{% static "/img/svg/burger.svg" %}'>">
+
+      {% include "blocks/profile/b_buttons_menu_profile.html" %}
+      <div class="handler_menu close" onclick="open_curtain_w_btn_profile()">
+        <img class="btns_f_curtain close left" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+        <div class="text_f_curtain left"><img
+            style='width: 15px;display: block;position: relative;bottom: 0;transform: rotate(270deg);'
+            src='{% static "/img/svg/burger.svg" %}'></div>
+        <img class="btns_f_curtain close right" src="{% static 'img/svg/arrow_f_curtain.svg' %}">
+        <div class="clear_both"></div>
+      </div>
+    </div>
+  </div>
+
+  {#content#}
+  {% block content %}
+  {% endblock %}
+
+  <div class="clear_both"></div>
+
+</div>
+
+{#footer#}
+{% include 'blocks/b_footer.html' %}
+
+{#before_close#}
+<script>
+  let tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  if (!tz) {
+    tz = "UTC"
+  }
+  document.cookie = "user_tz=" + tz + ";path=/";
+</script>
+{% block before_close %}
+{% endblock %}
+</body>
+</html>