diff --git a/app/static/css/style.css b/app/static/css/style.css index 0896e25..1d359cd 100755 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -59,11 +59,19 @@ audio{ border-bottom: 1px solid black; } +.locations_list .row img{ + max-height: 2em; +} + .locations_list .row div:first-of-type { width: 5%; } +.locations_list .row div:nth-of-type(2) { + width: 10%; +} + .locations_list .row div:last-of-type{ } @@ -254,6 +262,12 @@ margin: 4em 0; box-sizing: border-box; } +#distance_close{ + font-family: 'Courier New', Courier, monospace; + +} + + #button_group button, #button_group select{ background-color: grey; color: white; @@ -261,8 +275,56 @@ margin: 4em 0; border: 1px solid white; border-radius: 2em; padding: 0.8em; + vertical-align: middle; + margin-top: 0.5em; + cursor: pointer; +} + +#button_group select option{ + padding: 0; + margin: 0; + vertical-align: middle; } #button_group img{ width: 1em; + margin-right: 0.2em; + vertical-align: middle; +} + + + +/* COMPAS */ + +.compass { + position: relative; + width: 320px; + height: 320px; + border-radius: 50%; + /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); */ + margin: auto; +} + + + +.compass > .compass-circle, +.compass > .my-point { + position: absolute; + width: 90%; + height: 90%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: transform 0.1s ease-out; +} + +.compass > .compass-circle svg{ + width: 100%; + height: 100%; +} + + + +.start-btn { + margin-bottom: auto; } \ No newline at end of file diff --git a/app/templates/home.html b/app/templates/home.html index 2b31bc4..e80a739 100755 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -3,10 +3,20 @@ {% block main %}