"woof" > "map" :)

main
furo 2023-08-09 17:58:55 +02:00
parent 0529faf9bf
commit 23bfd45d52
2 changed files with 9 additions and 8 deletions

View File

@ -68,16 +68,16 @@ span.incorrect {
color: #E04F53;
}
.woof {
.map {
position: relative;
width: 100%;
}
.woof > img {
.map > img {
width: 100%;
}
.woof > p {
.map > p {
position: absolute;
bottom: 1rem;
user-select: none;

View File

@ -4,14 +4,15 @@
<header>
<h1>Which map is this image from?</h1>
</header>
{% if guess %}
<div class="woof">
<div class="map">
{% if guess %}
<img src="/static/location-data/{{ location.id }}.png" class="map" loading="lazy">
<p class="guess">Your guess {{ guess.map }} is <span class="{{ guess.result }}">{{ guess.result }}</span>!</p>
{% else %}
<img src="/static/location-data/{{ location.id }}.png" class="map" loading="lazy">
{% endif %}
</div>
{% else %}
<img src="/static/location-data/{{ location.id }}.png" class="map" loading="lazy">
{% endif %}
<form action="/location/{{ location.id }}" method="get">
<label for="guess">Enter map to guess for:</label>
<input type="text" name="guess" id="guess" list="map-names" autofocus>