0.0.1 new functional twb

static/v2/css/blocks/b_make_poster_order.css

@@ -0,0 +1,13 @@
+.b_make_poster_order {
+    --title-font-size: 44px;
+    --title-font-weight: 700;
+    --title-margin-bottom: 60px;
+
+    .make_poster_order_title{
+        width: 100%;
+        font-size: var(--title-font-size);
+        font-weight: var(--title-font-weight);
+        margin-bottom: var(--title-margin-bottom);
+        text-align: center;
+    }
+}

static/v2/css/forms.css

@@ -0,0 +1,49 @@
+.field_container{
+    --input-border: #E6E6E6;
+    --input-font-size: 16px;
+    --input-border-radius: 10px;
+
+    --placeholder-color: #27242499;
+    --placeholder-font-size: 16px;
+
+    --label-color: #000;
+    --label-required-color: #FF613A;
+    --label-font-size: 16px;
+    --label-font-weight: 500;
+
+    label{
+        display: block;
+        color: var(--label-color);
+        font-weight: var(--label-font-weight);
+        &:has(div){
+            display: flex;
+            align-items: center;
+        }
+        .required_field_icon{
+            color: var(--label-required-color);
+        }
+    }
+
+    input{
+        padding: 20px 10px;
+        border: 1px solid var(--input-border);
+        border-radius: var(--input-border-radius);
+        font-size: var(--input-font-size);
+        &::placeholder{
+            font-size: var(--placeholder-font-size);
+            color: var(--placeholder-color);
+        }
+    }
+}
+
+.form_line{
+    --display: flex;
+    &._50_grid {
+        --display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 40px;
+    }
+    display: var(--display);
+    justify-content: space-between;
+
+}

static/v2/css/widgets/w_select_country.css

@@ -0,0 +1,59 @@
+.w_select_country {
+    position: relative;
+    --header-padding: 10px 20px;
+    --select-border: #E6E6E6;
+    --select-border-radius: 10px;
+
+    .w_select_country_header{
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        justify-content: space-between;
+        border: 1px solid var(--select-border);
+        border-radius: var(--select-border-radius);
+        padding: 10px;
+
+        .select_country_header_left_part{
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            width: calc(100% - 36px);
+
+            .container_inf_about_country{
+                display: none;
+                align-items: center;
+                gap: 5px;
+                &:has(img[src]){
+                    display: flex;
+                }
+                img{
+                    height: 12px;
+                    width: 24px;
+                    object-fit: contain;
+                }
+                div{
+                    color: #27242499;
+                    font-size: 14px;
+                }
+            }
+            input{
+                border: none;
+                outline: none;
+                background: none;
+                padding: 0;
+                flex-grow: 1;
+                border-radius: 0;
+            }
+        }
+        .w_select_country_icon{
+            height: 26px;
+        }
+    }
+    .w_select_country_content{
+        position: absolute;
+        top: 60px;
+    }
+    &.closed{
+        .w_select_country_content{display: none}
+    }
+}

static/v2/icons/widgets/w_select_country/pin.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>

static/v2/js/service/api.js

@@ -0,0 +1,33 @@
+class api {
+    constructor(props) {
+        this.url = props.url;
+        this.data = props.data;
+        this.data_type = props.data_type;
+        this.type = props.type || 'POST';
+        this.success_callback = props.success;
+        this.error_callback = props.error_callback;
+    }
+
+    ajaxRequest (){
+        if (!this.url) return;
+
+        let request_data = {
+            headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
+            url: this.url,
+            type: this.type,
+            data: this.data,
+            success: function (data) {
+                if (this.success_callback) this.success_callback(data)
+            }, error: function (data) {
+                if (this.error_callback) this.error_callback(data)
+            }
+        }
+
+        if (this.data_type === 'formData'){
+            request_data.processData = false
+            request_data.contentType = false
+        }
+
+        $.ajax(request_data);
+    }
+}

static/v2/js/widgets/w_select_country.js

@@ -0,0 +1,42 @@
+function toggleSelectCountry(el, callback) {
+    if (!el) return;
+
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    if ($parent.classList.contains('closed')) {
+        openSelectCountry(el, callback)
+    } else {
+        closeSelectCountry(el, callback);
+    }
+}
+
+function openSelectCountry(el, callback) {
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    $parent.classList.remove('closed');
+
+    if (callback) callback('opened', $parent);
+}
+
+function closeSelectCountry(el, callback) {
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    $parent.classList.add('closed');
+
+    if (callback) callback('closed', $parent);
+}
+
+function searchCountry(el) {
+    let request = new api({
+        url: '',
+        data: '',
+        data_type: 'formData',
+        success: function (data) {
+        }, error: function (data) {
+        }
+    });
+    request.ajaxRequest()
+}