Update index.html
Browse files- index.html +39 -417
index.html
CHANGED
@@ -2,28 +2,55 @@
|
|
2 |
<html lang="en">
|
3 |
<head>
|
4 |
<meta charset="UTF-8">
|
|
|
5 |
<title>AR vs FM Experiment Page</title>
|
6 |
<link rel="stylesheet" href="style/bootstrap.min.css">
|
7 |
<style>
|
8 |
body {
|
9 |
-
|
|
|
10 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
11 |
td, th {
|
12 |
text-align: center;
|
13 |
padding: 8px;
|
14 |
border-bottom: 0.1px solid #aaa;
|
15 |
}
|
|
|
16 |
audio {
|
17 |
-
width:
|
18 |
-
min-width: 100px;
|
19 |
max-width: 250px;
|
20 |
}
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
27 |
}
|
28 |
</style>
|
29 |
</head>
|
@@ -114,416 +141,11 @@
|
|
114 |
showHighlight(highlightIndex);
|
115 |
}
|
116 |
|
117 |
-
// Initialize
|
118 |
showHighlight(highlightIndex);
|
119 |
</script>
|
120 |
|
121 |
-
|
122 |
-
|
123 |
-
<p>TODO</p>
|
124 |
-
</div>
|
125 |
-
|
126 |
-
<!-- Section 1 -->
|
127 |
-
<div class="container">
|
128 |
-
<h1>Fixed Training Configuration</h1>
|
129 |
-
|
130 |
-
<h5>Text Descriptions</h5>
|
131 |
-
<table style="width:100%; border-collapse: separate; border-spacing: 0 10px;">
|
132 |
-
<tbody>
|
133 |
-
<tr><td style="font-weight: bold;">Text 1:</td><td>Cool and sophisticated, featuring crisp distorted guitar, shuffling drums and simple bass that create a vintage atmosphere.</td></tr>
|
134 |
-
<tr><td style="font-weight: bold;">Text 2:</td><td>Powerful rock track with continuously improvised electric guitar solo. Played by a rock band of drums, bass guitar, electric guitar, acoustic guitar and electric organ. Energetic and lively - ideal for sports, action and motivational soulfulness. BPM 106</td></tr>
|
135 |
-
<tr><td style="font-weight: bold;">Text 3:</td><td>Positive, tropical, shiny 4 tracks collection inspired by summer. Perfect for dance, energetic, party, travel or presentation video projects.</td></tr>
|
136 |
-
<tr><td style="font-weight: bold;">Text 4:</td><td>An upbeat and fast-pace jazz sing trailer featuring horns, drums and vibes. This full-length and face-paced track tells a story.This song is perfect for trailers, promotional videos, advertisements, commercials, TV ads, YouTube videos, corporate presentations and wedding videos.</td></tr>
|
137 |
-
</tbody>
|
138 |
-
</table>
|
139 |
-
|
140 |
-
<br>
|
141 |
-
<label><b>Latent Representation Frequency</b>:</label>
|
142 |
-
<select id="mappingSelect">
|
143 |
-
<option value="25">25</option>
|
144 |
-
<option value="50" selected>50</option>
|
145 |
-
<option value="100">100</option>
|
146 |
-
</select>
|
147 |
-
|
148 |
-
<table style="width:100%; border-collapse: separate; border-spacing: 0 10px;">
|
149 |
-
<thead>
|
150 |
-
<tr>
|
151 |
-
<th>Text Description</th>
|
152 |
-
<th>AR</th>
|
153 |
-
<th>FM</th>
|
154 |
-
<th>FM (VAE)</th>
|
155 |
-
<th>GT</th>
|
156 |
-
</tr>
|
157 |
-
</thead>
|
158 |
-
<tbody>
|
159 |
-
<!-- Row 1 -->
|
160 |
-
<tr>
|
161 |
-
<td><b>Text 1</b></td>
|
162 |
-
<td><audio controls data-text="1" data-model="ar"></audio></td>
|
163 |
-
<td><audio controls data-text="1" data-model="fm"></audio></td>
|
164 |
-
<td><audio controls data-text="1" data-model="fm_vae"></audio></td>
|
165 |
-
<td><audio controls data-text="1" data-model="gt"></audio></td>
|
166 |
-
</tr>
|
167 |
-
<!-- Row 2 -->
|
168 |
-
<tr>
|
169 |
-
<td><b>Text 2</b></td>
|
170 |
-
<td><audio controls data-text="2" data-model="ar"></audio></td>
|
171 |
-
<td><audio controls data-text="2" data-model="fm"></audio></td>
|
172 |
-
<td><audio controls data-text="2" data-model="fm_vae"></audio></td>
|
173 |
-
<td><audio controls data-text="2" data-model="gt"></audio></td>
|
174 |
-
</tr>
|
175 |
-
<!-- Row 3 -->
|
176 |
-
<tr>
|
177 |
-
<td><b>Text 3</b></td>
|
178 |
-
<td><audio controls data-text="3" data-model="ar"></audio></td>
|
179 |
-
<td><audio controls data-text="3" data-model="fm"></audio></td>
|
180 |
-
<td><audio controls data-text="3" data-model="fm_vae"></audio></td>
|
181 |
-
<td><audio controls data-text="3" data-model="gt"></audio></td>
|
182 |
-
</tr>
|
183 |
-
<!-- Row 4 -->
|
184 |
-
<tr>
|
185 |
-
<td><b>Text 4</b></td>
|
186 |
-
<td><audio controls data-text="4" data-model="ar"></audio></td>
|
187 |
-
<td><audio controls data-text="4" data-model="fm"></audio></td>
|
188 |
-
<td><audio controls data-text="4" data-model="fm_vae"></audio></td>
|
189 |
-
<td><audio controls data-text="4" data-model="gt"></audio></td>
|
190 |
-
</tr>
|
191 |
-
</tbody>
|
192 |
-
</table>
|
193 |
-
</div>
|
194 |
-
|
195 |
-
<!-- Section 2 -->
|
196 |
-
<div class="container">
|
197 |
-
<h2>Controlability</h2>
|
198 |
-
<p>The following examples are conditioned using temporally-aligned drums, chord progressions and melody controls that were extracted the ground-truth sample.</p>
|
199 |
-
<p>The figure paired with each audio corresponds to the extracted ground-truth melody condition.</p>
|
200 |
-
<p>The exctacted melody corresponds to G2 to B7 note range, obtained by using a pretrained <a href=https://github.com/rabitt/ismir2017-deepsalience>multi-f0 classification model</a> followed by a threshold filtering and top-1 binarization.</p>
|
201 |
-
<div id="section2-table-container"></div>
|
202 |
-
</div>
|
203 |
-
|
204 |
-
<!-- Scripts -->
|
205 |
-
<script>
|
206 |
-
// Update Section 1 dynamically based on dropdown
|
207 |
-
function updateAudioSources() {
|
208 |
-
const frameRate = document.getElementById('mappingSelect').value;
|
209 |
-
document.querySelectorAll('audio[data-text]').forEach(audio => {
|
210 |
-
const text = audio.getAttribute('data-text');
|
211 |
-
const model = audio.getAttribute('data-model');
|
212 |
-
if (model === 'gt') {
|
213 |
-
audio.src = `audio/section1/text${text}_gt.wav`;
|
214 |
-
} else {
|
215 |
-
audio.src = `audio/section1/text${text}_${model.toLowerCase()}_${frameRate}.wav`;
|
216 |
-
}
|
217 |
-
});
|
218 |
-
}
|
219 |
-
|
220 |
-
document.getElementById('mappingSelect').addEventListener('change', updateAudioSources);
|
221 |
-
updateAudioSources(); // Initialize
|
222 |
-
|
223 |
-
// Section 2: Generate static table
|
224 |
-
const texts = [1, 2, 3, 4];
|
225 |
-
const models = ['ar', 'fm', 'gt'];
|
226 |
-
|
227 |
-
function createSection2Table() {
|
228 |
-
const table = document.createElement('table');
|
229 |
-
table.style.width = '100%';
|
230 |
-
table.style.borderCollapse = 'separate';
|
231 |
-
table.style.borderSpacing = '0 10px';
|
232 |
-
const thead = document.createElement('thead');
|
233 |
-
const headerRow = document.createElement('tr');
|
234 |
-
['Text Description', 'AR', 'FM', 'GT'].forEach(h => {
|
235 |
-
const th = document.createElement('th');
|
236 |
-
th.textContent = h;
|
237 |
-
headerRow.appendChild(th);
|
238 |
-
});
|
239 |
-
thead.appendChild(headerRow);
|
240 |
-
table.appendChild(thead);
|
241 |
-
|
242 |
-
const tbody = document.createElement('tbody');
|
243 |
-
|
244 |
-
texts.forEach(textId => {
|
245 |
-
const row = document.createElement('tr');
|
246 |
-
const descCell = document.createElement('td');
|
247 |
-
descCell.textContent = `Text ${textId}`;
|
248 |
-
row.appendChild(descCell);
|
249 |
-
|
250 |
-
models.forEach(model => {
|
251 |
-
const cell = document.createElement('td');
|
252 |
-
|
253 |
-
const canvas = document.createElement('canvas');
|
254 |
-
canvas.width = 300;
|
255 |
-
canvas.height = 150;
|
256 |
-
canvas.style.border = '1px solid #ccc';
|
257 |
-
canvas.id = `canvas_2_${textId}_${model.toLowerCase()}`;
|
258 |
-
|
259 |
-
const audio = document.createElement('audio');
|
260 |
-
audio.controls = true;
|
261 |
-
audio.id = `audio_2_${textId}_${model.toLowerCase()}`;
|
262 |
-
audio.src = `audio/section2/text${textId}_${model.toLowerCase()}.wav`;
|
263 |
-
|
264 |
-
cell.appendChild(canvas);
|
265 |
-
cell.appendChild(document.createElement('br'));
|
266 |
-
cell.appendChild(audio);
|
267 |
-
row.appendChild(cell);
|
268 |
-
});
|
269 |
-
|
270 |
-
tbody.appendChild(row);
|
271 |
-
});
|
272 |
-
|
273 |
-
table.appendChild(tbody);
|
274 |
-
return table;
|
275 |
-
}
|
276 |
-
|
277 |
-
function setupCanvasOverlay(canvasId, audioId, imageSrc) {
|
278 |
-
const canvas = document.getElementById(canvasId);
|
279 |
-
const audio = document.getElementById(audioId);
|
280 |
-
const ctx = canvas.getContext('2d');
|
281 |
-
const img = new Image();
|
282 |
-
img.src = imageSrc;
|
283 |
-
|
284 |
-
img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
285 |
-
|
286 |
-
function drawOverlay() {
|
287 |
-
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
288 |
-
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
289 |
-
const x = (audio.currentTime / audio.duration) * canvas.width;
|
290 |
-
ctx.beginPath();
|
291 |
-
ctx.moveTo(x, 0);
|
292 |
-
ctx.lineTo(x, canvas.height);
|
293 |
-
ctx.strokeStyle = 'red';
|
294 |
-
ctx.lineWidth = 2;
|
295 |
-
ctx.stroke();
|
296 |
-
}
|
297 |
-
|
298 |
-
let interval;
|
299 |
-
audio.addEventListener('play', () => interval = setInterval(drawOverlay, 30));
|
300 |
-
audio.addEventListener('pause', () => clearInterval(interval));
|
301 |
-
audio.addEventListener('ended', () => {
|
302 |
-
clearInterval(interval);
|
303 |
-
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
304 |
-
});
|
305 |
-
}
|
306 |
-
|
307 |
-
// Render Section 2
|
308 |
-
document.getElementById('section2-table-container').appendChild(createSection2Table());
|
309 |
-
|
310 |
-
// Setup canvas overlays
|
311 |
-
texts.forEach(textId => {
|
312 |
-
models.forEach(model => {
|
313 |
-
setupCanvasOverlay(
|
314 |
-
`canvas_2_${textId}_${model.toLowerCase()}`,
|
315 |
-
`audio_2_${textId}_${model.toLowerCase()}`,
|
316 |
-
`figures/section2/text${textId}.png`
|
317 |
-
);
|
318 |
-
});
|
319 |
-
});
|
320 |
-
</script>
|
321 |
-
|
322 |
-
<!-- Section 3 -->
|
323 |
-
<div class="container">
|
324 |
-
<h2>Inpainting</h2>
|
325 |
-
<p>Below there's a table containing multiple examples of inpainting, flip through the pages to see modre examples.</p>
|
326 |
-
<label><b>Page:</b></label>
|
327 |
-
<select id="section3PageSelect">
|
328 |
-
<option value="1">1</option>
|
329 |
-
<option value="2">2</option>
|
330 |
-
<option value="3">3</option>
|
331 |
-
<!-- <option value="4">4</option>
|
332 |
-
<option value="5">5</option>
|
333 |
-
<option value="6">6</option>
|
334 |
-
<option value="7">7</option>
|
335 |
-
<option value="8">8</option>
|
336 |
-
<option value="9">9</option>
|
337 |
-
<option value="10">10</option> -->
|
338 |
-
</select>
|
339 |
-
|
340 |
-
<div id="section3-text-table"></div>
|
341 |
-
<div id="section3-audio-table"></div>
|
342 |
-
</div>
|
343 |
-
|
344 |
-
<script>
|
345 |
-
const Section3Models = ['ar', 'fm', 'fm_zs', 'gt'];
|
346 |
-
|
347 |
-
const textsDict = {
|
348 |
-
1: [
|
349 |
-
"Heavy and driving, featuring gritty electric guitar and a powerful Heavy Metal groove that creates a bold, determined mood.",
|
350 |
-
"Upbeat and bright, featuring an Indie Pop feel, acoustic guitar and piano that create a positive mood.",
|
351 |
-
"A light floating acoustic orchestral piece with piano, bass, drums and choir.",
|
352 |
-
"Wintry and sweeping, featuring soaring strings, plinking harp and huge horns that create an atmosphere of magic."
|
353 |
-
],
|
354 |
-
|
355 |
-
2: [
|
356 |
-
"Synthetic Hip Hop and soul derived from a poem about losing young friends to violence.",
|
357 |
-
"Soaring and hopeful, featuring atmospheric electric guitar, floating vocal chops, bouncy choir and light synth drums that create a dreamy, inspirational mood.",
|
358 |
-
"Bright and bouncy, with a Nu Disco feel, electric guitar and vintage keyboards that create a slick mood.",
|
359 |
-
"Smooth R&B groove featuring a female voice with hip hop elements."
|
360 |
-
],
|
361 |
-
|
362 |
-
3: [
|
363 |
-
"Shimmering and flowing, with R&B neo-soul elements featuring euphoric synthesizer, electric guitar, and piano to create a chill and blissful mood.",
|
364 |
-
"Bouncy and bright, featuring electric guitar and a funky groove that creates a proud, confident mood.",
|
365 |
-
"A funky, driving jazz/r&b instrumental with a modern/retro feel.",
|
366 |
-
"Building and tense, with suspense elements featuring pulsing synthesizer, piano, and strings to create a menacing and anticipatory mood."
|
367 |
-
],
|
368 |
-
|
369 |
-
// 4: [
|
370 |
-
// "Building and tense, with suspense elements featuring pulsing synthesizer, piano, and strings to create a menacing and anticipatory mood.",
|
371 |
-
// "Radiant and flowing, with corporate inspirational and indie pop elements featuring positive piano, electric guitar, and vocal oohs to create a proud and happy mood.",
|
372 |
-
// "A light song with overtones of old western movie themes.",
|
373 |
-
// "Warm and driving, featuring heavy electric guitar, piano and pulsing drums that create a bold, reflective mood."
|
374 |
-
// ],
|
375 |
-
|
376 |
-
// 5: [
|
377 |
-
// "Warm and bouncy, featuring groovy piano, synthesizers, vocal chops and synth drums that create a confident, hip mood.",
|
378 |
-
// "Radiant and gleaming, with pop bubblegum elements featuring happy electric guitar and synthesizer to create a joyful and enthusiastic mood.",
|
379 |
-
// "Dark and eerie, featuring urgent brass and strings that create an anxious mood.",
|
380 |
-
// "Groovy and hip, featuring soulful female vocal chops, electric guitar, keyboards and drums that create a laid-back, chill mood."
|
381 |
-
// ],
|
382 |
-
|
383 |
-
// 6: [
|
384 |
-
// "Smooth Jazz piece.",
|
385 |
-
// "Bright and anthemic, featuring vocal samples, synthesizer and synth drums that create a happy, upbeat mood.",
|
386 |
-
// "Soaring and evocative, featuring jangling guitar, restless percussion and a long, slow build that create an atmosphere of progress.",
|
387 |
-
// "Bright and enthusiastic, featuring acoustic guitar, hand claps, vocal oohs and marimba that create a satisfied mood."
|
388 |
-
// ],
|
389 |
-
|
390 |
-
// 7: [
|
391 |
-
// "Traditional Spanish Song",
|
392 |
-
// "Heavy and building, featuring gritty synth textures and a laid-back dance groove, creating a determined mood.",
|
393 |
-
// "Smooth and hypnotic, featuring floating piano and drones that create a peaceful mood.",
|
394 |
-
// "Bright and building, featuring a heavy Dance groove, pounding synth drums and floating electronic elements create a determined, hypnotic mood."
|
395 |
-
// ],
|
396 |
-
|
397 |
-
// 8: [
|
398 |
-
// "Driving and determined with Indie rock elements, featuring edgy electric guitar, bass, drums, background vocals, and piano, creating an energetic and powerful mood.",
|
399 |
-
// "A Ragtime Blues improvisation done on a vintage tack-piano in an old-time saloon setting.",
|
400 |
-
// "Pulsing and hopeful, featuring lush piano, guitars, strings, percussion and drums that build up to a heartfelt, soaring mood.",
|
401 |
-
// "Warm and mellow, featuring a laidback downtempo groove, piano that build with edgy drums and gritty synth brass that create a confident mood."
|
402 |
-
// ],
|
403 |
-
|
404 |
-
// 9: [
|
405 |
-
// "Bright and flowing, featuring an upbeat Indie Folk feel, vocal oohs and bells that create an enthusiastic mood.",
|
406 |
-
// "London, Montreal Caribbean inspired melody driven rap.",
|
407 |
-
// "Pulsing and bouncy, with corporate inspirational elements featuring reflective synthesizer, piano, and electric guitar to create a soaring and uplifting mood.",
|
408 |
-
// "Upbeat with a driving Pop Punk groove, featuring bright electric guitar and hand claps that create an energetic mood."
|
409 |
-
// ],
|
410 |
-
|
411 |
-
// 10: [
|
412 |
-
// "Grime influenced hard hitting electro fusion",
|
413 |
-
// "Bright and grooving, featuring vocal chops, synthesizers, bass, and beats that create a proud, soaring mood.",
|
414 |
-
// "Atmospheric and growing, with cinematic and suspense elements featuring dramatic strings, synth pulses, and percussion to create an inquisitive and anxious mood.",
|
415 |
-
// "Think “ Curb Your Enthusiasm “ Theme. A fun quirky song with many different elements."
|
416 |
-
// ]
|
417 |
-
};
|
418 |
-
|
419 |
-
function createSection3TextTable(page) {
|
420 |
-
const container = document.getElementById('section3-text-table');
|
421 |
-
container.innerHTML = '';
|
422 |
-
|
423 |
-
const table = document.createElement('table');
|
424 |
-
table.style.width = '100%';
|
425 |
-
table.style.borderCollapse = 'separate';
|
426 |
-
table.style.borderSpacing = '0 10px';
|
427 |
-
|
428 |
-
const tbody = document.createElement('tbody');
|
429 |
-
const texts = textsDict[page] || [];
|
430 |
-
|
431 |
-
texts.forEach((text, i) => {
|
432 |
-
const row = document.createElement('tr');
|
433 |
-
const label = document.createElement('td');
|
434 |
-
label.style.fontWeight = 'bold';
|
435 |
-
label.textContent = `Text ${i + 1}:`;
|
436 |
-
const content = document.createElement('td');
|
437 |
-
content.textContent = text;
|
438 |
-
row.appendChild(label);
|
439 |
-
row.appendChild(content);
|
440 |
-
tbody.appendChild(row);
|
441 |
-
});
|
442 |
-
|
443 |
-
table.appendChild(tbody);
|
444 |
-
container.appendChild(table);
|
445 |
-
}
|
446 |
-
|
447 |
-
function createSection3AudioTable(page) {
|
448 |
-
const container = document.getElementById('section3-audio-table');
|
449 |
-
container.innerHTML = '';
|
450 |
-
|
451 |
-
const table = document.createElement('table');
|
452 |
-
table.style.width = '100%';
|
453 |
-
table.style.borderCollapse = 'separate';
|
454 |
-
table.style.borderSpacing = '0 10px';
|
455 |
-
|
456 |
-
const thead = document.createElement('thead');
|
457 |
-
const headRow = document.createElement('tr');
|
458 |
-
['Text', 'AR', 'FM', 'FM_ZS', 'GT'].forEach(h => {
|
459 |
-
const th = document.createElement('th');
|
460 |
-
th.textContent = h;
|
461 |
-
headRow.appendChild(th);
|
462 |
-
});
|
463 |
-
thead.appendChild(headRow);
|
464 |
-
table.appendChild(thead);
|
465 |
-
|
466 |
-
const tbody = document.createElement('tbody');
|
467 |
-
|
468 |
-
for (let i = 0; i < 4; i++) {
|
469 |
-
const globalIndex = (page - 1) * 4 + (i + 1); // 1-based indexing
|
470 |
-
const row = document.createElement('tr');
|
471 |
-
|
472 |
-
const labelCell = document.createElement('td');
|
473 |
-
labelCell.textContent = `Text ${i + 1}`;
|
474 |
-
row.appendChild(labelCell);
|
475 |
-
|
476 |
-
Section3Models.forEach(model => {
|
477 |
-
const cell = document.createElement('td');
|
478 |
-
|
479 |
-
const canvas = document.createElement('canvas');
|
480 |
-
canvas.width = 300;
|
481 |
-
canvas.height = 150;
|
482 |
-
canvas.style.border = '1px solid #ccc';
|
483 |
-
canvas.id = `canvas_3_${globalIndex}_${model.toLowerCase()}`;
|
484 |
-
|
485 |
-
const audio = document.createElement('audio');
|
486 |
-
audio.controls = true;
|
487 |
-
audio.id = `audio_3_${globalIndex}_${model.toLowerCase()}`;
|
488 |
-
audio.src = `audio/section3/text${globalIndex}_${model.toLowerCase()}.wav`;
|
489 |
-
|
490 |
-
cell.appendChild(canvas);
|
491 |
-
cell.appendChild(document.createElement('br'));
|
492 |
-
cell.appendChild(audio);
|
493 |
-
row.appendChild(cell);
|
494 |
-
});
|
495 |
-
|
496 |
-
tbody.appendChild(row);
|
497 |
-
}
|
498 |
-
|
499 |
-
table.appendChild(tbody);
|
500 |
-
container.appendChild(table);
|
501 |
-
}
|
502 |
-
|
503 |
-
function setupSection3Canvases(page) {
|
504 |
-
for (let i = 0; i < 4; i++) {
|
505 |
-
const globalIndex = (page - 1) * 4 + (i + 1);
|
506 |
-
Section3Models.forEach(model => {
|
507 |
-
setupCanvasOverlay(
|
508 |
-
`canvas_3_${globalIndex}_${model.toLowerCase()}`,
|
509 |
-
`audio_3_${globalIndex}_${model.toLowerCase()}`,
|
510 |
-
`figures/section3/text${globalIndex}_${model.toLowerCase()}.png`
|
511 |
-
);
|
512 |
-
});
|
513 |
-
}
|
514 |
-
}
|
515 |
-
|
516 |
-
function renderSection3() {
|
517 |
-
const page = parseInt(document.getElementById('section3PageSelect').value);
|
518 |
-
createSection3TextTable(page);
|
519 |
-
createSection3AudioTable(page);
|
520 |
-
setTimeout(() => setupSection3Canvases(page), 100);
|
521 |
-
}
|
522 |
-
|
523 |
-
document.getElementById('section3PageSelect').addEventListener('change', renderSection3);
|
524 |
-
renderSection3(); // initial render
|
525 |
-
</script>
|
526 |
-
|
527 |
|
528 |
</body>
|
529 |
-
</html>
|
|
|
2 |
<html lang="en">
|
3 |
<head>
|
4 |
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
<title>AR vs FM Experiment Page</title>
|
7 |
<link rel="stylesheet" href="style/bootstrap.min.css">
|
8 |
<style>
|
9 |
body {
|
10 |
+
padding: 20px;
|
11 |
+
margin: 0;
|
12 |
}
|
13 |
+
|
14 |
+
.container {
|
15 |
+
background: white;
|
16 |
+
border-radius: 16px;
|
17 |
+
padding: 30px;
|
18 |
+
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
19 |
+
margin: 0 auto 50px auto;
|
20 |
+
max-width: 960px;
|
21 |
+
width: 100%;
|
22 |
+
}
|
23 |
+
|
24 |
td, th {
|
25 |
text-align: center;
|
26 |
padding: 8px;
|
27 |
border-bottom: 0.1px solid #aaa;
|
28 |
}
|
29 |
+
|
30 |
audio {
|
31 |
+
width: 100%;
|
|
|
32 |
max-width: 250px;
|
33 |
}
|
34 |
+
|
35 |
+
table {
|
36 |
+
display: block;
|
37 |
+
overflow-x: auto;
|
38 |
+
white-space: nowrap;
|
39 |
+
width: 100%;
|
40 |
+
}
|
41 |
+
|
42 |
+
@media (max-width: 600px) {
|
43 |
+
h1 {
|
44 |
+
font-size: 1.5rem;
|
45 |
+
}
|
46 |
+
|
47 |
+
h2 {
|
48 |
+
font-size: 1.25rem;
|
49 |
+
}
|
50 |
+
|
51 |
+
p {
|
52 |
+
font-size: 1rem;
|
53 |
+
}
|
54 |
}
|
55 |
</style>
|
56 |
</head>
|
|
|
141 |
showHighlight(highlightIndex);
|
142 |
}
|
143 |
|
|
|
144 |
showHighlight(highlightIndex);
|
145 |
</script>
|
146 |
|
147 |
+
<!-- The rest of your sections go here -->
|
148 |
+
<!-- Ensure other tables are also inside <div style="overflow-x:auto"> if needed -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
149 |
|
150 |
</body>
|
151 |
+
</html>
|