<!DOCTYPE html>
<html lang="en" dir="rtl">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="multikit">
    <meta name="keywords" content="multikit">
    <title>مولتی کیت - قالب Html چند منظوره</title>
    <link rel="manifest" href="../manifest.json">
    <meta name="theme-color" content="#ff8d2f">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="multikit">
    <meta name="msapplication-TileImage" content="assets/images/favicon/1.svg">
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" type="image/x-icon" href="assets/images/favicon/2.svg">
    <link rel="shortcut icon" href="../" type="image/x-icon">

    <!-- Google font css link  -->
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&amp;display=swap" rel="stylesheet">

    <!-- Loader Normalize css -->
    <link rel="stylesheet" type="text/css" href="assets/css/normalize.min.css">

    <!-- Bootstrap css -->
    <link id="rtl-link" rel="stylesheet" type="text/css" href="assets/css/vendors/bootstrap.css">

    <!-- Swiper css -->
    <link rel="stylesheet" type="text/css" href="assets/css/vendors/swiper/swiper-bundle.min.css">

    <!-- Remix Icon css -->
    <link rel="stylesheet" type="text/css" href="assets/css/remixicon.css">

    <!-- Style css -->
    <link id="change-link" rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!-- Custom styles -->
    <style>
        #content {
            display: none;
        }

        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        #error-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
            font-size: 24px;
            color: rgb(56, 54, 54);
            text-align: center;
            margin-top: 20px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const input_data = window.Kodular.getWebViewString();
            const base_url = input_data.base_url;
            const access_token = input_data.access_token;
            let responseJsonData = null;

            const loadingElement = document.getElementById('loading');
            const errorMessageElement = document.getElementById('error-message');
            const contentElement = document.getElementById('content');

            fetch(base_url, {
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + access_token
                }
            })
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    errorMessageElement.textContent = 'خطایی رخ داده است: ' + response.status.toString();
                    window.Kodular.setWebViewString(response.status.toString());
                    throw new Error('Network response was not ok');
                }
            })
            .then(data => {
                responseJsonData = data;
                loadingElement.style.display = 'none';
                errorMessageElement.style.display = 'none';
                contentElement.style.display = 'block'; 
            })
            .catch(error => {
                loadingElement.style.display = 'none'; 
                errorMessageElement.textContent = 'مشکلی در اتصال به شبکه رخ داده است.';
                console.error('مشکلی رخ داد: ', error);
            });
        });
    </script>
</head>

