<!DOCTYPE html>

<html prefix="og: http://ogp.me/ns#" lang="id">



<head>

    <base href="<?php echo base_url(); ?>"/>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="author" content="">

    <meta name="keywords" content="<?php echo $title; ?> - <?php echo $profil['nama']; ?>"/>

    

    <link rel="icon" type="image/ico" sizes="32x32" href="assets/admin/img/<?php echo $profil['favicon']; ?>">



    <title><?php echo $title; ?> - <?php echo $profil['nama']; ?></title>



    <!-- Bootstrap core CSS -->



    <link href="assets/home/css/bootstrap.min.css" rel="stylesheet">

    <link href="assets/home/css/engine.css" rel="stylesheet">



    <!-- CSS OWL -->

    <link rel="stylesheet" href="assets/home/css/owl/owl.carousel.min.css">

    <link rel="stylesheet" href="assets/home/css/owl/owl.theme.default.min.css">



    <!-- Font Awesome -->

    <link rel="stylesheet" href="assets/home/fontawesome/css/all.css">



    <!-- Css Global Benihbaik -->

    <link href="assets/home/css/cssGlobalBenihBaik/newBenihbaike5bf.css?v=12" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">



    <!-- Css Global Benihbaik ScrollBarApple -->

    <link href="assets/home/css/cssGlobalBenihBaik/scrollBarApple.css?v=4" rel="stylesheet"> 



    <!-- DatePicker Benihbaik -->

     <link href="assets/home/unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />

     <!-- <link href="https://m.benihbaik.com/css/gijgo.min.css" rel="stylesheet" type="text/css" /> -->



    <!-- Dropify -->

    <link rel="stylesheet" href="assets/home/plugin/dropify/dist/css/dropify.min.css">

    <!-- End Dropify -->



    <link href="assets/home/css/cssGlobalBenihBaik/inputBenihbaik.css" rel="stylesheet">

    <link rel="stylesheet" href="assets/home/css/side-drawer-modal-bootstrap/bootstrap-side-modals.css">

    <style>

        main.container {

            position: relative;

            width: 100%;

            background-color: #FAFAFA;

            box-sizing: border-box;

            min-height: calc(0px + 100vh);

        }

        .benihbaik_solid {

            background: #FAFAFA !important;

            color: #000000 !important;

        }

        body{

            font-family: montserrat-regular !important;

        }

        /*navbar menu atas*/

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

            color: #23B570;

        !important: ;

            background-color: #FAFAFA !important;

        }

        .navbar > .container > .navbar-text > span {

            color: #666666;

        }

        .title-box{

           font-family: montserrat-semibold !important;

           color: #4F4F4F;

           font-weight: bold;

           font-size: 14px;

           min-width: 300px;

        }        

        .nav-wrapper{

            max-width: 480px !important;

            margin: 35px 30px 24px 30px;

            width: 100%;

        }

        .box-nav{

            width: 100%;display: flex;align-items: center;height: 27px;

        }

        .title-nav{

            width: 100%;align-items: center;display: flex;

            font-weight: 600;

            font-size: 18px;

            line-height: 135%;

            font-family: Silka;

            color: #000000;

            margin-right:30px;

        }

        /*end navbar*/

        



        /* tab menu button  */

        .nav-tabs {

            border-bottom: 1px solid #FAFAFA;

            display: flex;

            justify-content: space-around;

        }

        .nav-tabs .nav-item {

             margin-bottom: 0px; 

            width: 50%;

            text-align: center;

        }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

            border-bottom-width: 3px;

            border-color: #FAFAFA #FAFAFA #23B570 #FAFAFA;

        }

        .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {

            border-bottom-width: 3px;

            border-color: #FAFAFA #FAFAFA #23B570;  

        }

        .nav-link {

            font-size: 14px;

            font-weight: 600;

            display: block;

            padding: .5rem 1rem;

        }

        /* end tab menu button  */



        /* Typographi */

        

        .title0{

            font-family: Silka;

            font-style: normal;

            font-weight: 600;

            font-size: 15px;

            line-height: 28px;            

            margin-bottom:0px !important;

            color: #323232;

        }

        .title1{

            font-family: Silka;

            font-style: normal;

            font-weight: 600;

            font-size: 16px;

            line-height: 25px;            

            margin-bottom:0px !important;

            color: #646464;

        }

        .title2{

            font-family: montserrat-semibold !important;

            font-style: normal;

            font-weight: 600;

            font-size: 14px;

            line-height: 25px;            

            margin-bottom:0px !important;

            color: #646464;

        }    

        .title3{

            font-family: montserrat-regular !important;

            font-style: normal;

            font-weight: 500;

            font-size: 13px;

            line-height: 22px;            

            margin-bottom:0px !important;

            color: #23B570;

        }    

        .title4{

            font-family: montserrat-semibold !important;

            font-style: normal;

            font-weight: 600;

            font-size: 14px;

            line-height: 25px;

            color: #969696;

            margin-bottom:0px !important;

        }   

        .title5{

            font-family: montserrat-regular !important;

            font-style: normal;

            font-weight: 600;

            font-size: 14px;

            line-height: 20px;            

            margin-bottom:0px !important;

            color: #fff;

        }   

        .title6{

            font-family: Silka;

            font-style: normal;

            font-weight: 600;

            font-size: 24px;

            line-height: 28px;            

            margin-bottom:0px !important;

            color: #fff;

            padding-top: 5px;

        }   

        .title7{

            font-family: montserrat-bold !important;

            font-style: normal;

            font-weight: 600;

            font-size: 14px;

            line-height: 25px;            

            margin-bottom:0px !important;

            color: #646464;

        } 

        /* end Typographi */



        .img-avatar {

            width: 60px;

            height: 60px;

        }

        .btnedit{

            border: 1px solid #646464;

            box-sizing: border-box;

            border-radius: 15px;

            background:#fff;

            padding: 1px 15px 1px 15px;

        }

        .block-mission {

            border-radius: 8px;

            display: block;

            width: 100%;

            border:1px solid white;

            background-color: transparent;

            padding: 14px 16px 16px 16px;

            font-size: 16px;

            font-family: Silka;

            font-style: normal;

            font-weight: 900;

            font-size: 12px;

            line-height: 100%;

            color: #fff;

            cursor: pointer;

        }



        .block0 {

            border-radius: 8px;

            display: block;

            width: 100%;

            border:1px solid #23B570;

            background-color: #23B570;

            padding: 14px 16px 16px 16px;

            font-size: 16px;

            font-family: Silka;

            font-style: normal;

            font-weight: 900;

            font-size: 12px;

            line-height: 100%;

            color: #fff;

            cursor: pointer;

        }

        .block1 {

            border-radius: 8px;

            display: block;

            width: 100%;

            border:1px solid #23B570;

            background-color: #ffffff;

            padding: 14px 16px 16px 16px;

            font-size: 16px;

            font-family: Silka;

            font-style: normal;

            font-weight: 900;

            font-size: 12px;

            line-height: 100%;

            color: #23B570;

            cursor: pointer;

        }

        .block2 {

            border-radius: 8px;

            display: block;

            width: 100%;

            border: 1px solid #ED2E7E;

            background-color: #ffffff;

            padding: 14px 16px 16px 16px;

            font-size: 16px;

            font-family: Silka;

            font-style: normal;

            font-weight: 900;

            font-size: 12px;

            line-height: 100%;

            color: #ED2E7E;

            cursor: pointer;

        }

        .block3 {

            font-family: montserrat-regular !important;

            font-style: normal;

            font-weight: 500;

            font-size: 13px;

            line-height: 22px;

            border-radius: 16px;

            display: block;

            width: 100%;

            border: 1px solid #fff;

            background-color: transparent;

            padding: 2px 12px 2px 12px;

            color: #fff;

            cursor: pointer;

        }

        .box-pencapaian{

            background-image: url("assets/home/img/image_sementara/back-mendali2.png");

            width:100%;

            height:150px;

            border-radius:5%;

            background-size: cover;

            background-repeat: no-repeat;

        }

        .img-medal{

            width:100px;

            height:100px;

        }



        /* .carousel-control-next-icon,

            .carousel-control-prev-icon {

            filter: invert(1);

        } */



        .carousel-indicators .active {

            background-color: #23B570 !important;

            width: 30px !important; 

        }



        .carousel-indicators li {

            position: relative;

            -webkit-box-flex: 0;

            -ms-flex: 0 1 auto;

            flex: 0 1 auto;

            width: 10px;

            height: 9px;

            border-radius:4px;

            margin-right: 3px;

            margin-left: 3px;

            text-indent: -999px;

            background-color: #E9E9E9 !important; 

        } 



        .BB_button{

            cursor: pointer;

            background: #23B570;

            color:#ffffff;

            border: 0px solid #ced4da;

            padding-top:16px;

            padding-bottom:16px;

            border-radius:8px;

            text-decoration: none !important;

            font-family:montserrat-bold !important;

        }



        .BB_button_kembali{

            cursor: pointer;

            background: #ffffff;

            color:#646464;

            border: 0px solid #ced4da;

            padding-top:16px;

            padding-bottom:16px;

            border-radius:8px;

            text-decoration: none !important;

            font-family:montserrat-bold !important;

        }



        .modal_center .modal-content{ 

            max-width: 480px !important;

            margin: auto;

        }



        .carousel-control-next, .carousel-control-prev {

            width: 25% !important;

        }



        @media  only screen and (max-width: 376px) {

            .img-medal{

                width:90px;

                height:90px;

            }

            .block3{

                font-size:12px;

            }



            .tinggi-mission{

                height: 390px !important;

            }



            .tinggi-caption-mission{

                bottom: 55px !important;

            }



            .ukuran-mendali-gambar{

                width: 40% !important;

            }



            .font-mission{

                font-size: 1rem !important;

            }



            .font-hari{

                font-size: 0.8em !important;

            }



            .judul-mission{

                margin-bottom: 16px !important;

            }



            .box-hari-mission{

                padding-top:16px !important;

            }



            .box-button-mission{

                padding-top:16px !important;

            }

        } 



        @media  only screen and (min-width: 500px) {

            .box-pencapaian{

                padding:55px 80px 55px 80px;

            }



            .tinggi-mission{

                height: 500px !important;

            }



            .tinggi-caption-mission{

                bottom: 60px !important;

            } 



            .ukuran-mendali-gambar{

                width: 50%;

            }



            .font-mission{

                font-size: 1.5rem !important;

            }



            .judul-mission{

                margin-bottom: 24px;

            }



            .box-hari-mission{

                padding-top:24px;

            }



            .box-button-mission{ 

                padding-top:24px;

            }

        }

    </style>

