ear-trainer/index.html at master · feberts/ear-trainer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Ear Trainer</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <link rel="stylesheet" href="./style.css">
        <script src="./ear_trainer.js"></script>
        <link rel="icon" href="icon.svg">
    </head>
    <body>
        <h1>Interval Ear Trainer</h1>
        <img src="./clef.svg" alt="">
        <!-- central Vue instance: -->
        <div id="IntervalTrainerVue">
            <!-- start button: -->
            <button id="start_button" v-on:click="start">Start</button>
            <div id="controls">
                <!-- button list for entering intervals: -->
                <ul>
                    <li
                        is="interval-button-component"
                        v-for="interval in intervals"
                        v-bind:key="interval.halfSteps"
                        v-bind:name="interval.name"
                        v-bind:half_steps="interval.halfSteps"
                    ></li>
                </ul>
                <!-- play-again button: -->
                <button
                    id="play_again_button"
                    v-on:click="playCurrentInterval"
                    v-bind:style="{ 'background-color': feedbackColor }"
                >play again</button>
                <!-- current score: -->
                <p>{{scoreText}}</p>
            </div>
        </div>
        <!--
        <footer>
            <a href="https://github.com/feberts/ear-trainer">GitHub</a>
        </footer>
        -->
    </body>
</html>