view dottes.html.learnertune @ 588:afc031477784

Replace sed substitution with Python templating for HTML and LaTeX output.
author Jim Hague <jim.hague@acm.org>
date Wed, 02 Nov 2016 00:21:18 +0000 (2016-11-02)
parents cb7a4eff9d5b
children 2fe68733ec17
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-row">
            <div class="dottes-tune-header-left">
              <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-middle">
              <h1>${title}</h1>
              <h2>${subtitle}</h2>
            </div>
            <div class="dottes-tune-header-right">
              <em>${composer}</em>
            </div>
          </div>
        </div>
        <p>${title} is in the key of ${key}.
        <div class="dottes-tune-footer">
          <div class="dottes-tune-footer-row">
            <div class="dottes-tune-footer-left">
              <p>Normal speed
            </div>
            <div class="dottes-tune-footer-centre">
              <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-footer-right">
              <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-footer-row">
            <div class="dottes-tune-footer-left">
              <p>Slightly slower
            </div>
            <div class="dottes-tune-footer-centre">
              <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-footer-right">
              <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-footer-row">
            <div class="dottes-tune-footer-left">
              <p>Slow
            </div>
            <div class="dottes-tune-footer-centre">
              <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-footer-right">
              <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-footer-row">
            <div class="dottes-tune-footer-left">
              <p>Very slow
            </div>
            <div class="dottes-tune-footer-centre">
              <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-footer-right">
              <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>