Compare commits

...

7 Commits

Author SHA1 Message Date
Effie
3e3d318134 Starts on suggest page 2023-06-28 14:34:55 +10:00
Effie
1d9ad9d3db removes radio buttons and puts a buncha javascript innit 2023-06-27 00:49:29 +10:00
Effie
5ca3aaa44f makes the song index behave properly 2023-06-26 23:23:43 +10:00
Effie
319ff01051 adds dark mkode and pretties things up more 2023-06-26 22:46:11 +10:00
Effie
361e595ae1 Tidies up aesthetic, ticks off to-do list things 2023-06-22 15:49:05 +10:00
Effie
5a2ff83bea Pretties up the song and motif pages. 2023-06-18 16:50:33 +10:00
Effie
03df74d985 Changes the appearance of the index pages dramatically 2023-06-18 13:40:58 +10:00
35 changed files with 1781 additions and 289 deletions

170
app.py
View File

@ -1,5 +1,7 @@
import flask import flask
import sqlite3 import sqlite3
import csv
import datetime
app = flask.Flask('songbook') app = flask.Flask('songbook')
@ -8,7 +10,7 @@ app = flask.Flask('songbook')
# @app.route('/') # @app.route('/')
# def page(): # def page():
# db = sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True) # db = openbook()
# return flask.render_template('.html', # return flask.render_template('.html',
# ) # )
@ -34,33 +36,89 @@ def searchpage():
searchargs = flask.request.args['q'] searchargs = flask.request.args['q']
searchresult = db.execute(''' if searchargs:
select searchresult = db.execute('''
'song', id, name select
from 'song', id, name, NULL, instr(lower(name),lower(?))
song from
where song
name where
like name
'%' || ? || '%' like
union all '%' || ? || '%'
select union all
'album', id, name select
from 'album', id, name, code, instr(lower(name),lower(?))
album from
where album
name where
like name
'%' || ? || '%' like
''', '%' || ? || '%'
(searchargs,searchargs) union all
).fetchall() select
'motif', id, name, NULL, instr(lower(name),lower(?))
from
motif
where
name
like
'%' || ? || '%'
order by
5
limit
10
''',
(searchargs,)*6
).fetchall()
return flask.render_template('', else:
album_info=album_info, searchresult = []
song_info=song_info
return flask.render_template('searchresults.html',
searchresult=searchresult
) )
@app.route('/suggestsearch')
def suggestsearchpage():
db = openbook()
searchargs = flask.request.args['q']
if searchargs:
searchresult = db.execute('''
select
'song', id, name, instr(lower(name),lower(?))
from
song
where
name
like
'%' || ? || '%'
union all
select
'motif', id, name, instr(lower(name),lower(?))
from
motif
where
name
like
'%' || ? || '%'
order by
4
limit
10
''',
(searchargs,)*4
).fetchall()
else:
searchresult = []
return flask.render_template('suggestsearchresults.html',
searchresult=searchresult
)
@ -79,7 +137,7 @@ def songindex():
album_info = db.execute(''' album_info = db.execute('''
select select
id, name, date id, name, date, code
from from
album album
order by order by
@ -131,6 +189,10 @@ def motifindex():
category.id category.id
''').fetchall() ''').fetchall()
category_info.append(
('', 'Misc.')
)
motif_info = db.execute(''' motif_info = db.execute('''
select select
id, name, category, count(clip.motif_id) id, name, category, count(clip.motif_id)
@ -213,7 +275,7 @@ def motifpage(id):
clip_info = db.execute(''' clip_info = db.execute('''
select select
song_id, motif_id, song.name song_id, motif_id, song.name, feature
from from
clip clip
join join
@ -229,9 +291,31 @@ def motifpage(id):
(id,) (id,)
).fetchall() ).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', return flask.render_template('motif.html',
name=name, name=name,
clip_info=clip_info clip_info=clip_info,
album_info=album_info
) )
# SONG PAGES # SONG PAGES
@ -243,16 +327,16 @@ def songpage(id):
# query song name # query song name
name, = db.execute(''' song_info = db.execute('''
select select
name name, name_jp
from from
song song
where where
id = ? id = ?
''', ''',
(id,) (id,)
).fetchone() ).fetchall()
# query album info # query album info
@ -317,9 +401,29 @@ def songpage(id):
).fetchall() ).fetchall()
return flask.render_template('song.html', return flask.render_template('song.html',
name=name, song_info=song_info,
id=id, id=id,
album_info=album_info, album_info=album_info,
clip_info=clip_info, clip_info=clip_info,
artist_info=artist_info artist_info=artist_info
) )
@app.route('/suggest')
def suggestpage():
return flask.render_template('suggest.html',
)
@app.route('/sent', methods=['POST'])
def sentpage():
with open ('suggestions.csv', 'a', newline='') as suggestlog:
logwriter = csv.writer(suggestlog)
logwriter.writerow([
datetime.datetime.now().isoformat(),
flask.request.form['suggest-description'],
])
return flask.render_template('sent.html',
)

View File

@ -1,2 +0,0 @@
sudo rm -r /var/www/eorzea-songbook
sudo cp -r public/ /var/www/eorzea-songbook

63
static/albumicons/1.0.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305523mm"
viewBox="0 0 11.213148 6.1305523"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="album icons.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.5705387"
inkscape:cx="22.965722"
inkscape:cy="123.79084"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.134108,-0.05239776)">
<path
id="rect1491"
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" />
<path
d="m -13.444384,1.0630206 v 4.0404049 h -0.868163 V 2.044183 q -0.07166,0.06339 -0.170877,0.1212673 -0.09646,0.055122 -0.206705,0.1019747 -0.110243,0.044097 -0.228754,0.07717 -0.118511,0.030317 -0.234267,0.044097 V 1.6555765 q 0.338998,-0.099219 0.63941,-0.2535588 0.300412,-0.1543401 0.542946,-0.3389971 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11800" />
<path
d="m -11.735618,5.1723274 q -0.214973,0 -0.358289,-0.1322916 -0.143316,-0.1322916 -0.143316,-0.3252168 0,-0.1984373 0.146072,-0.3252167 0.148828,-0.1267795 0.369314,-0.1267795 0.223242,0 0.363802,0.1295355 0.143315,0.1267795 0.143315,0.3224607 0,0.2011935 -0.146071,0.3307289 -0.143316,0.1267795 -0.374827,0.1267795 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11802" />
<path
d="m -9.3571255,5.1723274 q -1.4111105,0 -1.4111105,-1.9816175 0,-1.0280157 0.380339,-1.5654502 0.383094,-0.5401905 1.1079415,-0.5401905 1.3780372,0 1.3780372,2.0146903 0,1.003211 -0.3775822,1.5378894 -0.3748261,0.5346785 -1.077625,0.5346785 z m 0.038585,-3.4230443 q -0.5649952,0 -0.5649952,1.4193782 0,1.3366961 0.5539709,1.3366961 0.5401906,0 0.5401906,-1.3780372 0,-1.3780371 -0.5291663,-1.3780371 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11804" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

