2012-10-07 12:17:15 +00:00
|
|
|
<!DOCTYPE html>
|
2012-10-04 20:34:45 +00:00
|
|
|
<html>
|
2012-10-07 12:35:56 +00:00
|
|
|
<head>
|
|
|
|
|
<link rel='stylesheet' media='screen' href="css/main.css" />
|
|
|
|
|
<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.24.custom.css" rel="stylesheet">
|
|
|
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script>
|
|
|
|
|
<script type='text/javascript' src='js/knockout-2.1.0.js'></script>
|
2012-10-08 01:09:30 +00:00
|
|
|
<script type='text/javascript' src='https://github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js'></script>
|
2012-10-07 12:35:56 +00:00
|
|
|
<script type='text/javascript' src='js/app.js'></script>
|
2012-10-07 12:17:15 +00:00
|
|
|
|
2012-10-04 20:34:45 +00:00
|
|
|
</head>
|
2012-10-07 12:35:56 +00:00
|
|
|
<body>
|
|
|
|
|
<div id="headerPage">
|
2012-10-08 04:16:44 +00:00
|
|
|
<div id="controls">
|
|
|
|
|
<input type="checkbox" data-bind="checked: shuffle" /> Shuffle
|
|
|
|
|
<input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll
|
|
|
|
|
<input type="checkbox" data-bind="checked: repeat" /> RepeatOne
|
|
|
|
|
<!-- <ul data-bind="foreach: playlist">
|
2012-10-08 01:09:30 +00:00
|
|
|
<li data-bind="text: title"></li>
|
2012-10-08 04:16:44 +00:00
|
|
|
</ul>-->
|
2012-10-08 01:09:30 +00:00
|
|
|
</div>
|
2012-10-08 04:16:44 +00:00
|
|
|
<audio id="audio" controls="controls" preload="auto" tabindex="0" type="audio/mpeg">No funciona el tag html5</audio>
|
|
|
|
|
<div>
|
|
|
|
|
<a href="#" data-bind="click: playPrevious">Prev!</a>
|
|
|
|
|
<a href="#" data-bind="click: playNext">Next!</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="wrapper">
|
2012-10-07 12:35:56 +00:00
|
|
|
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
|
|
|
|
|
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
|
|
|
|
|
<span class="ui-icon ui-icon-triangle-1-s"></span>
|
|
|
|
|
<a href="#" tabindex="0">Listen</a>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 14px; display: block; overflow: auto; padding-top: 11px; padding-bottom: 11px; " role="tabpanel">
|
2012-10-08 01:09:30 +00:00
|
|
|
<ul id="playlist" class="sortable" data-bind="sortable: playlist">
|
|
|
|
|
<li class="ui-state-default" data-bind="sortableItem: { item: $data, parentList: playlist }">
|
|
|
|
|
<div class="list-controls">
|
2012-10-08 04:16:44 +00:00
|
|
|
<span class="ui-icon ui-icon-play" data-bind="click: $root.playSong, visible: ! isPlaying()">Play</span>
|
|
|
|
|
<span class="ui-icon ui-icon-pause" data-bind="click: $root.pauseSong, visible: isPlaying()">Play</span>
|
2012-10-08 01:09:30 +00:00
|
|
|
<span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span>
|
|
|
|
|
<span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
|
|
|
|
|
</div>
|
2012-10-08 04:16:44 +00:00
|
|
|
<span class="list-name" data-bind="text: formattedName()">
|
2012-10-08 01:09:30 +00:00
|
|
|
Name - Title
|
2012-10-08 04:16:44 +00:00
|
|
|
</span>
|
|
|
|
|
<span class="deletesong ui-icon ui-icon-trash" data-bind="click: $root.removeSong">Remove</span>
|
2012-10-08 01:09:30 +00:00
|
|
|
</li>
|
2012-10-07 12:35:56 +00:00
|
|
|
</ul>
|
|
|
|
|
</div> <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span>
|
|
|
|
|
<a href="#" tabindex="-1">Search</a>
|
|
|
|
|
</h3>
|
|
|
|
|
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 14px; display: block; overflow: auto; padding-top: 11px; padding-bottom: 11px; " role="tabpanel">
|
2012-10-08 01:09:30 +00:00
|
|
|
<form method="POST" action="#" data-bind="submit: getResults">
|
|
|
|
|
Search GoEar: <input type="search" name="goearsearch" data-bind="value: queryString">
|
2012-10-07 12:35:56 +00:00
|
|
|
</form>
|
2012-10-08 04:16:44 +00:00
|
|
|
<ul id="searchResults" class="sortable" data-bind="foreach: results">
|
2012-10-08 01:09:30 +00:00
|
|
|
<li class="ui-state-default">
|
|
|
|
|
<div class="list-controls">
|
2012-10-08 04:16:44 +00:00
|
|
|
<span class="ui-icon ui-icon-play" data-bind="click: $root.playSong, visible: ! isPlaying()">Play</span>
|
|
|
|
|
<span class="ui-icon ui-icon-pause" data-bind="click: $root.pauseSong, visible: isPlaying()">Play</span>
|
2012-10-08 01:09:30 +00:00
|
|
|
<span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span>
|
|
|
|
|
<span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
|
|
|
|
|
</div>
|
2012-10-08 04:16:44 +00:00
|
|
|
<div class="list-name" data-bind="text: formattedName()">
|
2012-10-08 01:09:30 +00:00
|
|
|
Name - Title
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
2012-10-07 12:35:56 +00:00
|
|
|
</ul>
|
2012-10-08 01:09:30 +00:00
|
|
|
|
2012-10-07 12:35:56 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
2012-10-04 20:34:45 +00:00
|
|
|
</html>
|
