~reesmichael1/chantpointer

ref: 6df64b10f376416ac967c295029c278b33791f13 chantpointer/templates/html/index.html -rw-r--r-- 6.9 KiB View raw
6df64b10Michael Rees Fix missing style on code block 5 months ago
                                                                                
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
    <head>
        <title>Chant Pointer</title>
        <link href="/static/style.css" rel="stylesheet" type="text/css" media="all">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header class="bg-blue-800 py-8 text-center text-white">
            <h1 class="text-3xl font-bold">Chant Pointer</h1>
            <h2 class="text-xl">Easily point Anglican chants</h2>
        </header>
        <main class="py-3 px-4">
            <div class="w-full max-w-3xl">
                <form action="/generate" method="post" enctype="multipart/form-data">
                    <div class="mb-4">
                        <label class="block font-bold mb-2" for="score">Chant Score</label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" type="file" name="score" accept="image/*" id="score"
                                                                                       {{ if ne .ScorePath "" }} value="{{ .ScorePath }}" {{ end }} required>
                    </div>
                    <div class="mb-4">
                        <label class="block font-bold mb-2" for="title">Title</label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" name="title" type="text" id="title" placeholder="Title" 
                                                                                                                                                                                        {{ if ne .Title "" }} value="{{ .Title }}" {{ end }}
                                                                                                                                                                                                              >
                    </div>
                        <div class="mb-4">
                            <label class="block font-bold mb-2" for="subtitle">Subtitle</label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" name="subtitle" type="text" placeholder="Subtitle" id="subtitle"
                                                                                                                                                                                                           {{ if ne .Subtitle "" }} value="{{ .Subtitle }}" {{ end }}
                                                                                                                                                                                                                                    >
                        </div>
                        <div class="mb-4">
                            <label class="block font-bold mb-2" for="chant">Chant</label>
                            <textarea name="chant" class="shadow appearance-none border rounded h-48 w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline" id="chant" required>{{ if ne .Chant "" }}{{ .Chant }}{{ end }}</textarea>
                        </div>
                        <div class="mb-4">
                            <button class="bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded">Generate PDF</button>
                        </div>
                        {{ if ne .URL "" }}
                        <div class="mb-4">
                            <a href="{{ .URL }}" class="text-blue-700 hover:text-blue-400 text-lg">Download PDF</a>
                            <p>This link will work and may be shared for at least the next 24 hours.</p>
                            <p>(If you would like to make any changes, you will need to re-select the chant score.)</p>
                        </div>
                    {{ end }}
                </form>
            </div>
            <section class="py-2">
                <h2 class="text-lg py-2 border-b-2">Demo</h2>
                <div class="py-2 lg:flex lg:flex-row">
                    <div class="lg:w-1/2">
                        <pre class="overflow-scroll bg-gray-200 px-6 py-4 lg:overflow-auto">The earth is the Lord's and all that | is in | it,
the world and | all who | dwell there|in.

For it is he who founded it u|pon the | s\"eas
and made it firm | u_pon | (the rivers) (of the) | deep.

^Who is he, this | King of | glory?
The Lord of hosts,\\ he | is the | King of | glory.</pre>
                    </div>
                    <div class="lg:w-1/2">
                        <img class="py-4 lg:py-0 px-4" src="./static/demo.png">
                    </div>
                </div>
            </section>
            <section>
                <h2 class="text-lg py-2 border-b-2">How-To</h2>
                <ul class="py-2 list-disc pl-8">
                    <li class="py-2">Use line breaks to separate parts of a verse</li>
                    <li class="py-2">Use <code class="bg-gray-200 px-2 py-1">\\</code> to insert a line break in the output while staying in the same verse</li>
                    <li class="py-2">Use <code class="bg-gray-200 px-2 py-1">\"</code> in front of a vowel to insert a diacritic</li>
                    <li class="py-2">Use the <code class="bg-gray-200 px-2 py-1">|</code> character to divide bars</li>
                    <li class="py-2">Use <code class="bg-gray-200 px-2 py-1">_</code> to break syllables: <code class="bg-gray-200 px-2 py-1">war_rior</code>.
                    <li class="py-2">Use parentheses to group syllables: <code class="bg-gray-200 px-2 py-1">(glory of) the Lord</code></li>
                    <li class="py-2">Add a <code class="bg-gray-200 px-2 py-1">^</code> at the beginning of a verse to indicate that the verse should use the second part of the chant</li>
                    <li class="py-2">Need help or want to see something else added? Feel free to <a href="mailto:mrees@noeontheend.com" class="text-blue-700 hover:text-blue-400">contact me</a>!</li>
                </ul>
            </section>
        </main>

        <footer class="py-6 px-6 bg-gray-100">
            <p class="py-2">
            If you find this useful, you may also be interested in <a href="https://liturgical.net" class="text-blue-700 hover:text-blue-400">LiturgiCal</a>.</p>
            <p class="py-2">This website was built by <a href="https://noeontheend.com" class="text-blue-700 hover:text-blue-400">Michael Rees</a> on top of a <a href="https://github.com/gregrs-uk/anglican-chant-template" class="text-blue-700 hover:text-blue-400">LaTeX template for typesetting Anglican chant</a> originally written by <a href="https://github.com/gregrs-uk" class="text-blue-700 hover:text-blue-400">@gregrs-uk</a>.
            <p class="py-2">If you are interested, the source code for this website <a href="https://git.sr.ht/~reesmichael1/chantpointer" class="text-blue-700 hover:text-blue-400">is freely available</a>.</p>
        </footer>
    </body>
</html>