63
static/albumicons/2.0.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305513mm"
viewBox="0 0 11.213148 6.1305513"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="album icons.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.5705387"
inkscape:cx="22.965722"
inkscape:cy="123.79084"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.134108,-7.2047088)">
<path
id="rect1497"
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" />
<path
d="m -14.377315,11.533645 h 1.675693 v 0.722091 h -2.629294 V 11.95808 q 0,-0.303168 0.101974,-0.542946 0.101975,-0.242535 0.256315,-0.432704 0.15434,-0.192925 0.336241,-0.338997 0.184657,-0.148828 0.350022,-0.267339 0.173632,-0.124024 0.303168,-0.237023 0.132291,-0.112999 0.220486,-0.2232417 0.09095,-0.1129991 0.135048,-0.2259981 0.0441,-0.1157551 0.0441,-0.2452906 0,-0.2535589 -0.143316,-0.3830944 -0.143316,-0.1295355 -0.438216,-0.1295355 -0.509874,0 -0.97565,0.405143 V 8.570865 q 0.515386,-0.333485 1.163063,-0.333485 0.300412,0 0.537435,0.079926 0.239778,0.07717 0.405142,0.223242 0.165365,0.1460719 0.250803,0.3555336 0.0882,0.2067055 0.0882,0.4630205 0,0.2728513 -0.08544,0.485069 -0.08268,0.2122179 -0.223242,0.3858509 -0.137803,0.173632 -0.319704,0.319704 -0.181901,0.143316 -0.377582,0.278364 -0.132292,0.09371 -0.256315,0.187413 -0.121268,0.09095 -0.214974,0.181901 -0.09371,0.08819 -0.148828,0.173632 -0.05512,0.08544 -0.05512,0.162609 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11858" />
<path
d="m -11.557851,12.324638 q -0.214974,0 -0.358289,-0.132291 -0.143316,-0.132292 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325217 0.148828,-0.126779 0.369314,-0.126779 0.223242,0 0.363801,0.129535 0.143316,0.12678 0.143316,0.322461 0,0.201193 -0.146072,0.330729 -0.143316,0.126779 -0.374826,0.126779 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11860" />
<path
d="m -9.1793587,12.324638 q -1.4111103,0 -1.4111103,-1.981617 0,-1.0280159 0.380338,-1.5654504 0.3830948,-0.5401906 1.1079423,-0.5401906 1.3780372,0 1.3780372,2.01469 0,1.003211 -0.3775822,1.53789 -0.3748261,0.534678 -1.077625,0.534678 z m 0.038585,-3.4230441 q -0.5649952,0 -0.5649952,1.4193781 0,1.336696 0.5539709,1.336696 0.5401906,0 0.5401906,-1.378037 0,-1.3780371 -0.5291663,-1.3780371 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11862" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

60
static/albumicons/2.5.svg Normal file
View File

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305513mm"
viewBox="0 0 11.213148 6.1305513"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="album icons.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.5705387"
inkscape:cx="11.062756"
inkscape:cy="103.06568"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.134108,-14.226025)">
<path
id="rect1503"
style="fill:#5c812b;stroke-width:0.264583"
d="m -15.134108,14.226025 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" />
<path
d="m -14.284987,18.55496 h 1.675694 v 0.722092 h -2.629295 v -0.297656 q 0,-0.303168 0.101974,-0.542947 0.101975,-0.242534 0.256315,-0.432703 0.15434,-0.192926 0.336241,-0.338998 0.184657,-0.148828 0.350022,-0.267339 0.173633,-0.124023 0.303168,-0.237022 0.132292,-0.112999 0.220486,-0.223242 0.09095,-0.112999 0.135048,-0.225998 0.0441,-0.115755 0.0441,-0.245291 0,-0.253559 -0.143316,-0.383094 -0.143316,-0.129536 -0.438216,-0.129536 -0.509874,0 -0.97565,0.405143 v -0.766188 q 0.515386,-0.333485 1.163063,-0.333485 0.300412,0 0.537435,0.07993 0.239778,0.07717 0.405143,0.223242 0.165364,0.146072 0.250802,0.355533 0.0882,0.206706 0.0882,0.463021 0,0.272851 -0.08544,0.485069 -0.08268,0.212218 -0.223242,0.38585 -0.137803,0.173633 -0.319704,0.319705 -0.181901,0.143316 -0.377582,0.278363 -0.132292,0.09371 -0.256315,0.187413 -0.121268,0.09095 -0.214974,0.181901 -0.09371,0.08819 -0.148828,0.173633 -0.05512,0.08544 -0.05512,0.162608 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11866" />
<path
d="m -11.465523,19.345954 q -0.214973,0 -0.358289,-0.132292 -0.143316,-0.132291 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325216 0.148828,-0.12678 0.369314,-0.12678 0.223242,0 0.363802,0.129536 0.143315,0.126779 0.143315,0.32246 0,0.201194 -0.146072,0.330729 -0.143315,0.12678 -0.374826,0.12678 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11868" />
<path
d="m -10.299703,19.175077 v -0.74414 q 0.4051426,0.248047 0.8626509,0.248047 0.3445093,0 0.5374345,-0.162609 0.1956813,-0.165364 0.1956813,-0.446484 0,-0.587043 -0.8295784,-0.587043 -0.3059243,0 -0.7055553,0.04685 l 0.148828,-2.20486 h 2.0918607 v 0.711068 h -1.4276465 l -0.055122,0.790993 q 0.2122177,-0.01654 0.3665579,-0.01654 0.6090924,0 0.9536017,0.319705 0.3445093,0.319705 0.3445093,0.859895 0,0.598068 -0.4106551,0.978407 -0.4106551,0.377582 -1.113454,0.377582 -0.5705074,0 -0.959114,-0.170877 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11870" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

63
static/albumicons/3.0.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305504mm"
viewBox="0 0 11.213148 6.1305504"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="album icons.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.5705387"
inkscape:cx="22.965722"
inkscape:cy="101.38526"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.134108,-21.509332)">
<path
id="rect1509"
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" />
<path
d="m -15.284064,26.430823 v -0.757921 q 0.396875,0.289388 0.926041,0.289388 0.333485,0 0.518142,-0.143316 0.187413,-0.143316 0.187413,-0.399631 0,-0.264583 -0.23151,-0.407899 -0.228754,-0.143316 -0.631141,-0.143316 h -0.366558 v -0.66697 h 0.338997 q 0.771701,0 0.771701,-0.512629 0,-0.482313 -0.592556,-0.482313 -0.396875,0 -0.771701,0.256315 v -0.711068 q 0.416167,-0.209461 0.970138,-0.209461 0.606337,0 0.942578,0.272851 0.338997,0.272851 0.338997,0.708311 0,0.774457 -0.785481,0.970138 v 0.01378 q 0.418923,0.05236 0.661457,0.305924 0.242535,0.250803 0.242535,0.617361 0,0.553971 -0.405143,0.876431 -0.405143,0.322461 -1.118966,0.322461 -0.611849,0 -0.994943,-0.198437 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11874" />
<path
d="m -11.604705,26.62926 q -0.214974,0 -0.358289,-0.132292 -0.143316,-0.132291 -0.143316,-0.325216 0,-0.198438 0.146072,-0.325217 0.148828,-0.12678 0.369314,-0.12678 0.223242,0 0.363801,0.129536 0.143316,0.126779 0.143316,0.322461 0,0.201193 -0.146072,0.330728 -0.143316,0.12678 -0.374826,0.12678 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11876" />
<path
d="m -9.2262128,26.62926 q -1.4111102,0 -1.4111102,-1.981618 0,-1.028015 0.380338,-1.56545 0.3830948,-0.54019 1.1079423,-0.54019 1.3780372,0 1.3780372,2.01469 0,1.003211 -0.3775822,1.537889 -0.3748261,0.534679 -1.0776251,0.534679 z m 0.038585,-3.423044 q -0.5649952,0 -0.5649952,1.419378 0,1.336696 0.5539709,1.336696 0.5401905,0 0.5401905,-1.378037 0,-1.378037 -0.5291662,-1.378037 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11878" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

