index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8" />
   5 <meta name="viewport" content="width=720, height=1280, user-scalable=no" />
   6 <meta http-equiv="cache-control" content="no-cache" />
   7 <title>Multimedia Player</title>
   8
   9 <!--  jquery and plugins  -->
  10 <script type="text/javascript"
  11         src="./css/car/components/jQuery/jquery-1.8.2.js"></script>
  12 <script type="text/javascript"
  13         src="./css/car/components/knockout/knockout.js"></script>
  14 <script type="text/javascript"
  15         src="./css/car/components/carousel/jquery.carouFredSel-6.2.1-packed.js"></script>
  16 <script type="text/javascript"
  17         src="./css/car/components/carousel/jquery.touchSwipe.min.js"></script>
  18
  19 <!-- jsRender Library Import -->
  20 <script type="text/javascript"
  21         src="./css/car/components/jsViews/jsrender.js"></script>
  22 <script type="text/javascript"
  23         src="./css/car/components/jsViews/template.js"></script>
  24
  25 <!-- User and car theme and javascripts  -->
  26 <link rel="stylesheet" href="./css/car/car.css" />
  27 <link rel="stylesheet"
  28         href="./css/car/components/incomingCall/incomingCall.css" />
  29 <script type="text/javascript" src="./css/car/car.js"></script>
  30 <script type="text/javascript" src='./js/services/bootstrap.js'></script>
  31
  32 <link rel="stylesheet" href="./css/style.css" />
  33 <link rel="stylesheet" href="./css/music_library.css" />
  34
  35 <!-- Music Player -->
  36 <script type="text/javascript" src="./js/utils.js"></script>
  37 <script type="text/javascript" src="./js/carousel.js"></script>
  38 <script type="text/javascript" src="./js/localcontent.js"></script>
  39 <script type="text/javascript" src="./js/mediacontent.js"></script>
  40 <script type="text/javascript" src="./js/remotecontent.js"></script>
  41 <script type="text/javascript" src="./js/multimedialibrary.js"></script>
  42 <script type="text/javascript" src="./js/main.js"></script>
  43
  44 <!-- Components -->
  45 <script type="text/javascript"
  46         src="./css/car/components/audioPlayer/audioPlayer.js"></script>
  47 <script type="text/javascript" src="./components/infoPanel/infoPanel.js"></script>
  48 <script type="text/javascript"
  49         src="./components/timeProgressBar/timeProgressBar.js"></script>
  50 <script type="text/javascript"
  51         src="./components/spectrumAnalyzer/spectrumAnalyzer.js"></script>
  52 <script type="text/javascript"
  53         src="./css/car/components/configuration/configuration.js"></script>
  54 <script type="text/javascript"
  55         src="./css/car/components/bottomPanel/bottomPanel.js"></script>
  56 <script type="text/javascript"
  57         src="./css/car/components/buttonControls/buttonControls.js"></script>
  58 <script type='text/javascript'
  59         src='./css/car/components/progressBar/progressBar.js'></script>
  60 <link rel="stylesheet"
  61         href="./css/car/components/progressBar/progressBar.css" />
  62 <script type='text/javascript'
  63         src='./css/car/components/topBarIcons/topBarIcons.js'></script>
  64 <link rel="stylesheet"
  65         href="./css/car/components/topBarIcons/topBarIcons.css" />
  66 <script type='text/javascript'
  67         src='./css/car/components/boxCaption/boxCaption.js'></script>
  68 <link rel="stylesheet"
  69         href="./css/car/components/boxCaption/boxCaption.css" />
  70 <script type='text/javascript'
  71         src='./css/car/components/dateTime/dateTime.js'></script>
  72 <link rel="stylesheet" href="./css/car/components/dateTime/dateTime.css" />
  73 <script type="text/javascript"
  74         src='./css/car/components/alphabetBookmark/alphabetBookmark.js'></script>
  75 <link rel="stylesheet"
  76         href="./css/car/components/alphabetBookmark/alphabetBookmark.css" />
  77 <script type="text/javascript"
  78         src='./css/car/components/library/library.js'></script>
  79 <link rel="stylesheet" href="./css/car/components/library/library.css" />
  80
  81 <link rel="stylesheet"
  82         href="./css/car/components/progressBar/volumeSlider.css" />
  83 <script type="text/javascript"
  84         src="./css/car/components/jQuery/jquery.nouisliderix.js"></script>
  85
  86 </head>
  87
  88 <body>
  89         <div id="topBarIcons"></div>
  90
  91         <div id="backgroundAudio"
  92                 class="backgroundAudioClass defaultPageBackgroundColor">
  93                 <div id="clockElement"></div>
  94
  95                 <div id="libraryButton"
  96                         class="button libraryButton fontSizeSmaller fontWeightBold fontColorNormal">LIBRARY</div>
  97
  98                 <div id="multimediaPlayer" class="playerWrapper">
  99                         <div id="carouselWrapper" class="carouselWrapper borderColorDark">
 100                                 <ul id="carouselList" class="carouselList"></ul>
 101                         </div>
 102
 103                         <audio id="audioPlayer" src=""></audio>
 104
 105                         <video id="videoPlayer" src=""></video>
 106
 107                         <div id="volumeControl" class="volumeControlClass">
 108                                 <div id="VCicon"></div>
 109                                 <div class="sliderStart"></div>
 110                                 <div id="VCline" class="bgColorTheme"></div>
 111                                 <div id="VCinner" class="bgColorTheme boxShadow3"></div>
 112                                 <div class="noVolumeSlider"></div>
 113                         </div>
 114
 115                         <div id="controlButtons" class="audioControlsButtons"></div>
 116
 117                         <div id="infoPanelWrapper" class="textPanel">
 118                                 <img id="thumbnail"
 119                                         class="currentlyPlayingPreviewClass albumThumbnail carouselImage boxShadow2" />
 120                                 <div id="timeBar" class="timeBarClass"></div>
 121                                 <div id="infoPanel" class="infoPanelClass"></div>
 122                         </div>
 123
 124                         <div id="spectAnalyzer" class="spectrumAnalyzer"></div>
 125                 </div>
 126
 127                 <div id="bottomPanel" class="bottomPanel bottomPanelImg"></div>
 128         </div>
 129
 130         <div id="musicLibrary" class="library pageBgColorNormalTransparent"></div>
 131
 132         <script type="text/html" id="localContentCategoryItemTemplate">
 133                 <div class="musicElement boxShadow4 borderColorTheme" data-bind='click: MultimediaLibrary.selectLocalContent'>
 134                         <div class="musicInfoBox musicInfoBoxCentered textBgColorNormalTransparent">
 135                                 <div class="contentTitle fontSizeLarge fontWeightBold fontColorNormal oneLineEllipsis textTransformUppercase" data-bind="text: title"></div>
 136                         </div>
 137                 </div>
 138         </script>
 139
 140         <script type="text/html" id="localContentSubCategoryItemTemplate">
 141                 <div class="musicElement boxShadow4 borderColorTheme" data-bind='click: MultimediaLibrary.selectLocalContent'>
 142                         <div class="musicInfoBox musicInfoBoxCentered textBgColorNormalTransparent">
 143                                 <div class="contentTitle fontSizeLarge fontWeightBold fontColorNormal oneLineEllipsis textTransformUppercase" data-bind="text: title"></div>
 144                         </div>
 145                 </div>
 146         </script>
 147
 148         <script type="text/html" id="localContentArtistItemTemplate">
 149                 <div class="musicElement boxShadow4 borderColorTheme" data-bind='click: MultimediaLibrary.selectLocalContent'>
 150                         <div class="musicInfoBox textBgColorNormalTransparent">
 151                                 <div class="contentTitle fontSizeLarge fontWeightBold fontColorNormal oneLineEllipsis textTransformUppercase" data-bind="text: title"></div>
 152                                 <div class="contentSubtitle fontSizeXSmall fontWeightBold fontColorTheme oneLineEllipsis textTransformUppercase" data-bind="text: subtitle"></div>
 153                         </div>
 154                 </div>
 155         </script>
 156
 157         <script type="text/html" id="localContentAlbumItemTemplate">
 158                 <div class="musicElement boxShadow4 borderColorTheme" data-bind='click: MultimediaLibrary.selectLocalContent'>
 159                         <div class="musicImage albumThumbnail">
 160                                 <img data-bind="attr:{src: thumbnail}" />
 161                         </div>
 162                         <div class="musicInfoBox musicInfoBoxShort textBgColorNormalTransparent">
 163                                 <div class="contentTitle fontSizeLarge fontWeightBold fontColorNormal oneLineEllipsis textTransformUppercase" data-bind="text: title"></div>
 164                                 <div class="contentSubtitle fontSizeXSmall fontWeightBold fontColorTheme oneLineEllipsis textTransformUppercase" data-bind="text: subtitle"></div>
 165                         </div>
 166                 </div>
 167         </script>
 168
 169         <script type="text/html" id="localContentAudioVideoItemTemplate">
 170                 <div class="musicElement boxShadow4 borderColorTheme" data-bind='click: MultimediaLibrary.selectLocalMediaContent'>
 171                         <div class="musicImage albumThumbnail">
 172                                 <img data-bind="attr:{src: Utils.getThumbnailPath($data)}" />
 173                         </div>
 174                         <div class="musicInfoBox musicInfoBoxShort textBgColorNormalTransparent">
 175                                 <div class="contentTitle fontSizeLarge fontWeightBold fontColorNormal oneLineEllipsis textTransformUppercase" data-bind="text: title"></div>
 176                                 <div class="contentSubtitle fontSizeXSmall fontWeightBold fontColorTheme oneLineEllipsis textTransformUppercase" data-bind="text: Utils.getArtistName($data)"></div>
 177                         </div>
 178                 </div>
 179         </script>
 180
 181         <script type="text/html" id="mediaSourceItemTemplate">
 182                 <div class="musicElement boxShadow4 borderColorTheme" data-bind='click: MultimediaLibrary.selectRemoteMediaSource'>
 183                         <div class="musicInfoBox musicInfoBoxCentered textBgColorNormalTransparent">
 184                                 <div class="contentTitle fontSizeLarge fontWeightBold fontColorNormal oneLineEllipsis textTransformUppercase" data-bind="text: friendlyName"></div>
 185                         </div>
 186                 </div>
 187         </script>
 188
 189         <script type="text/html" id="mediaContentItemTemplate">
 190                 <div class="musicElement boxShadow4 borderColorTheme" data-bind='click: MultimediaLibrary.selectRemoteContent'>
 191                         <div class="musicImage albumThumbnail">
 192                                 <img data-bind="attr:{src: Utils.getThumbnailPath($data)}" />
 193                         </div>
 194                         <div class="musicInfoBox musicInfoBoxShort textBgColorNormalTransparent" data-bind="css: { musicInfoBoxCentered: type == 'CONTAINER' }">
 195                                 <!-- ko if: type == "CONTAINER" -->
 196                                         <div class="contentTitle fontSizeLarge fontWeightBold fontColorNormal oneLineEllipsis textTransformUppercase" data-bind="text: title"></div>
 197                                 <!-- /ko -->
 198                                 <!-- ko if: type != "CONTAINER" -->
 199                                         <div class="contentTitle fontSizeLarge fontWeightBold fontColorNormal oneLineEllipsis textTransformUppercase" data-bind="text: title"></div>
 200                                         <div class="contentSubtitle fontSizeXSmall fontWeightBold fontColorTheme oneLineEllipsis textTransformUppercase" data-bind="text: Utils.getArtistName($data)"></div>
 201                                 <!-- /ko -->
 202                         </div>
 203                 </div>
 204         </script>
 205 </body>
 206 </html>