"woof" > "map" :)
parent
0529faf9bf
commit
23bfd45d52
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue