Mercurial > dottes

view dottes.html.tune @ 369:e5f59f0e7dd5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add audio player to tune web page. Add an <audio> tag to the bottom centre of the tune web page. Give it options for MP3 and OGG files. Most browsers will play MP3, and the ones that won't (Firefox) will play OGG. Since we now have to generate OGGs, add a download link as well.
author Jim Hague <jim.hague@acm.org>
date Wed, 28 Aug 2013 11:54:45 +0100
parents b233893b4c51
children 0e8f58e33270
line wrap: on
line source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Cry Havoc tunes - @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|Oswald'
        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">
        <div class="dottes-tune-header">
          <div class="dottes-tune-header-row">
            <div class="dottes-tune-header-left"></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>
        <img class="dottes-png" src="@TUNE@.png" alt="@TITLE@ dots">
        <div class="dottes-credit-@CREDITVISIBILITY@">
          From @CREDIT@.
        </div>
        <div class="dottes-change-@CHANGEVISIBILITY@">
          Change: <a class="dottes-change-link"
                     href="@CHANGETUNE@">@CHANGETITLE@</a>
        </div>
        <div class="dottes-tune-footer">
          <div class="dottes-tune-footer-row">
            <div class="dottes-tune-footer-left">
              <ul class="tune-data-list">
                <li><a class="dottes-link-tune dottes-pdf"
                       href="@TUNE@.pdf">PDF</a></li>
                <li><a class="dottes-link-tune dottes-midi"
                       href="../@MASTERBOOKE@/@TUNE@.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3"
                       href="../@MASTERBOOKE@/@TUNE@.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg"
                       href="../@MASTERBOOKE@/@TUNE@.ogg">OGG</a></li>
                <li><a class="dottes-link-tune dottes-abc"
                       href="@TUNE@.abc">ABC</a></li>
              </ul>
            </div>
            <div class="dottes-tune-footer-centre">
              <audio controls>
                <source src="@TUNE@.mp3" type="audio/mpeg" />
                <source src="@TUNE@.ogg" type="audio/ogg" />
              </audio>
            </div>
            <div class="dottes-tune-footer-right">
              Last changed @LASTCHANGED@
            </div>
          </div>
        </div>
      </div>
    </div>

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