Mercurial > dottes

view dottes.html.learnertune @ 1026:e4d31e094d24

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Changes to get Beginners booke building. The web pages include prev and next links, so to get those right we have to make the tune filenames distinct from the main booke names. So fall back to taking the easy way, and just prefix all tune names with @ or _.
author Jim Hague <jim.hague@acm.org>
date Tue, 18 Feb 2020 15:13:38 +0000
parents d6e2a281cceb
children
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="../../${mastertunedir}/${name}/normal-${name}.mp3" type="audio/mpeg" />
                <source src="../../${mastertunedir}/${name}/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="../../${mastertunedir}/${name}/${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../../${mastertunedir}/${name}/${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="../../${mastertunedir}/${name}/littleslow-${name}.mp3" type="audio/mpeg" />
                <source src="../../${mastertunedir}/${name}/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="../../${mastertunedir}/${name}/littleslow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/littleslow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../../${mastertunedir}/${name}/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="../../${mastertunedir}/${name}/slow-${name}.mp3" type="audio/mpeg" />
                <source src="../../${mastertunedir}/${name}/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="../../${mastertunedir}/${name}/slow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/slow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../../${mastertunedir}/${name}/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="../../${mastertunedir}/${name}/veryslow-${name}.mp3" type="audio/mpeg" />
                <source src="../../${mastertunedir}/${name}/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="../../${mastertunedir}/${name}/veryslow-${name}.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../../${mastertunedir}/${name}/veryslow-${name}.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../../${mastertunedir}/${name}/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}/learner.html">${prevfulltitle}</a>
            </div>
            <div class="dottes-tune-footer-learner-booke">
              <a class="dottes-tune-icon-link" href="index.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="../../${booke}/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}/learner.html">${nextfulltitle}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>