60
static/albumicons/3.5.svg Normal file
View File

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305523mm"
viewBox="0 0 11.213148 6.1305523"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="album icons.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.5705387"
inkscape:cx="11.062756"
inkscape:cy="103.06568"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.134108,-28.845033)">
<path
id="rect1515"
style="fill:#9f6800;stroke-width:0.264583"
d="m -15.134108,28.845034 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" />
<path
d="m -15.191735,33.766525 v -0.75792 q 0.396875,0.289388 0.926041,0.289388 0.333485,0 0.518142,-0.143316 0.187413,-0.143316 0.187413,-0.399631 0,-0.264583 -0.23151,-0.407899 -0.228754,-0.143316 -0.631141,-0.143316 h -0.366558 v -0.66697 h 0.338997 q 0.771701,0 0.771701,-0.512629 0,-0.482313 -0.592556,-0.482313 -0.396875,0 -0.771701,0.256314 v -0.711067 q 0.416167,-0.209461 0.970138,-0.209461 0.606337,0 0.942578,0.272851 0.338997,0.272851 0.338997,0.708311 0,0.774457 -0.785481,0.970138 v 0.01378 q 0.418923,0.05236 0.661458,0.305924 0.242534,0.250803 0.242534,0.61736 0,0.553971 -0.405143,0.876432 -0.405143,0.322461 -1.118966,0.322461 -0.611849,0 -0.994943,-0.198438 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11882" />
<path
d="m -11.512376,33.964963 q -0.214974,0 -0.358289,-0.132292 -0.143316,-0.132291 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325216 0.148828,-0.12678 0.369314,-0.12678 0.223242,0 0.363801,0.129536 0.143316,0.126779 0.143316,0.32246 0,0.201194 -0.146072,0.330729 -0.143316,0.12678 -0.374826,0.12678 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11884" />
<path
d="m -10.346556,33.794086 v -0.74414 q 0.4051425,0.248047 0.8626508,0.248047 0.3445093,0 0.5374345,-0.162609 0.1956813,-0.165364 0.1956813,-0.446484 0,-0.587043 -0.8295784,-0.587043 -0.3059242,0 -0.7055552,0.04685 l 0.148828,-2.20486 h 2.0918606 v 0.711068 h -1.4276465 l -0.055122,0.790993 q 0.2122178,-0.01654 0.3665579,-0.01654 0.6090924,0 0.9536017,0.319705 0.3445093,0.319705 0.3445093,0.859895 0,0.598068 -0.410655,0.978407 -0.4106551,0.377582 -1.1134541,0.377582 -0.5705073,0 -0.9591139,-0.170877 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11886" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

60
static/albumicons/4.0.svg Normal file
View File

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305542mm"
viewBox="0 0 11.213148 6.1305542"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="album icons.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.5705387"
inkscape:cx="11.062756"
inkscape:cy="103.06568"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.134108,-36.023543)">
<path
id="rect1521"
style="fill:#910009;stroke-width:0.264583"
d="m -15.134108,36.023544 h 7.2131476 c 1.108,0 2,0.892 2,2 v 2.130553 c 0,1.108 -0.892,2 -2,2 h -7.2131476 c -1.108,0 -2,-0.892 -2,-2 v -2.130553 c 0,-1.108 0.892,-2 2,-2 z" />
<path
d="m -12.875254,37.122359 v 2.491491 h 0.474045 v 0.650434 h -0.474045 v 0.810286 h -0.79375 v -0.810286 h -1.722546 v -0.68075 q 0.228754,-0.256315 0.474045,-0.559484 0.24529,-0.305924 0.474045,-0.628385 0.228754,-0.32246 0.424435,-0.647677 0.198437,-0.327973 0.336241,-0.625629 z m -1.736327,2.491491 h 0.942577 v -1.380793 q -0.09646,0.179145 -0.209461,0.363802 -0.112999,0.181901 -0.237023,0.361046 -0.124023,0.176388 -0.250802,0.344509 -0.12678,0.165364 -0.245291,0.311436 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11890" />
<path
d="m -11.497217,41.143472 q -0.214974,0 -0.35829,-0.132292 -0.143316,-0.132292 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325217 0.148828,-0.126779 0.369314,-0.126779 0.223242,0 0.363802,0.129536 0.143316,0.126779 0.143316,0.32246 0,0.201194 -0.146072,0.330729 -0.143316,0.12678 -0.374826,0.12678 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11892" />
<path
d="m -9.1187251,41.143472 q -1.4111099,0 -1.4111099,-1.981618 0,-1.028016 0.380338,-1.56545 0.3830945,-0.540191 1.107942,-0.540191 1.3780372,0 1.3780372,2.014691 0,1.003211 -0.3775822,1.537889 -0.3748261,0.534679 -1.0776251,0.534679 z m 0.038585,-3.423045 q -0.5649953,0 -0.5649953,1.419379 0,1.336696 0.553971,1.336696 0.5401905,0 0.5401905,-1.378038 0,-1.378037 -0.5291662,-1.378037 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11894" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

63
static/albumicons/5.0.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305504mm"
viewBox="0 0 11.213148 6.1305504"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="album icons.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.5705387"
inkscape:cx="22.965722"
inkscape:cy="123.79084"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.134108,-43.778434)">
<path
id="rect1527"
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" />
<path
d="m -15.249613,48.727482 v -0.74414 q 0.405143,0.248046 0.862652,0.248046 0.344509,0 0.537434,-0.162608 0.195681,-0.165365 0.195681,-0.446484 0,-0.587044 -0.829578,-0.587044 -0.305924,0 -0.705555,0.04685 l 0.148828,-2.204859 h 2.09186 v 0.711067 h -1.427646 l -0.05512,0.790993 q 0.212218,-0.01654 0.366558,-0.01654 0.609093,0 0.953602,0.319704 0.344509,0.319705 0.344509,0.859896 0,0.598068 -0.410655,0.978406 -0.410655,0.377582 -1.113454,0.377582 -0.570507,0 -0.959114,-0.170876 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11898" />
<path
d="m -11.639155,48.898358 q -0.214974,0 -0.35829,-0.132291 -0.143316,-0.132292 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325217 0.148828,-0.126779 0.369314,-0.126779 0.223242,0 0.363802,0.129535 0.143316,0.12678 0.143316,0.322461 0,0.201193 -0.146072,0.330729 -0.143316,0.126779 -0.374826,0.126779 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11900" />
<path
d="m -9.2606633,48.898358 q -1.4111097,0 -1.4111097,-1.981617 0,-1.028016 0.380338,-1.56545 0.3830943,-0.540191 1.1079418,-0.540191 1.3780371,0 1.3780371,2.01469 0,1.003211 -0.3775821,1.53789 -0.3748261,0.534678 -1.0776251,0.534678 z m 0.038585,-3.423044 q -0.5649953,0 -0.5649953,1.419378 0,1.336696 0.553971,1.336696 0.5401905,0 0.5401905,-1.378037 0,-1.378037 -0.5291662,-1.378037 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11902" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

