mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2025-04-26 15:16:19 +02:00
initial commit
This commit is contained in:
Carlos Galindo
commit
c8c7eae33c
16 changed files with 835 additions and 0 deletions
57
res/index.css
Normal file
57
res/index.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.songs {
|
||||
margin: 0 0 2em 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.songs li {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
left: 0;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: .3em 0;
|
||||
min-height: 1.6em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.songs li:hover {
|
||||
color: #607D8B;
|
||||
background-color: #DDD;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
/* .songs li.selected {
|
||||
background-color: #CFD8DC;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.songs li.selected:hover {
|
||||
background-color: #BBD8DC;
|
||||
color: white;
|
||||
transition-duration: 500ms;
|
||||
} */
|
||||
|
||||
.songs li.hasChords {
|
||||
background-color: #FBB;
|
||||
}
|
||||
|
||||
.songs li.hasChords:hover {
|
||||
color: #607D8B;
|
||||
background-color: #FAA;
|
||||
}
|
||||
|
||||
.songs .numberBadge {
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
color: white;
|
||||
padding: 0.8em 0.7em 0 0.7em;
|
||||
background-color: #405061;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
top: -4px;
|
||||
min-height: 1.8em;
|
||||
margin-right: .8em;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
4
res/index.html
Normal file
4
res/index.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<h2>Índice</h2>
|
||||
<ul class="songs">
|
||||
%s
|
||||
</ul>
|
||||
44
res/main.css
Normal file
44
res/main.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
h1 {
|
||||
color: #369;
|
||||
font-size: 250%;
|
||||
}
|
||||
h2, h3 {
|
||||
color: #444;
|
||||
font-weight: lighter;
|
||||
}
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
margin: 2em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.nav * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
padding: 0.5em;
|
||||
margin: 0.2em;
|
||||
background: #eee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.nav li:hover {
|
||||
background: #ccc;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.nav li.selected {
|
||||
background: #bbb;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.nav .selected a {
|
||||
color: #111;
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
20
res/page.html
Normal file
20
res/page.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Cancionero - Parroquia San Leandro</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
%s
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Cancionero San Leandro</h1>
|
||||
</header>
|
||||
<main>
|
||||
%s
|
||||
</main>
|
||||
<footer>
|
||||
<p>Canciones del <a href="https://sanleandro-obispo.net/cancionero">Cancionero</a> de la <a href="https://sanleandro-obispo.net">Parroquia San Leandro</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
12
res/sizes.js
Normal file
12
res/sizes.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
SIZE_STEPS = [30, 50, 67, 80, 90, 100, 110, 120, 133, 150, 170, 200, 240, 300];
|
||||
|
||||
currSize = SIZE_STEPS.indexOf(100)
|
||||
|
||||
/** Changes the size of the lyrics and chords. */
|
||||
function size(steps) {
|
||||
if (steps === 0) {
|
||||
currSize = SIZE_STEPS.indexOf(100);
|
||||
}
|
||||
currSize += steps;
|
||||
document.getElementById('wholeSongDiv').style.fontSize = SIZE_STEPS[currSize] + '%';
|
||||
}
|
||||
65
res/song.css
Normal file
65
res/song.css
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
table.chordedline {
|
||||
border-spacing: 0px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.song div {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.chordedline td {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.chord {
|
||||
font-style: italic;
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
.chorus {
|
||||
font-weight: bold;
|
||||
border-left: black 2px solid;
|
||||
padding-left: 0.5em !important;
|
||||
}
|
||||
|
||||
.chorus div {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.chorus table {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.lrep {
|
||||
-moz-transform: scaleX(-1);
|
||||
-o-transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
filter: FlipV;
|
||||
-ms-filter: "FlipV";
|
||||
background-image: url(img/repeat-sign.svg);
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.rrep {
|
||||
background-image: url(img/repeat-sign.svg);
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
.rep {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
button.small {
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
.echo {
|
||||
font-style: italic;
|
||||
}
|
||||
48
res/song.html
Normal file
48
res/song.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<div class="song">
|
||||
<script async src="../transpose.js"></script>
|
||||
<script async src="../sizes.js"></script>
|
||||
<h2>%s</h2>
|
||||
%s
|
||||
%s
|
||||
<h3>Ajustes</h3>
|
||||
<div>
|
||||
<label>Cambiar tamaño de letra </label>
|
||||
<button class="small" onclick="size(-1)">-</button>
|
||||
<button class="small" onclick="size(0)">Reset</button>
|
||||
<button class="small" onclick="size(+1)">+</button>
|
||||
</div>
|
||||
<div>
|
||||
<label>Transponer acordes </label>
|
||||
<button class="small" onclick="transposeAdd(-2)">-2</button>
|
||||
<button class="small" onclick="transposeAdd(-1)">-1</button>
|
||||
<select id="transposeSelect" disabled>
|
||||
<option onclick="transpose(-6)">-6</option>
|
||||
<option onclick="transpose(-5)">-5</option>
|
||||
<option onclick="transpose(-4)">-4</option>
|
||||
<option onclick="transpose(-3)">-3</option>
|
||||
<option onclick="transpose(-2)">-2</option>
|
||||
<option onclick="transpose(-1)">-1</option>
|
||||
<option onclick="transpose(0)" selected="selected">0</option>
|
||||
<option onclick="transpose(1)">1</option>
|
||||
<option onclick="transpose(2)">2</option>
|
||||
<option onclick="transpose(3)">3</option>
|
||||
<option onclick="transpose(4)">4</option>
|
||||
<option onclick="transpose(5)">5</option>
|
||||
<option onclick="transpose(6)">6</option>
|
||||
</select>
|
||||
<button class="small" onclick="transposeAdd(1)">+1</button>
|
||||
<button class="small" onclick="transposeAdd(2)">+2</button>
|
||||
<button onclick="transpose(0)">Reset</button>
|
||||
</div>
|
||||
%s
|
||||
<h3>Canción</h3>
|
||||
<div id="wholeSongDiv">
|
||||
%s
|
||||
</div>
|
||||
<div>
|
||||
%s
|
||||
%s
|
||||
</div>
|
||||
<a href="https://gitlab.com/parroquia-san-leandro/cancionero-25/blob/master/%s">Ver archivo original</a>
|
||||
<button onclick="window.location = window.location.toString().slice(0, window.location.toString().lastIndexOf('/')) + '/../'">Atrás</button>
|
||||
</div>
|
||||
4
res/song_li.html
Normal file
4
res/song_li.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<li onclick="window.location = '%s'"%s>
|
||||
<span class="numberBadge">%d. </span>
|
||||
%s%s%s
|
||||
</li>
|
||||
39
res/transpose.js
Normal file
39
res/transpose.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
ENG_INDEX = {'C': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3, 'E': 4, 'Fb': 4, 'F': 5, 'E#': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8, 'Ab': 8, 'A': 9, 'A#': 10, 'Bb': 10, 'B': 11, 'Cb': 11, 'B#': 0}
|
||||
LAT_INDEX = {'Do': 0, 'Do#': 1, 'Reb': 1, 'Re': 2, 'Re#': 3, 'Mib': 3, 'Mi': 4, 'Fab': 4, 'Fa': 5, 'Mi#': 5, 'Fa#': 6, 'Solb': 6, 'Sol': 7, 'Sol#': 8, 'Lab': 8, 'La': 9, 'La#': 10, 'Sib': 10, 'Si': 11, 'Dob': 11, 'Si#': 0}
|
||||
CHORDS_LAT = ['Do', 'Do#', 'Re', 'Re#', 'Mi', 'Fa', 'Fa#', 'Sol', 'Sol#', 'La', 'Sib', 'Si']
|
||||
CHORDS_ENG = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'Bb', 'B']
|
||||
|
||||
|
||||
/** Changes all chords to a given semitone relative to the original */
|
||||
function transpose(n) {
|
||||
transposeAdd(n - getTranspose())
|
||||
}
|
||||
|
||||
/** Transposes all chords by n steps */
|
||||
function transposeAdd(n) {
|
||||
for (c of document.getElementsByClassName('c')) {
|
||||
chord = c.innerHTML
|
||||
if (LAT_INDEX[chord] == undefined) {
|
||||
throw Error("Unknown chord: " + chord)
|
||||
}
|
||||
i = LAT_INDEX[chord]
|
||||
j = (i + n + 12) % 12
|
||||
c.innerHTML = CHORDS_LAT[j]
|
||||
}
|
||||
|
||||
setTransposeSelector(getTranspose() + n)
|
||||
}
|
||||
|
||||
function setTransposeSelector(n) {
|
||||
while (n > 6) {
|
||||
n -= 12
|
||||
}
|
||||
while (n < -6) {
|
||||
n += 12
|
||||
}
|
||||
document.getElementById("transposeSelect").value = n
|
||||
}
|
||||
|
||||
function getTranspose() {
|
||||
return Number.parseInt(document.getElementById("transposeSelect").value)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue