Mercurial > dottes

comparison dottes.html.learnertune @ 724:be87f9a027f1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Move book and learner tune link to centre of bottom row, and add popup text. The parts display is not uncomplicated by the images, and they have explanations - at least some users I've spoken to did not understand what they do.
author Jim Hague <jim.hague@acm.org>
date Wed, 11 Oct 2017 16:18:13 +0100
parents f8ab14cc9d8d
children 833e6185b6a2
comparison
equal deleted inserted replaced
723:0818dcbaf5af 724:be87f9a027f1
11 </head> 11 </head>
12 <body> 12 <body>
13 <div class="container"> 13 <div class="container">
14 <a href="/"> 14 <a href="/">
15 <div class="header-strip banner"> 15 <div class="header-strip banner">
16 <img src="../img/banner.png"> 16 <img src="../img/banner.png" alt="Havoc banner image">
17 </div> 17 </div>
18 </a> 18 </a>
19 19
20 <div class="dottes-body"> 20 <div class="dottes-body">
21 <div class="dottes-tune-display"> 21 <div class="dottes-tune-display">
22 <img src="../img/learner.png">Work out the melody or play along 22 <img src="../img/learner.png" alt="Learner tune image">
23 Work out the melody or play along
23 with these audio players. They play the melody repeatedly. There's 24 with these audio players. They play the melody repeatedly. There's
24 a variety of speeds to choose from. You can also download the 25 a variety of speeds to choose from. You can also download the
25 audio files. 26 audio files.
26 </div> 27 </div>
27 </div> 28 </div>
28 29
29 <div class="dottes-body"> 30 <div class="dottes-body">
30 <div class="dottes-tune-display"> 31 <div class="dottes-tune-display">
31 <div class="dottes-tune-header"> 32 <div class="dottes-tune-header">
32 <div class="dottes-tune-header-icons-column"></div> 33 <div class="dottes-tune-header-parts-column"></div>
33 <div class="dottes-tune-header-title-column"></div> 34 <div class="dottes-tune-header-title-column"></div>
34 <div class="dottes-tune-header-composer-column"></div> 35 <div class="dottes-tune-header-composer-column"></div>
35 <div class="dottes-tune-header-row"> 36 <div class="dottes-tune-header-row">
36 <div class="dottes-tune-header-icons"> 37 <div class="dottes-tune-header-parts">
37 <a class="dottes-tune-icon-link" href="${name}.html"> 38 <p>
38 <img class="dottes-tune-header-image" src="../img/music.png" 39 ${parts}
39 alt="Dottes"> 40 </p>
40 </a>
41 <a class="dottes-tune-icon-link" href="index.html">
42 <img class="dottes-tune-header-image" src="../img/book.png"
43 alt="Tune index">
44 </a>
45 </div> 41 </div>
46 <div class="dottes-tune-header-title"> 42 <div class="dottes-tune-header-title">
47 <h1>${title}</h1> 43 <h1>${title}</h1>
48 <h2>${subtitle}</h2> 44 <h2>${subtitle}</h2>
49 </div> 45 </div>
149 <div class="dottes-tune-footer-learner-row"> 145 <div class="dottes-tune-footer-learner-row">
150 <div class="dottes-tune-footer-learner-prev"> 146 <div class="dottes-tune-footer-learner-prev">
151 <a href="${prevpage}">${prevtitle}</a> 147 <a href="${prevpage}">${prevtitle}</a>
152 </div> 148 </div>
153 <div class="dottes-tune-footer-learner-booke"> 149 <div class="dottes-tune-footer-learner-booke">
150 <a class="dottes-tune-icon-link" href="${name}.html">
151 <img class="dottes-tune-header-image" src="../img/music.png"
152 alt="Tune dottes page" title="Go to dottes page for ${title}">
153 </a>
154 <a class="dottes-tune-icon-link" href="index.html">
155 <img class="dottes-tune-header-image" src="../img/book.png"
156 alt="Tune booke index" title="Go to tune booke index">
157 </a>
154 </div> 158 </div>
155 <div class="dottes-tune-footer-learner-next"> 159 <div class="dottes-tune-footer-learner-next">
156 <a href="${nextpage}">${nexttitle}</a> 160 <a href="${nextpage}">${nexttitle}</a>
157 </div> 161 </div>
158 </div> 162 </div>