<!DOCTYPE html>
<html lang="en">
<head>

    <!-- SITE TITTLE -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mega-Bite</title>

    <!-- add icon link -->
    
    <!-- add icon link -->
    <link rel="icon" href="/images/logo/logo.png" type="image/png">


    <!-- Bootstrap -->
    <link rel="stylesheet" href="../../static/index/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/index/plugins/bootstrap/css/bootstrap-slider.css">
    <!-- Font Awesome -->
    <link href="../../static/index/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!--Style File-->
    

    <link href="/index/css/style.css" rel="stylesheet" type="text/css">

    <link href="/plugins/fontawesome/css/all.min.css" rel="stylesheet">

    <!-- Owl Carousel -->
    <link rel="stylesheet" href="/css/owl.carousel.css">
    <link rel="stylesheet" href="/css/owl.theme.default.css">

    <!-- Theme style -->
    <link rel="stylesheet" type="text/css" href="/dist/css/adminlte.min.css">

    <!-- Font Awesome -->
    <link href="/index/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="/css/materialicons.css">

    <!-- DataTables  -->
    <link rel="stylesheet" type="text/css" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.css">



    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

    <style>
        .content {
            position: relative;
            width: 100%;
        }

        .content-body {
            display: block;
            width: 100%;
            /*height: auto;*/
        }

        .img-cover {
            object-fit: cover;
            object-position: center;
        }

        .content-body img {
            object-fit: cover;
            object-position: center;
        }

        .overlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            /*height: 100%;
            width: 100%;*/
            opacity: 0;
            transition: .5s ease;
            background-color: #e6b322;
        }

        .content:hover .overlay {
            opacity: 1;
        }

        .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .link {
            color: white;
            font-size: 20px;
            padding: 3px 3px;
            position: absolute;
            top: 60%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align: center;
        }


        .thumb-menu img {
            height: 200px;
            width: 100%;
            /*object-fit: scale-down;*/
            margin: 0 auto;
            margin-bottom: 10px;
            box-shadow: 0px 24px 48px -12px rgb(255, 255, 255);
            transition: all 0.3s ease;
        }

        #loading {
            display: none;
            width: 50%;
            padding: 5px 10px;
            position: fixed;
            bottom: 0;
            left: 0;
            text-align: center;
            color: white;
            background: rgba(0, 0, 23, 0.71);
            box-shadow: 0 0 10px black;
        }

        .carousel {
            max-width: 1200px !important;
            max-height: 500px !important;
            /*margin: auto;*/
            /*padding: 0 30px;*/
        }

        .owl-dots {
            text-align: center;
            /*margin-top: -100 px;*/
            z-index: 2;
        }

        .owl-dot {
            height: 15px;
            width: 15px;
            margin: 0 5px;
            outline: none;
            border-radius: 14px;
            border: 2px solid #e6b322 !important;
            box-shadow: 0px 4px 15px rgb(255, 255, 255);
            transition: all 0.3s ease;
        }

        .owl-dot.active,
        .owl-dot:hover {
            background: #e6b322 !important;
        }

        #ads .item-body h4, #ads .item-body p {
            margin-right: 10px;
            margin-left: 10px;

        }

        /* Position child elements relative to this element */
        #ads .item-image {
            position: relative;
            /* padding-top: 56.25%;*/ /* 16:9 ratio */
            /*  height: 0;
              width: 100%;
              overflow: hidden;*/
        }

        /* Create a pseudo element that uses padding-bottom to take up space */
        #ads .item-image::after {
            display: block;
            content: '';
            padding-top: 56.25%; /* 16:9 aspect ratio */
        }

        #ads .item-image img {
            /* Image should match parent box size */
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            object-fit: scale-down;
        }

        .aspect-ratio-box {
            position: relative;
            /*width: 1200px !important;
            height: 500px !important;*/
        }

        /* Create a pseudo element that uses padding-bottom to take up space */
        .aspect-ratio-box::after {
            position: relative;
            display: block;
            content: '';
            /* 16:9 aspect ratio */
            padding-top: 56.25%;
        }

        /* Image is positioned absolutely relative to the parent element */
        .aspect-ratio-box img {
            /* Image should match parent box size */
            background-color: white;
            position: absolute;
            left: 0;
            top: 0;
            /*width: 1200px !important;
            height: 500px !important;*/
        }


        /*div.scroll
        {
            width:500px;
            height:400px;
            overflow:scroll;
        }*/

        .card .fas {
            color: #D4AC0D;
            text-align: center;
            padding: 30px;
            font-size: 46px;
        }

        .card {
            padding: 15px;
            margin: 10px;
            box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.01);
            transition: box-shadow 0.3s ease-in-out;
            border: 1px solid #ddd;
            cursor: pointer;
            border-radius: 4px;
        }

        .card:hover {
            border: 1px solid #D4AC0D;
        }

        h3 {
            text-align: center;
            font-size: 22px;
            color: #839192;
            font-weight: 600;

        }

        p {
            padding: 5px;
            /*text-align: center;*/
            font-size: 15px;
            color: #000;
            line-height: 1.6;
            font-weight: 500;
            padding-top: 5px;

        }

    </style>

