0.0.288

add profile page

static/css/styles(boris).css

@@ -14,12 +14,30 @@
     text-align: -webkit-center;
     width: 100%;
 
+}
+.text-align-right{
+    text-align: -webkit-right;
+    width: 100%;
+
+}
+.text-align-left{
+    text-align: -webkit-left;
+    width: 100%;
+
 }
 
 .w-68{
     width: 68%;
 }
 
+.width-50{
+    width: 50%;
+}
+
+.pointer{
+    cursor: pointer;
+}
+
 .f-r{
     float: right;
 }
@@ -1946,4 +1964,141 @@
     background: #dad7d7;
     width: 100%;
     top: 60px;
+}
+
+/*profile block*/
+
+
+.block_inf_profile{
+    width: 100%;
+    padding-bottom: 20px;
+    border-bottom:1px solid #E6E6E6;
+}
+
+.img_user{
+    object-fit: cover;
+    height: 110px;
+    width: 110px;
+}
+
+.upload_photo_container{
+    position: relative;
+}
+
+.btn_f_upload_photo{
+    opacity: 0;
+    position: absolute;
+    height: 110px;
+    width: 110px;
+    left: 0;
+}
+
+.upload_photo_label{
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
+    color: #27242499;
+}
+
+.select_f_profile_status{
+    border: 1px solid #E6E6E6;
+    display: block;
+    height: 62px;
+    width: 100%;
+    border-radius: 10px;
+    padding: 0;
+    color: #272424;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    margin-top: 0;
+    padding-left: 10px;
+    appearance: none;
+    background: white url(/static/img/png/icon-arrow.svg) no-repeat calc(100% - 15px) center;
+}
+.input_f_profile{
+    display: block;
+    height: 20px;
+    width: calc(100% - 30.4px);
+    float: left;
+    background-image: none !important;
+    padding: 20px 15.2px;
+    border: 1px solid #E6E6E6;
+    color: #272424;
+    font-size: 16px;
+    font-weight: 400;
+    border-radius: 10px;
+}
+
+.status_f_profile{
+    width: calc(100% - 120px);
+    padding-left: 10px;
+}
+
+.status_label{
+    font-size: 18px;
+    font-weight: 600;
+    color: #272424;
+    padding-bottom: 5px;
+}
+
+.cur_subscribe_label{
+    font-weight: 600;
+    font-size: 18px;
+    color: #272424;
+    padding-bottom: 5px;
+}
+
+.cur_subscribe_f_profile{
+    color: #FF613A;
+    font-size: 18px;
+    font-weight: 600;
+    padding-bottom: 5px;
+}
+
+.btn_go_to_subscribes{
+    text-decoration: underline;
+    color: #27242499;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+.label_f_profile{
+    color: #272424;
+    font-size: 16px;
+    font-weight: 500;
+    display: block;
+    padding-bottom: 10px;
+    padding-left: 10px;
+}
+
+.container_el_form_profile{
+    width: 49%;
+    margin: 0 0.5% 0.5% 0.5%;
+}
+
+.container_form_profile{
+    padding-top: 40px;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.line_f_form_profile{
+    height: 1px;
+    background: #E6E6E6;
+    margin: 40px 0;
+    width: 100%;
+}
+
+.confirm_profile_btn{
+    width: 100%;
+    height: 60px;
+    background: #FF613A;
+    color: #FFFFFF;
+    margin-top: 40px;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 18px;
 }

static/js/user_profile_2.js

@@ -220,6 +220,20 @@ async function attachFilemeassge (el,id_ticket=null,sender,receiver){
 
 
 
+}
+
+
+function upload_photo_f_profile (el) {
+    let file = el.files[0]
+    let Blob = new Blob(file)
+    Blob.onload(function (){
+        let url = URL.createObjectURL(Blob)
+        let insert_place = document.querySelector(".img_user")
+        if (insert_place){
+            insert_place.src = url
+        }
+    })
+
 }
 
 

templates/blocks/b_header.html

@@ -58,7 +58,7 @@
                         </div>
                     </div>
                     <div class="menu_profile_btn">
-                        {% if user_subscribe %}<div class="subscribe_type_txt"><span class="f-l">Подписка:</span> <span class="f-r">{{ user_subscribe }}</span></div>{% endif %}
+                        {% if user_subscribe %}<div class="subscribe_type_txt"><span class="f-l">Подписка:</span> <span class="f-r">{{ user_subscribe.subscribe.name }}</span></div>{% endif %}
                         <a class="btn_menu_profile" href="{% url "user_profile" %}" >Перейти в профиль</a>
                         <a class="btn_menu_profile" href="{% url 'profile_page' 'create_route_for_mover' %}">Перевезти посылку</a>
                         <a class="btn_menu_profile" href="{% url 'profile_page' 'create_route_for_customer' %}">Отправить посылку</a>

templates/blocks/profile/b_profile.html

@@ -1 +1,66 @@
-<div>Мой профиль</div>
+{% load static %}
+
+<div class="block_inf_profile">
+    <div class="f-l width-50">
+        <div class="upload_photo_container f-l">
+            <img class="img_user" src="{% static "img/svg/User.svg" %}">
+            <input type="file" onchange="upload_photo_f_profile(this)" class="btn_f_upload_photo" id="id_btn_f_upload_photo">
+            <label class="upload_photo_label" for="id_btn_f_upload_photo">Загрузить фото</label>
+        </div>
+        <div class="status_f_profile f-r">
+            <div class="status_label">Статус:</div>
+            <select class="select_f_profile_status">
+                <option>asd</option>
+            </select>
+        </div>
+        <div class="clear_both"></div>
+    </div>
+    <div class="f-r width-50">
+        <div class="f-r">
+            <div class="cur_subscribe_label">Текущая подписка:</div>
+            <div class="cur_subscribe_f_profile">Стандарт</div>
+            <div class="btn_go_to_subscribes pointer" onclick="mySubscription(this)">Перейти к подпискам</div>
+        </div>
+        <div class="clear_both"></div>
+    </div>
+    <div class="clear_both"></div>
+</div>
+<div class="container_form_profile">
+    <div class="container_el_form_profile">
+        <label class="label_f_profile" for="name"><span class="orange-text">*</span> Ваше имя</label>
+        <input class="input_f_profile" type="text" id="name" name="name">
+    </div>
+    <div class="container_el_form_profile">
+        <label class="label_f_profile" for="id_surname"><span class="orange-text">*</span> Ваша фамилия</label>
+        <input class="input_f_profile" type="text" id="id_surname" name="surname">
+    </div>
+    <div class="container_el_form_profile">
+        <label class="label_f_profile" for="id_phone_profile"><span class="orange-text">*</span> Номер телефона</label>
+        <input class="input_f_profile" type="text" id="id_phone_profile" name="phone">
+    </div>
+    <div class="container_el_form_profile">
+        <label class="label_f_profile" for="id_email"><span class="orange-text">*</span> Е-mail</label>
+        <input class="input_f_profile" type="text" id="id_email" name="email">
+    </div>
+    <div class="container_el_form_profile">
+        <label class="label_f_profile" for="id_country"><span class="orange-text">*</span> Страна проживания</label>
+        <input class="input_f_profile" type="text" id="id_country" name="country">
+    </div>
+    <div class="container_el_form_profile">
+        <label class="label_f_profile" for="id_city"><span class="orange-text">*</span> Город проживаня</label>
+        <input class="input_f_profile" type="text" id="id_city" name="city">
+    </div>
+
+    <div class="line_f_form_profile"></div>
+
+    <div class="container_el_form_profile">
+        <label class="label_f_profile" for="id_password"><span class="orange-text">*</span> Новый пароль</label>
+        <input class="input_f_profile" type="text" id="id_password" name="password">
+    </div>
+    <div class="container_el_form_profile">
+        <label class="label_f_profile" for="id_confirm_password"><span class="orange-text">*</span> Подвердить пароль</label>
+        <input class="input_f_profile" type="text" id="id_confirm_password" name="confirm_password">
+    </div>
+    <button class="confirm_profile_btn">Сохарнить</button>
+
+</div>