Mercurial > dottes
comparison dottes.html.learnertune @ 619:2fe68733ec17 build-default-248
Fix learner tune CSS. Broken during tune page CSS revision.
Give the main display its own CSS.
author | Jim Hague <jim.hague@acm.org> |
---|---|
date | Sun, 06 Nov 2016 08:24:22 +0000 |
parents | afc031477784 |
children | dfeb781e5196 |
comparison
equal
deleted
inserted
replaced
618:11e5862beaa8 | 619:2fe68733ec17 |
---|---|
29 </div> | 29 </div> |
30 | 30 |
31 <div class="grid_12 dottes-body"> | 31 <div class="grid_12 dottes-body"> |
32 <div class="dottes-tune-display"> | 32 <div class="dottes-tune-display"> |
33 <div class="dottes-tune-header"> | 33 <div class="dottes-tune-header"> |
34 <div class="dottes-tune-header-icons-column"></div> | |
35 <div class="dottes-tune-header-title-column"></div> | |
36 <div class="dottes-tune-header-composer-column"></div> | |
34 <div class="dottes-tune-header-row"> | 37 <div class="dottes-tune-header-row"> |
35 <div class="dottes-tune-header-left"> | 38 <div class="dottes-tune-header-icons"> |
36 <a class="dottes-tune-icon-link" href="${name}.html"> | 39 <a class="dottes-tune-icon-link" href="${name}.html"> |
37 <img class="dottes-tune-table-image" src="../img/music.png" | 40 <img class="dottes-tune-table-image" src="../img/music.png" |
38 alt="Dottes"> | 41 alt="Dottes"> |
39 </a> | 42 </a> |
40 <a class="dottes-tune-icon-link" href="index.html"> | 43 <a class="dottes-tune-icon-link" href="index.html"> |
41 <img class="dottes-tune-table-image" src="../img/book.png" | 44 <img class="dottes-tune-table-image" src="../img/book.png" |
42 alt="Tune index"> | 45 alt="Tune index"> |
43 </a> | 46 </a> |
44 </div> | 47 </div> |
45 <div class="dottes-tune-header-middle"> | 48 <div class="dottes-tune-header-title"> |
46 <h1>${title}</h1> | 49 <h1>${title}</h1> |
47 <h2>${subtitle}</h2> | 50 <h2>${subtitle}</h2> |
48 </div> | 51 </div> |
49 <div class="dottes-tune-header-right"> | 52 <div class="dottes-tune-header-composer"> |
50 <em>${composer}</em> | 53 <em>${composer}</em> |
51 </div> | 54 </div> |
52 </div> | 55 </div> |
53 </div> | 56 </div> |
54 <p>${title} is in the key of ${key}. | 57 <p>${title} is in the key of ${key}. |
55 <div class="dottes-tune-footer"> | 58 <div class="dottes-tune-learner"> |
56 <div class="dottes-tune-footer-row"> | 59 <div class="dottes-tune-learner-speed-column"></div> |
57 <div class="dottes-tune-footer-left"> | 60 <div class="dottes-tune-learner-play-column"></div> |
61 <div class="dottes-tune-learner-download-column"></div> | |
62 <div class="dottes-tune-learner-row"> | |
63 <div class="dottes-tune-learner-speed"> | |
58 <p>Normal speed | 64 <p>Normal speed |
59 </div> | 65 </div> |
60 <div class="dottes-tune-footer-centre"> | 66 <div class="dottes-tune-learner-play"> |
61 <audio controls loop> | 67 <audio controls loop> |
62 <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" /> | 68 <source src="../${masterbooke}/normal-${name}.mp3" type="audio/mpeg" /> |
63 <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" /> | 69 <source src="../${masterbooke}/normal-${name}.ogg" type="audio/ogg" /> |
64 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> | 70 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> |
65 <param name="FileName" value="normal-${name}.mp3" /> | 71 <param name="FileName" value="normal-${name}.mp3" /> |
72 <param name="playCount" value="100000" /> | 78 <param name="playCount" value="100000" /> |
73 </object> | 79 </object> |
74 </object> | 80 </object> |
75 </audio> | 81 </audio> |
76 </div> | 82 </div> |
77 <div class="dottes-tune-footer-right"> | 83 <div class="dottes-tune-learner-download"> |
78 <ul class="tune-data-list"> | 84 <ul class="tune-data-list"> |
79 <li><a class="dottes-link-tune dottes-mp3" download | 85 <li><a class="dottes-link-tune dottes-mp3" download |
80 href="../${masterbooke}/${name}.mp3">MP3</a></li> | 86 href="../${masterbooke}/${name}.mp3">MP3</a></li> |
81 <li><a class="dottes-link-tune dottes-ogg" download | 87 <li><a class="dottes-link-tune dottes-ogg" download |
82 href="../${masterbooke}/${name}.ogg">OGG</a></li> | 88 href="../${masterbooke}/${name}.ogg">OGG</a></li> |
83 </ul> | 89 </ul> |
84 </div> | 90 </div> |
85 </div> | 91 </div> |
86 <div class="dottes-tune-footer-row"> | 92 <div class="dottes-tune-learner-row"> |
87 <div class="dottes-tune-footer-left"> | 93 <div class="dottes-tune-learner-speed"> |
88 <p>Slightly slower | 94 <p>Slightly slower |
89 </div> | 95 </div> |
90 <div class="dottes-tune-footer-centre"> | 96 <div class="dottes-tune-learner-play"> |
91 <audio controls loop> | 97 <audio controls loop> |
92 <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" /> | 98 <source src="../${masterbooke}/littleslow-${name}.mp3" type="audio/mpeg" /> |
93 <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" /> | 99 <source src="../${masterbooke}/littleslow-${name}.ogg" type="audio/ogg" /> |
94 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> | 100 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> |
95 <param name="FileName" value="littleslow-${name}.mp3" /> | 101 <param name="FileName" value="littleslow-${name}.mp3" /> |
102 <param name="playCount" value="100000" /> | 108 <param name="playCount" value="100000" /> |
103 </object> | 109 </object> |
104 </object> | 110 </object> |
105 </audio> | 111 </audio> |
106 </div> | 112 </div> |
107 <div class="dottes-tune-footer-right"> | 113 <div class="dottes-tune-learner-download"> |
108 <ul class="tune-data-list"> | 114 <ul class="tune-data-list"> |
109 <li><a class="dottes-link-tune dottes-mp3" download | 115 <li><a class="dottes-link-tune dottes-mp3" download |
110 href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li> | 116 href="../${masterbooke}/littleslow-${name}.mp3">MP3</a></li> |
111 <li><a class="dottes-link-tune dottes-ogg" download | 117 <li><a class="dottes-link-tune dottes-ogg" download |
112 href="../${masterbooke}/littleslow-${name}.ogg">OGG</a></li> | 118 href="../${masterbooke}/littleslow-${name}.ogg">OGG</a></li> |
113 </ul> | 119 </ul> |
114 </div> | 120 </div> |
115 </div> | 121 </div> |
116 <div class="dottes-tune-footer-row"> | 122 <div class="dottes-tune-learner-row"> |
117 <div class="dottes-tune-footer-left"> | 123 <div class="dottes-tune-learner-speed"> |
118 <p>Slow | 124 <p>Slow |
119 </div> | 125 </div> |
120 <div class="dottes-tune-footer-centre"> | 126 <div class="dottes-tune-learner-play"> |
121 <audio controls loop> | 127 <audio controls loop> |
122 <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" /> | 128 <source src="../${masterbooke}/slow-${name}.mp3" type="audio/mpeg" /> |
123 <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" /> | 129 <source src="../${masterbooke}/slow-${name}.ogg" type="audio/ogg" /> |
124 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> | 130 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> |
125 <param name="FileName" value="slow-${name}.mp3" /> | 131 <param name="FileName" value="slow-${name}.mp3" /> |
132 <param name="playCount" value="100000" /> | 138 <param name="playCount" value="100000" /> |
133 </object> | 139 </object> |
134 </object> | 140 </object> |
135 </audio> | 141 </audio> |
136 </div> | 142 </div> |
137 <div class="dottes-tune-footer-right"> | 143 <div class="dottes-tune-learner-download"> |
138 <ul class="tune-data-list"> | 144 <ul class="tune-data-list"> |
139 <li><a class="dottes-link-tune dottes-mp3" download | 145 <li><a class="dottes-link-tune dottes-mp3" download |
140 href="../${masterbooke}/slow-${name}.mp3">MP3</a></li> | 146 href="../${masterbooke}/slow-${name}.mp3">MP3</a></li> |
141 <li><a class="dottes-link-tune dottes-ogg" download | 147 <li><a class="dottes-link-tune dottes-ogg" download |
142 href="../${masterbooke}/slow-${name}.ogg">OGG</a></li> | 148 href="../${masterbooke}/slow-${name}.ogg">OGG</a></li> |
143 </ul> | 149 </ul> |
144 </div> | 150 </div> |
145 </div> | 151 </div> |
146 <div class="dottes-tune-footer-row"> | 152 <div class="dottes-tune-learner-row"> |
147 <div class="dottes-tune-footer-left"> | 153 <div class="dottes-tune-learner-speed"> |
148 <p>Very slow | 154 <p>Very slow |
149 </div> | 155 </div> |
150 <div class="dottes-tune-footer-centre"> | 156 <div class="dottes-tune-learner-play"> |
151 <audio controls loop> | 157 <audio controls loop> |
152 <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" /> | 158 <source src="../${masterbooke}/veryslow-${name}.mp3" type="audio/mpeg" /> |
153 <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" /> | 159 <source src="../${masterbooke}/veryslow-${name}.ogg" type="audio/ogg" /> |
154 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> | 160 <object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> |
155 <param name="FileName" value="veryslow-${name}.mp3" /> | 161 <param name="FileName" value="veryslow-${name}.mp3" /> |
162 <param name="playCount" value="100000" /> | 168 <param name="playCount" value="100000" /> |
163 </object> | 169 </object> |
164 </object> | 170 </object> |
165 </audio> | 171 </audio> |
166 </div> | 172 </div> |
167 <div class="dottes-tune-footer-right"> | 173 <div class="dottes-tune-learner-download"> |
168 <ul class="tune-data-list"> | 174 <ul class="tune-data-list"> |
169 <li><a class="dottes-link-tune dottes-mp3" download | 175 <li><a class="dottes-link-tune dottes-mp3" download |
170 href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li> | 176 href="../${masterbooke}/veryslow-${name}.mp3">MP3</a></li> |
171 <li><a class="dottes-link-tune dottes-ogg" download | 177 <li><a class="dottes-link-tune dottes-ogg" download |
172 href="../${masterbooke}/veryslow-${name}.ogg">OGG</a></li> | 178 href="../${masterbooke}/veryslow-${name}.ogg">OGG</a></li> |