34
static/albumicons/5.5.svg Normal file
View File

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305542mm"
viewBox="0 0 11.213148 6.1305542"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1"
transform="translate(17.134108,-50.485358)">
<path
id="rect1533"
style="fill:#46658b;fill-opacity:1;stroke-width:0.264583"
d="m -15.134108,50.485359 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" />
<path
d="m -15.157284,55.43441 v -0.74414 q 0.405142,0.248046 0.862651,0.248046 0.344509,0 0.537434,-0.162608 0.195682,-0.165364 0.195682,-0.446484 0,-0.587044 -0.829579,-0.587044 -0.305924,0 -0.705555,0.04685 l 0.148828,-2.204859 h 2.091861 v 0.711067 h -1.427647 l -0.05512,0.790994 q 0.212217,-0.01654 0.366557,-0.01654 0.609093,0 0.953602,0.319705 0.344509,0.319704 0.344509,0.859895 0,0.598068 -0.410655,0.978406 -0.410655,0.377582 -1.113454,0.377582 -0.570507,0 -0.959113,-0.170876 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11906" />
<path
d="m -11.546827,55.605286 q -0.214974,0 -0.35829,-0.132291 -0.143316,-0.132292 -0.143316,-0.325217 0,-0.198437 0.146072,-0.325217 0.148828,-0.126779 0.369314,-0.126779 0.223242,0 0.363802,0.129535 0.143316,0.12678 0.143316,0.322461 0,0.201194 -0.146072,0.330729 -0.143316,0.126779 -0.374826,0.126779 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11908" />
<path
d="m -10.381008,55.43441 v -0.74414 q 0.405143,0.248046 0.8626513,0.248046 0.3445093,0 0.5374345,-0.162608 0.1956813,-0.165364 0.1956813,-0.446484 0,-0.587044 -0.8295784,-0.587044 -0.3059242,0 -0.7055547,0.04685 l 0.148828,-2.204859 h 2.0918601 v 0.711067 h -1.4276465 l -0.055121,0.790994 q 0.2122177,-0.01654 0.3665578,-0.01654 0.6090925,0 0.9536017,0.319705 0.3445093,0.319704 0.3445093,0.859895 0,0.598068 -0.410655,0.978406 -0.4106551,0.377582 -1.1134541,0.377582 -0.5705073,0 -0.9591143,-0.170876 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11910" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

63
static/albumicons/6.0.svg Normal file
View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="11.213148mm"
height="6.1305542mm"
viewBox="0 0 11.213148 6.1305542"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="album icons.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="3.5705387"
inkscape:cx="22.965722"
inkscape:cy="123.79084"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(17.134108,-57.506678)">
<path
id="rect1539"
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" />
<path
d="m -12.523855,61.243054 q 0,0.292144 -0.101975,0.545702 -0.101975,0.253559 -0.283876,0.440972 -0.1819,0.184657 -0.432703,0.292144 -0.250803,0.104731 -0.548459,0.104731 -0.333485,0 -0.598068,-0.124023 -0.261827,-0.124024 -0.443728,-0.35829 -0.181901,-0.237022 -0.278364,-0.578776 -0.09646,-0.341753 -0.09646,-0.774457 0,-0.509873 0.124023,-0.923284 0.12678,-0.416168 0.35829,-0.711068 0.234266,-0.2949 0.564995,-0.454752 0.330729,-0.162608 0.74414,-0.162608 0.457508,0 0.711067,0.107487 v 0.727603 q -0.300412,-0.170876 -0.655945,-0.170876 -0.220486,0 -0.399631,0.08544 -0.179145,0.08544 -0.30868,0.242535 -0.12678,0.157096 -0.201194,0.380338 -0.07166,0.220486 -0.07717,0.493337 h 0.01654 q 0.28112,-0.388606 0.829579,-0.388606 0.24529,0 0.443728,0.08819 0.198437,0.08819 0.338997,0.250803 0.14056,0.159852 0.21773,0.38585 0.07717,0.225998 0.07717,0.501606 z m -0.851627,0.05512 q 0,-0.636653 -0.520898,-0.636653 -0.118511,0 -0.214974,0.0441 -0.09646,0.0441 -0.165364,0.124024 -0.0689,0.07993 -0.107487,0.190169 -0.03583,0.107487 -0.03583,0.239778 0,0.146072 0.03858,0.272851 0.03858,0.12678 0.107487,0.223242 0.07166,0.09371 0.16812,0.148829 0.09646,0.05512 0.214974,0.05512 0.118511,0 0.212218,-0.04685 0.09646,-0.04961 0.162608,-0.135048 0.0689,-0.08819 0.104731,-0.209462 0.03583,-0.124023 0.03583,-0.270095 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11914" />
<path
d="m -11.581278,62.626603 q -0.214974,0 -0.358289,-0.132292 -0.143316,-0.132291 -0.143316,-0.325216 0,-0.198438 0.146072,-0.325217 0.148828,-0.12678 0.369314,-0.12678 0.223242,0 0.363801,0.129536 0.143316,0.126779 0.143316,0.322461 0,0.201193 -0.146072,0.330729 -0.143316,0.126779 -0.374826,0.126779 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11916" />
<path
d="m -9.2027857,62.626603 q -1.4111103,0 -1.4111103,-1.981617 0,-1.028016 0.380338,-1.565451 0.3830948,-0.54019 1.1079423,-0.54019 1.3780372,0 1.3780372,2.01469 0,1.003211 -0.3775822,1.53789 -0.3748261,0.534678 -1.077625,0.534678 z m 0.038585,-3.423044 q -0.5649952,0 -0.5649952,1.419378 0,1.336696 0.5539709,1.336696 0.5401906,0 0.5401906,-1.378037 0,-1.378037 -0.5291663,-1.378037 z"
style="font-weight:bold;font-size:5.64444px;font-family:Ebrima;-inkscape-font-specification:'Ebrima Bold';text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.581085"
id="path11918" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -0,0 +1,9 @@
.nav-button.motif{
background-color: var(--pressed);
border-style: inset;
}
.nav-text.motif{
color: var(--pressed-text);
text-shadow: 1px 1px 2px black;
}

BIN
static/motificon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

64
static/script.js Normal file
View File