</head>

<body class="body-wrapper">


    <div class="sticky-top">
        <!-- <div class="container">
             <div class="row">
                 <div class="col-md-12">-->
        <ul class="navbar navbar-expand-lg navbar-light navigation">
            <li class="container">

                <a class="navbar-brand" href="/">
                    <img src="../../images/logo/mega-bite-logo-311.svg" alt="mega-bite logo" style="max-height: 33px;
            width: auto;">
                </a>

                <!--<ul class="navbar-nav ml-auto main-nav mobile-view-nav" style="display: none">
                    <li class="nav-item active">
                        <a th:href="@{/cart}" class="my-cart-icon nav-link portfolio-link position-relative">
                            <i class="fas fa-cart-plus"></i>
                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary"
                                  th:text="${count}"> 0 </span>
                        </a>
                    </li>
                </ul>-->
                <!--<button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>-->
                <ul class="navbar-nav ml-auto main-nav">
                    <div class="row mr-sm-3">
                        <!--<li class="nav-item active web-view-nav-vv">
                            <a class="nav-link" th:href="@{/main}" th:text="#{page.home}">Home</a>
                        </li>-->
                        <li class="nav-item dropdown dropdown-slide active web-view-nav-vv">
                            <a class="nav-link dropdown-toggle portfolio-link" data-toggle="dropdown" href="">
                                <i class="fas fa-globe mr-1"></i>Language<!--<span><i
                                        class="fa fa-angle-down"></i></span>-->
                            </a>

                            <!-- Dropdown list -->
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="/changeLocale?localeCode=zh">中文/ Chinese</a>
                                <a class="dropdown-item" href="/changeLocale?localeCode=de">မြန်မာ</a>
                            </div>
                        </li>
                        <!--<li class="nav-item active">
                            <a th:href="@{/cart}" class="my-cart-icon nav-link portfolio-link position-relative">
                                <i class="fas fa-cart-plus"></i>
                                &lt;!&ndash; <button type="button" class="btn btn-primary position-relative">
                                     Mails&ndash;&gt;
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary"
                                      id="orderCount">
                                                0
                                    &lt;!&ndash;<span class="visually-hidden">unread messages</span>&ndash;&gt;
                                            </span>
                                &lt;!&ndash;</button>&ndash;&gt;
                            </a>

                            &lt;!&ndash; <a href="#" class="cart position-relative d-inline-flex nav-link portfolio-link"
                                aria-label="View your shopping cart">
                                 <i class="fas fa fa-shopping-cart fa-lg"></i>
                                 <span class="cart-basket d-flex align-items-center justify-content-center">0</span>
                             </a>&ndash;&gt;

                        </li>-->
                    </div>
                    <!--<li class="nav-item dropdown dropdown-slide">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false">
                            Pages <span><i class="fa fa-angle-down"></i></span>
                        </a>
                        &lt;!&ndash; Dropdown list &ndash;&gt;
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="about-us.html">About Us</a>
                            <a class="dropdown-item" href="contact-us.html">Contact Us</a>
                            <a class="dropdown-item" href="user-profile.html">User Profile</a>
                            <a class="dropdown-item" href="404.html">404 Page</a>
                            <a class="dropdown-item" href="package.html">Package</a>
                            <a class="dropdown-item" href="single.html">Single Page</a>
                            <a class="dropdown-item" href="store.html">Store Single</a>
                            <a class="dropdown-item" href="single-blog.html">Single Post</a>
                            <a class="dropdown-item" href="blog.html">Blog</a>

                        </div>
                    </li>
                    <li class="nav-item dropdown dropdown-slide">
                        <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false">
                            Listing <span><i class="fa fa-angle-down"></i></span>
                        </a>
                        &lt;!&ndash; Dropdown list &ndash;&gt;
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="category.html">Ad-Gird View</a>
                            <a class="dropdown-item" href="ad-listing-list.html">Ad-List View</a>
                        </div>
                    </li>-->
                </ul>
                <!--</div>
            </div>
            </div>-->
            </li>
        </ul>
    </div>


