Mercurial > dottes

view dottes.html.learnertune @ 619:2fe68733ec17 build-default-248

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fix learner tune CSS. Broken during tune page CSS revision. Give the main display its own CSS.
author Jim Hague <jim.hague@acm.org>
date Sun, 06 Nov 2016 08:24:22 +0000
parents afc031477784
children dfeb781e5196
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cry Havoc tunes - learning ${title}</title>
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" href="../css/text.css" />
  <link rel="stylesheet" href="../css/960.css" />
  <link rel="stylesheet" href="../css/dottes.css" />

  <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
        rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="container_12">
    <a href="/">
      <div class="grid_12 header-strip banner">
        <h1>Ye Crie Havock Booke of Dottes</h1>
      </div>
    </a>

    <div class="grid_12 dottes-body">
      <div class="dottes-tune-display">
        <img src="../img/learner.png">Work out the melody or play along
        with these audio players. They play the melody repeatedly. There's
        a variety of speeds to choose from. You can also download the
        audio files.
      </div>
    </div>

    <div class="grid_12 dottes-body">
      <div class="dottes-tune-display">
        <div class="dottes-tune-header">
          <div class="dottes-tune-header-icons-column"></div>
          <div class="dottes-tune-header-title-column"></div>
          <div class="dottes-tune-header-composer-column"></div>
          <div class="dottes-tune-header-row">
            <div class="dottes-tune-header-icons">
              <a class="dottes-tune-icon-link" href="${name}.html">
                <img class="dottes-tune-table-image" src="../img/music.png"
                     alt="Dottes">
              </a>
              <a class="dottes-tune-icon-link" href="index.html">
                <img class="dottes-tune-table-image" src="../img/book.png"
                     alt="Tune index">
              </a>
            </div>
            <div class="dottes-tune-header-title">
              <h1>${title}</h1>
              <h2>${subtitle}</h2>
            </div>
            <div class="dottes-tune-header-composer">
              <em>${composer}</em>
            </div>
          </div>
        </div>
        <p>${title} is in the key of ${key}.
        <div class="dottes-tune-learner">
          <div class="dottes-tune-learner-speed-column"></div>
          <div class="dottes-tune-learner-play-column"></div>
          <div class="dottes-tune-learner-download-column"></div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Normal speed
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" />
                <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
                  <param name="FileName" value="normal-${name}.mp3" />
                  <param name="autoStart" value="false" />
                  <param name="autoplay" value="false" />
                  <param name="playCount" value="100000" />
                  <object type="audio/mpeg" data="normal-${name}.mp3">
                    <param name="controller" value="true" />
                    <param name="autoplay" value="false" />
                    <param name="playCount" value="100000" />
                  </object>
                </object>
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Slightly slower
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" />
                <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
                  <param name="FileName" value="littleslow-${name}.mp3" />
                  <param name="autoStart" value="false" />
                  <param name="autoplay" value="false" />
                  <param name="playCount" value="100000" />
                  <object type="audio/mpeg" data="littleslow-${name}.mp3">
                    <param name="controller" value="true" />
                    <param name="autoplay" value="false" />
                    <param name="playCount" value="100000" />
                  </object>
                </object>
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/littleslow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Slow
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" />
                <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
                  <param name="FileName" value="slow-${name}.mp3" />
                  <param name="autoStart" value="false" />
                  <param name="autoplay" value="false" />
                  <param name="playCount" value="100000" />
                  <object type="audio/mpeg" data="slow-${name}.mp3">
                    <param name="controller" value="true" />
                    <param name="autoplay" value="false" />
                    <param name="playCount" value="100000" />
                  </object>
                </object>
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/slow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/slow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
          <div class="dottes-tune-learner-row">
            <div class="dottes-tune-learner-speed">
              <p>Very slow
            </div>
            <div class="dottes-tune-learner-play">
              <audio controls loop>
                <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" />
                <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" />
                <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
                  <param name="FileName" value="veryslow-${name}.mp3" />
                  <param name="autoStart" value="false" />
                  <param name="autoplay" value="false" />
                  <param name="playCount" value="100000" />
                  <object type="audio/mpeg" data="veryslow-${name}.mp3">
                    <param name="controller" value="true" />
                    <param name="autoplay" value="false" />
                    <param name="playCount" value="100000" />
                  </object>
                </object>
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../${masterbooke}/veryslow-${name}.ogg">OGG</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>