Mercurial > dottes

comparison dottes.html.learnertune @ 943:d6e2a281cceb build-default-344

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Change web page layout. Put tune contents under 'tunes/<name>' or 'tunes-<instrument>/<name>'. That way they won't move if the tune gets moved between Bookes. For now I have not attempted to redirect old URLs.
author Jim Hague <jim.hague@acm.org>
date Mon, 05 Aug 2019 23:25:28 +0100
parents 772402f5f8ea
children
comparison
equal deleted inserted replaced
942:a774b3b3cad7 943:d6e2a281cceb
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8" /> 4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Cry Havoc tunes - learning ${title}</title> 6 <title>Cry Havoc tunes - learning ${title}</title>
7 <link rel="stylesheet" href="../css/dottes.css" /> 7 <link rel="stylesheet" href="../../css/dottes.css" />
8 8
9 <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans' 9 <link href='http://fonts.googleapis.com/css?family=Pirata+One|Open+Sans'
10 rel='stylesheet' type='text/css'> 10 rel='stylesheet' type='text/css'>
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" alt="Havoc banner image"> 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" alt="Learner tune image"> 22 <img src="../../img/learner.png" alt="Learner tune image">
23 Work out the melody or play along 23 Work out the melody or play along
24 with these audio players. They play the melody repeatedly. There's 24 with these audio players. They play the melody repeatedly. There's
25 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
26 audio files. 26 audio files.
27 </div> 27 </div>
57 <div class="dottes-tune-learner-speed"> 57 <div class="dottes-tune-learner-speed">
58 <p>Normal speed 58 <p>Normal speed
59 </div> 59 </div>
60 <div class="dottes-tune-learner-play"> 60 <div class="dottes-tune-learner-play">
61 <audio controls loop> 61 <audio controls loop>
62 <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" /> 62 <source src="../../${mastertunedir}/${name}/normal-${name}.mp3" type="audio/mpeg" />
63 <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" /> 63 <source src="../../${mastertunedir}/${name}/normal-${name}.ogg" type="audio/ogg" />
64 </audio> 64 </audio>
65 </div> 65 </div>
66 <div class="dottes-tune-learner-download"> 66 <div class="dottes-tune-learner-download">
67 <ul class="tune-data-list"> 67 <ul class="tune-data-list">
68 <li><a class="dottes-link-tune dottes-midi" download 68 <li><a class="dottes-link-tune dottes-midi" download
69 href="../${masterbooke}/${name}.mid">MIDI</a></li> 69 href="../../${mastertunedir}/${name}/${name}.mid">MIDI</a></li>
70 <li><a class="dottes-link-tune dottes-mp3" download 70 <li><a class="dottes-link-tune dottes-mp3" download
71 href="../${masterbooke}/${name}.mp3">MP3</a></li> 71 href="../../${mastertunedir}/${name}/${name}.mp3">MP3</a></li>
72 <li><a class="dottes-link-tune dottes-ogg" download 72 <li><a class="dottes-link-tune dottes-ogg" download
73 href="../${masterbooke}/${name}.ogg">OGG</a></li> 73 href="../../${mastertunedir}/${name}/${name}.ogg">OGG</a></li>
74 </ul> 74 </ul>
75 </div> 75 </div>
76 </div> 76 </div>
77 <div class="dottes-tune-learner-row"> 77 <div class="dottes-tune-learner-row">
78 <div class="dottes-tune-learner-speed"> 78 <div class="dottes-tune-learner-speed">
79 <p>Slightly slower 79 <p>Slightly slower
80 </div> 80 </div>
81 <div class="dottes-tune-learner-play"> 81 <div class="dottes-tune-learner-play">
82 <audio controls loop> 82 <audio controls loop>
83 <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" /> 83 <source src="../../${mastertunedir}/${name}/littleslow-${name}.mp3" type="audio/mpeg" />
84 <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" /> 84 <source src="../../${mastertunedir}/${name}/littleslow-${name}.ogg" type="audio/ogg" />
85 </audio> 85 </audio>
86 </div> 86 </div>
87 <div class="dottes-tune-learner-download"> 87 <div class="dottes-tune-learner-download">
88 <ul class="tune-data-list"> 88 <ul class="tune-data-list">
89 <li><a class="dottes-link-tune dottes-mp3" download 89 <li><a class="dottes-link-tune dottes-mp3" download
90 href="../${masterbooke}/littleslow-${name}.mid">MIDI</a></li> 90 href="../../${mastertunedir}/${name}/littleslow-${name}.mid">MIDI</a></li>
91 <li><a class="dottes-link-tune dottes-mp3" download 91 <li><a class="dottes-link-tune dottes-mp3" download
92 href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li> 92 href="../../${mastertunedir}/${name}/littleslow-${name}.mp3">MP3</a></li>
93 <li><a class="dottes-link-tune dottes-ogg" download 93 <li><a class="dottes-link-tune dottes-ogg" download
94 href="../${masterbooke}/littleslow-${name}.ogg">OGG</a></li> 94 href="../../${mastertunedir}/${name}/littleslow-${name}.ogg">OGG</a></li>
95 </ul> 95 </ul>
96 </div> 96 </div>
97 </div> 97 </div>
98 <div class="dottes-tune-learner-row"> 98 <div class="dottes-tune-learner-row">
99 <div class="dottes-tune-learner-speed"> 99 <div class="dottes-tune-learner-speed">
100 <p>Slow 100 <p>Slow
101 </div> 101 </div>
102 <div class="dottes-tune-learner-play"> 102 <div class="dottes-tune-learner-play">
103 <audio controls loop> 103 <audio controls loop>
104 <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" /> 104 <source src="../../${mastertunedir}/${name}/slow-${name}.mp3" type="audio/mpeg" />
105 <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" /> 105 <source src="../../${mastertunedir}/${name}/slow-${name}.ogg" type="audio/ogg" />
106 </audio> 106 </audio>
107 </div> 107 </div>
108 <div class="dottes-tune-learner-download"> 108 <div class="dottes-tune-learner-download">
109 <ul class="tune-data-list"> 109 <ul class="tune-data-list">
110 <li><a class="dottes-link-tune dottes-mp3" download 110 <li><a class="dottes-link-tune dottes-mp3" download
111 href="../${masterbooke}/slow-${name}.mid">MIDI</a></li> 111 href="../../${mastertunedir}/${name}/slow-${name}.mid">MIDI</a></li>
112 <li><a class="dottes-link-tune dottes-mp3" download 112 <li><a class="dottes-link-tune dottes-mp3" download
113 href="../${masterbooke}/slow-${name}.mp3">MP3</a></li> 113 href="../../${mastertunedir}/${name}/slow-${name}.mp3">MP3</a></li>
114 <li><a class="dottes-link-tune dottes-ogg" download 114 <li><a class="dottes-link-tune dottes-ogg" download
115 href="../${masterbooke}/slow-${name}.ogg">OGG</a></li> 115 href="../../${mastertunedir}/${name}/slow-${name}.ogg">OGG</a></li>
116 </ul> 116 </ul>
117 </div> 117 </div>
118 </div> 118 </div>
119 <div class="dottes-tune-learner-row"> 119 <div class="dottes-tune-learner-row">
120 <div class="dottes-tune-learner-speed"> 120 <div class="dottes-tune-learner-speed">
121 <p>Very slow 121 <p>Very slow
122 </div> 122 </div>
123 <div class="dottes-tune-learner-play"> 123 <div class="dottes-tune-learner-play">
124 <audio controls loop> 124 <audio controls loop>
125 <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" /> 125 <source src="../../${mastertunedir}/${name}/veryslow-${name}.mp3" type="audio/mpeg" />
126 <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" /> 126 <source src="../../${mastertunedir}/${name}/veryslow-${name}.ogg" type="audio/ogg" />
127 </audio> 127 </audio>
128 </div> 128 </div>
129 <div class="dottes-tune-learner-download"> 129 <div class="dottes-tune-learner-download">
130 <ul class="tune-data-list"> 130 <ul class="tune-data-list">
131 <li><a class="dottes-link-tune dottes-mp3" download 131 <li><a class="dottes-link-tune dottes-mp3" download
132 href="../${masterbooke}/veryslow-${name}.mid">MIDI</a></li> 132 href="../../${mastertunedir}/${name}/veryslow-${name}.mid">MIDI</a></li>
133 <li><a class="dottes-link-tune dottes-mp3" download 133 <li><a class="dottes-link-tune dottes-mp3" download
134 href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li> 134 href="../../${mastertunedir}/${name}/veryslow-${name}.mp3">MP3</a></li>
135 <li><a class="dottes-link-tune dottes-ogg" download 135 <li><a class="dottes-link-tune dottes-ogg" download
136 href="../${masterbooke}/veryslow-${name}.ogg">OGG</a></li> 136 href="../../${mastertunedir}/${name}/veryslow-${name}.ogg">OGG</a></li>
137 </ul> 137 </ul>
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 <div class="dottes-tune-footer-learner"> 141 <div class="dottes-tune-footer-learner">
142 <div class="dottes-tune-footer-learner-prev-column"></div> 142 <div class="dottes-tune-footer-learner-prev-column"></div>
143 <div class="dottes-tune-footer-learner-booke-column"></div> 143 <div class="dottes-tune-footer-learner-booke-column"></div>
144 <div class="dottes-tune-footer-learner-next-column"></div> 144 <div class="dottes-tune-footer-learner-next-column"></div>
145 <div class="dottes-tune-footer-learner-row"> 145 <div class="dottes-tune-footer-learner-row">
146 <div class="dottes-tune-footer-learner-prev"> 146 <div class="dottes-tune-footer-learner-prev">
147 <a href="${prevpage}">${prevfulltitle}</a> 147 <a href="../${prevpage}/learner.html">${prevfulltitle}</a>
148 </div> 148 </div>
149 <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"> 150 <a class="dottes-tune-icon-link" href="index.html">
151 <img class="dottes-tune-header-image" src="../img/music.png" 151 <img class="dottes-tune-header-image" src="../../img/music.png"
152 alt="Tune dottes page" title="Go to dottes page for ${fulltitle}"> 152 alt="Tune dottes page" title="Go to dottes page for ${fulltitle}">
153 </a> 153 </a>
154 <a class="dottes-tune-icon-link" href="index.html"> 154 <a class="dottes-tune-icon-link" href="../../${booke}/index.html">
155 <img class="dottes-tune-header-image" src="../img/book.png" 155 <img class="dottes-tune-header-image" src="../../img/book.png"
156 alt="Tune booke index" title="Go to tune booke index"> 156 alt="Tune booke index" title="Go to tune booke index">
157 </a> 157 </a>
158 </div> 158 </div>
159 <div class="dottes-tune-footer-learner-next"> 159 <div class="dottes-tune-footer-learner-next">
160 <a href="${nextpage}">${nextfulltitle}</a> 160 <a href="../${nextpage}/learner.html">${nextfulltitle}</a>
161 </div> 161 </div>
162 </div> 162 </div>
163 </div> 163 </div>
164 </div> 164 </div>
165 </div> 165 </div>