view dottes.html.tune @ 488:e16c20e63d9c build-default-209

Decide that all links for downloading things should get HTML5 download tags. The audio players exist to play things on the page. Everything else is to download the file, really. I think.
author Jim Hague <jim.hague@acm.org>
date Tue, 17 Jun 2014 12:32:15 +0100
parents e340218b9d11
children afc031477784
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|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">
        <div class="dottes-tune-header">
          <div class="dottes-tune-header-row">
            <div class="dottes-tune-header-left">
              <a class="dottes-tune-icon-link" href="learner-@TUNE@.html">
                <img class="dottes-tune-table-image" src="../img/learner.png"
                     alt="Learner">
              </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>
        <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" download
                       href="@TUNE@.pdf">PDF</a></li>
                <li><a class="dottes-link-tune dottes-midi" download
                       href="../@MASTERBOOKE@/@TUNE@.mid">MIDI</a></li>
                <li><a class="dottes-link-tune dottes-mp3" download
                       href="../@MASTERBOOKE@/@TUNE@.mp3">MP3</a></li>
                <li><a class="dottes-link-tune dottes-ogg" download
                       href="../@MASTERBOOKE@/@TUNE@.ogg">OGG</a></li>
                <li><a class="dottes-link-tune dottes-abc" download
                       href="@TUNE@.abc">ABC</a></li>
                <li><a class="dottes-link-tune dottes-xml" download
                       href="@TUNE@.xml">XML</a></li>
              </ul>
            </div>
            <div class="dottes-tune-footer-centre">
              <audio controls>
                <source src="../@MASTERBOOKE@/@TUNE@.mp3" type="audio/mpeg" />
                <source src="../@MASTERBOOKE@/@TUNE@.ogg" type="audio/ogg" />
                <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
                  <param name="FileName" value="@TUNE@.mp3" />
                  <param name="autoStart" value="false" />
                  <param name="autoplay" value="false" />
                  <object type="audio/mpeg" data="@TUNE@.mp3">
                    <param name="controller" value="true" />
                    <param name="autoplay" value="false" />
                  </object>
                </object>
              </audio>
            </div>
            <div class="dottes-tune-footer-right">
              Last changed @LASTCHANGED@
            </div>
          </div>
        </div>
      </div>
    </div>

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