</head>



<body class="wrap-all-content">

    <!-- Main -->

    <main role="main" class="container with-navbar" style="padding:0px 0px 0px 0px; max-width: 480px !important;">

        <!-- Content -->

            <nav class="container navbar fixed-top navbar-default p-0 title benihbaik_solid" style="max-width: 480px;">

        <div class="nav-wrapper">

            <div class="navbar-text title-navbar box-nav">

                <a href="" class="navbar-text">    

                    <i class="fa fa-arrow-left " style="color:#828282;"></i>

                </a>

                <span class="title-nav ml-3">Profil</span>

            </div>

        </div>

    </nav> 



        

        <div style="padding: 90px 30px 0px 30px;">

            <div class="d-flex align-items-center">   

                <div class="item">

                    <div class="text-center"><img src="assets/home/img/image_sementara/<?php echo $me['user_foto']; ?>" alt="icon-user" class="img-avatar" style="border-radius: 50%;"></div>

                </div>

                <div class="item" style="margin-left: 16px;">

                    <p class="title2" >

                        <b><?php echo $me['user_nama']; ?></b>

                    </p>

                </div>

                

                                

                <div class="item" style="margin-left:auto;">

                    <a href="user/pengaturan/profil"><button class="btnedit" style="cursor: pointer !important;"><p class="title2">edit</p></button></a>

                </div>

            </div>

        </div>



                    

        <div style="padding: 15px 0px 30px 0px;">

            <div class="tab-pane fade show active" id="update" role="tabpanel" aria-labelledby="update-tab">


                        <div style="padding: 24px 30px 0px 30px;">
                            <?php if($this->session->flashdata('flash')): ?>

                <div class="alert alert-success">

                    <?php echo $this->session->flashdata('flash'); ?>

                </div>

                <?php endif; ?>

                <?php if($this->session->flashdata('error')): ?>

                <div class="alert alert-danger">

                    <?php echo $this->session->flashdata('error'); ?>

                </div>

                <?php endif; ?>

                            <p class="title1" style="padding-bottom:24px;">Akun</p>

                            

                            <a href="user/pengaturan/password" style="text-decoration: none;">

                                <div class="d-flex" style="padding-top:24px;">

                                    <div class="item" style="padding-right:16px;">

                                        <img src="assets/home/img/image_sementara/RevampSettingAkun/ubah_password.svg" style="max-width:25px;" alt="icon-BB">

                                    </div>

                                    <div class="item">

                                        <p class="title2 pt-1">

                                            Ubah Password

                                        </p>

                                    </div>

                                    <div class="item pt-1" style="margin-left:auto;">

                                        <img src="assets/home/img/image_sementara/akar-icons_chevron-right.png" style="width:17px; " alt="icon info">

                                    </div>

                                </div>

                            </a>

                        </div>



                        <div style="padding: 24px 30px 0px 30px;">

                            <p class="title1" style="padding-bottom:24px;">Campaign</p>

                            <a href="donasi" style="text-decoration: none;">

                                <div class="d-flex">

                                    <div class="item" style="padding-right:16px;">

                                        <img src="assets/home/img/image_sementara/RevampSettingAkun/list_campaign.svg" style="max-width:25px;" alt="icon-BB">

                                    </div>

                                    <div class="item">

                                        <p class="title2 ">

                                            List Campaign

                                        </p>

                                    </div>

                                    <div class="item " style="margin-left:auto;">

                                        <img src="assets/home/img/image_sementara/akar-icons_chevron-right.png" style="width:17px; " alt="icon info">

                                    </div>

                                </div>

                            </a>

                            

                        </div>

                        <div style="padding: 24px 30px 0px 30px;">

                            <p class="title1">Donasi</p>

                            <a href="user/donasi" style="text-decoration: none;">

                                <div class="d-flex" style="padding-top:24px;">

                                    <div class="item" style="padding-right:16px;">

                                        <img src="assets/home/img/image_sementara/RevampSettingAkun/riwayat_donasi.svg" style="max-width:25px;" alt="icon-BB">

                                    </div>

                                    <div class="item">

                                        <p class="title2">

                                            Riwayat Donasi 

                                        </p>

                                    </div>

                                    <div class="item" style="margin-left:auto;">

                                        <img src="assets/home/img/image_sementara/akar-icons_chevron-right.png" style="width:17px; " alt="icon info">

                                    </div>

                                </div>

                            </a>

                        </div>

                        <div style="padding: 24px 30px 65px 30px;">

                            <p class="title1">About</p>

                            <a href="tentang-kami" style="text-decoration: none;">

                                <div class="d-flex" style="padding-top:24px;">

                                    <div class="item" style="padding-right:16px;">

                                        <img src="assets/home/img/image_sementara/RevampSettingAkun/tentang_benihbaik.svg" style="max-width:25px;" alt="icon-BB">

                                    </div>

                                    <div class="item">

                                        <p class="title2 ">

                                            Tentang Kami

                                        </p>

                                    </div>

                                    <div class="item " style="margin-left:auto;">

                                        <img src="assets/home/img/image_sementara/akar-icons_chevron-right.png" style="width:17px; " alt="icon info">

                                    </div>

                                </div>

                            </a>

                            <a href="hubungi-kami" style="text-decoration: none;">

                                <div class="d-flex" style="padding-top:24px;">

                                    <div class="item" style="padding-right:16px;">

                                        <img src="assets/home/img/image_sementara/RevampSettingAkun/butuh_bantuan.svg" style="max-width:25px;" alt="icon-BB">

                                    </div>

                                    <div class="item">

                                        <p class="title2 ">

                                            Butuh bantuan?

                                        </p>

                                    </div>

                                    <div class="item " style="margin-left:auto;">

                                        <img src="assets/home/img/image_sementara/akar-icons_chevron-right.png" style="width:17px; " alt="icon info">

                                    </div>

                                </div>

                            </a>





                            <div style="width: 100%;display: flex; padding-top:40px;">

                                <a href="user/logout" class="block2 text-center" style="text-decoration: none;color:#ED2E7E;">Logout</a>

                            </div>

                        </div>



                        

                

                </div>

        </div>