index.html

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