s07f-3j4h-b5m2-c98v-x9c7.html

﻿
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    
    <title>Roodimentary Sciences</title>

    <link rel="stylesheet" href="res/bootstrap.min.css" />
    <link rel="stylesheet" href="styles.css">

    <script src="res/jquery-2.1.0.min.js"></script>
    <script src="res/bootstrap.min.js"></script>
    <script src="res/knockout-3.0.0.js"></script>
    
    <script src="accordionLayout.js"></script>
    <script src="mainScript.js"></script>
</head>

<body>
    <div class="mainDiv">
        <h1>Roodimentary Sciences</h1>
        <div class="panel-group" id="accordion" data-bind="foreach: accordionLayout">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" data-bind="setHrefToGrandparentSibling: '', text: header">
                        </a>
                    </h4>
                </div>

                <div class="panel-collapse collapse">
                    <div class="panel-body">
                        <div data-bind="foreach: songs">
                            <div class="playerArea">

                                <audio preload="none">
                                    <source type="audio/mpeg" data-bind="attr: {src: url}" />
                                </audio>

                                <div style="text-align: right">
                                    <a data-bind="audioControl: 'play'">play</a>
                                    <a data-bind="audioControl: 'pause'" style="display: none;" class="pauseButton">pause</a>
                                    <a data-bind="attr: {href: url}">download</a>
                                    <span data-bind="text: name"></span>
                                </div>
                                
                                <div>
                                    <div data-bind="audioControl: 'barArea'" class="barArea">
                                        <div class="bar"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div data-bind="template: { name: otherContentID }"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

<script type="text/html" id="about-template">
    <p class="regularText">John Rood is a follower of Jesus, a web programmer and an electronic beat maker living in Chicago.</p>
    <a class="regularText" href="mailto:mr.john.rood@gmail.com">Email John</a>
</script>