<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title><?php echo $SITE['music_title'];?>- <?php echo $SITE['title'];?></title>
  <meta name="description" content="<?php echo $SITE['con'];?>">
  <meta name="keywords" content="<?php echo $SITE['keyword'];?>">
<?php require_once 'header.html';?>
        <!-- /.aside -->
        <section id="content">
          <section class="vbox">
          <section class="w-f-md">
            <section class="hbox stretch bg-black dker">
              <!-- side content -->
              <aside class="col-sm-5 no-padder" id="sidebar">
                <section class="vbox animated fadeInUp">
                  <section class="scrollable">
                    <div class="m-t-n-xxs item pos-rlt">
                      <div class="top text-right">
                        <span class="musicbar animate bg-success bg-empty inline m-r-lg m-t" style="width:25px;height:30px">
                          <span class="bar1 a3 lter"></span>
                          <span class="bar2 a5 lt"></span>
                          <span class="bar3 a1 bg"></span>
                          <span class="bar4 a4 dk"></span>
                          <span class="bar5 a2 dker"></span>
                        </span>
                      </div>
                      <div class="bottom gd bg-info wrapper-lg">
                        <span class="pull-right text-sm">101,400 <br>你与我的距离</span>
                        <span class="h2 font-thin"><?php echo $SITE['music_title'];?></span>
                      </div>
                      <img class="img-full" src="<?php echo $SITE['music_image'];?>" alt="...">
                    </div>
                    <ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
                 <!--    开始循环 -->
                 <?php $i=0; foreach ($APP as $API){?> 
                      <li class="list-group-item">
                        <div class="pull-right m-l">
                          <a href="?i=mp3&id=<?php echo $API['id'];?>" class="m-r-sm"><i class="icon-eye"></i></a>
                          <a href="#" class="m-r-sm"><i class="icon-plus"></i></a>
                          <a href="#"><i class="icon-close"></i></a>
                        </div>
                        <a href="#" data-num="<?php echo $i;?>" class="jp-play-me m-r-sm pull-left">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                        <div class="clear text-ellipsis">
                          <span><?php echo $API['title'];?></span>
                          <span class="text-muted"> -- 04:35</span>
                        </div>
                      </li>
                      <?php $i++;}?>
                  <!--   /. 开始循环 -->
                  

                    </ul>
              
                  </section>
                </section>
              
              </aside>
              
              <!-- / side content -->
              <section class="col-sm-4 no-padder bg">
                <section class="vbox">
                  <section class="scrollable hover">
                    <ul class="list-group list-group-lg no-bg auto m-b-none m-t-n-xxs">
                       <!--    开始循环 -->
                 <?php $i=0; foreach ($APP as $API){?> 
                      <li class="list-group-item clearfix">
                        <a href="#" data-num="<?php echo $i;?>" class="jp-play-me pull-right m-t-sm m-l text-md">
                          <i class="icon-control-play text"></i>
                          <i class="icon-control-pause text-active"></i>
                        </a>
                        <a href="#" class="pull-left thumb-sm m-r">
                          <img src="<?php echo $API['image_link'];?>" alt="...">
                        </a>
                        <a class="clear" href="#">
                          <span class="block text-ellipsis"><?php echo $API['title'];?></span>
                          <small class="text-muted"><?php echo $API['content'];?></small>
                        </a>
                      </li>
                            <?php if ($i==$SITE['music_rec']-1){break;}$i++;}?>
                  <!--   /. 开始循环 -->
                    </ul>
                  </section>
                </section>
              </section>
              <section class="col-sm-3 no-padder lt">
                <section class="vbox">
                  <section class="scrollable hover">
                    <div class="m-t-n-xxs">
                    <?php $i=0;foreach ($IFY as $ios ){ if($i==0){?>
                      <div class="item pos-rlt">
                        <a href="#" class="item-overlay active opacity wrapper-md font-xs">
                          <span class="block h3 font-bold text-info"><?php echo $ios['ify_name'];?></span>
                          <span class="text-muted"><?php echo iconv_substr(strip_tags($ios['the']), 0 , 35 , "utf-8" );?></span>
                          <span class="bottom wrapper-md block">- <i class="icon-arrow-right i-lg pull-right"></i></span>
                        </a>
                        <a href="#">
                          <img class="img-full" src="<?php echo TEMP_URL?>images/m40.jpg" alt="...">
                        </a>
                      </div>
                      <?php } if($i==1){?>
                      <div class="item pos-rlt">
                        <a href="#" class="item-overlay active opacity wrapper-md font-xs text-right">
                          <span class="block h3 font-bold text-warning text-u-c"><?php echo $ios['ify_name'];?></span>
                          <span class="text-muted"><?php echo iconv_substr(strip_tags($ios['the']), 0 , 35 , "utf-8" );?></span>
                          <span class="bottom wrapper-md block"><i class="icon-arrow-right i-lg pull-left"></i> -</span>
                        </a>
                        <a href="#">
                          <img class="img-full" src="<?php echo TEMP_URL?>images/m41.jpg" alt="...">
                        </a>
                      </div>
                      <?php } if($i==2){?>
                      <div class="item pos-rlt">
                        <a href="#" class="item-overlay active opacity wrapper-md font-xs">
                          <span class="block h3 font-bold text-success text-u-c"><?php echo $ios['ify_name'];?></span>
                          <span class="text-muted"><?php echo iconv_substr(strip_tags($ios['the']), 0 , 35 , "utf-8" );?></span>
                          <span class="bottom wrapper-md block">- <i class="icon-arrow-right i-lg pull-right"></i></span>
                        </a>
                        <a href="#">
                          <img class="img-full" src="<?php echo TEMP_URL?>images/m42.jpg" alt="...">
                        </a>
                      </div>
                     <?php } if($i==3){?>
                      <div class="item pos-rlt">
                        <a href="#" class="item-overlay active opacity wrapper-md font-xs text-right">
                          <span class="block h3 font-bold text-white text-u-c"><?php echo $ios['ify_name'];?></span>
                          <span class="text-muted"><?php echo iconv_substr(strip_tags($ios['the']), 0 , 35 , "utf-8" );?></span>
                          <span class="bottom wrapper-md block"><i class="icon-arrow-right i-lg pull-left"></i> -</span>
                        </a>
                        <a href="#">
                          <img class="img-full" src="<?php echo TEMP_URL?>images/m44.jpg" alt="...">
                        </a>
                      </div>
                      <?php } if($i==4){?>
                      <div class="item pos-rlt">
                        <a href="#" class="item-overlay active opacity wrapper-md font-xs">
                          <span class="block h3 font-bold text-danger-lter text-u-c"><?php echo $ios['ify_name'];?></span>
                          <span class="text-muted"><?php echo iconv_substr(strip_tags($ios['the']), 0 , 35 , "utf-8" );?></span>
                          <span class="bottom wrapper-md block">- <i class="icon-arrow-right i-lg pull-right"></i></span>
                        </a>
                        <a href="#">
                          <img class="img-full" src="<?php echo TEMP_URL?>images/m45.jpg" alt="...">
                        </a>
                      </div>
                      <?php } if($i>4){?>
                      <div class="item pos-rlt">
                        <a href="#" class="item-overlay active opacity wrapper-md font-xs text-right">
                          <span class="block h3 font-bold text-warning text-u-c"><?php echo $ios['ify_name'];?></span>
                          <span class="text-muted"><?php echo iconv_substr(strip_tags($ios['the']), 0 , 35 , "utf-8" );?></span>
                          <span class="bottom wrapper-md block"><i class="icon-arrow-right i-lg pull-left"></i> -</span>
                        </a>
                        <a href="#">
                          <img class="img-full" src="<?php echo TEMP_URL?>images/m41.jpg" alt="...">
                        </a>
                      </div>
                       <?php } $i++;}?>
                    </div>
                  </section>
                </section>
              </section>
            </section>
          </section>
          <footer class="footer bg-success dker">
            <div id="jp_container_N">
                    <div class="jp-type-playlist">
                      <div id="jplayer_N" class="jp-jplayer hide"></div>
                      <div class="jp-gui">
                        <div class="jp-video-play hide">
                          <a class="jp-video-play-icon">play</a>
                        </div>
                        <div class="jp-interface">
                          <div class="jp-controls">
                            <div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
                            <div>
                              <a class="jp-play"><i class="icon-control-play i-2x"></i></a>
                              <a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
                            </div>
                            <div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
                            <div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
                            <div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
                            <div class="jp-progress hidden-xs">
                              <div class="jp-seek-bar dk">
                                <div class="jp-play-bar bg">
                                </div>
                                <div class="jp-title text-lt">
                                  <ul>
                                    <li></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
                            <div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
                            <div class="hidden-xs hidden-sm">
                              <a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
                              <a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
                            </div>
                            <div class="hidden-xs hidden-sm jp-volume">
                              <div class="jp-volume-bar dk">
                                <div class="jp-volume-bar-value lter"></div>
                              </div>
                            </div>
                            <div>
                              <a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
                              <a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
                            </div>
                            <div>
                              <a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
                              <a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
                            </div>
                            <div class="hide">
                              <a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
                              <a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="jp-playlist dropup" id="playlist">
                        <ul class="dropdown-menu aside-xl dker">
                          <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                          <li class="list-group-item"></li>
                        </ul>
                      </div>
                      <div class="jp-no-solution hide">
                        <span>Update Required</span>
                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                      </div>
                    </div>
                  </div>
          </footer>
        </section>
          <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
        </section>
      </section>
    </section>    
  </section>
                 <!--  底部加载 -->
 <?php require_once TEMP_URL . 'footer.html';?>

                 
