<nav class="breadcrumb">客户端界面设置 <span class="c-gray en">&gt;</span> 客户端主题颜色 </nav>
<link rel="stylesheet" href="<?php echo asset_url('css/farbtastic.css')?>">
<style>
    .elput{width: 80%;margin-left: 30px;}
    .elp{padding-left: 30px;}
    .elr{padding-left: 30px;padding-top: 5px;}
    .ebm{margin-right: 5%;}

    /*调色版*/
    #colorpicker{margin-left:0px; }
.farbtastic{margin: 0px auto;}
    /*效果展示*/
    .viewshow{width: 360px;margin:0 auto;min-width: 360px;margin-top:10px;border:1px solid #ccc;border-radius:15px; background-color: #F8F8F8} 
    .subsy{text-align: right;border-radius: 0 0 6px 6px;box-shadow: inset 0 1px 0 #fff;margin-top: 30px;}

    /*头部*/
    .color_header{height: 90px;width: 100%;margin: 0;overflow: hidden;border-radius:15px 15px 0px 0px;} 
    .header_main{width: 90%;margin: 0px auto;margin-top: 22px;position: relative;}  
    .color_header p{font-size: 32px;text-align: center;color: #fff;}
    .color_header img{width: 45px;height: 45px; position: absolute;right: 0px;top: 0px;}
    

    /*导航*/
    nav{width: 100%;height: 78px;}
    nav ul{width: 100%; height: 78px; overflow: hidden;}
    nav ul li{float: left;height: 76px;width: 20%;text-align: center; line-height: 77px; font-size: 22px; background-color: #F8F8F8;color: #ADADAD;border-bottom: 1px solid #DFDFDF;}

    /*焦点图*/
    .main_slide{width: 100%;margin: 0;overflow: hidden;background-color: #fff;border-bottom: 1px solid #ECECEC;}
    .slide_img{display: block; width: 90%;margin: 0px auto;margin-top: 30px;}
    .main_slide p{width: 60%;font-size: 20px;margin: 10px 5%;}

    /*功能模块入口*/
    .main_model{width: 100%;margin: 0; overflow: hidden;background-color: #fff;}
    .main_model img{display: block;width: 90%;margin: 20px auto;}

    /*新闻列表*/
    .main_news{width: 100%;margin-top: 20px; overflow: hidden;background-color: #fff;border-top: 1px solid #ECECEC;}
    .news_list{width: 95%;margin-left: 5%;}
    .news_list li{border-bottom: 1px solid #ECECEC;background-color: #fff;}
    .news_list li img{width: 100%;}
    .news_more{font-size: 18px;text-align: center;margin: 15px 0px;}

    /*好友动态*/
    .main_friends{width: 100%;margin-top: 20px;border-top: 1px solid #ECECEC;border-bottom: 1px solid #ECECEC;}
    .main_friends ul{width: 100%;overflow: hidden;}
    .main_friends ul li{width: 100%;overflow: hidden; margin-bottom: 10px;background-color: #fff;}
    .friend_img{display: block; width: 100%; margin: 15px 0px;}
    .friend_from{width: 90%;margin: 15px auto;overflow: hidden;}
    .from_box{font-size: 16px;width: 50%;float: left;}
    .from_font{color: #ADADAD;}
    .from_zan{width: 50%;float: right;}
    .from_zan img{display: block; width: 90%; float: right;}

    /*底部菜单*/
    .foot_nav{width: 100%;height: 90px; margin: 0;overflow: hidden;background-color: #fff;}
    .foot_nav ul{width: 100%;overflow: hidden;margin: 0;}
    .foot_nav ul li{width: 20%;float: left;text-align: center;}
    .foot_nav ul li img{ width: 55%;margin-top: 8px;}
    .edt{padding-left:30px;}
    .elp{padding-left: 0px;padding-top: 20px;padding-bottom: 20px;}
    .reset_bg{margin-top: 50px;padding-left: 30px;width: 1100px;overflow: hidden;}
    
    .changeColor {display: inline-block;border: 1px solid #ccc;padding: 7px;margin-top: 10px;border-radius: 6px;}
    .changeInfo-input{width: 480px; margin: 0; float: right;  margin-top: 10px;margin-bottom: 80px;}
	.t-e {
    margin-left: 30px;
    overflow: hidden;
    margin-bottom: 15px;
    margin-top: 5px;}
	.edit_btn {
    border: 0;
    padding: 5px 25px 6px 25px;
    color: #FFF;
    border-radius: 4px;
    float: right;
    margin-top: 60px;
    margin-bottom: 20px;
    margin-right: 32px;}

</style>

    <div class="" role="main">

        <div style="width:100%;"><li class="edt" style="font-size: 28px; color: #7d7d7d;vertical-align: middle; padding-top: 15px; padding-bottom: 15px;">客户端主题颜色</div>
           
            <div class="" style="border-bottom: 1px solid #e5e5e5;">                                       
                <div class="t-e">
                    <img src="<?php echo asset_url('images/explain.png');?>" alt="">
                    <span>说明：Mocuz V3支持动态主题变色功能，拖动下方滑块可调整客户端的色彩主题配色，保存后重启客户端可立即生效。</span>
                </div>
            </div>
    
    

        <div class="reset_bg" style=""> 
            <form action="<?php echo site_url('mocuzfun/client_fun/save_color')?>" method="post" class="regiswidth" enctype="multipart/form-data" style="overflow:hiddden;">  
            
            <div style="width:60%; height:auto; float:left; display:inline">
            
            
               <input type="hidden" id="color" name="color" value="<?php echo $color_switch['value'];?>" vcolor = "<?php echo ($color_switch['value'] == 'white')?1:2;?>">    
                <div class="form-group">
                    <div class="biu_rdo" style="float:none;margin:0!important;overflow:hidden;position: relative;"> 

                            <img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img " isc="0" pid="0" colorV="1"> <span style="font-size:15px;">白色主题</span>
                            <br>
                            <img src="<?php echo asset_url('images/unchoice.png');?>" alt="" class="biu_rdo_img left_rdo" isc="0" pid="1" colorV="2" style="margin-left: 0px!important; margin-top:20px;"> <span style="font-size:15px;  vertical-align: bottom;">多彩主题：</span>

                             <div class="changeInfo-input">
                        <ul class="changeInfo-ul">
                        <li class="changeColor ">
                            <p class="redCard colorPosition"></p>
                            <span class="colorName">红色</span>
                        </li>
                        <li class="changeColor">
                            <p class="roseCard colorPosition"></p>
                            <span class="colorName">瑰红</span>
                        </li>
                        <li class="changeColor">
                            <p class="purpleCard colorPosition"></p>
                            <span class="colorName">紫色</span>                       
                        </li>
                        <li class="changeColor">
                            <p class="grassCard colorPosition"></p>
                            <span class="colorName">草绿</span>                       
                        </li>
                        <li class="changeColor">
                            <p class="greenCard colorPosition"></p>
                            <span class="colorName">绿色</span>                       
                        </li>
                        <li class="changeColor">
                            <p class="darkpurpleCard colorPosition"></p>
                            <span class="colorName">深紫</span>                           
                        </li>
                        <li class="changeColor">
                            <p class="orangeredCard colorPosition"></p>
                            <span class="colorName ">橙红</span>                          
                        </li>
                        <li class="changeColor">
                            <p class="orangeCard colorPosition"></p>
                            <span class="colorName">橙色</span>                           
                        </li>
                        <li class="changeColor">
                            <p class="blueCard colorPosition"></p>
                            <span class="colorName">蓝色</span>                           
                        </li>
                        <li class="changeColor">
                            <p class="coffeeCard colorPosition"></p>
                            <span class="colorName">咖啡</span>                           
                        </li>
                        <li class="changeColor">
                            <p class="blackCard colorPosition"></p>
                            <span class="colorName">黑色</span>                           
                        </li>
                        <li class="changeColor">
                            <p class="bluegreyCard colorPosition"></p>
                            <span class="colorName">蓝灰</span>                           
                        </li>                                               
                    </ul>
                    </div>
                   

                </div>  
                 
                <div id="colorpicker"></div>
                                
                <div class="lr_ts" style="float:none;margin: 30px 0px;">
                     <img src="<?php echo asset_url('images/tips.png')?>" alt="" style="width: 14px;">
                     <span style="font-size:12px;">运营提示：在不同季节，节日，庆祝活动期间，使用不同的主题配色，以增加APP新鲜感与活跃度。</span>
                </div>   
                                
                </div> 
                
                
            </div>  
  
            <div style="width:40%; height:auto; float:right; display:block">
            
            <div style="text-align:center;"><strong style="  font-size: 20px;">效果预览</strong></div> 
              <div id="view" class="examp  viewshow">
                        <!-- 头部 -->
                        <div class="color_header">    
                            <div class="header_main">   
                                <p>首页</p>
                                <img src="<?php echo asset_url('images/type.png');?>" alt="">
                            </div>  
                        </div>
                        <!-- 导航 -->
                        <nav>
                            <ul id="nav">
                                <li>首页</li>
                                <li>活动</li>
                                <li>关注</li>
                                <li>头条</li>
                                <li>新闻</li>
                            </ul>
                        </nav>
                        <!-- 焦点图 -->
                        <div class="main_slide">
                            <img src="<?php echo asset_url('images/img-1.png');?>" alt="" class="slide_img">
                            <p>周末出去走走放松心情</p>
                        </div>
                        <!-- 功能模块入口 -->
                        <div class="main_model">
                            <img src="<?php echo asset_url('images/model.png');?>" alt="">
                        </div>
                        <!-- 新闻列表 -->
                        <div class="main_news">
                            <ul class="news_list">
                                <li><img src="<?php echo asset_url('images/news.png');?>" alt=""></li>
                                <li><img src="<?php echo asset_url('images/news.png');?>" alt=""></li>
                            </ul>
                            <p class="news_more">查看更多新闻 > </p>
                        </div>
                        <!-- 好友动态 -->
                        <div class="main_friends">
                            <ul>
                                <li>
                                    <img src="<?php echo asset_url('images/friends.png');?>" alt="" class="friend_img">
                                    <div class="friend_from">
                                        <div class="from_box">
                                            <span class="from_font">来自</span>
                                            <span class="from_add">吃喝玩乐</span>
                                        </div>
                                        <div class="from_zan">
                                            <img src="<?php echo asset_url('images/zan.png');?>" alt="">
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <!-- 底部菜单 -->
                        <div class="foot_nav">
                            <ul>
                                <li><img src="<?php echo asset_url('images/home.png');?>" alt=""><p>首页</p></li>
                                <li><img src="<?php echo asset_url('images/community.png');?>" alt=""><p>论坛</p></li>
                                <li><img src="<?php echo asset_url('images/group.png');?>" alt=""><p>坛友圈</p></li>
                                <li><img src="<?php echo asset_url('images/find.png');?>" alt=""><p>发现</p></li>
                                <li><img src="<?php echo asset_url('images/personal.png');?>" alt=""><p>我的</p></li>
                            </ul>
                        </div>
                    </div>
    
            </div>  

               
            </form>  
            <div style="overflow: hidden;clear: both;">
                <button class="edit_btn" id="save">保存修改</button>
            </div>
            
        </div>

    </div>
<script>
    //颜色选择开关事件
     $('.biu_rdo img').click(function(){
        var isc=$(this).attr('isc');
        var colorV = $(this).attr('colorV');
        if(colorV == 2)
        {
            //单击多彩主题
            var objli = $('.changeColor').first();

            objli.addClass('colorOn');
            objli.siblings().removeClass('colorOn');

            var setc = rgb2hex(objli.children('p').css('background-color'));
            setcolor(setc);
            $("input[name=color]").val(setc);        
        }
        else
        {
            //单击白色主题
            $("input[name=color]").val('white');
            var setColorV = "white";
            setcolor(setColorV);
            $(".changeColor").removeClass('colorOn');
        }
        if(isc==0){
            $(this).attr('src','<?php echo asset_url("images/choice.png");?>');
            $(this).attr('isc','1');
            $(this).siblings('img').attr('src','<?php echo asset_url("images/unchoice.png")?>');
            $(this).siblings('img').attr('isc','0');
            var pid=$(this).attr('pid');
            if(pid==1){
                $('.changeInfo-ul,#colorpicker').show();                
            }else{
                 $('.changeInfo-ul,#colorpicker').hide();
            }
        }
    })
</script>
<script type="text/javascript">

    var setColorV = $('input[name=color]').val();
    var vcolor = $('input[name=color]').attr('vcolor');
    //初始化
    
    //选择按钮显示
    $('.biu_rdo img').each(function(){

     if($(this).attr('colorV') == vcolor)
     {
        $(this).attr('src','<?php echo asset_url("images/choice.png");?>');
        $(this).attr('isc',1);
     }
    });
    if(setColorV == "white")
    {
        $("#colorpicker,.changeInfo-ul").hide();
    }
    else
    {
        $("#colorpicker,.changeInfo-ul").show();

        //推荐颜色 初始化显示
        $('.changeColor').each(function(){
            var color = $(this).find('.colorPosition').css('background-color');

            color = rgb2hex(color);
            if( color == setColorV){
                $(this).addClass('colorOn');
                $(this).siblings().removeClass('colorOn');
            }
        });
    }
    $('.changeColor').on('click',function(event) {
        event.preventDefault();
        /* Act on the event */
        $(this).addClass('colorOn');
        $(this).siblings().removeClass('colorOn');
        var color = $(this).find('.colorPosition').css('background-color');
        $("input[name='color']").val(rgb2hex(color));
        setcolor(rgb2hex(color));
    });  
    setcolor(setColorV);
    function zero_fill_hex(num, digits) {
      var s = num.toString(16);
      while (s.length < digits)
        s = "0" + s;
      return s;
    }
    function rgb2hex(rgb) {

      if (rgb.charAt(0) == '#')
        return rgb;
     
      var ds = rgb.split(/\D+/);
      var decimal = Number(ds[1]) * 65536 + Number(ds[2]) * 256 + Number(ds[3]);
      return "#" + zero_fill_hex(decimal, 6);
    }
    $(document).ready(function() { 
        //调色板加载     
        $('#colorpicker').farbtastic('#color');
        
        $('#save').on('click',function(event) {
            event.preventDefault();
            /* Act on the event */
            $('form').submit();
        });

    });

    //展示例子
    function setcolor(subjectColor)
    {
        //顶部背景颜色
        $('.color_header').css('background-color',subjectColor);
        //首页导航初始颜色
        $('#nav li').eq(0).css('color',subjectColor);
        $('#nav li').eq(0).css('border-bottom','2px solid '+subjectColor);
        //导航颜色切换
        $('#nav li').click(function (){
            $(this).css('color',subjectColor);
            $(this).css('border-bottom','2px solid '+subjectColor);
            $(this).siblings().css('color','#ADADAD');
            $(this).siblings().css('border-bottom','1px solid #DFDFDF');
        })
        //查看更多新闻颜色
        $('.news_more').css('color',subjectColor);
        //好友动态来源文字颜色
        $('.from_add').css('color',subjectColor);
        //底部颜色
        $('.foot_nav ul li').eq(0).find('img').css('background-color',subjectColor);
        $('.foot_nav ul li').eq(0).find('p').css('color',subjectColor);        
    }
</script>
<script src="<?php echo asset_url('js/farbtastic.js');?>"></script>