Mercurial > dottes

view dottes.html.learnertune @ 748:ce5c7214f9aa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Introduce mechanism for having different tune images for compact printed output. Sort alternate .abc in subdir 'Compact' under the booke dir. Use that as the graphic for A5 output, assuming it will be vertically more compact. Use Bear Dance as an example, as it has commentary that currently overflows an A5 landscape page. For the moment, transposed Bookes don't transpose and so don't use Compact.
author Jim Hague <jim.hague@acm.org>
date Fri, 13 Oct 2017 15:44:15 +0100
parents 772402f5f8ea
children d6e2a281cceb
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cry Havoc tunes - learning ${title}</title>
  <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">
    <a href="/">
      <div class="header-strip banner">
        <img src="../img/banner.png" alt="Havoc banner image">
      </div>
    </a>

    <div class="dottes-body">
      <div class="dottes-tune-display">
        <img src="../img/learner.png" alt="Learner tune image">
        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="dottes-body">
      <div class="dottes-tune-display">
        <div class="dottes-tune-header">
          <div class="dottes-tune-header-parts-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-parts">
              <p>
                ${parts}
              </p>
            </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>${fulltitle} 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" />
              </audio>
            </div>
            <div class="dottes-tune-learner-download">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-midi" download
                       href="../${masterbooke}/${name}.mid">MIDI</a></li>
                <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" />
              </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}.mid">MIDI</a></li>
                <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" />
              </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}.mid">MIDI</a></li>
                <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" />
              </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}.mid">MIDI</a></li>
                <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 class="dottes-tune-footer-learner">
          <div class="dottes-tune-footer-learner-prev-column"></div>
          <div class="dottes-tune-footer-learner-booke-column"></div>
          <div class="dottes-tune-footer-learner-next-column"></div>
          <div class="dottes-tune-footer-learner-row">
            <div class="dottes-tune-footer-learner-prev">
              <a href="${prevpage}">${prevfulltitle}</a>
            </div>
            <div class="dottes-tune-footer-learner-booke">
              <a class="dottes-tune-icon-link" href="${name}.html">
                <img class="dottes-tune-header-image" src="../img/music.png"
                     alt="Tune dottes page" title="Go to dottes page for ${fulltitle}">
              </a>
              <a class="dottes-tune-icon-link" href="index.html">
                <img class="dottes-tune-header-image" src="../img/book.png"
                     alt="Tune booke index" title="Go to tune booke index">
              </a>
            </div>
            <div class="dottes-tune-footer-learner-next">
              <a href="${nextpage}">${nextfulltitle}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>