6poker-cordova-51Voa
/
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/download.css" />
        <link rel="stylesheet" type="text/css" href="css/minibar.css" />
        <link rel="stylesheet" type="text/css" href="css/play.css" />
        <link rel="stylesheet" type="text/css" href="css/cat-song-list.css" />
        <title>51Voa</title>
    </head>
    <body>
        <div class="doc">
            <div class="ui-page">
                <div data-role="header" class="ui-nav">
                    <div class="item tab-my cur">我的VOA</div>
                    <div class="item tab-dl">发现</div>
                    <div class="btn-setting"></div>
                </div>
                <div role="main" class="ui-content">
                    <div class="content-item content-cat"></div>
                    <div class="content-item content-dl">
                        <div class="dl-btn-box">
                            <div class="dl-btn-find">
                                <i class="btn"></i>
                                <span>发现Voa</span>
                            </div>
                            <div class="dl-btn-dl-all">
                                <i class="btn"></i>
                                <span>下载所有</span>
                            </div>
                            <div class="dl-btn-stop-all">
                                <i class="btn"></i>
                                <span>停止所有</span>
                            </div>
                        </div>
                        <div class="dl-list-box"></div>
                    </div>
                </div>
            </div>
            <div class="ui-page page-song-list">
                <div data-role="header" class="ui-nav">
                    <div class="btn-return"></div>
                </div>
                <div class="ui-content"></div>
            </div>
            <div class="minibar">
                <div class="mi-song-cover"></div>
                <div class="mi-song-info">
                    <div class="mi-title ellipsis">多好听的music</div>
                    <div>science</div>
                    <div>01:48/03:03</div>
                </div>
                <div class="mi-btns">
                    <div class="btn mi-list-btn"></div>
                    <div class="btn mi-play-btn"></div>
                    <div class="btn mi-next-btn"></div>
                </div>
            </div>
            <div class="ui-page page-setting">
                <div data-role="header" class="ui-nav">
                    <div class="btn-return">设置</div>
                </div>
                <div class="ui-content">
                    <div class="setting-item clearfix">
                        <div class="setting-item-desc">仅WiFi联网</div>
                        <div class="setting-item-lock-btn"></div>
                    </div>
                    <div class="setting-item setting-item-sel clearfix">
                        <div class="setting-item-desc">选择分类</div>
                        <div class="setting-item-more"></div>
                    </div>
                    <div class="setting-item clearfix">
                        <div class="setting-item-desc">关于51Voa</div>
                        <div class="setting-item-more"></div>
                    </div>
                </div>
            </div>
            <div class="ui-page page-cat">
                <div data-role="header" class="ui-nav">
                    <div class="btn-return">选择分类</div>
                </div>
                <div class="ui-content"></div>
            </div>
            <div class="ui-page page-play">
                <div class="page-play-bg"></div>
                <div class="page-play-content">
                    <div class="play-header">
                        <div class="btn play-collapse"></div>
                        <div class="play-song-info">
                            <div class="play-song-title">老男孩</div>
                            <div class="play-song-cat">Science</div>
                        </div>
                    </div>
                    <div class="play-content-box">
                        <div class="play-content play-content-playlist">
                            list
                        </div>
                        <div class="play-content play-content-cover">
                            <div class="play-content-cover-img"></div>
                        </div>
                        <div class="play-content play-content-lyric"></div>
                        <div class="play-content play-content-text"></div>
                        <div class="play-content play-content-translation"></div>
                    </div>
                    <div class="play-mini-nav">
                        <span class="play-mini-nav-item play-mini-nav-item-cur"></span>
                        <span class="play-mini-nav-item"></span>
                        <span class="play-mini-nav-item"></span>
                        <span class="play-mini-nav-item"></span>
                        <span class="play-mini-nav-item"></span>
                    </div>
                    <div class="play-progress">
                        <div class="play-progress-bar"></div>
                        <div class="btn play-progress-dot"></div>
                        <div class="play-progress-time clearfix">
                            <span class="play-cur-time">00:00</span>
                            <span class="play-duration">00:00</span>
                        </div>
                    </div>
                    <div class="play-control">
                        <div class="btn play-btn-mode play-btn-mode-single"></div>
                        <div class="btn play-btn-prev"></div>
                        <div class="btn play-btn-play"></div>
                        <div class="btn play-btn-next"></div>
                    </div>
                </div>
            </div>
        </div>
        <script id="catTpl" type="text/template">
            {for(var i=0,cat,len=$list.length;i<len;i++)}
            <div class="cat-item cat-{$list[i]}" data-cat="{$list[i]}">
                <div class="icon" style="background-image: url(img/cat-cover/{$cover[$list[i]]})"></div>
                <div class="info">
                    <div class="info-title">{$title[$list[i]]}</div>
                    <div class="info-desc">共{$song[$list[i]].length}首离线音乐</div>
                </div>
                <div class="more"></div>
            </div>
            {/for}
        </script>
        <script id="songListTpl" type="text/template">
            {for(var i=0,len=$list.length;i<len;i++)}
            <div class="song-list-item ellipsis" data-uid="{$list[i].uid}" data-cat="{$cat}">{$list[i].name}</div>
            {/for}
        </script>
        <script id="catSelTpl" type="text/template">
            {for(var i=0,cat,len=$list.length;i<len;i++)}
            <div class="cat-sel-item clearfix">
                <div class="cat-sel-item-desc">{$title[$list[i]]}</div>
                <div class="cat-sel-item-check-btn"></div>
            </div>
            {/for}
        </script>
        <script id="dlTpl" type="text/template">
            <div class="dl-cat-item">
                <div class="dl-cat-title-box">
                    <div class="dl-cat-title">{$catName}</div>
                </div>
                <div class="dl-cat-list">
                    {for(var i=0,len=$list.length;i<len;i++)}
                    <div id="{$list[i].id}" class="dl-song-item" data-cat="{$cat}" data-index="{i}">
                        <div class="dl-song-item-progress"></div>
                        <div class="dl-song-title ellipsis">{$list[i].nameEnc}</div>
                        <div class="btn dl-song-btn"></div>
                        <div class="dl-song-item-tip">等待下载中</div>
                    </div>
                    {/for}
                </div>
            </div>
        </script>
        <script id="lyricTpl" type="text/template">
            <div class="lyric-panel">
                <div class="lyric-title">{$title}</div>
                <div class="lyric-artist">artist: {$artist}</div>

                {for(var i=0,len=$timeLines.length;i<len;i++)}
                <div class="lyric-item">{$timeLines[i].text}</div>
                {/for}
            </div>
        </script>
        <script type="text/javascript" src="cordova.js"></script>
        <script src="js/zepto.js"></script>
        <script src="js/touch.js"></script>
        <script src="js/callbacks.js"></script>
        <script src="js/deferred.js"></script>
        <script src="js/qwrap.core.js"></script>
        <script src="js/config.js"></script>
        <script src="js/util.js"></script>
        <script src="js/VoaStorage.js"></script>
        <script src="js/Play.js"></script>
        <script src="js/download.js"></script>
        <script src="js/Lyric.js"></script>
        <script type="text/javascript" src="js/boot.js"></script>
    </body>
</html>