<section class="section scroll">
    <!-- Container Start -->
    <div class="container">
        <div class="row ">
            <div class="col-12">
                <!-- Section title -->
                <div class="section-title">
                    <h3>Mega-Bite Service ရရှိနိုင်သည့်မြို့များ</h3>
                </div>
                <div class="row" id="content">
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3 content">
                        <a href="/MDY" class="thumb-menu">
                            <div>
                                <img class="img-fluid img-cover" src="http://api.megabitemenu.com/api/v1/township/1/images" alt="township img"/>
                            </div>
                            
                            <h6>မန္တလေး (Mandalay）</h6>
                            <h6>曼德勒</h6>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3 content">
                        <a href="/MLM" class="thumb-menu">
                            <div>
                                <img class="img-fluid img-cover" src="http://api.megabitemenu.com/api/v1/township/2/images" alt="township img"/>
                            </div>
                            
                            <h6>မော်လမြိုင် (Mawlamyine）</h6>
                            <h6>毛淡棉</h6>
                        </a>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 mb-3 content">
                        <a href="/KT" class="thumb-menu">
                            <div>
                                <img class="img-fluid img-cover" src="http://api.megabitemenu.com/api/v1/township/3/images" alt="township img"/>
                            </div>
                            
                            <h6>ကျိုင်းတုံ (KyaingTong / Keng Tung）</h6>
                            <h6>景栋市</h6>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container End -->
</section>

<!-- start myModal-->
<div id="defaultModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Mega-Bite</h5>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-xs-12 pl-1 pr-1">
                            <div class="card">
                                <!--<i class="fas fa-cart-plus"></i>-->
                                <!-- <h3>Cards 2</h3>-->
                                <div>
                                    <img class="img-fluid img-cover" src="http://api.megabitemenu.com/api/v1/megaBite/1/images"
                                         alt="township img"/>
                                </div>
                                
                                <!--<p th:text="#{order.text}">Lorem ipsum dolor sit amet.</p>-->
                                <a href="/main" class="col text-center mt-3">
                                    <button type="button" class="btn text-white btn-primary pl-3 pr-3">အစားအသောက်မှာမည်</button>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-6 col-xs-12 pl-1 pr-1">
                            <div class="card">
                                <!--<i class="fas fa-box-open"></i>-->
                                <!--<h3>Cards 1</h3>-->
                                <div>
                                    <img class="img-fluid img-cover" src="http://api.megabitemenu.com/api/v1/megaBite/2/images"
                                         alt="township img"/>
                                </div>
                                
                                <!-- <p th:text="#{parcel.text}">Lorem ipsum dolor sit amet.</p>-->
                                <a href="/parcel" class="col text-center mt-3">
                                    <button type="button" class="btn text-white btn-primary pl-3 pr-3">ပါဆယ်ပို့မည်</button>
                                </a>
                            </div>
                        </div>
                        <!--<div class="col-lg-3 col-md-6 col-xs-12 pl-1 pr-1">
                            <div class="card">
                                <i class="fa fa-bookmark"></i>
                                <h3>Cards 3</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-xs-12 pl-1 pr-1">
                            <div class="card">
                                <i class="fa fa-cog"></i>
                                <h3>Cards 4</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--============================
=            Footer            =
=============================-->

    <footer class="footer section section-sm mt-5">
        <!-- Container Start -->
        <div class="container">
            <div class="row">
                <!-- Promotion -->
                <div class="col-md-4">
                    <!-- App promotion -->
                    <div class="block-2 app-promotion">
                        <div class="mobile d-flex">
                            <a href="/">
                                <!-- Icon -->
                                <img class="img-fluid mx-auto d-block" src="../../images/logo/logo_img.png"
                                     alt="mobile-icon">
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Link list -->
                <div class="col-md-4">
                    <div class="block middle">
                        <h4>Services</h4>
                        <p class="alt-color">We are an online food &amp; parcel delivery marketplace based in Mandalay, Myanmar.We aim to deliver quality and fresh food to our customers in mandalay within one hour.</p>
                        <ul>
                            <li>
                                <i class="fas fa-clock mr-3 mt-1 alt-color"></i>
                                <span class="alt-color">8:30 a.m to 6:00 p.m</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Link list -->
                <div class="col-md-4">
                    <div class="block middle">
                        <h4>Our Contact</h4>
                        <ul>
                            <li>
                                <i class="fas fa-phone mr-3 mt-1 alt-color"></i>
                                <span class="alt-color">09977722227，09977722228，09977722229</span>
                            </li>
                            <li><i class="fab fa-facebook mr-3 mt-1 alt-color"></i>
                                <a style="display:inline" href="https://www.facebook.com/MegaBiteMM/"
                                   target="_blank">Mega-Bite Food &amp; Parcel Delivery</a>
                            </li>
                            <li><i class="fab fa-weixin mr-3 mt-1 alt-color"></i>
                                <span class="alt-color">MegaBiteMB (WeChat ID)</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container End -->
    </footer>
    <!-- Footer Bottom -->
    <footer class="footer-bottom">
        <!-- Container Start -->
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-12">
                    <!-- Copyright -->
                    <div class="copyright">
                        <p>Copyright ©
                            <script>
                                var CurrentYear = new Date().getFullYear()
                                document.write(CurrentYear)
                            </script>
                            . All Rights Reserved by
                            <a class="text-primary" href="http://megabitemenu.com" target="_blank">Mega-Bite</a></p>
                    </div>
                </div>
                <div class="col-sm-6 col-12">
                </div>
            </div>
        </div>
        <!-- Container End -->
        <!-- To Top -->
        <div class="top-to">
            <a id="top" class="" href="#"><i class="fa fa-angle-up"></i></a>
        </div>
    </footer>


<!-- script -->


    <!-- jQuery -->
    <script src="/plugins/jquery/jquery.min.js"></script>
    <!-- jQuery UI -->
   <!-- <script th:src="@{/plugins/jquery-ui/jquery-ui.min.js}"></script>-->
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge('uibutton', $.ui.button)
    </script>
    <!-- Bootstrap 4 -->
    <!--<script th:src="@{/plugins/bootstrap.js/bootstrap.bundle.min.js}"></script>-->
    <!-- ChartJS -->
    <!--<script th:src="@{/plugins/chart.js/Chart.min.js}"></script>-->

    <script src="/plugins/datatables/jquery.dataTables.js"></script>
    <script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>

    <!-- AdminLTE App -->
    <script src="/dist/js/adminlte.js"></script>
    <script src="/js/shop-cart.js"></script>

    <!-- Owl Carousel Js -->
    <script src="/js/owl.carousel.js"></script>

    <!-- Notification Socket -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <!-- <script th:src="@{/js/notification.js}"></script>-->

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>



<!-- JAVASCRIPTS -->
<!--<script th:src="@{index/plugins/jQuery/jquery.min.js}"></script>-->
<script src="/index/plugins/bootstrap/js/popper.min.js"></script>
<script src="/index/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/index/pluns/bootsgitrap/js/bootstrap-slider.js"></script>

<script src="/index/plugins/smoothscroll/SmoothScroll.min.js"></script>

<script src="/index/js/script.js"></script>
<script>
    var successfulIndex = true;
    if (successfulIndex == true) {
        $(document).ready(function () {
            $('#defaultModal').modal('show');
        });
    }
</script>
</body>
</html>



