platypush/platypush/backend/http/templates/plugins/music.mpd.html

<script type="text/javascript" src="{{ url_for('static', filename='js/music.mpd.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/music.mpd.css') }}"></script>

<div id="music-search-modal" class="modal">
    <div class="modal-container">
        <div class="modal-header">
            Search For Music
        </div>

        <div class="modal-body">
            <form id="music-search-form" action="#">
                <div class="row form-row">
                    <div class="two columns">
                        <label for="music-search-any">Any</label>
                    </div>
                    <div class="ten columns">
                        <input type="text" name="any">
                    </div>
                </div>

                <div class="row form-row">
                    <div class="two columns">
                        <label for="music-search-artist">Artist</label>
                    </div>
                    <div class="ten columns">
                        <input type="text" name="artist">
                    </div>
                </div>

                <div class="row form-row">
                    <div class="two columns">
                        <label for="music-search-title">Title</label>
                    </div>
                    <div class="ten columns">
                        <input type="text" name="title">
                    </div>
                </div>

                <div class="row form-row">
                    <div class="two columns">
                        <label for="music-search-album">Album</label>
                    </div>
                    <div class="ten columns">
                        <input type="text" name="album">
                    </div>
                </div>

                <div class="row music-form-bottom">
                    <div class="six columns offset-by-six do-search-btns">
                        <input type="button" class="btn-default" data-dismiss-modal="#music-search-modal"
                            value="Close">
                        <input type="submit" class="btn-primary" value="Search">
                    </div>
                </div>
            </form>

            <form class="row" id="music-search-results-form">
                <div class="six columns">
                    <button class="btn-default" id="music-results-add" disabled="disabled">
                        <i class="fa fa-plus"></i>
                    </button>
                    <button class="btn-default" id="music-results-play" disabled="disabled">
                        <i class="fa fa-play"></i>
                    </button>
                </div>

                <div class="six columns right-side">
                    <input type="button" class="btn-default"
                        data-dismiss-modal="#music-search-modal" value="Close">
                    <input type="button" class="btn-primary"
                        id="music-search-reset" value="Reset">
                </div>
            </form>

            <div id="music-search-results-container" class="row">
                <div id="music-search-results-head" class="row">
                    <div class="three columns">Artist</div>
                    <div class="four columns">Title</div>
                    <div class="four columns">Album</div>
                    <div class="one column">Time</div>
                </div>

                <div id="music-search-results" class="row"></div>
            </div>
        </div>
    </div>
</div>

<div class="row track-info">
    <span class="no-track">No media is being played</span>
    <span class="artist"></span>
    <span class="track"></span>
</div>

<div class="playback-controls">
    <div class="row">
        <div class="eight columns offset-by-two slider-container" id="track-seeker-container">
            <span class="seek-time" id="seek-time-elapsed">-:--</span>&nbsp;
            <input type="range" min="0" id="track-seeker" disabled="disabled" class="slider" style="width:75%">
            &nbsp;<span class="seek-time" id="seek-time-length">-:--</span>
        </div>
    </div>

    <div class="row">
        <div class="ten columns offset-by-one">
            <button data-action="previous">
                <i class="fa fa-step-backward"></i>
            </button>

            <button data-action="repeat">
                <i class="fa fa-repeat"></i>
            </button>

            <button data-action="play">
                <i class="fa fa-play"></i>
            </button>

            <button data-action="pause">
                <i class="fa fa-pause"></i>
            </button>

            <button data-action="stop">
                <i class="fa fa-stop"></i>
            </button>

            <button data-action="random">
                <i class="fa fa-random"></i>
            </button>

            <button data-action="next">
                <i class="fa fa-step-forward"></i>
            </button>
        </div>
    </div>

    <div class="row">
        <div class="eight columns offset-by-two slider-container" id="volume-ctrl-container">
            <i class="fa fa-volume-down"></i> &nbsp;
            <input type="range" min="0" max="100" id="volume-ctrl" class="slider" style="width:80%">
            &nbsp; <i class="fa fa-volume-up"></i>
        </div>
    </div>
</div>

<div class="row">
    <div id="player-left-side" class="three columns music-pane">
        <div class="row">
            <div id="browser-controls">
                <button data-action="add">
                    <i class="fa fa-plus"></i>
                </button>
                <button data-action="search" data-modal="#music-search-modal">
                    <i class="fa fa-search"></i>
                </button>
            </div>

            <div id="browser-filter-container">
                <input type="text" id="browser-filter" placeholder="Filter">
            </div>

            <div id="music-browser" class="music-pane"></div>
        </div>
    </div>

    <div id="player-right-side" class="nine columns music-pane">
        <div class="row">
            <div id="playlist-controls">
                <button data-action="clear">
                    <i class="fa fa-eraser"></i>
                </button>
            </div>

            <div id="playlist-filter-container">
                <input type="text" id="playlist-filter" placeholder="Filter">
            </div>

            <div id="playlist-content"></div>
        </div>
    </div>
</div>