1.1.43 add popup display functionality with cookie-based visibility control

static/css/mobile_styles.css

@@ -1510,6 +1510,10 @@
     width: 153px;
 }
 
+    .popup_content{
+        width: 41%;
+    }
+
 }
 
 @media (max-width: 950px){
@@ -1554,6 +1558,9 @@
     .pag_news_item_text{
         width: unset;
     }
+    .popup_content{
+        width: 52%;
+    }
 }
 @media (max-width: 850px){
 
@@ -1687,6 +1694,9 @@
     .marker_messages_mobile.show{
         display: block;
     }
+    .popup_content>.confirm_profile_btn{
+        width: 90%;
+    }
 }
 
 @media (max-width: 828px){
@@ -1844,6 +1854,9 @@
     .inf_carrier_icon{
         /*width: 3%;*/
     }
+    .popup_content{
+        width: 70%;
+    }
 }
 @media (max-width: 687px){
     /*.to_address_point_txt.find_route {*/

static/css/styles(boris).css

@@ -3008,6 +3008,8 @@ a.open_inf_carrier{
     display: none;
 }
 
+
+
 .cookie_block.show{
     display: block;
 }
@@ -3034,4 +3036,63 @@ a.open_inf_carrier{
     height: 25px;
     width: 95px;
     cursor: pointer;
+}
+
+/*popup*/
+.popup_wrapper{
+    display: none;
+    position: fixed; /* Используйте fixed, чтобы попап оставался на месте при прокрутке */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.popup_wrapper.show{
+    display: flex;
+}
+.popup_content{
+  position: relative;
+    width: 38%;
+    height: fit-content;
+    background: #FFFFFF;
+    border-radius: 15px;
+    text-align: center;
+    padding: 28px;
+    font-family: Inter;
+
+}
+.popup_cross{
+    position: absolute;
+    right: 5%;
+}
+.popup_img>img{
+    background: #E1E1E1;
+    border-radius: 39px;
+    padding: 5px;
+}
+.popup_title{
+    font-weight: 700;
+    font-size: 34px;
+    margin-top: 20px;
+}
+.popup_text{
+    line-height: 30px;
+    font-size: 20px;
+    margin-top: 10px;
+    color: #6F6C90;
+}
+.popup_content>.confirm_profile_btn{
+    width: 62%;
+}
+#poup_text_bold{
+    font-weight: 700;
+    color: #1d1e20;
+}
+#authenticated_img{
+    display: none;
 }

static/js/authorization.js

@@ -20,6 +20,7 @@ function SendLoginForm(el){
         data: formData,
         success: function(data){
 
+
             location.href = data.redirect_url//`/profile/page/dashboard/`
             window.sessionStorage.removeItem('mailingSubscribeRequired')
             window.sessionStorage.removeItem('email')
@@ -29,6 +30,8 @@ function SendLoginForm(el){
 
 
 
+
+
         },
         error: function (data, exception){
             document.querySelector(".login").innerHTML = data.responseJSON.html

static/js/global_js.js

@@ -227,6 +227,12 @@ function checkStateCookie () {
     if (!window.document.cookie.includes("allow_cookie=true")){
         document.querySelector(".cookie_block").classList.add("show")
     }
+    if (!window.document.cookie.includes("popup_show=false")){
+        document.querySelector(".popup_wrapper").classList.add("show")
+    }
+    if(!window.document.cookie.includes("first_authorization=true") && window.document.getElementById('authenticated_img')){
+        document.querySelector(".popup_wrapper").classList.add("show")
+       }
     if (window.document.cookie.includes("twb_new_messages=true")){
         if (getInfoAboutUser('screen_width') < 800) {
             let marker_new_messages = document.querySelector(".marker_messages_mobile");
@@ -258,12 +264,22 @@ function getCsrfCookie () {
     return csrf
 }
 
-function setCokie (days,name,val) {
+function setCokie (days,name,val, url = null) {
     let date = new Date();
     // let days = 182;
     date.setTime(+ date + (days * 86400000));
     window.document.cookie = `${name}=${val}` + "; expires=" + date.toGMTString() + "; path=/";
-    document.querySelector(".cookie_block").classList.remove("show")
+
+    if(name === 'allow_cookie' ){
+        document.querySelector(".cookie_block").classList.remove("show")
+    } else if(name === 'popup_show'){
+        document.querySelector(".popup_wrapper").classList.remove("show")
+        if(url){
+            window.location.href = url}
+    } else if (name === 'first_authorization'){
+         document.querySelector(".popup_wrapper").classList.remove("show")
+    }
+
     // return value;
 }
 

templates/tb_base.html

@@ -119,6 +119,38 @@
 </head>
 
 <body{% if page_type == 'routes' %} onscroll="scroll_ev(event,this)"{% endif %}>
+
+    <div class="popup_wrapper">
+        {% if not user.is_authenticated %}
+            <div class="popup_content">
+                <div class="popup_cross" onclick="setCokie(182,'popup_show','false')">
+                    <img src="/static/img/svg/cross_popup.svg" alt="">
+                </div>
+                <div class="popup_img"><img src="/static/img/svg/close_gift.svg" alt=""></div>
+                <div class="popup_title">{% translate "Попробуй бесплатно" %}</div>
+                <div class="popup_text">{% blocktranslate %} Зарегистрируйся сейчас и получи бонус <br> <span id="poup_text_bold">3 месяца бесплатного пользования!</span> {% endblocktranslate %}</div>
+                <button class="confirm_profile_btn" onclick="setCokie(182,'popup_show','false', '{% url "login_profile" %}')">{% translate "Зарегистрироваться" %}</button>
+            </div>
+
+        {% endif %}
+{#    ДОБАВИТЬ ПРОВЕРКУ НА ДАТУ РЕГИСТРАЦИИ ЧТОБЫ ПОПАП НЕ ПОЯВЛЯЛСЯ У ВСЕХ ЭТО ВРЕМЕННО#}
+        {% if user.is_authenticated %}
+            <div class="popup_content">
+                <div class="popup_cross" onclick="setCokie(182,'first_authorization','true')">
+                    <img src="/static/img/svg/cross_popup.svg" alt="">
+                </div>
+                <div class="popup_img">
+                    <img src="/static/img/svg/open_gift.svg" alt="">
+                </div>
+                <div class="popup_title">{% translate "Добро пожаловать!" %}</div>
+                <div class="popup_text">{% blocktranslate %} Команда Trip With Bonus <br> поздравляет вас с регистрацией и дарит <br> <span id="poup_text_bold">3 месяца бесплатного пользования сервисом</span> {% endblocktranslate %}</div>
+                <button class="confirm_profile_btn" onclick="setCokie(182,'first_authorization','true')">{% translate "Забрать подарок" %}</button>
+                <div  id="authenticated_img"></div>
+            </div>
+
+        {% endif %}
+    </div>
+
     <div class="cookie_block">
         <div class="container_content_cookie_block">
             <div class="txt_cookie">{% translate "Сайт использует файлы cookie. Просматривая этот сайт, Вы соглашаетесь" %}