@ -0,0 +1,64 @@
// Check for hash on load.
window.addEventListener('load', (event) => {
const preclicked = window.location.hash.slice(1);
if (! preclicked) return;
const albumheader = document.getElementById(preclicked);
if (albumheader){
albumheader.classList.add('open');
}
});
// Scroll to search result album
function albumselect(code){
const albumheader = document.getElementById(code);
for (const other of document.querySelectorAll('.sort-header.album.open')){
other.classList.remove('open');
}
albumheader.classList.add('open');
document.getElementById('search-input').value = '';
document.getElementById('search-results').replaceChildren();
}
// Toggle header when clicked
function albumHeaderClick(clickevent){
const albumheader = clickevent.target;
if (albumheader.classList.contains('open')){
albumheader.classList.remove('open');
history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${window.location.search}`);
}
else{
for (const other of document.querySelectorAll('.sort-header.album.open')){
other.classList.remove('open');
}
albumheader.classList.add('open');
window.location.hash = albumheader.id;
}
}
// Fill out form with suggest search result
function suggestform1(id, desc){
document.getElementById('connection-1').valueAsNumber = id;
document.getElementById('connection-1-desc').valueAsNumber = desc;
document.getElementById('search-input-suggest-1').value = '';
document.getElementById('search-results-1').replaceChildren();
}
// Mutually exclusive audio playback
function onlyPlayOneIn(container) {
container.addEventListener("play", function(event) {
audio_elements = container.getElementsByTagName("audio")
for(i=0; i < audio_elements.length; i++) {
audio_element = audio_elements[i];
if (audio_element !== event.target) {
audio_element.pause();
}
}
}, true);
}
document.addEventListener("DOMContentLoaded", function() {
onlyPlayOneIn(document.body);
});

BIN
static/songbook.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -0,0 +1,9 @@
.nav-button.song{
background-color: var(--pressed);
border-style: inset;
}
.nav-text.song{
color: var(--pressed-text);
text-shadow: 1px 1px 2px black;
}

BIN
static/songicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 580 B

View File

@ -1,180 +1,667 @@
/* body{ :root{
max-width:50rem;margin-left:auto;margin-right:auto; --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{ body{
display: flex; flex-direction: column;
margin: 0; margin: 0;
} background: var(--back);
background-attachment: fixed;
header{ height: 100vh;
background-color: lch(80% 25 79);
margin: 0;
border-style: outset;
}
.top-buttons{
display: flex;
padding-left: 0;
margin: 0;
padding: 2rem;
column-gap: 1rem;
}
.top-buttons li{
flex: auto;
border-style: outset;
list-style: none;
text-align: center;
}
.top-buttons li:nth-child(2){
flex: none;
}
main{
background-color: lch(80% 25 79);
max-width: 50rem;
margin-left: auto;
margin-right: auto;
}
main ul{
margin: 0;
}
h1{
margin: 0;
}
h2{
margin: 0;
} }
a{ a{
color: var(--text);
}
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; flex: auto; justify-content: center;
padding: .6rem;
column-gap: .6rem;
max-height: fit-content;
max-width: 64rem;
margin: auto;
}
.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;
flex: auto;
}
.nav-button a{
text-decoration: none; text-decoration: none;
} }
.album-list{ .nav-button li{
display: flex; list-style: none;
flex-direction: column;
gap: 1rem;
} }
.album-box{ .nav-text{
gap: 1rem; color: var(--text);
text-align: center;
} }
.album-box h2{ .nav-text::before{
color: white; content: "-"
border-style: solid;
border-color: lch(25% 40 45);
margin: 1rem;
margin-bottom: 0px;
position: sticky;
top: 0px;
background: lch(25% 40 45);
} }
.album-box ul{ .nav-text::after{
display: flex; 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; flex: auto;
flex-direction: column; 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: 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{
position: relative;
height: 2.4rem;
width: 80%;
}
.search-items input{
/* all:unset; */
font: unset;
color: unset;
background-color: var(--search-back);
width: 100%;
height: 2.4rem;
border-style: solid; border-color: var(--thin-border); border-width: 1px;
}
/* SEARCH RESULTS */
.search-results{
display: flex; flex-direction: column;
width: 100%;
cursor: pointer;
}
.search-results h2{
display: none;
}
.search-results ul{
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;
}
.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;
}
.search-results a{
text-decoration: none;
}
.search-icon{
min-width: 2.6rem;
}
.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;
}
.search-bar::-webkit-search-cancel-button{
color: var(--text)
}
/* 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; padding-left: 0;
} }
.song-box{ /* FOOTER */
list-style: none;
min-height: 1.5rem; footer{
margin: 1rem; background: linear-gradient(90deg, lch(10% 90 50), lch(35% 90 50) 25%, lch(35% 90 50) 75%, lch(10% 90 50));
margin-bottom: 0; width: 100%;
margin-left: 4rem; padding: 0;
background: lch(25% 40 45); 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;
color: lch(90% 25 85);
}
.footer-content a{
color: lch(90% 25 85);
}
.copyright{
display: flex; display: flex;
flex: auto;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: left; column-gap: .3em;
column-gap: 1rem; justify-content: center;
align-content: bottom; margin-left: 1.2rem; margin-right: 1.2rem;
white-space: nowrap;
overflow: hidden;
} }
.song-box span{ .copyright span{
color: white; margin: 0;
text-align: bottom; text-align: center;
} }
/* INDEX LISTS */
.track-name-jp{ .album-list{
display: flex; flex-direction: column;
}
.clip-count{
margin-left: auto;
min-width: 2rem;
text-align: right;
} }
.category-list{ .category-list{
display: flex; display: flex; flex-wrap: wrap; align-content: flex-start; flex-basis: 51%;
flex-wrap: wrap;
align-content: flex-start;
flex-basis: 51%;
gap: 1rem;
}
.category-box{
gap: 1rem;
margin-left: auto;
margin-right: auto;
width: 24rem;
}
.category-box h2{
color: white;
border-style: solid;
border-color: lch(25% 40 45);
margin: 1rem;
margin-bottom: 0px;
background: lch(25% 40 45);
}
.category-box ul{
display: flex;
flex: initial;
flex-direction: column;
padding-left: 0;
}
.motif-box{
list-style: none;
min-height: 1.5rem;
margin: 1rem;
margin-bottom: 0;
background: lch(25% 40 45);
display: flex;
flex: auto;
justify-content: center; justify-content: center;
} }
.motif-box span{ .album-icon{
color: white; display: inline-block;
vertical-align: middle; align-self: center;
} }
.motif-name::before{ /* INDEX BLOCKS */
content: "T";
margin-right: 2rem; .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: .6rem; margin-left: 2.4rem;
font-size: small;
}
/* INDEX ENTRIES */
.entry-box{
display: flex; align-items: center;
list-style: none;
min-height: 1.8rem;
background-color: var(--box);
border-radius: 1.2rem;
margin-top: .6rem;
text-decoration: none;
}
.entry-box.song{
margin-bottom: .6rem;
}
.entry-box.song.empty{
margin-top: 0; margin-bottom: 0; margin-right: 2.4rem;
background: none;
}
.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: "";
max-width: 3.6rem;
flex-grow: 1;
visibility: hidden; visibility: hidden;
margin-right: auto;
} }
.motif-name{ .motif-name{
text-align: center; text-align: center;
margin: auto; color: var(--box-text);
} }
.motif-count{ .track-number{
position: absolute, right; min-width: 2.4rem;
margin-left: .6rem;
color: var(--box-text);
}
.track-name{
color: var(--box-text);
}
.track-name-jp{
margin-left: 2.4rem;
color: var(--light-box-text);
}
.empty{
color: var(--light-text);
}
.clip-count{
color: var(--box-text);
display: inline;
text-align: left;
min-width: 2.4rem;
margin-left: .24rem;
}
.count-icon{
width: 1.2rem; height: 1.2rem;
margin-left: auto;
display: block;
}
/* SONG INDEX ALBUM DROPDOWNS */
.sort-list.album{
display: none;
}
.sort-header.album > *{
cursor: pointer;
pointer-events: none;
}
.sort-header.album::after{
content: "▼";
margin-left: auto;
color: var(--thin-border);
}
.sort-header.album.open::after{
content: "▲";
}
.sort-header.album.open ~ .sort-list.album{
display:initial
}
/* ENTRY PAGE TITLES */
.title-box{
margin: 1.2rem; margin-bottom: 1.2rem;
background: var(--box);
}
.eng-title{
display: flex; align-items: center;
color: var(--box-text);
}
.title-box img{
margin-left: .6rem;
}
.title-box h1{
margin-left: .6rem;
min-width: 0;
font-size: calc(1.2rem + .6vw);
}
.title-jp{
color: var(--light-box-text);
margin-right: 1.2rem; padding-bottom: .6rem;
text-align: right; text-align: right;
width: 2rem; }
.title-album{
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;
row-gap: 1.2rem;
}
.track-info li{
list-style: none;
}
.songpage-detail{
display: flex; flex-direction: column;
min-width: 18rem;
margin-left: 1.2rem; margin-right: 1.2rem;
}
.songpage-detail ul{
gap: .6rem;
}
.songpage-detail h2{
text-align: center;
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;
width: 100%;
justify-content: center;
}
.entrypage-connections h2{
text-align: center;
margin-bottom: 1.2rem;
}
.entrypage-clip{
display: flex; flex-wrap: wrap-reverse;
margin-bottom: 1.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;
gap: .3rem;
text-align: center;
}
.clip-album-icon{
height: 1.2rem;
}
.clip-pointer a{
flex-shrink: 1;
}
/* SUGGEST PAGE */
.suggestbox{
display: flex; flex-wrap: wrap; justify-content: center; gap: 4.8rem;
margin-top: 2.4rem;
}
.suggestbox h2{
width: 100%;
text-align: center;
}
.search-items.suggest{
width: 20rem;
}
.suggest-desc{
width: 80%;
}
.suggest-desc textarea{
width: 100%;
}
.suggest-button{
width: 100%;
}
#connection-1{
display: none;
}
#connection-1-desc{
display: none;
} }

4
suggestions.csv Normal file
View File

@ -0,0 +1,4 @@
2023-06-27T15:35:08.245616,Testing the form
2023-06-27T15:35:34.195039,testing again
2023-06-27T21:54:35.835288,"Hello from Moss and Nat's
"
1 2023-06-27T15:35:08.245616 Testing the form
2 2023-06-27T15:35:34.195039 testing again
3 2023-06-27T21:54:35.835288 Hello from Moss and Nat's

View File

@ -1,16 +0,0 @@
{% extends "base.html" %}
{% block title %}{{ album_info[0] }}{% endblock %}
{% block content %}
<h1>{{ album_info[0] }}</h1>
<p>Released: {{ album_info[1] }}
<!-- List songs -->
<ul>
{% for song_id, track, name, name_jp in song_info %}
<li><a href="{{ url_for('songpage', id=song_id) }}">#{{ track }}: {{name}} / {{name_jp}}</li></a>
{% endfor %}
</ul>
{% endblock %}

View File

@ -4,17 +4,23 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{% block title required %}{% endblock %} - Eorzea Songbook</title> <title>{% block title required %}{% endblock %} - Eorzea Songbook</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
<meta name="description" content="Listen to the motifs of Final Fantasy XIV's soundtrack." /> <meta name="description" content="An unofficial library of the motifs in Final Fantasy XIV's soundtrack." />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Shippori+Mincho|Shippori+Mincho:bold|Zen+Maru+Gothic|Zen+Maru+Gothic:bold" />
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="" /> {%block sheet %}{% endblock %}
<link rel="icon" type="image/png" href="{{ url_for('static', filename='songbook.png') }}" />
<script src="https://unpkg.com/htmx.org@1.9.2" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script> <script src="https://unpkg.com/htmx.org@1.9.2" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</head> </head>
<body> <body>
{% block nav %}{% include 'nav.html' %}{% endblock %} {% block nav %}{% include 'nav.html' %}{% endblock %}
<main>{% block content required %}{% endblock %}</main> {% block main %}<main>{% endblock %}
{% block content required %}{% endblock %}
{% block main2 %}</main>{% endblock %}
{% block footer %}{% include 'footer.html' %}{% endblock %} {% block footer %}{% include 'footer.html' %}{% endblock %}
</body> </body>
</html> </html>

11
templates/clipget.html Normal file
View File

@ -0,0 +1,11 @@
<li class="entrypage-clip">
<audio
controls
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
</audio>
<span class="clip-pointer">
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="connection-icon"/>
<a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a>
</span>
</li>

View File

@ -1,5 +1,16 @@
<footer> <footer>
<p> The footer will be in here, when it's ready. </p> <div class="footer-content">
<span>
<a href="{{ url_for('suggestpage') }}"> Suggest a new connection </a>
</span>
<span>
<a href="#" class="top-of-page">↑Top of page↑</a>
</span>
<div class="copyright">
<span>Audio is</span>
<span>©2010-2023 SQUARE ENIX CO., LTD.</span>
<span>All Rights Reserved.</span>
</div>
</div>
</footer> </footer>

View File

@ -1,13 +1,84 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %}Home{% endblock %} {% block title %}Home{% endblock %}
{% block nav %}{% endblock %} {% block nav %}{% endblock %}
{% block main %}{% endblock %}
{% block content %} {% block content %}
<h1>The Eorzea Songbook</h1> <main class="home-main">
<a href="{{ url_for('songindex') }}">View Songs</a> <hgroup class="home-title">
<h1>The Eorzea Songbook</h1>
<h3>An unofficial library of motifs in the Final Fantasy XIV soundtrack.</h3>
<p>Last updated: 26/06/2023</p>
</hgroup>
<a href="{{ url_for('motifindex') }}">View Motifs</a> <div class="home-nav">
<a href="{{ url_for('songindex') }}" class="home-button">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Index" />
<h2 class="nav-text">Songs</h2>
</a>
{% block footer %}{% endblock %} <a href="{{ url_for('motifindex') }}" class="home-button">
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Index" />
<h2 class="nav-text">Motifs</h2>
</a>
</div>
<div class="home-body">
<h2>What's a motif?</h2>
<p>Have you ever been playing Final Fantasy XIV and thought you heard a song that sounds familiar?</p>
<p>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.</p>
<p>For example, here's what you hear when you enter the city of Ishgard.</p>
<div class="entrypage-clip">
<audio
controls
src = "{{ url_for('static', filename='clip/') }}0288-024.flac" type="audio/flac">
</audio>
<span class="clip-pointer">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
<a href = "{{ url_for('songpage', id=288) }}"> Solid </a>
</span>
</div>
<p>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?</p>
<div class="entrypage-clip">
<audio
controls
src = "{{ url_for('static', filename='clip/') }}0317-024.flac" type="audio/flac">
</audio>
<span class="clip-pointer">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
<a href = "{{ url_for('songpage', id=317) }}"> Night in the Brume </a>
</span>
</div>
<p>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.</p>
<div class="entrypage-clip">
<audio
controls
src = "{{ url_for('static', filename='clip/') }}0294-024.flac" type="audio/flac">
</audio>
<span class="clip-pointer">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
<a href = "{{ url_for('songpage', id=294) }}"> Nobility Sleeps </a>
</span>
</div>
<p>Or this song, which plays during an important battle. Now our motif sounds like we're getting ready for a fight!</p>
<div class="entrypage-clip">
<audio
controls
src = "{{ url_for('static', filename='clip/') }}0337-024.flac" type="audio/flac">
</audio>
<span class="clip-pointer">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
<a href = "{{ url_for('songpage', id=337) }}"> Heroes Never Die </a>
</span>
</div>
<p>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.</p>
<p>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.</p>
</div>
</main>
{% block main2 %}{% endblock %}
{% endblock %} {% endblock %}

View File

@ -0,0 +1,11 @@
<!-- {% macro icon(type) -%}
<img src="{{ url_for('static', filename='{0}icon.png'.format(type)) }}" alt='{{ type}} icon' class='connection-icon'>
{%- endmacro %}
{% macro link(type) -%}
{{ url_for('{0}page'.format(type), id=) }}"> {{ motif }}
{%- endmacro %}
-->
<!-- {{ icon(type) }}
{{ link(type) }} -->

View File

@ -2,22 +2,25 @@
{% block title %}{{ name }}{% endblock %} {% block title %}{{ name }}{% endblock %}
{% block content %} {% block sheet %}<link rel="stylesheet" href="{{ url_for('static', filename='motifbuttonpressed.css') }}" />{% endblock %}
<h1> Motif: {{ name }} </h1>
{% block content %}
<hgroup class="title-box eng-title">
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="title-icon"/><h1> {{ name }} </h1>
</hgroup>
<!-- Clips --> <!-- Clips -->
<p>Clips: </p> <div class="entrypage-connections">
<ul> <ul>
{% for song_id, motif_id, song in clip_info %} {% for song_id, motif_id, song, feature in clip_info if feature %}
<li> {% include "motifpageclipget.html" %}
<audio {% endfor %}
controls </ul>
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac"> <h2>Featured In:</h2>
</audio> <ul>
<a href="/song/{{ song_id }}">{{ song }}</a> {% for song_id, motif_id, song, feature in clip_info if not feature %}
</li> {% include "motifpageclipget.html" %}
{% endfor %} {% endfor %}
</ul> </ul>
</div>
{% endblock %} {% endblock %}

View File

@ -1,35 +1,25 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% block title %}Motif Index{% endblock %} {% block title %}Motif Index{% endblock %}
{% block sheet %}<link rel="stylesheet" href="{{ url_for('static', filename='motifbuttonpressed.css') }}" />{% endblock %}
{% block content %} {% block content %}
<section class="category-list"> <section class="category-list">
{% for category_id, name in category_info %} {% for category_id, name in category_info %}
<div class="category-box"> <div class="sort-box category">
<h2>{{ name }}</h2> <h2 class="sort-header category">{{ name }}</h2>
<ul> <ul class="sort-list category">
{% for motif_id, motif, category, count in motif_info if category == category_id %} {% for motif_id, motif, category, count in motif_info if category == category_id %}
<a href="{{ url_for('motifpage', id=motif_id) }}"><li class="motif-box"> <a href="{{ url_for('motifpage', id=motif_id) }}" class="entry-box motif">
<span class="motif-name">{{ motif }}</span> <li>
{% if count %} <div class="motif-name">{{ motif }}</div>
<span class="motif-count">x{{ count }}</span> </li>
{% endif %} <img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="count-icon"/>
</li></a> {% if count %}<div class="clip-count"> {{ count }}</div>{% endif %}
</a>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
{% endfor %} {% endfor %}
<div class="category-box">
<h2>Misc.</h2>
<ul>
{% for motif_id, motif, category, count in motif_info if category == '' %}
<a href="{{ url_for('motifpage', id=motif_id) }}"><li class="motif-box">
<span class="motif-name">{{ motif }}</span>
<span class="motif-count">{% if count %} x{{ count }} {% endif %}</span>
</li></a>
{% endfor %}
</ul>
</div>
</section> </section>
{% endblock %} {% endblock %}

View File

@ -0,0 +1,13 @@
<li class="entrypage-clip">
<audio
controls
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
</audio>
<span class="clip-pointer">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" class="connection-icon"/>
<a href="{{ url_for('songpage', id=song_id ) }}">{{ song }}</a>
{% for album_song_id, album_code in album_info if album_song_id == song_id %}
<img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" class="clip-album-icon"/>
{% endfor %}
</span>
</li>

View File

@ -1,20 +1,39 @@
<header> <header>
<nav> <nav>
<ul class="top-buttons"> <ul class="top-buttons">
<li><a href="{{ url_for('songindex') }}">Songs</a></li> <div class="nav-button song">
<li><a href="{{ url_for('homepage') }}">Home</a></li> <a href="{{ url_for('songindex') }}">
<li><a href="{{ url_for('motifindex') }}">Motifs</a></li> <li><img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Index" class="nav-image"/>
<h3 class="nav-text song">Songs</h3>
</li></a>
</div>
<div class="nav-button home">
<a href="{{ url_for('homepage') }}"><li>
<img src="{{ url_for('static', filename='songbook.png') }}" alt="Home" class="nav-image" />
</li></a>
</div>
<div class="nav-button motif">
<a href="{{ url_for('motifindex') }}"><li>
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Index" class="nav-image" />
<h3 class="nav-text motif">Motifs</h3>
</li></a>
</div>
</ul> </ul>
</nav> </nav>
<input
type="search"
name="q"
placeholder="Search..."
hx-get="/search"
hx-trigger="search"
hx-target="#search-results"
/>
<div id="search-results"></div>
</header> </header>
<div class="search-bar">
<div class="search-items">
<input
id="search-input"
type="search"
name="q"
autocomplete="off"
placeholder="Search..."
hx-get="/search"
hx-trigger="keyup changed delay:500ms, search"
hx-target="#search-results-header"
/>
<div id="search-results-header" class="search-results header"></div>
</div>
</div>

View File

@ -0,0 +1,30 @@
<h2>Search Results:</h2>
<ul>
{% for desc, id, name, code, _ in searchresult %}
{% if desc == 'song' %}
<a href="{{ url_for('songpage', id=id) }}"><li>
<span class="search-icon">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon"/>
</span>
<span class="search-type">Song:</span>
{{ name }}
</li></a>
{% elif desc == 'album' %}
<a href="{{ url_for('songindex', _anchor=code) }}" onclick="albumselect('{{ code }}')"><li>
<span class="search-icon album">
<img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}"/>
</span>
<span class="search-type">Album:</span>
{{ name }}
</li></a>
{% elif desc == 'motif' %}
<a href="{{ url_for('motifpage', id=id) }}"><li>
<span class="search-icon">
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon"/>
</span>
<span class="search-type">Motif:</span>
{{ name }}
</li></a>
{% endif %}
{% endfor %}
</ul>

10
templates/sent.html Normal file
View File

@ -0,0 +1,10 @@
{% extends "base.html" %}
{% block title %}Suggestion sent{% endblock %}
{% block content %}
{% endblock %}

View File

@ -1,40 +1,89 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}{{ name }}{% endblock %} {% block title %}
{% for name, _ in song_info %}{{ name }}{% endfor %}
{% endblock %}
{% set clipmode = "motif" %}
{% block sheet %}<link rel="stylesheet" href="{{ url_for('static', filename='songbuttonpressed.css') }}" />{% endblock %}
{% block content %} {% block content %}
<h1>Now Playing: {{ id }}. {{ name }} ({% for _, _, _, album_code in album_info %}{{ album_code }}{% if not loop.last %}, {% endif %}{% endfor %}) <hgroup class="title-box">
</h1> <div class="eng-title">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon" />
{% for name, name_jp in song_info %}
<h1>{{ name }}</h1>
{% endfor %}
<h3 class="title-album">
{% for track, _, _, album_code in album_info %}
<img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" />{% if not loop.last %}{% endif %}
{% endfor %}
</h3>
</div>
{% for name, name_jp in song_info %}
{% if name_jp %}
<h2 class="title-jp">{{name_jp}}</h2>
{% endif %}
{% endfor %}
</hgroup>
<!-- Artist info --> <!-- Artist info -->
<h2>Artist: </h2> <div class="track-info" >
<ul> <div class="songpage-detail">
{% for name, name_rm, credit in artist_info %} <h2 >Artist: </h2>
<li>{{ name_rm }} ({{ name }}): {{ credit }}</li> <ul>
{% endfor %} {% for name, name_rm, credit in artist_info %}
</ul> <li>
<span class="songpage-credit">{{ credit }}:</span>
<span>{{ name }}</span>
<span>{% if name_rm %}{{ name_rm }} {% endif %}</span>
</li>
{% endfor %}
</ul>
</div>
<!-- Album info --> <!-- Album info -->
<h2>Album: </h2> <div class="songpage-detail">
<ul> <h2>Album: </h2>
{% for album_id, track, album_name, album_code in album_info %} <ul>
<li><a href="{{ url_for('albumpage', id=album_id) }}">{{ album_name }}</a> #{{ track }}</li> {% for album_id, track, album_name, album_code in album_info %}
{% endfor %} <li>
</ul> <img src="{{ url_for('static', filename='albumicons/') }}{{ album_code }}.svg" alt="{{ album_code }}" class="songpage-img"/>
<a href="{{ url_for('songindex', _anchor='') }}{{ album_code }}">{{ album_name }}</a> - Track #{{ track }}
</li>
{% endfor %}
</ul>
</div>
<!-- Clips --> <!-- Location -->
<h2>Clips: </h2> {% if description %}
<ul>
{% for song_id, motif_id, motif in clip_info %} <div class="song-location">
<li> <h2>Used In:</h2>
<audio </div>
controls
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac"> {% endif %}
</audio>
<a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a> <!-- Motifs -->
</li>
{% endfor %} {% if clip_info %}
</ul> <div class="entrypage-connections">
<h2>Motifs Featured: </h2>
<ul>
{% for song_id, motif_id, motif in clip_info %}
{% set type = 'motif' %}
{% include "clipget.html" %}
{% endfor %}
</ul>
</div>
{% else %}
<div class="entrypage-connections">
<h2>No connections yet. Suggest one?</h3>
</div>
{% endif %}
</div>
{% endblock %} {% endblock %}

View File

@ -4,21 +4,38 @@
{% block title %}Song Index{% endblock %} {% block title %}Song Index{% endblock %}
{% block sheet %}<link rel="stylesheet" href="{{ url_for('static', filename='songbuttonpressed.css') }}" />{% endblock %}
{% block content %} {% block content %}
<section class="album-list"> <section class="album-list">
{% for album_id, name, date in album_info %} {% for album_id, name, date, code in album_info %}
<div class="album-box"> <div class="sort-box album">
<h2>{{ name }}</h2> <hgroup id="{{ code }}" class="sort-header album" onclick="albumHeaderClick(event)">
<ul> <img src="{{ url_for('static', filename='albumicons/') }}{{ code }}.svg" alt="{{ code }}" class="album-icon"/>
<h2>{{ name }}</h2>
</hgroup>
<ul class="sort-list album">
<span class="date">Released: {{ date }}</span>
{% for song_id, album, track, name, name_jp, count in song_info if album_id == album %} {% for song_id, album, track, name, name_jp, count in song_info if album_id == album %}
<a href="{{ url_for('songpage', id=song_id) }}"><li class="song-box"> {% if count %}
<span class="track-number">#{{ track }}: </span> <a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song full">
<span class="track-name">{{ name }}</span> <li>
{% if name_jp %} <span class="track-number full">#{{ track }}: </span>
<span class="track-name-jp">{{ name_jp }}</span> <span class="track-name full">{{ name }}</span>
{% endif %} {% if name_jp %}<span class="track-name-jp full">{{ name_jp }}</span>{% endif %}
<span class="clip-count">{% if count > 0 %} x{{ count }} {% endif %}</span> </li>
</li></a> <img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon" class="count-icon"/>
<span class="clip-count"> {{ count }} </span>
</a>
{% else %}
<a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song empty">
<li>
<span class="track-number empty">#{{ track }}: </span>
<span class="track-name empty">{{ name }}</span>
{% if name_jp %}<span class="track-name-jp empty">{{ name_jp }}</span>{% endif %}
</li>
</a>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>

41
templates/suggest.html Normal file
View File

@ -0,0 +1,41 @@
{% extends "base.html" %}
{% block title %}Suggest a connection{% endblock %}
{% block content %}
<p>If you know about a shared motif that you can't find on the website, you can tell me about it here. Just pick the two songs that share a motif - or the motif itself, if it already has a page - and tell me what to listen out for.</p>
<form action="/sent" method="post" >
<div class="suggestbox">
<div class="search-items suggest">
<h2>Song / Motif 1</h2>
<input
id="search-input-suggest-1"
type="search"
name="q"
autocomplete="off"
placeholder="Search..."
hx-get="/suggestsearch"
hx-trigger="keyup changed delay:500ms, search"
hx-target="#search-results-1"
/>
<div id="search-results-1" class="search-results"></div>
</div>
<input type="number" name="connection-1-desc" id="connection-1-desc"/>
<input type="number" name="connection-1" id="connection-1" min="1" max="733"/>
<div class="suggest-desc">
<textarea name="suggest-description">
Suggest a different connection!
</textarea>
</div>
<div class="suggest-button">
<input type="submit" />
</div>
</div>
</form>
{% endblock %}

View File

@ -0,0 +1,22 @@
<h2>Search Results:</h2>
<ul>
{% for desc, id, name, _ in searchresult %}
{% if desc == 'song' %}
<li onclick="suggestform('{{ id }}', 1)">
<span class="search-icon">
<img src="{{ url_for('static', filename='songicon.png') }}" alt="Song Icon"/>
</span>
<span class="search-type">Song:</span>
{{ name }}
</li>
{% elif desc == 'motif' %}
<li onclick="suggestform('{{ id }}', 2)">
<span class="search-icon">
<img src="{{ url_for('static', filename='motificon.png') }}" alt="Motif Icon"/>
</span>
<span class="search-type">Motif:</span>
{{ name }}
</li></a>
{% endif %}
{% endfor %}
</ul>