diff --git a/app.py b/app.py index 9cfa4f3..10c9e43 100644 --- a/app.py +++ b/app.py @@ -37,7 +37,7 @@ def searchpage(): if searchargs: searchresult = db.execute(''' select - 'song', id, name, instr(lower(name),lower(?)) + 'song', id, name, NULL, instr(lower(name),lower(?)) from song where @@ -46,7 +46,7 @@ def searchpage(): '%' || ? || '%' union all select - 'album', id, name, instr(lower(name),lower(?)) + 'album', id, name, code, instr(lower(name),lower(?)) from album where @@ -55,7 +55,7 @@ def searchpage(): '%' || ? || '%' union all select - 'motif', id, name, instr(lower(name),lower(?)) + 'motif', id, name, NULL, instr(lower(name),lower(?)) from motif where @@ -63,7 +63,7 @@ def searchpage(): like '%' || ? || '%' order by - 4 + 5 limit 10 ''', @@ -233,7 +233,7 @@ def motifpage(id): clip_info = db.execute(''' select - song_id, motif_id, song.name + song_id, motif_id, song.name, feature from clip join @@ -249,9 +249,31 @@ def motifpage(id): (id,) ).fetchall() + album_info = db.execute(''' + select + clip.song_id, album.code + from + clip + join + song_album + on + clip.song_id=song_album.song_id + join + album + on + song_album.album_id=album.id + where + clip.motif_id = ? + order by + song_album.album_id + ''', + (id,) + ).fetchall() + return flask.render_template('motif.html', name=name, - clip_info=clip_info + clip_info=clip_info, + album_info=album_info ) # SONG PAGES diff --git a/static/albumicons/1.0.svg b/static/albumicons/1.0.svg index 63396d6..5fe785a 100644 --- a/static/albumicons/1.0.svg +++ b/static/albumicons/1.0.svg @@ -25,8 +25,8 @@ inkscape:document-units="mm" showgrid="false" inkscape:zoom="3.5705387" - inkscape:cx="11.062756" - inkscape:cy="103.06568" + inkscape:cx="22.965722" + inkscape:cy="123.79084" inkscape:window-width="2560" inkscape:window-height="1377" inkscape:window-x="1912" @@ -42,8 +42,11 @@ transform="translate(17.134108,-0.05239776)"> + style="fill:#14b290;fill-opacity:1;stroke-width:0.264583" + d="m -15.134108,0.05239776 h 7.2131476 c 1.108,0 2,0.892 2,2.00000004 V 4.18295 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 V 2.0523978 c 0,-1.10800004 0.892,-2.00000004 2,-2.00000004 z" + inkscape:export-filename="album icons\rect1491.svg" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" /> + style="fill:#2f56e9;fill-opacity:1;stroke-width:0.264583" + d="m -15.134108,7.2047091 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.1305519 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 V 9.2047091 c 0,-1.108 0.892,-2 2,-2 z" + inkscape:export-filename="album icons\rect1497.svg" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" /> + style="fill:#8a800f;fill-opacity:1;stroke-width:0.264583" + d="m -15.134108,21.509331 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" + inkscape:export-filename="album icons\rect1509.svg" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" /> + style="fill:#5900d6;fill-opacity:1;stroke-width:0.264583" + d="m -15.134108,43.778431 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" + inkscape:export-filename="album icons\rect1527.svg" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" /> - + style="fill:#808080;fill-opacity:1;stroke-width:0.264583" + d="m -15.134108,57.506676 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130552 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130552 c 0,-1.108 0.892,-2 2,-2 z" + inkscape:export-filename="album icons\rect1539.svg" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" /> { - preclicked = getAnchor(); - console.log(preclicked); + const preclicked = getAnchor(); + if (! preclicked) return; const radiobutton = document.getElementById(preclicked); - console.log(radiobutton); if (radiobutton){ radiobutton.checked = true; - + const label = document.getElementById(`${preclicked}_label`); + label.scrollIntoView(); } - label = document.getElementById(`${preclicked}_label`) - label.scrollIntoView(); }); +function albumselect(code){ + const radiobutton = document.getElementById(code); + if (radiobutton){ + radiobutton.checked = true; + const label = document.getElementById(`${code}_label`); + label.scrollIntoView(); + } + document.getElementById('search-input').value = ''; +}; + function collapse(clickevent){ const radiobutton = document.getElementById(clickevent.target.htmlFor); if (radiobutton.checked){ diff --git a/static/songbuttonpressed.css b/static/songbuttonpressed.css index 66a25f8..7b68283 100644 --- a/static/songbuttonpressed.css +++ b/static/songbuttonpressed.css @@ -1,7 +1,9 @@ -.top-buttons a:first-child{ - background-color: var(--light-border); +.nav-button.song{ + background-color: var(--pressed); border-style: inset; - border-color: var(--light-border); - border-radius: 1.2rem; - border-width: 0.3rem; +} + +.nav-text.song{ + color: var(--pressed-text); + text-shadow: 1px 1px 2px black; } \ No newline at end of file diff --git a/static/style.css b/static/style.css index d083281..4e91452 100644 --- a/static/style.css +++ b/static/style.css @@ -1,149 +1,234 @@ :root{ - --light-block: lch(90% 25 85); - --light-box: lch(100% 0 90); - --light-back: linear-gradient(90deg, lch(95% 20 260), white 25%, white 75%, lch(95% 20 260)); - --light-border: lch(80% 45 85); + --block: lch(90% 25 85); + --box: lch(100% 0 90); + --back: radial-gradient(white 50%, lch(95% 10 225) ); + --search-back: white; + --thick-border: lch(80% 45 85); + --thin-border: lch(40% 45 85); + --pressed: lch(65% 40 75); + --pressed-text: lch(100% 25 85); + --text: black; + --light-text: gray; + --text-shadow: black; font-family: "Zen Maru Gothic", sans-serif; + color: var(--text); +} + +@media (prefers-color-scheme: dark) { + :root{ + --block: lch(20% 0 75); + --box: lch(40% 2.5 75); + --back: radial-gradient(lch(20% 0 75), black ); + --search-back: lch(35% 0 75); + --thick-border: lch(60% 10 75); + --thin-border: lch(60% 10 75); + --pressed: lch(5% 0 75); + --pressed-text: lch(95% 5 75); + --text: lch(95% 5 75); + --box-text: white; + --light-text: lch(65% 5 75); + --light-box-text: lch(85% 5 75); + } } h1, h2, h3, h4, h5, h6{ font-family: "Shippori Mincho", serif; + margin: 0; } body{ + display: flex; flex-direction: column; margin: 0; - background: var(--light-back); - display: flex; - flex-direction: column; - flex-shrink: 0; + background: var(--back); + background-attachment: fixed; height: 100vh; } -header{ - background-color: var(--light-block); - margin: 0; - border-style: outset; - border-top: 0; border-left: 0; border-right: 0; - border-color: var(--light-border); +a{ + color: var(--text); } -footer{ - background-color: var(--light-block); - border-style: outset; - border-bottom: 0; border-left: 0; border-right: 0; - border-color: var(--light-border); - width: 100%; - padding: 0; - margin-top: auto; +span{ + color: var(--text); +} + +/* HEADER */ + +header{ + background: var(--block); + margin: 0; + border-style: outset; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thick-border); } .top-buttons{ - display: flex; - margin: 0; - padding: 1.2rem; + display: flex; flex: auto; justify-content: center; + padding: .6rem; column-gap: .6rem; max-height: fit-content; - + max-width: 64rem; + margin: auto; } -.top-buttons a{ - flex: auto; - display: flex; - list-style: none; - justify-content: center; - align-items: center; +.nav-button{ + display: flex; flex-direction: column; justify-content: center; + background-color: var(--block); + border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem; position: relative; - border-style: outset; - border-color: var(--light-border); - border-radius: 1.2rem; - border-width: 0.3rem; + flex: auto; } - - -.top-buttons a:nth-child(2){ - flex: none; - +.nav-button a{ + text-decoration: none; } -.top-buttons a:nth-child(2):before{ - content: ""; - position: absolute; - bottom: 0; - right: 0; - border-style: outset; - border-color: var(--light-border); - border-radius: 1.2rem; - border-width: 0.3rem; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; +.nav-button li{ + list-style: none; } -/* .top-buttons a::before{ - content: ""; - position: absolute; - bottom: 0; - right: 0; - border-style: outset; - border-color: var(--light-border); - border-radius: 1.2rem; - border-width: 0.3rem; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; -} */ - -.top-buttons li{ - vertical-align: center; +.nav-text{ + color: var(--text); + text-align: center; } -.top-buttons img{ +.nav-text::before{ + content: "-" +} + +.nav-text::after{ + content: "-" +} + +.nav-button img{ display: block; + margin: auto; + } +.nav-button.home{ + flex: none; +} + +.nav-button.home::before{ + content: ""; + position: absolute; + bottom: 0; + right: 0; + border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; border-width: 0.3rem; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + pointer-events: none; +} + +/* HOME BUTTON */ + +.home-main{ + margin-top: clamp(0rem, calc(8vw - 8rem), 2.4rem); margin-bottom: auto; + background: var(--block); +} + +.home-title{ + padding: 4vh; + text-align: center; + border-style: outset; border-color: var(--thick-border); + background: radial-gradient(lch(35% 90 50) 50%, lch(10% 90 50)); + position: relative; +} + +.home-title h1{ + text-shadow: 1px 1px 2px var(--text-shadow); + color: lch(90% 25 85); +} + +.home-title h1::before{ + content: "-" +} + +.home-title h1::after{ + content: "-" +} + +.home-title h3{ + margin-top: 1.2rem; + color: lch(90% 25 85); +} + +.home-title p{ + position: absolute; + right: .3rem; + bottom: .3rem; + font-size: small; + margin: 0; + color: lch(80% 50 50); +} + +.home-body{ + + padding-top: 1.2rem; +} + +.home-body h2{ + text-align: center; +} + +.home-body p{ + margin-left: 1.2rem; margin-right: 1.2rem; margin-top: .6rem; + text-align: center; +} + +.home-nav{ + display: flex; gap: 1.2rem; + border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0; + margin: 1.2rem; margin-bottom: 0; + padding-bottom: 1.2rem; +} + +.home-button{ + display: flex; flex-direction: column; list-style: none; justify-content: center; align-items: center; + flex: auto; + position: relative; + border-style: outset; border-color: var(--thick-border); border-radius: 1.2rem; + text-decoration: none; + background-color: var(--block); + padding-top: 1.2rem; padding-bottom: 1.2rem; +} + + /* SEARCH BAR */ .search-bar{ + display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; max-width: 64rem; width: 100%; - height: 2rem; - margin-left: auto; - margin-right: auto; - background-color: var(--light-block); - border-style: outset; - border-top: 0; - border-color: var(--light-border); - display: flex; - flex-shrink: 0; - flex-direction: column; - justify-content: center; - align-items: center; + height: 3.6rem; + margin-left: auto; margin-right: auto; + background-color: var(--block); + border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px; } .search-items{ - display: inline-block; position: relative; + height: 2.4rem; width: 80%; } .search-items input{ - all: unset; - background-color: white; + /* all:unset; */ + font: unset; + color: unset; + background-color: var(--search-back); width: 100%; - height: 1.2rem; + height: 2.4rem; + border-style: solid; border-color: var(--thin-border); border-width: 1px; } +/* SEARCH RESULTS */ + #search-results{ - display: flex; - flex-direction: column; - margin: auto; - position: absolute; - width: 100%; + display: flex; flex-direction: column; + width: 100%; } #search-results h2{ @@ -151,86 +236,109 @@ footer{ } #search-results ul{ - background-color: white; + background-color: var(--search-back); padding-left: 0; margin-top: 0; list-style: none; z-index: 1; + border-style: solid; border-color: var(--thin-border); border-width: 1px; border-top: 0; border-bottom: 0; } -main{ - background-color: var(--light-block); - max-width: 64rem; - width: 100%; - margin-left: auto; - margin-right: auto; +#search-results li{ + display: flex; align-items: center; + min-height: 2.4rem; + border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0; } -main ul{ - margin: 0; - display: flex; - flex-direction: column; - padding-left: 0; -} - -h1{ - margin: 0; -} - -h2{ - margin: 0; - font- -} - -h3{ - margin: 0; -} - -a{ +#search-results a{ text-decoration: none; } -/* HOME BUTTONS */ +.search-icon{ + min-width: 2.6rem; +} -.home-title{ - padding: 4.8rem; +.search-icon img{ + margin-left: auto; + height: 1.8rem; + display: block; +} + +.search-icon.album img{ + display: block; + height: 1.2rem; + margin-left: auto; +} + +.search-type{ + font-size: small; + color: var(--light-box-text); + margin-left: .3rem; + min-width: 2.6rem; +} + +/* MAIN PAGE */ + +main{ + background-color: var(--block); + max-width: 64rem; + width: 100%; + margin-left: auto; margin-right: auto; +} + +main ul{ + display: flex; flex-direction: column; + margin: 0; + padding-left: 0; +} + +/* FOOTER */ + +footer{ + background: linear-gradient(90deg, lch(10% 90 50), lch(35% 90 50) 25%, lch(35% 90 50) 75%, lch(10% 90 50)); + width: 100%; + padding: 0; + margin-top: auto; +} + +.footer-content{ + display: flex; justify-content: center; flex-wrap: wrap; align-items: center; + max-width: 64rem; + margin-left: auto; margin-right: auto; margin-bottom: .3rem; margin-top: .3rem; +} + +.footer-content span{ + font-size: calc(.7rem + .3vw); + margin-left: 1.2rem; margin-right: 1.2rem; text-align: center; - border-style: solid; - border-top: 0; border-left: 0; border-right: 0; + color: lch(90% 25 85); } -.home-nav{ - display: flex; - flex: auto; - justify-content: space-around; +.footer-content a{ + color: lch(90% 25 85); } -.home-button{ - border-style: outset; - border-color: var(--light-border); - border-radius: 1.2rem; - flex: auto; +.copyright{ display: flex; - flex-direction: column; - list-style: none; + flex-wrap: wrap; + column-gap: .3em; justify-content: center; - align-items: center; - position: relative; + margin-left: 1.2rem; margin-right: 1.2rem; } - +.copyright span{ + margin: 0; + text-align: center; +} /* INDEX LISTS */ .album-list{ - display: flex; - flex-direction: column; + display: flex; flex-direction: column; } .category-list{ - display: flex; - flex-wrap: wrap; - align-content: flex-start; - flex-basis: 51%; + display: flex; flex-wrap: wrap; align-content: flex-start; flex-basis: 51%; + justify-content: center; } .album-icon{ @@ -238,87 +346,57 @@ a{ align-self: center; } +/* INDEX BLOCKS */ + +.sort-box{ + margin-top: 1.2rem; margin-left: 1.2rem; margin-right: 1.2rem; +} + +.sort-box.album:not(:first-child){ + margin-top: 2.4rem; +} + +.sort-box:last-child{ + margin-bottom: 1.2rem; +} + +.sort-box.category{ + width: 29.6rem; + background: var(--block); +} + +.sort-header{ + border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-width: 1px; border-color: var(--thin-border); +} + +.sort-header.album{ + display: flex; align-items: center; + font-size: calc(.7rem + .4vw); + background: var(--block); + position: sticky; + top: 0; + gap: .6rem; +} + .date{ - margin-top: .3rem; margin-left: 2.4rem; + margin-top: .6rem; margin-left: 2.4rem; + font-size: small; } /* INDEX ENTRIES */ -.sort-box{ - border-style: solid; - border-left: 0; border-right: 0; border-top: 0; - border-color: black; - border-width: 1px; -} - -.sort-box h2{ - color: black; -} - -.sort-box.album{ - margin-bottom: 1.2rem; - display: flex; - align-items: center; - border-style: solid; - border-top: 0; border-left: 0; border-right: 0; - border-width: 1px; - margin: 1.2rem; margin-bottom: 0; - background: var(--light-block); - position: sticky; - top: 0; - gap: .6rem -} - -.date{ - font-size: small; -} - -.sort-box.category{ - gap: 1.2rem; - margin-left: auto; margin-right: auto; margin-bottom: 1.2rem; - width: 24rem; - -} - -.sort-box.category{ - margin: 1.2rem; - margin-bottom: 0px; - background: var(--light-block); -} - .entry-box{ + display: flex; align-items: center; list-style: none; min-height: 1.8rem; - display: flex; - border-radius: 1.2rem 0% 0% 1.2rem; - background: linear-gradient(90deg, var(--light-box) 90%, rgba(255, 255, 255, 0) 100%); + background-color: var(--box); + border-radius: 1.2rem; + margin-top: .6rem; + text-decoration: none; } .entry-box.song{ - margin-top: .6rem; margin-bottom: .6rem; margin-left: 1.2rem; margin-right: 1.2rem; -} - -.entry-box.motif{ - margin: 1.2rem; margin-bottom: 0; - justify-content: center; - align-items: center; -} - -.entry-box.song li{ - display: flex; - flex: auto; - flex-wrap: nowrap; - justify-content: left; - /* align-content: bottom; */ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - height: 1.8rem; - -} - -.entry-box.song span{ - align-self: center; + margin-bottom: .6rem; } .entry-box.song.empty{ @@ -326,105 +404,113 @@ a{ background: none; } -.entry-box.motif span{ - color: black; - vertical-align: middle; +.entry-box li{ + display: flex; flex: auto; flex-wrap: nowrap; align-items: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + height: 1.8rem; +} +.entry-box.motif li{ + justify-content: center; + flex-grow: 0; +} + +.entry-box.song li{ + justify-content: left; } .entry-box.motif::before{ - content: "b"; + content: ""; + max-width: 3.6rem; + flex-grow: 1; visibility: hidden; margin-right: auto; } .motif-name{ text-align: center; - color: black; + color: var(--box-text); + } .track-number{ min-width: 2.4rem; margin-left: .6rem; - color: black; + color: var(--box-text); } .track-name{ - color: black; + color: var(--box-text); } .track-name-jp{ - margin-left: 1.2rem; - color: gray; + margin-left: 2.4rem; + color: var(--light-box-text); } .empty{ - color: gray; + color: var(--light-text); } .clip-count{ - color: black; - flex-wrap: nowrap; + color: var(--box-text); display: inline; - text-align: right; - min-width: 0; - margin-right: 1.2rem; - min-width: 1.6rem; + text-align: left; + min-width: 2.4rem; + margin-left: .24rem; } .count-icon{ width: 1.2rem; height: 1.2rem; margin-left: auto; display: block; - align-self: center; } /* SONG INDEX ALBUM DROPDOWNS */ -.sort-box.album label{ - cursor: pointer; -} - .collapse{ display: none; } -.sort-list{ +.sort-list.album{ display: none; } -.sort-box.album > *{ +.sort-header.album > *{ + cursor: pointer; pointer-events: none; } -.sort-box.album::after{ +.sort-header.album::after{ content: "▼"; margin-left: auto; + color: var(--thin-border); } -.collapse:checked ~ .sort-list{ +.collapse:checked ~ .sort-list.album{ display:initial } -.collapse:checked ~ .sort-box.album::after{ +.collapse:checked ~ .sort-header.album::after{ content: "▲"; + color: var(--thin-border); } /* ENTRY PAGE TITLES */ .title-box{ margin: 1.2rem; margin-bottom: 1.2rem; - background: var(--light-box); + background: var(--box); } .eng-title{ - display: flex; - align-items: center; - /* margin-bottom: .6rem; */ + display: flex; align-items: center; + color: var(--box-text); } .title-box img{ - align-self: center; margin-left: .6rem; } @@ -435,27 +521,27 @@ a{ } .title-jp{ - color: gray; + color: var(--light-box-text); margin-right: 1.2rem; padding-bottom: .6rem; text-align: right; } .title-album{ - margin-left: auto; margin-right: .7rem; margin-top: .7rem; - align-self: flex-start; + display: flex; align-items: center; + margin-left: auto; } .title-album img{ margin: 0; + display: block; + margin-right: .6rem; } /* ENTRY PAGE DETAILS */ .track-info{ - display: flex; - flex-wrap: wrap; - justify-content: space-around; - gap: 1.2rem; + display: flex; flex-wrap: wrap; justify-content: space-around; + row-gap: 1.2rem; } .track-info li{ @@ -463,9 +549,9 @@ a{ } .songpage-detail{ - display: flex; - flex-direction: column; - min-width: 16rem; + display: flex; flex-direction: column; + min-width: 18rem; + margin-left: 1.2rem; margin-right: 1.2rem; } .songpage-detail ul{ @@ -477,9 +563,35 @@ a{ margin-bottom: 1.2rem; } +.songpage-detail li{ + display: flex; align-items: baseline; gap: .6rem; + flex-wrap: wrap; +} + +.songpage-credit{ + font-size: small; + min-width: 4.2rem; + text-align: right; +} + +.songpage-img{ + display: inline-block; + height: 1.2rem; + align-self: flex-end; +} + +.song-location{ + display: flex; flex-direction: column; + width: 100%; + justify-content: center; +} +.song-location h2{ + text-align: center; + margin-bottom: 1.2rem; +} + .entrypage-connections{ - display: flex; - flex-direction: column; + display: flex; flex-direction: column; width: 100%; justify-content: center; } @@ -489,17 +601,29 @@ a{ } .entrypage-clip{ + display: flex; flex-wrap: wrap-reverse; margin-bottom: 1.2rem; - display: flex; - flex-wrap: wrap-reverse; - column-gap: 2rem; + column-gap: 2.4rem; row-gap: .6rem; justify-content: center; align-items: center; } +.connection-icon{ + display: inline-block; + width: 1.2rem; height: 1.2rem; +} + .clip-pointer{ + display: flex; justify-content: center; align-items: center; width: 18rem; - /* white-space: nowrap; */ + gap: .3rem; text-align: center; } +.clip-album-icon{ + height: 1.2rem; +} + +.clip-pointer a{ + flex-shrink: 1; +} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index d3b1e7c..1edac48 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,7 +4,7 @@ {% block title required %}{% endblock %} - Eorzea Songbook - + {%block sheet %}{% endblock %} @@ -16,7 +16,10 @@ {% block nav %}{% include 'nav.html' %}{% endblock %} -
{% block content required %}{% endblock %}
+ {% block main %}
{% endblock %} + {% block content required %}{% endblock %} + {% block main2 %}
{% endblock %} + {% block footer %}{% include 'footer.html' %}{% endblock %} diff --git a/templates/footer.html b/templates/footer.html index 4e3b3b0..1e64702 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,5 +1,16 @@
-

The footer will be in here, when it's ready.

- +
\ No newline at end of file diff --git a/templates/home.html b/templates/home.html index 4da6bb2..7001a14 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,22 +1,84 @@ {% extends 'base.html' %} {% block title %}Home{% endblock %} {% block nav %}{% endblock %} +{% block main %}{% endblock %} {% block content %} -

The Eorzea Songbook

+
-

Explore the music of Final Fantasy XIV! Discover the recurring melodies in your favorite songs, or take a closer look at the motifs and their appearances.

+
+

The Eorzea Songbook

+

An unofficial library of motifs in the Final Fantasy XIV soundtrack.

+

Last updated: 26/06/2023

+
-
- - Song Index -

Songs

-
+ -{% block footer %}{% endblock %} + + Motif Index + + +
+ +
+

What's a motif?

+

Have you ever been playing Final Fantasy XIV and thought you heard a song that sounds familiar?

+

When a specific part of a song is used repeatedly to point out a character, location, or idea, it's called a motif (or leitmotif). Sometimes, a motif that was created in one song can be used in another, to draw a connection between two ideas in the story.

+

For example, here's what you hear when you enter the city of Ishgard.

+
+ + + Song Icon + Solid + +
+

And here's what you hear in Ishgard at night. The same notes are played, but this time it's slowed down, and played on just a piano. Sounds much easier to fall asleep to, doesn't it?

+
+ + + Song Icon + Night in the Brume + +
+

Here's another song that plays in Ishgard at night - when you're in the Pillars, where the wealthy residents live. Notice how there are more instruments; a grand pipe organ and booming drums. A fancier tune for fancier people, but still using the same melody.

+
+ + + Song Icon + Nobility Sleeps + +
+

Or this song, which plays during an important battle. Now our motif sounds like we're getting ready for a fight!

+
+ + + Song Icon + Heroes Never Die + +
+

Once we know that this is melody represents Ishgard, the same tune can be used in all kinds of different songs to connect them back to that city. The composers of Final Fantasy XIV can tell us all kinds of things about Ishgard, just by changing up how they play the motif.

+

Final Fantasy XIV's soundtrack is full of these! Not just for cities, but for dungeons, characters, expansions, and more. Discover the repeated melodies in your favorite songs, or check the motif pages to see where they show up.

+
+ + + +
+ +{% block main2 %}{% endblock %} {% endblock %} \ No newline at end of file diff --git a/templates/motif.html b/templates/motif.html index 2947fec..b8902e6 100644 --- a/templates/motif.html +++ b/templates/motif.html @@ -6,21 +6,20 @@ {% block content %}
- Motif Icon

{{ name }}

+ Motif Icon

{{ name }}

+
    + {% for song_id, motif_id, song, feature in clip_info if feature%} + {% include "motifpageclipget.html" %} + {% endfor %} +

Featured In:

    - {% for song_id, motif_id, song in clip_info %} -
  • - - {{ song }} -
  • + {% for song_id, motif_id, song, feature in clip_info if not feature %} + {% include "motifpageclipget.html" %} {% endfor %}
diff --git a/templates/motifindex.html b/templates/motifindex.html index b5ba372..21bafe6 100644 --- a/templates/motifindex.html +++ b/templates/motifindex.html @@ -6,16 +6,16 @@ {% block content %}
{% for category_id, name in category_info %} -
-

{{ name }}

-
    +
    +

    {{ name }}

    + diff --git a/templates/motifpageclipget.html b/templates/motifpageclipget.html new file mode 100644 index 0000000..af4f8e9 --- /dev/null +++ b/templates/motifpageclipget.html @@ -0,0 +1,13 @@ +
  • + + + Song Icon + {{ song }} + {% for album_song_id, album_code in album_info if album_song_id == song_id %} + {{ album_code }} + {% endfor %} + +
  • \ No newline at end of file diff --git a/templates/nav.html b/templates/nav.html index a6035ee..729ce62 100644 --- a/templates/nav.html +++ b/templates/nav.html @@ -1,16 +1,31 @@
    -
    + {% endblock %} diff --git a/templates/songindex.html b/templates/songindex.html index c9ef346..3138e30 100644 --- a/templates/songindex.html +++ b/templates/songindex.html @@ -9,22 +9,23 @@ {% block content %}
    {% for album_id, name, date, code in album_info %} +
    -
    {% endfor %}
    diff --git a/templates/songpageclipget.html b/templates/songpageclipget.html new file mode 100644 index 0000000..b3a8b72 --- /dev/null +++ b/templates/songpageclipget.html @@ -0,0 +1,10 @@ +
  • + + + Motif Icon + {{ motif }} + +
  • \ No newline at end of file