<body class="lato-body food-color food-auth-bg">
    <!-- Loader Box Start -->
    <div class="min-loader-wrapper">
        <img src="assets/images/favicon/2.svg" class="img-fluid loader" alt="">
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <!-- Loader Box End -->
    
    <!-- Mobile Section Start -->
    <div class="mobile-style-3">
        <ul>
            <li class="active">
                <a href="index.html" id="index">
                    <i class="ri-home-6-line"></i>
                    <h5>خانه</h5>
                </a>
            </li>
            <li>
                <a href="search.html" id="search">
                    <i class="ri-search-line"></i>
                    <h5>جستجو</h5>
                </a>
            </li>
            <li>
                <a href="cart.html" id="cart">
                    <i class="ri-shopping-cart-line"></i>
                    <h5>سبد خرید</h5>
                </a>
            </li>
            <li>
                <a href="offer.html" id="offer">
                    <svg>
                        <path
        d="M9.21448 1.13479C9.42137 0.95507 9.72901 0.95507 9.9359 1.13479L11.7218 2.68635C11.8344 2.78412 11.9818 2.83202 12.1303 2.81907L14.4872 2.61361C14.7602 2.58981 15.0091 2.77064 15.0709 3.03764L15.6037 5.34266C15.6374 5.4879 15.7284 5.61329 15.8562 5.69012L17.8838 6.90923C18.1186 7.05045 18.2137 7.34303 18.1066 7.59533L17.183 9.77333C17.1248 9.91065 17.1248 10.0656 17.183 10.2029L18.1066 12.3809C18.2137 12.6331 18.1186 12.9257 17.8838 13.067L15.8562 14.2861C15.7284 14.3629 15.6374 14.4883 15.6037 14.6336L15.0709 16.9385C15.0091 17.2056 14.7602 17.3864 14.4872 17.3626L12.1303 17.1572C11.9818 17.1442 11.8344 17.1921 11.7218 17.2898L9.9359 18.8415C9.72901 19.0211 9.42137 19.0211 9.21448 18.8415L7.4285 17.2898C7.31597 17.1921 7.16856 17.1442 7.02004 17.1572L4.66316 17.3626C4.39015 17.3864 4.14126 17.2056 4.07954 16.9385L3.54662 14.6336C3.51305 14.4883 3.42194 14.3629 3.29417 14.2861L1.26666 13.067C1.03179 12.9257 0.936726 12.6331 1.04373 12.3809L1.96745 10.2029C2.02565 10.0656 2.02565 9.91065 1.96745 9.77333L1.04373 7.59533C0.936726 7.34303 1.03179 7.05045 1.26666 6.90923L3.29417 5.69012C3.42194 5.61329 3.51305 5.4879 3.54662 5.34266L4.07954 3.03764C4.14126 2.77064 4.39015 2.58981 4.66316 2.61361L7.02004 2.81907C7.16856 2.83202 7.31597 2.78412 7.4285 2.68635L9.21448 1.13479Z"
        stroke-width="1.5" />
    <path d="M6.8252 10.9048L8.65853 12.7381L13.2419 8.15479" stroke-width="1.5" stroke-linecap="round"
        stroke-linejoin="round" />
                    </svg>
                    <h5>تخفیف ها</h5>
                </a>
            </li>
            <li>
                <a href="account.html" id="account">
                    <i class="ri-user-3-line"></i>
                    <h5>حساب کاربری</h5>
                </a>
            </li>
        </ul>
    </div>
    <!-- Mobile Section End -->

    <h1 id="error-message">در حال بارگزاری ...</h1>


    <div id="content">
        <!-- Header Section Start -->
        <header class="header-style-3">
            <div class="custom-container">
                <div class="header-box">
                    <div class="left-box">
                        <div class="header-icon">
                            <i class="ri-navigation-fill"></i>
                        </div>
                        <a href="address-book.html" class="header-content">
                            <h4>خانه <i class="ri-arrow-down-s-line"></i></h4>
                            <h6>35 خیابان دریاچه جنگل، بندر..</h6>
                        </a>
                    </div>

                    <div class="right-box">
                        <a href="notification.html" class="header-icon">
                            <i class="ri-notification-2-line"></i>
                        </a>
                    </div>
                </div>

                <div class="search-box">
                    <form class="form-style-4">
                        <div>
                            <input type="text" class="form-control" id="phone"
                                placeholder="رستوران، غذا یا غذا را جستجو کنید">
                        </div>
                    </form>
                </div>
            </div>
        </header>
        <!-- Header Section End -->

        <!-- سایر بخش‌های محتوا در اینجا اضافه می‌شوند -->
    </div>

    <!-- Bootstrap js-->
    <script src="assets/js/vendors/bootstrap/bootstrap.bundle.min.js"></script>

    <!-- swiper js -->
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/custom_swiper.js"></script>

    <!-- Loader js -->
    <script src="assets/js/loader.js"></script>

    <!-- Theme js-->
    <script src="assets/js/script.js"></script>

    <!-- Theme Settings js-->
    <script src="assets/js/theme-setting.js"></script>
</body>

</html>
در این کد درواقع چون کد اسکری\ت دریلفت داده از سرور در بخش هدرز انجام میشود عملا نمیتونه متن پیغام هار ارور رو نشون بده و متن پیش فرض نمایش داده میشه
من میخوام کاری کنی ک  ی متغیر سراسری درست کنی اول ریکویست زده بشه و اگر داده های دریافت شد این مقادیر در اون متغیر ذخیره بشن و بعدش که تمام صفحه لود شد بیاد و مقادیر المان ها رو تغیر بده ولی دقت کن این کار رو برای بخش های kodolar لازم نیست انجام بدی . درواقع اون بخش ها در اول صفحه مقدار دهی میشن و یا داد هاشون خونده میشه ولی برای بقیه بخش ها ک مثلا نمایش داده بشن یا ن و یا مقادیرشون عوض بشه بنظرم باید در \ایان بادی بنویسی 
یا اگر خودت پیشنهاد بهتری دارزی ک همین رو طوری بنویسیم ک تغیرات رو لحاظ کنه